Update app.py

app.py

@@ -308,35 +308,35 @@ def show_leaderboard():
 # -------- UI --------
 GLASS_CSS = """
 :root {
-  --glass-bg: rgba(255, 255, 255, 0.15);
-  --glass-border: rgba(255, 255, 255, 0.25);
-  --accent: #00aaff;
-  --accent-glow: rgba(0, 170, 255, 0.6);
-  --text-main: #eaf6ff;
-  --text-dim: #c0d4e0;
+  --glass-bg: rgba(255, 255, 255, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.8);
+  --accent: #0077cc;
+  --accent-glow: rgba(0, 119, 204, 0.5);
+  --text-main: #012b50;
+  --text-dim: #034a8f;
 }
 
 body { 
-  background: linear-gradient(135deg,#071028 0%, #0b1f3a 100%); 
-  color: var(--text-main); 
+  background: linear-gradient(135deg, #cce6ff 0%, #99ccff 100%);
+  color: var(--text-main);
   font-family: "Inter", sans-serif;
 }
 
 h1,h2,h3,h4 {
   color: var(--accent);
   font-weight: 700;
-  text-shadow: 0 0 6px var(--accent-glow);
+  text-shadow: 0 0 4px var(--accent-glow);
 }
 
 a {
-  color: #00d4ff;
+  color: #005ea6;
   font-weight: 500;
   transition: 0.3s ease;
 }
 a:hover {
-  color: #80e0ff;
+  color: #0099ff;
   text-decoration: underline;
-  text-shadow: 0 0 6px var(--accent-glow);
+  text-shadow: 0 0 4px var(--accent-glow);
 }
 
 p, li {
@@ -350,14 +350,14 @@ ul { margin: 6px 0 12px 18px; }
   border: 1px solid var(--glass-border);
   border-radius: 20px;
   padding: 24px;
-  backdrop-filter: blur(12px);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
   transition: all 0.3s ease-in-out;
 }
 .card:hover {
   border-color: var(--accent);
-  box-shadow: 0 16px 48px var(--accent-glow);
-  transform: scale(1.03);
+  box-shadow: 0 12px 36px var(--accent-glow);
+  transform: scale(1.02);
 }
 
 button {
@@ -368,17 +368,17 @@ button {
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px var(--accent-glow);
+  box-shadow: 0 4px 12px var(--accent-glow);
 }
 button:hover {
-  background: #00cfff;
-  box-shadow: 0 6px 20px var(--accent-glow);
+  background: #0099ff;
+  box-shadow: 0 6px 18px var(--accent-glow);
   transform: translateY(-2px);
 }
 
 input, textarea, select {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0,0,0,0.2);
   border-radius: 12px;
   padding: 10px;
   color: var(--text-main);
@@ -387,12 +387,28 @@ input, textarea, select {
 }
 input:focus, textarea:focus, select:focus {
   border-color: var(--accent);
-  box-shadow: 0 0 12px var(--accent-glow);
+  box-shadow: 0 0 8px var(--accent-glow);
 }
 
 .gradio-dropdown select {
-  color: #eaf6ff;
-  background: rgba(0, 20, 40, 0.8);
+  color: var(--text-main);
+  background-color: #cce6ff;
+  border: 1px solid rgba(0,0,0,0.2);
+  border-radius: 12px;
+  padding: 8px;
+}
+.gradio-dropdown select option {
+  color: var(--text-main);
+  background-color: #99ccff;
+}
+
+.gradio-radio label {
+  color: var(--text-main);
+  cursor: pointer;
+  transition: 0.2s ease;
+}
+.gradio-radio input[type="radio"]:checked + label {
+  color: var(--accent);
 }
 
 .gradio-markdown, .gradio-html {