:root{
    --bg:#F4F7F6; --card:#FFFFFF; --ink:#182220; --mut:#66756F; --line:#E7ECEA;
    --teal:#14B8A6; --teal-deep:#0B7D6E; --soft:#E7F6F3; --soft-line:#CBEAE4;
    --protein:#4A7DBF; --carbs:#D99A2B; --fat:#C4667A; --good:#2E9E5B; --warn:#D9822B; --bad:#C6484C;
    --shadow:0 1px 2px rgba(24,34,32,.05),0 4px 16px rgba(24,34,32,.07);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  [hidden]{display:none!important}
  html,body{height:100%}
  body{background:linear-gradient(180deg,#E8F4F1 0%,var(--bg) 260px) fixed var(--bg);color:var(--ink);font-family:system-ui,"Segoe UI",Roboto,-apple-system,sans-serif;font-size:16px;line-height:1.45;display:flex;flex-direction:column;max-width:560px;margin:0 auto;overscroll-behavior-y:contain}
  header{padding:calc(16px + env(safe-area-inset-top)) 20px 10px;display:flex;justify-content:space-between;align-items:center}
  .brand{font-weight:800;font-size:19px;letter-spacing:-.02em}.brand span{color:var(--teal)}
  a.brand{color:inherit;text-decoration:none}
  .day{color:var(--ink);font-size:16px;font-weight:700;min-width:64px;text-align:center}
  main{flex:1;overflow-y:auto;padding:4px 16px 32px;display:flex;flex-direction:column;gap:12px}
  .c{background:var(--card);border:0;border-radius:18px;padding:16px;box-shadow:var(--shadow)}
  .h2{font-weight:700;font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
  .kbtn{display:block;width:100%;background:var(--teal);color:#04211d;border:0;border-radius:14px;text-align:center;font-weight:700;padding:14px;font-size:16px;cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(20,184,166,.28)}
  .ghost{display:block;width:100%;background:var(--card);border:1.5px solid var(--soft-line);color:var(--teal-deep);border-radius:14px;text-align:center;font-weight:700;padding:12px;font-size:16px;cursor:pointer;font-family:inherit}
  .kbtn svg,.ghost svg,.h2 svg{width:18px;height:18px;vertical-align:-3.5px;margin-right:2px}
  .h2 svg{color:var(--teal-deep);margin-right:0}
  .row2{display:flex;gap:10px}.row2>*{flex:1}
  nav{display:flex;background:var(--card);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px rgba(24,34,32,.07)}
  nav button{flex:1;background:none;border:0;text-align:center;padding:10px 0 12px;font-size:16px;font-weight:600;color:var(--mut);cursor:pointer;font-family:inherit;position:relative}
  nav button.on{color:var(--teal-deep)}
  nav .ic{display:block;margin:0 auto 2px;width:23px;height:23px}
  nav .fabc{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:var(--teal);color:#04211d;display:grid;place-items:center;box-shadow:0 4px 14px rgba(20,184,166,.45)}
  nav .fabc svg{width:26px;height:26px}
  nav button.fab{padding-top:36px}
  .weekrow{display:flex;justify-content:space-between;padding:2px 6px}
  .wd{text-align:center;font-size:16px;font-weight:700;color:var(--mut);cursor:pointer;background:none;border:0;font-family:inherit;padding:0}
  .wd{min-width:44px;min-height:44px}.wd .dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;margin:5px auto 0;color:#04211d;background:transparent}
  .wd.hit .dot{background:var(--teal);border-color:var(--teal)}
  .wd.today{color:var(--ink)}
  .wd.today .dot{border-color:var(--teal-deep)}
  .wd.sel .dot{box-shadow:0 0 0 2.5px var(--card),0 0 0 5px var(--teal-deep)}
  .wd .dot svg{width:16px;height:16px}
  .streakline{text-align:center;font-weight:700;font-size:16px;color:#B05E10;padding-top:10px;display:flex;align-items:center;justify-content:center;gap:6px}
  .streakline svg{width:16px;height:16px;color:var(--warn)}
  .ringrow{display:flex;gap:18px;align-items:center}
  .ring{width:148px;height:148px;border-radius:50%;display:grid;place-items:center;flex:none}
  .ring>span{width:118px;height:118px;border-radius:50%;background:var(--card);display:grid;place-items:center;text-align:center}
  .ring b{font-size:30px;display:block;letter-spacing:-.02em;line-height:1.1}.ring small{color:var(--mut);font-size:16px}
  .heroside{flex:1;display:flex;flex-direction:column;gap:10px}
  .heroside .kv{padding:0}
  .kcal-left{font-size:22px;font-weight:800;letter-spacing:-.02em}
  .kcal-left small{font-size:16px;font-weight:600;color:var(--mut);display:block}
  .mac3{display:flex;gap:14px}
  .mac3>span{flex:1}
  .mlab{font-size:16px;font-weight:700;margin-bottom:2px}
  .mval{font-size:16px;font-weight:800;margin-bottom:6px;font-variant-numeric:tabular-nums}
  .mval span{font-size:16px;color:var(--mut);font-weight:600}
  .bar{height:8px;border-radius:5px;background:#E9EEEC;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:5px}
  .meal-card{padding:12px 16px}
  .meal-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;padding:2px 0}
  .meal-h .mic{width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--teal-deep);display:grid;place-items:center;flex:none}
  .meal-h .mic svg{width:18px;height:18px}
  .meal-h .mkcal{color:var(--mut);font-size:16px;font-weight:600;display:block}
  .meal-h>span:nth-child(2){flex:1}
  .logpill{background:var(--soft);border:0;color:var(--teal-deep);font-weight:700;font-size:16px;border-radius:20px;min-height:44px;padding:7px 18px;cursor:pointer;font-family:inherit}
  .item{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;border-bottom:1px solid #EFF3F1;font-size:16px}
  .item:last-child{border-bottom:0}
  .item small{display:block;color:var(--mut);font-size:16px}
  .item b{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:16px}
  /* diary rows only: the name absorbs the slack and kcal sits in a fixed column,
     so the numbers line up down the card instead of floating after each name.
     Scoped to .meal-card because the same .item class carries wider values
     elsewhere (weight list, body measurements). */
  .meal-card .item>span:first-child{flex:1;min-width:0;padding-right:8px}
  .meal-card .item>b{flex:0 0 68px;text-align:right}
  .del{background:none;border:0;color:var(--mut);cursor:pointer;padding:8px 10px}
  .del svg{width:16px;height:16px;vertical-align:middle}
  input,select,textarea{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font-size:16px;font-family:inherit;color:var(--ink)}
  input:focus,select:focus{outline:none;border-color:var(--teal)}
  label{font-size:16px;font-weight:700;color:var(--mut);display:block;margin:10px 0 5px}
  .pill{display:inline-block;border-radius:20px;padding:3px 10px;font-size:16px;font-weight:700}
  .nutri{display:inline-flex;border-radius:8px;overflow:hidden;font-weight:800;font-size:16px;vertical-align:middle}
  .nutri span{padding:4px 8px;color:#fff;opacity:.32}
  .nutri span.hit{opacity:1}
  .kv{display:flex;justify-content:space-between;font-size:16px;color:var(--mut);padding:3px 2px}
  .kv b{color:var(--ink);font-variant-numeric:tabular-nums}
  .hint{font-size:16px;color:var(--mut);padding:0 4px}
  .avatar{width:140px;height:140px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid var(--teal)}
  .daynav{display:flex;align-items:center;gap:6px}
  .daynav button{background:none;border:1.5px solid var(--line);border-radius:8px;color:var(--teal-deep);font-weight:800;font-size:16px;min-width:44px;min-height:44px;padding:2px 9px;cursor:pointer}
  .daynav button:disabled{opacity:.3}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
  .chips button{border:1.5px solid var(--line);background:var(--card);border-radius:20px;min-width:44px;min-height:44px;padding:6px 12px;font-weight:700;font-size:16px;color:var(--mut);cursor:pointer;font-family:inherit}
  .chips button.on{border-color:var(--teal);color:var(--teal-deep);background:var(--soft)}
  /* targets editor: grams are what you type, calories + % are derived (MFP model) */
  .mt-cal{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;background:var(--soft);border:1px solid var(--soft-line);border-radius:12px}
  .mt-cal-t{font-weight:800;font-size:16px}
  .mt-cal-s{font-size:16px;color:var(--mut);margin-top:1px}
  .mt-cal b{font-size:26px;font-weight:800;color:var(--teal-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
  .mt-cal>div{min-width:0}.mt-cal .mt-in{flex-basis:150px;gap:10px}.mt-cal .mt-in input{width:0;min-width:0;flex:1}
  .mt-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line)}
  .mt-row:last-of-type{border-bottom:0}
  .mt-name{font-weight:700;font-size:16px;flex:1}
  .mt-pc{font-size:16px;color:var(--mut);font-weight:700;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
  .mt-in{display:flex;align-items:center;gap:5px;flex:0 0 96px}
  .mt-in input{width:100%;text-align:right;padding:9px 10px;font-weight:800;font-size:16px}
  .mt-in em{font-style:normal;font-size:16px;color:var(--mut);font-weight:700}
  .step{display:flex;align-items:center;gap:10px}
  .step button{flex:0 0 44px;border:1.5px solid var(--teal);background:var(--card);border-radius:10px;color:var(--teal-deep);font-weight:800;font-size:18px;padding:8px 0;cursor:pointer}
  .step div{flex:1;text-align:center;font-weight:700;font-size:16px}
  .snapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .snap{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#E3E9E7}
  .snap img{width:100%;height:100%;object-fit:cover}
  .snap .d{position:absolute;bottom:0;left:0;right:0;background:rgba(13,17,23,.65);color:#fff;font-size:16px;font-weight:700;text-align:center;padding:3px}
  .snap .x{position:absolute;top:3px;right:3px;background:rgba(13,17,23,.65);color:#fff;border:0;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;cursor:pointer}
  .snap .x svg{width:13px;height:13px}
  .tab{display:none}.tab.on{display:flex;flex-direction:column;gap:10px}
  .soft{background:var(--soft);border-color:var(--soft-line)}
  dialog{border:0;border-radius:16px;padding:0;max-width:420px;width:calc(100% - 40px);margin:auto;max-height:85dvh;overflow-y:auto}
  dialog::backdrop{background:rgba(13,17,23,.55)}
  .dlg{padding:20px}
  .seg{display:flex;gap:6px}
  .seg button{flex:1;border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:9px 4px;font-weight:700;font-size:16px;color:var(--mut);cursor:pointer;font-family:inherit}
  .seg button.on{border-color:var(--teal);color:var(--teal-deep);background:var(--soft)}
  .camwrap{position:relative;border-radius:16px;overflow:hidden}
  video#cam{width:100%;display:block;background:#0d1117;max-height:300px;object-fit:cover}
  .vf{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
  .vf i{width:72%;height:46%;border:2.5px solid rgba(255,255,255,.92);border-radius:14px;box-shadow:0 0 0 2000px rgba(13,17,23,.38);position:relative;overflow:hidden;display:block}
  .vf i::after{content:"";position:absolute;left:6%;right:6%;top:0;height:2px;background:var(--teal);animation:scanline 1.6s ease-in-out infinite}
  @keyframes scanline{0%,100%{transform:translateY(8px)}50%{transform:translateY(11vh)}}
  .vf.lock i{border-color:var(--good)}
  .vf.lock i::after{background:var(--good);animation:none;transform:translateY(6vh)}
  .vf-hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;color:#fff;font-size:16px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  a{color:var(--teal-deep)}
  .chart{width:100%;background:var(--card);border-radius:10px}
  .center{text-align:center}
  .cookie-banner{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:1100;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;padding:12px;background:var(--card);border:1px solid var(--soft-line);border-radius:14px;box-shadow:var(--shadow);text-align:center}.cookie-banner-text{flex:1 1 100%;margin:0;color:var(--ink);font-size:16px}.cookie-banner-actions{display:flex;gap:8px}.cookie-banner .cookie-btn{min-width:44px;min-height:44px;border:0;border-radius:10px;padding:8px 14px;font:700 13px inherit}.cookie-banner .btn-primary{background:var(--teal);color:#04211d}.cookie-banner .btn-secondary{background:var(--soft);color:var(--teal-deep)}

/* v2: shared readable surfaces; no framework or runtime styling. */
@font-face{font-family:Inter;src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');font-display:swap}
:root{--bg:#f5f5f5;--ink:#111;--mut:#555;--line:#dce2e0;--teal-deep:#076c60;--good:#25633c;--warn:#874600;--bad:#a32b32;--shadow:none}
body{font-family:Inter,Arial,sans-serif;background:var(--bg);max-width:800px;height:100dvh}
header{background:#fff;border-bottom:1px solid var(--line);padding:16px 20px;flex:none}.brand{font-size:18px}.brand span{color:var(--teal-deep)}
main{padding:18px 16px 28px;gap:16px;scroll-padding:20px}h2{font-size:22px;letter-spacing:-.5px}h3{font-size:18px;margin:12px 0}p{margin:8px 0}
.page-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}.page-title h2{font-size:30px}.page-title span{color:var(--mut);font-size:16px}
.c{border:1px solid var(--line);padding:16px;border-radius:18px}.tab.on{gap:14px}.h2{font-size:18px}
button,input,select,summary{font-family:inherit;font-size:16px;min-height:44px}button{cursor:pointer}button:disabled{cursor:default}
button,a,input,select,summary,[tabindex]{touch-action:manipulation}:focus-visible{outline:3px solid #07594f!important;outline-offset:3px}
input:focus,select:focus{outline:3px solid #07594f}.kbtn,.ghost{font-size:16px;padding:12px;box-shadow:none}.kbtn{color:#04211d}.ghost{border-color:#a8b8b3}
small,label,.hint,.kv,.mlab,.mval span,.item,.item small,.item b,.pill,.chips button,.seg button,.day,.wd,.ring small,.meal-h,.meal-h .mkcal{font-size:16px}
label{margin-top:8px}.daynav{justify-content:space-between}.daynav label{min-height:44px;flex:1;display:grid!important;place-items:center}.daynav .day{font-size:18px}
.week-card{padding:0 0 4px}.weekrow{padding:0}.wd .dot{height:8px;width:26px;border-radius:8px;margin:5px auto}.wd .dot svg{display:none}.wd.sel .dot{box-shadow:none}.wd.sel{color:var(--teal-deep)}
.diary-summary{padding:20px}.ringrow{gap:16px;justify-content:space-between}.ring{background:none;width:auto;height:auto;flex:1;display:block}.ring>span{width:auto;height:auto;display:block;text-align:left}.ring b{font-size:42px;margin:4px 0}.ring small{display:block}.heroside{text-align:right;flex:1}.kcal-left{font-size:24px}.kcal-left small{font-size:16px}
.diary-summary .mac3{margin-top:18px;border-top:1px solid var(--line);padding-top:18px;gap:10px}.mval{font-size:16px}.mval span{display:block}.bar{margin-top:4px}.meal-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.meal-title h2{font-size:20px}.meal-title .ghost{width:auto}
.meal-h .mic{display:none}.logpill{font-size:16px;border-radius:12px;padding:10px 16px;background:var(--teal);color:#04211d}.del{min-width:44px;min-height:44px;padding:10px}.meal-card .item>b{flex-basis:76px}.meal-card .item{gap:4px}.item>span:first-child{min-width:0}.item small{line-height:1.5}
.optional-tool>.c,details.c>.c{border:0;padding:12px 0 0}.optional-tool summary,details.c>summary{font-size:18px;font-weight:650;display:list-item;padding:8px 0;cursor:pointer}
.check-row{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:400}.check-row input,input[type=checkbox]{width:24px;height:24px;min-height:24px;flex:none;accent-color:var(--teal-deep)}.check-row{min-height:48px}
#q{min-height:52px}#meal-seg{display:grid;grid-template-columns:repeat(2,1fr)}.seg button{padding:10px}.seg button.on,.chips button.on{border-color:var(--teal-deep)}#results{padding:12px}#results h3{margin:18px 4px 8px}
.food-result{width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line);gap:12px;padding:14px 4px;color:var(--ink);font:inherit}.food-result small,.density{display:block}.density{color:var(--teal-deep);font-size:16px;font-weight:650;margin:6px 0}
.remembered{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;padding:14px 0}.remembered small{display:block}.remembered .quick-add{width:48px;height:48px;font-size:24px;padding:6px}.portion-change,.remembered>.ghost{grid-column:1/-1}.remembered b{white-space:normal}
nav{padding:8px 8px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);box-shadow:none;flex:none;gap:4px}nav button{padding:6px 0;font-size:16px;border-radius:10px}nav button.on{background:var(--soft);color:#07594f}nav .ic{margin-bottom:4px}
dialog{width:min(560px,100%);max-width:none;border:1px solid var(--line);max-height:94dvh;border-radius:22px;margin:auto auto 0;padding-bottom:env(safe-area-inset-bottom)}.dlg{padding:22px 20px}.dialog-actions{position:sticky;bottom:-22px;background:white;padding:12px 0}.dialog-close{width:auto;margin:8px 0}.portion-total{background:var(--soft);border-radius:14px;padding:14px;margin-top:14px}.portion-total span,.portion-total b{display:block}.portion-total b{font-size:18px;margin-top:6px}.basis{margin:8px 0}.basis summary{padding:10px 0}.chips{gap:8px}.chips button{border-radius:12px;color:#555}.row2>*{min-width:0}
#undo-bar{display:flex;align-items:center;gap:12px;background:#e7f6f3;border-top:1px solid #91bdb4;padding:8px 16px;flex:none}#undo-bar span{flex:1}#undo-bar button{width:auto}#undo-bar{max-height:100px}#scan-result>button{margin-top:12px}
#greet,.week-card{display:none}.ring>span>div{display:block;text-align:left}.meal-card .item small{color:#555}
.mac3{flex-wrap:wrap}.mac3>span{min-width:5em}.ringrow,.meal-title,.meal-h{flex-wrap:wrap}.ringrow>*{min-width:0}.ring b{overflow-wrap:anywhere}nav button{min-width:0;overflow-wrap:anywhere}.brand{overflow-wrap:anywhere}.item{flex-wrap:wrap}.meal-card .item>span:first-child{flex-basis:50%}
.snap .x{width:44px;height:44px}.snap .d{font-size:16px}.snap .x svg{width:18px;height:18px}.chart text{font-size:16px;fill:#555}.chart{min-height:120px}.kv{gap:12px;align-items:flex-start}.kv b{text-align:right;white-space:normal}
#install-banner{color:#04211d!important}.cookie-banner-text,.cookie-banner .cookie-btn{font-size:16px}.cookie-banner{bottom:90px}.item a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
@media(min-width:600px){main{padding:24px 28px}dialog{margin:auto}.dlg{padding:28px}#meal-seg{grid-template-columns:repeat(4,1fr)}.diary-summary .mac3{gap:24px}}
@media(max-width:380px){.ring b{font-size:36px}.diary-summary{padding:16px}.meal-h{gap:6px}.meal-card{padding:12px}.logpill{padding:10px 12px}.mac3{gap:8px}.row2{flex-wrap:wrap}.row2>*{flex-basis:120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.ring,.mac3{border:0;background:transparent;color:inherit;text-align:left;font-family:inherit}.mac3{width:100%}.mac3 .mlab,.mac3 .mval,.mac3 .bar{display:block}.ring>span>span{display:block}