Update app.py

app.py

@@ -571,7 +571,7 @@ def get_share_links(app_url="https://howmuchfeed.com"):
 
 
 # ============================================================
-# FEED CALCULATION - MOBILE-FRIENDLY WITH FIXED COLORS
+# FEED CALCULATION
 # ============================================================
 
 def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_code, breed, request: gr.Request):
@@ -645,7 +645,7 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     # Generate share links
     share_links = get_share_links()
 
-    # Output HTML - COMPLETELY REWRITTEN FOR MOBILE
+    # Output HTML
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -654,340 +654,102 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
         age_text += f" + {days} day{'s' if days != 1 else ''}"
 
     html = f"""
-    <div style="
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-size: 15px;
-        line-height: 1.5;
-        color: #1a1a1a;
-        background: #ffffff;
-        border-radius: 12px;
-        padding: 12px 14px;
-        border: 1px solid #e5e7eb;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        margin: 0;
-        width: 100%;
-        box-sizing: border-box;
-    ">
-
-    <!-- Quick Answer Box -->
-    <div style="
-        background: #f0fdf4;
-        border: 2px solid #22c55e;
-        border-radius: 10px;
-        padding: 14px 16px;
-        margin-bottom: 14px;
-        background-color: #f0fdf4 !important;
-    ">
-        <div style="
-            font-size: 12px;
-            font-weight: 700;
-            color: #16a34a;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 4px;
-            background: transparent;
-        ">Here Is Your Result</div>
+    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.5; color: #1a1a1a; background: #ffffff; border-radius: 12px; padding: 12px 14px; border: 1px solid #e5e7eb; width: 100%; box-sizing: border-box;">
+
+    <div style="background: #f0fdf4; border: 2px solid #22c55e; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;">
+        <div style="font-size: 12px; font-weight: 700; color: #16a34a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📊 Your Feed Estimate</div>
         
-        <div style="
-            font-size: 16px;
-            font-weight: 700;
-            color: #166534;
-            background: transparent;
-        ">
+        <div style="font-size: 16px; font-weight: 700; color: #166534;">
             You need
-            <span style="
-                display: inline-block;
-                background: #166534;
-                color: #ffffff;
-                border-radius: 6px;
-                padding: 2px 12px;
-                font-size: 20px;
-                font-weight: 800;
-                background-color: #166534 !important;
-            ">{total_bags:.1f}</span>
-            bags of {bag_size} kg poultry feed to raise <strong>{birds:,}</strong> {breed} broilers from day-old to <strong>{age_text} ({total_days} days)</strong>
+            <span style="display: inline-block; background: #166534; color: #ffffff; border-radius: 6px; padding: 2px 12px; font-size: 20px; font-weight: 800;">
+                {total_bags:.1f}
+            </span>
+            bags of {bag_size} kg feed
         </div>
-        
-        <div style="
-            margin-top: 6px;
-            font-size: 16px;
-            font-weight: 700;
-            color: #1e40af;
-            background: transparent;
-        ">
-            Buy
-            <span style="
-                display: inline-block;
-                background: #1e40af;
-                color: #ffffff;
-                border-radius: 6px;
-                padding: 2px 12px;
-                font-size: 18px;
-                font-weight: 800;
-                background-color: #1e40af !important;
-            ">{rounded_bags}</span>
-            bags to make sure you have enough feed.
-        </div>
-        
-        <div style="
-            margin-top: 6px;
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            font-size: 13px;
-            color: #4b5563;
-            background: transparent;
-        ">
-            <span>🐔 <strong>{birds:,}</strong></span>
-            <span>📅 <strong>{age_text}</strong></span>
-            <span>🏷️ <strong>{breed}</strong></span>
+        <div style="font-size: 14px; color: #374151; margin-top: 4px;">
+            To raise <strong>{birds:,}</strong> {breed} broilers from day-old to <strong>{age_text} ({total_days} days)</strong>
         </div>
-        
-        <div style="
-            margin-top: 6px;
-            display: flex;
-            gap: 6px;
-            font-size: 12px;
-            background: transparent;
-        ">
-            <span style="
-                background: {breed_color};
-                color: #ffffff;
-                padding: 2px 10px;
-                border-radius: 10px;
-                font-weight: 600;
-                background-color: {breed_color} !important;
-            ">{breed}</span>
-            <span style="
-                background: #6b7280;
-                color: #ffffff;
-                padding: 2px 10px;
-                border-radius: 10px;
-                font-weight: 600;
-                background-color: #6b7280 !important;
-            ">{country_name}</span>
+        <div style="margin-top: 6px; font-size: 15px; font-weight: 700; color: #1e40af;">
+            Buy
+            <span style="display: inline-block; background: #1e40af; color: #ffffff; border-radius: 6px; padding: 2px 12px; font-size: 18px; font-weight: 800;">
+                {rounded_bags}
+            </span>
+            bags (rounded up for safety)
         </div>
     </div>
 
-    <!-- Feed Breakdown Table -->
-    <div style="margin-bottom: 12px; background: transparent;">
-        <div style="
-            font-size: 12px;
-            font-weight: 700;
-            color: #6b7280;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 6px;
-            background: transparent;
-        ">Feed Breakdown</div>
-        
-        <table style="
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 14px;
-            background: #ffffff;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            overflow: hidden;
-        ">
+    <div style="margin-bottom: 12px;">
+        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">🌾 Feed Breakdown</div>
+        <table style="width: 100%; border-collapse: collapse; font-size: 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
             <thead>
                 <tr style="background: #f8fafc; border-bottom: 2px solid #e5e7eb;">
-                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #1a1a1a; background: #f8fafc;">Stage</th>
-                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a; background: #f8fafc;">Feed (kg)</th>
-                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a; background: #f8fafc;">Bags (25 kg)</th>
+                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #1a1a1a;">Stage</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a;">Feed (kg)</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #1a1a1a;">Bags (25 kg)</th>
                 </tr>
             </thead>
             <tbody>
                 <tr style="border-bottom: 1px solid #e5e7eb;">
-                    <td style="padding: 8px 10px; color: #1a1a1a; background: #ffffff;"><strong>Starter</strong></td>
-                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a; background: #ffffff;">{starter_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b; background: #ffffff;">{starter_bags_display}</td>
+                    <td style="padding: 8px 10px; color: #1a1a1a;"><strong>🌱 Starter</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a;">{starter_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b;">{starter_bags_display}</td>
                 </tr>
                 <tr style="border-bottom: 1px solid #e5e7eb;">
-                    <td style="padding: 8px 10px; color: #1a1a1a; background: #ffffff;"><strong>Finisher</strong></td>
-                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a; background: #ffffff;">{finisher_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b; background: #ffffff;">{finisher_bags_display}</td>
+                    <td style="padding: 8px 10px; color: #1a1a1a;"><strong>🌽 Finisher</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a;">{finisher_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #1e293b;">{finisher_bags_display}</td>
                 </tr>
                 <tr style="background: #f8fafc; font-weight: 700;">
-                    <td style="padding: 8px 10px; color: #1a1a1a; background: #f8fafc;">TOTAL</td>
-                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a; background: #f8fafc;">{total_feed_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 16px; color: #166534; background: #f8fafc;">{total_bags:.1f}</td>
+                    <td style="padding: 8px 10px; color: #1a1a1a;">TOTAL</td>
+                    <td style="padding: 8px 10px; text-align: right; color: #1a1a1a;">{total_feed_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 16px; color: #166534;">{total_bags:.1f}</td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <!-- Feed Cost Box -->
-    <div style="
-        background: #eff6ff;
-        border: 2px solid #3b82f6;
-        border-radius: 10px;
-        padding: 12px 16px;
-        margin-bottom: 12px;
-        background-color: #eff6ff !important;
-    ">
-        <div style="
-            font-size: 12px;
-            font-weight: 700;
-            color: #6b7280;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 2px;
-            background: transparent;
-        ">Feed Cost Estimate</div>
-        
-        <div style="
-            display: flex;
-            align-items: baseline;
-            gap: 6px;
-            flex-wrap: wrap;
-            font-size: 14px;
-            background: transparent;
-        ">
-            <span style="color: #4b5563; background: transparent;">Approx</span>
-            <span style="
-                display: inline-block;
-                background: #1e40af;
-                color: #ffffff;
-                border-radius: 6px;
-                padding: 2px 12px;
-                font-size: 18px;
-                font-weight: 700;
-                background-color: #1e40af !important;
-            ">{rounded_bags}</span>
-            <span style="color: #4b5563; background: transparent;">bags × {currency_symbol}{price_per_bag:,.0f}</span>
+    <div style="background: #eff6ff; border: 2px solid #3b82f6; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;">
+        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">💰 Feed Cost</div>
+        <div style="display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px;">
+            <span style="color: #4b5563;">Approximately</span>
+            <span style="display: inline-block; background: #1e40af; color: #ffffff; border-radius: 6px; padding: 2px 12px; font-size: 18px; font-weight: 700;">
+                {rounded_bags}
+            </span>
+            <span style="color: #4b5563;">bags × {currency_symbol}{price_per_bag:,.0f}</span>
         </div>
-        
-        <div style="
-            font-size: 24px;
-            font-weight: 800;
-            color: #1e40af;
-            margin-top: 2px;
-            background: transparent;
-        ">
+        <div style="font-size: 24px; font-weight: 800; color: #1e40af; margin-top: 2px;">
             {currency_symbol}{total_cost:,.0f}
         </div>
     </div>
 
-    <!-- Expected Performance -->
-    <div style="
-        border-top: 1px solid #e5e7eb;
-        padding-top: 10px;
-        margin-bottom: 12px;
-        background: transparent;
-    ">
-        <div style="
-            font-size: 12px;
-            font-weight: 700;
-            color: #6b7280;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 4px;
-            background: transparent;
-        ">Expected Performance</div>
-        
-        <div style="
-            display: flex;
-            gap: 16px;
-            flex-wrap: wrap;
-            font-size: 14px;
-            background: transparent;
-        ">
-            <div style="background: transparent;">
-                Body weight: <span style="font-weight: 700; color: #1a1a1a;">{expected_weight:.3f} kg</span>
-            </div>
-            <div style="background: transparent;">
-                Flock weight: <span style="font-weight: 700; color: #1a1a1a;">{flock_weight:,.1f} kg</span>
-            </div>
+    <div style="border-top: 1px solid #e5e7eb; padding-top: 10px; margin-bottom: 12px;">
+        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📈 Expected Performance</div>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px;">
+            <div>Body weight: <span style="font-weight: 700; color: #1a1a1a;">{expected_weight:.3f} kg</span></div>
+            <div>Flock weight: <span style="font-weight: 700; color: #1a1a1a;">{flock_weight:,.1f} kg</span></div>
         </div>
     </div>
 
-    <!-- Share Buttons -->
-    <div style="
-        border-top: 1px solid #e5e7eb;
-        padding-top: 12px;
-        background: transparent;
-    ">
-        <div style="
-            font-size: 12px;
-            font-weight: 700;
-            color: #6b7280;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 6px;
-            background: transparent;
-        ">Share Results</div>
-        
-        <div style="
-            display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
-            background: transparent;
-        ">
+    <div style="border-top: 1px solid #e5e7eb; padding-top: 12px;">
+        <div style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">📤 Share Results</div>
+        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
             <a href="{share_links['whatsapp']}" target="_blank" style="text-decoration: none;">
-                <span style="
-                    display: inline-block;
-                    background: #25D366;
-                    color: #ffffff;
-                    padding: 6px 14px;
-                    border-radius: 6px;
-                    font-size: 13px;
-                    font-weight: 600;
-                    cursor: pointer;
-                    background-color: #25D366 !important;
-                ">WhatsApp</span>
+                <span style="display: inline-block; background: #25D366; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">WhatsApp</span>
             </a>
             <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
-                <span style="
-                    display: inline-block;
-                    background: #ea4335;
-                    color: #ffffff;
-                    padding: 6px 14px;
-                    border-radius: 6px;
-                    font-size: 13px;
-                    font-weight: 600;
-                    cursor: pointer;
-                    background-color: #ea4335 !important;
-                ">Email</span>
+                <span style="display: inline-block; background: #ea4335; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">Email</span>
             </a>
             <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
-                <span style="
-                    display: inline-block;
-                    background: #1877f2;
-                    color: #ffffff;
-                    padding: 6px 14px;
-                    border-radius: 6px;
-                    font-size: 13px;
-                    font-weight: 600;
-                    cursor: pointer;
-                    background-color: #1877f2 !important;
-                ">Facebook</span>
+                <span style="display: inline-block; background: #1877f2; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">Facebook</span>
             </a>
             <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
-                <span style="
-                    display: inline-block;
-                    background: #000000;
-                    color: #ffffff;
-                    padding: 6px 14px;
-                    border-radius: 6px;
-                    font-size: 13px;
-                    font-weight: 600;
-                    cursor: pointer;
-                    background-color: #000000 !important;
-                ">Twitter/X</span>
+                <span style="display: inline-block; background: #000000; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;">Twitter/X</span>
             </a>
         </div>
     </div>
 
-    <div style="
-        margin-top: 10px;
-        font-size: 11px;
-        color: #9ca3af;
-        border-top: 1px solid #f3f4f6;
-        padding-top: 8px;
-        background: transparent;
-    ">
-        Estimate based on {breed} benchmark. Actual results may vary.
+    <div style="margin-top: 10px; font-size: 11px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 8px;">
+        ⚠️ Estimate based on {breed} benchmark. Actual results may vary.
     </div>
     </div>
     """
