Update app.py

app.py

@@ -122,40 +122,29 @@ class GradioInterface:
     font-size: 1.2em;
 }
 
-/* Fix radio button styling */
+/* Fix radio button visibility */
 .gradio-radio {
-    background: white !important;
-    padding: 8px !important;
-    border-radius: 4px !important;
+    display: flex !important;
+    gap: 8px !important;
 }
 
-/* Style individual radio options */
+/* Style for radio button labels */
 .gradio-radio label {
-    display: inline-flex !important;
+    display: flex !important;
     align-items: center !important;
-    gap: 8px !important;
-    padding: 4px 8px !important;
+    padding: 6px 12px !important;
+    border: 1px solid #ddd !important;
     border-radius: 4px !important;
     cursor: pointer !important;
-    background: #f5f5f5 !important;
-    border: 1px solid #ddd !important;
-}
-
-/* Style the radio input itself */
-.gradio-radio input[type="radio"] {
-    width: 16px !important;
-    height: 16px !important;
-    margin: 0 !important;
-    border: 2px solid #ddd !important;
-    border-radius: 50% !important;
-    appearance: auto !important;
-    -webkit-appearance: auto !important;
+    background: white !important;
 }
 
-/* Style selected radio */
-.gradio-radio input[type="radio"]:checked {
+/* Style for selected radio button */
+.gradio-radio input[type="radio"]:checked + label {
+    background: #e3f2fd !important;
     border-color: #2196F3 !important;
-    background-color: #2196F3 !important;
+    color: #2196F3 !important;
+    font-weight: bold !important;
 }
 
 /* Container labels */
@@ -181,6 +170,36 @@ class GradioInterface:
     background: white !important;
     border-radius: 4px !important;
 }
+
+/* Make radio buttons more visible */
+input[type="radio"] {
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    width: 16px !important;
+    height: 16px !important;
+    border: 2px solid #ddd !important;
+    border-radius: 50% !important;
+    margin-right: 6px !important;
+    position: relative !important;
+    top: 2px !important;
+}
+
+input[type="radio"]:checked {
+    border-color: #2196F3 !important;
+    background: #2196F3 !important;
+}
+
+input[type="radio"]:checked::after {
+    content: "" !important;
+    width: 8px !important;
+    height: 8px !important;
+    background: white !important;
+    border-radius: 50% !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+}
 """
 
         with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as self.interface: