Update index.html

index.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@zxing/browser@0.1.4/umd/index.min.js"></script>
     <style>
         :root {
             --forest: #1E3A2F; --moss: #2D5241; --sage: #4A7C59;
@@ -587,6 +588,262 @@
         .severity-pill.severe   { background:#FEE2E2; color:#991B1B; }
         .severity-pill.moderate { background:#FEF3C7; color:#92400E; }
         .severity-pill.mild     { background:#ECFDF5; color:#065F46; }
+    /* ── Scan Quota Counter ───────────────────────────────── */
+    #scan-counter { text-align:center; margin:8px 0 4px; min-height:22px; }
+    .quota-badge {
+        display:inline-block; font-size:0.72rem; font-weight:600;
+        padding:4px 12px; border-radius:20px;
+        background:#1A2942; color:#7DD3FC; border:1px solid #1E3A5F;
+        letter-spacing:0.02em;
+    }
+    .quota-badge.empty { background:#3F1515; color:#FCA5A5; border-color:#7F1D1D; }
+
+    /* ── Health Warnings ──────────────────────────────────── */
+    .warnings-list { display:flex; flex-direction:column; gap:10px; }
+    .warn-card {
+        border-radius:10px; padding:12px 14px;
+    }
+    .warn-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
+    .warn-icon   { font-size:1rem; }
+    .warn-sev    { font-size:0.7rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
+    .warn-cat    { font-size:0.72rem; font-weight:600; color:var(--mist); }
+    .warn-text   { font-size:0.8rem; line-height:1.5; font-weight:500; }
+    .warn-groups { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
+    .warn-tag    {
+        font-size:0.66rem; padding:2px 8px; border-radius:10px;
+        background:rgba(0,0,0,0.1); color:inherit; font-weight:600;
+    }
+
+    /* ── Allergens ────────────────────────────────────────── */
+    .allergen-list { display:flex; flex-direction:column; gap:6px; }
+    .allergen-item {
+        font-size:0.8rem; font-weight:600; color:#92400E;
+        background:#FFFBEB; border:1px solid #FCD34D;
+        padding:8px 12px; border-radius:8px;
+    }
+
+    /* ── Contraindications ────────────────────────────────── */
+    .contra-list  { display:flex; flex-direction:column; gap:6px; }
+    .contra-item  {
+        font-size:0.79rem; color:#6B21A8;
+        background:#FAF5FF; border:1px solid #C084FC;
+        padding:8px 12px; border-radius:8px; line-height:1.4;
+    }
+
+    /* ── Consumption Guidance ─────────────────────────────── */
+    .consumption-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
+    .cons-card {
+        background:#F0F9FF; border:1px solid #BAE6FD;
+        border-radius:10px; padding:12px; min-height:80px;
+    }
+    .cons-card.cons-full { grid-column:1/-1; }
+    .cons-icon  { font-size:1.1rem; margin-bottom:4px; }
+    .cons-label { font-size:0.68rem; font-weight:700; color:#0369A1; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
+    .cons-text  { font-size:0.78rem; color:#0C4A6E; line-height:1.45; }
+
+    /* ── Curiosity + Wellness ─────────────────────────────── */
+    .curiosity-box {
+        background:#F0FDF4; border:1px solid #86EFAC;
+        border-radius:10px; padding:12px 14px;
+        font-size:0.8rem; color:#14532D; line-height:1.5; margin-bottom:8px;
+    }
+    .wellness-box {
+        background:#FFF7ED; border:1px solid #FED7AA;
+        border-radius:10px; padding:12px 14px;
+        font-size:0.8rem; color:#7C2D12; line-height:1.5;
+    }
+
+    /* ── Ingredients Spotlight ────────────────────────────── */
+    .spotlight-list { display:flex; flex-direction:column; gap:8px; }
+    .spotlight-item {
+        background:var(--surface-2); border-radius:10px;
+        padding:12px 14px; cursor:pointer; transition:background 0.2s;
+        border:1px solid transparent;
+    }
+    .spotlight-item:hover { background:#1A2942; border-color:#2A3E5A; }
+    .spot-name  { font-size:0.85rem; font-weight:700; color:var(--sand); margin-bottom:2px; }
+    .spot-role  { font-size:0.68rem; font-weight:600; color:var(--mist); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; }
+    .spot-fact  { font-size:0.77rem; color:var(--text); line-height:1.4; margin-bottom:6px; }
+    .spot-tap   { font-size:0.68rem; color:#60A5FA; font-weight:600; }
+
+    /* ── Ingredients Full List ────────────────────────────── */
+    .ingredients-full { display:flex; flex-wrap:wrap; gap:6px; }
+    .ing-chip {
+        display:inline-block; font-size:0.72rem;
+        background:#1A2942; color:#94A3B8;
+        border:1px solid #2A3E5A; border-radius:6px;
+        padding:3px 8px; line-height:1.4;
+    }
+
+    /* ══ ONBOARDING OVERLAY ══════════════════════════════════ */
+    #onboarding {
+        position:fixed; inset:0; z-index:9000;
+        background:var(--forest);
+        display:flex; flex-direction:column;
+        align-items:center; justify-content:space-between;
+        padding:40px 28px 36px; animation:fadeIn .3s ease;
+    }
+    #onboarding.hidden { display:none; }
+    @keyframes fadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
+    .ob-skip {
+        align-self:flex-end; color:rgba(255,255,255,0.45);
+        font-size:0.78rem; font-weight:600; cursor:pointer;
+        padding:6px 0; letter-spacing:.5px;
+    }
+    .ob-slides { flex:1; display:flex; flex-direction:column;
+        align-items:center; justify-content:center; gap:24px;
+        text-align:center; width:100%; }
+    .ob-icon { font-size:4.5rem; line-height:1; }
+    .ob-title { font-size:1.65rem; font-weight:700;
+        color:var(--cream); line-height:1.2; }
+    .ob-desc  { font-size:0.95rem; color:rgba(255,255,255,.65);
+        line-height:1.6; max-width:300px; }
+    .ob-dots  { display:flex; gap:8px; }
+    .ob-dot   { width:8px; height:8px; border-radius:50%;
+        background:rgba(255,255,255,.25); transition:background .3s; }
+    .ob-dot.active { background:var(--gold); width:22px; border-radius:4px; }
+    .ob-actions { display:flex; flex-direction:column; gap:12px; width:100%; }
+    .ob-next {
+        width:100%; padding:15px; border-radius:14px;
+        background:var(--gold); border:none; color:#1A1000;
+        font-size:1rem; font-weight:700; cursor:pointer;
+        font-family:'DM Sans',sans-serif; letter-spacing:.3px;
+    }
+    .ob-persona-row {
+        display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
+        margin-top:8px;
+    }
+    .ob-persona-chip {
+        padding:8px 16px; border-radius:50px;
+        border:1.5px solid rgba(255,255,255,.25);
+        color:rgba(255,255,255,.7); font-size:0.82rem; font-weight:600;
+        cursor:pointer; transition:all .2s; font-family:'DM Sans',sans-serif;
+    }
+    .ob-persona-chip.selected {
+        background:var(--gold); border-color:var(--gold); color:#1A1000;
+    }
+    /* ══ INGREDIENT BOTTOM SHEET ══════════════════════════════ */
+    #ing-sheet {
+        position:fixed; inset:0; z-index:8000;
+        pointer-events:none; opacity:0; transition:opacity .25s;
+    }
+    #ing-sheet.open { pointer-events:all; opacity:1; }
+    .ing-backdrop {
+        position:absolute; inset:0; background:rgba(0,0,0,.45);
+    }
+    .ing-panel {
+        position:absolute; bottom:0; left:0; right:0;
+        background:var(--cream); border-radius:22px 22px 0 0;
+        padding:24px 22px 36px;
+        max-height:80dvh; overflow-y:auto;
+        transform:translateY(100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
+    }
+    #ing-sheet.open .ing-panel { transform:translateY(0); }
+    .ing-handle {
+        width:36px; height:4px; border-radius:2px;
+        background:var(--whisper); margin:0 auto 20px;
+    }
+    .ing-loading { text-align:center; color:var(--mist); padding:40px 0; font-size:0.9rem; }
+    .ing-spinner {
+        width:30px; height:30px; border:3px solid var(--whisper);
+        border-top-color:var(--forest); border-radius:50%;
+        animation:spin .8s linear infinite; margin:0 auto 12px;
+    }
+    @keyframes spin { to{transform:rotate(360deg)} }
+    .ing-name { font-size:1.3rem; font-weight:700; color:var(--forest); margin-bottom:4px; }
+    .ing-verdict-pill {
+        display:inline-block; padding:3px 12px; border-radius:50px;
+        font-size:0.73rem; font-weight:700; letter-spacing:.5px;
+        margin-bottom:16px;
+    }
+    .ing-verdict-pill.safe    { background:#D6F0E0; color:#1A5C38; }
+    .ing-verdict-pill.aware   { background:#FFF8E1; color:#7A5800; }
+    .ing-verdict-pill.caution { background:#FDEDEC; color:#922B21; }
+    .ing-row { margin-bottom:14px; }
+    .ing-row-label {
+        font-size:0.68rem; font-weight:700; text-transform:uppercase;
+        letter-spacing:1px; color:var(--mist); margin-bottom:4px;
+    }
+    .ing-row-text { font-size:0.9rem; color:var(--ink); line-height:1.5; }
+    .ing-curiosity {
+        background:linear-gradient(135deg,#E8F4F0,#F0F9F5);
+        border-left:4px solid var(--forest);
+        padding:12px 14px; border-radius:0 10px 10px 0;
+        font-size:0.85rem; color:var(--forest); line-height:1.5;
+        margin-top:4px;
+    }
+    .ing-close-btn {
+        width:100%; margin-top:20px; padding:13px;
+        background:var(--forest); color:var(--cream);
+        border:none; border-radius:12px; font-size:0.95rem;
+        font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif;
+    }
+    /* ══ SHARE CARD OVERLAY ════════════════════════════════════ */
+    #share-overlay {
+        position:fixed; inset:0; z-index:8500;
+        background:rgba(0,0,0,.7); display:none;
+        align-items:center; justify-content:center;
+        padding:20px;
+    }
+    #share-overlay.open { display:flex; }
+    .share-card-wrap {
+        background:var(--white); border-radius:20px;
+        padding:20px; width:100%; max-width:360px;
+        box-shadow:0 20px 60px rgba(0,0,0,.35);
+    }
+    #shareCanvas {
+        width:100%; border-radius:12px;
+        display:block; margin-bottom:14px;
+    }
+    .share-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
+    .share-action-btn {
+        padding:11px; border-radius:10px; border:none;
+        font-size:0.85rem; font-weight:700;
+        cursor:pointer; font-family:'DM Sans',sans-serif;
+    }
+    .share-action-btn.primary { background:var(--forest); color:var(--cream); }
+    .share-action-btn.secondary { background:var(--whisper); color:var(--ink); }
+    /* ══ BARCODE BUTTON ════════════════════════════════════════ */
+    .barcode-btn {
+        display:flex; align-items:center; gap:8px;
+        width:100%; padding:11px 16px; border-radius:12px;
+        background:var(--white); border:1.5px solid var(--whisper);
+        color:var(--mist); font-size:0.85rem; font-weight:600;
+        cursor:pointer; font-family:'DM Sans',sans-serif;
+        margin-top:8px; transition:all .2s;
+    }
+    .barcode-btn:hover { border-color:var(--sage); color:var(--forest); }
+    /* ══ BARCODE SCANNER ═══════════════════════════════════════ */
+    #barcode-overlay {
+        position:fixed; inset:0; z-index:7000;
+        background:#000; display:none;
+        flex-direction:column; align-items:center; justify-content:center;
+    }
+    #barcode-overlay.open { display:flex; }
+    #barcode-video {
+        width:100%; max-width:400px;
+        border-radius:16px; display:block;
+    }
+    .barcode-guide {
+        position:absolute;
+        width:240px; height:80px;
+        border:2px solid var(--gold);
+        border-radius:8px;
+        box-shadow:0 0 0 4000px rgba(0,0,0,.5);
+    }
+    .barcode-hint {
+        position:absolute; bottom:100px;
+        color:rgba(255,255,255,.75); font-size:0.85rem;
+        text-align:center; padding:0 30px;
+    }
+    .barcode-cancel {
+        position:absolute; bottom:44px;
+        background:rgba(255,255,255,.15); color:#fff;
+        border:1.5px solid rgba(255,255,255,.3);
+        padding:10px 30px; border-radius:50px;
+        font-size:0.9rem; font-weight:600; cursor:pointer;
+        font-family:'DM Sans',sans-serif;
+    }
     </style>
 </head>
 <body>
@@ -595,9 +852,6 @@
 <div class="header">
     <div class="logo">Eat<em>lytic</em></div>
     <div class="header-right">
-        <div id="quota-pill" style="display:none;align-items:center;gap:4px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:var(--cream);padding:5px 11px;border-radius:50px;font-size:0.72rem;font-weight:600;">
-            🌿 <span id="quota-count">5</span> left
-        </div>
         <button class="hdr-btn" onclick="openLang()"><i class="fas fa-globe"></i> <span id="lang-display">EN</span></button>
     </div>
 </div>
@@ -700,6 +954,9 @@
                     <p>Tap or drag photo</p>
                 </div>
             </div>
+            <button class="barcode-btn" onclick="startBarcodeScanner()">
+                <i class="fas fa-barcode"></i> Scan Barcode Instead
+            </button>
         </div>
 
         <!-- Preview -->
@@ -717,6 +974,7 @@
                     <div class="state-tip" id="state-tip"></div>
                 </div>
             </div>
+            <div id="scan-counter"></div>
             <button class="btn-primary" id="analyze-main-btn" onclick="analyze()" style="display:none">
                 <i class="fas fa-microscope" style="margin-right:8px"></i>
                 <span id="analyze-btn-text">Analyze Label</span>
@@ -815,6 +1073,56 @@
     </div>
 </div>
 
+<!-- ONBOARDING OVERLAY (3-screen, shown on first run) -->
+<div id="onboarding" class="hidden">
+    <div class="ob-skip" onclick="closeOnboarding()">Skip</div>
+    <div class="ob-slides">
+        <!-- Slide content injected by JS -->
+    </div>
+    <div class="ob-actions">
+        <div class="ob-dots" id="ob-dots" style="justify-content:center;margin-bottom:8px"></div>
+        <button class="ob-next" id="ob-next-btn" onclick="nextOnboardStep()">Get Started →</button>
+    </div>
+</div>
+
+<!-- INGREDIENT SHEET (bottom sheet, fetches /ingredient-info) -->
+<div id="ing-sheet" onclick="closeIngSheet(event)">
+    <div class="ing-backdrop"></div>
+    <div class="ing-panel">
+        <div class="ing-handle"></div>
+        <div id="ing-content">
+            <div class="ing-loading">
+                <div class="ing-spinner"></div>
+                Loading ingredient info…
+            </div>
+        </div>
+        <button class="ing-close-btn" onclick="closeIngSheet()">Close</button>
+    </div>
+</div>
+
+<!-- SHARE CARD OVERLAY (canvas-generated PNG) -->
+<div id="share-overlay" onclick="closeShareOverlay(event)">
+    <div class="share-card-wrap">
+        <canvas id="shareCanvas" width="680" height="400"></canvas>
+        <div class="share-actions">
+            <button class="share-action-btn primary" onclick="downloadShareCard()">
+                <i class="fas fa-download"></i> Save Image
+            </button>
+            <button class="share-action-btn secondary" onclick="nativeShare()">
+                <i class="fas fa-share-alt"></i> Share
+            </button>
+        </div>
+    </div>
+</div>
+
+<!-- BARCODE SCANNER OVERLAY -->
+<div id="barcode-overlay">
+    <video id="barcode-video" autoplay playsinline muted></video>
+    <div class="barcode-guide"></div>
+    <div class="barcode-hint">📦 Point at any product barcode (EAN / UPC)</div>
+    <button class="barcode-cancel" onclick="stopBarcodeScanner()">Cancel</button>
+</div>
+
 <!-- LOADER -->
 <div id="loader">
     <div class="loader-ring"></div>
@@ -946,6 +1254,8 @@ window.onload = () => {
     currentPersona = savedPersona;
     renderLangOptions();
     updateProfileStats();
+    initScanCounter();
+    initOnboarding();
 };
 // ===== TABS =====
 function switchTab(tab) {
@@ -1181,6 +1491,26 @@ function handleBlurNotice(blurInfo) {
     }
     notice.classList.add('visible');
 }
+// ===== SCAN QUOTA COUNTER =====
+async function initScanCounter() {
+    try {
+        const r = await fetch(`${API}/scan-quota`);
+        const q = await r.json();
+        updateScanCounter(q);
+    } catch { /* silent fail */ }
+}
+function updateScanCounter(q) {
+    if (!q) return;
+    const el = document.getElementById('scan-counter');
+    if (!el) return;
+    const rem = q.remaining ?? (q.limit - q.used);
+    const lim = q.limit ?? 5;
+    if (rem <= 0) {
+        el.innerHTML = `<span class="quota-badge empty">🔒 Daily limit reached — <a href="#" style="color:inherit;font-weight:700">Upgrade to Pro</a></span>`;
+    } else {
+        el.innerHTML = `<span class="quota-badge" style="opacity:${rem <= 2 ? 1 : 0.75}">⚡ ${rem}/${lim} free scans today</span>`;
+    }
+}
 async function analyze() {
     if (!blob) return;
     hideError();
@@ -1217,8 +1547,9 @@ async function analyze() {
         if (!res.ok) throw new Error(`Server error ${res.status}: ${res.statusText}`);
         const data = await res.json();
         if (data.error === 'quota_exceeded') {
-            showContextualError('generic','🌿','Daily Limit Reached',
-                data.message || `You've used all ${data.quota?.limit ?? 5} free scans today. Come back tomorrow or upgrade to Pro.`);
+            showContextualError('quota','🔒','Daily Limit Reached',
+                data.message || `You've used all ${data.quota?.limit ?? 5} free scans for today. Come back tomorrow or upgrade to Pro.`);
+            updateScanCounter(data.quota);
             return;
         }
         if (data.error === 'image_quality') {
@@ -1241,10 +1572,9 @@ async function analyze() {
             return;
         }
         if (data.error) throw new Error(data.error);
-        // Update quota pill display
-        if (data.quota) updateQuotaPill(data.quota);
         // Show blur notice if blur was detected
         handleBlurNotice(data.blur_info);
+        if (data.quota) updateScanCounter(data.quota);
         lastResult = data;
         renderReport(data);
         if (saveHistory) addToHistory(data);
@@ -1312,108 +1642,119 @@ function renderReport(d) {
     });
 }
 function buildBody(d) {
-    // ── Safely extract all arrays with fallbacks ──────────────────
     const nutrients  = Array.isArray(d.nutrient_breakdown)    ? d.nutrient_breakdown    : [];
     const pros       = Array.isArray(d.pros)                  ? d.pros                  : [];
     const cons       = Array.isArray(d.cons)                  ? d.cons                  : [];
     const ageW       = Array.isArray(d.age_warnings)          ? d.age_warnings          : [];
     const warnings   = Array.isArray(d.health_warnings)       ? d.health_warnings       : [];
-    const allergens  = Array.isArray(d.allergens)             ? d.allergens             : [];
     const contras    = Array.isArray(d.contraindications)     ? d.contraindications     : [];
+    const allergens  = Array.isArray(d.allergens)             ? d.allergens             : [];
     const ingList    = Array.isArray(d.ingredients_list)      ? d.ingredients_list      : [];
     const spotlight  = Array.isArray(d.ingredients_spotlight) ? d.ingredients_spotlight : [];
     let html = '';
 
-    // ── 0a. Blur info banner ──────────────────────────────────────
+    // 0. Blur info section
     const bi = d.blur_info;
     if (bi && bi.detected) {
         if (bi.deblurred && bi.image_b64) {
             html += `<div class="r-section" style="padding:14px">
                 <div class="deblur-report-badge">🔧 Blur Corrected — Enhanced Image Used</div>
-                <div class="deblur-img-wrap"><img src="${bi.image_b64}" alt="Enhanced" loading="lazy"></div>
+                <div class="deblur-img-wrap">
+                    <img src="${bi.image_b64}" alt="Deblurred image" loading="lazy">
+                </div>
                 <div style="font-size:0.76rem;color:var(--mist);line-height:1.5">
-                    Image was <strong>${escHtml(bi.severity)}ly blurry</strong> (score ${bi.score}/100)
-                    and enhanced before OCR.
+                    The original image was <strong>${escHtml(bi.severity)}ly blurry</strong>
+                    (score&nbsp;${bi.score}/100). It was processed through a
+                    multi-stage enhancement pipeline before OCR and analysis.
                     ${bi.method_log ? `<br><span style="font-family:monospace;font-size:0.68rem;color:#A16207">Pipeline: ${escHtml(bi.method_log)}</span>` : ''}
-                </div></div>`;
+                </div>
+            </div>`;
         } else {
             html += `<div class="r-section" style="padding:14px;background:#FFFBEB;border:1.5px solid #FCD34D;border-radius:var(--radius-sm)">
                 <div class="deblur-report-badge">⚠️ Blur Detected</div>
                 <div style="font-size:0.76rem;color:#78350F;line-height:1.5">
-                    Blur detected (severity: <strong>${escHtml(bi.severity)}</strong>, score ${bi.score}/100).
+                    Blur detected (severity:&nbsp;<strong>${escHtml(bi.severity)}</strong>,
+                    score&nbsp;${bi.score}/100). Original image used after comparison.
                     Retake with better lighting for higher accuracy.
-                </div></div>`;
+                </div>
+            </div>`;
         }
     }
 
-    // ── 0b. Low-confidence notice ─────────────────────────────────
+    // 0b. Low-confidence notice
     if (d.is_low_confidence) {
         html += `<div class="r-section" style="padding:12px;background:#FFF7ED;border:1.5px solid #FDBA74;border-radius:var(--radius-sm)">
             <div style="font-size:0.8rem;color:#92400E;font-weight:600">⚠️ Partial Label — Lower Confidence</div>
-            <div style="font-size:0.75rem;color:#92400E;margin-top:4px">
-                Only partial label text was readable. Retake with a clearer photo for full accuracy.
-            </div></div>`;
+            <div style="font-size:0.75rem;color:#92400E;margin-top:4px">OCR could only extract partial text. Results are directional — retake with a clearer photo for full accuracy.</div>
+        </div>`;
     }
 
-    // ── 1. Health Warnings — most critical, shown first ───────────
+    // 1. Health Warnings (CRITICAL — shown first after image info)
     if (warnings.length) {
-        const sevOrder = {critical:0, moderate:1, low:2};
-        const sorted   = [...warnings].sort((a,b)=>(sevOrder[a.severity]??2)-(sevOrder[b.severity]??2));
-        const S = {
-            critical:{bg:'#FEF2F2',border:'#F87171',icon:'🚨',color:'#991B1B',label:'CRITICAL'},
-            moderate:{bg:'#FFFBEB',border:'#FCD34D',icon:'⚠️', color:'#92400E',label:'MODERATE'},
-            low:     {bg:'#F0F9FF',border:'#7DD3FC',icon:'ℹ️', color:'#075985',label:'NOTE'},
+        const sevOrder = { critical: 0, moderate: 1, low: 2 };
+        const sorted = [...warnings].sort((a, b) => (sevOrder[a.severity] ?? 2) - (sevOrder[b.severity] ?? 2));
+        const sevStyle = {
+            critical: { bg: '#FEF2F2', border: '#F87171', icon: '🚨', color: '#991B1B', label: 'CRITICAL' },
+            moderate: { bg: '#FFFBEB', border: '#FCD34D', icon: '⚠️',  color: '#92400E', label: 'MODERATE' },
+            low:      { bg: '#F0F9FF', border: '#7DD3FC', icon: 'ℹ️',  color: '#075985', label: 'NOTE' },
         };
-        html += `<div class="r-section"><div class="r-title">Health Warnings</div>
-            ${sorted.map(w => {
-                const s = S[w.severity] || S.low;
-                const tags = Array.isArray(w.affected_groups) && w.affected_groups.length
-                    ? `<div style="margin-top:5px;display:flex;flex-wrap:wrap;gap:4px">
-                        ${w.affected_groups.map(g=>`<span style="background:${s.border}33;color:${s.color};font-size:0.64rem;font-weight:700;padding:2px 8px;border-radius:50px">${escHtml(g)}</span>`).join('')}
-                       </div>` : '';
-                return `<div style="background:${s.bg};border-left:4px solid ${s.border};border-radius:6px;padding:10px 12px;margin-bottom:8px">
-                    <div style="display:flex;align-items:center;gap:6px;margin-bottom:3px">
-                        <span>${s.icon}</span>
-                        <span style="font-size:0.67rem;font-weight:800;color:${s.color};letter-spacing:0.05em">${s.label}</span>
-                        <span style="font-size:0.7rem;color:var(--mist)">${escHtml(w.category||'')}</span>
-                    </div>
-                    <div style="font-size:0.8rem;line-height:1.5;color:${s.color}">${escHtml(w.warning)}</div>
-                    ${tags}</div>`;
-            }).join('')}</div>`;
+        html += `<div class="r-section">
+            <div class="r-title">Health Warnings</div>
+            <div class="warnings-list">
+                ${sorted.map(w => {
+                    const s = sevStyle[w.severity] || sevStyle.low;
+                    const groups = Array.isArray(w.affected_groups) && w.affected_groups.length
+                        ? `<div class="warn-groups">${w.affected_groups.map(g => `<span class="warn-tag">${escHtml(g)}</span>`).join('')}</div>` : '';
+                    return `<div class="warn-card" style="background:${s.bg};border-left:4px solid ${s.border}">
+                        <div class="warn-header">
+                            <span class="warn-icon">${s.icon}</span>
+                            <span class="warn-sev" style="color:${s.color}">${s.label}</span>
+                            <span class="warn-cat">${escHtml(w.category || '')}</span>
+                        </div>
+                        <div class="warn-text" style="color:${s.color}">${escHtml(w.warning)}</div>
+                        ${groups}
+                    </div>`;
+                }).join('')}
+            </div>
+        </div>`;
     }
 
-    // ── 2. Allergens ──────────────────────────────────────────────
+    // 2. Allergens
     if (allergens.length) {
-        html += `<div class="r-section"><div class="r-title">Allergen Information</div>
-            <div style="display:flex;flex-direction:column;gap:6px">
-                ${allergens.map(a=>`<div style="background:#FEF2F2;border-left:3px solid #F87171;border-radius:5px;padding:7px 12px;font-size:0.8rem;color:#991B1B;font-weight:500">⚠️ ${escHtml(a)}</div>`).join('')}
-            </div></div>`;
+        html += `<div class="r-section">
+            <div class="r-title">Allergen Information</div>
+            <div class="allergen-list">
+                ${allergens.map(a => `<div class="allergen-item">⚠️ ${escHtml(a)}</div>`).join('')}
+            </div>
+        </div>`;
     }
 
-    // ── 3. Contraindications ──────────────────────────────────────
+    // 3. Contraindications
     if (contras.length) {
-        html += `<div class="r-section"><div class="r-title">Not Suitable For</div>
-            <div style="display:flex;flex-direction:column;gap:6px">
-                ${contras.map(c=>`<div style="background:#FFF7ED;border-left:3px solid #FB923C;border-radius:5px;padding:7px 12px;font-size:0.8rem;color:#92400E;font-weight:500">🚫 ${escHtml(c)}</div>`).join('')}
-            </div></div>`;
+        html += `<div class="r-section">
+            <div class="r-title">Contraindications</div>
+            <div class="contra-list">
+                ${contras.map(c => `<div class="contra-item">🚫 ${escHtml(c)}</div>`).join('')}
+            </div>
+        </div>`;
     }
 
-    // ── 4. Simple Explanation ─────────────────────────────────────
+    // 4. Simple Explanation
     if (d.eli5_explanation) {
-        html += `<div class="r-section"><div class="r-title">Simple Explanation</div>
-            <div class="eli5-box"><span class="eli5-label">🍭 Easy Read</span>${escHtml(d.eli5_explanation)}</div>
+        html += `<div class="r-section">
+            <div class="r-title">Simple Explanation</div>
+            <div class="eli5-box">
+                <span class="eli5-label">🍭 Easy Read</span>
+                ${escHtml(d.eli5_explanation)}
+            </div>
         </div>`;
     }
 
-    // ── 5. Nutritional Breakdown ──────────────────────────────────
+    // 5. Nutritional Breakdown
     if (nutrients.length) {
-        const MAXES = {g:50, mg:2000, '%':100, kcal:600, kj:2500};
-        // Serving-size badge tells the user which reference the numbers use
-        const badge = d.serving_size
-            ? `<div style="display:inline-flex;align-items:center;gap:6px;background:#EAF5EE;border:1.5px solid #7FB896;border-radius:8px;padding:5px 12px;margin-bottom:12px;font-size:0.75rem;font-weight:700;color:#2D5241;">📏 Values shown per ${escHtml(d.serving_size)}</div>`
-            : '';
-        html += `<div class="r-section"><div class="r-title">Nutritional Breakdown</div>
-            ${badge}
+        const MAXES = { g: 50, mg: 2000, '%': 100, kcal: 500, kj: 2000 };
+        html += `<div class="r-section">
+            <div class="r-title">Nutritional Breakdown</div>
             <div class="nutrient-legend">
                 <div class="n-leg"><div class="n-dot" style="background:#2D7A4F"></div>Good</div>
                 <div class="n-leg"><div class="n-dot" style="background:#C9A84C"></div>Moderate</div>
@@ -1421,19 +1762,14 @@ function buildBody(d) {
                 <div class="n-leg"><div class="n-dot" style="background:#8B0000"></div>Bad</div>
             </div>
             ${nutrients.map(n => {
-                const r      = n.rating || 'moderate';
-                // FIX: safe parse strips unit chars accidentally included in value
-                // e.g. LLM returns "34.0g" → parseFloat("34.0g") = NaN → bars disappear
-                const numVal = parseFloat(String(n.value).replace(/[^0-9.]/g, ''));
-                const unit   = (n.unit || '').toLowerCase().trim();
-                const max    = MAXES[unit] || 100;
-                const pct    = isNaN(numVal) ? 0 : Math.min(100, (numVal / max) * 100);
-                const disp   = isNaN(numVal) ? escHtml(String(n.value)) : numVal;
+                const r   = n.rating || 'moderate';
+                const max = MAXES[n.unit] || 100;
+                const pct = Math.min(100, (parseFloat(n.value) / max) * 100);
                 return `<div class="nutrient-item">
                     <div class="nutrient-row">
                         <div class="n-name">${escHtml(n.name)}</div>
                         <div class="n-bar-wrap"><div class="n-bar bar-${r}" data-w="${pct.toFixed(1)}"></div></div>
-                        <div class="n-val">${disp}${escHtml(n.unit||'')}</div>
+                        <div class="n-val">${n.value}${n.unit || ''}</div>
                     </div>
                     ${n.impact ? `<div class="n-impact">${escHtml(n.impact)}</div>` : ''}
                 </div>`;
@@ -1441,90 +1777,121 @@ function buildBody(d) {
         </div>`;
     }
 
-    // ── 6. Pros & Cons ────────────────────────────────────────────
+    // 6. Pros & Cons
     if (pros.length || cons.length) {
-        html += `<div class="r-section"><div class="r-title">Pros &amp; Cons</div>
+        html += `<div class="r-section">
+            <div class="r-title">Pros &amp; Cons</div>
             <div class="pc-grid">
                 <div>
                     <div class="pc-label p">Benefits</div>
-                    ${pros.map(p=>`<div class="pc-item"><div class="pc-dot p"></div><span>${escHtml(p)}</span></div>`).join('')}
+                    ${pros.map(p => `<div class="pc-item"><div class="pc-dot p"></div><span>${escHtml(p)}</span></div>`).join('')}
                 </div>
                 <div>
                     <div class="pc-label c">Watch Out</div>
-                    ${cons.map(c=>`<div class="pc-item"><div class="pc-dot c"></div><span>${escHtml(c)}</span></div>`).join('')}
+                    ${cons.map(c => `<div class="pc-item"><div class="pc-dot c"></div><span>${escHtml(c)}</span></div>`).join('')}
                 </div>
-            </div></div>`;
+            </div>
+        </div>`;
+    }
+
+    // 7. Consumption Guidance (NEW)
+    const hasConsumption = d.daily_limit || d.optimal_timing || d.overconsumption_effects || d.dietary_advice;
+    if (hasConsumption) {
+        html += `<div class="r-section">
+            <div class="r-title">Healthy Consumption Guidance</div>
+            <div class="consumption-grid">
+                ${d.daily_limit ? `<div class="cons-card">
+                    <div class="cons-icon">📏</div>
+                    <div class="cons-label">Daily Limit</div>
+                    <div class="cons-text">${escHtml(d.daily_limit)}</div>
+                </div>` : ''}
+                ${d.optimal_timing ? `<div class="cons-card">
+                    <div class="cons-icon">⏰</div>
+                    <div class="cons-label">Best Time to Consume</div>
+                    <div class="cons-text">${escHtml(d.optimal_timing)}</div>
+                </div>` : ''}
+                ${d.overconsumption_effects ? `<div class="cons-card cons-full">
+                    <div class="cons-icon">📈</div>
+                    <div class="cons-label">Effects of Overconsumption</div>
+                    <div class="cons-text">${escHtml(d.overconsumption_effects)}</div>
+                </div>` : ''}
+                ${d.dietary_advice ? `<div class="cons-card cons-full">
+                    <div class="cons-icon">🥗</div>
+                    <div class="cons-label">Balanced Diet Tip</div>
+                    <div class="cons-text">${escHtml(d.dietary_advice)}</div>
+                </div>` : ''}
+            </div>
+        </div>`;
     }
 
-    // ── 7. Product Analysis paragraphs ────────────────────────────
+    // 8. Product Analysis paragraphs
     if (d.paragraph_benefits || d.paragraph_uniqueness) {
-        html += `<div class="r-section"><div class="r-title">Product Analysis</div>
+        html += `<div class="r-section">
+            <div class="r-title">Product Analysis</div>
             ${d.paragraph_benefits   ? `<p class="para-text">${escHtml(d.paragraph_benefits)}</p>`   : ''}
             ${d.paragraph_uniqueness ? `<p class="para-text">${escHtml(d.paragraph_uniqueness)}</p>` : ''}
         </div>`;
     }
 
-    // ── 8. Age Group Guidance ─────────────────────────────────────
+    // 9. Age Group Warnings
     if (ageW.length) {
-        html += `<div class="r-section"><div class="r-title">By Age Group</div>
+        html += `<div class="r-section">
+            <div class="r-title">By Age Group</div>
             <div class="age-grid">
-                ${ageW.map(w=>`
-                <div class="age-card ${w.status||'caution'}">
-                    <div class="age-emoji">${w.emoji||'👤'}</div>
+                ${ageW.map(w => `
+                <div class="age-card ${w.status || 'caution'}">
+                    <div class="age-emoji">${w.emoji || '👤'}</div>
                     <div class="age-grp">${escHtml(w.group)}</div>
                     <div class="age-msg">${escHtml(w.message)}</div>
                 </div>`).join('')}
-            </div></div>`;
-    }
-
-    // ── 9. Ingredient Spotlight ───────────────────────────────────
-    if (spotlight.length) {
-        html += `<div class="r-section"><div class="r-title">Ingredient Spotlight</div>
-            <div style="display:flex;flex-direction:column;gap:10px">
-                ${spotlight.map(s=>`
-                <div style="background:var(--parchment);border-radius:8px;padding:10px 14px">
-                    <div style="font-size:0.85rem;font-weight:700;color:var(--forest);margin-bottom:2px">${escHtml(s.name||'')}</div>
-                    <div style="font-size:0.67rem;font-weight:700;color:var(--mist);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:5px">${escHtml(s.role||'')}</div>
-                    <div style="font-size:0.8rem;line-height:1.5;color:var(--ink)">${escHtml(s.curiosity||'')}</div>
-                </div>`).join('')}
-            </div></div>`;
+            </div>
+        </div>`;
     }
 
-    // ── 10. Full Ingredients List ─────────────────────────────────
-    if (ingList.length) {
-        html += `<div class="r-section"><div class="r-title">Ingredients (as printed)</div>
-            <div style="font-size:0.78rem;line-height:1.8;color:var(--ink);background:var(--parchment);padding:10px 14px;border-radius:8px">
-                ${ingList.map((ing,i)=>`<span style="color:var(--mist);font-size:0.68rem;font-weight:700">${i+1}.</span>&nbsp;${escHtml(ing)}`).join('&nbsp;&middot;&nbsp;')}
-            </div></div>`;
+    // 10. Curiosity Fact + Wellness Tip
+    if (d.curiosity_fact || d.wellness_tip) {
+        html += `<div class="r-section">
+            <div class="r-title">Curiosity Corner</div>
+            ${d.curiosity_fact ? `<div class="curiosity-box">💡 ${escHtml(d.curiosity_fact)}</div>` : ''}
+            ${d.wellness_tip   ? `<div class="wellness-box">🌿 <strong>Tip for you:</strong> ${escHtml(d.wellness_tip)}</div>` : ''}
+        </div>`;
     }
 
-    // ── 11. Molecular Insight ─────────────────────────────────────
+    // 11. Molecular Insight
     if (d.molecular_insight) {
-        html += `<div class="r-section"><div class="r-title">Molecular Insight</div>
+        html += `<div class="r-section">
+            <div class="r-title">Molecular Insight</div>
             <div class="mol-box">🔬 ${escHtml(d.molecular_insight)}</div>
         </div>`;
     }
 
-    // ── 12. Healthy Consumption Guide ─────────────────────────────
-    const consItems = [
-        d.daily_limit             ? {icon:'📏',label:'Daily Limit',      text:d.daily_limit}             : null,
-        d.optimal_timing          ? {icon:'⏰',label:'Best Time to Eat', text:d.optimal_timing}          : null,
-        d.overconsumption_effects ? {icon:'⚡',label:'Too Much Causes',  text:d.overconsumption_effects} : null,
-        d.dietary_advice          ? {icon:'💡',label:'Dietary Tip',      text:d.dietary_advice}          : null,
-    ].filter(Boolean);
-    if (consItems.length) {
-        html += `<div class="r-section"><div class="r-title">Healthy Consumption Guide</div>
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
-                ${consItems.map(ci=>`
-                <div style="background:var(--parchment);border-radius:8px;padding:10px 12px">
-                    <div style="font-size:1.2rem;margin-bottom:4px">${ci.icon}</div>
-                    <div style="font-size:0.64rem;font-weight:700;color:var(--mist);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px">${ci.label}</div>
-                    <div style="font-size:0.78rem;line-height:1.5;color:var(--ink)">${escHtml(ci.text)}</div>
+    // 12. Ingredients Spotlight (tap-to-learn)
+    if (spotlight.length) {
+        html += `<div class="r-section">
+            <div class="r-title">Ingredients Spotlight</div>
+            <div class="spotlight-list">
+                ${spotlight.map(s => `
+                <div class="spotlight-item" onclick="openIngSheet('${escHtml(s.name).replace(/'/g,"\\'")}')">
+                    <div class="spot-name">${escHtml(s.name)}</div>
+                    <div class="spot-role">${escHtml(s.role || '')}</div>
+                    <div class="spot-fact">${escHtml(s.curiosity || '')}</div>
+                    <div class="spot-tap">Tap to learn more →</div>
                 </div>`).join('')}
-            </div></div>`;
+            </div>
+        </div>`;
+    }
+
+    // 13. Full Ingredients List
+    if (ingList.length) {
+        html += `<div class="r-section">
+            <div class="r-title">Full Ingredients</div>
+            <div class="ingredients-full">
+                ${ingList.map(i => `<span class="ing-chip">${escHtml(i)}</span>`).join('')}
+            </div>
+        </div>`;
     }
 
-    // ── 13. Better Alternative ────────────────────────────────────
+    // 14. Better Alternative
     if (d.better_alternative) {
         html += `<div class="r-section" style="padding:0;overflow:hidden">
             <div class="alt-box">
@@ -1533,22 +1900,11 @@ function buildBody(d) {
                     <div class="alt-lbl">Better Alternative</div>
                     <div class="alt-text">${escHtml(d.better_alternative)}</div>
                 </div>
-            </div></div>`;
+            </div>
+        </div>`;
     }
     return html;
 }
-function updateQuotaPill(quota) {
-    if (!quota) return;
-    const pill  = document.getElementById('quota-pill');
-    const count = document.getElementById('quota-count');
-    if (!pill || !count) return;
-    count.textContent = quota.remaining;
-    pill.style.display = 'flex';
-    if (quota.remaining <= 1) {
-        pill.style.background = 'rgba(220,38,38,0.3)';
-        pill.style.borderColor = 'rgba(252,165,165,0.5)';
-    }
-}
 function escHtml(str) {
     // Only escape the four chars that break HTML structure.
     // Do NOT encode quotes in text nodes — causes doubled encoding.
@@ -1676,14 +2032,427 @@ function setLang(code, save = true) {
     updateProfileStats();
 }
 // ===== SHARE =====
+// ── SHARE (replaced: now opens canvas share card) ──────────────────
 async function shareReport() {
     if (!lastResult) return;
-    const text = `🌿 Eatlytic Food Report\n\n${lastResult.product_name}\nScore: ${lastResult.score}/10 — ${lastResult.verdict}\n\n${lastResult.summary}`;
+    generateShareCard(lastResult);
+    document.getElementById('share-overlay').classList.add('open');
+}
+
+function closeShareOverlay(e) {
+    if (!e || e.target === document.getElementById('share-overlay')) {
+        document.getElementById('share-overlay').classList.remove('open');
+    }
+}
+
+function generateShareCard(d) {
+    const canvas = document.getElementById('shareCanvas');
+    const ctx    = canvas.getContext('2d');
+    const W = 680, H = 400;
+    canvas.width = W; canvas.height = H;
+
+    // Background
+    ctx.fillStyle = '#1E3A2F';
+    ctx.fillRect(0, 0, W, H);
+
+    // Subtle grain texture overlay
+    ctx.fillStyle = 'rgba(255,255,255,0.02)';
+    for (let i = 0; i < 3000; i++) {
+        ctx.fillRect(Math.random()*W, Math.random()*H, 1, 1);
+    }
+
+    // Score ring
+    const cx = 100, cy = 190, r = 66;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI*2);
+    ctx.strokeStyle = 'rgba(255,255,255,0.12)';
+    ctx.lineWidth = 10;
+    ctx.stroke();
+
+    const score = Math.min(10, Math.max(1, d.score || 5));
+    const angle = (score / 10) * Math.PI * 2 - Math.PI / 2;
+    const scoreColor = score >= 7 ? '#7FB896' : score >= 5 ? '#C9A84C' : '#D96B47';
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, -Math.PI/2, angle);
+    ctx.strokeStyle = scoreColor;
+    ctx.lineWidth = 10;
+    ctx.lineCap = 'round';
+    ctx.stroke();
+
+    // Score number
+    ctx.fillStyle = '#FFFFFF';
+    ctx.font = 'bold 42px DM Sans, Arial';
+    ctx.textAlign = 'center';
+    ctx.fillText(score, cx, cy + 8);
+    ctx.font = '16px DM Sans, Arial';
+    ctx.fillStyle = 'rgba(255,255,255,0.5)';
+    ctx.fillText('/ 10', cx, cy + 28);
+
+    // Verdict pill
+    const verdict = (d.verdict || 'Analyzed').toUpperCase();
+    ctx.font = 'bold 11px DM Sans, Arial';
+    const pillW = ctx.measureText(verdict).width + 24;
+    const pillX = cx - pillW/2, pillY = cy + 46;
+    ctx.fillStyle = scoreColor;
+    roundRect(ctx, pillX, pillY, pillW, 22, 11);
+    ctx.fillStyle = '#1E3A2F';
+    ctx.textAlign = 'center';
+    ctx.font = 'bold 11px DM Sans, Arial';
+    ctx.fillText(verdict, cx, pillY + 15);
+
+    // Divider
+    ctx.strokeStyle = 'rgba(255,255,255,0.1)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(185, 60); ctx.lineTo(185, 340);
+    ctx.stroke();
+
+    // Product info (right column)
+    const rx = 210;
+    ctx.textAlign = 'left';
+
+    // Category tag
+    ctx.font = '600 12px DM Sans, Arial';
+    ctx.fillStyle = 'rgba(201,168,76,0.85)';
+    ctx.fillText((d.product_category || 'Food Product').toUpperCase(), rx, 90);
+
+    // Product name
+    const name = d.product_name || 'Unknown Product';
+    ctx.font = 'bold 26px DM Sans, Arial';
+    ctx.fillStyle = '#FFFFFF';
+    const nameLines = wrapText(ctx, name, W - rx - 40, 26);
+    nameLines.slice(0, 2).forEach((line, i) => {
+        ctx.fillText(line, rx, 120 + i * 34);
+    });
+
+    // Summary
+    const summaryY = nameLines.length > 1 ? 196 : 168;
+    ctx.font = '15px DM Sans, Arial';
+    ctx.fillStyle = 'rgba(255,255,255,0.6)';
+    const summaryLines = wrapText(ctx, d.summary || '', W - rx - 40, 15);
+    summaryLines.slice(0, 3).forEach((line, i) => {
+        ctx.fillText(line, rx, summaryY + i * 22);
+    });
+
+    // Nutrient pills row
+    const nutrients = (d.nutrient_breakdown || []).slice(0, 4);
+    const pillsY = 296;
+    let pillOffset = rx;
+    nutrients.forEach(n => {
+        const pillColor = n.rating === 'good' ? '#2D7A4F' :
+                          n.rating === 'moderate' ? '#7A5800' :
+                          n.rating === 'caution' ? '#8B2500' : '#5C1010';
+        const label = `${n.name} ${n.value}${n.unit}`;
+        ctx.font = '600 12px DM Sans, Arial';
+        const tw = ctx.measureText(label).width + 20;
+        ctx.fillStyle = pillColor;
+        roundRect(ctx, pillOffset, pillsY, tw, 26, 8);
+        ctx.fillStyle = 'rgba(255,255,255,0.85)';
+        ctx.textAlign = 'left';
+        ctx.font = '600 12px DM Sans, Arial';
+        ctx.fillText(label, pillOffset + 10, pillsY + 17);
+        pillOffset += tw + 8;
+        if (pillOffset > W - 40) return;
+    });
+
+    // Footer bar
+    ctx.fillStyle = 'rgba(0,0,0,0.25)';
+    ctx.fillRect(0, 356, W, 44);
+    ctx.font = 'bold 15px DM Sans, Arial';
+    ctx.fillStyle = '#C9A84C';
+    ctx.textAlign = 'left';
+    ctx.fillText('🌿 Eatlytic', 30, 382);
+    ctx.font = '13px DM Sans, Arial';
+    ctx.fillStyle = 'rgba(255,255,255,0.4)';
+    ctx.textAlign = 'right';
+    ctx.fillText('AI-Powered Food Intelligence • eatlytic.app', W - 30, 382);
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+    ctx.lineTo(x + r, y + h);
+    ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
+    ctx.fill();
+}
+
+function wrapText(ctx, text, maxWidth, fontSize) {
+    const words = (text || '').split(' ');
+    const lines = [];
+    let line = '';
+    words.forEach(word => {
+        const test = line ? line + ' ' + word : word;
+        if (ctx.measureText(test).width > maxWidth && line) {
+            lines.push(line);
+            line = word;
+        } else {
+            line = test;
+        }
+    });
+    if (line) lines.push(line);
+    return lines;
+}
+
+function downloadShareCard() {
+    const canvas = document.getElementById('shareCanvas');
+    const link = document.createElement('a');
+    link.download = `eatlytic-${(lastResult?.product_name || 'report').replace(/\s+/g,'-').toLowerCase()}.png`;
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+    showToast('📥 Image saved!');
+}
+
+async function nativeShare() {
+    const canvas = document.getElementById('shareCanvas');
+    try {
+        canvas.toBlob(async blob => {
+            const file = new File([blob], 'eatlytic-report.png', { type: 'image/png' });
+            if (navigator.share && navigator.canShare({ files: [file] })) {
+                await navigator.share({ files: [file], title: 'Eatlytic Food Report', text: `${lastResult?.product_name} scored ${lastResult?.score}/10 — analysed with Eatlytic` });
+            } else {
+                // Fallback: copy text
+                await navigator.clipboard.writeText(`🌿 ${lastResult?.product_name} — Score: ${lastResult?.score}/10\n${lastResult?.verdict}\n\n${lastResult?.summary}\n\nAnalysed with Eatlytic`);
+                showToast('📋 Report text copied!');
+            }
+        });
+    } catch { showToast('📋 Share link copied!'); }
+}
+
+// ── INGREDIENT BOTTOM SHEET ─────────────────────────────────────────
+async function openIngSheet(name) {
+    const sheet = document.getElementById('ing-sheet');
+    const content = document.getElementById('ing-content');
+    content.innerHTML = `<div class="ing-loading"><div class="ing-spinner"></div>Loading info on <strong>${escHtml(name)}</strong>…</div>`;
+    sheet.classList.add('open');
+
+    try {
+        const res = await fetch(`${API}/ingredient-info?name=${encodeURIComponent(name)}&context=${encodeURIComponent(currentPersona)}&language=${currentLang}`);
+        const d = await res.json();
+        if (d.error) throw new Error(d.error);
+
+        const safetyClass = d.safety_level === 'safe' ? 'safe' : d.safety_level === 'caution' ? 'caution' : 'aware';
+        const safetyLabel = d.safety_level === 'safe' ? '✅ Generally Safe' : d.safety_level === 'caution' ? '⚠️ Use Caution' : '👁 Be Aware';
+
+        content.innerHTML = `
+            <div class="ing-name">${escHtml(d.name || name)}</div>
+            <div class="ing-verdict-pill ${safetyClass}">${safetyLabel}</div>
+            <div class="ing-row">
+                <div class="ing-row-label">What it is</div>
+                <div class="ing-row-text">${escHtml(d.what_it_is || '—')}</div>
+            </div>
+            <div class="ing-row">
+                <div class="ing-row-label">Why it's used</div>
+                <div class="ing-row-text">${escHtml(d.why_used || '—')}</div>
+            </div>
+            <div class="ing-row">
+                <div class="ing-row-label">Health impact</div>
+                <div class="ing-row-text">${escHtml(d.health_impact || '—')}</div>
+            </div>
+            ${d.persona_note ? `<div class="ing-row">
+                <div class="ing-row-label">For ${escHtml(currentPersona)}</div>
+                <div class="ing-row-text">${escHtml(d.persona_note)}</div>
+            </div>` : ''}
+            ${d.curiosity ? `<div class="ing-curiosity">💡 ${escHtml(d.curiosity)}</div>` : ''}
+        `;
+    } catch(e) {
+        content.innerHTML = `<div class="ing-loading" style="color:#C94B1E">Could not load ingredient info. Try again.</div>`;
+    }
+}
+
+function closeIngSheet(e) {
+    if (!e || e.target.classList.contains('ing-backdrop') || e.target === document.getElementById('ing-sheet')) {
+        document.getElementById('ing-sheet').classList.remove('open');
+    }
+}
+
+// ── ONBOARDING ──────────────────────────────────────────────────────
+const OB_SLIDES = [
+    {
+        icon: '🌿',
+        title: 'Know exactly what you eat',
+        desc:  'Scan any food label — ingredients, nutrients, additives — get a clear health report in seconds.',
+    },
+    {
+        icon: '📸',
+        title: 'No barcode needed',
+        desc:  'Even blurry photos work. Our AI reads and enhances the label automatically.',
+    },
+    {
+        icon: '🎯',
+        title: 'Personalised for you',
+        desc:  'Pick your eating profile so every scan is filtered through what matters to your body.',
+        personaPicker: true,
+    },
+];
+let obStep = 0;
+
+function initOnboarding() {
+    const seen = localStorage.getItem('eatlytic_ob_done');
+    if (seen) return;
+    obStep = 0;
+    renderObSlide();
+    document.getElementById('onboarding').classList.remove('hidden');
+}
+
+function renderObSlide() {
+    const slide = OB_SLIDES[obStep];
+    const slidesEl = document.querySelector('.ob-slides');
+    const dotsEl   = document.getElementById('ob-dots');
+    const nextBtn  = document.getElementById('ob-next-btn');
+
+    // Dots
+    dotsEl.innerHTML = OB_SLIDES.map((_, i) =>
+        `<div class="ob-dot ${i === obStep ? 'active' : ''}"></div>`
+    ).join('');
+
+    // Button label
+    nextBtn.textContent = obStep < OB_SLIDES.length - 1 ? 'Next →' : 'Start Scanning 🌿';
+
+    // Slide content
+    let personaHTML = '';
+    if (slide.personaPicker) {
+        const personas = ['🏠 General','💪 Gym','👶 Baby','✨ Skin','🥑 Keto','❤️ Heart'];
+        personaHTML = `<div class="ob-persona-row">${
+            personas.map(p => {
+                const val = p.split(' ')[1];
+                return `<div class="ob-persona-chip ${currentPersona===val?'selected':''}"
+                    onclick="obPickPersona(this,'${val}')">${p}</div>`;
+            }).join('')
+        }</div>`;
+    }
+
+    slidesEl.innerHTML = `
+        <div class="ob-icon">${slide.icon}</div>
+        <div class="ob-title">${slide.title}</div>
+        <div class="ob-desc">${slide.desc}</div>
+        ${personaHTML}
+    `;
+}
+
+function obPickPersona(el, val) {
+    document.querySelectorAll('.ob-persona-chip').forEach(c => c.classList.remove('selected'));
+    el.classList.add('selected');
+    currentPersona = val;
+    localStorage.setItem('eatlytic_persona', val);
+    // Sync main persona chips
+    document.querySelectorAll('#persona-row .chip').forEach(c => {
+        c.classList.toggle('active', c.textContent.includes(val));
+    });
+}
+
+function nextOnboardStep() {
+    if (obStep < OB_SLIDES.length - 1) {
+        obStep++;
+        renderObSlide();
+    } else {
+        closeOnboarding();
+    }
+}
+
+function closeOnboarding() {
+    localStorage.setItem('eatlytic_ob_done', '1');
+    document.getElementById('onboarding').classList.add('hidden');
+}
+
+// ── BARCODE SCANNER ─────────────────────────────────────────────────
+let barcodeReader = null;
+let barcodeStream = null;
+
+async function startBarcodeScanner() {
+    const overlay = document.getElementById('barcode-overlay');
+    overlay.classList.add('open');
+
     try {
-        if (navigator.share) { await navigator.share({ title:'Eatlytic Report', text }); }
-        else { await navigator.clipboard.writeText(text); showToast('📋 Copied to clipboard!'); }
-    } catch { showToast('📋 Report copied!'); }
+        const ZXing = window.ZXingBrowser;
+        if (!ZXing) { showToast('Barcode library loading, try again'); overlay.classList.remove('open'); return; }
+
+        barcodeReader = new ZXing.BrowserMultiFormatReader();
+        const videoEl = document.getElementById('barcode-video');
+
+        barcodeStream = await barcodeReader.decodeFromConstraints(
+            { video: { facingMode: 'environment' } },
+            videoEl,
+            async (result, err) => {
+                if (result) {
+                    const code = result.getText();
+                    stopBarcodeScanner();
+                    await handleBarcodeResult(code);
+                }
+            }
+        );
+    } catch(e) {
+        showToast('Camera not available for barcode scan');
+        overlay.classList.remove('open');
+    }
 }
+
+function stopBarcodeScanner() {
+    try { if (barcodeReader) barcodeReader.reset(); } catch {}
+    try { if (barcodeStream) barcodeStream.getTracks().forEach(t => t.stop()); } catch {}
+    barcodeReader = null; barcodeStream = null;
+    document.getElementById('barcode-overlay').classList.remove('open');
+}
+
+async function handleBarcodeResult(barcode) {
+    showToast(`📦 Barcode: ${barcode} — fetching product info…`);
+    // Query Open Food Facts API (free, no key required)
+    try {
+        const res  = await fetch(`https://world.openfoodfacts.org/api/v0/product/${barcode}.json`);
+        const data = await res.json();
+        if (data.status !== 1) {
+            showToast('Product not found — please scan the label instead');
+            return;
+        }
+        const p = data.product;
+        // Build a text blob that mimics a scanned label so the existing analyze pipeline works
+        const labelText = [
+            p.product_name || p.product_name_en || '',
+            p.brands || '',
+            p.ingredients_text_en || p.ingredients_text || '',
+            p.nutriments ? `Calories: ${p.nutriments['energy-kcal_100g']||''} kcal, Protein: ${p.nutriments.proteins_100g||''}g, Fat: ${p.nutriments.fat_100g||''}g, Carbs: ${p.nutriments.carbohydrates_100g||''}g, Sugar: ${p.nutriments.sugars_100g||''}g, Sodium: ${p.nutriments.sodium_100g ? Math.round(p.nutriments.sodium_100g*1000) : ''}mg` : '',
+        ].filter(Boolean).join('\n');
+
+        showToast(`✅ Found: ${p.product_name || 'Product'} — analysing…`);
+        // Create a minimal 1x1 placeholder image (the backend requires a file upload)
+        const canvas = document.createElement('canvas');
+        canvas.width = 1; canvas.height = 1;
+        canvas.toBlob(async (imgBlob) => {
+            const fd = new FormData();
+            fd.append('image', imgBlob, 'barcode.jpg');
+            fd.append('persona', currentPersona);
+            fd.append('language', currentLang);
+            fd.append('age_group', 'adult');
+            fd.append('product_category', p.categories || 'general');
+            fd.append('extracted_text', labelText); // bypass OCR with pre-filled text
+
+            document.getElementById('loader').style.display = 'flex';
+            document.getElementById('loader-step').textContent = 'Processing barcode product…';
+
+            try {
+                const analyzeRes = await fetch(`${API}/analyze`, { method:'POST', body: fd, signal: currentAbortCtrl?.signal });
+                const result = await analyzeRes.json();
+                document.getElementById('loader').style.display = 'none';
+                if (result.error) { showError('⚠️', 'Analysis Failed', result.message || result.error); return; }
+                lastResult = result;
+                addToHistory(result);
+                renderReport(result);
+            } catch(e) {
+                document.getElementById('loader').style.display = 'none';
+                showError('❌', 'Failed', 'Could not analyse barcode product.');
+            }
+        }, 'image/jpeg');
+    } catch(e) {
+        showToast('Could not look up barcode — scan the label instead');
+    }
+}
+
 function showToast(msg = '✅ Done!') {
     const t = document.getElementById('toast');
     t.textContent = msg;