Update app.py

app.py

@@ -18,7 +18,7 @@ APP_NAME = "🐔 How Much Feed?"
 DB_PATH = os.environ.get("DATABASE_PATH", "/data/howmuchfeed.db")
 
 # Admin password - set this in Hugging Face Secrets
-ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "admin123")
+ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "")
 
 # Create directory if it doesn't exist
 db_dir = os.path.dirname(DB_PATH)
@@ -84,7 +84,7 @@ def sync_to_google_sheets(email, country, currency, breed, action="lead"):
         elif action == "question":
             worksheet_name = "Questions"
             headers = ["Email", "Question", "Breed", "Created At"]
-            row_data = [email, "Question", breed, datetime.now().isoformat()]
+            row_data = [email or "", country or "", currency or "", datetime.now().isoformat()]
         else:
             return False
         
@@ -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 - MINT GREEN & EGG YELLOW DESIGN
+    # Output HTML - mobile-first farmer-friendly result
     starter_bags_display = f"{starter_bags:.1f}"
     finisher_bags_display = f"{finisher_bags:.1f}"
 
@@ -653,247 +653,105 @@ def calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_c
     if days:
         age_text += f" + {days} day{'s' if days != 1 else ''}"
 
+    share_text = (
+        f"How Much Feed?\n"
+        f"{breed} broilers: {birds:,} birds for {age_text}.\n"
+        f"Feed needed: {total_feed_kg:,.1f} kg ({total_bags:.1f} bags).\n"
+        f"Buy {rounded_bags} bags."
+    )
+    share_encoded = urllib.parse.quote(share_text)
+    share_links = {
+        "whatsapp": f"https://wa.me/?text={share_encoded}",
+        "email": f"mailto:?subject=My How Much Feed result&body={share_encoded}",
+        "facebook": f"https://www.facebook.com/sharer/sharer.php?u={urllib.parse.quote('https://howmuchfeed.com')}",
+        "twitter": f"https://twitter.com/intent/tweet?text={share_encoded}",
+    }
+
     html = f"""
-    <div style="
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #0B3022;
-        background: #FFFFFF;
-        border-radius: 12px;
-        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: #F4F7F5;
-        border: 2px solid #00A86B;
-        border-radius: 10px;
-        padding: 14px 16px;
-        margin-bottom: 14px;
-    ">
-        <div style="
-            font-size: 12px;
-            font-weight: 700;
-            color: #00A86B;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 6px;
-        ">📊 Your Feed Estimate</div>
-        
-        <!-- 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="
-                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 class="results-shell">
+      <section class="buy-card">
+        <div class="eyebrow">YOUR FEED RESULT</div>
+        <div class="buy-label">BUY</div>
+        <div class="buy-number">{rounded_bags}</div>
+        <div class="buy-unit">BAGS</div>
+        <div class="buy-note">Recommended amount, rounded up to the next whole bag.</div>
+      </section>
+
+      <div class="result-context">
+        <strong>{birds:,} {breed} broilers</strong> · {age_text} ({total_days} days)
+      </div>
+
+      <p class="plain-answer">
+        You need <strong>{total_feed_kg:,.1f} kg</strong> of feed, equal to about
+        <strong>{total_bags:.1f} bags</strong> of {bag_size:g} kg feed.
+      </p>
+
+      <div class="metric-grid">
+        <div class="metric-card">
+          <span class="metric-icon">⚖️</span>
+          <span class="metric-label">Feed needed</span>
+          <strong>{total_feed_kg:,.1f} kg</strong>
         </div>
-        
-        <!-- Birds Info -->
-        <div style="font-size: 13px; color: #0B3022; margin-bottom: 8px;">
-            For <strong>{birds:,}</strong> {breed} broilers · <strong>{age_text}</strong>
+        <div class="metric-card">
+          <span class="metric-icon">✓</span>
+          <span class="metric-label">Exact amount</span>
+          <strong>{total_bags:.1f} bags</strong>
         </div>
-        
-        <!-- Buy Recommendation - Egg Yellow Frame -->
-        <div style="
-            background: #FFF8E1;
-            border: 2px solid #FFB800;
-            border-radius: 8px;
-            padding: 10px 14px;
-            margin-top: 4px;
-        ">
-            <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 class="metric-card">
+          <span class="metric-icon">₦</span>
+          <span class="metric-label">Estimated cost</span>
+          <strong>{currency_symbol}{total_cost:,.0f}</strong>
         </div>
-    </div>
+        <div class="metric-card">
+          <span class="metric-icon">📅</span>
+          <span class="metric-label">Growing period</span>
+          <strong>{total_days} days</strong>
+        </div>
+      </div>
 
-    <!-- FEED BREAKDOWN TABLE -->
-    <div style="margin-bottom: 12px;">
-        <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: 13px;
-            background: #FFFFFF;
-            border: 1px solid #D6E0DB;
-            border-radius: 8px;
-            overflow: hidden;
-        ">
+      <section class="result-section">
+        <div class="section-title">🌾 Feed Breakdown</div>
+        <div class="table-wrap">
+          <table class="feed-table">
             <thead>
-                <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>
+              <tr><th>Stage</th><th>Feed</th><th>Bags</th></tr>
             </thead>
             <tbody>
-                <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 #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: #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>
+              <tr><td>Starter <span class="muted">(0–21 days)</span></td><td>{starter_kg:,.1f} kg</td><td>{starter_bags_display}</td></tr>
+              <tr><td>Finisher <span class="muted">(Day 22+)</span></td><td>{finisher_kg:,.1f} kg</td><td>{finisher_bags_display}</td></tr>
+              <tr class="total-row"><td>TOTAL</td><td>{total_feed_kg:,.1f} kg</td><td>{total_bags:.1f} bags</td></tr>
             </tbody>
-        </table>
-    </div>
-
-    <!-- FEED COST - EGG YELLOW CARD -->
-    <div style="
-        background: #FFF8E1;
-        border: 2px solid #FFB800;
-        border-radius: 8px;
-        padding: 12px 16px;
-        margin-bottom: 12px;
-    ">
-        <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: #0B3022;">~</span>
-            <span style="
-                display: inline-block;
-                background: #FFB800;
-                color: #0B3022;
-                border-radius: 6px;
-                padding: 2px 12px;
-                font-size: 18px;
-                font-weight: 700;
-            ">{rounded_bags}</span>
-            <span style="color: #0B3022;">× {currency_symbol}{price_per_bag:,.0f}</span>
+          </table>
         </div>
-        <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 #D6E0DB;
-        padding-top: 10px;
-        margin-bottom: 10px;
-    ">
-        <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: <span style="font-weight: 700; color: #0B3022;">{expected_weight:.3f} kg</span>
-            </div>
-            <div>
-                Flock: <span style="font-weight: 700; color: #0B3022;">{flock_weight:,.1f} kg</span>
-            </div>
+      </section>
+
+      <section class="cost-card">
+        <div class="section-title">💰 Feed Cost Estimate</div>
+        <div class="cost-main">{currency_symbol}{total_cost:,.0f}</div>
+        <div class="cost-note">Based on {rounded_bags} bags × {currency_symbol}{price_per_bag:,.0f} per bag.</div>
+      </section>
+
+      <section class="result-section performance-section">
+        <div class="section-title">📈 Expected Performance</div>
+        <div class="performance-grid">
+          <div><span>Body weight per bird</span><strong>{expected_weight:.3f} kg</strong></div>
+          <div><span>Flock live weight</span><strong>{flock_weight:,.1f} kg</strong></div>
         </div>
-    </div>
-
-    <!-- SHARE BUTTONS -->
-    <div style="
-        border-top: 1px solid #D6E0DB;
-        padding-top: 10px;
-    ">
-        <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: #00A86B;
-                    color: #FFFFFF;
-                    padding: 5px 12px;
-                    border-radius: 6px;
-                    font-size: 12px;
-                    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: #00A86B;
-                    color: #FFFFFF;
-                    padding: 5px 12px;
-                    border-radius: 6px;
-                    font-size: 12px;
-                    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: #00A86B;
-                    color: #FFFFFF;
-                    padding: 5px 12px;
-                    border-radius: 6px;
-                    font-size: 12px;
-                    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: #00A86B;
-                    color: #FFFFFF;
-                    padding: 5px 12px;
-                    border-radius: 6px;
-                    font-size: 12px;
-                    font-weight: 600;
-                    cursor: pointer;
-                ">Twitter</span>
-            </a>
+      </section>
+
+      <section class="result-section share-section">
+        <div class="section-title">📤 Share Result</div>
+        <div class="share-grid">
+          <a class="share-btn" href="{share_links['whatsapp']}" target="_blank" rel="noopener">WhatsApp</a>
+          <a class="share-btn" href="{share_links['email']}" target="_blank" rel="noopener">Email</a>
+          <a class="share-btn" href="{share_links['facebook']}" target="_blank" rel="noopener">Facebook</a>
+          <a class="share-btn" href="{share_links['twitter']}" target="_blank" rel="noopener">X</a>
         </div>
-    </div>
+      </section>
 
-    <div style="
-        margin-top: 8px;
-        font-size: 10px;
-        color: #5A6E65;
-        border-top: 1px solid #D6E0DB;
-        padding-top: 6px;
-    ">
-        ⚠️ Based on {breed} benchmark. Actual results may vary.
-    </div>
+      <div class="result-disclaimer">
+        ⚠️ This is an estimate based on the selected {breed} benchmark. Actual feed use can vary with feed quality, management, environment and bird performance.
+      </div>
     </div>
     """
 
