blue

app.py

@@ -527,6 +527,23 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
                    background-color: var(--background-fill-secondary) !important;
                }
 
+               /* Light blue background for model predictions panel */
+               .model-predictions-panel {
+                   border: 1px solid #6B8CBF !important;
+                   background: #D6E4F5 !important;
+                   border-radius: var(--radius-lg);
+                   padding: 0.3rem !important;
+                   margin: 0.2rem 0 !important;
+               }
+               .model-predictions-panel .flex {
+                   background-color: #D6E4F5 !important;
+                   padding: 0 !important;
+                   margin: 0 !important;
+               }
+               .model-predictions-panel * {
+                   color: #1a1a1a !important;
+               }
+
                /* Popup overlay styles */
                .popup-overlay {
                    position: fixed;
@@ -898,14 +915,14 @@ with gr.Blocks(title="CODA: Wildlife Photo Classification Challenge",
         # Create buttons for each species
         species_buttons = []
         for species_name in SPECIES_MAP.values():
-            btn = gr.Button(species_name, variant="secondary", size="lg")
+            btn = gr.Button(species_name, variant="primary", size="lg")
             species_buttons.append(btn)
 
         # Add "I don't know" button
         idk_button = gr.Button("I don't know", variant="primary", size="lg")
 
     # Model predictions panel (full width, single line)
-    with gr.Group(elem_classes="subtle-outline"):
+    with gr.Group(elem_classes="model-predictions-panel"):
         with gr.Column(elem_classes="flex items-center justify-center h-full"):
             model_predictions_display = gr.Markdown(
                 "### Model Predictions\n\n*Start the demo to see model votes!*",