Update app.py

app.py

@@ -788,43 +788,63 @@ custom_css = """
     }
 }
 
+/* ===============================
+   ★Radioの「選択中」を確実に見えるように（:has() 不要版）
+   =============================== */
+
+/* まず選択肢の並びを「行っぽく」整える */
+.gradio-container .gr-radio label {
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  margin: 6px 0 !important;
+}
+
+/* labelの中にある “文字部分” が span のケースが多いので、spanを箱にする */
+.gradio-container .gr-radio label > span {
+  display: block !important;
+  padding: 10px 12px !important;
+  border-radius: 10px !important;
+  border: 1px solid transparent !important;
+}
+
+/* checked のとき、inputの直後のspanをハイライト */
 @media (prefers-color-scheme: light) {
-  /* 選択中のラジオ行をハイライト */
-  .gradio-container .gr-radio label:has(input[type="radio"]:checked),
-  .gradio-container .gr-radio .wrap label:has(input[type="radio"]:checked) {
+  .gradio-container .gr-radio label > input[type="radio"]:checked + span {
     background: #eef2ff !important;
-    border: 1px solid #c7d2fe !important;
-    border-radius: 10px !important;
-    padding: 10px 12px !important;
+    border-color: #c7d2fe !important;
+    color: #111 !important;
   }
+}
 
-  /* 全てのラジオ行に少しだけ余白（見やすさ） */
-  .gradio-container .gr-radio label,
-  .gradio-container .gr-radio .wrap label {
-    display: flex !important;
-    align-items: center !important;
-    gap: 10px !important;
-    padding: 8px 12px !important;
+@media (prefers-color-scheme: dark) {
+  .gradio-container .gr-radio label > input[type="radio"]:checked + span {
+    background: #1f2937 !important;
+    border-color: #374151 !important;
+    color: #f0f0f0 !important;
+  }
+}
+
+/* もし span じゃなく div になってる版のGradioでも効くように追加（保険） */
+@media (prefers-color-scheme: light) {
+  .gradio-container .gr-radio label > input[type="radio"]:checked + div,
+  .gradio-container .gr-radio label > input[type="radio"]:checked + p {
+    background: #eef2ff !important;
+    border: 1px solid #c7d2fe !important;
     border-radius: 10px !important;
+    padding: 10px 12px !important;
+    color: #111 !important;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  .gradio-container .gr-radio label:has(input[type="radio"]:checked),
-  .gradio-container .gr-radio .wrap label:has(input[type="radio"]:checked) {
+  .gradio-container .gr-radio label > input[type="radio"]:checked + div,
+  .gradio-container .gr-radio label > input[type="radio"]:checked + p {
     background: #1f2937 !important;
     border: 1px solid #374151 !important;
     border-radius: 10px !important;
     padding: 10px 12px !important;
-  }
-
-  .gradio-container .gr-radio label,
-  .gradio-container .gr-radio .wrap label {
-    display: flex !important;
-    align-items: center !important;
-    gap: 10px !important;
-    padding: 8px 12px !important;
-    border-radius: 10px !important;
+    color: #f0f0f0 !important;
   }
 }
 """