Update app.py

app.py

@@ -122,30 +122,44 @@ class GradioInterface:
     font-size: 1.2em;
 }
 
-/* Add light gray border to input fields */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select,
-.gradio-container .gr-box,
-.gradio-container .gr-input,
-.gradio-container .gr-text-input {
-    border: 1px solid #ddd !important;
-    background: white !important;
-    border-radius: 4px !important;
+/* Style radio buttons */
+.gradio-radio {
+    display: flex !important;
+    gap: 8px !important;
+    background: #f5f5f5 !important;
     padding: 8px !important;
+    border-radius: 4px !important;
 }
 
-/* Style radio buttons container */
-.radio-group {
-    display: flex;
-    gap: 8px;
-    margin: 6px 0;
-    padding: 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: white;
+.gradio-radio 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: 0 !important;
+    position: relative !important;
 }
 
+.gradio-radio input[type="radio"]:checked {
+    border-color: #2196F3 !important;
+    background: #2196F3 !important;
+}
+
+.gradio-radio 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;
+}
+
+/* Container labels */
 .title-container::before { content: ''; }
 .input-container::before { content: 'PROMPT REFINEMENT'; }
 .analysis-container::before { content: 'ANALYSIS & REFINEMENT'; }
@@ -153,10 +167,20 @@ class GradioInterface:
 .results-container::before { content: 'RESULTS'; }
 .examples-container::before { content: 'EXAMPLES'; }
 
-/* Remove focus outlines but keep borders */
-*:focus {
-    outline: none !important;
-    border-color: #2196F3 !important;
+/* Radio group styling */
+.radio-group {
+    display: flex;
+    gap: 8px;
+    margin: 6px 0;
+}
+
+/* Remove default gradio container styles but keep input borders */
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+    border: 1px solid #ddd !important;
+    background: white !important;
+    border-radius: 4px !important;
 }
 """