:root { --ink:#16332e; --muted:#71827d; --line:#dce7e1; --paper:#fffefa; --cream:#f5f3ea; --green:#176b58; --deep:#104738; --mint:#dff2e8; --coral:#f47c63; --shadow:0 16px 35px rgba(26,57,47,.09); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(135deg,#f1f6ef 0%,#fbfaf4 47%,#e5f0e9 100%); font-family:"DM Sans",Arial,sans-serif; }
button, input, select { font:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid rgba(244,124,99,.65); outline-offset:2px; }
.app-shell { width:min(100% - 32px, 940px); margin:0 auto; padding:58px 0 72px; }
.hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:15px; margin:0 16px 36px; }
.brand-mark { display:grid; place-items:center; width:49px; height:49px; border-radius:16px 16px 16px 4px; color:white; background:var(--coral); box-shadow:5px 6px 0 #ffe1d8; font-size:26px; }
.eyebrow { margin:0 0 4px; color:var(--green); font-size:10px; font-weight:700; letter-spacing:.15em; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Playfair Display",Georgia,serif; } h1 { margin:0; font-size:31px; line-height:1; letter-spacing:-.04em; } h2 { margin:0; font-size:25px; letter-spacing:-.03em; } .hero-copy { margin:0; color:var(--muted); font-size:14px; }
.panel { background:rgba(255,254,250,.92); border:1px solid rgba(255,255,255,.9); border-radius:24px; box-shadow:var(--shadow); }
.add-panel { padding:29px 32px 25px; } .section-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:24px; }
.count { flex:none; margin:0; padding:8px 11px; border-radius:999px; background:var(--mint); color:var(--deep); font-size:13px; font-weight:700; }
.item-form { display:grid; grid-template-columns:minmax(190px,1.6fr) minmax(125px,1fr) minmax(130px,1fr) auto; gap:12px; align-items:end; }
.field { display:block; min-width:0; } .field > span { display:block; margin:0 0 7px 2px; color:var(--muted); font-size:12px; font-weight:700; }
input,select { width:100%; min-height:45px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; padding:0 12px; } input::placeholder { color:#a2b0ac; } select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--green) 50%),linear-gradient(135deg,var(--green) 50%,transparent 50%); background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.form-actions { display:flex; gap:8px; } .button { min-height:45px; border:0; border-radius:11px; padding:0 15px; font-weight:700; white-space:nowrap; } .button-primary { color:#fff; background:var(--green); box-shadow:0 5px 12px rgba(23,107,88,.2); } .button-primary:hover { background:var(--deep); } .button-secondary { color:var(--ink); background:#edf1ed; } .hidden { display:none; } .form-message { min-height:17px; margin:10px 0 0; color:#b3412e; font-size:13px; font-weight:600; }
.list-panel { overflow:hidden; margin-top:22px; } .list-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 26px; border-bottom:1px solid var(--line); }.filters { display:flex; gap:3px; padding:3px; border-radius:10px; background:#edf1ed; }.filter { border:0; border-radius:8px; color:var(--muted); background:transparent; padding:7px 12px; font-size:13px; font-weight:700; }.filter.active { color:var(--deep); background:#fff; box-shadow:0 1px 4px rgba(22,51,46,.12); }.search { display:flex; align-items:center; width:210px; gap:7px; color:var(--muted); }.search input { min-height:38px; padding-left:0; border:0; background:transparent; }.search input:focus-visible { outline-offset:0; }
.item-list { padding:9px 16px 0; }.grocery-item { display:flex; align-items:center; gap:14px; min-height:79px; padding:12px 10px; border-bottom:1px solid #e8eeeb; }.check-button { display:grid; place-items:center; flex:none; width:25px; height:25px; padding:0; border:2px solid #a4b9b0; border-radius:50%; color:transparent; background:transparent; }.grocery-item.purchased .check-button { border-color:var(--green); color:white; background:var(--green); }.item-details { min-width:0; flex:1; }.item-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.item-name { margin:0; font-size:15px; font-weight:700; }.item-quantity { margin:5px 0 0; color:var(--muted); font-size:13px; }.grocery-item.purchased .item-name { color:#879690; text-decoration:line-through; }.category-tag { padding:3px 7px; border-radius:5px; color:var(--green); background:#e9f5ee; font-size:10px; font-weight:700; }.item-actions { display:flex; gap:5px; opacity:.72; }.grocery-item:hover .item-actions,.grocery-item:focus-within .item-actions { opacity:1; }.icon-button { width:34px; height:34px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:20px; }.icon-button:hover { color:var(--deep); background:#edf4ef; }.delete-button:hover { color:#b3412e; background:#fff0ec; }.list-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 26px; background:#f8faf7; color:var(--muted); font-size:13px; }.list-footer p { margin:0; }.text-button { border:0; padding:3px 0; color:var(--green); background:transparent; font-size:13px; font-weight:700; }.text-button:hover { color:var(--deep); text-decoration:underline; }.text-button:disabled { color:#a8b5b0; cursor:not-allowed; text-decoration:none; }
.empty-state { display:grid; place-items:center; min-height:205px; padding:30px; text-align:center; }.empty-icon { margin-bottom:12px; color:var(--coral); font-size:35px; }.empty-state h3 { margin:0 0 6px; font-family:"Playfair Display",Georgia,serif; font-size:21px; }.empty-state p { max-width:300px; margin:0; color:var(--muted); font-size:14px; 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 (max-width:760px) { .app-shell { width:min(100% - 24px,600px); padding-top:29px; }.hero { grid-template-columns:auto 1fr; margin:0 5px 26px; }.hero-copy { grid-column:1/-1; padding-top:2px; }.add-panel { padding:23px 18px 17px; border-radius:19px; }.item-form { grid-template-columns:1fr 1fr; }.field-name { grid-column:1/-1; }.form-actions { grid-column:1/-1; }.button-primary { flex:1; }.list-toolbar { flex-direction:column; align-items:stretch; padding:16px; gap:13px; }.filters { align-self:flex-start; }.search { width:100%; padding:0 6px; border:1px solid var(--line); border-radius:10px; }.search input { min-height:38px; }.item-list { padding-inline:9px; }.list-footer { padding:16px; } }
@media (max-width:420px) { .hero { gap:11px; }.brand-mark { width:42px; height:42px; font-size:21px; } h1 { font-size:27px; } h2 { font-size:22px; }.section-heading { margin-bottom:18px; }.item-form { grid-template-columns:1fr; }.field-name { grid-column:auto; }.form-actions { grid-column:auto; }.grocery-item { gap:10px; }.category-tag { display:none; }.item-actions { opacity:1; }.list-footer { align-items:flex-start; flex-direction:column; gap:9px; } }