:root{--bg-page:#faf8f5;--bg-card:#fff;--bg-subtle:#f3efe8;--text-primary:#1b241f;--text-secondary:#536058;--text-muted:#78847c;--brand-green:#1e4d3b;--brand-green-hover:#15392b;--brand-green-light:#e6f2ec;--accent-terracotta:#d96b43;--danger-red:#b92b27;--danger-bg:#fdeaea;--border-light:#e5dfd5;--border-focus:#1e4d3b;--shadow-sm:0 2px 6px #1b241f0a;--shadow-md:0 8px 24px #1b241f0f;--radius-sm:8px;--radius-md:12px;--radius-lg:16px}*,:before,:after{box-sizing:border-box}body{background-color:var(--bg-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 15% 10%,#1e4d3b0a 0%,#0000 45%);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-light);z-index:20;background:#ffffffe6;position:sticky;top:0}.header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;max-width:1140px;margin:0 auto;padding:.9rem 1.25rem;display:flex}.brand-group{align-items:center;gap:.85rem;display:flex}.brand-logo svg{width:40px;height:40px;display:block}.brand-title{letter-spacing:-.02em;color:var(--brand-green);margin:0;font-size:1.35rem;font-weight:800}.brand-subtitle{color:var(--text-secondary);margin:0;font-size:.82rem}.header-badges{align-items:center;gap:.75rem;display:flex}.remaining-pill{background:var(--brand-green-light);color:var(--brand-green);border-radius:999px;align-items:center;gap:.45rem;padding:.4rem .85rem;font-size:.86rem;font-weight:700;display:inline-flex}.pill-dot{background:var(--brand-green);border-radius:50%;width:8px;height:8px}.shortcut-hint{color:var(--text-muted);font-size:.78rem}.shortcut-hint kbd{background:var(--bg-subtle);border:1px solid var(--border-light);color:var(--text-primary);border-radius:4px;padding:.1rem .35rem;font-family:inherit;font-weight:600}.app-main{grid-template-columns:360px 1fr;align-items:start;gap:1.5rem;width:100%;max-width:1140px;margin:0 auto;padding:1.5rem 1.25rem 3rem;display:grid}.sidebar-column{flex-direction:column;gap:1.25rem;display:flex;position:sticky;top:5.2rem}.list-column{flex-direction:column;gap:1rem;min-width:0;display:flex}.card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.25rem}.section-title{color:var(--text-primary);margin:0 0 .25rem;font-size:1.05rem;font-weight:700}.progress-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.progress-stats{color:var(--text-secondary);margin:0;font-size:.86rem}.progress-percentage-badge{background:var(--bg-subtle);color:var(--brand-green);border-radius:var(--radius-sm);padding:.35rem .65rem;font-size:1rem;font-weight:800}.progress-track{background:var(--bg-subtle);border-radius:999px;width:100%;height:10px;margin-bottom:.9rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--brand-green), #2d8a64);border-radius:999px;height:100%;transition:width .25s}.progress-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.count-breakdown{color:var(--text-secondary);align-items:center;gap:.45rem;font-size:.84rem;display:flex}.btn-clear-purchased{border:1px solid var(--border-light);color:var(--danger-red);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:.35rem .7rem;font-size:.8rem;font-weight:600;transition:background .15s,border-color .15s}.btn-clear-purchased:hover:not(:disabled){background:var(--danger-bg);border-color:#f3c2c6}.btn-clear-purchased:disabled{color:var(--text-muted);opacity:.55;cursor:not-allowed}.add-form{flex-direction:column;gap:.95rem;margin-top:.75rem;display:flex}.form-field{flex-direction:column;gap:.35rem;display:flex}.form-row-split{grid-template-columns:1fr 1.15fr;gap:.75rem;display:grid}.field-label{color:var(--text-primary);font-size:.82rem;font-weight:600}.text-input,.select-input{width:100%;color:var(--text-primary);border:1.5px solid var(--border-light);border-radius:var(--radius-sm);background:#fff;padding:.6rem .75rem;font-family:inherit;font-size:.92rem;transition:border-color .15s,box-shadow .15s}.text-input:focus,.select-input:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px #1e4d3b24}.input-error{border-color:var(--danger-red);background:snow}.error-message{color:var(--danger-red);margin:.15rem 0 0;font-size:.78rem;font-weight:600}.quantity-control{align-items:stretch;display:flex}.qty-input{text-align:center;border-radius:0;padding-left:.4rem;padding-right:.4rem}.qty-step-btn{background:var(--bg-subtle);border:1.5px solid var(--border-light);color:var(--text-primary);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:34px;font-size:1rem;font-weight:700;display:inline-flex}.qty-step-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm);border-right:none}.qty-step-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}.qty-step-btn:hover{background:#e6e0d5}.btn-primary-add{background:var(--brand-green);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.5rem;margin-top:.2rem;padding:.72rem 1rem;font-size:.95rem;font-weight:700;transition:background .15s,transform .1s;display:inline-flex}.btn-primary-add:hover{background:var(--brand-green-hover)}.btn-icon{width:18px;height:18px}.toolbar-card{flex-direction:column;gap:.85rem;padding:.95rem 1.15rem;display:flex}.toolbar-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.85rem;display:flex}.status-filter-tabs{background:var(--bg-subtle);border-radius:var(--radius-md);gap:.25rem;padding:.25rem;display:inline-flex}.filter-tab{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;padding:.45rem .85rem;font-size:.86rem;font-weight:600;transition:all .15s;display:inline-flex}.filter-tab.active{color:var(--brand-green);box-shadow:var(--shadow-sm);background:#fff}.tab-count{color:inherit;background:#1e4d3b1a;border-radius:999px;padding:.05rem .42rem;font-size:.75rem}.search-box{flex:1;min-width:190px;max-width:280px;position:relative}.search-icon{width:16px;height:16px;color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:.65rem;transform:translateY(-50%)}.search-input{border:1.5px solid var(--border-light);border-radius:var(--radius-sm);background:#fff;width:100%;padding:.48rem 2rem .48rem 2.1rem;font-size:.86rem}.search-input:focus{border-color:var(--border-focus);outline:none}.clear-search-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0 .25rem;font-size:1.1rem;position:absolute;top:50%;right:.4rem;transform:translateY(-50%)}.category-pills-bar{align-items:center;gap:.4rem;padding-bottom:.15rem;display:flex;overflow-x:auto}.category-pill{background:var(--bg-page);border:1px solid var(--border-light);color:var(--text-secondary);white-space:nowrap;cursor:pointer;border-radius:999px;padding:.3rem .7rem;font-size:.78rem;font-weight:600;transition:all .15s}.category-pill.active{background:var(--brand-green);border-color:var(--brand-green);color:#fff}.grocery-list{flex-direction:column;gap:.65rem;margin:0;padding:0;list-style:none;display:flex}.grocery-item-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,background .15s}.grocery-item-card:hover{box-shadow:var(--shadow-md);border-color:#cfc6b8}.grocery-item-card.is-purchased{background:#f9f7f3;border-color:#ebe6dd}.grocery-item-row{align-items:center;gap:.9rem;padding:.9rem 1.1rem;display:flex}.checkbox-wrapper{cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.item-checkbox{opacity:0;cursor:pointer;width:24px;height:24px;margin:0;position:absolute}.custom-checkbox{color:#0000;background:#fff;border:2px solid #9aa69e;border-radius:7px;justify-content:center;align-items:center;width:23px;height:23px;transition:all .15s;display:inline-flex}.custom-checkbox svg{width:14px;height:14px}.item-checkbox:checked+.custom-checkbox{background:var(--brand-green);border-color:var(--brand-green);color:#fff}.item-checkbox:focus-visible+.custom-checkbox{box-shadow:0 0 0 3px #1e4d3b40}.item-details{cursor:pointer;flex-direction:column;flex:1;gap:.3rem;min-width:0;display:flex}.item-primary-line{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.item-name{color:var(--text-primary);word-break:break-word;font-size:.98rem;font-weight:600;transition:color .15s}.is-purchased .item-name{color:var(--text-muted);text-decoration:line-through}.item-qty-badge{color:var(--text-secondary);background:var(--bg-subtle);border-radius:6px;padding:.15rem .55rem;font-size:.78rem;font-weight:700}.item-meta-line{align-items:center;gap:.5rem;display:flex}.item-category-chip{border:1px solid #0000;border-radius:999px;align-items:center;gap:.32rem;padding:.14rem .55rem;font-size:.74rem;font-weight:600;display:inline-flex}.cat-icon{width:13px;height:13px}.item-actions{flex-shrink:0;align-items:center;gap:.4rem;display:flex}.icon-btn{border:1px solid var(--border-light);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;align-items:center;gap:.3rem;padding:.38rem .6rem;font-size:.78rem;font-weight:600;transition:all .15s;display:inline-flex}.icon-btn svg{width:15px;height:15px}.edit-btn:hover{background:var(--bg-subtle);color:var(--text-primary)}.delete-btn:hover{background:var(--danger-bg);color:var(--danger-red);border-color:#f3c2c6}.edit-item-form{flex-direction:column;gap:.85rem;padding:1rem 1.1rem;display:flex}.edit-fields-grid{grid-template-columns:1.6fr .9fr 1.1fr;gap:.75rem;display:grid}.edit-actions{justify-content:flex-end;align-items:center;gap:.5rem;display:flex}.btn-save{background:var(--brand-green);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.48rem .95rem;font-size:.84rem;font-weight:700}.btn-save:hover{background:var(--brand-green-hover)}.btn-cancel{background:var(--bg-subtle);color:var(--text-primary);border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;padding:.48rem .9rem;font-size:.84rem;font-weight:600}.empty-state-card{text-align:center;padding:2.75rem 1.5rem}.empty-illustration svg{width:64px;height:64px;margin-bottom:.6rem}.empty-title{color:var(--text-primary);margin:0 0 .35rem;font-size:1.12rem;font-weight:700}.empty-description{max-width:380px;color:var(--text-secondary);margin:0 auto 1.25rem;font-size:.9rem}.empty-actions{flex-wrap:wrap;justify-content:center;gap:.65rem;display:flex}.btn-secondary{background:var(--brand-green);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.58rem 1rem;font-size:.86rem;font-weight:600}.btn-outline{color:var(--brand-green);border:1.5px solid var(--brand-green);border-radius:var(--radius-sm);cursor:pointer;background:#fff;padding:.55rem 1rem;font-size:.86rem;font-weight:600}@media (width<=880px){.app-main{grid-template-columns:1fr}.sidebar-column{position:static}.shortcut-hint{display:none}}@media (width<=560px){.form-row-split,.edit-fields-grid{grid-template-columns:1fr}.search-box{width:100%;max-width:100%}.status-filter-tabs{justify-content:space-between;width:100%}.filter-tab{flex:1;justify-content:center}.btn-text-label{display:none}}