/* TrueCarbs™ v4.0 — © 2026 LowCarb Avenue LLC */

/* ── TOKENS ── */
:root {
  --bg:      #FFFDF8;
  --card:    #FFFFFF;
  --card2:   #FAF7F2;
  --border:  #EAE4D9;
  --border2: #D9D0C4;
  --ink:     #171717;
  --ink2:    #6F665C;
  --ink3:    #A89E92;
  --orange:  #FF6B35;
  --o-light: #FFF0EA;
  --o-mid:   #FFD4C0;
  --caramel: #B7793F;
  --c-light: #FDF0E4;
  --green:   #2D7A3A;
  --g-light: #EAF5EC;
  --red:     #C0392B;
  --r-light: #FDECEA;
  --blue:    #2B5CB8;
  --b-light: #EEF4FF;
  --navy:    #1A1A2E;
  --hh: 58px;
  --nh: 60px;
}

/* ── PRE-JS: hide app shell until JS routes it ── */
#tc-app-shell { visibility: hidden; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }
a { text-decoration: none; color: inherit; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; -webkit-font-smoothing: antialiased; color: var(--ink); }

/* ════════════════════════════════════════════════════════
   THE LAYOUT SYSTEM
   
   KEY INSIGHT: We do NOT override fixed/absolute positioning.
   Instead we use a completely different HTML structure per breakpoint.
   
   Mobile  (< 1024px): body locks to viewport, app fills screen
   Desktop (≥ 1024px): body scrolls normally, app in left column
   ════════════════════════════════════════════════════════ */

/* ── MOBILE (< 1024px): locked full-screen PWA ── */
@media (max-width: 1023px) {
  html, body { height: 100%; overflow: hidden; background: var(--bg); }
  
  #tc-desktop { display: none; }
  #tc-mobile  { display: block; height: 100%; }
  
  #app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--hh);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    z-index: 200;
  }
  #app-main {
    position: fixed;
    top: var(--hh); left: 0; right: 0;
    bottom: var(--nh);
    overflow: hidden;
  }
  #bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--nh);
    background: var(--card);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #scanner-modal { position: fixed; }
  #toast { position: fixed; bottom: calc(var(--nh) + 12px); }
}

/* ── DESKTOP (≥ 1024px): normal scrolling page ── */
@media (min-width: 1024px) {
  html, body { height: auto; overflow: auto; background: #F0EDE8; }
  
  #tc-mobile  { display: none; }
  #tc-desktop {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 32px 80px;
  }

  /* Left column: sticky phone frame */
  #tc-phone-col {
    flex: 0 0 390px;
    width: 390px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    border-radius: 28px;
    overflow: hidden;
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 24px 60px rgba(0,0,0,.12);
  }

  /* Phone col inner elements */
  #tc-phone-col #app-header {
    position: relative;
    height: var(--hh);
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }
  #tc-phone-col #app-main {
    position: relative;
    height: 580px;
    overflow: hidden;
  }
  #tc-phone-col #bottom-nav {
    position: relative;
    height: var(--nh);
    background: var(--card);
    border-top: 1px solid var(--border);
    display: flex;
  }
  #tc-phone-col #scanner-modal { position: fixed; z-index: 9999; }
  #tc-phone-col #toast         { position: fixed; bottom: calc(var(--nh) + 12px); }

  /* Right column: SEO content */
  #tc-seo-col {
    flex: 1;
    min-width: 0;
  }
}

/* Large desktop */
@media (min-width: 1400px) {
  #tc-desktop { max-width: 1360px; gap: 64px; padding: 56px 48px 100px; }
  #tc-phone-col { flex: 0 0 420px; width: 420px; }
  #tc-phone-col #app-main { height: 640px; }
}

