:root{--color-bg: #f8fafc;--color-surface: #ffffff;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-text: #0f172a;--color-muted: #64748b;--color-border: #e2e8f0;--color-danger: #dc2626;--color-warning: #d97706;--color-success: #16a34a;--radius: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .08);--nav-height: 64px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;color:var(--color-text);background:var(--color-bg)}*{box-sizing:border-box}body{margin:0;min-height:100dvh}#root{min-height:100dvh}a{color:var(--color-primary);text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}@media(min-width:768px){.app-shell{padding-bottom:0;flex-direction:row}}.sidebar{background:var(--color-surface);border-bottom:1px solid var(--color-border)}@media(min-width:768px){.sidebar{width:220px;min-height:100dvh;border-bottom:none;border-right:1px solid var(--color-border);position:sticky;top:0}}.sidebar-brand{padding:1rem 1.25rem;font-weight:700;font-size:1.1rem;color:var(--color-primary)}.nav-links{display:flex;overflow-x:auto;gap:.25rem;padding:.5rem}@media(min-width:768px){.nav-links{flex-direction:column;overflow-x:visible;padding:.5rem .75rem 1rem}}.nav-link{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:var(--radius);color:var(--color-muted);white-space:nowrap;font-weight:500}.nav-link.active,.nav-link:hover{background:#eff6ff;color:var(--color-primary)}.main-content{flex:1;padding:1rem;max-width:960px;width:100%;margin:0 auto}@media(min-width:768px){.main-content{padding:1.5rem 2rem}}.page-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem}.page-header h1{margin:0;font-size:1.5rem}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;margin-bottom:.75rem}.card-row{display:flex;align-items:flex-start;gap:.75rem}.card-clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s}.card-clickable:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #00000014}.card-link{display:block;text-decoration:none;color:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.55rem 1rem;border:none;border-radius:var(--radius);background:var(--color-primary);color:#fff;cursor:pointer;font-weight:500}.btn:hover{background:var(--color-primary-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg)}.btn-danger{background:var(--color-danger)}.btn-sm{padding:.35rem .65rem;font-size:.875rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.35rem;font-weight:500;font-size:.9rem}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.55rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius);background:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;background:#eff6ff;color:var(--color-primary)}.badge-warning{background:#fef3c7;color:var(--color-warning)}.badge-success{background:#dcfce7;color:var(--color-success)}.badge-muted{background:#f1f5f9;color:var(--color-muted)}.muted{color:var(--color-muted);font-size:.875rem}.empty-state{text-align:center;padding:2rem 1rem;color:var(--color-muted)}.checkbox-row{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--color-border)}.checkbox-row:last-child{border-bottom:none}.checkbox-row input[type=checkbox]{width:1.25rem;height:1.25rem;margin-top:.15rem;flex-shrink:0}.checkbox-row.checked{opacity:.55;text-decoration:line-through}.checkbox-row.unavailable{border-left:3px solid var(--color-warning);padding-left:.5rem}.shopping-item,.inventory-item{display:flex;align-items:center;gap:.45rem;padding:.4rem .55rem;margin-bottom:.35rem;border-bottom:none}.shopping-item input[type=checkbox]{margin-top:0;width:1.1rem;height:1.1rem}.shopping-item .drag-handle{padding:.1rem;font-size:.9rem}.shopping-item-body,.inventory-item-body{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .45rem;flex:1;min-width:0;line-height:1.3}.shopping-item-primary,.inventory-item-primary{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .35rem;min-width:0}.shopping-item-name,.inventory-item-name{font-weight:600;font-size:.95rem}.shopping-item-qty,.shopping-item-note,.inventory-item-qty{font-size:.82rem;white-space:nowrap}.shopping-item-sources{display:inline-flex;flex-wrap:wrap;gap:.25rem}.shopping-item-badge{white-space:nowrap}.shopping-item-delete,.inventory-item-delete{flex-shrink:0;padding:.2rem .45rem;min-width:1.75rem}@media(min-width:640px){.shopping-item-body,.inventory-item-body{flex-wrap:nowrap;gap:.35rem .5rem}.shopping-item-primary,.inventory-item-primary{flex-wrap:nowrap;flex-shrink:0}.shopping-item-sources{flex:1;min-width:0;overflow:hidden}.shopping-item-sources .tag{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.tag-list{display:flex;flex-wrap:wrap;gap:.35rem}.tag{background:#f1f5f9;padding:.15rem .5rem;border-radius:999px;font-size:.75rem}.search-bar{margin-bottom:1rem}.search-bar input{width:100%;padding:.65rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius)}.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem}.login-card{width:100%;max-width:380px}.error-banner{background:#fef2f2;color:var(--color-danger);padding:.75rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.9rem}.drag-handle{cursor:grab;color:var(--color-muted);padding:.25rem;-webkit-user-select:none;user-select:none}.offline-banner{background:#fef3c7;color:#92400e;text-align:center;padding:.4rem;font-size:.85rem}.autocomplete-list{position:absolute;z-index:10;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-height:200px;overflow-y:auto;margin-top:.25rem}.autocomplete-item{padding:.5rem .75rem;cursor:pointer}.autocomplete-item:hover{background:var(--color-bg)}.autocomplete-wrap{position:relative}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:flex-end;justify-content:center;z-index:100;padding:0}@media(min-width:768px){.modal-overlay{align-items:center;padding:1rem}}.modal{background:#fff;width:100%;max-width:520px;max-height:90dvh;overflow-y:auto;border-radius:var(--radius) var(--radius) 0 0;padding:1.25rem}@media(min-width:768px){.modal{border-radius:var(--radius)}}.modal h2{margin-top:0}.modal-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.ingredient-list{padding:0}.ingredient-list-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1rem .75rem;border-bottom:1px solid var(--color-border)}.ingredient-list-header h2{font-size:1.1rem}.ingredient-row-wrap{border-bottom:1px solid var(--color-border)}.ingredient-row-wrap:last-child{border-bottom:none}.ingredient-row{display:grid;grid-template-columns:1fr 5rem 7rem auto;gap:.5rem;align-items:center;padding:.5rem 1rem}.ingredient-row .form-group{margin-bottom:0}.ingredient-row input,.ingredient-row select{padding:.45rem .6rem;font-size:.9rem}.ingredient-row-actions{display:flex;align-items:center;gap:.25rem}.ingredient-row-toggle{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.8rem;padding:.25rem .35rem;white-space:nowrap}.ingredient-row-toggle:hover{text-decoration:underline}.ingredient-row-details{padding:0 1rem .75rem;background:var(--color-bg)}.ingredient-row-details .form-group{margin-bottom:.65rem}.ingredient-row-details .form-group:last-of-type{margin-bottom:0}.ingredient-row-details label{font-size:.85rem}.ingredient-row-details .tracking-label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;margin-top:.35rem}@media(max-width:640px){.ingredient-row{grid-template-columns:1fr auto auto;grid-template-rows:auto auto}.ingredient-row .ingredient-product{grid-column:1 / -1}.ingredient-row-actions{grid-column:3;grid-row:2;justify-self:end}}.plan-entry-list{display:flex;flex-direction:column;gap:.35rem}.plan-entry{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.plan-entry-header{display:flex;align-items:center;gap:.5rem;width:100%;padding:.6rem .75rem;border:none;background:transparent;cursor:pointer;text-align:left;color:inherit}.plan-entry-header:hover{background:var(--color-bg)}.plan-entry-title{flex:1;font-weight:600;font-size:.95rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plan-entry-chevron{color:var(--color-muted);font-size:.75rem;flex-shrink:0}.plan-entry-body{padding:0 .75rem .75rem;border-top:1px solid var(--color-border)}.plan-entry-note{resize:vertical;min-height:2.5rem}.plan-entry-actions{display:flex;flex-wrap:wrap;gap:.5rem}.plan-delete-list{margin:0 0 1rem;padding-left:1.25rem}.plan-delete-list li{margin-bottom:.25rem}.cook-done-btn{width:100%;margin-top:1rem}
