:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f7f3; color: #22332c; }
.app { max-width: 580px; margin: 0 auto; padding: max(36px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.13em; color: #6b8575; margin: 0 0 7px; }
h1 { font-size: clamp(29px, 7vw, 38px); letter-spacing: -0.055em; margin: 0 0 5px; }
.muted { color: #65796c; font-size: 14px; margin: 0; }
.basket { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #e4eee6; font-size: 27px; }
#add-form { display: flex; gap: 10px; margin-bottom: 8px; }
#item-input { min-width: 0; flex: 1; height: 54px; border: 1px solid #d5ded5; border-radius: 14px; background: #fff; color: #22332c; padding: 0 16px; font-size: 16px; outline-offset: 2px; }
#item-input:focus { outline: 2px solid #48885c; border-color: transparent; }
.add-button { background: #35784b; border: none; color: white; width: 54px; height: 54px; border-radius: 14px; font-size: 30px; cursor: pointer; }
.suggestions { background: white; border: 1px solid #d5ded5; border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.suggestion { display: block; width: 100%; text-align: left; padding: 13px 16px; background: transparent; border: 0; color: #25382c; font-size: 16px; cursor: pointer; }
.suggestion + .suggestion { border-top: 1px solid #edf0eb; }
.items { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 13px; background: #fff; padding: 13px 12px; border: 1px solid #ebefea; border-radius: 13px; min-height: 56px; }
.item input[type=checkbox] { appearance: none; flex: none; width: 25px; height: 25px; margin: 0; border: 2px solid #9cb1a1; border-radius: 7px; cursor: pointer; }
.item input[type=checkbox]:checked { background: #35784b; border-color: #35784b; }
.item input[type=checkbox]:checked::after { content: '✓'; display: block; text-align: center; color: white; font-weight: bold; line-height: 21px; }
.item-text { overflow-wrap: anywhere; flex: 1; font-size: 17px; }
.item.done .item-text { color: #8a9a8e; text-decoration: line-through; }
.delete-button { flex: none; border: 0; background: transparent; color: #8a9a8e; font-size: 23px; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; }
.empty { color: #708476; font-size: 15px; line-height: 1.5; margin: 30px 0; text-align: center; }
.clear-button { margin-top: 18px; padding: 9px 0; background: none; border: 0; color: #427850; font-size: 14px; font-weight: 600; cursor: pointer; }
.footnote { color: #839186; font-size: 12px; text-align: center; margin-top: 45px; line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-color-scheme: dark) { body { background:#17211b; color:#eef5ee; } .eyebrow,.muted,.footnote,.empty {color:#a1b7a7;} .basket {background:#283d2d;} #item-input,.item,.suggestions {background:#25362a;color:#f2f7f1;border-color:#405446;} .suggestion {color:#f2f7f1;} .suggestion + .suggestion {border-color:#405446;} .item.done .item-text {color:#94a598;} }