* { box-sizing: border-box; }
:root { color-scheme: light; --ink:#20251f; --muted:#788078; --green:#28734a; --pale:#eaf3ec; --line:#e8ece7; }
body { margin:0; background:#f7f8f5; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.app { width:min(100%,560px); min-height:100svh; margin:0 auto; padding:calc(env(safe-area-inset-top) + 28px) 22px calc(env(safe-area-inset-bottom) + 28px); display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.eyebrow { margin:0 0 5px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:1.5px; }
h1 { margin:0; font-size:34px; letter-spacing:-1.2px; }
.text-button { border:0; background:transparent; color:var(--green); font-weight:700; font-size:14px; padding:10px 0 10px 10px; }
.progress-card,.add-card { background:white; border:1px solid var(--line); border-radius:20px; padding:17px; box-shadow:0 4px 18px #24352408; }
.progress-copy { display:flex; justify-content:space-between; gap:10px; font-size:13px; margin-bottom:12px; }
.progress-copy span { color:var(--muted); }
.progress-track { height:7px; background:#edf0ec; border-radius:20px; overflow:hidden; }
#progressBar { height:100%; width:0; background:var(--green); border-radius:20px; transition:width .2s; }
.list-section { margin:27px 0 24px; flex:1; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
h2 { font-size:18px; margin:0; letter-spacing:-.3px; }
#itemCount { color:var(--muted); font-size:13px; }
.items { list-style:none; padding:0; margin:0; }
.item { display:flex; align-items:center; gap:13px; background:white; border:1px solid var(--line); border-radius:15px; padding:15px 14px; margin:9px 0; min-height:62px; }
.item input { appearance:none; -webkit-appearance:none; width:23px; height:23px; border:1.8px solid #bdc8bd; border-radius:50%; flex:0 0 23px; margin:0; display:grid; place-items:center; }
.item input:checked { background:var(--green); border-color:var(--green); }
.item input:checked::after { content:"✓"; color:white; font-size:15px; font-weight:800; }
.item-name { flex:1; font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.quantity { color:#657066; font-size:14px; font-weight:600; background:#f1f4f0; padding:6px 10px; border-radius:9px; }
.item.done .item-name { color:#9aa29a; text-decoration:line-through; }
.item.done .quantity { opacity:.55; }
.delete-item { border:0; background:transparent; color:#a0a8a0; font-size:20px; padding:4px; }
.empty-state { text-align:center; color:var(--ink); font-weight:650; padding:28px 8px; line-height:1.7; }
.empty-state span { color:var(--muted); font-size:14px; font-weight:400; }
.add-card label { display:block; font-size:17px; font-weight:750; }
.hint { color:var(--muted); font-size:13px; line-height:1.5; margin:6px 0 13px; }
textarea { display:block; width:100%; resize:vertical; border:1px solid #dfe5de; border-radius:13px; padding:13px; font:16px/1.5 inherit; font-family:inherit; outline:none; background:#fbfcfa; color:var(--ink); }
textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #28734a18; }
.primary-button { width:100%; margin-top:12px; min-height:52px; border:0; border-radius:14px; background:var(--green); color:white; font-size:16px; font-weight:750; }
.primary-button:active { transform:scale(.99); }
.feedback { min-height:0; margin:8px 0 0; color:var(--green); font-size:13px; }
footer { text-align:center; color:var(--muted); font-size:12px; padding-top:18px; }
@media (min-width:600px) { .app { padding-top:44px; } }