@@ -991,7 +849,7 @@ def update_benchmark(breed):
 
 
 def on_country_change_handler(country_selection):
-    """Update price and currency when country changes."""
+    """Update country state and default feed price when country changes."""
     if country_selection == "Auto-Detect":
         country_code = detect_country_from_env() or "NG"
     else:
@@ -999,7 +857,7 @@ def on_country_change_handler(country_selection):
 
     _, symbol, currency_code = get_country_info(country_code)
     default_price = get_default_price(currency_code)
-    return country_code, default_price, symbol
+    return country_code, default_price
 
 
 # ============================================================
@@ -1115,132 +973,438 @@ def export_calculations_wrapper():
 # ============================================================
 
 CSS = """
-/* ============================================================
-   MINT GREEN & EGG YELLOW DESIGN SYSTEM
-   ============================================================ */
-
 :root {
-    --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;
+  --mint: #00A86B;
+  --mint-dark: #0B3022;
+  --mint-soft: #EAF8F1;
+  --yellow: #FFB800;
+  --yellow-soft: #FFF7DB;
+  --surface: #FFFFFF;
+  --page: #F7FAF8;
+  --border: #D9E4DE;
+  --muted: #5D6B65;
+  --danger: #B42318;
 }
 
-/* GLOBAL */
-body, .gradio-container, .gradio-row, .gradio-column, .gradio-group {
-    background-color: var(--app-bg-main) !important;
-    color: var(--brand-dark-charcoal) !important;
+/* =========================
+   GLOBAL MOBILE-FIRST UI
+   ========================= */
+html, body {
+  margin: 0 !important;
+  padding: 0 !important;
+  background: var(--page) !important;
+  color: var(--mint-dark) !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
+  -webkit-text-size-adjust: 100%;
 }
 
-.gradio-container {
-    max-width: 100% !important;
-    padding: 4px 6px !important;
+body,
+.gradio-container,
+.gradio-container > .main,
+.gradio-container .block,
+.gradio-container .gr-group,
+.gradio-container .gr-box,
+.gradio-container .gr-panel {
+  background: var(--page) !important;
+  color: var(--mint-dark) !important;
 }
 
-/* MAIN TITLE */
-.main-title { 
-    text-align: center; 
-    padding: 6px 4px 4px 4px; 
-}
-.main-title h1 { 
-    font-size: 22px; 
-    margin-bottom: 2px; 
-    color: var(--brand-dark-charcoal) !important;
+.gradio-container {
+  width: 100% !important;
+  max-width: 1180px !important;
+  margin: 0 auto !important;
+  padding: 0 12px 48px !important;
+  box-sizing: border-box !important;
 }
-.main-title p { 
-    font-size: 13px; 
-    color: var(--text-helper) !important; 
+
+/* Never force a dark theme onto the mobile browser. */
+.dark body,
+.dark .gradio-container,
+.dark .gradio-container .block,
+.dark .gradio-container .gr-group,
+.dark .gradio-container .gr-box,
+.dark .gradio-container .gr-panel {
+  background: var(--page) !important;
+  color: var(--mint-dark) !important;
 }
 
-/* ANSWER BOX */
-.answer-box { 
-    background: var(--app-card-surface) !important; 
-    border-radius: 10px !important; 
-    padding: 6px 8px !important; 
-    border: 1px solid var(--ui-border-muted) !important; 
+h1, h2, h3, h4, p, label, span, div {
+  color: inherit;
 }
 
-/* EMAIL BOX */
-.email-box { 
-    border: 2px solid var(--brand-primary-mint) !important; 
-    border-radius: 8px !important; 
-    padding: 6px !important; 
-    background: #F4F7F5 !important; 
+/* =========================
+   HEADER
+   ========================= */
+.app-header {
+  background: var(--mint-dark);
+  color: #fff;
+  border-radius: 0 0 18px 18px;
+  padding: 18px 16px 20px;
+  margin: 0 -12px 16px;
+}
+.app-header .brand-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.app-header .brand-icon { font-size: 30px; line-height: 1; }
+.app-header h1 {
+  color: #fff !important;
+  margin: 0;
+  font-size: clamp(23px, 6vw, 32px);
+  line-height: 1.1;
+  font-weight: 800;
+}
+.app-header p {
+  color: rgba(255,255,255,.88) !important;
+  margin: 6px 0 0 40px;
+  font-size: 14px;
+  line-height: 1.45;
 }
 
-/* BUTTONS */
-button {
-    min-height: 40px !important;
-    background-color: var(--brand-primary-mint) !important;
-    color: #FFFFFF !important;
-    font-weight: 600 !important;
-    border: none !important;
-    border-radius: 6px !important;
-    font-size: 14px !important;
-    padding: 8px 16px !important;
-    width: 100% !important;
-    transition: all 0.2s ease !important;
+/* =========================
+   STATUS / FORM SECTIONS
+   ========================= */
+.status-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--mint);
+  border-radius: 12px;
+  padding: 12px 14px;
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+.status-card strong { color: var(--mint-dark) !important; }
+.status-card a { color: var(--mint) !important; font-weight: 700; }
+
+.form-section {
+  background: var(--surface) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 14px !important;
+  margin-bottom: 12px !important;
+  overflow: visible !important;
+  padding: 14px !important;
+  box-shadow: 0 2px 8px rgba(11,48,34,.04) !important;
+}
+.section-heading {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 12px;
+  color: var(--mint-dark) !important;
+  font-size: 17px;
+  font-weight: 800;
+}
+.step-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--mint-dark);
+  color: #fff !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 800;
+  flex: 0 0 28px;
 }
 
-button:hover {
-    background-color: #008F5A !important;
-    transform: scale(1.02) !important;
+/* Gradio field controls */
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select,
+.gradio-container [role="combobox"] {
+  background: #fff !important;
+  color: var(--mint-dark) !important;
+  border: 1px solid #C8D5CE !important;
+  border-radius: 10px !important;
+  min-height: 48px !important;
+  box-sizing: border-box !important;
+  font-size: 16px !important;
+}
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus,
+.gradio-container [role="combobox"]:focus-within {
+  border-color: var(--mint) !important;
+  box-shadow: 0 0 0 3px rgba(0,168,107,.16) !important;
+}
+.gradio-container label {
+  color: var(--mint-dark) !important;
+  font-weight: 650 !important;
+}
+.gradio-container .info,
+.gradio-container small {
+  color: var(--muted) !important;
 }
 
-/* ADMIN LOGIN */
-.admin-login { 
-    border: 2px solid var(--brand-accent-yellow) !important; 
-    border-radius: 8px !important; 
-    padding: 10px !important; 
-    background: #FFF8E1 !important; 
+/* Give Weeks and Days a real touch gap on mobile. */
+.age-row,
+.feed-row {
+  gap: 10px !important;
+}
+.age-row > *,
+.feed-row > * {
+  min-width: 0 !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;
+.email-box textarea,
+.email-box input {
+  background: #fff !important;
+  border: 2px solid var(--mint) !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;
+/* =========================
+   PRIMARY ACTION
+   ========================= */
+.calculate-btn button {
+  width: 100% !important;
+  min-height: 52px !important;
+  border: 0 !important;
+  border-radius: 12px !important;
+  background: var(--mint) !important;
+  color: #fff !important;
+  font-size: 16px !important;
+  font-weight: 800 !important;
+  box-shadow: 0 5px 14px rgba(0,168,107,.20) !important;
+}
+.calculate-btn button:hover { background: #008F5A !important; }
+
+/* =========================
+   RESULT HTML
+   ========================= */
+.results-shell {
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--mint-dark);
+}
+.buy-card {
+  background: linear-gradient(145deg, #F1FBF6 0%, #FFFFFF 100%);
+  border: 2px solid var(--mint);
+  border-radius: 16px;
+  padding: 18px 16px;
+  text-align: center;
+  box-shadow: 0 5px 16px rgba(11,48,34,.08);
+}
+.eyebrow {
+  color: var(--mint) !important;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .09em;
+}
+.buy-label {
+  margin-top: 7px;
+  color: var(--mint-dark) !important;
+  font-size: 13px;
+  font-weight: 800;
+}
+.buy-number {
+  color: var(--mint) !important;
+  font-size: clamp(62px, 18vw, 92px);
+  font-weight: 900;
+  line-height: .9;
+  margin-top: 2px;
+}
+.buy-unit {
+  color: var(--mint-dark) !important;
+  font-size: 21px;
+  font-weight: 900;
+  letter-spacing: .08em;
+}
+.buy-note {
+  margin-top: 8px;
+  color: var(--muted) !important;
+  font-size: 12px;
 }
+.result-context {
+  text-align: center;
+  margin: 12px 2px 6px;
+  color: var(--muted) !important;
+  font-size: 13px;
+}
+.result-context strong { color: var(--mint-dark) !important; }
+.plain-answer {
+  background: #fff;
+  border-left: 4px solid var(--yellow);
+  border-radius: 10px;
+  padding: 11px 12px;
+  margin: 10px 0 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--mint-dark) !important;
+}
+.plain-answer strong { color: var(--mint-dark) !important; }
 
-/* TABLES */
-table {
-    font-size: 12px !important;
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0,1fr));
+  gap: 9px;
+  margin-bottom: 14px;
+}
+.metric-card {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 11px 9px;
+  min-width: 0;
+}
+.metric-icon {
+  display: block;
+  color: var(--mint) !important;
+  font-size: 18px;
+  font-weight: 900;
+}
+.metric-label {
+  display: block;
+  color: var(--muted) !important;
+  font-size: 11px;
+  margin: 2px 0 3px;
+}
+.metric-card strong {
+  display: block;
+  color: var(--mint-dark) !important;
+  font-size: 17px;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.result-section { margin: 14px 0; }
+.section-title {
+  color: var(--mint-dark) !important;
+  font-size: 14px;
+  font-weight: 850;
+  margin-bottom: 8px;
+}
+.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.feed-table {
+  width: 100%;
+  min-width: 330px;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  overflow: hidden;
+  font-size: 12px;
+}
+.feed-table th {
+  background: var(--mint) !important;
+  color: #fff !important;
+  padding: 9px 8px;
+  text-align: left;
+  font-weight: 800;
+}
+.feed-table th:not(:first-child),
+.feed-table td:not(:first-child) { text-align: right; }
+.feed-table td {
+  padding: 9px 8px;
+  border-top: 1px solid var(--border);
+  color: var(--mint-dark) !important;
+  white-space: nowrap;
+}
+.feed-table .muted { color: var(--muted) !important; font-size: 10px; }
+.feed-table .total-row td {
+  background: var(--mint-soft) !important;
+  font-weight: 900 !important;
+}
+.feed-table .total-row td:last-child { font-size: 14px; }
+
+.cost-card {
+  background: var(--yellow-soft);
+  border: 1px solid #EBC34A;
+  border-left: 4px solid var(--yellow);
+  border-radius: 12px;
+  padding: 13px 14px;
+  margin: 14px 0;
+}
+.cost-main {
+  color: var(--mint-dark) !important;
+  font-size: clamp(27px, 8vw, 38px);
+  line-height: 1.1;
+  font-weight: 900;
+}
+.cost-note { color: var(--muted) !important; font-size: 11px; margin-top: 5px; }
+
+.performance-grid { display: grid; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+.performance-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px; border-top: 1px solid var(--border); font-size: 13px; }
+.performance-grid > div:first-child { border-top: 0; }
+.performance-grid span { color: var(--muted) !important; }
+.performance-grid strong { color: var(--mint) !important; white-space: nowrap; }
+
+.share-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
+.share-btn {
+  display: block;
+  text-align: center;
+  text-decoration: none !important;
+  background: var(--mint);
+  color: #fff !important;
+  border-radius: 9px;
+  padding: 11px 8px;
+  font-size: 12px;
+  font-weight: 800;
+  min-height: 44px;
+  box-sizing: border-box;
+}
+.share-btn:hover { background: #008F5A; }
+.result-disclaimer {
+  background: #F1F6F3;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 11px;
+  color: var(--muted) !important;
+  font-size: 10px;
+  line-height: 1.45;
+  margin-top: 14px;
 }
 
-th, td {
-    padding: 4px 6px !important;
+/* =========================
+   COLLAPSIBLE LOWER CONTENT
+   ========================= */
+.gradio-container details,
+.gradio-container .gr-accordion {
+  background: #fff !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 12px !important;
+  margin-bottom: 10px !important;
+  overflow: hidden !important;
+}
+.gradio-container summary,
+.gradio-container .gr-accordion > button {
+  color: var(--mint-dark) !important;
+  font-weight: 800 !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;
-    }
+/* Dataframes: allow horizontal scrolling on phones. */
+.benchmark-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
+.benchmark-wrap .table-wrap { overflow-x: auto !important; }
+
+/* =========================
+   ADMIN / FOOTER
+   ========================= */
+.admin-login {
+  background: #fff !important;
+  border: 1px solid var(--border) !important;
+  border-left: 4px solid var(--yellow) !important;
+  border-radius: 12px !important;
+  padding: 12px !important;
+}
+.footer-note { color: var(--muted) !important; font-size: 11px; line-height: 1.5; }
+
+/* Desktop gets breathing room; mobile stays single-column. */
+@media (min-width: 900px) {
+  .gradio-container { padding: 0 22px 60px !important; }
+  .app-header { margin-left: -22px; margin-right: -22px; padding-left: 28px; padding-right: 28px; }
+  .buy-number { font-size: 84px; }
+  .metric-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
 }
 
-/* DARK MODE OVERRIDE */
-.dark, .dark * {
-    background-color: var(--app-bg-main) !important;
-    color: var(--brand-dark-charcoal) !important;
+@media (max-width: 480px) {
+  .gradio-container { padding-left: 10px !important; padding-right: 10px !important; }
+  .app-header { margin-left: -10px; margin-right: -10px; }
+  .age-row, .feed-row { gap: 12px !important; }
+  .metric-grid { gap: 7px; }
+  .metric-card { padding: 10px 8px; }
+  .metric-card strong { font-size: 15px; }
+  .performance-grid > div { font-size: 12px; }
 }
 """
 
@@ -1248,281 +1412,216 @@ th, td {
 # UI
 # ============================================================
 
-with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
+with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Soft()) as demo:
 
     gr.HTML("""
-    <div class="main-title">
-        <h1>🐔 How Much Feed?</h1>
-        <p>Broiler Feed Calculator — Know exactly how much feed you need for your birds.</p>
-    </div>
+    <header class="app-header">
+      <div class="brand-row">
+        <div class="brand-icon">🐔</div>
+        <div>
+          <h1>How Much Feed?</h1>
+        </div>
+      </div>
+      <p>Broiler feed calculator — find out how much feed to buy for your birds.</p>
+    </header>
     """)
 
-    # 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=280):
+    gr.HTML("""
+    <div class="status-card">
+      <strong>✓ Simple farmer estimate</strong><br>
+      Enter your breed, flock size, age and feed price. The calculator shows the feed you need and the number of bags to buy.
+    </div>
+    """)
 
-            with gr.Group():
-                gr.Markdown("## 🐔 Breed & Birds")
+    # ============================================================
+    # MOBILE-FIRST INPUT FORM
+    # ============================================================
+    with gr.Column(elem_classes=["mobile-form"]):
+        with gr.Group(elem_classes=["form-section"]):
+            gr.HTML('<div class="section-heading"><span class="step-number">1</span><span>🐔 Breed & Birds</span></div>')
+            breed = gr.Dropdown(
+                choices=["Ross 308", "Cobb 500", "Arbor Acres"],
+                value="Ross 308",
+                label="Breed",
+                info="Choose the breed of your broilers.",
+            )
+            birds = gr.Dropdown(
+                choices=[25, 50, 75, 100, 150, 200, 500, 1000],
+                value=50,
+                label="Number of birds",
+                allow_custom_value=True,
+            )
 
-                breed = gr.Dropdown(
-                    choices=["Ross 308", "Cobb 500", "Arbor Acres"],
-                    value="Ross 308",
-                    label="Breed",
-                    info="Select your broiler breed for accurate estimates",
+        with gr.Group(elem_classes=["form-section"]):
+            gr.HTML('<div class="section-heading"><span class="step-number">2</span><span>📅 Expected Age</span></div>')
+            with gr.Row(elem_classes=["age-row"]):
+                weeks = gr.Dropdown(
+                    choices=list(range(0, 21)), value=8, label="Weeks", scale=1
                 )
-
-                birds = gr.Dropdown(
-                    choices=[25, 50, 75, 100, 150, 200, 500, 1000],
-                    value=50,
-                    label="Number of birds",
-                    allow_custom_value=True,
+                days = gr.Dropdown(
+                    choices=list(range(0, 7)), value=0, label="Days", scale=1
                 )
 
-                gr.Markdown("## 📅 Expected Age")
-
-                with gr.Row():
-                    weeks = gr.Dropdown(
-                        choices=list(range(0, 21)),
-                        value=8,
-                        label="Weeks",
-                        scale=1,
-                    )
-                    days = gr.Dropdown(
-                        choices=list(range(0, 7)),
-                        value=0,
-                        label="Days",
-                        scale=1,
-                    )
-
-                gr.Markdown("## 🌾 Feed Details")
-
-                with gr.Row():
-                    bag_size = gr.Dropdown(
-                        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")
-
-                detected_country = detect_country_from_env() or "NG"
-                country_choices = ["Auto-Detect"] + [code for code, _ in COUNTRY_LIST]
-
-                country_dropdown = gr.Dropdown(
-                    choices=country_choices,
-                    value="Auto-Detect",
-                    label="Country (Auto-Detect uses your IP)",
+        with gr.Group(elem_classes=["form-section"]):
+            gr.HTML('<div class="section-heading"><span class="step-number">3</span><span>🌾 Feed Details</span></div>')
+            with gr.Row(elem_classes=["feed-row"]):
+                bag_size = gr.Dropdown(
+                    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
                 )
 
-                country_code_state = gr.State(detected_country)
-
-            gr.Markdown("## 📧 Your Email (Required)")
+        with gr.Group(elem_classes=["form-section"]):
+            gr.HTML('<div class="section-heading"><span class="step-number">4</span><span>🌍 Your Location</span></div>')
+            detected_country = detect_country_from_env() or "NG"
+            country_choices = ["Auto-Detect"] + [code for code, _ in COUNTRY_LIST]
+            country_dropdown = gr.Dropdown(
+                choices=country_choices,
+                value="Auto-Detect",
+                label="Country",
+                info="Auto-Detect uses your connection location when available.",
+            )
+            country_code_state = gr.State(detected_country)
 
+        with gr.Group(elem_classes=["form-section"]):
+            gr.HTML('<div class="section-heading"><span class="step-number">5</span><span>📧 Email for your result</span></div>')
             email = gr.Textbox(
-                label="",
+                label="Email address",
                 placeholder="farmer@example.com",
                 type="email",
                 elem_classes=["email-box"],
-                info="We never share your email. It is used only to save your results.",
-            )
-
-            calculate_btn = gr.Button(
-                "🐔 Calculate Feed Requirement",
-                variant="primary",
-                size="lg",
+                info="We'll save your calculation so you can access it later.",
             )
 
-            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=280):
-            gr.Markdown("## 📊 Your Quick Answer")
-            result = gr.HTML(
-                value="""
-                <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: 12px; margin-top: 4px; color: #5A6E65;">Your feed estimate appears here</div>
-                </div>
-                """,
-                elem_classes=["answer-box"],
-            )
+        calculate_btn = gr.Button(
+            "🐔 Calculate Feed Requirement",
+            variant="primary",
+            size="lg",
+            elem_classes=["calculate-btn"],
+        )
+        save_status = gr.Markdown("")
 
     # ============================================================
-    # BENCHMARK SECTION
+    # RESULTS
     # ============================================================
-
-    gr.Markdown("---")
-
-    with gr.Tabs():
-        with gr.TabItem("📊 Selected Breed Benchmark"):
-            gr.Markdown("### Weekly Benchmark for Selected Breed")
-            initial_table, _ = get_benchmark_table("Ross 308")
-
-            benchmark_table = gr.Dataframe(
-                value=initial_table,
-                headers=["Days", "Body Weight (kg)", "Cumulative Feed (kg)", "FCR"],
-                interactive=False,
-                wrap=True,
-            )
-
-        with gr.TabItem("📈 Breed Comparison"):
-            gr.Markdown("### Breed Comparison (As-Hatched Performance)")
-            comp_data, breeds_list, days_list = get_breed_comparison_table()
-
-            headers = ["Days"]
-            for b in breeds_list:
-                headers.append(f"{b} Weight (kg)")
-                headers.append(f"{b} Feed (kg)")
-                headers.append(f"{b} FCR")
-
-            comparison_table = gr.Dataframe(
-                value=comp_data,
-                headers=headers,
-                interactive=False,
-                wrap=True,
-            )
-
-        with gr.TabItem("🔒 Admin"):
-            gr.Markdown("### 🔒 Admin Dashboard")
-            
-            with gr.Group(elem_classes="admin-login"):
-                gr.Markdown("Enter admin password to view analytics and download data.")
-                
-                with gr.Row():
-                    admin_password_input = gr.Textbox(
-                        label="Admin Password",
-                        placeholder="Enter password...",
-                        type="password",
-                        scale=2,
-                    )
-                    login_btn = gr.Button("Login", variant="primary", scale=1)
-                    logout_btn = gr.Button("Logout", variant="secondary", scale=1)
-                
-                admin_output = gr.Markdown("🔒 Enter password to view analytics.")
-            
-            with gr.Row():
-                export_leads_btn = gr.Button("📥 Export Leads (CSV)", variant="secondary")
-                export_leads_output = gr.File(label="Download Leads CSV")
-            
-            with gr.Row():
-                export_calc_btn = gr.Button("📥 Export Calculations (CSV)", variant="secondary")
-                export_calc_output = gr.File(label="Download Calculations CSV")
-            
-            login_btn.click(
-                fn=admin_login,
-                inputs=[admin_password_input],
-                outputs=[admin_output, admin_password_input, logout_btn],
-            )
-            
-            logout_btn.click(
-                fn=logout_admin,
-                inputs=[],
-                outputs=[admin_output, admin_password_input, logout_btn],
-            )
-            
-            export_leads_btn.click(
-                fn=export_leads_wrapper,
-                inputs=[],
-                outputs=[export_leads_output],
-            )
-            
-            export_calc_btn.click(
-                fn=export_calculations_wrapper,
-                inputs=[],
-                outputs=[export_calc_output],
-            )
+    gr.Markdown("## 📊 Your Feed Result")
+    result = gr.HTML(
+        value="""
+        <div class="results-shell">
+          <section class="buy-card">
+            <div class="eyebrow">YOUR FEED RESULT</div>
+            <div class="buy-label">BUY</div>
+            <div class="buy-number">—</div>
+            <div class="buy-unit">BAGS</div>
+            <div class="buy-note">Enter your flock details above to calculate.</div>
+          </section>
+        </div>
+        """,
+        elem_classes=["answer-box"],
+    )
 
     # ============================================================
-    # BREED REFERENCE
+    # REFERENCE / BENCHMARKS
     # ============================================================
+    with gr.Accordion("📊 Selected Breed Benchmark", open=False):
+        gr.Markdown("Weekly breed benchmark data used by the calculator.")
+        initial_table, _ = get_benchmark_table("Ross 308")
+        benchmark_table = gr.Dataframe(
+            value=initial_table,
+            headers=["Days", "Body Weight (kg)", "Cumulative Feed (kg)", "FCR"],
+            interactive=False,
+            wrap=True,
+            elem_classes=["benchmark-wrap"],
+        )
 
-    gr.Markdown("---")
-
-    gr.Markdown("""
-    ### 🐔 Common Broiler Breeds in Nigeria
-
-    | Breed | Characteristics | Available At |
-    |-------|-----------------|--------------|
-    | **Ross 308** | Big chest, thick legs, very fast growth | Agrited, Sayed, Valentine |
-    | **Cobb 500** | Good early growth, strong legs | Chikun, Zartech |
-    | **Arbor Acres** | Balanced growth, hardy, adaptable | Supreme, CHI, GS, Vertex, Fidan, Cascada, Orobor, Sunchi, Farm Support, Ajila |
+    with gr.Accordion("🐔 Breed Comparison", open=False):
+        gr.Markdown("Compare Ross 308, Cobb 500 and Arbor Acres at the same age checkpoints.")
+        comp_data, breeds_list, days_list = get_breed_comparison_table()
+        headers = ["Days"]
+        for b in breeds_list:
+            headers.extend([f"{b} Weight (kg)", f"{b} Feed (kg)", f"{b} FCR"])
+        comparison_table = gr.Dataframe(
+            value=comp_data,
+            headers=headers,
+            interactive=False,
+            wrap=True,
+            elem_classes=["benchmark-wrap"],
+        )
 
-    💡 **Tip:** Before buying chicks, ask about the breed and hatchery. Not all broilers are the same!
-    """)
+    with gr.Accordion("🐔 Common Broiler Breeds in Nigeria", open=False):
+        gr.Markdown("""
+        | Breed | Characteristics | Available At |
+        |---|---|---|
+        | **Ross 308** | Big chest, thick legs, very fast growth. | Agrited, Sayed, Valentine |
+        | **Cobb 500** | Good early growth, strong legs, solid feed conversion. | Chikun, Zartech |
+        | **Arbor Acres** | Balanced growth, hardy and adaptable. | Supreme, CHI, GS, Vertex, Fidan, Cascada, Orobor, Sunchi, Farm Support, Ajila |
+
+        **Tip:** Ask the hatchery which breed you are buying before using the benchmark.
+        """)
+
+    with gr.Accordion("📌 How It Works & Data Sources", open=False):
+        gr.Markdown(f"""
+        **How the estimate works**
+        - Your weeks + days are converted to total days.
+        - Breed-specific cumulative feed benchmarks estimate total feed per bird.
+        - Starter feed is estimated through Day {STARTER_END_DAY}; feed after that is treated as finisher.
+        - Exact bags = total feed ÷ bag size.
+        - Bags to buy = exact bags rounded up to the next whole bag.
+        - Feed cost = bags to buy × your current price per bag.
+
+        **Data sources**
+        - Ross 308 — Aviagen (2022)
+        - Cobb 500 — Cobb-Vantress
+        - Arbor Acres — Aviagen (2022)
+
+        **Important:** This is a benchmark estimate. Actual feed use varies with management, feed quality, environment and bird performance.
+        """)
 
     # ============================================================
-    # HOW IT WORKS
+    # ASK A QUESTION
     # ============================================================
-
-    gr.Markdown("---")
-
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("""
-            ### 📌 How it works
-
-            - **Weeks + Days** → total days
-            - **Starter** → Day 0–21
-            - **Finisher** → Day 22+
-            - **Bags** → rounded up to next whole bag
-            - **Breed-specific benchmarks** used for estimates
-
-            ⚠️ Actual results may vary with management, feed quality, and other conditions.
-            """)
-
-        with gr.Column(scale=1):
-            gr.Markdown("""
-            ### 📊 Data Sources
-
-            - **Ross 308** — Aviagen (2022)
-            - **Cobb 500** — Cobb-Vantress
-            - **Arbor Acres** — Aviagen (2022)
-
-            *All data from official breed performance objectives.*
-            """)
+    with gr.Accordion("❓ Ask a Question", open=False):
+        gr.Markdown("Ask a simple poultry-feed question. Your question can also help us improve the calculator.")
+        question = gr.Textbox(
+            label="Your question",
+            placeholder="How many bags of feed for 100 broilers for 6 weeks?",
+            lines=3,
+        )
+        ask_btn = gr.Button("💬 Get Answer", variant="secondary", size="lg")
+        question_answer = gr.Markdown("")
 
     # ============================================================
-    # QUESTION SECTION
+    # ADMIN
     # ============================================================
-
-    gr.Markdown("---")
-
-    with gr.Row():
-        with gr.Column(scale=2):
-            gr.Markdown("""
-            # ❓ Ask a question
-            ### What would you like to know about raising your birds?
-            """)
-
-            question = gr.Textbox(
-                label="",
-                placeholder="e.g. How many bags of feed for 100 broilers for 6 weeks?",
-                lines=3,
+    with gr.Accordion("🔒 Admin Dashboard", open=False):
+        gr.Markdown("Password-protected analytics and CSV exports.")
+        with gr.Group(elem_classes=["admin-login"]):
+            admin_password_input = gr.Textbox(
+                label="Admin Password", placeholder="Enter password...", type="password"
             )
+            with gr.Row():
+                login_btn = gr.Button("Login", variant="primary")
+                logout_btn = gr.Button("Logout", variant="secondary", visible=False)
+            admin_output = gr.Markdown("🔒 Enter the admin password to view analytics.")
 
-            ask_btn = gr.Button("💬 Get Answer", variant="secondary", size="lg")
-            question_answer = gr.Markdown("")
+        with gr.Row():
+            export_leads_btn = gr.Button("📥 Export Leads (CSV)", variant="secondary")
+            export_leads_output = gr.File(label="Leads CSV")
+        with gr.Row():
+            export_calc_btn = gr.Button("📥 Export Calculations (CSV)", variant="secondary")
+            export_calc_output = gr.File(label="Calculations CSV")
+
+    gr.HTML("""
+    <div class="footer-note" style="margin-top:18px; text-align:center;">
+      🐔 <strong>How Much Feed?</strong> — A simple broiler feed planning tool.<br>
+      Feed estimates are guides and should be adjusted to actual flock performance.
+    </div>
+    """)
 
     # ============================================================
     # EVENTS
     # ============================================================
-
     breed.change(
         fn=update_benchmark,
         inputs=[breed],
@@ -1532,13 +1631,16 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
     country_dropdown.change(
         fn=on_country_change_handler,
         inputs=[country_dropdown],
-        outputs=[country_code_state, price, price],
+        outputs=[country_code_state, price],
     )
 
     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"
-        return calculate_feed(birds, weeks, days, bag_size, price_per_bag, email, country_code_state, breed, request)
+        return calculate_feed(
+            birds, weeks, days, bag_size, price_per_bag,
+            email, country_code_state, breed, request
+        )
 
     calculate_btn.click(
         fn=calculate_wrapper,
@@ -1552,12 +1654,32 @@ with gr.Blocks(title=APP_NAME, css=CSS, theme=gr.themes.Default()) as demo:
         outputs=[question_answer],
     )
 
-    demo.load(
-        fn=track_visit,
-        inputs=None,
-        outputs=None,
+    login_btn.click(
+        fn=admin_login,
+        inputs=[admin_password_input],
+        outputs=[admin_output, admin_password_input, logout_btn],
     )
 
+    logout_btn.click(
+        fn=logout_admin,
+        inputs=[],
+        outputs=[admin_output, admin_password_input, logout_btn],
+    )
+
+    export_leads_btn.click(
+        fn=export_leads_wrapper,
+        inputs=[],
+        outputs=[export_leads_output],
+    )
+
+    export_calc_btn.click(
+        fn=export_calculations_wrapper,
+        inputs=[],
+        outputs=[export_calc_output],
+    )
+
+    demo.load(fn=track_visit, inputs=None, outputs=None)
+
 
 # ============================================================
 # START APP