:root { --ink:#17261f; --muted:#63736a; --line:#dce5dd; --paper:#fffdfa; --cream:#f2f0e9; --leaf:#245b45; --leaf-dark:#194331; --lime:#c6df65; --orange:#ee9a64; --shadow:0 18px 45px #1e372313; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,sans-serif; min-height:100vh; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1050px; margin:0 auto; padding:44px 26px 72px; }
.hero { display:flex; align-items:end; justify-content:space-between; padding:8px 4px 43px; }
.eyebrow { font:500 10px/1.1 monospace; color:#6d7f70; letter-spacing:.13em; margin:0 0 9px; }
h1,h2,h3,p { margin-top:0; }
h1 { font:600 clamp(3.3rem,8vw,6.3rem)/.84 Georgia,serif; letter-spacing:-.065em; margin:0; }
h1 span { color:var(--orange); }
.hero-copy { color:var(--muted); font-size:15px; margin:17px 0 0 3px; }
.hero-stat { color:var(--leaf); text-align:right; padding-bottom:3px; }
.hero-stat strong { display:block; font:600 48px/.8 Georgia,serif; letter-spacing:-.05em; }
.hero-stat span { display:block; font:500 11px monospace; color:var(--muted); margin-top:9px; }
.add-panel,.list-panel { background:var(--paper); box-shadow:var(--shadow); }
.add-panel { border-radius:18px 18px 0 0; padding:28px 31px 31px; border-bottom:1px solid var(--line); }
.section-heading { display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
h2 { font-size:20px; letter-spacing:-.035em; margin:0; }
.section-heading p { color:var(--muted); font-size:13px; margin:0; }
.item-form { display:grid; grid-template-columns:2.1fr 1fr 1.2fr auto; gap:12px; align-items:end; }
.field { display:block; min-width:0; }
.field span { color:var(--muted); display:block; font:500 10px monospace; letter-spacing:.07em; margin:0 0 7px 2px; text-transform:uppercase; }
input,select { background:#fafbf8; border:1px solid var(--line); border-radius:8px; color:var(--ink); height:43px; outline:none; padding:0 12px; width:100%; transition:border-color .15s,box-shadow .15s; }
input:focus,select:focus { border-color:#6f9a80; box-shadow:0 0 0 3px #c4ddca8a; }
.add-button { align-items:center; background:var(--leaf); border:0; border-radius:8px; color:white; display:flex; font-weight:600; gap:6px; height:43px; justify-content:center; padding:0 17px; white-space:nowrap; }
.add-button:hover { background:var(--leaf-dark); }.add-button span { font-size:21px; font-weight:400; line-height:0; }
.list-panel { border-radius:0 0 18px 18px; padding:31px; min-height:360px; }
.toolbar,.controls { align-items:center; display:flex; justify-content:space-between; gap:18px; }
.toolbar h2 { font:600 29px/1 Georgia,serif; letter-spacing:-.045em; }
.text-button,.filter { background:transparent; border:0; color:var(--muted); font-size:12px; padding:8px; }
.text-button { color:#a44c3a; }.text-button:hover,.text-button:focus-visible { text-decoration:underline; }
.controls { border-bottom:1px solid var(--line); margin-top:23px; padding-bottom:15px; }
.filters { display:flex; gap:3px; }
.filter { border-radius:20px; font-weight:600; padding:7px 10px; }.filter span { color:#8d9a91; font:10px monospace; margin-left:3px; }
.filter.active { background:#e7eee5; color:var(--leaf); }.filter.active span { color:var(--leaf); }
.search { align-items:center; border:1px solid var(--line); border-radius:7px; display:flex; height:34px; padding:0 9px; width:207px; }
.search svg { fill:none; height:16px; margin-right:5px; stroke:#718176; stroke-width:1.8; width:16px; }.search input { background:transparent; border:0; border-radius:0; box-shadow:none!important; font-size:12px; height:30px; padding:0; }
.results-summary { color:var(--muted); font:11px monospace; margin:16px 0 3px; min-height:14px; }
.grocery-list { list-style:none; margin:0; padding:0; }
.grocery-item { align-items:center; border-bottom:1px solid #edf0eb; display:grid; gap:14px; grid-template-columns:30px minmax(0,1fr) 130px 110px 58px; min-height:67px; padding:10px 6px; }
.check-button { align-items:center; background:transparent; border:1.5px solid #a9b8ae; border-radius:50%; display:flex; height:22px; justify-content:center; padding:0; width:22px; }.check-button:hover { border-color:var(--leaf); }.check-button svg { display:none; height:13px; stroke:white; stroke-width:3; width:13px; }
.grocery-item.purchased .check-button { background:var(--leaf); border-color:var(--leaf); }.grocery-item.purchased .check-button svg { display:block; }.grocery-item.purchased .item-name { color:#829087; text-decoration:line-through; }
.item-name { font-weight:600; font-size:14px; }.item-category { color:var(--muted); font-size:12px; }.quantity { color:#617067; font:11px monospace; }
.item-actions { display:flex; justify-content:flex-end; gap:1px; }.item-actions button,.icon-button { background:transparent; border:0; border-radius:5px; color:#728177; font-size:18px; height:29px; width:29px; }.item-actions button:hover,.icon-button:hover { background:#eef2ed; color:var(--leaf); }.delete-button:hover { color:#b14d3e!important; }
.empty-state { padding:45px 15px 36px; text-align:center; }.empty-icon { color:var(--orange); font-size:27px; }.empty-state h3 { font:600 24px Georgia,serif; margin:9px 0 7px; }.empty-state p { color:var(--muted); font-size:13px; margin:0; }
dialog { background:var(--paper); border:0; border-radius:15px; box-shadow:0 22px 70px #182e2480; color:var(--ink); max-width:500px; padding:0; width:calc(100% - 32px); }dialog::backdrop { background:#16332678; }
dialog form { padding:27px; }.dialog-header { align-items:start; display:flex; justify-content:space-between; margin-bottom:24px; }.dialog-header h2 { font:600 27px Georgia,serif; }.dialog-row { display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:15px; }.dialog-actions { align-items:center; display:grid; gap:9px; grid-template-columns:auto 1fr auto auto; margin-top:28px; }.secondary-button,.danger-button { background:transparent; border:0; border-radius:7px; height:40px; padding:0 11px; }.secondary-button:hover { background:#edf1eb; }.danger-button { color:#a04b3c; }.danger-button:hover { background:#fff0ea; }.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
button:focus-visible { outline:3px solid #9ac5a4; outline-offset:2px; }
@media (max-width:700px) { .app-shell{padding:27px 14px 44px}.hero{padding:8px 8px 31px}.hero-stat strong{font-size:37px}.hero-copy{font-size:13px}.add-panel,.list-panel{padding:23px 18px}.item-form{grid-template-columns:1fr 1fr}.field-name{grid-column:span 2}.add-button{padding:0 13px}.toolbar h2{font-size:26px}.controls{align-items:stretch;flex-direction:column}.search{width:100%}.filters{justify-content:space-between}.filter{padding:7px 6px}.grocery-item{grid-template-columns:28px minmax(0,1fr) auto;gap:9px;min-height:76px}.item-category{grid-column:2;grid-row:2;margin-top:-17px}.quantity{grid-column:3;grid-row:1}.item-actions{grid-column:3;grid-row:2;margin-top:-19px}.results-summary{margin-top:15px}.dialog-actions{grid-template-columns:auto 1fr auto}.dialog-actions .add-button{grid-column:3}.dialog-actions .secondary-button{grid-column:2}.dialog-actions .danger-button{grid-column:1}.dialog-row{grid-template-columns:1fr} }