:root{
  --ink:#4A2340;--ink2:#7A5A6E;--faint:#A88A99;--tab:#B79AAA;
  --pink:#E85A8F;--pink-h:#D9467E;--pink-d:#C2457A;--pink-s:#FFE3EC;--pink-o:#F3BFD1;
  --seg:#FBE4EC;--line:#F6DCE4;--hair:#F8E3EA;--minus:#F7EBEF;--chk:#EBC6D3;--track:#FBE9EF;
  --bg:#FFF8F6;
  --green:#E4F5EA;--green-t:#2F7A50;--yellow:#FFF1D6;--yellow-t:#9A6512;
  --lilac:#EFE8FF;--lilac-d:#9B7FE0;--lilac-t:#7A62B8;
  --mp:#9B7FE0;--mc:#FFB38A;--mg:#F2C46B;
  --shadow:0 14px 30px -22px rgba(194,69,122,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Quicksand',system-ui,-apple-system,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body.locked{overflow:hidden}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
input::placeholder{color:#C9AEBB}
[hidden]{display:none!important}

#app{max-width:480px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 112px)}
.stack{display:flex;flex-direction:column;gap:14px}
.stack.lg{gap:16px}
.stack.sm{gap:8px}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

.kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-d)}
.kicker.muted{color:var(--faint)}
.fred{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.01em}
.h-head{font-family:'Fredoka',sans-serif;font-weight:500;font-size:28px;line-height:1.15;text-wrap:pretty}
.h-big{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.01em;font-size:38px;line-height:1.04;text-wrap:pretty}
.h-card{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.01em;font-size:24px;line-height:1.1}
.accent{color:var(--pink)}
.t15{font-size:15px;font-weight:700}
.t14{font-size:14px;font-weight:700}
.t13{font-size:13px;font-weight:700}
.body{font-size:14px;font-weight:500;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.small{font-size:12px;font-weight:500;color:var(--faint);line-height:1.45;text-wrap:pretty}
.small.b{font-weight:600}
.center{text-align:center}
.note{font-size:12px;font-weight:500;line-height:1.5;color:var(--faint);text-align:center;padding:4px 10px;text-wrap:pretty}

.card{background:#fff;border-radius:26px;box-shadow:var(--shadow)}
.pad{padding:16px 18px}
.box{border-radius:24px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.box.pink{background:var(--pink-s)}
.box.plain{background:#fff;border:1px solid var(--line)}
.box.muted{background:var(--minus)}
.box.yellow{background:var(--yellow)}
.box.green{background:var(--green)}
.box.lilac{background:var(--lilac)}
.box .ttl{font-size:16px;font-weight:700;line-height:1.3;text-wrap:pretty}

.hero{background:var(--pink);border-radius:28px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;color:#fff;box-shadow:0 22px 40px -24px rgba(232,90,143,.9)}
.hero .num{font-family:'Fredoka',sans-serif;font-weight:600;font-size:52px;line-height:.9;letter-spacing:-.01em}
.hero .pct{font-size:13px;font-weight:700;background:rgba(255,255,255,.22);border-radius:999px;padding:4px 10px}
.hero .bar{height:10px;background:rgba(255,255,255,.3)}
.hero .bar>i{background:#fff}

.bar{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:999px;transition:width 1100ms cubic-bezier(.22,1,.36,1)}
.macro{display:flex;flex-direction:column;gap:6px}
.macro .l{font-size:12px;font-weight:600;color:var(--ink2)}
.macro .v{font-size:18px;font-weight:700}
.macro .v small{font-size:12px;font-weight:600;color:var(--faint)}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:999px;background:var(--seg)}
.seg button{min-height:42px;border:none;border-radius:999px;font-size:14px;font-weight:700;background:transparent;color:var(--faint);transition:background 240ms ease;padding:0 12px}
.seg.sm button{min-height:34px;font-size:13px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 6px 14px -8px rgba(232,90,143,.6)}

.btn{min-height:44px;padding:0 20px;border:none;border-radius:999px;background:var(--pink);color:#fff;font-size:14px;font-weight:700;box-shadow:0 12px 22px -12px rgba(232,90,143,.8)}
.btn:active{background:var(--pink-h)}
.btn.big{min-height:56px;font-size:16px;width:100%;box-shadow:0 18px 32px -18px rgba(232,90,143,.9)}
.btn.off{background:var(--minus);color:var(--tab);box-shadow:none}
.btn-o{min-height:40px;padding:0 16px;border:2px solid var(--pink-o);border-radius:999px;background:#fff;color:var(--pink-d);font-size:13px;font-weight:700;white-space:nowrap}
.btn-o:active{background:var(--pink-s)}
.btn-o.full{width:100%;min-height:48px}
.link{min-height:44px;border:none;background:none;font-size:14px;font-weight:700;color:var(--pink-d);padding:0 4px;text-align:left}
.link.muted{color:var(--ink2);font-weight:600}
.round{width:36px;height:36px;border-radius:999px;border:none;background:var(--seg);color:var(--pink-d);font-size:18px;font-weight:700;display:grid;place-items:center;line-height:1}
.round:disabled{opacity:.35}

.chip{flex-shrink:0;min-height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;background:#fff;color:var(--ink);border:2px solid var(--line)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.p{min-height:40px}
.chip.p.on{background:var(--pink);border-color:var(--pink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.hscroll::-webkit-scrollbar{display:none}
.tag{font-size:12px;font-weight:700;border-radius:999px;padding:5px 10px;white-space:nowrap}
.tag.pink{background:var(--pink-s);color:var(--pink-d)}
.tag.green{background:var(--green);color:var(--green-t)}
.tag.yellow{background:var(--yellow);color:var(--yellow-t)}
.tag.muted{background:var(--minus);color:var(--ink2)}

.inp{width:100%;height:48px;border-radius:14px;border:2px solid var(--line);background:#fff;padding:0 14px;font-size:16px;font-weight:600;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.inp:focus{border-color:var(--pink)}
.inp.pill{border-radius:999px;padding:0 18px}
select.inp{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23C2457A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/18px}
.lbl{display:flex;flex-direction:column;gap:6px;min-width:0}
.lbl>span{font-size:12px;font-weight:700;color:var(--ink2)}

.meal{padding:16px 16px 6px;display:flex;flex-direction:column}
.meal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:0 2px 8px}
.item{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--hair)}
.item .n{font-size:14px;font-weight:700;text-wrap:pretty}
.item .s{font-size:12px;font-weight:500;color:var(--faint);text-wrap:pretty}
.step{width:40px;height:40px;border-radius:999px;border:none;background:var(--minus);font-size:20px;font-weight:700;line-height:1;color:var(--ink)}
.step.plus{background:var(--pink-s);color:var(--pink-d)}
.step.lg{width:48px;height:48px;font-size:24px}
.qty{min-width:44px;text-align:center;font-size:13px;font-weight:700}
.add-row{min-height:44px;border:none;border-top:1px solid var(--hair);background:none;font-size:14px;font-weight:700;color:var(--pink-d);text-align:left;padding:4px 2px 0}

.quick{min-height:56px;border-radius:20px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:2px solid var(--line);transition:background 240ms ease}
.quick.on{background:var(--pink-s);border-color:var(--pink-s)}
.dot{width:24px;height:24px;border-radius:999px;flex-shrink:0;display:grid;place-items:center;border:2px solid var(--chk)}
.quick.on .dot,.dot.on{background:var(--pink);border-color:var(--pink)}
.chk{width:26px;height:26px;border-radius:999px;flex-shrink:0;display:grid;place-items:center;border:2px solid var(--chk);background:#fff}
.chk.on{background:var(--pink);border-color:var(--pink)}
.check-row{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 0;border:none;background:none;text-align:left}
.sep{height:1px;background:var(--hair)}

.feel{min-height:64px;border-radius:20px;padding:10px 8px;font-size:14px;font-weight:700;line-height:1.2;background:#fff;border:2px solid var(--line);transition:background 240ms ease}
.feel.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.feel.on.alert{background:var(--pink);border-color:var(--pink)}

.list{padding:0 16px}
.list>*{border-bottom:1px solid var(--hair)}
.list>*:last-child{border-bottom:none}
.li{width:100%;display:flex;align-items:center;gap:10px;padding:12px 0;border-left:none;border-right:none;border-top:none;background:none;text-align:left;color:var(--ink)}
.li .n{font-size:15px;font-weight:700;text-wrap:pretty}
.li .s{font-size:12px;font-weight:500;color:var(--faint);text-wrap:pretty}

.stat{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.stat .l{font-size:12px;font-weight:600;color:var(--ink2)}
.stat .v{font-family:'Fredoka',sans-serif;font-weight:600;font-size:28px;line-height:1;letter-spacing:-.01em}
.stat .v small{font-size:14px}

.chart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:172px;position:relative;padding-top:8px}
.chart .col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;border:none;background:none;padding:0}
.chart .b{width:100%;max-width:30px;border-radius:10px 10px 6px 6px;background:var(--pink-s);min-height:4px}
.chart .b.ok{background:var(--pink)}
.chart .b.today{outline:2px solid var(--pink-d);outline-offset:2px}
.chart .d{font-size:11px;font-weight:700;color:var(--faint)}
.chart .goal{position:absolute;left:0;right:0;border-top:2px dashed var(--pink-o);pointer-events:none}

.photos{display:flex;gap:8px;overflow-x:auto}
.photos img{width:84px;height:112px;object-fit:cover;border-radius:16px;flex-shrink:0}

#tabs{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 4px calc(env(safe-area-inset-bottom) + 6px);border-top:1px solid var(--hair);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:4}
#tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:4px 0;min-height:44px;color:var(--tab)}
#tabs button.on{color:var(--pink)}
#tabs span{font-size:11px;font-weight:700;white-space:nowrap}

.toast{position:fixed;left:20px;right:20px;bottom:calc(env(safe-area-inset-bottom) + 84px);max-width:440px;margin:0 auto;background:var(--ink);color:var(--bg);border-radius:999px;padding:13px 20px;font-size:14px;font-weight:700;text-align:center;box-shadow:0 24px 44px -24px rgba(74,35,64,.7);z-index:30;animation:pop .3s ease}
.overlay{position:fixed;inset:0;background:rgba(74,35,64,.32);z-index:10;display:flex;flex-direction:column;justify-content:flex-end}
.overlay .shade{flex:1}
.sheet{height:calc(92% - env(safe-area-inset-top));max-width:520px;width:100%;margin:0 auto;background:var(--bg);border-radius:32px 32px 0 0;display:flex;flex-direction:column;box-shadow:0 -20px 50px -30px rgba(74,35,64,.6)}
.enter .sheet{animation:up .3s cubic-bezier(.22,1,.36,1)}
.enter{animation:fade .3s ease}
.grab{display:flex;justify-content:center;padding:10px 0 4px}
.grab span{width:40px;height:5px;border-radius:999px;background:var(--chk)}
.sheet-top{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 8px 22px;gap:8px;min-height:52px}
.sheet-fixed{padding:0 20px 10px;display:flex;flex-direction:column;gap:10px}
.sheet-scroll{flex:1;overflow-y:auto;padding:0 20px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sheet-scroll::-webkit-scrollbar{display:none}
.dashed{min-height:52px;border-radius:20px;border:2px dashed var(--chk);background:#fff;font-size:14px;font-weight:700;color:var(--pink-d);text-align:left;padding:0 16px;flex-shrink:0}

@keyframes win{0%{transform:scale(.92);opacity:0}60%{transform:scale(1.03);opacity:1}100%{transform:none}}
.goal-win{animation:win .52s cubic-bezier(.34,1.4,.64,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{background:rgba(74,35,64,0)}}
@keyframes pop{from{transform:translateY(8px);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}