:root { --ink:#17352c; --muted:#718078; --green:#1d6b4b; --green-dark:#14543b; --mint:#dcecdf; --cream:#f7f4ed; --card:#fffefa; --line:#dfe4dc; --shadow:0 18px 50px rgba(31,55,43,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; }
.ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(2px); pointer-events:none; }
.ambient-one { width:430px; height:430px; right:-190px; top:-170px; background:rgba(210,228,207,.52); }
.ambient-two { width:340px; height:340px; left:-240px; top:380px; background:rgba(234,218,186,.32); }
.shell { width:min(1120px, calc(100% - 40px)); margin:auto; padding-bottom:80px; }
.topbar { height:100px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(30,74,56,.12); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font:800 23px/1 "Manrope",sans-serif; letter-spacing:-.7px; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; border-radius:11px; background:var(--green); color:white; transform:rotate(-3deg); }
.brand-mark svg { width:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.saved-note { display:flex; align-items:center; gap:9px; font-size:13px; color:#718078; }
.saved-dot { width:8px; height:8px; border-radius:50%; background:#56a676; box-shadow:0 0 0 4px rgba(86,166,118,.13); }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; padding:68px 0 52px; }
.eyebrow { margin:0 0 15px; color:#8b9a90; font-size:11px; font-weight:700; letter-spacing:2.2px; }
.hero h1 { margin:0; max-width:680px; font:800 clamp(45px,6vw,73px)/1.04 "Manrope",sans-serif; letter-spacing:-4px; }
.hero h1 em { color:var(--green); font-style:normal; position:relative; }
.hero h1 em::after { content:""; position:absolute; left:2px; right:0; bottom:-4px; height:7px; border-radius:50%; border-top:3px solid #d0a84d; transform:rotate(-2deg); }
.subtitle { margin:25px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.progress-card { flex:0 0 315px; display:flex; align-items:center; gap:18px; margin-bottom:5px; padding:22px; background:rgba(255,254,250,.73); border:1px solid rgba(23,53,44,.1); border-radius:18px; box-shadow:0 10px 34px rgba(46,64,54,.06); }
.progress-ring { --progress:0deg; width:72px; height:72px; flex:none; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--green) var(--progress), #e2e8df 0); position:relative; }
.progress-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:#fffefa; }
.progress-ring span { position:relative; font-weight:800; font-size:16px; }
.progress-card div:last-child { display:flex; flex-direction:column; gap:3px; }
.progress-label { margin:0 0 3px; color:#90a097; font-size:9px; letter-spacing:1.5px; font-weight:700; }
.progress-card strong { font:700 15px "Manrope"; }
.progress-card div span { color:#849188; font-size:12px; }
.add-card { padding:29px 32px 30px; background:var(--card); border:1px solid rgba(23,53,44,.11); border-radius:22px; box-shadow:var(--shadow); }
.section-heading { display:flex; align-items:center; gap:13px; margin-bottom:24px; }
.heading-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--green); background:#e5f0e6; font-size:25px; font-weight:400; }
.section-heading h2 { margin:0; font:700 17px "Manrope"; }
.section-heading p { margin:2px 0 0; color:#8a958e; font-size:12px; }
#add-form { display:grid; grid-template-columns:2.2fr 1.2fr 1.2fr auto; gap:17px; align-items:start; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { color:#65766d; font-size:10px; letter-spacing:1.35px; font-weight:700; }
input,select { width:100%; height:48px; padding:0 14px; color:var(--ink); background:#fbfaf6; border:1px solid #d9ded7; border-radius:10px; outline:none; transition:.18s; }
input::placeholder { color:#a9b1ac; }
input:focus,select:focus { border-color:#4b8a6c; box-shadow:0 0 0 3px rgba(75,138,108,.12); background:white; }
input[aria-invalid="true"] { border-color:#b45454; }
select { appearance:none; background:#fbfaf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2364766d' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field-error { min-height:14px; color:#a83f3f; font-size:11px; }
.primary-button,.secondary-button { height:48px; padding:0 22px; border:0; border-radius:10px; font-weight:700; cursor:pointer; transition:.18s; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:8px; color:white; background:var(--green); box-shadow:0 7px 18px rgba(29,107,75,.2); }
#add-form .primary-button { margin-top:24px; white-space:nowrap; }
.primary-button:hover { background:var(--green-dark); transform:translateY(-1px); }
.primary-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:2; }
.secondary-button { background:#edf1ec; }
.list-section { margin-top:55px; }
.list-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:25px; }
.list-header .eyebrow { margin-bottom:8px; }
.list-header h2 { margin:0; font:700 26px "Manrope"; letter-spacing:-.8px; }
.list-header h2 span { display:inline-block; margin-left:8px; padding:5px 9px; vertical-align:middle; border-radius:20px; color:#728077; background:#e7ebe5; font:600 10px "DM Sans"; letter-spacing:0; }
.clear-button { display:flex; align-items:center; gap:7px; padding:8px 2px; border:0; background:none; color:#7b8981; font-size:12px; cursor:pointer; }
.clear-button svg,.icon-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.clear-button:disabled { opacity:.35; cursor:not-allowed; }
.filter-tabs { display:flex; gap:4px; width:max-content; padding:4px; margin-bottom:18px; background:#e8ebe5; border-radius:11px; }
.filter { padding:8px 14px; border:0; border-radius:8px; color:#738077; background:transparent; font-size:12px; font-weight:600; cursor:pointer; }
.filter span { margin-left:5px; color:#92a097; font-size:10px; }
.filter.active { color:var(--ink); background:white; box-shadow:0 2px 8px rgba(31,54,43,.09); }
.grocery-list { display:flex; flex-direction:column; gap:10px; }
.grocery-item { display:flex; align-items:center; min-height:82px; padding:15px 19px; background:rgba(255,254,250,.88); border:1px solid rgba(23,53,44,.1); border-radius:14px; transition:.2s; }
.grocery-item:hover { transform:translateY(-1px); border-color:#c7d3c9; box-shadow:0 8px 24px rgba(30,52,42,.05); }
.check-button { display:grid; place-items:center; width:24px; height:24px; flex:none; margin-right:17px; padding:0; border:1.5px solid #bcc8bf; border-radius:50%; background:white; cursor:pointer; }
.check-button svg { width:14px; fill:none; stroke:transparent; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.purchased .check-button { background:var(--green); border-color:var(--green); }
.purchased .check-button svg { stroke:white; }
.item-copy { flex:1; min-width:0; }
.item-copy h3 { margin:0 0 6px; font:600 14px "Manrope"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-copy p { display:flex; align-items:center; margin:0; color:#8a968f; font-size:11px; }
.category-dot { width:7px; height:7px; margin-right:7px; border-radius:50%; background:#69a87d; }
.category-bakery { background:#d4a653; }.category-dairyeggs { background:#76a3cc; }.category-drinks { background:#b47db4; }.category-meatfish { background:#d57470; }.category-pantry { background:#c18a5b; }.category-frozen { background:#6db5bf; }.category-household { background:#8395ba; }.category-other { background:#9a9a91; }
.separator { margin:0 7px; }
.purchased .item-copy h3 { color:#88938c; text-decoration:line-through; }
.purchased { background:rgba(248,248,243,.65); }
.item-actions { display:flex; gap:3px; opacity:0; transition:.18s; }
.grocery-item:hover .item-actions,.grocery-item:focus-within .item-actions { opacity:1; }
.icon-button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#7f8d85; font-size:25px; cursor:pointer; }
.icon-button:hover { color:var(--ink); background:#edf0eb; }.icon-button.danger:hover { color:#a84e4e; background:#f8e9e7; }
.empty-state { padding:55px 20px; text-align:center; border:1px dashed #cbd4cc; border-radius:16px; }
.empty-icon { display:grid; place-items:center; width:46px; height:46px; margin:0 auto 14px; border-radius:50%; color:var(--green); background:#e2eee4; font-size:20px; }
.empty-state h3 { margin:0 0 6px; font:700 16px "Manrope"; }.empty-state p { margin:0; color:var(--muted); font-size:13px; }
dialog { width:min(460px,calc(100% - 32px)); padding:0; border:0; border-radius:18px; color:var(--ink); background:var(--card); box-shadow:0 30px 80px rgba(17,42,31,.25); }
dialog::backdrop { background:rgba(13,33,25,.48); backdrop-filter:blur(3px); }
#edit-form { display:flex; flex-direction:column; gap:18px; padding:28px; }
.dialog-header { display:flex; justify-content:space-between; align-items:flex-start; }.dialog-header .eyebrow { margin-bottom:5px; }.dialog-header h2 { margin:0; font:700 23px "Manrope"; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:5px; }
.toast { position:fixed; left:50%; bottom:25px; z-index:20; padding:11px 17px; border-radius:10px; color:white; background:#193f31; font-size:12px; box-shadow:0 10px 30px rgba(0,0,0,.2); transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.22s; }
.toast.show { transform:translate(-50%,0); opacity:1; }
button:focus-visible,a:focus-visible { outline:3px solid rgba(50,119,87,.28); outline-offset:2px; }
@media (max-width:800px) {
  .shell { width:min(100% - 28px,650px); }.topbar { height:78px; }.hero { display:block; padding:45px 0 32px; }.hero h1 { font-size:46px; letter-spacing:-2.6px; }.progress-card { width:100%; margin-top:34px; }.add-card { padding:23px 20px; }#add-form { grid-template-columns:1fr 1fr; }.field-name { grid-column:1/-1; }#add-form .primary-button { margin-top:24px; }.list-section { margin-top:42px; }
}
@media (max-width:520px) {
  .shell { width:calc(100% - 22px); }.saved-note { font-size:0; }.saved-note::after { content:"Saved"; font-size:11px; }.hero { padding-top:38px; }.hero h1 { font-size:39px; }.subtitle { font-size:15px; }.desktop-only { display:none; }.progress-card { padding:17px; }.add-card { border-radius:17px; }#add-form { display:flex; flex-direction:column; }.field { width:100%; }#add-form .primary-button { width:100%; margin-top:0; }.list-header { align-items:flex-start; }.list-header h2 { font-size:22px; }.clear-button { font-size:0; }.clear-button svg { width:19px; }.filter-tabs { width:100%; }.filter { flex:1; }.grocery-item { min-height:76px; padding:13px; }.item-actions { opacity:1; }.icon-button { width:31px; }.separator { margin:0 5px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }