Update app.py

app.py

@@ -308,17 +308,12 @@ def show_leaderboard():
 # -------- UI --------
 GLASS_CSS = """
 :root {
-  --glass-bg: rgba(255, 255, 255, 0.06);
-  --glass-border: rgba(255, 255, 255, 0.12);
+  --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: #b0c4de;
-}
-
-.gradio-dropdown select, 
-.gradio-dropdown option {
-  color: ##4db8ff; 
-  background:#4db8ff;
+  --text-dim: #c0d4e0;
 }
 
 body { 
@@ -327,21 +322,19 @@ body {
   font-family: "Inter", sans-serif;
 }
 
-
-h2, h3, h4 {
+h1,h2,h3,h4 {
   color: var(--accent);
-  font-weight: 600;
+  font-weight: 700;
   text-shadow: 0 0 6px var(--accent-glow);
 }
 
 a {
-  color: #4db8ff;
+  color: #00d4ff;
   font-weight: 500;
   transition: 0.3s ease;
 }
-
 a:hover {
-  color: #80d4ff;
+  color: #80e0ff;
   text-decoration: underline;
   text-shadow: 0 0 6px var(--accent-glow);
 }
@@ -350,67 +343,62 @@ p, li {
   color: var(--text-main);
   line-height: 1.6;
 }
-
-ul {
-  margin-top: 6px;
-  margin-bottom: 12px;
-}
-
-.gradio-container {
-  color: var(--text-main);
-}
+ul { margin: 6px 0 12px 18px; }
 
 .card {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: 20px;
   padding: 24px;
-  backdrop-filter: blur(15px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
-  margin-top: 20px;
-  transition: all 0.4s ease-in-out;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
+  transition: all 0.3s ease-in-out;
 }
-
-/* Hover effect for cards */
 .card:hover {
   border-color: var(--accent);
   box-shadow: 0 16px 48px var(--accent-glow);
   transform: scale(1.03);
 }
 
-/* Buttons */
 button {
   background: var(--accent);
   color: #fff;
   border: none;
-  padding: 10px 24px;
+  padding: 12px 28px;
   border-radius: 12px;
   cursor: pointer;
-  transition: 0.3s ease;
+  transition: all 0.3s ease;
   box-shadow: 0 4px 15px var(--accent-glow);
 }
-
 button:hover {
   background: #00cfff;
   box-shadow: 0 6px 20px var(--accent-glow);
   transform: translateY(-2px);
 }
 
-/* Input fields */
-input, textarea {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+input, textarea, select {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   padding: 10px;
   color: var(--text-main);
   outline: none;
   transition: all 0.3s ease;
 }
-
-input:focus, textarea:focus {
+input:focus, textarea:focus, select:focus {
   border-color: var(--accent);
-  box-shadow: 0 0 10px var(--accent-glow);
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.gradio-dropdown select {
+  color: #eaf6ff;
+  background: rgba(0, 20, 40, 0.8);
 }
+
+.gradio-markdown, .gradio-html {
+  color: var(--text-main);
+}
+
 """
 
 with gr.Blocks(css=GLASS_CSS, title="Road2Success —Dashboard") as app: