Update app.py

app.py

@@ -144,17 +144,17 @@ BREED_INFO = {
     "Ross 308": {
         "description": "Big chest, thick legs, very fast growth. Excellent for meat production.",
         "available_at": "Agrited, Sayed, Valentine",
-        "color": "#1E4620"
+        "color": "#00A86B"
     },
     "Cobb 500": {
         "description": "Good early growth, strong legs, solid feed conversion.",
         "available_at": "Chikun, Zartech",
-        "color": "#1E4620"
+        "color": "#00A86B"
     },
     "Arbor Acres": {
         "description": "Balanced growth, hardy and adaptable. Great survival rate.",
         "available_at": "Supreme, CHI, GS, Vertex, Fidan, Cascada, Orobor, Sunchi, Farm Support, Ajila",
-        "color": "#1E4620"
+        "color": "#00A86B"
     }
 }
 
@@ -571,7 +571,7 @@ def get_share_links(app_url="https://howmuchfeed.com"):
 
 
 # ============================================================
-# FEED CALCULATION - WITH PROFESSIONAL COLOR SCHEME
+# FEED CALCULATION - MINT GREEN & EGG YELLOW DESIGN
 # ============================================================
 
 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 - WITH PROFESSIONAL COLOR SCHEME
+    # Output HTML - MINT GREEN & EGG YELLOW DESIGN
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -656,21 +656,23 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     html = f"""
     <div style="
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-size: 15px;
+        font-size: 14px;
         line-height: 1.5;
-        color: #212529;
-        background: #ffffff;
+        color: #0B3022;
+        background: #FFFFFF;
         border-radius: 12px;
-        padding: 12px 14px;
-        border: 1px solid #DEE2E6;
+        padding: 14px 16px;
+        border: 1px solid #D6E0DB;
         width: 100%;
+        max-width: 100%;
         box-sizing: border-box;
+        overflow-wrap: break-word;
     ">
 
     <!-- RESULTS CARD -->
     <div style="
-        background: #F8F9FA;
-        border: 2px solid #1E4620;
+        background: #F4F7F5;
+        border: 2px solid #00A86B;
         border-radius: 10px;
         padding: 14px 16px;
         margin-bottom: 14px;
@@ -678,155 +680,168 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
         <div style="
             font-size: 12px;
             font-weight: 700;
-            color: #1E4620;
+            color: #00A86B;
             text-transform: uppercase;
             letter-spacing: 0.5px;
-            margin-bottom: 4px;
+            margin-bottom: 6px;
         ">📊 Your Feed Estimate</div>
         
-        <!-- Total Feed - Brown Card -->
-        <div style="
-            background: #F5F0EE;
-            border-radius: 8px;
-            padding: 10px 14px;
-            margin: 4px 0 8px 0;
-        ">
-            <div style="font-size: 13px; color: #6C757D; font-weight: 600;">
-                Total Feed Needed
-            </div>
-            <div style="font-size: 28px; font-weight: 800; color: #8D6E63;">
-                {total_feed_kg:,.1f} kg
+        <!-- Total Feed - Dual Column -->
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0;">
+            <div style="
+                background: #FFFFFF;
+                border-radius: 8px;
+                padding: 10px 12px;
+                border: 1px solid #D6E0DB;
+            ">
+                <div style="font-size: 11px; color: #5A6E65; font-weight: 600;">Total Feed</div>
+                <div style="font-size: 26px; font-weight: 800; color: #00A86B;">
+                    {total_feed_kg:,.1f} kg
+                </div>
             </div>
-            <div style="font-size: 14px; color: #6C757D;">
-                ({total_bags:.1f} bags of {bag_size} kg)
+            <div style="
+                background: #FFFFFF;
+                border-radius: 8px;
+                padding: 10px 12px;
+                border: 1px solid #D6E0DB;
+            ">
+                <div style="font-size: 11px; color: #5A6E65; font-weight: 600;">Exact Bags</div>
+                <div style="font-size: 26px; font-weight: 800; color: #0B3022;">
+                    {total_bags:.1f}
+                </div>
             </div>
         </div>
         
         <!-- Birds Info -->
-        <div style="font-size: 14px; color: #212529;">
-            For <strong>{birds:,}</strong> {breed} broilers · <strong>{age_text} ({total_days} days)</strong>
+        <div style="font-size: 13px; color: #0B3022; margin-bottom: 8px;">
+            For <strong>{birds:,}</strong> {breed} broilers · <strong>{age_text}</strong>
         </div>
         
-        <!-- Buy Recommendation - Gold Accent -->
+        <!-- Buy Recommendation - Egg Yellow Frame -->
         <div style="
             background: #FFF8E1;
             border: 2px solid #FFB800;
             border-radius: 8px;
-            padding: 8px 12px;
-            margin-top: 8px;
+            padding: 10px 14px;
+            margin-top: 4px;
         ">
-            <span style="font-size: 14px; font-weight: 600; color: #212529;">Buy</span>
-            <span style="
-                display: inline-block;
-                background: #FFB800;
-                color: #212529;
-                border-radius: 6px;
-                padding: 2px 12px;
-                font-size: 18px;
-                font-weight: 800;
-            ">{rounded_bags}</span>
-            <span style="font-size: 14px; color: #6C757D;">bags (rounded up for safety)</span>
+            <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+                <span style="font-size: 13px; font-weight: 600; color: #0B3022;">Buy</span>
+                <span style="
+                    display: inline-block;
+                    background: #FFB800;
+                    color: #0B3022;
+                    border-radius: 6px;
+                    padding: 2px 14px;
+                    font-size: 20px;
+                    font-weight: 800;
+                ">{rounded_bags}</span>
+                <span style="font-size: 13px; color: #5A6E65;">bags (rounded up for safety)</span>
+            </div>
+            <div style="font-size: 12px; color: #5A6E65; margin-top: 2px;">
+                This ensures enough feed for the full growing period.
+            </div>
         </div>
     </div>
 
     <!-- FEED BREAKDOWN TABLE -->
     <div style="margin-bottom: 12px;">
-        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">🌾 Feed Breakdown</div>
+        <div style="font-size: 12px; font-weight: 700; color: #00A86B; 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 #DEE2E6;
+            font-size: 13px;
+            background: #FFFFFF;
+            border: 1px solid #D6E0DB;
             border-radius: 8px;
             overflow: hidden;
         ">
             <thead>
-                <tr style="background: #F8F9FA; border-bottom: 2px solid #DEE2E6;">
-                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #212529;">Stage</th>
-                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #212529;">Feed (kg)</th>
-                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #212529;">Bags (25 kg)</th>
+                <tr style="background: #F4F7F5; border-bottom: 2px solid #00A86B;">
+                    <th style="padding: 8px 10px; text-align: left; font-weight: 600; color: #0B3022; font-size: 12px;">Stage</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #0B3022; font-size: 12px;">Feed (kg)</th>
+                    <th style="padding: 8px 10px; text-align: right; font-weight: 600; color: #0B3022; font-size: 12px;">Bags</th>
                 </tr>
             </thead>
             <tbody>
-                <tr style="border-bottom: 1px solid #DEE2E6;">
-                    <td style="padding: 8px 10px; color: #212529;"><strong>🌱 Starter</strong></td>
-                    <td style="padding: 8px 10px; text-align: right; color: #212529;">{starter_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #212529;">{starter_bags_display}</td>
+                <tr style="border-bottom: 1px solid #D6E0DB;">
+                    <td style="padding: 8px 10px; color: #0B3022; font-size: 12px;"><strong>🌱 Starter (0-4 wks)</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #0B3022; font-size: 12px;">{starter_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #0B3022; font-size: 12px;">{starter_bags_display}</td>
                 </tr>
-                <tr style="border-bottom: 1px solid #DEE2E6;">
-                    <td style="padding: 8px 10px; color: #212529;"><strong>🌽 Finisher</strong></td>
-                    <td style="padding: 8px 10px; text-align: right; color: #212529;">{finisher_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #212529;">{finisher_bags_display}</td>
+                <tr style="border-bottom: 1px solid #D6E0DB;">
+                    <td style="padding: 8px 10px; color: #0B3022; font-size: 12px;"><strong>🌽 Finisher (4-8 wks)</strong></td>
+                    <td style="padding: 8px 10px; text-align: right; color: #0B3022; font-size: 12px;">{finisher_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 700; color: #0B3022; font-size: 12px;">{finisher_bags_display}</td>
                 </tr>
-                <tr style="background: #F8F9FA; font-weight: 700;">
-                    <td style="padding: 8px 10px; color: #212529;">TOTAL</td>
-                    <td style="padding: 8px 10px; text-align: right; color: #212529;">{total_feed_kg:,.1f}</td>
-                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 16px; color: #1E4620;">{total_bags:.1f}</td>
+                <tr style="background: #F4F7F5; font-weight: 700;">
+                    <td style="padding: 8px 10px; color: #0B3022; font-size: 13px;">TOTAL</td>
+                    <td style="padding: 8px 10px; text-align: right; color: #0B3022; font-size: 13px;">{total_feed_kg:,.1f}</td>
+                    <td style="padding: 8px 10px; text-align: right; font-weight: 800; font-size: 15px; color: #00A86B;">{total_bags:.1f}</td>
                 </tr>
             </tbody>
         </table>
     </div>
 
-    <!-- FEED COST - RED CARD -->
+    <!-- FEED COST - EGG YELLOW CARD -->
     <div style="
-        background: #FFEBEE;
-        border: 2px solid #C62828;
-        border-radius: 10px;
+        background: #FFF8E1;
+        border: 2px solid #FFB800;
+        border-radius: 8px;
         padding: 12px 16px;
         margin-bottom: 12px;
     ">
-        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;">💰 Feed Cost</div>
+        <div style="font-size: 11px; font-weight: 700; color: #5A6E65; 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: #212529;">Approximately</span>
+            <span style="color: #0B3022;">~</span>
             <span style="
                 display: inline-block;
-                background: #C62828;
-                color: #FFFFFF;
+                background: #FFB800;
+                color: #0B3022;
                 border-radius: 6px;
                 padding: 2px 12px;
                 font-size: 18px;
                 font-weight: 700;
             ">{rounded_bags}</span>
-            <span style="color: #212529;">bags × {currency_symbol}{price_per_bag:,.0f}</span>
+            <span style="color: #0B3022;">× {currency_symbol}{price_per_bag:,.0f}</span>
         </div>
-        <div style="font-size: 26px; font-weight: 800; color: #C62828; margin-top: 2px;">
+        <div style="font-size: 24px; font-weight: 800; color: #0B3022; margin-top: 2px;">
             {currency_symbol}{total_cost:,.0f}
         </div>
     </div>
 
     <!-- EXPECTED PERFORMANCE -->
     <div style="
-        border-top: 1px solid #DEE2E6;
+        border-top: 1px solid #D6E0DB;
         padding-top: 10px;
-        margin-bottom: 12px;
+        margin-bottom: 10px;
     ">
-        <div style="font-size: 12px; font-weight: 700; color: #6C757D; 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 style="font-size: 11px; font-weight: 700; color: #00A86B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📈 Expected Performance</div>
+        <div style="display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px;">
             <div>
-                Body weight: <span style="font-weight: 700; color: #212529;">{expected_weight:.3f} kg</span>
+                Body: <span style="font-weight: 700; color: #0B3022;">{expected_weight:.3f} kg</span>
             </div>
             <div>
-                Flock weight: <span style="font-weight: 700; color: #212529;">{flock_weight:,.1f} kg</span>
+                Flock: <span style="font-weight: 700; color: #0B3022;">{flock_weight:,.1f} kg</span>
             </div>
         </div>
     </div>
 
     <!-- SHARE BUTTONS -->
     <div style="
-        border-top: 1px solid #DEE2E6;
-        padding-top: 12px;
+        border-top: 1px solid #D6E0DB;
+        padding-top: 10px;
     ">
-        <div style="font-size: 12px; font-weight: 700; color: #6C757D; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;">📤 Share Results</div>
-        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <div style="font-size: 11px; font-weight: 700; color: #00A86B; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;">📤 Share Results</div>
+        <div style="display: flex; gap: 6px; 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;
+                    background: #00A86B;
+                    color: #FFFFFF;
+                    padding: 5px 12px;
                     border-radius: 6px;
-                    font-size: 13px;
+                    font-size: 12px;
                     font-weight: 600;
                     cursor: pointer;
                 ">WhatsApp</span>
@@ -834,11 +849,11 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
             <a href="{share_links['email']}" target="_blank" style="text-decoration: none;">
                 <span style="
                     display: inline-block;
-                    background: #ea4335;
-                    color: #ffffff;
-                    padding: 6px 14px;
+                    background: #00A86B;
+                    color: #FFFFFF;
+                    padding: 5px 12px;
                     border-radius: 6px;
-                    font-size: 13px;
+                    font-size: 12px;
                     font-weight: 600;
                     cursor: pointer;
                 ">Email</span>
@@ -846,11 +861,11 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
             <a href="{share_links['facebook']}" target="_blank" style="text-decoration: none;">
                 <span style="
                     display: inline-block;
-                    background: #1877f2;
-                    color: #ffffff;
-                    padding: 6px 14px;
+                    background: #00A86B;
+                    color: #FFFFFF;
+                    padding: 5px 12px;
                     border-radius: 6px;
-                    font-size: 13px;
+                    font-size: 12px;
                     font-weight: 600;
                     cursor: pointer;
                 ">Facebook</span>
@@ -858,31 +873,31 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
             <a href="{share_links['twitter']}" target="_blank" style="text-decoration: none;">
                 <span style="
                     display: inline-block;
-                    background: #000000;
-                    color: #ffffff;
-                    padding: 6px 14px;
+                    background: #00A86B;
+                    color: #FFFFFF;
+                    padding: 5px 12px;
                     border-radius: 6px;
-                    font-size: 13px;
+                    font-size: 12px;
                     font-weight: 600;
                     cursor: pointer;
-                ">Twitter/X</span>
+                ">Twitter</span>
             </a>
         </div>
     </div>
 
     <div style="
-        margin-top: 10px;
-        font-size: 11px;
-        color: #6C757D;
-        border-top: 1px solid #DEE2E6;
-        padding-top: 8px;
+        margin-top: 8px;
+        font-size: 10px;
+        color: #5A6E65;
+        border-top: 1px solid #D6E0DB;
+        padding-top: 6px;
     ">
-        ⚠️ Estimate based on {breed} benchmark. Actual results may vary.
+        ⚠️ Based on {breed} benchmark. Actual results may vary.
     </div>
     </div>
     """
 
-    return html, f"✅ Calculation saved for {email.strip().lower()}."
+    return html, f"✅ Saved for {email.strip().lower()}."
 
 
 # ============================================================
@@ -1096,112 +1111,136 @@ def export_calculations_wrapper():
 
 
 # ============================================================
-# CSS - PROFESSIONAL COLOR SCHEME
+# CSS - MINT GREEN & EGG YELLOW DESIGN SYSTEM
 # ============================================================
 
 CSS = """
 /* ============================================================
-   PROFESSIONAL COLOR SCHEME - 60-30-10 Design Rule
+   MINT GREEN & EGG YELLOW DESIGN SYSTEM
    ============================================================ */
 
-/* GLOBAL TOKENS - 60% Dominant Neutrals */
 :root {
-    --color-bg-main: #F8F9FA;
-    --color-bg-surface: #FFFFFF;
-    --color-text-primary: #212529;
-    --color-text-muted: #6C757D;
-    --color-border: #DEE2E6;
+    --app-bg-main: #F4F7F5;
+    --app-card-surface: #FFFFFF;
+    --brand-primary-mint: #00A86B;
+    --brand-dark-charcoal: #0B3022;
+    --brand-accent-yellow: #FFB800;
+    --ui-border-muted: #D6E0DB;
+    --text-helper: #5A6E65;
 }
 
-/* 30% Structural/Brand Colors */
-:root {
-    --color-brand-primary: #1E4620;
-    --color-brand-secondary: #386F3E;
-}
-
-/* 10% Accent Colors */
-:root {
-    --color-accent-gold: #FFB800;
-    --color-feed-brown: #8D6E63;
-    --color-cost-red: #C62828;
-    --color-yield-green: #2E7D32;
-}
-
-/* Apply to body */
+/* GLOBAL */
 body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
-    background-color: var(--color-bg-main) !important;
-    color: var(--color-text-primary) !important;
+    background-color: var(--app-bg-main) !important;
+    color: var(--brand-dark-charcoal) !important;
 }
 
 .gradio-container {
     max-width: 100% !important;
-    padding: 6px 8px !important;
+    padding: 4px 6px !important;
 }
 
-/* Main Title */
+/* MAIN TITLE */
 .main-title { 
     text-align: center; 
-    padding: 8px 4px 4px 4px; 
+    padding: 6px 4px 4px 4px; 
 }
 .main-title h1 { 
-    font-size: 24px; 
+    font-size: 22px; 
     margin-bottom: 2px; 
-    color: var(--color-text-primary) !important;
+    color: var(--brand-dark-charcoal) !important;
 }
 .main-title p { 
-    font-size: 14px; 
-    color: var(--color-text-muted) !important; 
+    font-size: 13px; 
+    color: var(--text-helper) !important; 
 }
 
-/* Answer Box - Surface */
+/* ANSWER BOX */
 .answer-box { 
-    background: var(--color-bg-surface) !important; 
-    border-radius: 12px !important; 
-    padding: 8px 10px !important; 
-    border: 1px solid var(--color-border) !important; 
+    background: var(--app-card-surface) !important; 
+    border-radius: 10px !important; 
+    padding: 6px 8px !important; 
+    border: 1px solid var(--ui-border-muted) !important; 
 }
 
-/* Email Box */
+/* EMAIL BOX */
 .email-box { 
-    border: 2px solid var(--color-brand-secondary) !important; 
-    border-radius: 10px !important; 
-    padding: 8px !important; 
-    background: #F8F9FA !important; 
+    border: 2px solid var(--brand-primary-mint) !important; 
+    border-radius: 8px !important; 
+    padding: 6px !important; 
+    background: #F4F7F5 !important; 
 }
 
-/* Buttons - Brand Primary */
+/* BUTTONS */
 button {
-    min-height: 44px !important;
-    background-color: var(--color-brand-primary) !important;
+    min-height: 40px !important;
+    background-color: var(--brand-primary-mint) !important;
     color: #FFFFFF !important;
     font-weight: 600 !important;
     border: none !important;
-    border-radius: 8px !important;
+    border-radius: 6px !important;
+    font-size: 14px !important;
+    padding: 8px 16px !important;
+    width: 100% !important;
+    transition: all 0.2s ease !important;
 }
 
 button:hover {
-    background-color: #122D14 !important;
+    background-color: #008F5A !important;
+    transform: scale(1.02) !important;
 }
 
-/* Admin Login */
+/* ADMIN LOGIN */
 .admin-login { 
-    border: 2px solid var(--color-accent-gold) !important; 
-    border-radius: 10px !important; 
-    padding: 12px !important; 
+    border: 2px solid var(--brand-accent-yellow) !important; 
+    border-radius: 8px !important; 
+    padding: 10px !important; 
     background: #FFF8E1 !important; 
 }
 
-/* Force dark mode override */
-.dark, .dark * {
-    background-color: var(--color-bg-main) !important;
-    color: var(--color-text-primary) !important;
+/* DROPDOWNS */
+select, input, textarea {
+    background: #FFFFFF !important;
+    color: var(--brand-dark-charcoal) !important;
+    border: 1px solid var(--ui-border-muted) !important;
+    border-radius: 6px !important;
+}
+
+select:focus, input:focus, textarea:focus {
+    border-color: var(--brand-primary-mint) !important;
+    box-shadow: 0 0 0 3px rgba(0, 168, 107, 0.2) !important;
+}
+
+/* TABLES */
+table {
+    font-size: 12px !important;
+}
+
+th, td {
+    padding: 4px 6px !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; }
+/* DESKTOP */
+@media screen and (min-width: 769px) {
+    .gradio-container {
+        padding: 8px 16px !important;
+        max-width: 1200px !important;
+        margin: 0 auto !important;
+    }
+    
+    .main-title h1 {
+        font-size: 28px !important;
+    }
+    
+    button {
+        width: auto !important;
+    }
+}
+
+/* DARK MODE OVERRIDE */
+.dark, .dark * {
+    background-color: var(--app-bg-main) !important;
+    color: var(--brand-dark-charcoal) !important;
 }
 """
 
@@ -1214,14 +1253,15 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
     gr.HTML("""
     <div class="main-title">
         <h1>🐔 How Much Feed?</h1>
-        <p>How many bags of feed for broilers for 5, 6, 7, or 8 weeks? Get accurate feed needed and estimated cost for your birds.</p>
+        <p>Broiler Feed Calculator — Know exactly how much feed you need for your birds.</p>
     </div>
     """)
 
-    with gr.Row(equal_height=True):
+    # Mobile-first: Stack vertically on mobile, side by side on desktop
+    with gr.Row(equal_height=True, variant="default"):
 
         # LEFT COLUMN: INPUTS
-        with gr.Column(scale=1, min_width=300):
+        with gr.Column(scale=1, min_width=280):
 
             with gr.Group():
                 gr.Markdown("## 🐔 Breed & Birds")
@@ -1247,11 +1287,13 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                         choices=list(range(0, 21)),
                         value=8,
                         label="Weeks",
+                        scale=1,
                     )
                     days = gr.Dropdown(
                         choices=list(range(0, 7)),
                         value=0,
-                        label="+ Days",
+                        label="Days",
+                        scale=1,
                     )
 
                 gr.Markdown("## 🌾 Feed Details")
@@ -1261,11 +1303,13 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                         choices=[10, 20, 25, 50, 100],
                         value=25,
                         label="Bag size (kg)",
+                        scale=1,
                     )
                     price = gr.Number(
                         value=24000,
                         label="Price per bag (₦)",
                         minimum=0,
+                        scale=1,
                     )
 
                 gr.Markdown("## 🌍 Your Location")
@@ -1281,14 +1325,14 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
 
                 country_code_state = gr.State(detected_country)
 
-            gr.Markdown("## 📧 Your Email")
+            gr.Markdown("## 📧 Your Email (Required)")
 
             email = gr.Textbox(
                 label="",
                 placeholder="farmer@example.com",
                 type="email",
                 elem_classes=["email-box"],
-                info="We'll send you future updates",
+                info="We never share your email. It is used only to save your results.",
             )
 
             calculate_btn = gr.Button(
@@ -1297,17 +1341,23 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
                 size="lg",
             )
 
+            gr.Markdown("""
+            <div style="font-size: 11px; color: #5A6E65; margin-top: 4px;">
+                ⚠️ Why email is required? We send your calculation to your email so you can access it anytime.
+            </div>
+            """)
+
             save_status = gr.Markdown("")
 
         # RIGHT COLUMN: RESULTS
-        with gr.Column(scale=1, min_width=300):
-            gr.Markdown("## 📊 Quick Answer")
+        with gr.Column(scale=1, min_width=280):
+            gr.Markdown("## 📊 Your Quick Answer")
             result = gr.HTML(
                 value="""
-                <div style="font-size: 14px; color: #6C757D; text-align: center; padding: 30px 10px; background: #FFFFFF; border-radius: 12px; border: 1px solid #DEE2E6;">
-                    <div style="font-size: 40px; margin-bottom: 10px;">🐔</div>
+                <div style="font-size: 13px; color: #5A6E65; text-align: center; padding: 20px 10px; background: #FFFFFF; border-radius: 10px; border: 1px solid #D6E0DB;">
+                    <div style="font-size: 36px; margin-bottom: 8px;">🐔</div>
                     <div>Enter your details and click <strong>Calculate</strong></div>
-                    <div style="font-size: 13px; margin-top: 6px; color: #6C757D;">Your feed estimate appears here</div>
+                    <div style="font-size: 12px; margin-top: 4px; color: #5A6E65;">Your feed estimate appears here</div>
                 </div>
                 """,
                 elem_classes=["answer-box"],