Upload app.py

app.py

@@ -116,7 +116,7 @@ a{ color:var(--primary-700)!important; }
 #results_hdr > .gr-column:first-child{ justify-self:start !important; }
 #results_hdr > .gr-column:last-child{ justify-self:end !important; }
 
-/* Language toggle (gr.Radio): make it look exactly like Marka/Tag, with no double-button layer */
+/* Language toggle (gr.Radio): style the LABEL as the button (robust across Gradio DOM variants) */
 .lang_toggle{
   background: transparent !important;
   justify-self:end !important;
@@ -138,6 +138,45 @@ a{ color:var(--primary-700)!important; }
   display:none!important;
 }
 
+/* Kill any default Gradio "pill" styling inside */
+.lang_toggle label *{
+  background:transparent!important;
+  box-shadow:none!important;
+  border:0!important;
+}
+
+/* The actual button */
+.lang_toggle label{
+  display:inline-flex !important;
+  align-items:center !important;
+  justify-content:center !important;
+  cursor:pointer !important;
+  user-select:none !important;
+
+  padding:0.35rem 0.85rem !important;
+  font-size:0.95rem !important;
+  border-radius:10px !important;
+
+  border:1px solid var(--primary-600) !important;
+  background: var(--primary-200) !important;  /* inactive: lighter than #89AFA9 */
+  color:#0b1b19 !important;                  /* black-ish */
+}
+
+/* Active/selected */
+.lang_toggle label:has(input:checked){
+  background: #89AFA9 !important;
+  border-color: var(--primary-600) !important;
+  color:#0b1b19 !important;
+}
+
+/* Hover: show #89AFA9 (inactive becomes active color on hover) */
+.lang_toggle label:hover{
+  background:#89AFA9 !important;
+  border-color: var(--primary-600) !important;
+  color:#0b1b19 !important;
+}
+
+
 /* Remove Gradio's default label styling completely */
 .lang_toggle label{
   background:transparent!important;