Update app.py

app.py

@@ -993,20 +993,101 @@ def export_calculations_wrapper():
 CSS = """
 body { background: #f6f8f4; }
 .gradio-container { max-width: 1200px !important; margin: auto !important; }
+
 .main-title { text-align: center; padding: 15px 10px 5px 10px; }
 .main-title h1 { font-size: 34px; margin-bottom: 4px; }
 .main-title p { font-size: 17px; color: #555; }
-.answer-box { background: white; border-radius: 16px; padding: 16px 20px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); min-height: 400px; }
-.email-box { border: 2px solid #d9e7d2; border-radius: 12px; padding: 10px; background: #fbfdf9; }
+
+.answer-box { 
+    background: white; 
+    border-radius: 16px; 
+    padding: 16px 20px; 
+    border: 1px solid #e5e7eb; 
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
+    min-height: 400px; 
+}
+
+.email-box { 
+    border: 2px solid #d9e7d2; 
+    border-radius: 12px; 
+    padding: 10px; 
+    background: #fbfdf9; 
+}
+
 button { min-height: 48px !important; }
-.admin-login { border: 2px solid #d97706; border-radius: 12px; padding: 15px; background: #fffbeb; }
-.share-btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: white; }
-.share-btn-whatsapp { background: #25D366; }
-.share-btn-email { background: #ea4335; }
-.share-btn-facebook { background: #1877f2; }
-.share-btn-twitter { background: #000000; }
-"""
+.admin-login { 
+    border: 2px solid #d97706; 
+    border-radius: 12px; 
+    padding: 15px; 
+    background: #fffbeb; 
+}
+
+/* ============================================================
+   MOBILE VISIBILITY FIX - Make numbers bold and dark
+   ============================================================ */
+
+/* Quick Answer numbers */
+.quick-answer-number {
+    font-size: 28px !important;
+    font-weight: 900 !important;
+    color: #166534 !important;
+}
+
+.quick-answer-approx {
+    font-size: 24px !important;
+    font-weight: 800 !important;
+    color: #1e40af !important;
+}
+
+/* Feed Breakdown numbers */
+.feed-table td:last-child {
+    font-weight: 700 !important;
+    color: #1e293b !important;
+}
 
+/* Feed Cost number */
+.feed-cost-value {
+    font-size: 30px !important;
+    font-weight: 900 !important;
+    color: #1e40af !important;
+}
+
+/* Expected Performance numbers */
+.performance-value {
+    font-weight: 700 !important;
+    color: #1e293b !important;
+}
+
+/* All number values in results */
+.answer-box strong, 
+.answer-box b {
+    font-weight: 700 !important;
+    color: #1e293b !important;
+}
+
+/* Make all table values darker */
+table td {
+    color: #1e293b !important;
+}
+
+/* Specific to the quick answer area */
+div[style*="background: #f0fdf4"] strong,
+div[style*="background: #f0fdf4"] b {
+    color: #166534 !important;
+    font-weight: 700 !important;
+}
+
+div[style*="background: #f0fdf4"] .big-number {
+    color: #166534 !important;
+    font-weight: 800 !important;
+}
+
+/* The approx purchase number */
+div[style*="color: #1e40af"] {
+    color: #1e40af !important;
+    font-weight: 800 !important;
+}
+"""
 
 # ============================================================
 # UI