/* ── HEADER ── */
#app-header { height: var(--hh); }
.hd-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 16px; max-width: 640px; margin: 0 auto; }
.hd-logo { display: flex; align-items: center; gap: 9px; }
.hd-badge { width: 34px; height: 34px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hd-name { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; }
.hd-name em { color: var(--orange); font-style: normal; }
.hd-sub { font-size: 8px; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.streak-pill { display: flex; align-items: center; gap: 4px; background: var(--c-light); border: 1.5px solid #EDD4B0; border-radius: 99px; padding: 4px 10px; }
.streak-pill span:first-child { font-size: 13px; }
#streak-num { font-size: 12px; font-weight: 800; color: var(--caramel); }

/* ── APP MAIN / TABS ── */
.tab-view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transform: translateX(16px); transition: opacity .18s, transform .18s; padding: 16px 16px 28px; max-width: 640px; margin: 0 auto; }
.tab-view.on { opacity: 1; pointer-events: auto; transform: none; }

/* ── BOTTOM NAV ── */
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; }
.nav-ico-wrap { width: 36px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.nav-ico { width: 20px; height: 20px; fill: none; stroke: var(--ink3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.nav-btn span { font-size: 9px; font-weight: 600; color: var(--ink3); transition: color .15s; }
.nav-btn.on .nav-ico-wrap { background: var(--o-light); }
.nav-btn.on .nav-ico { stroke: var(--orange); }
.nav-btn.on span { color: var(--orange); font-weight: 700; }

/* ── TOAST ── */
#toast { left: 50%; transform: translateX(-50%) translateY(12px); background: var(--navy); color: #fff; padding: 9px 18px; border-radius: 99px; font-size: 12px; font-weight: 600; opacity: 0; transition: all .22s; z-index: 500; white-space: nowrap; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── LCA BAR ── */
.lca-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; background: var(--card2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 16px; }
.lca-dot { width: 16px; height: 16px; background: var(--orange); border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lca-dot svg { width: 10px; height: 10px; }
.lca-text { font-size: 9px; color: var(--ink2); font-weight: 500; }
.lca-text a { color: var(--orange); font-weight: 700; text-decoration: underline; text-underline-offset: 1.5px; }
.legal-note { font-size: 8px; color: var(--ink3); text-align: center; padding: 10px 12px 4px; line-height: 1.6; }

/* ── HOME ── */
.scan-hero { background: var(--orange); border-radius: 20px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; width: 100%; position: relative; overflow: hidden; }
.scan-hero::after { content: ''; position: absolute; right: -20px; top: -20px; width: 100px; height: 100px; background: rgba(255,255,255,.08); border-radius: 50%; }
.sh-icon { width: 48px; height: 48px; background: rgba(255,255,255,.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.sh-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.sh-sub { font-size: 9.5px; color: rgba(255,255,255,.8); }
.sh-hint { position: absolute; right: 14px; bottom: 12px; background: rgba(255,255,255,.2); border-radius: 99px; padding: 3px 10px; font-size: 8px; color: #fff; font-weight: 600; }
.stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-bottom: 14px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; }
.stat-val { font-size: 19px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
.stat-val.g { color: var(--green); }
.stat-val.b { color: var(--blue); }
.stat-val.o { color: var(--orange); }
.stat-lbl { font-size: 8px; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.sec-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sec-title { font-size: 10px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.sec-link { font-size: 9.5px; color: var(--orange); font-weight: 600; }
.feed-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 11px; margin-bottom: 7px; width: 100%; text-align: left; }
.feed-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.feed-name { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.feed-meta { font-size: 9px; color: var(--ink3); }
.feed-action { font-size: 8.5px; font-weight: 700; color: var(--orange); background: var(--o-light); border: 1px solid var(--o-mid); border-radius: 99px; padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
.prod-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.prod-row::-webkit-scrollbar { display: none; }
.prod-chip { background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px; text-align: center; min-width: 72px; flex-shrink: 0; }
.prod-chip.sel { border-color: var(--orange); background: var(--o-light); }
.p-ico { font-size: 22px; margin-bottom: 4px; }
.p-name { font-size: 9.5px; font-weight: 700; color: var(--ink); }
.p-nc { font-size: 10px; font-weight: 800; color: var(--green); margin-top: 2px; }

/* ── COMPARE ── */
.cmp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cmp-title { font-size: 18px; font-weight: 800; color: var(--ink); }
.item-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.item-dot { width: 9px; height: 9px; border-radius: 50%; }
.item-dot.a { background: var(--blue); }
.item-dot.b { background: var(--red); }
.item-tag { font-size: 9px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .07em; }
.sel-box { border-radius: 16px; padding: 13px; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; }
.sel-box.a { background: var(--card); border: 2px solid var(--blue); }
.sel-box.b { background: var(--card); border: 2px solid var(--red); }
.sel-arrow { width: 30px; height: 30px; border-radius: 9px; background: var(--card2); border: 1px solid var(--border); font-size: 16px; color: var(--ink3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sel-mid { flex: 1; text-align: center; }
.sel-icon { font-size: 26px; margin-bottom: 4px; }
.sel-name { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.sel-desc { font-size: 9px; color: var(--ink2); margin-bottom: 8px; }
.sel-nc { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.sel-nc.lo { color: var(--green); }
.sel-nc.hi { color: var(--red); }
.sel-unit { font-size: 8px; color: var(--ink3); text-transform: uppercase; font-weight: 600; letter-spacing: .04em; margin-top: 3px; }
.sel-pills { display: flex; justify-content: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.sel-pill { font-size: 8.5px; background: var(--card2); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; color: var(--ink2); font-weight: 500; }
.sel-dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.s-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border2); }
.s-dot.on-a { width: 14px; border-radius: 99px; background: var(--blue); }
.s-dot.on-b { width: 14px; border-radius: 99px; background: var(--red); }
.b-source { display: flex; gap: 5px; margin-bottom: 10px; }
.b-src-btn { flex: 1; padding: 8px 4px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--card2); font-size: 9px; font-weight: 600; color: var(--ink2); text-align: center; transition: all .15s; }
.b-src-btn.on { background: var(--o-light); border-color: var(--o-mid); color: var(--caramel); }
.vs-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vs-line { flex: 1; height: 1px; background: var(--border2); }
.vs-pill { background: var(--navy); color: #fff; border-radius: 99px; padding: 5px 14px; font-size: 10px; font-weight: 800; }
.winner-bar { border-radius: 12px; padding: 10px 13px; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.winner-bar.good { background: var(--g-light); border: 1.5px solid #B8DFC0; }
.winner-bar.bad  { background: var(--r-light); border: 1.5px solid #F5C0BC; }
.wb-icon { font-size: 18px; flex-shrink: 0; }
.wb-text { flex: 1; font-size: 10.5px; font-weight: 700; color: var(--ink); }
.wb-badge { border-radius: 99px; padding: 3px 10px; font-size: 8.5px; font-weight: 700; color: #fff; }
.wb-badge.a { background: var(--green); }
.wb-badge.b { background: var(--red); }
.atabs-wrap { overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.atabs-wrap::-webkit-scrollbar { display: none; }
.atabs { display: flex; gap: 5px; padding-bottom: 2px; }
.atab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); min-width: 54px; flex-shrink: 0; transition: all .15s; }
.atab span:first-child { font-size: 16px; }
.atab span:last-child { font-size: 8.5px; font-weight: 600; color: var(--ink2); }
.atab.on { border-color: var(--orange); background: var(--o-light); }
.atab.on span:last-child { color: var(--caramel); }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.fact-card { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 9px 7px; text-align: center; }
.fact-card.hero-a { background: var(--b-light); border-color: #C0D4F5; }
.fact-card.hero-b { background: var(--r-light); border-color: #F5C0BC; }
.fv { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 3px; }
.fl { font-size: 7.5px; color: var(--ink3); text-transform: uppercase; font-weight: 600; }
.fv.g { color: var(--green); }
.fv.r { color: var(--red); }
.fv.o { color: var(--orange); }
.social-strip { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); margin-bottom: 10px; }
.social-lbl { font-size: 9px; color: var(--ink3); }
.reacts { display: flex; gap: 5px; }
.react { display: flex; align-items: center; gap: 3px; background: var(--card2); border: 1px solid var(--border); border-radius: 99px; padding: 4px 9px; }
.react span:first-child { font-size: 12px; }
.react span:last-child { font-size: 9px; color: var(--ink2); font-weight: 600; }
.react.hot { background: var(--o-light); border-color: var(--o-mid); }
.react.hot span:last-child { color: var(--caramel); }
.share-title { font-size: 10px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.share-btns { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.share-btn { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--card2); border: 1px solid var(--border); }
.fb-warn { background: var(--r-light); border: 1px solid #F5C0BC; border-radius: 10px; padding: 10px; margin-bottom: 10px; display: flex; gap: 8px; }
.fb-warn-title { font-size: 11px; font-weight: 700; color: var(--red); margin-bottom: 2px; }
.fb-warn-body { font-size: 9px; color: var(--red); line-height: 1.5; opacity: .8; }
.lca-suggest { background: var(--o-light); border: 1.5px solid var(--o-mid); border-radius: 12px; padding: 11px; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.ls-name { font-size: 10.5px; font-weight: 700; color: var(--caramel); margin-bottom: 2px; }
.ls-diff { font-size: 9px; color: var(--ink2); }
.ls-cta { background: var(--orange); color: #fff; border-radius: 99px; padding: 5px 11px; font-size: 8.5px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }

/* ── KETOCHEF ── */
.chef-bar { background: var(--orange); padding: 14px 16px 12px; text-align: center; margin: -16px -16px 0; }
.chef-bar-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 2px; }
.chef-bar-sub { font-size: 9.5px; color: rgba(255,255,255,.85); }
.chef-bar-by { font-size: 8.5px; color: rgba(255,255,255,.55); margin-top: 3px; }
.chef-tabs { display: flex; border-bottom: 1.5px solid var(--border); margin: 0 -16px 14px; padding: 0 16px; background: var(--card); }
.chef-tab { flex: 1; padding: 11px 6px; font-size: 10.5px; font-weight: 700; color: var(--ink2); text-align: center; border-bottom: 2.5px solid transparent; transition: all .15s; }
.chef-tab.on { color: var(--orange); border-bottom-color: var(--orange); }
.section-lbl { font-size: 10px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; margin-top: 12px; }
.bread-row { display: flex; gap: 7px; margin-bottom: 14px; }
.bread-btn { flex: 1; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 7px; text-align: center; transition: all .15s; }
.bread-btn.on { border-color: var(--orange); background: var(--o-light); }
.bread-ico { font-size: 20px; margin-bottom: 4px; }
.bread-name { font-size: 9.5px; font-weight: 700; color: var(--ink); }
.bread-nc { font-size: 9px; color: var(--green); font-weight: 700; margin-top: 1px; }
.ing-group { margin-bottom: 4px; }
.ing-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ing-btn { padding: 6px 11px; background: var(--card); border: 1.5px solid var(--border); border-radius: 99px; font-size: 9.5px; font-weight: 600; color: var(--ink); transition: all .15s; }
.ing-btn.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.live-box { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 13px; margin: 12px 0; }
.live-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.live-title { font-size: 10px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .06em; }
.live-dot { font-size: 8px; color: var(--green); font-weight: 700; background: var(--g-light); border-radius: 99px; padding: 2px 8px; }
.live-hero { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.live-nc { font-size: 44px; font-weight: 800; color: var(--orange); line-height: 1; letter-spacing: -.02em; }
.live-nc-lbl { font-size: 8px; color: var(--ink2); text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.live-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.live-ai { font-size: 9px; color: var(--ink3); margin-top: 2px; }
.grade-badge { width: 38px; height: 38px; border-radius: 11px; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; margin-left: auto; flex-shrink: 0; }
.bar-rows { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-lbl { font-size: 9px; color: var(--ink2); width: 54px; flex-shrink: 0; font-weight: 600; }
.bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.bar-val { font-size: 9px; font-weight: 700; color: var(--ink); width: 30px; text-align: right; flex-shrink: 0; }
.diet-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.dt { font-size: 8.5px; padding: 3px 9px; border-radius: 99px; font-weight: 600; }
.dt.y { background: var(--g-light); color: var(--green); border: 1px solid #B8DFC0; }
.dt.n { background: var(--r-light); color: var(--red); border: 1px solid #F5C0BC; }
.gen-btn { width: 100%; padding: 14px; background: var(--orange); color: #fff; border-radius: 16px; font-size: 14px; font-weight: 800; margin-top: 12px; position: relative; overflow: hidden; }
.gen-btn::after { content: '→'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; }
.recipe-card { background: var(--card); border: 1.5px solid var(--border); border-radius: 16px; padding: 13px; margin-bottom: 9px; }
.rc-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.rc-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.rc-name { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.rc-desc { font-size: 9.5px; color: var(--ink2); line-height: 1.5; }
.rc-nc { text-align: right; flex-shrink: 0; }
.rc-nc-val { font-size: 24px; font-weight: 800; color: var(--orange); line-height: 1; }
.rc-nc-lbl { font-size: 7.5px; color: var(--ink3); text-transform: uppercase; font-weight: 600; }
.rc-ings { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 9px; }
.rc-ing { font-size: 9px; background: var(--card2); border: 1px solid var(--border); border-radius: 99px; padding: 2px 9px; color: var(--ink2); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--border); }
.rc-share { font-size: 9px; font-weight: 700; background: var(--orange); color: #fff; border-radius: 99px; padding: 5px 12px; }
.rc-pdf { font-size: 9px; font-weight: 600; background: var(--card2); color: var(--ink2); border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; }
.rc-wiki { display: block; margin-top: 8px; font-size: 9px; font-weight: 700; color: var(--orange); text-decoration: underline; text-underline-offset: 1.5px; }
.carbspy-box { background: var(--navy); border-radius: 16px; padding: 16px; margin-bottom: 12px; text-align: center; }
.cs-eyebrow { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,107,53,.2); border: 1px solid rgba(255,107,53,.4); border-radius: 99px; padding: 3px 11px; margin-bottom: 9px; }
.cs-eyebrow span { font-size: 8.5px; font-weight: 700; color: #FF8C5A; text-transform: uppercase; letter-spacing: .05em; }
.cs-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.cs-body { font-size: 9.5px; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 12px; }
.cs-primary { width: 100%; padding: 13px; background: var(--orange); color: #fff; border-radius: 13px; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.cs-secondary { width: 100%; padding: 11px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.2); border-radius: 13px; font-size: 11.5px; font-weight: 600; display: block; text-align: center; }
.cs-tagline { font-size: 8px; color: rgba(255,255,255,.3); margin-top: 8px; }
.how-card { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 13px; }
.how-title { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.how-step { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.how-num { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.how-txt { font-size: 10px; color: var(--ink2); line-height: 1.5; }

/* ── LEARN ── */
.learn-hd-title { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.learn-hd-sub { font-size: 10px; color: var(--ink2); line-height: 1.5; margin-bottom: 12px; }
.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.subtabs::-webkit-scrollbar { display: none; }
.subtab { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 62px; flex-shrink: 0; transition: all .15s; }
.subtab.on { border-color: var(--orange); background: var(--o-light); }
.subtab-ico { font-size: 18px; }
.subtab-lbl { font-size: 9px; font-weight: 600; color: var(--ink2); }
.subtab.on .subtab-lbl { color: var(--caramel); font-weight: 700; }
.wiki-card { display: flex; align-items: center; gap: 10px; background: var(--c-light); border: 1.5px solid #EDD4B0; border-radius: 13px; padding: 12px; margin-bottom: 14px; }
.wiki-ico { font-size: 22px; flex-shrink: 0; }
.wiki-title { font-size: 12px; font-weight: 700; color: var(--caramel); margin-bottom: 2px; }
.wiki-sub { font-size: 9px; color: var(--ink2); }
.wiki-arrow { font-size: 16px; color: var(--caramel); margin-left: auto; }
.email-box { background: var(--navy); border-radius: 16px; padding: 15px; margin-bottom: 13px; }
.email-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.email-ico { font-size: 26px; flex-shrink: 0; }
.email-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.email-sub { font-size: 9px; color: rgba(255,255,255,.6); line-height: 1.5; }
.email-row { display: flex; gap: 7px; }
.email-input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 9px; padding: 9px 11px; color: #fff; font-size: 11px; font-family: inherit; outline: none; }
.email-btn { background: var(--orange); color: #fff; border-radius: 9px; padding: 9px 13px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.email-note { font-size: 8.5px; color: rgba(255,255,255,.35); margin-top: 7px; text-align: center; }
.article-card { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 12px; margin-bottom: 8px; }
.art-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.art-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.art-excerpt { font-size: 9.5px; color: var(--ink2); line-height: 1.6; margin-bottom: 6px; }
.art-foot { display: flex; align-items: center; gap: 7px; }
.art-tag { font-size: 8.5px; background: var(--card2); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; color: var(--ink2); }
.art-read { font-size: 9px; font-weight: 700; color: var(--orange); margin-left: auto; }
.tracker-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.tracker-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tracker-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.tracker-date { font-size: 9px; color: var(--ink3); margin-top: 2px; }
.goal-wrap { display: flex; align-items: center; gap: 6px; }
.goal-wrap select { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--ink); }
.tracker-body { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.t-stats { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.t-stat { background: var(--card2); border-radius: 10px; padding: 8px 11px; }
.t-val { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1; }
.t-lbl { font-size: 8px; color: var(--ink3); text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.t-items { border-top: 1px solid var(--border); padding-top: 10px; }
.t-item { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.t-item:last-child { border: none; }
.t-item-name { font-size: 11.5px; font-weight: 600; color: var(--ink); flex: 1; }
.t-item-time { font-size: 8.5px; color: var(--ink3); margin-top: 1px; }
.t-item-nc { font-size: 17px; font-weight: 800; }
.t-empty { text-align: center; padding: 20px; font-size: 10px; color: var(--ink3); }
.mp-box { background: linear-gradient(145deg,var(--navy),#2D1B4E); border-radius: 20px; padding: 22px 16px; text-align: center; }
.mp-badge { display: inline-block; background: rgba(255,107,53,.2); color: #FF8C5A; border: 1px solid rgba(255,107,53,.3); border-radius: 99px; padding: 4px 13px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; }
.mp-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 7px; }
.mp-sub { font-size: 10px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 16px; }
.mp-feats { background: rgba(255,255,255,.06); border-radius: 13px; padding: 12px; margin-bottom: 14px; text-align: left; }
.mp-feat { font-size: 10px; color: rgba(255,255,255,.75); font-weight: 500; margin-bottom: 6px; }
.mp-feat:last-child { margin: 0; }

/* ── ME ── */
.me-top { background: var(--card); border-bottom: 1px solid var(--border); padding: 20px 16px 16px; text-align: center; margin: -16px -16px 14px; }
.me-avatar { width: 66px; height: 66px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 10px; border: 3px solid var(--o-mid); }
.me-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.me-diet { display: inline-flex; align-items: center; gap: 5px; background: var(--o-light); border: 1.5px solid var(--o-mid); border-radius: 99px; padding: 4px 13px; margin-bottom: 13px; }
.me-diet span:last-child { font-size: 9.5px; font-weight: 700; color: var(--caramel); }
.me-stats { display: flex; gap: 7px; justify-content: center; }
.m-stat { text-align: center; background: var(--card2); border: 1px solid var(--border); border-radius: 11px; padding: 8px 11px; }
.m-val { font-size: 15px; font-weight: 800; color: var(--ink); }
.m-lbl { font-size: 7.5px; color: var(--ink3); text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.me-sec-lbl { font-size: 9.5px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .07em; margin: 14px 0 7px; }
.me-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; margin-bottom: 5px; }
.me-row-ico { font-size: 16px; width: 26px; text-align: center; flex-shrink: 0; }
.me-row-title { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.me-row-sub { font-size: 9px; color: var(--ink3); margin-top: 1px; }
.me-row-action { margin-left: auto; font-size: 9px; color: var(--ink3); font-weight: 500; }
.me-row-action.go { color: var(--orange); font-weight: 700; }
.sub-box { background: linear-gradient(135deg,var(--navy),#2D1B4E); border-radius: 16px; padding: 15px; margin-bottom: 4px; }
.sub-badge { font-size: 8.5px; font-weight: 700; background: rgba(255,107,53,.2); color: #FF8C5A; border: 1px solid rgba(255,107,53,.3); border-radius: 99px; padding: 3px 10px; display: inline-block; margin-bottom: 8px; }
.sub-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.sub-feat { font-size: 9.5px; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.sub-cta { background: var(--orange); color: #fff; border-radius: 10px; padding: 11px; font-size: 12px; font-weight: 700; width: 100%; margin-top: 8px; }

/* ── SCANNER MODAL ── */
#scanner-modal { inset: 0; z-index: 400; display: none; flex-direction: column; background: rgba(10,10,20,.97); overflow-y: auto; -webkit-overflow-scrolling: touch; }
#scanner-modal.open { display: flex; }
.scanner-x { position: fixed; top: calc(env(safe-area-inset-top,14px) + 10px); right: 16px; background: rgba(255,255,255,.15); color: #fff; width: 36px; height: 36px; border-radius: 99px; font-size: 17px; display: flex; align-items: center; justify-content: center; z-index: 410; }
.scanner-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top,20px) + 56px) 16px calc(env(safe-area-inset-bottom,20px) + 24px); }
.scanner-heading { font-size: 20px; font-weight: 800; color: #fff; text-align: center; }
.scanner-tip { font-size: 11px; color: #8888AA; text-align: center; line-height: 1.6; }
.scanner-preview { width: 100%; aspect-ratio: 4/3; background: #111; border-radius: 16px; overflow: hidden; position: relative; border: 2px solid rgba(255,255,255,.15); }
.scan-frame { position: absolute; inset: 16px; border: 2px solid var(--orange); border-radius: 10px; pointer-events: none; }
#scan-video { width: 100%; height: 100%; object-fit: cover; }
.snap-btn { display: block; width: 100%; padding: 15px; background: var(--orange); color: #fff; border-radius: 14px; font-size: 14px; font-weight: 800; }
.scan-or { font-size: 10px; color: #555; text-align: center; }
.upload-btn { display: block; width: 100%; 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: 600; text-align: center; }
#scan-result { width: 100%; }
.result-card { background: #1C1C2E; border-radius: 16px; padding: 15px; border: 1px solid rgba(255,255,255,.1); }
.result-name-row { margin-bottom: 11px; }
.result-name-lbl { font-size: 9px; font-weight: 700; color: #8888AA; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.result-name-input { width: 100%; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); border-radius: 10px; padding: 10px 12px; color: #fff; font-family: inherit; font-size: 12px; outline: none; }
.result-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.result-badge { font-size: 8.5px; border-radius: 99px; padding: 3px 9px; font-weight: 600; }
.rb-conf { background: rgba(34,197,94,.15); color: #4ADE80; border: 1px solid rgba(34,197,94,.3); }
.rb-country { background: rgba(59,130,246,.15); color: #60A5FA; border: 1px solid rgba(59,130,246,.3); }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 10px; }
.rg-card { background: rgba(255,255,255,.07); border-radius: 11px; padding: 9px; text-align: center; }
.rg-card.hero { background: rgba(255,107,53,.15); border: 1.5px solid rgba(255,107,53,.3); }
.rg-val { font-size: 20px; font-weight: 800; color: #fff; line-height: 1; }
.rg-val.o { color: #FF6B35; font-size: 28px; }
.rg-lbl { font-size: 7.5px; color: #aaa; text-transform: uppercase; font-weight: 600; margin-top: 3px; }
.error-card { background: #1C1C2E; border-radius: 16px; padding: 20px 15px; border: 1px solid rgba(255,255,255,.1); text-align: center; }
.error-icon { font-size: 36px; margin-bottom: 10px; }
.error-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.error-body { font-size: 10px; color: #8888AA; line-height: 1.6; margin-bottom: 14px; }
.error-tips { background: rgba(255,255,255,.07); border-radius: 12px; padding: 12px; text-align: left; margin-bottom: 16px; }
.error-tip { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-top: 0.5px solid rgba(255,255,255,.08); }
.error-tip:first-child { border: none; }
.error-tip-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,107,53,.2); border: 1px solid rgba(255,107,53,.4); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #FF6B35; flex-shrink: 0; }
.error-tip-txt { font-size: 11px; color: #ccc; line-height: 1.4; }
.error-btns { display: flex; gap: 8px; }
.error-btn-main { flex: 1; padding: 13px; background: #FF6B35; color: #fff; border-radius: 11px; font-size: 13px; font-weight: 700; }
.error-btn-upload { flex: 1; padding: 13px; background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.15); border-radius: 11px; font-size: 12px; font-weight: 600; display: block; text-align: center; }
.result-options-lbl { font-size: 9px; font-weight: 700; color: #8888AA; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; }
.result-btn { width: 100%; padding: 13px 14px; border-radius: 12px; font-size: 12px; font-weight: 700; text-align: left; margin-bottom: 7px; }
.result-btn.primary { background: #FF6B35; color: #fff; }
.result-btn.sec { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.15); font-weight: 600; }
.result-row { display: flex; gap: 7px; }
.result-sm-btn { flex: 1; padding: 10px; background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; font-size: 11px; font-weight: 600; text-align: center; }
.lca-suggest .ls-name { font-size: 10.5px; font-weight: 700; color: #FF8C5A; margin-bottom: 2px; }
.lca-suggest .ls-diff { font-size: 9px; color: #8888AA; }

/* ── UTILITIES ── */
.empty { text-align: center; padding: 28px 16px; }
.empty-icon { font-size: 36px; margin-bottom: 8px; }
.empty-title { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 4px; }
.empty-sub { font-size: 10px; color: var(--ink3); }
.hist-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.hist-item:last-child { border: none; }
.hist-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--card2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.hist-name { font-size: 12px; font-weight: 700; color: var(--ink); }
.hist-meta { font-size: 9px; color: var(--ink3); margin-top: 2px; }
.hist-nc { font-size: 20px; font-weight: 800; }
button:active { opacity: .8; transform: scale(.98); }

/* ── SEO SECTION ── */
.seo-wrap { background: #FAF7F2; }
.seo-inner { max-width: 900px; margin: 0 auto; padding: 48px 20px 40px; }
.seo-hero { text-align: center; margin-bottom: 40px; }
.seo-badge { display: inline-block; background: #FFF0EA; border: 1.5px solid #FFD4C0; color: #B7793F; border-radius: 99px; padding: 5px 16px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.seo-h1 { font-size: clamp(22px,3.5vw,30px); font-weight: 800; color: #171717; line-height: 1.25; margin-bottom: 14px; letter-spacing: -.02em; }
.seo-lead { font-size: 15px; color: #6F665C; line-height: 1.7; max-width: 620px; margin: 0 auto; }
.seo-link { color: #FF6B35; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; margin-bottom: 40px; }
.seo-card { background: #fff; border: 1px solid #EAE4D9; border-radius: 14px; padding: 20px; }
.seo-card-icon { font-size: 26px; margin-bottom: 9px; }
.seo-h2 { font-size: 16px; font-weight: 700; color: #171717; margin-bottom: 9px; line-height: 1.3; }
.seo-card p { font-size: 13px; color: #6F665C; line-height: 1.7; }
.seo-products { background: #fff; border: 1px solid #EAE4D9; border-radius: 18px; padding: 28px; margin-bottom: 40px; }
.seo-h2c { font-size: 20px; font-weight: 800; color: #171717; text-align: center; margin-bottom: 6px; }
.seo-sub { text-align: center; font-size: 12px; color: #A89E92; margin-bottom: 22px; }
.seo-prod-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 14px; }
.seo-prod { background: #FAF7F2; border: 1px solid #EAE4D9; border-radius: 12px; padding: 16px; }
.seo-prod-icon { font-size: 26px; margin-bottom: 7px; }
.seo-h3 { font-size: 13px; font-weight: 700; color: #171717; margin-bottom: 4px; }
.seo-nc { font-size: 17px; font-weight: 800; color: #FF6B35; margin-bottom: 6px; }
.seo-prod p { font-size: 11.5px; color: #6F665C; line-height: 1.6; margin-bottom: 9px; }
.seo-prod-link { font-size: 11.5px; font-weight: 700; color: #FF6B35; text-decoration: underline; text-underline-offset: 2px; }
.seo-faq { margin-bottom: 40px; }
.seo-faq-item { background: #fff; border: 1px solid #EAE4D9; border-radius: 12px; padding: 16px 18px; margin-bottom: 9px; }
.seo-faq-q { font-size: 14px; font-weight: 700; color: #171717; margin-bottom: 7px; }
.seo-faq-a { font-size: 13px; color: #6F665C; line-height: 1.7; }
.seo-faq-a a { color: #FF6B35; text-decoration: underline; text-underline-offset: 2px; }
.seo-cta { background: linear-gradient(135deg,#1A1A2E,#2D1535); border-radius: 18px; padding: 28px; text-align: center; }
.seo-cta-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 7px; }
.seo-cta-sub { font-size: 12.5px; color: rgba(255,255,255,.9); line-height: 1.7; margin-bottom: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.seo-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.seo-btn-p { background: #FF6B35; color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 12.5px; font-weight: 700; text-decoration: none; display: inline-block; }
.seo-btn-s { background: rgba(255,255,255,.1); color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.2); display: inline-block; }
.seo-disclaimer { font-size: 10px; color: rgba(255,255,255,.6); line-height: 1.6; max-width: 580px; margin: 0 auto; }

/* Desktop SEO adjustments - no extra container needed, just direct */
@media (min-width: 1024px) {
  .seo-wrap { background: transparent; }
  .seo-inner { padding: 0; max-width: 100%; }
}