@@ -1206,15 +968,11 @@ def export_calculations_wrapper():
 
 
 # ============================================================
-# CSS - FORCE LIGHT THEME
+# CSS
 # ============================================================
 
 CSS = """
-/* Reset everything - force light theme */
-* {
-    color: #1a1a1a !important;
-}
-
+/* Force light theme */
 body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
     background-color: #f6f8f4 !important;
     color: #1a1a1a !important;
@@ -1223,7 +981,6 @@ body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
 .gradio-container {
     max-width: 100% !important;
     padding: 6px 8px !important;
-    background-color: #f6f8f4 !important;
 }
 
 .main-title { 
@@ -1231,7 +988,7 @@ body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
     padding: 8px 4px 4px 4px; 
 }
 .main-title h1 { 
-    font-size: 22px; 
+    font-size: 24px; 
     margin-bottom: 2px; 
     color: #1a1a1a !important;
 }
@@ -1245,7 +1002,6 @@ body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
     border-radius: 12px !important; 
     padding: 8px 10px !important; 
     border: 1px solid #e5e7eb !important; 
-    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; 
 }
 
 .email-box { 
@@ -1264,50 +1020,29 @@ button { min-height: 44px !important; }
     background: #fffbeb !important; 
 }
 
-/* Fix all text inputs */
-input, select, textarea {
-    background: #ffffff !important;
-    color: #1a1a1a !important;
-    border: 1px solid #d1d5db !important;
-}
-
-/* Fix labels */
+/* Fix all text */
 label, span, p, div, h1, h2, h3, h4 {
     color: #1a1a1a !important;
-    background: transparent !important;
 }
 
-/* Fix dropdowns */
-select option {
+input, select, textarea {
     background: #ffffff !important;
     color: #1a1a1a !important;
+    border: 1px solid #d1d5db !important;
 }
 
-/* Force white background on all containers */
-.gradio-container, .gradio-row, .gradio-column, .gradio-group {
-    background: transparent !important;
-}
-
-/* Mobile specific */
-@media screen and (max-width: 768px) {
-    .gradio-container {
-        padding: 4px !important;
-    }
-    
-    .main-title h1 {
-        font-size: 20px !important;
-    }
-    
-    .answer-box {
-        padding: 6px 8px !important;
-    }
-}
-
-/* Override dark mode completely */
+/* Force dark mode override */
 .dark, .dark * {
     background-color: #f6f8f4 !important;
     color: #1a1a1a !important;
 }
+
+/* Mobile */
+@media screen and (max-width: 768px) {
+    .gradio-container { padding: 4px !important; }
+    .main-title h1 { font-size: 20px !important; }
+    .answer-box { padding: 6px 8px !important; }
+}
 """
 
 # ============================================================
@@ -1359,7 +1094,7 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                         label="+ Days",
                     )
 
-                gr.Markdown("## 🌾 Feed")
+                gr.Markdown("## 🌾 Feed Details")
 
                 with gr.Row():
                     bag_size = gr.Dropdown(
@@ -1369,11 +1104,11 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                     )
                     price = gr.Number(
                         value=24000,
-                        label="Price per bag",
+                        label="Price per bag (₦)",
                         minimum=0,
                     )
 
-                gr.Markdown("## 🌍 Country")
+                gr.Markdown("## 🌍 Your Location")
 
                 detected_country = detect_country_from_env() or "NG"
                 country_choices = ["Auto-Detect"] + [code for code, _ in COUNTRY_LIST]
@@ -1381,19 +1116,19 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                 country_dropdown = gr.Dropdown(
                     choices=country_choices,
                     value="Auto-Detect",
-                    label="Select your country (Auto-Detect uses your IP)",
+                    label="Country (Auto-Detect uses your IP)",
                 )
 
                 country_code_state = gr.State(detected_country)
 
-            gr.Markdown("## 📧 Your email")
+            gr.Markdown("## 📧 Your Email")
 
             email = gr.Textbox(
                 label="",
                 placeholder="farmer@example.com",
                 type="email",
                 elem_classes=["email-box"],
-                info="Required — we'll send you future updates",
+                info="We'll send you future updates",
             )
 
             calculate_btn = gr.Button(
@@ -1406,13 +1141,13 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
 
         # RIGHT COLUMN: RESULTS
         with gr.Column(scale=1, min_width=300):
-            gr.Markdown("## 🎯 Quick Answer")
+            gr.Markdown("## 📊 Quick Answer")
             result = gr.HTML(
                 value="""
                 <div style="font-size: 14px; color: #9ca3af; text-align: center; padding: 30px 10px; background: #ffffff; border-radius: 12px;">
                     <div style="font-size: 40px; margin-bottom: 10px;">🐔</div>
-                    <div>Select your breed, enter details and click <strong>Calculate</strong></div>
-                    <div style="font-size: 13px; margin-top: 6px;">Your feed estimate will appear here</div>
+                    <div>Enter your details and click <strong>Calculate</strong></div>
+                    <div style="font-size: 13px; margin-top: 6px;">Your feed estimate appears here</div>
                 </div>
                 """,
                 elem_classes=["answer-box"],
@@ -1426,7 +1161,7 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
 
     with gr.Tabs():
         with gr.TabItem("📊 Selected Breed Benchmark"):
-            gr.Markdown("### 📊 Weekly Benchmark for Selected Breed")
+            gr.Markdown("### Weekly Benchmark for Selected Breed")
             initial_table, _ = get_benchmark_table("Ross 308")
 
             benchmark_table = gr.Dataframe(
@@ -1437,7 +1172,7 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
             )
 
         with gr.TabItem("📈 Breed Comparison"):
-            gr.Markdown("### 📊 Breed Comparison (As-Hatched Performance)")
+            gr.Markdown("### Breed Comparison (As-Hatched Performance)")
             comp_data, breeds_list, days_list = get_breed_comparison_table()
 
             headers = ["Days"]
@@ -1453,10 +1188,6 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                 wrap=True,
             )
 
-        # ============================================================
-        # ADMIN-ONLY ANALYTICS TAB
-        # ============================================================
-        
         with gr.TabItem("🔒 Admin"):
             gr.Markdown("### 🔒 Admin Dashboard")
             
@@ -1483,7 +1214,6 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                 export_calc_btn = gr.Button("📥 Export Calculations (CSV)", variant="secondary")
                 export_calc_output = gr.File(label="Download Calculations CSV")
             
-            # Login/Logout events
             login_btn.click(
                 fn=admin_login,
                 inputs=[admin_password_input],
@@ -1583,21 +1313,18 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
     # EVENTS
     # ============================================================
 
-    # Update benchmark table when breed changes
     breed.change(
         fn=update_benchmark,
         inputs=[breed],
         outputs=[benchmark_table],
     )
 
-    # Update price and currency when country changes
     country_dropdown.change(
         fn=on_country_change_handler,
         inputs=[country_dropdown],
         outputs=[country_code_state, price, price],
     )
 
-    # Calculate button
     def calculate_wrapper(birds, weeks, days, bag_size, price_per_bag, email, country_code_state, breed, request: gr.Request):
         if not country_code_state:
             country_code_state = "NG"
@@ -1615,7 +1342,6 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
         outputs=[question_answer],
     )
 
-    # Track visits on page load
     demo.load(
         fn=track_visit,
         inputs=None,