:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --font-num:"SF Pro Rounded",-apple-system,"Hiragino Sans",sans-serif;
  --fs-largetitle:34px;--fs-title2:22px;--fs-title3:20px;--fs-headline:17px;--fs-body:17px;--fs-callout:16px;--fs-subhead:15px;--fs-footnote:13px;--fs-caption:12px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --gutter:16px;--card-pad:16px;--card-gap:12px;--section-gap:28px;--tap-min:44px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-sheet:20px;--r-full:999px;--r-thumb:10px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.06);
  --shadow-sheet:0 -8px 40px rgba(0,0,0,.18);--shadow-fab:0 6px 20px rgba(0,122,255,.35);
  --bg:#F2F2F7;--surface:#FFFFFF;--surface-2:#F9F9FB;--label:#000;--label-2:rgba(60,60,67,.62);--label-3:rgba(60,60,67,.30);
  --separator:rgba(60,60,67,.18);--fill:rgba(120,120,128,.12);
  --blue:#007AFF;--green:#34C759;--orange:#FF9500;--red:#FF3B30;--yellow:#FFCC00;--purple:#AF52DE;--teal:#30B0C7;--indigo:#5856D6;--pink:#FF2D55;
  --tint:var(--blue);
  --n-protein:#FF2D55;--n-fat:#FF9500;--n-carb:#FFCC00;--n-fiber:#34C759;--n-vitamin:#5AC8FA;--n-mineral:#AF52DE;--n-sodium:#8E8E93;
  --st-low:#FF9500;--st-ok:#34C759;--st-high:#5856D6;--st-none:#C7C7CC;
  --pr-bg:rgba(255,149,0,.14);--pr-text:#B25E00;--seg-on:#fff;--warn-bg:rgba(255,149,0,.14);
  --tabbar-h:49px;--tabbar-bg:rgba(249,249,249,.94);
  --ease-standard:cubic-bezier(.25,.1,.25,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-tap:120ms;--t-fast:200ms;--t-base:300ms;--t-sheet:420ms;--t-ring:900ms;--t-celebrate:800ms;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000;--surface:#1C1C1E;--surface-2:#2C2C2E;--label:#fff;--label-2:rgba(235,235,245,.62);--label-3:rgba(235,235,245,.30);
  --separator:rgba(84,84,88,.6);--fill:rgba(120,120,128,.24);
  --blue:#0A84FF;--green:#30D158;--orange:#FF9F0A;--red:#FF453A;--yellow:#FFD60A;--purple:#BF5AF2;--pink:#FF375F;--tint:#0A84FF;
  --tabbar-bg:rgba(29,29,31,.94);--pr-text:#FFB04D;--shadow-card:0 1px 2px rgba(0,0,0,.4);--seg-on:#636366;--warn-bg:rgba(255,159,10,.2);
}}
@media (prefers-reduced-motion:reduce){:root{--t-ring:0ms;--t-celebrate:0ms;--t-sheet:200ms}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
p,h3,.fn,.tip,.warnbox,.empty,.sub,.hero{text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
html,body{margin:0;background:var(--bg);color:var(--label);font-family:var(--font);font-size:var(--fs-body);line-height:1.35;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:active{transform:scale(.97)}
input,select,textarea{font:inherit;color:inherit}
#app{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;background:var(--bg)}
@media (min-width:600px){body{background:#e5e5ea}#app{box-shadow:0 0 0 1px var(--separator)}}
@media (min-width:600px) and (prefers-color-scheme:dark){body{background:#111}}
.view{padding:calc(var(--gutter) + env(safe-area-inset-top)) var(--gutter) calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom));animation:vin var(--t-base) var(--ease-standard)}
@keyframes vin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
h1.lt{font-size:var(--fs-largetitle);line-height:41px;font-weight:700;margin:8px 0 4px;letter-spacing:.2px}
.sub{color:var(--label-2);font-size:var(--fs-subhead);margin:0 0 var(--card-gap)}
h2{font-size:var(--fs-title2);font-weight:600;margin:var(--section-gap) 0 var(--card-gap);line-height:28px}
h3{font-size:var(--fs-headline);font-weight:600;margin:0 0 4px}
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--card-pad);margin-bottom:var(--card-gap)}
.card.flush{padding:0;overflow:hidden}
.muted{color:var(--label-2)}.fn{font-size:var(--fs-footnote);line-height:18px;color:var(--label-2)}
.row{display:flex;align-items:center;gap:var(--sp-3)}.sp{flex:1}
.hide{display:none!important}
/* tabbar */
#tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;z-index:20;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--tabbar-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--separator);display:flex}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--label-2);min-height:var(--tap-min)}
.tab svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--tint)}.tab.on svg{fill:color-mix(in srgb,var(--tint) 18%,transparent)}
.tab.add{color:#fff}.tab.add .fab{width:48px;height:48px;border-radius:50%;background:var(--tint);box-shadow:var(--shadow-fab);display:flex;align-items:center;justify-content:center;margin-top:-14px}
.tab.add svg{stroke:#fff;width:26px;height:26px}
.tab.add span.l{color:var(--label-2);margin-top:-1px}
/* rings */
.rings{display:flex;align-items:center;gap:20px}
.ringbox{position:relative;width:132px;height:132px;flex:none}
.ringbox svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringbox .trk{fill:none;stroke:var(--fill);stroke-width:12}
.ringbox .arc{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset var(--t-ring) var(--ease-standard)}
.legend{display:flex;flex-direction:column;gap:10px;min-width:0}
.legend .it{font-size:var(--fs-footnote);color:var(--label-2)}
.legend .it b{display:block;font-family:var(--font-num);font-size:22px;color:var(--c);font-weight:600;line-height:24px}
.legend .it b small{font-size:13px;font-weight:500}
/* streak chip */
.streak{display:inline-flex;align-items:center;gap:6px;background:var(--fill);border-radius:var(--r-full);padding:6px 12px;font-size:var(--fs-subhead);font-weight:600}
/* slots */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{background:var(--surface-2);border-radius:var(--r-md);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:var(--fs-footnote);color:var(--label-2);position:relative;overflow:hidden;min-height:var(--tap-min)}
.slot .em{font-size:26px}
.slot.empty-slot{background:none;border:1.5px dashed var(--label-3);gap:2px}
.slot.empty-slot .plus{font-size:24px;color:var(--tint);line-height:1}
.slot.empty-slot .lb{font-size:var(--fs-footnote)}
.slot.done{background:var(--surface);box-shadow:inset 0 0 0 2px var(--green);color:var(--label)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:11px;padding:10px 4px 3px;text-align:center}
.tile{display:flex;align-items:center;justify-content:center;font-size:30px;width:100%;height:100%;position:absolute;inset:0}
/* bars */
.nrow{padding:12px 0;border-top:.5px solid var(--separator)}.nrow:first-child{border-top:0}
.nrow .top{display:flex;align-items:baseline;gap:8px}
.nrow .nm{font-size:var(--fs-subhead);font-weight:600}
.nrow .val{margin-left:auto;font-size:var(--fs-footnote);color:var(--label-2);font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:4px;background:var(--fill);margin:8px 0 6px;position:relative;overflow:hidden}
.nrow.faint .bar i{opacity:.45}
.bar i{display:block;height:100%;border-radius:4px;background:var(--c);width:0;transition:width var(--t-ring) var(--ease-standard)}
.bar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--label-2);opacity:.6}
.badge{display:inline-block;font-size:var(--fs-caption);font-weight:600;border-radius:var(--r-sm);padding:2px 8px;color:#fff;background:var(--bc)}
.badge.low{--bc:var(--st-low)}.badge.ok{--bc:var(--st-ok)}.badge.high{--bc:var(--st-high)}.badge.none{--bc:var(--st-none);color:#3c3c43}
.seg{display:flex;background:var(--fill);border-radius:var(--r-md);padding:2px;margin:8px 0 14px}
.seg button{flex:1;min-height:44px;border-radius:10px;font-size:var(--fs-subhead);font-weight:500;color:var(--label)}
.seg button.on{background:var(--seg-on);box-shadow:0 1px 3px rgba(0,0,0,.15);font-weight:600}
@media (prefers-color-scheme:dark){.seg button.on{color:#fff}}
/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:44px;padding:0 14px;border-radius:var(--r-full);background:var(--fill);font-size:var(--fs-subhead);display:inline-flex;align-items:center;justify-content:center}
.chip.on{background:var(--tint);color:#fff;font-weight:600}
.chips.three .chip{flex:1}
/* buttons */
.btn{min-height:50px;border-radius:var(--r-md);background:var(--tint);color:#fff;font-weight:600;font-size:var(--fs-headline);padding:0 20px;display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
.btn.sec{background:var(--fill);color:var(--tint)}.btn.danger{background:var(--fill);color:var(--red)}
.btn.sm{min-height:44px;font-size:var(--fs-subhead);width:auto;padding:0 14px}
.btn[disabled]{opacity:.4}
.link{color:var(--tint);font-size:var(--fs-subhead);min-height:var(--tap-min);display:inline-flex;align-items:center}
/* calendar */
.cal-head{display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.cal-head .ttl{font-size:var(--fs-title3);font-weight:600;flex:1}
.cal-head button{width:44px;height:44px;border-radius:50%;background:var(--fill);font-size:20px;display:flex;align-items:center;justify-content:center}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal .dow{text-align:center;font-size:var(--fs-caption);color:var(--label-2);padding:4px 0}
.day{aspect-ratio:1;border-radius:6px;background:var(--surface);position:relative;overflow:hidden;display:block;min-height:44px}
.day .d{position:absolute;top:4px;left:6px;font-size:14px;font-weight:700;z-index:2}
.day.has .d{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.day.has::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),transparent 50%);z-index:1}
.day img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.day.today .d{background:var(--tint);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;top:2px;left:3px;text-shadow:none}
.day.sel{transform:scale(1.04);z-index:3;box-shadow:0 0 0 2px var(--tint)}
.day.blank{background:none;pointer-events:none}.day.fut{opacity:.7}.day.fut .d{color:var(--label-2)}
.day .mini{position:absolute;right:3px;bottom:3px;width:18px;height:18px;z-index:2}
/* sheet */
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;opacity:0;pointer-events:none;transition:opacity var(--t-sheet) var(--ease-sheet)}
#scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:430px;max-height:92vh;max-height:92dvh;z-index:41;background:var(--bg);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-sheet);transform:translate(-50%,105%);transition:transform var(--t-sheet) var(--ease-sheet);display:flex;flex-direction:column;visibility:hidden}
.sheet.on{transform:translate(-50%,0);visibility:visible}
.sheet.full{height:100vh;height:100dvh;max-height:none;border-radius:0}
.sheet.full .grab{display:none}
.sheet.full .sh-head{padding-top:calc(8px + env(safe-area-inset-top))}
.sheet .sh-body{flex:1;min-height:0}
.sheet .sh-foot{flex:none;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:.5px solid var(--separator)}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:var(--label-3);margin:8px auto 0;flex:none}
.sheet .sh-head{display:flex;align-items:center;padding:8px 16px;flex:none}
.sheet .sh-head h3{flex:1;text-align:center;margin:0;font-size:var(--fs-headline)}
.sheet .sh-head button{min-width:60px;min-height:var(--tap-min);color:var(--tint);font-size:var(--fs-body)}
.sheet .sh-body{overflow:auto;padding:4px 16px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.sheet .sh-foot:not(.hide)+*{}
/* lists */
.list{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--card-gap)}
.li{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 16px;min-height:var(--tap-min);position:relative;width:100%;text-align:left}
.li+.li::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--separator)}
.li .ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;background:var(--fill);flex:none}
.li .tx{flex:1;min-width:0}.li .tx small{display:block;color:var(--label-2);font-size:var(--fs-footnote)}
.li .chev{color:var(--label-3);font-size:18px}
.field{display:block;width:100%;min-height:44px;border-radius:var(--r-md);border:0;background:var(--fill);padding:0 12px;font-size:16px}
/* dish rows in edit */
.dish{background:var(--surface);border-radius:var(--r-md);padding:12px;margin-bottom:10px}
.dish .nm{display:flex;align-items:center;gap:8px;font-weight:600}
.dline{flex:1;min-width:0;text-align:left;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.dline .dnm{font-weight:600}.dline small{color:var(--tint);font-size:var(--fs-footnote);font-weight:500}
.dish .del{width:44px;height:44px;color:var(--red);font-size:18px}
.dish .chips{margin-top:8px}
.nb{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.95);color:#3a3a3c;font-size:13px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.photoprev .nb{position:absolute;transform:translate(-50%,-50%);z-index:3}
.nb.in{flex:none;background:var(--fill);box-shadow:none;color:var(--label)}
.btn.big{min-height:104px;flex-direction:column;gap:6px;font-size:20px;border-radius:var(--r-lg)}
.photoprev{border-radius:var(--r-xl);overflow:hidden;position:relative;margin-bottom:12px;background:var(--fill);aspect-ratio:4/3}
.photoprev img{width:100%;height:100%;object-fit:cover;display:block}
.scan{position:absolute;inset:14px;border-radius:18px;pointer-events:none;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 24px rgba(255,255,255,.6);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.stage{display:flex;gap:6px;justify-content:center;margin:10px 0;font-size:var(--fs-subhead);color:var(--label-2)}
.stage span{opacity:.35;transition:opacity .2s}.stage span.on{opacity:1;color:var(--label);font-weight:600}
/* products */
.pr{display:inline-block;background:var(--pr-bg);color:var(--pr-text);font-size:var(--fs-footnote);font-weight:700;border-radius:var(--r-sm);padding:2px 8px}
.prline{display:flex;gap:8px;align-items:center}.prline .fn{color:var(--pr-text);font-weight:600}
.prnote{font-size:12.5px;line-height:1.4;color:var(--pr-text);margin:3px 0 8px;text-wrap:balance}
.fnlabel{display:inline-block;font-size:var(--fs-footnote);font-weight:600;color:var(--label);background:var(--fill);border-radius:var(--r-sm);padding:3px 8px;margin:6px 0 2px}
details.disp,details.cand{margin-top:8px}
details.disp summary{min-height:44px;display:flex;align-items:center;color:var(--tint);font-size:var(--fs-subhead);cursor:pointer}
details.disp[open] summary{margin-bottom:2px}
details.disp p{margin:6px 0;font-size:var(--fs-footnote);line-height:18px}
details summary::-webkit-details-marker{display:none}details summary{list-style:none}
details.cand summary.btn{cursor:pointer}
.sech{margin:14px 0 4px!important;font-size:15px}
.hero{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--card-pad);margin-bottom:var(--card-gap);border-left:4px solid var(--orange)}
.pcard{border:1px solid var(--separator);border-radius:var(--r-lg);padding:14px;margin-top:10px;background:var(--surface)}
.pcard .meta{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0;font-size:var(--fs-subhead)}
.pcard .meta b{font-family:var(--font-num)}
.note{background:var(--pr-bg);color:var(--pr-text);border-radius:var(--r-md);padding:10px 12px;font-size:var(--fs-footnote);margin-top:8px}
.tip{background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px;margin:8px 0;font-size:var(--fs-subhead)}
.warnbox{background:var(--warn-bg);border-radius:var(--r-md);padding:10px 12px;font-size:var(--fs-subhead);line-height:1.45;margin:8px 0}
.link.blk{display:flex;padding:0;min-height:36px}
.empty{text-align:center;padding:28px 12px;color:var(--label-2)}
.empty .em{font-size:44px;margin-bottom:6px}
.cdots{display:flex;gap:8px}.cdots i{width:22px;height:22px;border-radius:50%;background:var(--fill);display:block}
.cdots i.on{background:var(--c)}
/* confetti */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
#confetti i{position:absolute;top:70px;width:7px;height:10px;border-radius:2px;animation:fall var(--t-celebrate) ease-out forwards}
@keyframes fall{from{opacity:1}to{transform:translate(var(--dx,0),var(--dy,40vh)) rotate(540deg);opacity:0}}
.ringbox.glow svg{animation:glow 1.3s ease-out}
@keyframes glow{0%{filter:drop-shadow(0 0 0 rgba(255,159,10,0))}35%{filter:drop-shadow(0 0 14px rgba(255,159,10,.95)) drop-shadow(0 0 28px rgba(48,209,88,.7))}100%{filter:drop-shadow(0 0 0 rgba(255,159,10,0))}}
#toast{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);background:rgba(30,30,32,.94);color:#fff;border-radius:var(--r-full);padding:10px 18px;font-size:var(--fs-subhead);z-index:70;width:max-content;max-width:calc(100% - 32px);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
#toast.err{background:#D70015}
.welcome{padding:calc(40px + env(safe-area-inset-top)) 24px 40px;text-align:center}
.welcome .logo{font-size:64px}.welcome h1{font-size:30px;margin:12px 0 8px}
.welcome p{color:var(--label-2);margin:0 0 24px}.welcome .btn{margin-bottom:12px}
.foot{padding:20px 4px;color:var(--label-2);font-size:var(--fs-footnote);line-height:18px}
.wk{display:flex;gap:6px;align-items:flex-end;height:90px;margin-top:8px}
.wk div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;height:100%}
.wk i{width:100%;border-radius:6px;background:var(--green);display:block;min-height:4px}
.wk span{font-size:var(--fs-caption);color:var(--label-2)}
.sel-list label{display:flex;align-items:center;gap:10px;min-height:44px}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}label.btn{position:relative}

.link.center{display:flex;width:100%;justify-content:center;margin-bottom:8px}
.shots{display:flex;gap:12px;overflow-x:auto;padding:8px 2px 14px;margin:8px -24px 8px;padding-left:24px;padding-right:24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.shots img{flex:none;width:62%;max-width:250px;border-radius:22px;box-shadow:var(--shadow-card);scroll-snap-align:center;background:var(--fill);aspect-ratio:375/812;object-fit:cover}
.wkline{display:block;width:100%;text-align:left}
.wkline .tx{flex:1;min-width:0;font-size:var(--fs-subhead)}.wkline .chev{color:var(--label-3)}
.bignum{font-family:var(--font-num);font-size:34px;font-weight:700}.bignum small{font-size:15px}
.kv{display:flex;align-items:baseline;gap:12px;margin-top:6px}.kv b{flex:1}.nowrap{white-space:nowrap;font-family:var(--font-num);font-weight:600}
.legend .it{overflow-wrap:normal}
a.li{color:inherit;text-decoration:none}

.sub.plain{text-wrap:wrap;word-break:normal}
details.cand .t-close{display:none}details.cand[open] .t-open{display:none}details.cand[open] .t-close{display:inline}