:root {
  --bg:#FBFAF7; --ink:#22251F; --muted:#8A8F82; --line:#E7E4DA;
  --green:#3F7D5B; --green-d:#326449; --card:#FFFFFF; --done:#B9C0AE;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; background:var(--bg); }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);
}
#app {
  max-width:540px; margin:0 auto; min-height:100vh;
  padding:16px 14px calc(80px + env(safe-area-inset-bottom)); position:relative;
}
.loading,.empty { text-align:center; color:var(--muted); padding:60px 20px; }
.emptyEmoji { font-size:34px; display:block; margin-bottom:10px; }

.head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.kicker { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); font-weight:700; }
.title { font-size:30px; margin:2px 0 0; font-weight:800; letter-spacing:-.02em; }
.meBtn { background:#EFEDE5; border:none; color:var(--ink); padding:8px 14px; border-radius:999px;
  font-weight:600; font-size:14px; cursor:pointer; }

.addRow { display:flex; gap:8px; margin-bottom:12px; }
.addInput { flex:1; border:1.5px solid var(--line); background:var(--card); border-radius:14px;
  padding:14px 16px; font-size:16px; outline:none; color:var(--ink); width:100%; }
.addInput:focus { border-color:var(--green); }
.addInput.full { margin-top:8px; }
.addBtn { width:52px; border:none; background:var(--green); color:#fff; font-size:26px; font-weight:600;
  border-radius:14px; cursor:pointer; line-height:1; }
.addBtn:active { background:var(--green-d); }

.mealsBar { margin-bottom:18px; }
.mealsScroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.mealsScroll::-webkit-scrollbar { display:none; }
.mealChip { flex:0 0 auto; background:var(--card); border:1.5px solid var(--line); border-radius:999px;
  padding:9px 15px 9px 12px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; gap:7px; white-space:nowrap; }
.mealChip:active { border-color:var(--green); }
.mealEmoji { font-size:17px; }
.mealsEdit { margin-top:4px; background:none; border:none; color:var(--green); font-weight:600;
  font-size:14px; cursor:pointer; padding:4px 0; }

.list { display:flex; flex-direction:column; gap:8px; }
.row { display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--line);
  border-radius:14px; padding:0 8px 0 14px; min-height:58px; }
.rowMain { flex:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 0; cursor:pointer; min-height:58px; }
.itemName { font-size:17px; font-weight:600; }
.qty { font-size:13px; font-weight:700; color:var(--green); background:#EAF2EC; padding:2px 8px; border-radius:999px; }
.by { font-size:12px; color:var(--muted); width:100%; }
.check { width:26px; height:26px; border-radius:50%; border:2px solid var(--green); background:transparent;
  cursor:pointer; flex:0 0 auto; }
.check.checked { background:var(--done); border-color:var(--done); color:#fff; font-size:15px; line-height:1; }
.row.done { opacity:.7; }
.row.done .itemName { text-decoration:line-through; color:var(--muted); font-weight:500; }
.del { width:34px; height:34px; border:none; background:none; color:#C7C2B5; font-size:24px; cursor:pointer;
  flex:0 0 auto; border-radius:8px; }
.del:active { background:#F3F1EA; }

.doneHeader { display:flex; justify-content:space-between; align-items:center; margin:18px 2px 2px;
  font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.clearDone { background:none; border:none; color:var(--green); font-weight:600; cursor:pointer; font-size:13px;
  text-transform:none; letter-spacing:0; }

.center { text-align:center; padding:60px 8px; }
.logo { font-size:54px; }
.center h1 { font-size:28px; margin:14px 0 6px; }
.sub { color:var(--muted); font-size:15px; max-width:340px; margin:0 auto 22px; line-height:1.5; }
.bigInput { width:100%; border:1.5px solid var(--line); border-radius:14px; padding:15px; font-size:17px;
  text-align:center; outline:none; margin-bottom:12px; background:var(--card); }
.bigInput:focus { border-color:var(--green); }
.primaryBtn { width:100%; background:var(--green); color:#fff; border:none; border-radius:14px; padding:15px;
  font-size:16px; font-weight:700; cursor:pointer; }
.primaryBtn:disabled { opacity:.4; }
.primaryBtn:active { background:var(--green-d); }
.ghostBtn { width:100%; background:#EAF2EC; color:var(--green-d); border:none; border-radius:12px;
  padding:12px; font-weight:700; cursor:pointer; margin-top:8px; }
.err { color:#B4452F; font-size:14px; min-height:20px; margin-bottom:8px; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600; z-index:50; }

.modalBg { position:fixed; inset:0; background:rgba(20,22,18,.45); display:flex; align-items:flex-end;
  justify-content:center; z-index:60; }
.modal { background:var(--bg); width:100%; max-width:540px; border-radius:22px 22px 0 0;
  padding:20px 16px calc(28px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto; }
.modalHead { display:flex; justify-content:space-between; align-items:center; }
.modalHead h2 { font-size:22px; margin:0; }
.modalSub { color:var(--muted); font-size:14px; margin:4px 0 16px; }
.closeX { background:#EFEDE5; border:none; width:34px; height:34px; border-radius:50%; font-size:22px; cursor:pointer; }
.mealList { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.mealEdit { background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:12px 14px; }
.mealEditTop { display:flex; align-items:center; gap:10px; }
.mealEditTop strong { flex:1; font-size:16px; }
.mealIngs { color:var(--muted); font-size:14px; margin-top:6px; }
.newMeal { background:var(--card); border:1.5px dashed var(--line); border-radius:14px; padding:14px; margin-bottom:18px; }
.newMealRow { display:flex; gap:8px; }
.emojiInput { width:54px; text-align:center; font-size:20px; border:1.5px solid var(--line); border-radius:12px; }