Update app.py

app.py

@@ -545,7 +545,30 @@ html, body, gradio-app { min-height: 100%; background: var(--ink) !important; }
 .sheet, .sheet p, .sheet li, .sheet h2, .sheet div, .sheet span, .sheet a { color: var(--paper); }
 .sheet .eyebrow, .sheet .alt-meta, .sheet .alt-pct, .sheet .near-meta,
 .sheet .titleblock, .sheet .cut-label { color: var(--line); }
-.sheet .period, .sheet .cut-figure, .sheet .tick, .sheet .err-title { color: var(--redline); }
+.sheet .period, .sheet .cut-figure, .sheet .tick, .sheet /* Geocoder feedback and secondary buttons: Gradio's prose and button themes
+   both default light, so they need explicit overrides here. */
+#place_note, #place_note *, #place_note p, #place_note strong {
+  color: #A9C9DF !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: .74rem !important; line-height: 1.6 !important; margin: 4px 0 !important;
+}
+#place_note strong { color: var(--paper) !important; }
+
+#controls button.secondary, #controls button.sm, #controls .form button {
+  background: rgba(11,31,47,.85) !important;
+  border: 1px solid rgba(143,182,208,.55) !important;
+  color: var(--paper) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: .7rem !important; letter-spacing: .1em !important;
+  text-transform: uppercase !important;
+}
+#controls button.secondary:hover, #controls .form button:hover {
+  border-color: var(--redline) !important; color: var(--redline) !important;
+}
+#controls textarea, #controls textarea::placeholder { color: var(--paper) !important; }
+#controls textarea::placeholder { color: rgba(143,182,208,.7) !important; }
+
+.err-title { color: var(--redline); }
 .sheet.empty { color: var(--line); }
 .sheet.empty p { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; line-height: 1.7; }
 
@@ -617,7 +640,7 @@ footer, .gradio-container footer { background: transparent !important; margin-to
 
 /* Gradio's own widgets default to a light theme; bring them onto the sheet. */
 #controls .block, #controls .form, #controls .wrap,
-#controls input, #controls textarea,
+#controls input:not([type="checkbox"]), #controls textarea,
 #controls .image-container, #controls [data-testid="block-label"] {
   background: rgba(11,31,47,.72) !important;
   border-color: rgba(143,182,208,.45) !important;
@@ -628,9 +651,50 @@ footer, .gradio-container footer { background: transparent !important; margin-to
 }
 #controls .image-frame, #controls .upload-container { background: rgba(11,31,47,.72) !important; }
 #controls label span, #controls .head, #controls span[data-testid] { color: var(--line) !important; }
-#controls input[type="checkbox"] { accent-color: var(--redline); }
+/* Explicit checkbox styling: visible in both states against the ink ground. */
+#controls input[type="checkbox"] {
+  appearance: none; -webkit-appearance: none;
+  width: 18px; height: 18px; min-width: 18px;
+  border: 1px solid var(--line) !important;
+  background: rgba(11,31,47,.85) !important;
+  border-radius: 2px; cursor: pointer; position: relative;
+  display: inline-block; vertical-align: middle;
+}
+#controls input[type="checkbox"]:checked {
+  background: var(--redline) !important;
+  border-color: var(--redline) !important;
+}
+#controls input[type="checkbox"]:checked::after {
+  content: ""; position: absolute; left: 5px; top: 1px;
+  width: 5px; height: 10px; border: solid #fff;
+  border-width: 0 2px 2px 0; transform: rotate(45deg);
+}
+#controls input[type="checkbox"]:focus-visible { outline: 2px solid var(--redline); outline-offset: 2px; }
 #controls .head svg, #controls .icon svg { color: var(--line) !important; }
 
+/* Geocoder feedback and secondary buttons: Gradio's prose and button themes
+   both default light, so they need explicit overrides here. */
+#place_note, #place_note *, #place_note p, #place_note strong {
+  color: #A9C9DF !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: .74rem !important; line-height: 1.6 !important; margin: 4px 0 !important;
+}
+#place_note strong { color: var(--paper) !important; }
+
+#controls button.secondary, #controls button.sm, #controls .form button {
+  background: rgba(11,31,47,.85) !important;
+  border: 1px solid rgba(143,182,208,.55) !important;
+  color: var(--paper) !important;
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-size: .7rem !important; letter-spacing: .1em !important;
+  text-transform: uppercase !important;
+}
+#controls button.secondary:hover, #controls .form button:hover {
+  border-color: var(--redline) !important; color: var(--redline) !important;
+}
+#controls textarea, #controls textarea::placeholder { color: var(--paper) !important; }
+#controls textarea::placeholder { color: rgba(143,182,208,.7) !important; }
+
 .err-title { font-family: 'Archivo Narrow', sans-serif; color: var(--redline); font-size: 1.4rem; margin: 0 0 6px; }
 .err-msg { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; color: var(--paper); }
 .err-trace {
@@ -679,7 +743,7 @@ with gr.Blocks(css=CSS, title="Facade — architectural style finder",
             with gr.Row():
                 find = gr.Button("Find on map", size="sm")
                 here = gr.Button("Use my device location", size="sm")
-            place_note = gr.Markdown("")
+            place_note = gr.Markdown("", elem_id="place_note")
             with gr.Row():
                 lat = gr.Number(label="Latitude", value=32.0771, precision=4)
                 lon = gr.Number(label="Longitude", value=34.7745, precision=4)
@@ -718,4 +782,4 @@ with gr.Blocks(css=CSS, title="Facade — architectural style finder",
     go.click(identify, [img, use_loc, lat, lon, weight], out)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()