/*!
 * TrueCarbs™ PWA — Stylesheet v1.0
 * © 2025 LowCarb Avenue LLC. All rights reserved.
 * truecarbs.com | Powered by LowCarb Avenue™
 */
:root {
  --dark:#1A1A2E; --orange:#FF6B35; --orange2:#E8520A;
  --green:#22C55E; --blue:#3B82F6; --purple:#A855F7;
  --red:#EF4444; --amber:#F59E0B;
  --bg:#F2F2F7; --card:#FFFFFF; --border:rgba(0,0,0,.09);
  --text:#1C1C1E; --muted:#6C6C70; --subtle:#8E8E93;
  --rsm:10px; --rmd:14px; --rlg:18px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto}

/* ─── MOBILE LAYOUT (default) ─── */
#app{display:flex;flex-direction:column;min-height:100vh;max-width:430px;margin:0 auto;position:relative}

/* Header */
.hdr{background:var(--dark);padding:env(safe-area-inset-top,0px) 16px 0;flex-shrink:0;position:sticky;top:0;z-index:50}
.hdr-top{display:flex;align-items:center;justify-content:space-between;padding-top:14px;margin-bottom:12px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:36px;height:36px;background:var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-name{font-size:19px;font-weight:900;color:#fff;letter-spacing:-.03em;line-height:1}
.logo-name em{color:var(--orange);font-style:normal}
.logo-sub{font-size:8px;color:#6666AA;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.hdr-free{font-size:9px;background:rgba(255,107,53,.18);color:#FF8C5A;border:1px solid rgba(255,107,53,.35);border-radius:99px;padding:3px 9px;font-weight:700}

/* Segment */
.seg{display:flex;gap:3px;background:rgba(255,255,255,.07);border-radius:11px;padding:3px}
.seg-btn{flex:1;padding:8px 4px;border:none;border-radius:8px;font-size:10px;font-weight:800;text-align:center;color:rgba(255,255,255,.38);background:none;transition:all .15s}
.seg-btn.on-g{background:var(--green);color:#fff}
.seg-btn.on-b{background:var(--blue);color:#fff}
.seg-btn.on-p{background:var(--purple);color:#fff}

/* Views */
.view{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 72px)}
.view.on{display:block}
.bp{padding:14px}

/* Tab bar */
.tab-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--dark);border-top:1px solid rgba(255,255,255,.08);display:flex;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 6px);z-index:100}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.tb-ico{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
.tb-lbl{font-size:9px;font-weight:700;color:#555}
.tb.on-g .tb-lbl{color:var(--green)} .tb.on-g .tb-ico{background:rgba(34,197,94,.2)}
.tb.on-b .tb-lbl{color:var(--blue)}  .tb.on-b .tb-ico{background:rgba(59,130,246,.2)}
.tb.on-p .tb-lbl{color:var(--purple)}.tb.on-p .tb-ico{background:rgba(168,85,247,.2)}

/* Cards */
.card{background:var(--card);border-radius:var(--rmd);border:1px solid var(--border);overflow:hidden;margin-bottom:12px}
.sh{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 9px}

/* Product strip */
.prod-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pb{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:11px;border:1.5px solid rgba(0,0,0,.1);background:var(--card);font-size:11px;font-weight:700;color:var(--text)}
.pb.on{background:var(--dark);border-color:var(--dark);color:#fff}
.pb-img{width:22px;height:22px;border-radius:5px;object-fit:cover}

/* Product card hero */
.prod-hero{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:0.5px solid var(--bg)}
.prod-thumb{width:58px;height:58px;border-radius:11px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;overflow:hidden}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-name{font-size:16px;font-weight:800;color:var(--text)}
.prod-sub{font-size:11px;color:var(--muted);margin-top:2px}
.prod-hl{font-size:11px;color:var(--orange);font-weight:700;margin-top:3px}

/* Net carbs hero */
.nc-hero{text-align:center;padding:20px 14px 16px;background:#F0FFF4;border-bottom:0.5px solid #DCFCE7}
.nc-num{font-size:96px;font-weight:900;color:#1C1C1E;line-height:1;letter-spacing:-.05em}
.nc-unit{font-size:12px;color:#4B7A5A;margin-top:4px;letter-spacing:.08em;font-weight:700;text-transform:uppercase}
.nc-badges{display:flex;justify-content:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.ncb{display:inline-flex;padding:4px 11px;border-radius:99px;font-size:10px;font-weight:700}
.ncb-g{background:#DCFCE7;color:#14532D;border:1px solid #86EFAC}
.ncb-b{background:#DBEAFE;color:#1E3A8A;border:1px solid #93C5FD}
.ncb-o{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}

/* Inner tabs */
.itabs{display:flex;background:var(--bg);border-top:0.5px solid var(--border)}
.itab{flex:1;padding:9px 2px;border:none;border-bottom:2.5px solid transparent;background:none;font-size:9px;font-weight:700;color:var(--subtle);text-align:center;text-transform:uppercase;letter-spacing:.04em;transition:all .15s}
.itab.on{color:var(--orange);border-bottom-color:var(--orange);background:var(--card)}
.ipanel{padding:14px;display:none}
.ipanel.on{display:block}

/* Facts grid */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fi{background:var(--bg);border-radius:11px;padding:12px 8px;text-align:center;border:1.5px solid var(--border)}
.fi.star{background:#FFF3EC;border:2px solid var(--orange)}
.fv{font-size:22px;font-weight:900;color:var(--text);line-height:1}
.fi.star .fv{font-size:28px;color:var(--orange)}
.fl{font-size:9px;color:var(--subtle);margin-top:3px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.fi.star .fl{color:#C84A00;font-weight:800}
.ingr-sec{margin-top:12px;padding-top:12px;border-top:0.5px solid var(--bg)}
.ingr-hd{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ingr-txt{font-size:10px;color:#444;line-height:1.8}
.cert-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.cert{font-size:9px;padding:3px 9px;border-radius:99px;background:var(--bg);color:var(--text);font-weight:700;border:0.5px solid rgba(0,0,0,.12)}
.bullets{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.bullet{font-size:10px;font-weight:700;color:var(--text)}

/* Charts */
.chart-card{background:var(--card);border-radius:var(--rmd);border:1px solid var(--border);padding:13px;margin-bottom:10px}
.chart-title{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.chart-wrap{position:relative;height:190px;width:100%}
.chart-wrap canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.chart-legend{display:flex;justify-content:center;gap:14px;margin-bottom:10px}
.cl-item{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--text)}
.cl-dot{width:10px;height:10px;border-radius:3px}

/* Diet */
.diet-item{background:var(--bg);border-radius:11px;padding:11px 12px;border:1.5px solid var(--border);margin-bottom:8px}
.diet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.diet-name{font-size:11px;font-weight:700;color:var(--text)}
.dbadge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px}
.dbadge.fits{background:#DCFCE7;color:#14532D;border:1px solid #86EFAC}
.dbadge.chk{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}
.dbadge.no{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}
.d-bar-bg{height:7px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;margin-bottom:4px}
.d-bar-fill{height:100%;border-radius:99px}
.d-meta{font-size:9px;color:var(--muted)}

/* VS panel */
.vs-exp{background:#FFFBEB;border-radius:11px;padding:10px 12px;margin-bottom:12px;border-left:3px solid var(--amber)}
.vs-exp p{font-size:10px;color:#78350F;line-height:1.7}
.vs-exp strong{font-weight:800;color:#451A03}
.vs-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:12px}
.vc{background:var(--bg);border-radius:10px;padding:8px;border:1.5px solid var(--border)}
.vc.lca{background:#FFF3EC;border:2px solid var(--orange)}
.vc.bad{background:#FEF2F2;border:1.5px solid #FCA5A5}
.vct{font-size:8px;font-weight:800;margin-bottom:3px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc.lca .vct{color:#C84A00} .vc.bad .vct{color:#991B1B}
.ftag{font-size:7px;color:#DC2626;background:#FEE2E2;border-radius:4px;padding:1px 5px;margin-bottom:4px;font-weight:800;display:inline-block}
.vr{display:flex;justify-content:space-between;font-size:8px;padding:2.5px 0;border-bottom:0.5px solid rgba(0,0,0,.07);color:#444}
.vr:last-child{border:none}
.vr span:last-child{font-weight:800;color:var(--text)}
.vwin{color:#16A34A!important} .vwarn{color:#DC2626!important}
.sav-box{background:#DCFCE7;border-radius:11px;padding:11px;border:1.5px solid #86EFAC;margin-bottom:10px}
.sav-t{font-size:10px;font-weight:800;color:#14532D;margin-bottom:7px}
.sav-i{font-size:10px;color:var(--text);padding:2.5px 0} .sav-i span{color:#16A34A;font-weight:800}

/* Category grid */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 10px 13px;border-radius:var(--rlg);border:2px solid rgba(0,0,0,.09);background:var(--card);transition:all .15s}
.cat-card:active{transform:scale(.97)}
.cat-ico{font-size:26px;line-height:1}
.cat-name{font-size:12px;font-weight:800;color:var(--text)}
.cat-sub{font-size:9px;color:var(--muted);text-align:center;line-height:1.4}
.cat-card.on-bread{border-color:#C8620A;background:#FFF5F0} .cat-card.on-bread .cat-name{color:#7A3200}
.cat-card.on-sandwich{border-color:#15803D;background:#F0FDF4} .cat-card.on-sandwich .cat-name{color:#0D3D20}
.cat-card.on-baked{border-color:#7C3ABE;background:#F5F0FF} .cat-card.on-baked .cat-name{color:#3D1A70}
.cat-card.on-other{border-color:#1850A0;background:#EFF6FF} .cat-card.on-other .cat-name{color:#0A2E6A}
.cat-scan{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--rlg);border:2px solid rgba(0,0,0,.09);background:var(--card);width:100%;text-align:left;transition:all .15s}
.cat-scan.on-scan{border-color:#B45309;background:#FFFBEB} .cat-scan.on-scan .cat-name{color:#6A3200}

/* Arrow selector */
.sel-label{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.sel-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sel-row{display:flex;align-items:stretch;background:var(--card);border-radius:var(--rmd);border:2px solid rgba(0,0,0,.1);overflow:hidden;margin-bottom:12px}
.sel-row.a-active{border-color:var(--blue)} .sel-row.b-active{border-color:var(--green)}
.arr{width:40px;background:var(--bg);border:none;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);flex-shrink:0;font-weight:300}
.arr:first-child{border-right:1px solid var(--border)} .arr:last-child{border-left:1px solid var(--border)}
.arr:active{background:#E5E5EA}
.sel-center{flex:1;padding:12px 10px;text-align:center}
.sel-emoji{font-size:28px;line-height:1;margin-bottom:4px}
.sel-name{font-size:13px;font-weight:800;color:var(--text)}
.sel-sub{font-size:9px;color:var(--muted);margin-top:2px}
.sel-nc{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:7px}
.sel-nc-num{font-size:34px;font-weight:900;line-height:1}
.sel-nc-num.a{color:var(--blue)} .sel-nc-num.b{color:var(--green)} .sel-nc-num.hi{color:var(--red)}
.sel-nc-lbl{font-size:9px;color:var(--subtle);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pips{display:flex;justify-content:center;gap:4px;margin-top:6px}
.pip{width:5px;height:5px;border-radius:50%;background:#D1D1D6}
.pip.on-a{background:var(--blue)} .pip.on-b{background:var(--green)}
.sel-badges{display:flex;justify-content:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.sbadge{font-size:8px;font-weight:700;padding:2px 8px;border-radius:99px}
.vs-div{display:flex;align-items:center;gap:8px;margin:4px 0 12px}
.vs-line{flex:1;height:1px;background:#D1D1D6}
.vs-pill{background:var(--dark);color:#fff;font-size:11px;font-weight:900;padding:5px 14px;border-radius:99px}
.winner{border-radius:var(--rmd);padding:12px 14px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.winner.wa{background:#EFF6FF;border:1.5px solid #93C5FD}
.winner.wb{background:#F0FDF4;border:1.5px solid #86EFAC}
.winner.tie{background:#FFFBEB;border:1.5px solid #FCD34D}
.w-ico{font-size:22px} .w-body{flex:1}
.w-title{font-size:12px;font-weight:800;color:var(--text)}
.w-sub{font-size:9px;color:var(--muted);margin-top:2px;line-height:1.5}
.w-badge{font-size:9px;font-weight:800;padding:4px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.winner.wa .w-badge{background:var(--blue);color:#fff}
.winner.wb .w-badge{background:var(--green);color:#fff}
.winner.tie .w-badge{background:var(--amber);color:#fff}

/* Buy bar */
.buy-bar{display:flex;gap:8px;margin-bottom:14px}
.buy-btn{flex:1;padding:12px 10px;border-radius:11px;border:none;font-size:11px;font-weight:800;text-align:center;cursor:pointer;text-decoration:none;display:block}
.buy-btn.lca{background:var(--orange);color:#fff}
.buy-btn.comp{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}

/* Analysis tabs */
.atabs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px;padding-bottom:2px;scrollbar-width:none}
.atabs-scroll::-webkit-scrollbar{display:none}
.atabs{display:flex;gap:7px;width:max-content}
.at{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 13px;border-radius:var(--rmd);border:2px solid rgba(0,0,0,.09);background:var(--card);min-width:72px;font-size:inherit}
.at:active{transform:scale(.96)}
.at-ico{font-size:22px;line-height:1}
.at-lbl{font-size:10px;font-weight:800;white-space:nowrap}
.at-sub{font-size:8px;font-weight:600;white-space:nowrap;opacity:.7}
.at.t-facts .at-lbl{color:var(--text)} .at.t-facts.on{background:var(--text);border-color:var(--text)} .at.t-facts.on .at-lbl{color:#fff} .at.t-facts.on .at-sub{color:#bbb}
.at.t-charts .at-lbl{color:var(--blue)} .at.t-charts.on{background:#EFF6FF;border-color:var(--blue)}
.at.t-ind .at-lbl{color:var(--purple)} .at.t-ind.on{background:#F5F0FF;border-color:var(--purple)}
.at.t-diet .at-lbl{color:var(--green)} .at.t-diet.on{background:#F0FDF4;border-color:var(--green)}
.at.t-fiber .at-lbl{color:var(--red)} .at.t-fiber.on{background:#FEF2F2;border-color:var(--red)}
.at.t-gl .at-lbl{color:var(--amber)} .at.t-gl.on{background:#FFFBEB;border-color:var(--amber)}
.apanel{display:none} .apanel.on{display:block}

/* NC compare hero */
.nc-cmp-hero{display:grid;grid-template-columns:1fr 44px 1fr;gap:6px;align-items:center;background:var(--card);border-radius:var(--rmd);border:1px solid var(--border);padding:13px;margin-bottom:10px}
.nch{text-align:center}
.nch-num{font-size:50px;font-weight:900;line-height:1}
.nch-num.a{color:var(--blue)} .nch-num.b{color:var(--green)} .nch-num.hi{color:var(--red)}
.nch-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--subtle);margin-top:3px}
.nch-name{font-size:9px;color:var(--muted);margin-top:2px}
.nch-mid{background:var(--dark);border-radius:10px;padding:8px 4px;text-align:center}
.nch-mid-val{font-size:16px;font-weight:900;color:var(--orange)}
.nch-mid-lbl{font-size:7px;color:#8888AA;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.fact-row{background:var(--bg);border-radius:10px;padding:11px 12px;border:1.5px solid var(--border);margin-bottom:7px}
.fact-label{font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.fact-vals{display:flex;justify-content:space-between;margin-bottom:7px}
.fval{font-size:14px;font-weight:900}
.fval.a{color:var(--blue)} .fval.b{color:var(--green)} .fval.hi{color:var(--red)}
.bar-wrap2{display:flex;flex-direction:column;gap:4px}
.bar-row2{display:flex;align-items:center;gap:7px}
.bar-tag2{font-size:9px;font-weight:800;width:12px;flex-shrink:0}
.bar-tag2.a{color:var(--blue)} .bar-tag2.b{color:var(--green)}
.bar-bg2{flex:1;height:8px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden}
.bar-fill2{height:100%;border-radius:99px;transition:width .4s ease}

/* Indicators */
.ind-card{background:var(--card);border-radius:var(--rmd);border:1px solid var(--border);padding:13px;margin-bottom:10px}
.ind-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:12px}
.ind-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ind-hd{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding-bottom:5px;border-bottom:2.5px solid;margin-bottom:8px}
.ind-hd.a{color:var(--blue);border-color:var(--blue)} .ind-hd.b{color:var(--green);border-color:var(--green)}
.ind-score{font-size:22px;font-weight:900}
.ind-score.a{color:var(--blue)} .ind-score.b,.ind-score.good{color:var(--green)} .ind-score.warn{color:var(--amber)} .ind-score.bad{color:var(--red)}
.ind-bar-bg{height:8px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;margin:7px 0 5px}
.ind-bar-fill{height:100%;border-radius:99px}
.ind-meta{font-size:8.5px;color:var(--muted);line-height:1.5}
.ms-row{display:flex;gap:4px;margin-top:8px}
.ms{flex:1;border-radius:9px;padding:7px 4px;text-align:center;border:1.5px solid}
.ms.real{background:#F0FDF4;border-color:#86EFAC} .ms.added{background:#FEF2F2;border-color:#FCA5A5}
.msv{font-size:13px;font-weight:900}
.msv.real{color:#16A34A} .msv.added{color:#DC2626}
.msl{font-size:7.5px;font-weight:700;text-transform:uppercase;margin-top:2px}
.msl.real{color:#14532D} .msl.added{color:#991B1B}
.grade-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:4px}
.grade-big{font-size:28px;font-weight:900}
.grade-tag{font-size:9px;font-weight:700;padding:2px 9px;border-radius:99px}
.sat-rings{display:flex;gap:5px;justify-content:center;margin-bottom:6px}
.sat-ring-item{text-align:center}
.sat-rl{font-size:7.5px;color:var(--subtle);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:3px}
.sat-big{text-align:center;font-size:20px;font-weight:900;margin-top:4px}
.mac-row{display:flex;gap:6px}
.mac-item{flex:1;border-radius:10px;padding:10px;text-align:center;border:1.5px solid var(--border);background:var(--bg)}
.mac-val{font-size:16px;font-weight:900}
.mac-lbl{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-top:3px}

/* Fiber bomb */
.fb-hero{border-radius:var(--rmd);padding:14px;margin-bottom:12px;border:2px solid;text-align:center}
.fb-hero.danger{background:#FEF2F2;border-color:#FCA5A5}
.fb-hero.safe{background:#F0FDF4;border-color:#86EFAC}
.fb-hero-title{font-size:16px;font-weight:900;margin-bottom:4px}
.fb-hero.danger .fb-hero-title{color:#991B1B} .fb-hero.safe .fb-hero-title{color:#14532D}
.fb-hero-sub{font-size:10px;line-height:1.6}
.fb-hero.danger .fb-hero-sub{color:#7F1D1D} .fb-hero.safe .fb-hero-sub{color:#166534}
.fb-cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.fb-side{border-radius:11px;padding:12px;border:2px solid}
.fb-side.sa{background:#EFF6FF;border-color:#93C5FD}
.fb-side.sb-ok{background:#F0FDF4;border-color:#86EFAC} .fb-side.sb-bad{background:#FEF2F2;border-color:#FCA5A5}
.fb-side-name{font-size:10px;font-weight:800;text-align:center;margin-bottom:8px}
.fb-side-name.a{color:#1D4ED8} .fb-side-name.ok{color:#15803D} .fb-side-name.bad{color:#991B1B}
.fb-stat{display:flex;justify-content:space-between;font-size:9px;padding:3px 0;border-bottom:0.5px solid rgba(0,0,0,.08)}
.fb-stat:last-child{border:none}
.fb-sv{font-weight:900;color:var(--text)}
.fb-sv.good{color:#16A34A} .fb-sv.warn{color:#DC2626}
.fb-explain-txt{font-size:10px;color:var(--muted);line-height:1.7}
.fb-explain-txt strong{color:var(--text);font-weight:800}
.fb-verdict{border-radius:11px;padding:12px;text-align:center;border:1.5px solid}
.fb-verdict.safe{background:#F0FDF4;border-color:#86EFAC} .fb-verdict.danger{background:#FEF2F2;border-color:#FCA5A5}
.fb-v-ico{font-size:28px;margin-bottom:5px}
.fb-v-title{font-size:13px;font-weight:900;color:var(--text);margin-bottom:3px}
.fb-v-sub{font-size:9px;color:var(--muted);line-height:1.5}

/* Glycemic */
.gl-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.gl-card{border-radius:var(--rmd);padding:13px;text-align:center;border:2px solid}
.gl-card.a{background:#EFF6FF;border-color:#93C5FD}
.gl-card.low{background:#F0FDF4;border-color:#86EFAC}
.gl-card.med{background:#FFFBEB;border-color:#FCD34D}
.gl-card.high{background:#FEF2F2;border-color:#FCA5A5}
.gl-cn{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.gl-cn.a{color:#1D4ED8} .gl-cn.ok{color:#15803D} .gl-cn.med{color:#92400E} .gl-cn.bad{color:#991B1B}
.gl-gi{font-size:12px;font-weight:900;margin-bottom:2px}
.gl-gi-l{font-size:7.5px;color:var(--subtle);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.gl-num{font-size:40px;font-weight:900;line-height:1;margin:6px 0 2px}
.gl-lbl{font-size:8px;color:var(--subtle);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.gl-pill{display:inline-block;font-size:8px;font-weight:700;padding:2px 9px;border-radius:99px;margin-top:5px}
.gl-scale{display:flex;gap:5px;margin-bottom:12px}
.gl-si{flex:1;border-radius:9px;padding:8px 5px;text-align:center;border:1.5px solid}
.gl-si.low{background:#F0FDF4;border-color:#86EFAC}
.gl-si.med{background:#FFFBEB;border-color:#FCD34D}
.gl-si.high{background:#FEF2F2;border-color:#FCA5A5}
.gl-sr{font-size:9px;font-weight:800;color:var(--text)}
.gl-sl{font-size:8px;color:var(--muted);margin-top:2px;font-weight:600}

/* Share */
.share-section{background:var(--card);border-radius:var(--rmd);border:1px solid var(--border);padding:14px;margin-bottom:14px}
.share-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:12px}
.card-styles{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-bottom:14px}
.card-styles::-webkit-scrollbar{display:none}
.cs-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;border-radius:11px;border:2px solid var(--border);background:var(--bg);min-width:62px;flex-shrink:0;transition:all .15s}
.cs-btn.on{border-color:var(--orange);background:#FFF5F0}
.cs-ico{font-size:18px;line-height:1}
.cs-lbl{font-size:9px;font-weight:700;color:var(--muted)}
.cs-btn.on .cs-lbl{color:#8B3A00}
.share-preview{background:#1A1A2E;border-radius:14px;padding:16px;margin-bottom:14px}
.plats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plat-btn{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px;border:none;transition:all .12s}
.plat-btn:active{transform:scale(.96)}
.p-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.p-name{font-size:11px;font-weight:700;line-height:1}
.p-act{font-size:9px;margin-top:2px;font-weight:600;opacity:.75}
.p-fb{background:#1877F218;border:1.5px solid #1877F235} .p-fb .p-ico{background:#1877F2} .p-fb .p-name{color:#0A4CAD} .p-fb .p-act{color:#1877F2}
.p-ig{background:#E1306C14;border:1.5px solid #E1306C30} .p-ig .p-ico{background:#E1306C} .p-ig .p-name{color:#8C0033} .p-ig .p-act{color:#C2185B}
.p-tt{background:#00000010;border:1.5px solid #00000022} .p-tt .p-ico{background:#000} .p-tt .p-name{color:#111} .p-tt .p-act{color:#444}
.p-li{background:#0A66C218;border:1.5px solid #0A66C235} .p-li .p-ico{background:#0A66C2} .p-li .p-name{color:#004182} .p-li .p-act{color:#0A66C2}
.p-ts{background:#FF4B0018;border:1.5px solid #FF4B0035} .p-ts .p-ico{background:#FF4B00} .p-ts .p-name{color:#8B2000} .p-ts .p-act{color:#D94000}
.p-tw{background:#1DA1F218;border:1.5px solid #1DA1F235} .p-tw .p-ico{background:#1DA1F2} .p-tw .p-name{color:#0C6FA4} .p-tw .p-act{color:#1DA1F2}
.p-wa{background:#25D36614;border:1.5px solid #25D36630} .p-wa .p-ico{background:#25D366} .p-wa .p-name{color:#075E43} .p-wa .p-act{color:#128C7E}
.p-cp{background:var(--bg);border:1.5px solid var(--border)} .p-cp .p-ico{background:var(--text)} .p-cp .p-name{color:var(--text)} .p-cp .p-act{color:var(--muted)}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;font-size:11px;font-weight:700;padding:8px 16px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .2s;z-index:200;pointer-events:none}
.toast.show{opacity:1}

/* Stats */
.stats-section{background:var(--card);border-radius:var(--rmd);border:1px solid var(--border);padding:14px;margin-bottom:14px}
.stats-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.stats-hd-title{font-size:12px;font-weight:800;color:var(--text)}
.live-pill{display:flex;align-items:center;gap:4px;font-size:9px;background:#F0FDF4;color:#14532D;border:1px solid #86EFAC;border-radius:99px;padding:3px 8px;font-weight:700}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat-card{background:var(--bg);border-radius:10px;padding:11px}
.stat-val{font-size:22px;font-weight:900;color:var(--text)}
.stat-lbl{font-size:10px;color:var(--muted);margin-top:3px}
.stat-delta{font-size:9px;font-weight:600;margin-top:2px}
.stat-delta.up{color:#16A34A} .stat-delta.dn{color:#DC2626}
.trend-box{background:var(--bg);border-radius:10px;padding:11px 12px}
.trend-hd{font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
.trend-item{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:0.5px solid var(--border)}
.trend-item:last-child{border:none}
.trend-rank{font-size:12px;font-weight:900;color:var(--muted);width:16px}
.trend-info{flex:1}
.trend-name{font-size:10px;font-weight:700;color:var(--text)}
.trend-bar{height:3px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;margin-top:3px}
.trend-fill{height:100%;border-radius:99px;background:var(--orange)}
.trend-ct{font-size:9px;color:var(--muted);font-weight:600}

/* Learn */
.learn-title{font-size:24px;font-weight:900;color:var(--text);letter-spacing:-.02em;margin-bottom:5px}
.learn-sub{font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.6}
.learn-card{background:var(--card);border-radius:13px;padding:14px;border:1.5px solid var(--border);margin-bottom:8px}
.learn-card-top{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.learn-card-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.learn-card-title{font-size:13px;font-weight:800;color:var(--text)}
.learn-card-body{font-size:11px;color:#555;line-height:1.7}

/* Scanner modal */
.scanner-modal{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;background:rgba(0,0,0,.95);padding:env(safe-area-inset-top,20px) 16px env(safe-area-inset-bottom,20px)}
.scanner-modal.open{display:flex}
.scanner-close{position:absolute;top:calc(env(safe-area-inset-top,20px) + 12px);right:16px;background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:99px;font-size:16px;display:flex;align-items:center;justify-content:center}
.scanner-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;max-width:360px;margin:0 auto;width:100%;padding-top:20px}
.scanner-title{font-size:20px;font-weight:900;color:#fff;text-align:center}
.scanner-sub{font-size:11px;color:#8888AA;text-align:center;line-height:1.6;max-width:280px}
.scanner-preview{width:100%;max-width:320px;aspect-ratio:4/3;background:#111;border-radius:16px;overflow:hidden;position:relative;border:2px solid rgba(255,255,255,.15)}
.scanner-frame{position:absolute;inset:20px;border:2px solid var(--orange);border-radius:10px;pointer-events:none}
.scanner-frame::before,.scanner-frame::after{content:'';position:absolute;width:20px;height:20px;border-color:var(--orange);border-style:solid}
.scanner-frame::before{top:-2px;left:-2px;border-width:3px 0 0 3px;border-radius:3px 0 0 3px}
.scanner-frame::after{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-radius:0 0 3px 3px}
#scanner-video{width:100%;height:100%;object-fit:cover}
.scanner-snap{display:block;width:100%;max-width:320px;padding:15px;background:var(--orange);color:#fff;border:none;border-radius:13px;font-size:14px;font-weight:800}
.scanner-or{font-size:10px;color:#6666AA;text-align:center}
.scanner-upload{display:block;width:100%;max-width:320px;padding:12px;background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.2);border-radius:13px;font-size:12px;font-weight:700;text-align:center;cursor:pointer}
.scan-result-card{width:100%;max-width:320px;background:#1C1C2E;border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,.1)}
.src-name{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px}
.src-conf{font-size:9px;background:rgba(34,197,94,.2);color:#4ADE80;border:1px solid rgba(34,197,94,.4);border-radius:99px;padding:2px 7px;font-weight:700;display:inline-block;margin-bottom:10px}
.src-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:10px}
.src-fact{background:rgba(255,255,255,.07);border-radius:9px;padding:7px 4px;text-align:center}
.src-fv{font-size:15px;font-weight:900;color:#fff}
.src-fv.nc{color:#FF6B35;font-size:19px}
.src-fl{font-size:7.5px;color:#8888AA;margin-top:2px;text-transform:uppercase;font-weight:700}
.src-cmp-title{font-size:10px;font-weight:800;color:#8888AA;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.src-cmp-card{background:rgba(255,107,53,.15);border:1.5px solid rgba(255,107,53,.4);border-radius:11px;padding:10px;display:flex;align-items:center;gap:9px}
.src-cmp-ico{font-size:20px;width:34px;height:34px;background:rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.src-cmp-name{font-size:11px;font-weight:800;color:var(--orange)}
.src-cmp-diff{font-size:9px;color:rgba(255,107,53,.8);margin-top:2px}
.src-win-badge{margin-left:auto;font-size:8px;background:var(--orange);color:#fff;padding:3px 8px;border-radius:99px;font-weight:800;white-space:nowrap;flex-shrink:0}
.scanner-overlay{position:fixed;inset:0;z-index:299;display:none;background:rgba(0,0,0,.7)}
.scanner-overlay.open{display:block}

/* ─── DESKTOP LAYOUT (≥ 768px) ─── */
@media (min-width: 768px) {
  body { background: #0F0F1A; }
  #app { max-width: 100%; flex-direction: column; min-height: 100vh; }

  /* Desktop header */
  .hdr { position:sticky; top:0; z-index:100; padding:0 32px; }
  .hdr-top { padding-top:16px; margin-bottom:14px; }
  .logo-name { font-size:22px; }
  .seg { max-width:320px; }

  /* Hide mobile tab bar on desktop */
  .tab-bar { display: none; }

  /* Desktop nav tabs in header */
  .desk-nav { display:flex; gap:6px; align-items:center; }
  .desk-nav .seg-btn { min-width:90px; font-size:11px; padding:9px 8px; }

  /* Views — no scroll padding needed */
  .view { padding-bottom: 24px; }

  /* ── CHECK view: 2-col desktop ── */
  #view-check .bp { display:grid; grid-template-columns:260px 1fr; gap:0; padding:0; max-width:1200px; margin:0 auto; width:100%; }
  .desk-sidebar { background:var(--card); border-right:0.5px solid var(--border); padding:20px 16px; min-height:calc(100vh - 80px); position:sticky; top:80px; height:calc(100vh - 80px); overflow-y:auto; }
  .desk-main { padding:20px 24px; overflow-y:auto; }
  .desk-sidebar .sh { font-size:10px; margin-bottom:12px; }
  .desk-prod-list { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
  .desk-prod-item { display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:11px; cursor:pointer; border:1.5px solid transparent; transition:all .15s; }
  .desk-prod-item.on { background:#FFF3EC; border-color:var(--orange); }
  .desk-prod-item-ico { width:38px; height:38px; background:var(--bg); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; overflow:hidden; }
  .desk-prod-item-ico img { width:100%; height:100%; object-fit:cover; }
  .desk-prod-item.on .desk-prod-item-ico { background:#FFE8D6; }
  .desk-prod-name { font-size:12px; font-weight:700; color:var(--text); }
  .desk-prod-nc { font-size:9px; color:var(--orange); font-weight:800; margin-top:1px; }
  .desk-prod-sub { font-size:9px; color:var(--muted); margin-top:1px; }
  .desk-cat-list { display:flex; flex-direction:column; gap:4px; }
  .desk-cat-btn { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:9px; border:none; background:none; width:100%; text-align:left; transition:background .15s; }
  .desk-cat-btn.on { background:var(--bg); }
  .desk-cat-ico { font-size:15px; }
  .desk-cat-name { font-size:11px; font-weight:600; color:var(--text); }

  /* Desktop check: 3-col card layout */
  .desk-card-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
  .fg { grid-template-columns:repeat(4,1fr); }
  .nc-hero { padding:20px 20px 18px; }
  .nc-num { font-size:110px; }

  /* ── COMPARE view: 3-col ── */
  #view-compare .bp { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:280px 1fr 300px; gap:0; padding:0; width:100%; min-height:calc(100vh - 80px); }
  .cmp-left { background:var(--card); border-right:0.5px solid var(--border); padding:20px 16px; min-height:calc(100vh - 80px); position:sticky; top:80px; height:calc(100vh - 80px); overflow-y:auto; }
  .cmp-main { padding:20px 24px; overflow-y:auto; }
  .cmp-right { background:var(--card); border-left:0.5px solid var(--border); padding:20px 16px; min-height:calc(100vh - 80px); position:sticky; top:80px; height:calc(100vh - 80px); overflow-y:auto; }

  /* Desktop selector looks diff — no arrows, use list */
  .sel-row-desk { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
  .sel-row-desk .sel-item { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; cursor:pointer; border:1.5px solid var(--border); background:var(--bg); transition:all .15s; }
  .sel-row-desk .sel-item.on-a { border-color:var(--blue); background:#EFF6FF; }
  .sel-row-desk .sel-item.on-b { border-color:var(--green); background:#F0FDF4; }
  .sel-item-ico { font-size:20px; flex-shrink:0; }
  .sel-item-name { font-size:11px; font-weight:700; color:var(--text); flex:1; }
  .sel-item-nc { font-size:12px; font-weight:900; }
  .sel-item-nc.a { color:var(--blue); } .sel-item-nc.b { color:var(--green); } .sel-item-nc.hi { color:var(--red); }

  /* Hide mobile-only elements on desktop */
  .mobile-only { display:none!important; }
  .desktop-only { display:block!important; }
  .sel-row { display:none; } /* Hide arrow selectors on desktop */

  /* Compare right column */
  .cmp-right-title { font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px; }
  .desk-diet-item { background:var(--bg); border-radius:10px; padding:10px 11px; margin-bottom:7px; }
  .desk-diet-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
  .desk-diet-name { font-size:11px; font-weight:700; color:var(--text); }
  .desk-diet-bar { height:5px; background:rgba(0,0,0,.07); border-radius:99px; overflow:hidden; margin-bottom:3px; }
  .desk-diet-fill { height:100%; border-radius:99px; }
  .desk-diet-meta { font-size:9px; color:var(--muted); }
  .desk-share-btns { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
  .desk-share-btn { padding:7px 11px; border-radius:9px; border:none; font-size:10px; font-weight:700; cursor:pointer; }

  /* Learn view desktop */
  #view-learn .bp { max-width:900px; margin:0 auto; padding:24px 32px; }
  .learn-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}

@media (min-width:1100px) {
  #view-check .bp { grid-template-columns:280px 1fr; }
  .fg { grid-template-columns:repeat(4,1fr); }
}