Enhance prediction display styling in app.py

- Add !important declarations to ensure consistent color application
- Improve font family with system fonts for better readability
- Enhance font weights for better visual hierarchy in prediction boxes
- Make text colors more specific and consistent
- Update comments to be more descriptive of styling enhancements

app.py

@@ -152,20 +152,30 @@ def classify_feedback(text):
         """
 
         for i, (topic, probability) in enumerate(predictions, 1):
-            # Add prediction box with fixed color
+            # Add prediction box with fixed color and enhanced specificity
             html_output += f"""
             <div style="
-                background-color: #009999;
-                color: #ffffff;
+                background-color: #009999 !important;
+                color: #ffffff !important;
                 padding: 15px;
                 border-radius: 8px;
                 margin-bottom: 10px;
                 font-weight: 500;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             ">
-                <div style="font-size: 16px; margin-bottom: 5px;">
+                <div style="
+                    font-size: 16px; 
+                    margin-bottom: 5px; 
+                    color: #ffffff !important;
+                    font-weight: 600;
+                ">
                     {i}. {topic}
                 </div>
-                <div style="font-size: 14px; opacity: 0.9;">
+                <div style="
+                    font-size: 14px; 
+                    opacity: 0.9;
+                    color: #ffffff !important;
+                ">
                     Confidence: {probability:.1%}
                 </div>
             </div>