:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;color:#111;background:#f7f8f5;--green:#30c96b;--muted:#8d918d;--card:#fff}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#fafbf8,#f3f5f1);padding-bottom:calc(92px + env(safe-area-inset-bottom))}
main{max-width:620px;margin:auto}
.page{display:none;padding:42px 20px 24px}
.page.active{display:block}
header{padding:20px 2px 22px}
.eyebrow{margin:0 0 6px;color:var(--green);font-weight:700;font-size:13px;letter-spacing:.12em}
h1{font-size:34px;letter-spacing:-1.2px;margin:0}
h2{font-size:17px;margin:0 0 9px}
.card{background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.035);border-radius:23px;box-shadow:0 12px 32px rgba(26,43,32,.06);padding:22px;margin-bottom:16px}
.hero{text-align:center;padding:26px}
.hero>span,.nutrients span{color:var(--muted);font-size:13px}
.hero strong{display:block;font-size:15px;margin:10px}
.hero strong b{font-size:50px;letter-spacing:-2px}
.progress{height:7px;border-radius:9px;background:#e8ebe7;overflow:hidden;margin:16px 0 10px}
.progress i{display:block;height:100%;width:0;background:var(--green);border-radius:9px;transition:.3s}
.hero small{color:var(--muted)}
.nutrients{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.nutrients div+div{border-left:1px solid #eee}
.nutrients b{display:block;margin-top:7px;font-size:19px}
.blue{color:#3388ec}
.orange{color:#ee9a24}
.purple{color:#aa66d5}
.advice p{color:#6f746f;line-height:1.55;margin:0}
.photo{text-align:center}
.photo img{display:none;width:100%;height:245px;object-fit:cover;border-radius:17px;margin-bottom:14px}
.photo img.show{display:block}
#photo-placeholder{height:190px;display:flex;flex-direction:column;justify-content:center;gap:8px;color:#6f746f}
#photo-placeholder span{font-size:38px}
#photo-placeholder small{color:#aaa}
.primary,.secondary,.save{display:block;width:100%;border:0;border-radius:15px;padding:14px;font-size:16px;font-weight:700}
.primary,.save{background:var(--green);color:white}
.file-button input{display:none}
.secondary{margin-top:10px;background:#eff9f2;color:#21a958}
.secondary:disabled{opacity:.45}
.note{font-size:13px;color:#777;line-height:1.45;margin:12px 2px 0}
.form label{display:block;color:#777;font-size:13px}
.form input{width:100%;border:0;outline:0;background:#f5f6f4;border-radius:13px;padding:13px;margin-top:7px;font-size:17px;color:#111}
.row{display:grid;grid-template-columns:1fr 40px;align-items:end;margin-top:14px}
.row span{text-align:center;padding-bottom:13px;color:#999}
.save{margin-top:22px}
.footnote{color:#959995;font-size:12px;line-height:1.5;padding:0 10px}
.meal{position:relative}
.meal h3{margin:0 0 7px}
.meal .kcal{position:absolute;right:22px;top:22px;color:var(--green);font-weight:700}
.meal p,.meal small{color:#858985}
.meal p{font-size:13px}
.delete{border:0;background:#fff1f1;color:#d64a4a;border-radius:10px;padding:8px 11px;float:right}
.empty{text-align:center;padding:80px 20px;color:#999}
.empty b{display:block;font-size:18px;color:#555;margin:10px}
nav{position:fixed;z-index:5;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,620px);height:calc(76px + env(safe-area-inset-bottom));padding:8px 22px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);background:rgba(250,251,248,.94);backdrop-filter:blur(20px);border-top:1px solid #e9ebe8}
nav button{border:0;background:none;color:#999;font-weight:600}
nav button span{display:block;font-size:24px;margin-bottom:3px}
nav button.active{color:var(--green)}
#toast{position:fixed;left:50%;bottom:105px;transform:translate(-50%,20px);background:#171917;color:#fff;padding:11px 18px;border-radius:20px;opacity:0;transition:.25s;pointer-events:none;z-index:9}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(display-mode:standalone){header{padding-top:30px}
}
.meal-type{border:0;padding:0;margin:0 0 22px}
.meal-type legend{color:#777;font-size:13px;margin-bottom:9px}
.meal-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.meal-options label{cursor:pointer}
.meal-options input{position:absolute;opacity:0;width:1px;height:1px}
.meal-options span{display:block;text-align:center;padding:12px 5px;border-radius:13px;background:#f1f3f0;color:#707570;font-size:15px;font-weight:650;transition:.18s}
.meal-options input:checked+span{background:#e5f8eb;color:#20a957;box-shadow:inset 0 0 0 1.5px var(--green)}
.meal h3 em{font-style:normal;font-size:11px;color:#20a957;background:#e8f8ed;border-radius:9px;padding:4px 7px;margin-left:7px;vertical-align:2px}