Upload app.py

app.py

@@ -89,12 +89,19 @@ a{ color:var(--primary-700)!important; }
   white-space: normal !important; width: 64% !important;
 }
 
-/* Results header row: kill ALL white "cards"/panels behind the language buttons */
+/* Selected = match Marka/Tag exactly */
+/* Hover = subtle */
+/* Keep selected button color on hover; only lighten UNSELECTED on hover */
+/* Push language buttons fully to the right */
+#results_hdr > .gr-markdown{
+  flex:1 1 auto !important;
+}
+/* Results header row: two-column layout, title left, toggle hard-right */
 #results_hdr{
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  gap:12px;
+  display:grid !important;
+  grid-template-columns: 1fr auto !important;
+  align-items:center !important;
+  gap:12px !important;
   padding:0 !important;
   margin:0 !important;
   background:transparent !important;
@@ -104,22 +111,15 @@ a{ color:var(--primary-700)!important; }
 #results_hdr, #results_hdr *{
   background:transparent !important;
   box-shadow:none !important;
-}
-#results_hdr .gr-block,
-#results_hdr .gr-panel,
-#results_hdr .gr-box,
-#results_hdr .gr-group,
-#results_hdr .gr-form,
-#results_hdr .gr-row,
-#results_hdr .gr-column{
-  background:transparent !important;
-  box-shadow:none !important;
   border:0 !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) — remove Gradio's own button styling, keep only ours */
+/* Language toggle (gr.Radio): make it look exactly like Marka/Tag, with no double-button layer */
 .lang_toggle{
   background: transparent !important;
+  justify-self:end !important;
 }
 .lang_toggle fieldset{
   border:0!important;
@@ -134,20 +134,21 @@ a{ color:var(--primary-700)!important; }
   padding:0!important;
   margin:0!important;
 }
+.lang_toggle input{
+  display:none!important;
+}
+
+/* Remove Gradio's default label styling completely */
 .lang_toggle label{
-  /* This removes the OUTER "button" Gradio paints */
   background:transparent!important;
   border:0!important;
   padding:0!important;
   margin:0!important;
   box-shadow:none!important;
-  border-radius:0!important;
-}
-.lang_toggle input{
-  display:none!important; /* no cursor, no default radio */
 }
+
+/* Single visible button layer */
 .lang_toggle label span{
-  /* This is the ONLY visible button layer */
   all: unset;
   display:inline-block;
   cursor:pointer;
@@ -156,33 +157,23 @@ a{ color:var(--primary-700)!important; }
   font-size:0.95rem;
   border-radius:10px;
   border:1px solid var(--primary-600);
-  background: transparent; /* same as page background */
+  background: transparent; /* same as page */
   color:#0b1b19;
   box-shadow:none!important;
-  outline:none!important;
 }
-/* Selected = match Marka/Tag exactly */
-.lang_toggle input:checked + span{
+
+/* Selected state (robust selectors) */
+.lang_toggle input:checked ~ span,
+.lang_toggle label:has(input:checked) span{
   background:var(--primary-500)!important;
   border-color:var(--primary-600)!important;
   color:#0b1b19!important;
 }
-/* Hover = subtle */
-/* Keep selected button color on hover; only lighten UNSELECTED on hover */
-.lang_toggle label:hover input:not(:checked) + span{
-  background:var(--primary-200)!important;
-}
 
-/* Push language buttons fully to the right */
-#results_hdr{
-  width:100% !important;
-}
-#results_hdr > .gr-markdown{
-  flex:1 1 auto !important;
-}
-.lang_toggle{
-  margin-left:auto !important;
-  justify-content:flex-end !important;
+/* Hover: only unselected gets light background */
+.lang_toggle label:hover input:not(:checked) ~ span,
+.lang_toggle label:hover:not(:has(input:checked)) span{
+  background:var(--primary-200)!important;
 }
 """