:root {
  color-scheme: light;
  --ink: #17241f;
  --muted: #75817a;
  --green: #245b42;
  --green-dark: #14231d;
  --mint: #dff2e7;
  --cream: #f5f7f3;
  --line: #e3e9e3;
  --white: #fff;
  --orange: #e5a45b;
  --shadow: 0 8px 28px rgba(28, 54, 40, .07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { background: var(--green-dark); color: white; display:flex; align-items:center; gap:12px; padding: 22px max(20px, calc((100vw - 760px)/2)); padding-top: calc(20px + env(safe-area-inset-top)); }
.brand-mark { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#c9ead6; color:#173e2b; font-weight:900; letter-spacing:-1px; }
h1 { margin:2px 0 0; font-size:1.32rem; letter-spacing:-.04em; }
.eyebrow { margin:0; color:var(--muted); font-size:.67rem; font-weight:800; letter-spacing:.13em; }
.topbar .eyebrow { color:#b6c9bd; }
.install-btn { margin-left:auto; border:1px solid #6c8c78; background:transparent; color:white; border-radius:20px; padding:8px 13px; }
main { max-width:760px; margin:0 auto; padding:20px 16px 36px; }
.date-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 4px 2px 18px; }
h2 { margin:5px 0 0; font-size:1.35rem; letter-spacing:-.035em; }
#datePicker { width:auto; max-width:155px; border:1px solid var(--line); border-radius:12px; padding:10px; color:var(--ink); background:white; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.summary-card, .panel { background:white; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.summary-card { padding:17px 15px; min-width:0; }
.card-label { display:flex; align-items:center; gap:7px; color:#64736a; font-size:.8rem; font-weight:750; }
.dot { width:8px; height:8px; border-radius:50%; background:#6ab78a; }
.protein-card .dot { background:var(--orange); }
.big-number { margin:14px 0 12px; font-size:clamp(1.5rem, 6vw, 2.15rem); font-weight:850; letter-spacing:-.06em; overflow-wrap:anywhere; }
.unit { font-size:.85rem; font-weight:650; color:var(--muted); letter-spacing:0; }
.progress-track { height:7px; border-radius:10px; background:#edf1ed; overflow:hidden; }
.progress-fill { height:100%; width:0; border-radius:10px; background:#4e9b6b; transition:width .25s ease; }
.protein-card .progress-fill { background:#e2a052; }
.small-note { color:var(--muted); font-size:.72rem; line-height:1.45; margin:9px 0 0; }
.panel { margin-top:14px; padding:17px; }
.section-toggle { border:0; background:transparent; width:100%; display:flex; align-items:center; justify-content:space-between; padding:0; color:var(--ink); font-weight:800; text-align:left; }
.section-icon { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#f0f5f0; margin-right:8px; }
.chevron { color:var(--muted); font-size:1.2rem; }
.goals-body { padding-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.goals-body .small-note, .goals-body .secondary-btn { grid-column:1/-1; }
label { display:flex; flex-direction:column; gap:7px; color:#46534b; font-size:.78rem; font-weight:750; min-width:0; }
input, select { width:100%; min-width:0; border:1px solid #dce5dd; border-radius:12px; padding:12px; background:#fbfcfa; color:var(--ink); outline:none; }
input:focus, select:focus { border-color:#4d9a6b; box-shadow:0 0 0 3px rgba(77,154,107,.12); }
.hidden { display:none !important; }
.secondary-btn { border:1px solid #cdded1; background:#f3f8f4; color:var(--green); padding:11px 14px; border-radius:12px; font-weight:800; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.section-heading h2 { font-size:1.3rem; }
.plate-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:var(--mint); color:var(--green); font-size:1.5rem; font-weight:500; }
#foodForm { display:grid; grid-template-columns:1fr 1fr; gap:13px 12px; }
.full-field { grid-column:1/-1; }
.optional { color:#97a199; font-size:.68rem; font-weight:600; }
.photo-field input { padding:9px; font-size:.75rem; }
.photo-help { color:var(--muted); font-weight:500; font-size:.72rem; line-height:1.4; }
.photo-preview { width:100%; max-height:210px; object-fit:cover; border-radius:12px; margin-top:5px; }
.primary-btn { border:0; border-radius:14px; padding:14px 16px; color:white; background:var(--green); font-weight:850; box-shadow:0 5px 12px rgba(36,91,66,.18); }
.primary-btn:active { transform:scale(.99); }
.form-message { min-height:0; margin:8px 0 0; font-size:.78rem; color:var(--green); }
.diary-section { margin-top:26px; }
.diary-heading { margin:0 2px 14px; }
.count-pill { display:inline-grid; place-items:center; vertical-align:middle; min-width:24px; height:24px; border-radius:99px; background:#e8f2eb; color:var(--green); font-size:.72rem; letter-spacing:0; padding:0 7px; }
.text-btn { border:0; background:transparent; color:var(--green); font-size:.78rem; font-weight:800; padding:8px 0 8px 8px; }
.empty-state { border:1px dashed #d4dfd5; border-radius:18px; text-align:center; padding:27px 20px; background:rgba(255,255,255,.55); }
.empty-illustration { font-size:2rem; }
.empty-state h3 { margin:9px 0 5px; font-size:1rem; }
.empty-state p { color:var(--muted); font-size:.8rem; max-width:270px; line-height:1.5; margin:0 auto; }
.food-list { display:grid; gap:10px; }
.food-entry { display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 4px 14px rgba(28,54,40,.04); }
.food-thumb { width:54px; height:54px; object-fit:cover; border-radius:12px; background:#edf3ed; display:grid; place-items:center; font-size:1.35rem; }
.food-thumb.placeholder { color:#65826d; }
.food-title { font-weight:800; font-size:.88rem; overflow-wrap:anywhere; }
.food-meta { margin-top:4px; font-size:.7rem; color:var(--muted); line-height:1.45; }
.food-nutrition { text-align:right; white-space:nowrap; }
.food-nutrition strong { display:block; font-size:.9rem; }
.food-nutrition span { display:block; color:var(--muted); font-size:.7rem; margin-top:3px; }
.delete-btn { grid-column:2/-1; justify-self:end; border:0; background:transparent; color:#a05b50; font-size:.72rem; padding:4px 0 0; }
.macro-summary { margin-top:12px; background:#edf5ef; border-radius:14px; padding:13px 15px; color:#3e5847; font-size:.78rem; display:flex; flex-wrap:wrap; gap:8px 16px; }
.privacy-note { margin-top:20px; display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:15px; background:#eef2ed; color:#66736a; font-size:.72rem; line-height:1.5; }
.privacy-note p { margin:0; }
.privacy-note strong { color:#405348; }
footer { text-align:center; padding:0 20px calc(25px + env(safe-area-inset-bottom)); color:#8b968d; font-size:.7rem; line-height:1.5; }
@media (min-width:600px) {
  main { padding-top:28px; }
  .summary-card { padding:21px; }
  .panel { padding:22px; }
}
@media (max-width:380px) {
  main { padding-left:12px; padding-right:12px; }
  .summary-grid { gap:8px; }
  .summary-card { padding:13px 11px; }
  .food-entry { grid-template-columns:44px 1fr auto; gap:9px; padding:10px; }
  .food-thumb { width:44px; height:44px; }
}