*{box-sizing:border-box} :root{--bg:#f4f6f8;--surface:#fff;--surface2:#eef1f4;--text-primary:#18212b;--text-secondary:#687482;--primary-color:#2563eb;--accent:#2563eb;--danger:#dc2626;--border:#dfe4ea;--shadow:0 8px 28px rgba(16,24,40,.08)}
body{margin:0;background:var(--bg);color:var(--text-primary);font:15px/1.45 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}h1,h2,h3,p{margin:0}h2{font-size:1.7rem}h3{font-size:1.05rem}.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:20;height:72px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:10px 18px}.topbar small{color:var(--text-secondary);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.topbar h1{font-size:1.1rem}.icon-button{width:40px;height:40px;border-radius:10px;background:var(--surface2);color:var(--text-primary);font-size:20px}
#side-menu{position:fixed;z-index:40;inset:0 auto 0 0;width:290px;background:#fff;transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow);display:flex;flex-direction:column}#side-menu.open{transform:none}#side-menu-overlay{position:fixed;z-index:35;inset:0;background:rgba(0,0,0,.32);display:none}#side-menu-overlay.open{display:block}.side-header{padding:18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);font-size:1.2rem}.side-header strong{letter-spacing:.04em}.side-menu nav{padding:10px}.menu-item{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:13px 16px;background:transparent;border-radius:10px;color:var(--text-primary);margin:3px 0}.menu-item.active{background:#eaf0ff;color:var(--primary-color)}.side-footer{margin-top:auto;padding:12px;border-top:1px solid var(--border)}
main{max-width:1100px;margin:0 auto;padding:24px 18px 60px}.app-view{display:none}.app-view.active{display:block}.view-intro{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px}.view-intro p{color:var(--text-secondary);margin-top:5px}.eyebrow{display:block;font-size:.7rem;letter-spacing:.12em;font-weight:800;color:var(--primary-color);margin-bottom:4px}
.primary-button,.secondary-button,.danger-outline{border-radius:9px;padding:10px 14px;font-weight:700;white-space:nowrap}.primary-button{background:var(--primary-color);color:#fff}.secondary-button{background:var(--surface2);color:var(--text-primary);border:1px solid var(--border)}.danger-outline{background:transparent;color:var(--danger);border:1px solid #fecaca;margin-top:18px}.small-button{padding:7px 9px;font-size:.8rem}
.category-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:12px}.category-tab{padding:9px 14px;background:#e9edf2;border-radius:999px;color:var(--text-secondary);white-space:nowrap}.category-tab.active{background:var(--primary-color);color:#fff}.drink-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.drink-card{min-height:115px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 3px 12px rgba(16,24,40,.04);transition:.15s}.drink-card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}.drink-card.checked{border-color:#93b4ff}.drink-card.pending{opacity:.75}.drink-name{font-weight:800;font-size:1.03rem;display:flex;justify-content:space-between;gap:8px}.drink-count{color:var(--primary-color)}.drink-ingredients{font-size:.78rem;color:var(--text-secondary);margin-top:9px}.drink-pending{font-size:.75rem;color:var(--primary-color);margin-top:12px}.drink-pending span{text-decoration:underline;font-weight:800}
.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.metric,.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 3px 12px rgba(16,24,40,.03)}.metric span{display:block;color:var(--text-secondary);font-size:.78rem}.metric strong{font-size:1.25rem;margin-top:4px;display:block}.progress-card{margin-top:10px}.card-heading,.section-title,.form-actions,.manager-actions,.calc-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.progress-track{height:9px;background:var(--surface2);border-radius:999px;overflow:hidden;margin:14px 0 7px}.progress-track>div{height:100%;background:var(--primary-color);width:0;transition:width .2s}.progress-card p,.progress-card small{color:var(--text-secondary)}
.manager-list{display:flex;flex-direction:column;gap:9px}.manager-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px}.manager-row-info{min-width:0;flex:1}.manager-row-info strong{display:block}.manager-row-info small{display:block;color:var(--text-secondary);margin-top:3px}.manager-actions{flex-shrink:0}.recipe-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.recipe-badge{font-size:.66rem;padding:3px 7px;border-radius:999px;background:var(--surface2);color:var(--text-secondary);font-weight:800}.recipe-badge.is-on-menu{background:#dcfce7;color:#166534}.recipe-badge.is-off-menu{background:#f1f5f9;color:#64748b}.empty-state{padding:30px;text-align:center;color:var(--text-secondary)}#stock-confirmation-banner{margin-bottom:12px;padding:12px 14px;border-radius:10px;background:#16a34a;color:white}.stock-manager-row{display:flex;justify-content:space-between;gap:18px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px}.stock-card-content{flex:1}.stock-progress-wrapper{height:7px;background:#edf0f3;border-radius:999px;overflow:hidden;margin-top:10px}.stock-progress-fill{height:100%;background:#10b981}.stock-actions-group{display:flex;flex-direction:column;gap:7px}.styled-action-btn{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff}.primary-action{background:var(--primary-color);color:#fff}.recipe-rule{margin-bottom:15px;display:flex;flex-direction:column;gap:4px}.recipe-rule span{color:var(--text-secondary);font-size:.88rem}
.modal{position:fixed;z-index:50;inset:0;background:rgba(0,0,0,.35);padding:20px;overflow:auto}.modal-panel{background:#fff;max-width:900px;margin:30px auto;border-radius:16px;padding:20px;box-shadow:var(--shadow)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.manager-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.form-stack{display:flex;flex-direction:column;gap:18px}.form-header p,.editor-section p{color:var(--text-secondary);font-size:.84rem}.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-stack label{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.82rem}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px;background:#fff;color:var(--text-primary);font-weight:400}textarea{resize:vertical}.check-row{flex-direction:row!important;align-items:center;margin-top:24px}.check-row input{width:auto}.editor-section{border-top:1px solid var(--border);padding-top:16px}.section-title{align-items:flex-start;margin-bottom:10px}.editor-row{display:grid;gap:7px;margin-bottom:8px;align-items:center}.drink-ingredient-row{display:grid;grid-template-columns:1fr 130px 40px;gap:7px;margin-bottom:8px}.mise-row{grid-template-columns:1.2fr 100px 1fr 40px}.step-row{grid-template-columns:34px 1fr 1.6fr 90px 1fr 40px}.step-number{width:28px;height:28px;background:var(--surface2);border-radius:50%;display:grid;place-items:center;font-weight:800}.step-instruction{min-height:52px}.row-labels{display:grid;gap:7px;color:var(--text-secondary);font-size:.72rem;font-weight:800;margin-bottom:5px}.row-labels.three{grid-template-columns:1.2fr 100px 1fr}.calc-row{margin-top:10px;background:var(--surface2);border-radius:8px;padding:10px}.settings-panel{margin-top:15px}.settings-panel.hidden{display:none}
@media(max-width:700px){main{padding:18px 12px 40px}.view-intro{align-items:flex-start;flex-direction:column}.metrics-grid{grid-template-columns:repeat(2,1fr)}.manager-row,.stock-manager-row{align-items:flex-start;flex-direction:column}.manager-actions,.stock-actions-group{width:100%;flex-direction:row;flex-wrap:wrap}.manager-actions button,.stock-actions-group button{flex:1}.form-grid.two{grid-template-columns:1fr}.drink-ingredient-row{grid-template-columns:1fr 90px 38px}.mise-row{grid-template-columns:1fr 80px 1fr 38px}.step-row{grid-template-columns:30px 1fr 70px 38px}.step-row .step-instruction,.step-row .step-notes{grid-column:2/-1}.row-labels{display:none}.modal{padding:8px}.modal-panel{margin:8px auto;padding:14px}.topbar{height:64px}.recipe-rule{font-size:.9rem}}

/* Recipes is a first-class application view; its editor panel is inline rather than a popup. */
#view-recipes #menu-editor{display:block;position:static;background:transparent;padding:0;overflow:visible}#view-recipes #menu-editor.hidden{display:block!important}#view-recipes .modal-panel{max-width:none;margin:0;padding:0;background:transparent;box-shadow:none}#view-recipes .modal-header{display:none}

/* Cleaner service controls and recipe information */
.service-recipe-card{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:170px;padding:14px}.drink-name-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.recipe-info-button{width:30px;height:30px;min-width:30px;border-radius:50%;background:var(--surface2);color:var(--text-secondary);border:1px solid var(--border);font-weight:900;display:grid;place-items:center}.recipe-info-button:hover{background:#e2e8f0;color:var(--text-primary)}.service-controls{display:grid;grid-template-columns:1fr 70px 1fr;gap:8px;align-items:center}.service-qty-button{height:58px;border-radius:12px;font-size:2rem;font-weight:800;background:var(--surface2);border:1px solid var(--border);transition:background .12s,transform .12s,box-shadow .12s}.service-qty-button:active{transform:scale(.96)}.service-plus{color:#166534}.service-minus{color:#991b1b}.service-count{text-align:center;font-size:1.45rem;font-weight:900}.flash-positive{animation:flashPositive .26s ease}.flash-negative{animation:flashNegative .26s ease}@keyframes flashPositive{0%{background:#bbf7d0;box-shadow:0 0 0 0 rgba(22,163,74,.45)}100%{background:var(--surface2);box-shadow:0 0 0 12px rgba(22,163,74,0)}}@keyframes flashNegative{0%{background:#fecaca;box-shadow:0 0 0 0 rgba(220,38,38,.45)}100%{background:var(--surface2);box-shadow:0 0 0 12px rgba(220,38,38,0)}}.service-footer{display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:var(--text-secondary)}.service-footer .danger-outline{margin-top:0}.manager-info-button{margin-top:8px}.recipe-manager-row .manager-row-info{position:relative;padding-right:42px}.recipe-manager-row .manager-info-button{position:absolute;right:0;top:0}.recipe-detail-modal{position:fixed;z-index:80;inset:0;background:rgba(0,0,0,.4);padding:16px;overflow:auto}.recipe-detail-panel{background:#fff;max-width:760px;margin:30px auto;border-radius:16px;padding:20px;box-shadow:var(--shadow)}.detail-subtitle{color:var(--text-secondary);margin-top:4px}.detail-section{border-top:1px solid var(--border);padding:16px 0}.detail-section:first-child{border-top:0;padding-top:0}.detail-section h3{margin-bottom:10px}.detail-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #edf0f3}.detail-block{padding:10px 0;border-bottom:1px solid #edf0f3}.detail-block>span{float:right;color:var(--text-secondary)}.detail-block p,.detail-step p{margin-top:4px;color:var(--text-secondary)}.detail-step{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #edf0f3}.detail-step-number{width:30px;height:30px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-weight:800}.detail-step small{color:var(--text-secondary)}.detail-note{font-size:.82rem!important;color:var(--text-primary)!important}.analytics-metrics{margin-top:0}
@media(max-width:700px){.service-recipe-card{min-height:160px}.service-controls{grid-template-columns:1fr 58px 1fr}.service-qty-button{height:54px}.service-footer{align-items:flex-start;gap:12px;flex-direction:column}}

/* Cleaner navigation and grouped content */
.content-category-heading{margin:22px 0 9px;font-size:1rem;font-weight:900}.content-category-heading:first-child{margin-top:4px}.category-group{margin-bottom:10px}.expected-qty-actions{display:flex;align-items:center;gap:8px}.expected-qty{min-width:30px;text-align:center}.checklist-list{display:flex;flex-direction:column;gap:10px;max-width:700px}.checklist-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;font-weight:800}.checklist-row.completed{opacity:.65;text-decoration:line-through}.check-button{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);font-size:1.25rem;font-weight:900}.checklist-row.completed .check-button{background:#dcfce7;color:#166534;border-color:#86efac}.checklist-reset{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}

.content-category-heading{margin:22px 0 9px;font-size:1rem;font-weight:900}.content-category-heading:first-child{margin-top:4px}.category-group{margin-bottom:10px}.expected-qty-actions{display:flex;align-items:center;gap:8px}.expected-qty{min-width:30px;text-align:center}.checklist-list{display:flex;flex-direction:column;gap:10px;max-width:700px}.checklist-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;font-weight:800}.checklist-row.completed{opacity:.65;text-decoration:line-through}.check-button{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);font-size:1.25rem;font-weight:900}.checklist-row.completed .check-button{background:#dcfce7;color:#166534;border-color:#86efac}.checklist-reset{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}


/* Recipe ingredient previews and unit-aware recipe components */
.service-ingredients-brief,.recipe-ingredients-brief,.expected-ingredients-brief{display:block;font-size:.72rem;line-height:1.35;color:var(--text-secondary);margin-top:6px;font-weight:500;white-space:normal;overflow-wrap:anywhere}
.recipe-manager-row .manager-row-info{padding-right:42px}
.expected-order-row{align-items:center}
.expected-qty-actions{display:grid;grid-template-columns:repeat(3,auto) 48px repeat(3,auto);gap:5px;align-items:center;flex-shrink:0}
.expected-qty-button{min-width:42px;height:38px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);font-weight:800;font-size:.78rem;transition:transform .1s,background .12s,box-shadow .12s}
.expected-qty-button:active{transform:scale(.95)}
.expected-minus{color:#991b1b}.expected-plus{color:#166534}.expected-qty{font-size:1rem;text-align:center}
.editor-ingredient-row{display:grid}
.drink-ingredient-row{grid-template-columns:1fr 110px 95px 40px}
@media(max-width:700px){.expected-order-row{align-items:flex-start}.expected-qty-actions{width:100%;grid-template-columns:repeat(3,1fr) 42px repeat(3,1fr)}.expected-qty-button{min-width:0}.drink-ingredient-row{grid-template-columns:1fr 80px 82px 38px}}

/* Tier / account controls */
.tier-panel{border-top:1px solid var(--border);margin-top:18px;padding-top:18px}.tier-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eaf0ff;color:var(--primary-color);font-size:.75rem;font-weight:800;white-space:nowrap}.data-control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.data-control{display:flex!important;flex-direction:row!important;align-items:flex-start;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-weight:400!important}.data-control strong{display:block;font-size:.82rem}.data-control small{display:block;color:var(--text-secondary);font-weight:400;margin-top:4px;line-height:1.3}.data-control input{width:20px;min-width:20px;margin-top:2px}.data-control input:disabled{opacity:.5}.tier-note{margin-top:10px;padding:10px 12px;border-radius:9px;background:#fff7ed;color:#9a3412;font-size:.8rem;border:1px solid #fed7aa}
@media(max-width:700px){.data-control-grid{grid-template-columns:1fr}.tier-badge{align-self:flex-start}}

/* Tier testing and refined recipe editor */
.topbar{position:relative}.tier-test-control{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--text-secondary);font-weight:800}.tier-test-control select{width:auto;min-width:120px;padding:7px 28px 7px 9px;font-size:.75rem;font-weight:800}
.recipe-library-header{padding-right:2px}.new-recipe-button{font-size:1rem;padding:12px 18px;min-height:46px;box-shadow:0 5px 14px rgba(0,0,0,.08)}.recipe-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:-4px 0 14px}.sort-control{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;color:var(--text-secondary)}.sort-control select{width:auto;min-width:160px}.category-input-row{display:flex;gap:7px}.category-input-row select{flex:1}.compact-button{padding:8px 10px}
/* Recipe create/edit is a true sub-view overlay; the page remains scrollable behind it. */
#view-recipes #menu-editor{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.35);padding:18px;overflow-y:auto;overscroll-behavior:contain}#view-recipes #menu-editor.hidden{display:none!important}#view-recipes #menu-editor .modal-panel{background:var(--surface);max-width:920px;margin:20px auto 90px;padding:22px;border-radius:16px;box-shadow:var(--shadow)}#view-recipes #menu-editor .modal-header{display:flex}#view-recipes #drink-manager{display:block}#view-recipes #drink-form.hidden,#view-recipes #ingredient-form.hidden,#view-recipes #ingredient-manager.hidden,#view-recipes #drink-manager.hidden{display:none!important}.form-actions{position:sticky;bottom:0;z-index:4;margin:18px -22px -22px;padding:12px 22px 18px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--surface) 22%);display:flex;justify-content:space-between;gap:12px}.form-actions button{min-width:130px}.category-manager-row .manager-row-info{display:grid;gap:7px;flex:1}.category-description-input{font-size:.8rem}.checklist-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.checklist-edit-row{align-items:center}.checklist-edit-row .checklist-edit-input{flex:1}.make-choice-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:250px}.make-button{border:0;border-radius:10px;padding:11px 13px;font-weight:900;color:#fff;transition:transform .1s,box-shadow .12s}.dont-make{background:#7f1d1d}.want-make{background:#166534}.make-button:active{transform:scale(.97)}
@media(max-width:700px){.tier-test-control span{display:none}.tier-test-control select{min-width:108px}.recipe-tools{justify-content:space-between;flex-wrap:wrap}.sort-control{flex:1}.sort-control select{min-width:0;flex:1}.new-recipe-button{width:100%}#view-recipes #menu-editor{padding:8px}#view-recipes #menu-editor .modal-panel{margin:8px auto 80px;padding:14px}.form-actions{margin:14px -14px -14px;padding:10px 14px 16px}.form-actions button{flex:1}.make-choice-actions{width:100%;min-width:0}.tier-test-control{margin-left:auto}}

/* v6 layout refinements */
.recipe-editor-subview{display:block!important;position:static!important;background:transparent!important;padding:0!important;overflow:visible!important;z-index:auto!important}
.recipe-editor-subview .modal-panel{max-width:none!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.recipe-editor-subview .editor-subview-header{display:flex!important;background:var(--surface);padding:14px 0;margin-bottom:14px;border-bottom:1px solid var(--border)}
.recipe-editor-subview .editor-subview-header #close-editor{display:none}
#view-recipes #drink-manager{display:block}
#view-recipes #drink-form.hidden,#view-recipes #ingredient-form.hidden,#view-recipes #ingredient-manager.hidden,#view-recipes #drink-manager.hidden{display:none!important}
.new-recipe-footer{display:flex;justify-content:flex-end;margin:22px 0 4px}
.new-recipe-footer .new-recipe-button{padding:13px 22px;min-width:150px}
.recipe-topbar{display:flex;justify-content:flex-end;margin-bottom:8px}
.service-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:12px}
.service-toolbar .category-tabs{margin-bottom:0;flex:1}
.service-toolbar .sort-control{flex-shrink:0}
.inline-error{margin:8px 0;padding:7px 10px;border-radius:7px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;font-size:.78rem}
.empty-state{padding:24px;text-align:center;color:var(--text-secondary);background:var(--surface);border:1px dashed var(--border);border-radius:12px}
body.dark-mode{--bg:#111827;--surface:#1f2937;--surface2:#273449;--text-primary:#f3f4f6;--text-secondary:#aab4c2;--border:#3a4658;--shadow:0 8px 28px rgba(0,0,0,.3)}
body.dark-mode .topbar{background:rgba(17,24,39,.94)}
body.dark-mode #side-menu{background:#1f2937}
body.dark-mode .menu-item.active{background:#243b66}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#182230;color:var(--text-primary);border-color:var(--border)}
body.dark-mode .recipe-detail-panel{background:var(--surface)}
body.dark-mode .detail-row,body.dark-mode .detail-block,body.dark-mode .detail-step{border-color:var(--border)}
body.dark-mode .form-actions{background:linear-gradient(to bottom,rgba(31,41,55,0),var(--surface) 22%)}
@media(max-width:700px){.service-toolbar{align-items:stretch;flex-direction:column}.service-toolbar .sort-control{width:100%}.recipe-topbar{justify-content:stretch}.recipe-topbar .recipe-tools{width:100%}.new-recipe-footer{justify-content:flex-end}.new-recipe-footer .new-recipe-button{width:auto}}

/* v7 requested layout refinements */
#view-recipes .recipes-category-sticky{
  position:sticky;
  top:0;
  z-index:25;
  background:var(--bg);
  padding:8px 0 7px;
  margin:0;
  border-bottom:1px solid var(--border);
}
#view-recipes .recipe-topbar{
  position:sticky;
  top:52px;
  z-index:24;
  background:var(--bg);
  padding:8px 0 10px;
  margin:0;
  border-bottom:1px solid var(--border);
}
#view-recipes .recipe-tools{margin:0}
#view-recipes .new-recipe-footer{
  position:fixed;
  right:22px;
  bottom:18px;
  z-index:45;
  margin:0;
  padding:0;
}
#view-recipes .new-recipe-button{
  width:auto!important;
  min-width:170px;
  min-height:50px;
  padding:13px 24px;
  border-radius:12px;
}
#view-recipes .recipe-manager-row .manager-actions{align-items:stretch}
#view-recipes .recipe-manager-row .manager-actions > button{
  height:40px;
  min-height:40px;
  min-width:78px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
#view-recipes .recipe-manager-row .manager-actions .delete-button{min-width:40px;width:40px}
#view-recipes .recipe-manager-row .manager-actions .secondary-button,
#view-recipes .recipe-manager-row .manager-actions .primary-button{min-width:126px}
@media(max-width:700px){
  #view-recipes .recipe-topbar{top:49px}
  #view-recipes .new-recipe-footer{right:14px;bottom:14px}
  #view-recipes .new-recipe-button{min-width:0}
  #view-recipes .recipe-manager-row .manager-actions{flex-wrap:wrap}
  #view-recipes .recipe-manager-row .manager-actions .secondary-button,
  #view-recipes .recipe-manager-row .manager-actions .primary-button{min-width:116px}
}

/* v8 recipe editor and sticky preparation controls */
#view-service .service-toolbar{position:sticky;top:72px;z-index:19;background:var(--bg);padding:8px 0 10px;margin:0 -2px 12px;border-bottom:1px solid var(--border)}
.recipe-wizard-nav{position:sticky;top:0;z-index:26;display:flex;gap:6px;overflow:auto;background:var(--surface);padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:14px}
.wizard-tab{border:1px solid var(--border);background:var(--surface2);color:var(--text-secondary);border-radius:9px;padding:9px 12px;font-weight:800;white-space:nowrap}
.wizard-tab.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
.recipe-wizard-step{display:none}.recipe-wizard-step.active{display:block}.wizard-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
.recipe-wizard-form .form-actions{position:sticky;bottom:10px;z-index:25;margin:18px 0 0;padding:12px 14px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.10)}
.menu-toggle-on{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important}.menu-toggle-off{background:#e5e7eb!important;color:#6b7280!important;border-color:#d1d5db!important}
.recipe-manager-row .manager-actions>button{height:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}.overview-grid>div{padding:11px;background:var(--surface2);border-radius:9px}.overview-grid span{display:block;color:var(--text-secondary);font-size:.72rem}.overview-grid strong{display:block;margin-top:3px}.overview-list h4{margin:16px 0 7px}.overview-list ul,.overview-list ol{margin:0;padding-left:22px}.overview-list p{color:var(--text-secondary)}
@media(max-width:700px){#view-service .service-toolbar{top:64px}.recipe-wizard-nav{top:0}.overview-grid{grid-template-columns:1fr 1fr}.recipe-wizard-form .form-actions{bottom:6px}}

/* v8.1: hide recipe list controls while editing and polish action buttons */
#view-recipes.recipe-editing .recipes-category-sticky,
#view-recipes.recipe-editing .recipe-topbar,
#view-recipes.recipe-editing .new-recipe-footer{display:none!important}
#view-recipes .recipe-manager-row .manager-actions{gap:7px}
#view-recipes .recipe-manager-row .manager-actions>button{height:40px;min-height:40px;padding:0 12px;border-radius:9px;line-height:1;box-sizing:border-box}
#view-recipes .recipe-manager-row .manager-actions .menu-toggle-on,
#view-recipes .recipe-manager-row .manager-actions .menu-toggle-off{width:78px;min-width:78px}
#view-recipes .recipe-manager-row .manager-actions .delete-button{width:40px;min-width:40px;padding:0}
#view-recipes .recipe-manager-row .manager-actions .secondary-button:not(.menu-toggle-off),
#view-recipes .recipe-manager-row .manager-actions .primary-button:not(.menu-toggle-on){min-width:78px}

/* v9: global sticky header and inventory/recipe polish */
.topbar{position:sticky!important;top:0!important;z-index:100!important}
main{position:relative}
#view-service .service-toolbar{top:72px!important;z-index:50!important}
#view-recipes .recipes-category-sticky{top:72px!important;z-index:50!important}
#view-recipes .recipe-topbar{top:122px!important;z-index:49!important}
#view-current-stock .inventory-category-sticky{position:sticky;top:72px;z-index:50;background:var(--bg);padding:8px 0 9px;border-bottom:1px solid var(--border)}
.inventory-toolbar{display:flex;justify-content:flex-end;padding:8px 0;color:var(--text-secondary);font-size:.75rem;font-weight:800}
.inventory-card{align-items:center;min-height:86px;padding:14px 16px;gap:16px}
.inventory-card-content{flex:1;min-width:0}
.inventory-card-top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.inventory-card-top strong{font-size:1rem}
.inventory-type-badge{font-size:.68rem;font-weight:800;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--surface2);color:var(--text-secondary)}
.inventory-stock-line{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}.inventory-stock-line span{font-size:.72rem;color:var(--text-secondary)}.inventory-stock-line strong{font-size:.95rem}
.inventory-card meta,.inventory-card-content small{color:var(--text-secondary);font-size:.72rem}
.inventory-empty{background:#fff1f2!important;border:1px solid #fecdd3!important}.inventory-empty .inventory-stock-line strong{color:#b91c1c}.inventory-remove-btn{background:#fff0f1!important;color:#b91c1c!important;border-color:#fecaca!important}
.new-inventory-footer{position:fixed;right:22px;bottom:18px;z-index:45}.new-inventory-footer .new-recipe-button{min-width:190px;min-height:50px;padding:13px 24px;border-radius:12px}
.ingredient-editor-actions{display:flex;gap:7px;flex-wrap:wrap}
.recipe-row-rating-wrap{padding:0 0 10px}.recipe-item-rating{display:flex;align-items:center;gap:2px;padding-left:2px}.rating-star{background:transparent;color:#cbd5e1;font-size:1.1rem;padding:2px 3px}.rating-star.selected{color:#f59e0b}.rating-clear{margin-left:6px;background:transparent;color:var(--text-secondary);font-size:.68rem;padding:3px 5px}
.recipe-manager-row{margin-bottom:0}.recipe-manager-row .manager-actions{flex-shrink:0}.recipe-manager-row .manager-info-button{flex-shrink:0}
@media(max-width:700px){#view-service .service-toolbar{top:64px!important}.#view-recipes{}#view-recipes .recipes-category-sticky{top:64px!important}#view-recipes .recipe-topbar{top:114px!important}.inventory-category-sticky{top:64px!important}.new-inventory-footer{right:14px;bottom:14px}.new-inventory-footer .new-recipe-button{min-width:0}.inventory-card{align-items:flex-start;flex-direction:column}.inventory-card .stock-actions-group{width:100%}.inventory-card .stock-actions-group button{flex:1}.ingredient-editor-actions{justify-content:flex-end}}

/* v10: sidebar is below the global header but above all page content */
#side-menu-overlay{z-index:85!important}
#side-menu{z-index:90!important}
.topbar{z-index:100!important}
.recipe-stock-warning{margin-top:7px;padding:7px 9px;border-radius:8px;background:#fff1f2;border:1px solid #fecdd3;color:#b91c1c;font-size:.72rem;font-weight:800;line-height:1.3}
.stock-filter-control select{min-width:145px}

/* v10 ingredient-stock linkage */
.drink-ingredient-row{grid-template-columns:1fr 100px 90px minmax(150px,1fr) 40px;align-items:center}
.ingredient-stock-hint{font-size:.7rem;color:var(--text-secondary);line-height:1.2}
.ingredient-stock-hint.unavailable{color:#b91c1c;font-weight:800}
@media(max-width:700px){.drink-ingredient-row{grid-template-columns:1fr 80px 82px 1fr 38px}.ingredient-stock-hint{grid-column:1/-1}}

/* v11 generic Ingredients page */
#view-generic-ingredients .generic-ingredients-category-sticky{position:sticky;top:72px;z-index:50;background:var(--bg);padding:8px 0 7px;border-bottom:1px solid var(--border)}
#view-generic-ingredients .generic-ingredients-toolbar{position:sticky;top:122px;z-index:49;background:var(--bg);padding:8px 0 10px;border-bottom:1px solid var(--border)}
.generic-ingredient-row{min-height:82px}.generic-associated-line{margin-top:3px}.generic-choice-row{cursor:pointer;align-items:center}.generic-choice-row input{width:20px;height:20px}.generic-ingredient-editor{padding-bottom:80px}.generic-ingredient-editor .recipe-wizard-nav{top:0}.new-generic-ingredient-footer{position:fixed;right:22px;bottom:18px;z-index:45}.new-generic-ingredient-footer .new-recipe-button{min-width:170px;min-height:50px;padding:13px 24px;border-radius:12px}
@media(max-width:700px){#view-generic-ingredients .generic-ingredients-category-sticky{top:64px}#view-generic-ingredients .generic-ingredients-toolbar{top:114px}.new-generic-ingredient-footer{right:14px;bottom:14px}}

/* Recipe ingredient rows */
.drink-ingredients-editor, #drink-ingredients-editor { display:flex; flex-direction:column; gap:10px; }
#drink-ingredients-editor .drink-ingredient-row { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:0; }
#drink-ingredients-editor .editor-ingredient-select { font-weight:700; }
#drink-ingredients-editor .editor-ingredient-amount, #drink-ingredients-editor .editor-ingredient-unit { min-width:0; }
#drink-ingredients-editor .ingredient-stock-hint { font-size:.74rem; color:var(--text-secondary); }

/* v14: full-page inventory editor, expected-order controls and settings */
#view-current-stock.inventory-editing #inventory-category-tabs,
#view-current-stock.inventory-editing .inventory-toolbar,
#view-current-stock.inventory-editing #stock-confirmation-banner,
#view-current-stock.inventory-editing #current-stock-list,
#view-current-stock.inventory-editing .new-inventory-footer{display:none!important}
#view-current-stock.inventory-editing #ingredient-form{display:block!important;min-height:calc(100vh - 88px);padding:12px 0 90px}
#view-current-stock.inventory-editing{padding-top:8px}
#view-current-stock.inventory-editing .inventory-wizard-nav{position:sticky;top:72px;z-index:50;background:var(--bg);padding:10px 0}
#expected-orders-controls{position:sticky;top:72px;z-index:50;background:var(--bg);padding:8px 0 10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.settings-app-panel{margin:18px 0;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.database-info{display:grid;gap:8px;margin:12px 0 16px}.database-info>div{display:flex;justify-content:space-between;gap:15px;padding:10px 12px;background:var(--surface2);border-radius:9px}.database-info strong{font-size:.78rem}.database-info span{font-size:.76rem;color:var(--text-secondary);text-align:right}
@media(max-width:700px){#view-current-stock.inventory-editing .inventory-wizard-nav{top:64px}#expected-orders-controls{top:64px}.database-info>div{display:block}.database-info span{display:block;text-align:left;margin-top:3px}}

/* Stock warnings in Preparation */
.service-stock-warning{margin-top:10px;padding:9px 10px;border:1px solid #fca5a5;background:#fef2f2;color:#991b1b;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.82rem;font-weight:700}.service-stock-warning .service-remove-menu{flex:none;min-height:32px;padding:6px 10px;font-size:.78rem;border-color:#fecaca;color:#991b1b;background:#fff}.dark-mode .service-stock-warning{background:#3b1515;border-color:#7f1d1d;color:#fecaca}.dark-mode .service-stock-warning .service-remove-menu{background:#241010;color:#fecaca;border-color:#7f1d1d}

/* Shopping list controls and inventory-demand rows */
#shopping-list-controls{position:sticky;top:var(--header-height,64px);z-index:20;background:var(--background);padding:10px 0 8px;border-bottom:1px solid var(--border)}
.shopping-inventory-row{min-height:78px;align-items:center}
.shopping-inventory-row.shopping-shortage-row{border-color:#e5a3a3;background:rgba(190,35,35,.06)}
.shopping-inventory-row .manager-row-info{gap:5px}
.shopping-source-detail{display:block;margin-top:4px;color:var(--text-secondary)}

/* v21: Settings control centre */
.settings-page{display:flex;flex-direction:column;gap:14px;max-width:900px;margin:0 auto}
.settings-list{display:flex;flex-direction:column;gap:7px}
.settings-list-item{width:100%;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;text-align:left;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text-primary);box-shadow:0 2px 8px rgba(16,24,40,.03)}
.settings-list-item:hover{background:var(--surface2)}
.settings-list-icon{width:34px;height:34px;border-radius:9px;background:var(--surface2);display:grid;place-items:center;font-size:1rem}
.settings-list-item strong{display:block;font-size:.9rem}.settings-list-item small{display:block;color:var(--text-secondary);font-size:.74rem;margin-top:2px;font-weight:500}
.settings-chevron{font-size:1.5rem;color:var(--text-secondary);padding-left:8px}.settings-badge{font-size:.67rem;font-weight:800;color:var(--text-secondary);background:var(--surface2);padding:5px 8px;border-radius:999px}
.settings-switch{width:42px;height:24px;border-radius:999px;background:#9aa5b1;padding:3px;display:flex;align-items:center;transition:.15s}.settings-switch span{width:18px;height:18px;border-radius:50%;background:#fff;display:block;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.settings-list-item.setting-enabled .settings-switch{background:var(--primary-color)}.settings-list-item.setting-enabled .settings-switch span{transform:translateX(18px)}
.settings-section-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}.settings-section-heading{margin-bottom:10px}.settings-section-heading p{color:var(--text-secondary);font-size:.8rem;margin-top:3px}
.settings-tab-visibility-list{display:flex;flex-direction:column;gap:7px}.tab-visibility-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:11px 12px;background:var(--surface2);border-radius:10px}.tab-visibility-row strong{font-size:.84rem}.tab-visibility-row small{display:block;color:var(--text-secondary);font-size:.7rem;margin-top:2px}.visibility-toggle{appearance:none;width:42px;height:24px;border-radius:999px;background:#9aa5b1;position:relative;cursor:pointer;transition:.15s}.visibility-toggle::after{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.visibility-toggle:checked{background:var(--primary-color)}.visibility-toggle:checked::after{transform:translateX(18px)}
body.dark-mode .settings-list-item,body.dark-mode .settings-section-card{box-shadow:none}

/* v21 Settings notice */
.settings-notice{display:none;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-primary);font-size:.8rem;font-weight:700;box-shadow:var(--shadow)}
.settings-notice.visible{display:block}

/* v23 shopping-list planner */
.shopping-final-header{display:flex;justify-content:flex-end;margin:0 0 8px;position:sticky;top:var(--header-height,64px);z-index:22;background:var(--background);padding:8px 0}
.final-shopping-button{min-height:48px;padding:12px 20px;font-weight:800}
.shopping-plan-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface);margin-bottom:8px}
.shopping-plan-row.shopping-shortage-row{border-color:#e5a3a3;background:rgba(190,35,35,.07)}
.shopping-plan-main{min-width:0;flex:1}.shopping-plan-main strong{display:block}.shopping-plan-main small{display:block;margin-top:4px;color:var(--text-secondary)}
.shopping-plan-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.shopping-choice-button{min-width:86px;min-height:36px}.shopping-choice-button.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
.shopping-alternatives{margin:7px 0 14px;padding:10px 12px 10px 18px;border-left:3px solid var(--border);background:var(--surface2);border-radius:0 10px 10px 0}.shopping-alternative-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}.shopping-alternative-row:last-child{border-bottom:0}
.shopping-recipe-options{margin-top:10px;padding:10px;border-radius:10px;background:var(--surface2)}.shopping-recipe-option{padding:8px 0;border-bottom:1px solid var(--border)}.shopping-recipe-option:last-child{border-bottom:0}.shopping-recipe-option small{display:block;color:var(--text-secondary);margin-top:3px}
.final-shopping-page{padding-bottom:40px}.final-shopping-page .final-shopping-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin:8px 0}.final-shopping-page .final-shopping-item.purchased{opacity:.6;text-decoration:line-through}.final-shopping-page .final-shopping-item input{width:20px;height:20px}.final-shopping-page .final-shopping-item .final-shopping-info{flex:1}.final-shopping-page .final-shopping-item small{display:block;color:var(--text-secondary);margin-top:3px}
.shopping-empty-note{padding:14px;border:1px dashed var(--border);border-radius:12px;color:var(--text-secondary)}

/* v24 refinements */
.manager-show-recipe-button{height:40px;min-height:40px;min-width:105px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.recipe-manager-row .manager-actions{flex-wrap:wrap}
.recipe-row-rating-wrap{padding:0 12px 12px;width:100%;box-sizing:border-box}
.recipe-item-rating{width:100%;justify-content:center;padding:7px 10px;border-top:1px solid var(--border);background:var(--surface2);border-radius:9px}
.recipe-item-rating .rating-star{flex:1;min-width:0;font-size:1.15rem}
.shopping-plan-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.shopping-alternative-select{min-width:160px;max-width:220px}
.detail-section details{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface2)}
.detail-section summary{cursor:pointer;font-weight:800}
.detail-alternatives{margin-top:10px;display:flex;flex-direction:column;gap:8px}
@media(max-width:700px){.manager-show-recipe-button{min-width:90px}.shopping-plan-actions{width:100%}.shopping-alternative-select{width:100%;max-width:none}}

/* Recipe rating belongs to the recipe card itself. */
.recipe-manager-row { position: relative; flex-wrap: wrap; }
.recipe-manager-row .recipe-row-rating-wrap { flex: 0 0 100%; width: 100%; box-sizing: border-box; margin-top: 4px; }
.recipe-manager-row .recipe-item-rating { width: 100%; box-sizing: border-box; }

/* Sequential tab navigation */
.menu-item-indented { padding-left: 34px; }
.tab-navigation { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:28px 0 8px; padding:14px 0 4px; }
.tab-navigation:has(button:only-child) { justify-content:flex-end; }
.tab-navigation button { min-width:180px; }
@media (max-width:600px){ .tab-navigation{flex-wrap:wrap}.tab-navigation button{flex:1;min-width:140px} }


/* Recipe manager compact controls */
.recipe-manager-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:10px;}
.recipe-manager-row .manager-show-recipe-button{width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:10px;font-size:20px;}
.recipe-manager-row .manager-actions{display:flex;gap:8px;align-items:center;}
.recipe-manager-row .manager-actions button{height:38px;min-width:38px;}
.recipe-manager-row .manager-actions .delete-button{font-size:12px;color:#b42318;background:transparent;border:0;padding:4px 2px;align-self:flex-end;}
.recipe-row-rating-wrap{grid-column:1 / -1;width:100%;padding:0 4px 2px;}
.recipe-item-rating{display:flex;align-items:center;gap:4px;width:100%;padding:4px 8px;}
.recipe-item-rating .rating-star{border:0;background:transparent;font-size:18px;padding:2px 4px;cursor:pointer;}
.recipe-item-rating .rating-clear{margin-left:auto;border:0;background:transparent;font-size:11px;opacity:.65;}
.recipe-manager-row .manager-row-info{min-width:0;}
.ingredient-editor-actions{display:flex;gap:8px;align-items:center;}
.ingredient-editor-actions .secondary-button{width:40px;height:40px;padding:0;font-size:20px;}
@media(max-width:700px){.recipe-manager-row{grid-template-columns:minmax(0,1fr) auto;}.recipe-manager-row .manager-actions{grid-column:1/-1;justify-content:flex-end;}.recipe-row-rating-wrap{grid-column:1/-1;}}


/* v28 recipe filter and card-order refinements */
.recipe-tools{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
.recipe-tool-icon{width:40px;height:40px;min-width:40px;padding:0;display:grid;place-items:center;font-size:18px;border-radius:10px;}
.availability-switch{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 4px;cursor:pointer;font-size:.85rem;color:var(--text-secondary);font-weight:700;user-select:none;}
.availability-switch input{position:absolute;opacity:0;pointer-events:none;}
.availability-switch-track{width:42px;height:24px;border-radius:999px;background:var(--border);position:relative;transition:.18s ease;flex:none;}
.availability-switch-thumb{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.18s ease;}
.availability-switch input:checked + .availability-switch-track{background:var(--primary);}
.availability-switch input:checked + .availability-switch-track .availability-switch-thumb{transform:translateX(18px);}
.recipe-manager-row{grid-template-columns:minmax(0,1fr) auto;}
.recipe-manager-row .recipe-row-rating-wrap{grid-column:1 / -1;order:3;}
.recipe-manager-row .manager-actions{grid-column:1 / -1;order:4;justify-content:flex-end;padding-top:4px;border-top:1px solid var(--border);margin-top:2px;}
.recipe-manager-row .manager-row-info{order:1;}
.recipe-manager-row .manager-show-recipe-button{order:2;}
@media(max-width:700px){.recipe-tools{align-items:center}.availability-switch{margin-left:0}.recipe-manager-row .manager-actions{grid-column:1/-1;}}

/* v31 compact collapsible category selectors */
.category-collapse{
  margin:0 0 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  overflow:hidden;
}
.category-collapse summary{
  list-style:none;
  cursor:pointer;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  color:var(--text-primary);
  font-size:.84rem;
  font-weight:800;
  user-select:none;
}
.category-collapse summary::-webkit-details-marker{display:none}
.category-collapse summary::after{content:"▾";margin-left:auto;color:var(--text-secondary);transition:transform .16s ease}
.category-collapse[open] summary::after{transform:rotate(180deg)}
.category-collapse[open] summary{border-bottom:1px solid var(--border)}
.category-collapse .category-current{font-weight:600;color:var(--text-secondary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-collapse .category-tabs{padding:10px 12px 11px;margin:0;display:flex;gap:8px;overflow:auto}
.category-collapse .category-tab{flex:0 0 auto}

/* Filter/sort controls stay above the collapsed category selector. */
#view-recipes .recipe-topbar{top:72px!important;z-index:50!important}
#view-recipes .recipes-category-sticky{top:120px!important;z-index:49!important}
#view-generic-ingredients .generic-ingredients-toolbar{top:72px!important;z-index:50!important}
#view-generic-ingredients .generic-ingredients-category-sticky{top:120px!important;z-index:49!important}
.expected-orders-toolbar{margin-bottom:12px}
.expected-orders-toolbar .filter-sort-row{margin-bottom:8px}
@media(max-width:700px){
  #view-recipes .recipe-topbar{top:64px!important}
  #view-recipes .recipes-category-sticky{top:112px!important}
  #view-generic-ingredients .generic-ingredients-toolbar{top:64px!important}
  #view-generic-ingredients .generic-ingredients-category-sticky{top:112px!important}
}

/* v33 recipe actions */
.recipe-manager-row .manager-actions .manager-show-recipe-button{
  width:auto;
  min-width:112px;
}
.recipe-manager-row .manager-actions .menu-toggle-on,
.recipe-manager-row .manager-actions .menu-toggle-off{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
}
.recipe-manager-row .menu-button-label{font-weight:700;}

/* v34 recipe menu toggle placement */
.recipe-manager-row{position:relative;}
.recipe-manager-row .manager-row-info{padding-right:92px;}
.recipe-menu-control{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.recipe-menu-label{
  font-size:10px;
  line-height:1;
  opacity:.7;
  white-space:nowrap;
}
.recipe-menu-switch{
  width:44px;
  height:24px;
  border:0;
  border-radius:999px;
  padding:2px;
  background:#c8cdd4;
  cursor:pointer;
  transition:background .16s ease;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.recipe-menu-switch.is-on{
  background:#2563eb;
  justify-content:flex-end;
}
.recipe-menu-switch-knob{
  display:block;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.recipe-manager-row .manager-actions{
  justify-content:flex-start;
}
.recipe-manager-row .manager-actions .manager-show-recipe-button{
  order:0;
}

/* v35 recipe action/toggle fixes */
.recipe-menu-control{
  z-index:4;
  pointer-events:auto;
}
.recipe-menu-switch{
  position:relative;
  z-index:5;
  pointer-events:auto;
  flex:0 0 auto;
}
.recipe-manager-row .manager-actions{
  display:flex;
  width:100%;
  align-items:center;
  gap:8px;
}
.recipe-manager-row .manager-actions .manager-show-recipe-button{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}
.recipe-manager-row .manager-actions > button:not(.manager-show-recipe-button){
  flex:0 0 auto;
  width:auto !important;
  min-width:0 !important;
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
}
.recipe-manager-row .manager-actions .delete-button{
  width:auto !important;
  min-width:0 !important;
}

/* v36 stable Recipes availability switch */
html{scrollbar-gutter:stable;}
#view-recipes .recipe-availability-control{
  width:118px;
  min-width:118px;
  height:40px;
  min-height:40px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  line-height:1;
  flex:0 0 118px;
}
#view-recipes .recipe-availability-control .availability-switch-label{
  order:-1;
  width:100%;
  text-align:center;
  font-size:.68rem;
  line-height:1;
  white-space:nowrap;
  color:var(--text-secondary);
  font-weight:700;
}
#view-recipes .recipe-availability-control .availability-switch-track{
  width:42px;
  min-width:42px;
  height:22px;
  flex:0 0 22px;
}
#view-recipes .recipe-availability-control .availability-switch-thumb{
  width:16px;
  height:16px;
}
#view-recipes .recipe-availability-control input:checked + .availability-switch-track .availability-switch-thumb{
  transform:translateX(20px);
}
#view-recipes .recipe-tools{
  min-height:48px;
  align-items:center;
}

/* v37 Recipes category manager subtab */
.recipe-category-manager-subtab{
  padding:4px 0 84px;
}
.category-subtab-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.category-subtab-header h2{margin:0 0 3px;font-size:1.05rem;}
.category-subtab-header p{margin:0;color:var(--text-secondary);font-size:.78rem;}
.category-manager-list{display:flex;flex-direction:column;gap:10px;}
.category-manager-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.category-order-controls{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.icon-button-small{
  width:32px;height:30px;min-width:32px;padding:0;
  border:1px solid var(--border);
  border-radius:8px;background:var(--surface);
  color:var(--text-primary);cursor:pointer;
}
.icon-button-small:disabled{opacity:.28;cursor:default;}
.category-manager-fields{
  display:grid;
  grid-template-columns:minmax(150px,.7fr) minmax(220px,1.3fr);
  gap:10px;
}
.category-manager-fields label{display:flex;flex-direction:column;gap:4px;}
.category-manager-fields label>span{
  font-size:.68rem;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;
}
.category-manager-fields input,
.category-manager-fields textarea{width:100%;}
.category-manager-actions{display:flex;gap:7px;align-items:center;}
@media(max-width:760px){
  .category-subtab-header{grid-template-columns:1fr 1fr;}
  .category-subtab-header>div{grid-column:1/-1;grid-row:1;}
  .category-manager-row{grid-template-columns:auto 1fr;}
  .category-manager-fields{grid-template-columns:1fr;}
  .category-manager-actions{grid-column:1/-1;justify-content:flex-end;}
}

/* v38 shared category managers */
.shared-category-manager{
  padding:8px 16px 90px;
  max-width:1200px;
  margin:0 auto;
}
.inventory-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.filter-sort-row{display:flex;align-items:end;gap:8px;flex-wrap:wrap;}
.service-toolbar{display:flex;align-items:end;gap:8px;flex-wrap:wrap;}

/* v40 recipe-style default shopping list */
#view-stock-orders .shopping-page-toolbar{margin-bottom:10px}
#view-stock-orders .shopping-final-default{display:flex;flex-direction:column;gap:10px}
.shopping-final-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:4px 2px 2px}
.shopping-final-title h2{margin:0;font-size:1.05rem}.shopping-final-title p{margin:3px 0 0;color:var(--text-secondary);font-size:.76rem}
.shopping-final-list{display:flex;flex-direction:column;gap:10px}
.shopping-final-card{grid-template-columns:minmax(0,1fr) auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:12px}
.shopping-final-card.shortage{border-color:#dc2626}.shopping-final-card.purchased{opacity:.65}
.shopping-line-details{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}.shopping-line-details span{display:flex;flex-direction:column;gap:2px}
.shopping-line-details small{font-size:.66rem;color:var(--text-secondary);text-transform:uppercase;font-weight:800}.shopping-line-details strong{font-size:.86rem}
.shopping-line-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.shopping-alternative-selector{min-width:190px;max-width:280px}.shopping-manual-packages{width:72px}
.shopping-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:1rem}.shopping-total-row strong{font-size:1.15rem}
.shopping-browser{margin:8px 0 14px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.shopping-browser-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.shopping-browser-header h3{margin:0 0 2px}.shopping-browser-header small{color:var(--text-secondary)}
@media(max-width:700px){.shopping-final-card{grid-template-columns:1fr}.shopping-line-actions{width:100%}.shopping-line-actions button:last-child{margin-left:auto}}

/* v45 checked-off shopping order history */
.checked-shopping-orders-page{padding-bottom:72px}
.shopping-checked-row{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  padding:12px;
}
.shopping-checked-row .manager-row-info small+small{
  margin-top:3px;
  opacity:.72;
}

/* v46 comprehensive dark-mode contrast pass */
body.dark-mode{
  --bg:#0f1720;
  --surface:#18222d;
  --surface2:#22303d;
  --surface3:#2b3a48;
  --text-primary:#f5f7fa;
  --text-secondary:#b8c3cf;
  --border:#3b4a59;
  --primary:#4f8cff;
  --primary-color:#4f8cff;
  --danger:#ef6a6a;
  --success:#43c27a;
  --shadow:0 10px 32px rgba(0,0,0,.42);
  color-scheme:dark;
}

body.dark-mode,
body.dark-mode main,
body.dark-mode .app-view{
  background:var(--bg);
  color:var(--text-primary);
}

body.dark-mode .topbar{
  background:rgba(15,23,32,.96)!important;
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.03);
}

body.dark-mode #side-menu,
body.dark-mode .settings-panel,
body.dark-mode .settings-page,
body.dark-mode .modal-panel,
body.dark-mode .recipe-detail-panel,
body.dark-mode .card,
body.dark-mode .manager-row,
body.dark-mode .stock-manager-row,
body.dark-mode .shopping-browser,
body.dark-mode .shopping-total-row,
body.dark-mode .category-collapse,
body.dark-mode .wizard-card,
body.dark-mode .settings-section-card,
body.dark-mode .settings-list{
  background:var(--surface)!important;
  color:var(--text-primary)!important;
  border-color:var(--border)!important;
}

body.dark-mode .manager-row:hover,
body.dark-mode .inventory-card:hover,
body.dark-mode .shopping-final-card:hover{
  background:#1d2a36!important;
}

body.dark-mode .inventory-card{
  background:var(--surface)!important;
  color:var(--text-primary)!important;
  border-color:var(--border)!important;
  box-shadow:none;
}

body.dark-mode .inventory-card-content,
body.dark-mode .inventory-card-top strong,
body.dark-mode .inventory-stock-line strong{
  color:var(--text-primary)!important;
}

body.dark-mode .inventory-card-content small,
body.dark-mode .inventory-stock-line span,
body.dark-mode .manager-row-info small,
body.dark-mode .form-header p,
body.dark-mode .editor-section p,
body.dark-mode .form-help,
body.dark-mode .detail-subtitle,
body.dark-mode .shopping-final-title p{
  color:var(--text-secondary)!important;
}

body.dark-mode .inventory-type-badge,
body.dark-mode .recipe-badge,
body.dark-mode .settings-badge{
  background:var(--surface2)!important;
  color:#dbe4ee!important;
  border:1px solid var(--border);
}

body.dark-mode .inventory-empty{
  background:#341f24!important;
  border-color:#7a3b47!important;
}

body.dark-mode .inventory-empty .inventory-stock-line strong,
body.dark-mode .inventory-empty .inventory-card-top strong{
  color:#ffb5bd!important;
}

body.dark-mode .inventory-remove-btn,
body.dark-mode .delete-button,
body.dark-mode .danger-outline{
  background:#321e23!important;
  color:#ff9ca7!important;
  border-color:#78404a!important;
}

body.dark-mode .inventory-remove-btn:hover,
body.dark-mode .delete-button:hover,
body.dark-mode .danger-outline:hover{
  background:#47252d!important;
  color:#ffd2d7!important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea{
  background:#111a23!important;
  color:var(--text-primary)!important;
  border-color:#435262!important;
  box-shadow:none!important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
  color:#82909e!important;
  opacity:1;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus{
  border-color:#74a5ff!important;
  outline:2px solid rgba(79,140,255,.28)!important;
  outline-offset:1px;
}

body.dark-mode option{
  background:#111a23;
  color:var(--text-primary);
}

body.dark-mode button,
body.dark-mode .secondary-button,
body.dark-mode .styled-action-btn,
body.dark-mode .icon-button,
body.dark-mode .icon-button-small{
  border-color:var(--border);
}

body.dark-mode .secondary-button,
body.dark-mode .styled-action-btn,
body.dark-mode .icon-button,
body.dark-mode .icon-button-small{
  background:var(--surface2)!important;
  color:var(--text-primary)!important;
}

body.dark-mode .secondary-button:hover,
body.dark-mode .styled-action-btn:hover,
body.dark-mode .icon-button:hover,
body.dark-mode .icon-button-small:hover{
  background:var(--surface3)!important;
}

body.dark-mode .primary-button,
body.dark-mode .primary-action,
body.dark-mode .menu-toggle-on{
  background:var(--primary)!important;
  color:#fff!important;
  border-color:transparent!important;
}

body.dark-mode .menu-toggle-off{
  background:var(--surface2)!important;
  color:#d2dbe5!important;
  border-color:var(--border)!important;
}

body.dark-mode .stock-progress-wrapper,
body.dark-mode .progress-track{
  background:#283543!important;
}

body.dark-mode .stock-progress-fill,
body.dark-mode #menu-progress-level{
  background:#43c27a!important;
}

body.dark-mode .inline-error,
body.dark-mode .recipe-stock-warning,
body.dark-mode .service-stock-warning{
  background:#351f24!important;
  color:#ffc1c8!important;
  border-color:#75404a!important;
}

body.dark-mode #stock-confirmation-banner{
  background:#17633d!important;
  color:#f0fff7!important;
}

body.dark-mode .empty-state,
body.dark-mode .shopping-empty-note{
  background:#141d27!important;
  color:var(--text-secondary)!important;
  border-color:#465462!important;
}

body.dark-mode .category-collapse summary,
body.dark-mode .category-tab,
body.dark-mode .sort-control,
body.dark-mode .inventory-sort-label{
  color:var(--text-primary)!important;
}

body.dark-mode .category-tab{
  background:var(--surface2);
  border-color:var(--border);
}

body.dark-mode .category-tab.active{
  background:var(--primary)!important;
  color:#fff!important;
  border-color:transparent!important;
}

body.dark-mode .recipe-badge.is-on-menu{
  background:#173b2a!important;
  color:#8be5b3!important;
}

body.dark-mode .recipe-badge.is-off-menu{
  background:#27313c!important;
  color:#b5c0cc!important;
}

body.dark-mode .rating-star{
  color:#667483!important;
}
body.dark-mode .rating-star.selected{
  color:#ffc44d!important;
}

body.dark-mode .form-actions{
  background:linear-gradient(to bottom,rgba(24,34,45,0),var(--surface) 22%)!important;
}

body.dark-mode .modal,
body.dark-mode .recipe-detail-modal{
  background:rgba(0,0,0,.62)!important;
}

body.dark-mode .detail-row,
body.dark-mode .detail-block,
body.dark-mode .detail-step,
body.dark-mode .overview-grid>div,
body.dark-mode .overview-list{
  border-color:var(--border)!important;
}

body.dark-mode a{
  color:#8fb6ff;
}

body.dark-mode ::selection{
  background:#315f9e;
  color:#fff;
}

/* Smooth theme transitions without animating layout. */
body,
.topbar,
#side-menu,
.app-view,
.card,
.manager-row,
.inventory-card,
.category-collapse,
.settings-section-card,
.settings-list-item,
input,
select,
textarea,
button{
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

/* v47 smoother shopping check-off feedback */
.shopping-final-card{
  overflow:hidden;
  transform-origin:center;
}
.shopping-final-card.shopping-checking-off{
  border-color:#4caf7d!important;
  background:color-mix(in srgb,var(--surface) 88%,#48b97a 12%)!important;
  transform:scale(.995);
}
.shopping-final-card.shopping-checking-off .shopping-line-actions button:last-child{
  background:#2f9e68!important;
  color:#fff!important;
  border-color:#2f9e68!important;
}
.shopping-final-card.shopping-checking-off-exit{
  opacity:0;
  transform:translateY(-6px) scale(.985);
  max-height:0;
  margin-top:0!important;
  margin-bottom:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border-width:0!important;
}
.shopping-final-card{
  transition:
    background-color .18s ease,
    border-color .18s ease,
    opacity .18s ease,
    transform .18s ease,
    max-height .18s ease,
    margin .18s ease,
    padding .18s ease,
    border-width .18s ease;
  max-height:220px;
}
body.dark-mode .shopping-final-card.shopping-checking-off{
  background:#183326!important;
  border-color:#398a62!important;
}

/* v48 checked-off orders header alignment */
#checked-shopping-orders-page .category-subtab-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
#checked-shopping-orders-page #close-checked-shopping-orders,
#checked-shopping-orders-page #reset-checked-shopping-orders{
  align-self:center;
  margin:0;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
#checked-shopping-orders-page .category-subtab-header > div{
  min-width:0;
}
#checked-shopping-orders-page .category-subtab-header h2,
#checked-shopping-orders-page .category-subtab-header p{
  margin-left:0;
  margin-right:0;
}
@media(max-width:700px){
  #checked-shopping-orders-page .category-subtab-header{
    grid-template-columns:1fr 1fr;
  }
  #checked-shopping-orders-page .category-subtab-header > div{
    grid-column:1/-1;
    grid-row:1;
  }
  #checked-shopping-orders-page #close-checked-shopping-orders{
    grid-column:1;
    grid-row:2;
    justify-self:start;
  }
  #checked-shopping-orders-page #reset-checked-shopping-orders{
    grid-column:2;
    grid-row:2;
    justify-self:end;
  }
}

/* v49 Menu planning quantities */
.settings-number-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0 6px;
  font-size:.86rem;
  font-weight:700;
}
.settings-number-field input{
  width:110px;
  flex:0 0 110px;
  text-align:right;
}
.settings-field-help{
  display:block;
  color:var(--text-secondary);
  line-height:1.35;
  padding-bottom:4px;
}
.expected-qty-input{
  width:82px!important;
  min-width:82px;
  height:38px;
  padding:6px 8px!important;
  text-align:center;
  font-weight:800!important;
  font-size:.95rem;
}
.expected-qty-actions{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
@media(max-width:700px){
  .settings-number-field{
    align-items:flex-start;
  }
  .expected-qty-input{
    width:72px!important;
    min-width:72px;
  }
}

/* v50 recipe list edit/remove icon buttons */
.recipe-action-icon{
  width:38px;
  min-width:38px;
  height:38px;
  padding:0!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface2);
  color:var(--text-primary);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
}
.recipe-action-icon:hover{
  background:var(--surface3);
}
.recipe-remove-icon{
  color:#c94d59;
}
.recipe-remove-icon:hover{
  background:#fff0f1;
  border-color:#e1a1a7;
  color:#a92e3b;
}
body.dark-mode .recipe-action-icon{
  background:var(--surface2)!important;
  color:var(--text-primary)!important;
  border-color:var(--border)!important;
}
body.dark-mode .recipe-action-icon:hover{
  background:var(--surface3)!important;
}
body.dark-mode .recipe-remove-icon{
  color:#ff9ca7!important;
}
body.dark-mode .recipe-remove-icon:hover{
  background:#47252d!important;
  border-color:#78404a!important;
  color:#ffd2d7!important;
}

/* v51 enforce square Recipes action icons */
#view-recipes .recipe-action-icon{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  flex:0 0 40px!important;
  aspect-ratio:1 / 1;
  padding:0!important;
  box-sizing:border-box;
  border-radius:10px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
#view-recipes .recipe-action-icon,
#view-recipes .recipe-action-icon *{
  box-sizing:border-box;
}

/* v52 Menu planned-dish control */
.expected-qty-simple{
  display:grid;
  grid-template-columns:58px minmax(112px,140px) 58px;
  align-items:center;
  gap:8px;
}
.expected-qty-simple .expected-qty-button{
  width:58px;
  min-width:58px;
  height:50px;
  min-height:50px;
  padding:0;
  border-radius:11px;
  font-size:1.05rem;
  font-weight:800;
}
.expected-qty-value-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.expected-qty-value-wrap > small{
  font-size:.65rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
  color:var(--text-secondary);
}
.expected-qty-large{
  width:100%!important;
  min-width:0!important;
  height:50px!important;
  padding:3px 8px!important;
  text-align:center!important;
  font-size:1.65rem!important;
  line-height:1!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums;
  border-radius:11px!important;
}
@media(max-width:700px){
  .expected-order-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .expected-qty-simple{
    width:100%;
    grid-template-columns:58px minmax(0,1fr) 58px;
  }
}

/* v53 Menu recipe info and quantity label */
.expected-order-row{
  position:relative;
  align-items:center;
}
.expected-order-info{
  padding-right:52px;
}
.expected-order-info-button{
  position:absolute;
  top:10px;
  right:10px;
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:9px;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:.95rem;
  line-height:1;
}
.expected-qty-value-wrap > small{
  white-space:nowrap;
  text-transform:none;
  letter-spacing:0;
  font-size:.68rem;
}
@media(max-width:700px){
  .expected-order-info{
    padding-right:50px;
  }
  .expected-order-info-button{
    top:10px;
    right:10px;
  }
}

/* v54 recipe ingredient autocomplete editor */
.ingredient-editor-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.ingredient-editor-icon{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  flex:0 0 40px!important;
  aspect-ratio:1/1;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:10px!important;
  font-size:1rem;
  line-height:1;
}
.recipe-ingredient-autocomplete-row{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) 110px 92px 40px;
  gap:8px!important;
  align-items:start!important;
  position:relative;
  margin-bottom:10px!important;
}
.ingredient-name-autocomplete{
  position:relative;
  min-width:0;
}
.editor-ingredient-name{
  width:100%!important;
  min-width:0!important;
}
.ingredient-suggestions{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:80;
  display:flex;
  flex-direction:column;
  padding:5px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.ingredient-suggestion{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text-primary);
  text-align:left;
  border-radius:8px;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  cursor:pointer;
}
.ingredient-suggestion:hover,
.ingredient-suggestion:focus{
  background:var(--surface2);
}
.ingredient-suggestion strong{
  font-size:.86rem;
}
.ingredient-suggestion small{
  color:var(--text-secondary);
  font-size:.7rem;
}
.recipe-ingredient-autocomplete-row .ingredient-stock-hint{
  grid-column:1/4;
  padding-left:2px;
  margin-top:-3px;
}
.recipe-ingredient-remove{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0!important;
  border-radius:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.dark-mode .ingredient-suggestions{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}
body.dark-mode .ingredient-suggestion:hover,
body.dark-mode .ingredient-suggestion:focus{
  background:var(--surface2)!important;
}
@media(max-width:760px){
  .recipe-ingredient-autocomplete-row{
    grid-template-columns:minmax(0,1fr) 92px 40px;
  }
  .ingredient-name-autocomplete{
    grid-column:1/-1;
  }
  .editor-ingredient-amount{
    grid-column:1;
  }
  .editor-ingredient-unit{
    grid-column:2;
  }
  .recipe-ingredient-remove{
    grid-column:3;
  }
  .recipe-ingredient-autocomplete-row .ingredient-stock-hint{
    grid-column:1/-1;
  }
}

/* v55 actionable missing Pantry warnings in Recipes */
.recipe-missing-pantry-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:7px;
}
.recipe-missing-pantry-warning{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.recipe-missing-pantry-warning > span{
  min-width:0;
  flex:1;
}
.recipe-missing-pantry-add{
  width:34px!important;
  min-width:34px!important;
  max-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  aspect-ratio:1/1;
  flex:0 0 34px;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid currentColor;
  border-radius:9px;
  background:transparent;
  color:inherit;
  font-size:1.15rem;
  font-weight:800;
  cursor:pointer;
}
.recipe-missing-pantry-add:hover{
  background:rgba(185,28,28,.08);
}
body.dark-mode .recipe-missing-pantry-add:hover{
  background:rgba(255,156,167,.12);
}

/* v58 generic-controlled ABV */
.generic-abv-option{
  grid-column:1/-1;
  margin-top:2px!important;
}
#generic-ingredient-abv-enabled{
  width:auto!important;
}
#abv-form-group[style*="display: none"]{
  display:none!important;
}

/* v59 compact sticky workflow navigation */
.tab-navigation{
  position:sticky;
  bottom:10px;
  z-index:44;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:22px auto 10px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
}
.tab-navigation button{
  min-height:34px!important;
  height:34px!important;
  padding:0 12px!important;
  font-size:.75rem!important;
  border-radius:8px!important;
  white-space:nowrap;
}
body.dark-mode .tab-navigation{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  border-color:var(--border);
}

/* Keep page-specific floating creation actions clear of sticky navigation. */
#view-recipes .new-recipe-footer,
.new-inventory-footer,
.new-generic-ingredient-footer{
  bottom:66px!important;
}
#view-recipes.recipe-editing .new-recipe-footer,
#view-current-stock.inventory-editing .new-inventory-footer,
#view-generic-ingredients .generic-ingredient-editor:not(.hidden) ~ .new-generic-ingredient-footer{
  display:none!important;
}

/* Generic-inherited Pantry unit */
#ingredient-unit.locked-by-generic{
  opacity:.78;
  cursor:not-allowed;
  background:var(--surface2)!important;
}
#ingredient-unit.locked-by-generic + *{}
@media(max-width:700px){
  .tab-navigation{
    bottom:8px;
    max-width:calc(100% - 16px);
    margin-bottom:8px;
  }
  .tab-navigation button{
    padding:0 10px!important;
    font-size:.72rem!important;
  }
  #view-recipes .new-recipe-footer,
  .new-inventory-footer,
  .new-generic-ingredient-footer{
    bottom:62px!important;
  }
}

/* v60 recipe URL importer */
.recipe-import-card{max-width:900px}
.recipe-import-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.recipe-import-status{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);font-size:.8rem}
.recipe-import-status.info,.recipe-import-status.loading{background:var(--surface2);color:var(--text-primary)}
.recipe-import-status.success{background:#ecfdf3;color:#166534;border-color:#86efac}
.recipe-import-status.error{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.recipe-import-advanced{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.recipe-import-advanced summary{cursor:pointer;font-weight:800}
.recipe-import-advanced textarea{margin:10px 0}
body.dark-mode .recipe-import-status.success{background:#173b2a;color:#9de8bc;border-color:#347a56}
body.dark-mode .recipe-import-status.error{background:#351f24;color:#ffc1c8;border-color:#75404a}

/* v62 recipe-editor local sticky navigation */
.recipe-editor-bottom-nav{
  position:sticky;
  bottom:10px;
  z-index:48;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:min(520px,calc(100% - 20px));
  margin:18px auto 8px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
}
.recipe-editor-bottom-nav button{
  min-height:34px!important;
  height:34px!important;
  padding:0 12px!important;
  font-size:.75rem!important;
  border-radius:8px!important;
}
.recipe-editor-step-label{
  min-width:0;
  text-align:center;
  font-size:.72rem;
  font-weight:800;
  color:var(--text-secondary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.dark-mode .recipe-editor-bottom-nav{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
}
#view-recipes.recipe-editing .new-recipe-footer{
  bottom:66px!important;
}
@media(max-width:700px){
  .recipe-editor-bottom-nav{
    bottom:8px;
    width:calc(100% - 14px);
  }
  .recipe-editor-bottom-nav button{
    padding:0 10px!important;
    font-size:.72rem!important;
  }
}

/* v63 persistent Recipe editor actions */
#drink-form > .recipe-wizard-step > .form-actions.wizard-actions{
  display:none!important;
}
.recipe-editor-savebar{
  position:sticky;
  bottom:58px;
  z-index:49;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  width:min(520px,calc(100% - 20px));
  margin:18px auto 0;
  padding:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  backdrop-filter:blur(10px);
}
.recipe-editor-savebar button{
  min-height:36px!important;
  height:36px!important;
  padding:0 14px!important;
  font-size:.78rem!important;
  border-radius:8px!important;
}
body.dark-mode .recipe-editor-savebar{
  background:color-mix(in srgb,var(--surface) 94%,transparent);
}
.recipe-action-click{
  animation:recipeActionPress .30s ease;
}
.recipe-action-save{
  box-shadow:0 0 0 4px rgba(67,194,122,.16)!important;
}
.recipe-action-cancel{
  box-shadow:0 0 0 4px rgba(239,106,106,.14)!important;
}
@keyframes recipeActionPress{
  0%{transform:scale(1)}
  42%{transform:scale(.94)}
  100%{transform:scale(1)}
}

/* In-page discard prompt */
.recipe-cancel-confirm{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(10,15,20,.48);
  backdrop-filter:blur(4px);
}
.recipe-cancel-confirm.hidden{display:none!important}
.recipe-cancel-confirm-card{
  width:min(520px,100%);
  padding:16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  color:var(--text-primary);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  animation:recipeConfirmIn .20s ease;
}
.recipe-cancel-confirm-card h3{margin:0 0 5px}
.recipe-cancel-confirm-card p{margin:0;color:var(--text-secondary)}
.recipe-cancel-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}
@keyframes recipeConfirmIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* The local section navigator remains the lowest sticky control. */
.recipe-editor-bottom-nav{
  bottom:10px!important;
  margin-top:8px!important;
}
@media(max-width:700px){
  .recipe-editor-savebar{
    bottom:56px;
    width:calc(100% - 14px);
  }
  .recipe-editor-savebar button{
    flex:1;
  }
  .recipe-cancel-confirm{
    padding:10px;
  }
  .recipe-cancel-confirm-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* v64 recipe/dish autocomplete */
.dish-name-autocomplete{
  position:relative;
  width:100%;
}
.dish-name-autocomplete > input{
  width:100%;
}
#dish-name-suggestions{
  z-index:95;
}
.recipe-save-success{
  background:#2f9e68!important;
  border-color:#2f9e68!important;
  color:#fff!important;
}

/* v66 missing Pantry product guidance in Shopping list */
.shopping-missing-product-card{
  border-width:1.5px!important;
}
.shopping-missing-product-warning{
  margin-top:4px;
  font-weight:800;
  color:#b4232f;
}
.shopping-missing-product-help{
  margin-top:5px;
  max-width:720px;
  line-height:1.35;
  color:var(--text-secondary)!important;
}
.shopping-add-missing-product{
  white-space:nowrap;
}
body.dark-mode .shopping-missing-product-warning{
  color:#ffb5bd!important;
}
@media(max-width:700px){
  .shopping-missing-product-card .shopping-line-actions{
    margin-top:8px;
  }
  .shopping-add-missing-product{
    width:100%;
  }
}

/* v67 clickable Recipe title + ingredient summary */
#view-recipes .recipe-card-open-area > strong,
#view-recipes .recipe-card-open-area > small:first-of-type{
  cursor:pointer;
}
#view-recipes .recipe-card-open-area > strong:hover,
#view-recipes .recipe-card-open-area > small:first-of-type:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}
#view-recipes .recipe-card-open-area > strong:focus-visible,
#view-recipes .recipe-card-open-area > small:first-of-type:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}

/* v68 compact recipe rating + actions */
#view-recipes .recipe-row-rating-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  width:100%;
  padding:0!important;
  margin-top:6px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#view-recipes .recipe-item-rating{
  display:flex;
  align-items:center;
  gap:1px;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#view-recipes .recipe-item-rating .rating-star{
  width:24px!important;
  min-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
  font-size:15px!important;
  line-height:24px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#view-recipes .recipe-item-rating .rating-clear{
  min-height:24px!important;
  height:24px!important;
  padding:0 5px!important;
  font-size:.66rem!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#view-recipes .recipe-row-rating-wrap .manager-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0!important;
  width:auto!important;
}

/* v69 missing Pantry warning below recipe controls */
#view-recipes .recipe-missing-pantry-below{
  grid-column:1/-1;
  width:100%;
  margin-top:4px;
}
#view-recipes .recipe-missing-pantry-warning-orange{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  padding:7px 9px;
  border:1px solid #f4b56a;
  border-radius:9px;
  background:#fff7ed;
  color:#b45309;
}
#view-recipes .recipe-missing-pantry-text{
  flex:1;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  font-size:.76rem;
  font-weight:800;
  cursor:pointer;
}
#view-recipes .recipe-missing-pantry-text:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}
#view-recipes .recipe-missing-pantry-warning-orange .recipe-missing-pantry-add{
  color:#b45309;
  border-color:#f4b56a;
}
body.dark-mode #view-recipes .recipe-missing-pantry-warning-orange{
  background:#3a2817;
  color:#ffbf69;
  border-color:#8b5a22;
}
body.dark-mode #view-recipes .recipe-missing-pantry-warning-orange .recipe-missing-pantry-add{
  color:#ffbf69!important;
  border-color:#8b5a22!important;
}
.pantry-help-panel{
  width:min(680px,calc(100% - 24px));
}
.pantry-help-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  line-height:1.5;
}
.pantry-help-content p{
  margin:0;
}
.pantry-help-content ol{
  margin:0;
  padding-left:22px;
}
.pantry-help-content li+li{
  margin-top:8px;
}

/* v70 recipe warning placement + pantry help modal layout */
#view-recipes .recipe-manager-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "info menu"
    "rating rating"
    "warning warning";
  align-items:start!important;
}
#view-recipes .recipe-manager-row > .manager-row-info{
  grid-area:info;
  min-width:0;
}
#view-recipes .recipe-manager-row > .recipe-menu-control{
  grid-area:menu;
}
#view-recipes .recipe-manager-row > .recipe-row-rating-wrap{
  grid-area:rating;
  width:100%!important;
  justify-content:flex-end!important;
}
#view-recipes .recipe-manager-row > .recipe-missing-pantry-list,
#view-recipes .recipe-manager-row > .recipe-stock-warning{
  grid-area:warning;
  width:100%!important;
  margin-top:6px!important;
}
#view-recipes .recipe-missing-pantry-below{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#view-recipes .recipe-missing-pantry-warning-orange{
  width:100%;
  box-sizing:border-box;
}

/* Pantry help modal always fully visible below sticky header */
#pantry-help-modal{
  position:fixed!important;
  inset:0!important;
  z-index:140!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding:72px 14px 14px!important;
  overflow:hidden!important;
  background:rgba(10,15,20,.48)!important;
  backdrop-filter:blur(4px);
}
#pantry-help-modal.hidden{
  display:none!important;
}
#pantry-help-modal .pantry-help-panel{
  width:min(720px,100%)!important;
  max-height:calc(100vh - 86px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
#pantry-help-modal .modal-header{
  flex:0 0 auto;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--border);
}
#pantry-help-modal .modal-header h2{
  margin:0 0 4px;
  font-size:1.2rem;
}
#pantry-help-modal .modal-header p{
  margin:0;
  color:var(--text-secondary);
  line-height:1.35;
}
#pantry-help-modal .pantry-help-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto!important;
  padding:18px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#pantry-help-modal .pantry-help-content > p:first-child{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
#pantry-help-modal .pantry-help-content ol{
  counter-reset:pantrystep;
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#pantry-help-modal .pantry-help-content li{
  counter-increment:pantrystep;
  position:relative;
  padding:10px 12px 10px 44px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
#pantry-help-modal .pantry-help-content li::before{
  content:counter(pantrystep);
  position:absolute;
  left:12px;
  top:10px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
}
#pantry-help-modal .pantry-help-content li strong{
  display:block;
  margin-bottom:2px;
}
#pantry-help-modal .pantry-help-content > p:last-child{
  padding:12px 14px;
  border-left:3px solid var(--primary);
  background:color-mix(in srgb,var(--surface2) 88%,transparent);
  border-radius:8px;
}
body.dark-mode #pantry-help-modal .pantry-help-content li,
body.dark-mode #pantry-help-modal .pantry-help-content > p:first-child{
  background:var(--surface2)!important;
}
@media(max-width:700px){
  #pantry-help-modal{
    padding:64px 8px 8px!important;
  }
  #pantry-help-modal .pantry-help-panel{
    max-height:calc(100vh - 72px)!important;
  }
  #pantry-help-modal .pantry-help-content{
    padding:14px;
  }
}

/* v71 unified full-height boxed modal system */
:root{
  --app-modal-gap:14px;
  --app-header-offset:62px;
}
.modal,
.recipe-detail-modal{
  position:fixed!important;
  inset:0!important;
  z-index:140!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  padding:
    calc(var(--app-header-offset) + var(--app-modal-gap))
    var(--app-modal-gap)
    var(--app-modal-gap)!important;
  overflow:hidden!important;
  background:rgba(10,15,20,.46)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.modal.hidden,
.recipe-detail-modal.hidden{
  display:none!important;
}

/* Treat actual popup panels consistently; exclude ordinary in-page .modal-panel containers. */
.modal > .modal-panel,
.recipe-detail-modal > .recipe-detail-panel{
  width:min(760px,100%)!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  color:var(--text-primary)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.30)!important;
}

/* Keep popup headers visible; content scrolls beneath. */
.modal > .modal-panel > .modal-header,
.recipe-detail-modal > .recipe-detail-panel > .modal-header{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:2;
  padding:16px 18px 13px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface)!important;
}

/* Pantry help: use full remaining panel height for scrollable content. */
#pantry-help-modal{
  padding:
    calc(var(--app-header-offset) + var(--app-modal-gap))
    var(--app-modal-gap)
    var(--app-modal-gap)!important;
}
#pantry-help-modal .pantry-help-panel{
  width:min(760px,100%)!important;
  height:100%!important;
  max-height:none!important;
}
#pantry-help-modal .pantry-help-content{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding:18px!important;
}

/* Recipe popup */
#recipe-detail-modal .recipe-detail-panel{
  width:min(860px,100%)!important;
}
#recipe-detail-modal #recipe-detail-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  padding:18px!important;
}

/* Checklist editor popup */
#checklist-editor-modal .recipe-detail-panel{
  width:min(720px,100%)!important;
}
#checklist-editor-modal #checklist-editor-list{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  margin:0!important;
  padding:16px 18px!important;
}
#checklist-editor-modal #add-checklist-item{
  flex:0 0 auto;
  margin:0 18px 10px!important;
}
#checklist-editor-modal .form-actions{
  flex:0 0 auto!important;
  position:static!important;
  margin:0!important;
  padding:10px 18px 16px!important;
  background:var(--surface)!important;
  border-top:1px solid var(--border);
}

/* Consistent close buttons */
.modal > .modal-panel .modal-header .icon-button,
.recipe-detail-modal > .recipe-detail-panel .modal-header .icon-button{
  flex:0 0 38px;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0!important;
  border-radius:10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Softer body sections inside recipe modal */
#recipe-detail-modal .detail-block,
#recipe-detail-modal .detail-row,
#recipe-detail-modal .detail-step,
#recipe-detail-modal .overview-list{
  border-radius:12px;
}
body.dark-mode .modal > .modal-panel,
body.dark-mode .recipe-detail-modal > .recipe-detail-panel{
  background:var(--surface)!important;
  border-color:var(--border)!important;
}
@media(max-width:700px){
  :root{
    --app-modal-gap:8px;
    --app-header-offset:56px;
  }
  .modal,
  .recipe-detail-modal{
    padding:
      calc(var(--app-header-offset) + var(--app-modal-gap))
      var(--app-modal-gap)
      var(--app-modal-gap)!important;
  }
  .modal > .modal-panel,
  .recipe-detail-modal > .recipe-detail-panel{
    border-radius:14px!important;
  }
  #pantry-help-modal .pantry-help-content,
  #recipe-detail-modal #recipe-detail-body{
    padding:14px!important;
  }
}

/* v72: keep the main header unobscured and use the page side-gap above modals */
:root{
  --app-modal-gap:14px;
  --app-header-height:58px;
}

/* The header must remain above the blurred modal backdrop. */
.app-header,
header.app-header,
#app-header,
.top-header,
header{
  z-index:200!important;
}

/* Backdrop starts below the header. The space between header and panel
   is exactly the same as the side margin. */
.modal,
.recipe-detail-modal,
#pantry-help-modal{
  top:var(--app-header-height)!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  height:auto!important;
  padding:
    var(--app-modal-gap)
    var(--app-modal-gap)
    var(--app-modal-gap)!important;
}

/* Popup fills the remaining vertical space inside those equal margins. */
.modal > .modal-panel,
.recipe-detail-modal > .recipe-detail-panel,
#pantry-help-modal .pantry-help-panel{
  height:100%!important;
  max-height:none!important;
}

@media(max-width:700px){
  :root{
    --app-modal-gap:8px;
    --app-header-height:56px;
  }
}







/* v79 recipe creation choice */
.recipe-create-choice{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 0 90px;
}
.recipe-create-choice.hidden{display:none!important}
.recipe-create-choice-card{
  width:min(760px,100%);
  padding:20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.recipe-create-choice-copy h2{margin:4px 0 6px;font-size:1.35rem}
.recipe-create-choice-copy p{margin:0;color:var(--text-secondary);line-height:1.45}
.recipe-create-choice-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
}
.recipe-start-option{
  min-height:150px;
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface2);
  color:var(--text-primary);
  cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.recipe-start-option:hover,.recipe-start-option:focus-visible{
  transform:translateY(-2px);
  border-color:var(--primary);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  outline:none;
}
.recipe-start-option-icon{
  width:40px;min-width:40px;height:40px;
  border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);font-size:1.1rem;
}
.recipe-start-option-copy{display:flex;flex-direction:column;gap:7px}
.recipe-start-option-copy strong{font-size:.95rem}
.recipe-start-option-copy small{color:var(--text-secondary);line-height:1.4}
.alpha-badge{
  display:inline-flex;align-items:center;min-height:20px;padding:0 6px;margin-left:4px;
  border-radius:6px;background:#fff3cd;color:#8a5b00;border:1px solid #efd38a;
  font-size:.61rem;text-transform:uppercase;letter-spacing:.04em;
}
.recipe-create-choice-actions{display:flex;justify-content:flex-end;margin-top:16px}
body.dark-mode .recipe-start-option{background:var(--surface2)!important}
body.dark-mode .alpha-badge{background:#493813;color:#ffd87a;border-color:#765d20}
@media(max-width:700px){
  .recipe-create-choice{align-items:flex-start;padding-top:10px}
  .recipe-create-choice-options{grid-template-columns:1fr}
  .recipe-start-option{min-height:120px}
}

/* v81 autosave feedback */
#recipe-editor-step-label{
  transition:color .18s ease,opacity .18s ease;
}
.recipe-save-success{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

/* v82 hard tier guard for recipe financial fields */
#menu-price-field[hidden],
#editor-margin-wrap[hidden]{
  display:none!important;
}
#menu-price-field.hidden,
#editor-margin-wrap.hidden{
  display:none!important;
}

/* v83 PWA */
.pwa-install-setting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.pwa-install-setting .settings-list-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.pwa-install-setting .settings-list-copy small{
  color:var(--text-secondary);
  line-height:1.35;
}
@media(display-mode:standalone){
  body{
    overscroll-behavior-y:none;
  }
}

/* v84 guided Pantry item setup from recipe warning */
#pantry-help-modal .pantry-help-content{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pantry-guide-intro{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
.pantry-guide-intro strong{
  display:block;
  margin-bottom:4px;
  font-size:1rem;
}
.pantry-guide-intro p{
  margin:0;
  color:var(--text-secondary);
  line-height:1.4;
}
.pantry-guide-step{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface2);
}
.pantry-guide-step-number{
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
}
.pantry-guide-step-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
  min-width:0;
}
.pantry-guide-step-body > p,
.pantry-guide-step-body > .pantry-guide-link{
  grid-column:1/-1;
}
.pantry-guide-step-body p{
  margin:0;
  color:var(--text-secondary);
  line-height:1.4;
  font-size:.76rem;
}
.pantry-guide-step-body label{
  min-width:0;
}
.pantry-guide-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:9px;
  background:var(--surface);
  border:1px solid var(--border);
}
.pantry-guide-link span{
  color:var(--text-secondary);
  font-size:.74rem;
}
.pantry-guide-actions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:10px 0 2px;
  background:linear-gradient(to bottom,transparent,var(--surface) 28%);
}
body.dark-mode .pantry-guide-intro,
body.dark-mode .pantry-guide-step{
  background:var(--surface2)!important;
}
body.dark-mode .pantry-guide-link{
  background:var(--surface)!important;
}
@media(max-width:700px){
  .pantry-guide-step-body{
    grid-template-columns:1fr;
  }
  .pantry-guide-step-body > p,
  .pantry-guide-step-body > .pantry-guide-link{
    grid-column:1;
  }
  .pantry-guide-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
}

/* v85 floating creation actions + safe bottom scroll space */
:root{
  --page-edge-gap:14px;
  --floating-action-height:44px;
  --floating-action-clearance:82px;
}

/* New recipe / new Pantry item float at bottom-right with equal edge margins. */
.new-recipe-footer,
.new-inventory-footer{
  position:fixed!important;
  right:var(--page-edge-gap)!important;
  bottom:var(--page-edge-gap)!important;
  left:auto!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  z-index:60!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none;
}

.new-recipe-footer .new-recipe-button,
.new-inventory-footer .new-recipe-button,
.new-inventory-footer button{
  pointer-events:auto;
  min-height:var(--floating-action-height)!important;
  height:var(--floating-action-height)!important;
  padding:0 16px!important;
  border-radius:12px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

/* List pages get extra scroll room so their last item can pass behind the FAB. */
#view-recipes,
#view-current-stock,
#view-generic-ingredients,
#view-expected-orders,
#view-stock-orders,
#view-checklist,
#view-service{
  padding-bottom:calc(var(--floating-action-clearance) + var(--page-edge-gap))!important;
}

/* Specifically ensure the actual list containers can scroll clear of the action. */
#editor-drink-list,
#current-stock-list,
#generic-ingredient-list,
#expected-orders-list,
#purchase-requirements-summary,
#checklist-items,
#drink-list{
  padding-bottom:var(--floating-action-clearance)!important;
}

/* Do not show floating creation buttons while their editors are open. */
#view-recipes.recipe-editing .new-recipe-footer,
#view-current-stock.inventory-editing .new-inventory-footer,
#view-generic-ingredients .generic-ingredient-editor:not(.hidden) ~ .new-generic-ingredient-footer{
  display:none!important;
}

/* Keep other floating controls above the creation button if needed. */
.recipe-editor-savebar,
.recipe-editor-bottom-nav{
  z-index:70!important;
}

@media(max-width:700px){
  :root{
    --page-edge-gap:10px;
    --floating-action-height:42px;
    --floating-action-clearance:76px;
  }

  .new-recipe-footer .new-recipe-button,
  .new-inventory-footer .new-recipe-button,
  .new-inventory-footer button{
    min-height:42px!important;
    height:42px!important;
    padding:0 14px!important;
    border-radius:11px!important;
  }
}



/* v88 canonical compact category/filter header */
:root{
  --category-control-height:30px;
  --category-control-radius:8px;
  --category-header-pad:6px;
  --category-row-gap:5px;
}

/* Sticky wrapper sits directly below the main header and owns all vertical spacing. */
.compact-category-header{
  position:sticky!important;
  top:var(--app-header-height)!important;
  z-index:52!important;
  display:flex!important;
  flex-direction:column!important;
  gap:var(--category-row-gap)!important;
  margin:0!important;
  padding:var(--category-header-pad) 0!important;
  background:color-mix(in srgb,var(--bg) 96%,transparent)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  overflow:visible!important;
}

/* One row: full-width categories with the filter button overlaid on the right. */
.compact-category-topline{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:calc(var(--category-control-height) + 4px)!important;
  min-height:calc(var(--category-control-height) + 4px)!important;
  margin:0!important;
  padding:2px 0!important; /* actual clearance so category borders cannot be clipped */
  box-sizing:border-box!important;
  overflow:visible!important;
}

.compact-category-pill-scroller{
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0 calc(var(--category-control-height) + 8px) 0 0!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
.compact-category-pill-scroller::-webkit-scrollbar{display:none!important;}

.compact-category-block{
  display:block!important;
  height:var(--category-control-height)!important;
  min-height:var(--category-control-height)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.compact-category-summary-hidden{display:none!important;}

.compact-category-block > .category-tabs{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-width:max-content!important;
  height:var(--category-control-height)!important;
  margin:0!important;
  padding:0!important;
  gap:5px!important;
  overflow:visible!important;
}

.compact-category-header .category-tabs > button,
.compact-category-header .category-tabs > .category-tab{
  flex:1 0 auto!important;
  height:var(--category-control-height)!important;
  min-height:var(--category-control-height)!important;
  max-height:var(--category-control-height)!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:var(--category-control-radius)!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  font-size:.64rem!important;
  line-height:1!important;
  font-weight:700!important;
  overflow:visible!important;
}

/* Filter button aligns to the same control box, inside the 2px row clearance. */
.compact-category-header .compact-filter-toggle{
  position:absolute!important;
  top:2px!important;
  right:0!important;
  transform:none!important;
  z-index:5!important;
  width:var(--category-control-height)!important;
  min-width:var(--category-control-height)!important;
  max-width:var(--category-control-height)!important;
  height:var(--category-control-height)!important;
  min-height:var(--category-control-height)!important;
  max-height:var(--category-control-height)!important;
  margin:0!important;
  padding:0!important;
  border-radius:var(--category-control-radius)!important;
  border:1px solid #b8c2cc!important;
  background:#f4f7fa!important;
  color:#334155!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
}
.compact-category-header .compact-filter-toggle.is-open{
  background:#2563eb!important;
  color:#fff!important;
  border-color:#1d4ed8!important;
}
body.dark-mode .compact-filter-toggle{
  background:#243241!important;
  color:#dce6f1!important;
  border-color:#4b5f72!important;
}
body.dark-mode .compact-filter-toggle.is-open{
  background:#3b82f6!important;
  color:#fff!important;
  border-color:#60a5fa!important;
}

/* Expanded controls: no extra blank band above or below. */
.compact-category-header .compact-filter-row{
  position:static!important;
  display:flex!important;
  align-items:flex-end!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.compact-category-header .compact-filter-row.hidden{
  display:none!important;
}
.compact-category-header .compact-filter-row select,
.compact-category-header .compact-filter-row input:not([type="checkbox"]){
  min-height:30px!important;
  height:30px!important;
  font-size:.72rem!important;
  padding:3px 7px!important;
}
.compact-category-header .compact-filter-row .recipe-tool-icon,
.compact-category-header .compact-filter-row .category-manager-launch{
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
}

/* Remove the actual source of the oversized gap below categories on list pages. */
#view-recipes .compact-category-header + #menu-editor,
#view-generic-ingredients .compact-category-header + #generic-ingredient-manager,
#view-current-stock .compact-category-header + #stock-confirmation-banner,
#view-service .compact-category-header + #drink-list,
#view-expected-orders .compact-category-header + #expected-orders-list{
  margin-top:0!important;
  padding-top:0!important;
}

#view-recipes #menu-editor,
#view-recipes #menu-editor > .modal-panel,
#view-recipes #drink-manager,
#view-recipes #editor-drink-list,
#view-generic-ingredients #generic-ingredient-manager,
#view-current-stock #current-stock-list,
#view-service #drink-list{
  margin-top:0!important;
}

/* Keep only a small visual separation from the first card/list row. */
#view-recipes #editor-drink-list,
#view-generic-ingredients #generic-ingredient-list,
#view-current-stock #current-stock-list,
#view-service #drink-list{
  padding-top:2px!important;
}

@media(max-width:700px){
  :root{
    --category-control-height:28px;
    --category-control-radius:7px;
    --category-header-pad:5px;
    --category-row-gap:4px;
  }
  .compact-category-header .category-tabs > button,
  .compact-category-header .category-tabs > .category-tab{
    padding:0 9px!important;
    font-size:.62rem!important;
  }
  .compact-category-header .compact-filter-row select,
  .compact-category-header .compact-filter-row input:not([type="checkbox"]){
    min-height:28px!important;
    height:28px!important;
  }
  .compact-category-header .compact-filter-row .recipe-tool-icon,
  .compact-category-header .compact-filter-row .category-manager-launch{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
  }
}

/* v89 structural category-header fix: no legacy <details> wrapper */
.compact-category-header{
  position:sticky!important;
  top:var(--app-header-height)!important;
  z-index:52!important;
  width:100%!important;
  margin:0!important;
  padding:6px 0 4px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  background:color-mix(in srgb,var(--bg) 96%,transparent)!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

.compact-category-topline{
  position:relative!important;
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:1px 0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

.compact-category-pill-scroller{
  width:100%!important;
  height:30px!important;
  margin:0!important;
  padding:0 38px 0 0!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
.compact-category-pill-scroller::-webkit-scrollbar{display:none!important;}

.compact-category-tabs{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:max-content!important;
  height:30px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

.compact-category-tabs > button,
.compact-category-tabs > .category-tab{
  flex:1 0 auto!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:.64rem!important;
}

.compact-category-header .compact-filter-toggle{
  position:absolute!important;
  top:1px!important;
  right:0!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
  z-index:4!important;
}

#view-recipes .compact-category-header .compact-filter-row,
#view-generic-ingredients .compact-category-header .compact-filter-row,
#view-current-stock .compact-category-header .compact-filter-row,
#view-service .compact-category-header .compact-filter-row,
#view-expected-orders .compact-category-header .compact-filter-row,
#view-stock-orders .compact-category-header .compact-filter-row{
  position:static!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:flex-end!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.compact-category-header .compact-filter-row.hidden{
  display:none!important;
}

/* Remove the leftover blank area from page-level toolbar/list spacing. */
#view-recipes > #menu-editor,
#view-generic-ingredients > #generic-ingredient-manager,
#view-service > #drink-list,
#view-expected-orders > #expected-orders-list{
  margin-top:0!important;
  padding-top:0!important;
}
#view-recipes #menu-editor > .modal-panel,
#view-recipes #drink-manager,
#view-recipes #editor-drink-list{
  margin-top:0!important;
  padding-top:0!important;
}
#view-current-stock > #stock-confirmation-banner.hidden + #current-stock-list,
#view-current-stock > #current-stock-list{
  margin-top:0!important;
  padding-top:0!important;
}

@media(max-width:700px){
  .compact-category-header{
    padding:5px 0 3px!important;
  }
  .compact-category-topline{
    height:30px!important;
    min-height:30px!important;
  }
  .compact-category-pill-scroller,
  .compact-category-tabs{
    height:28px!important;
  }
  .compact-category-tabs > button,
  .compact-category-tabs > .category-tab{
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    border-radius:7px!important;
    padding:0 9px!important;
  }
  .compact-category-header .compact-filter-toggle{
    top:1px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    border-radius:7px!important;
  }
  .compact-category-pill-scroller{
    padding-right:36px!important;
  }
}

/* v90 unified spacing around category/filter block */
:root{
  --category-edge-gap:8px;
}

/* Use the same gap on all four visual sides:
   header -> categories, page side -> controls, categories/filters -> content. */
.compact-category-header{
  top:var(--app-header-height)!important;
  padding:
    var(--category-edge-gap)
    var(--category-edge-gap)
    var(--category-edge-gap)!important;
  margin:0!important;
  gap:var(--category-edge-gap)!important;
  box-sizing:border-box!important;
}

/* The internal row uses the full available width inside the same side gap. */
.compact-category-topline{
  width:100%!important;
  margin:0!important;
  padding:1px 0!important;
  box-sizing:border-box!important;
}

.compact-category-pill-scroller{
  padding-right:calc(var(--category-control-height) + var(--category-edge-gap))!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Expanded filter row gets no extra hidden spacing;
   the wrapper gap above/below is the single source of spacing. */
.compact-category-header .compact-filter-row{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  gap:var(--category-edge-gap)!important;
  box-sizing:border-box!important;
}

/* Remove any extra gap added by the following page content. */
.compact-category-header + *,
#view-recipes > #menu-editor,
#view-generic-ingredients > #generic-ingredient-manager,
#view-current-stock > #stock-confirmation-banner,
#view-service > #drink-list,
#view-expected-orders > #expected-orders-list,
#view-stock-orders > #shopping-browser{
  margin-top:0!important;
}

/* When the first child below the header has its own top padding, suppress it. */
#view-recipes #editor-drink-list,
#view-generic-ingredients #generic-ingredient-list,
#view-current-stock #current-stock-list,
#view-service #drink-list,
#view-expected-orders #expected-orders-list{
  padding-top:0!important;
}

/* Keep filter button aligned within the same side inset. */
.compact-category-header .compact-filter-toggle{
  right:0!important;
}

@media(max-width:700px){
  :root{
    --category-edge-gap:8px;
  }
}

/* v91 filter toggle state + invariant sticky header offset */
.compact-category-header{
  position:sticky!important;
  top:calc(var(--app-header-height) + var(--category-edge-gap))!important;
  z-index:52!important;
  margin:0!important;
  transform:none!important;
}

/* Ensure hidden always wins over generic display:flex rules. */
.compact-category-header .compact-filter-row.hidden{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}

/* Open state gets its normal layout back. */
.compact-category-header .compact-filter-row:not(.hidden){
  display:flex!important;
  visibility:visible!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* Keep the top gap visually constant while the page scrolls. */
.topbar{
  position:sticky!important;
  top:0!important;
  z-index:200!important;
}
.compact-category-header{
  align-self:stretch!important;
  will-change:auto!important;
}

/* Prevent ancestor transforms/overflow from changing sticky behavior on main views. */
main,
.app-view{
  overflow:visible!important;
  transform:none!important;
}

/* v92 definitive category/filter behavior */
:root{
  --app-header-height:72px;
  --category-edge-gap:8px;
}

/* Native hidden attribute wins regardless of old toolbar CSS. */
.compact-category-header .compact-filter-row[hidden]{
  display:none!important;
}
.compact-category-header .compact-filter-row:not([hidden]){
  display:flex!important;
}

/*
  main has 24px top padding in the legacy layout.
  Pull compact-header views up by exactly those 24px, then the wrapper's own
  8px padding becomes the sole visual gap both before and after sticky engages.
*/
.has-compact-category-header > .compact-category-header{
  margin-top:-24px!important;
}

.compact-category-header{
  position:sticky!important;
  top:var(--app-header-height)!important;
  z-index:52!important;
  padding:var(--category-edge-gap)!important;
  margin-right:calc(-1 * var(--category-edge-gap))!important;
  margin-left:calc(-1 * var(--category-edge-gap))!important;
  margin-bottom:0!important;
  gap:var(--category-edge-gap)!important;
  box-sizing:border-box!important;
  background:color-mix(in srgb,var(--bg) 97%,transparent)!important;
  overflow:visible!important;
}

/* exact row alignment */
.compact-category-topline{
  height:32px!important;
  min-height:32px!important;
  padding:1px 0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.compact-category-pill-scroller{
  height:30px!important;
  padding:0 38px 0 0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.compact-category-tabs{
  height:30px!important;
  margin:0!important;
  padding:0!important;
}
.compact-category-tabs > button,
.compact-category-tabs > .category-tab{
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:8px!important;
  box-sizing:border-box!important;
}
.compact-category-header .compact-filter-toggle{
  top:1px!important;
  right:0!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  border-radius:8px!important;
  transform:none!important;
}

/* The wrapper gap is the only spacing around the expanded filter row. */
.compact-category-header .compact-filter-row{
  position:static!important;
  top:auto!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  gap:var(--category-edge-gap)!important;
  box-sizing:border-box!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* no second spacing layer after compact header */
.has-compact-category-header > .compact-category-header + *{
  margin-top:0!important;
}
#view-recipes #menu-editor,
#view-recipes #menu-editor > .modal-panel,
#view-recipes #drink-manager,
#view-recipes #editor-drink-list,
#view-generic-ingredients #generic-ingredient-manager,
#view-generic-ingredients #generic-ingredient-list,
#view-current-stock #current-stock-list,
#view-service #drink-list,
#view-expected-orders #expected-orders-list{
  margin-top:0!important;
  padding-top:0!important;
}

@media(max-width:700px){
  :root{
    --app-header-height:64px; /* actual legacy mobile .topbar height */
    --category-edge-gap:8px;
  }
  .has-compact-category-header > .compact-category-header{
    margin-top:-24px!important;
  }
  .compact-category-topline{
    height:30px!important;
    min-height:30px!important;
  }
  .compact-category-pill-scroller,
  .compact-category-tabs{
    height:28px!important;
  }
  .compact-category-tabs > button,
  .compact-category-tabs > .category-tab{
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    border-radius:7px!important;
    padding:0 9px!important;
  }
  .compact-category-header .compact-filter-toggle{
    top:1px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    border-radius:7px!important;
  }
  .compact-category-pill-scroller{
    padding-right:36px!important;
  }
}

/* v93 live typed name filter above categories */
.compact-name-filter-wrap{
  position:relative;
  width:100%;
  height:34px;
  margin:0;
  padding:0;
}
.compact-name-filter{
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 34px 0 31px!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  background:var(--surface)!important;
  color:var(--text-primary)!important;
  font-size:.78rem!important;
  line-height:1!important;
  box-sizing:border-box!important;
  outline:none;
}
.compact-name-filter:focus{
  border-color:#2563eb!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.12)!important;
}
.compact-name-filter-icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  color:var(--text-secondary);
  font-size:.9rem;
  line-height:1;
  pointer-events:none;
}
.compact-name-filter-clear{
  position:absolute!important;
  top:50%!important;
  right:5px!important;
  transform:translateY(-50%)!important;
  z-index:2!important;
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  color:var(--text-secondary)!important;
  font-size:1rem!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.compact-name-filter-clear:hover{
  background:var(--surface2)!important;
}
.compact-name-filter-clear.hidden{
  display:none!important;
}
body.dark-mode .compact-name-filter{
  background:var(--surface)!important;
  color:var(--text-primary)!important;
  border-color:var(--border)!important;
}
@media(max-width:700px){
  .compact-name-filter-wrap,
  .compact-name-filter{
    height:32px!important;
    min-height:32px!important;
  }
  .compact-name-filter{
    font-size:.75rem!important;
  }
}

/* v94 persistent name filter: always above categories */
.compact-category-header > .persistent-name-filter{
  order:-10!important;
  display:block!important;
  visibility:visible!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 34px!important;
}
.compact-category-header > .persistent-name-filter.hidden{
  display:block!important;
}
.compact-category-header > .persistent-name-filter + .compact-category-topline{
  margin-top:0!important;
}
.compact-category-header .compact-name-filter{
  display:block!important;
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(max-width:700px){
  .compact-category-header > .persistent-name-filter{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    flex-basis:32px!important;
  }
  .compact-category-header .compact-name-filter{
    height:32px!important;
    min-height:32px!important;
  }
}

/* v95 uniform list headers across operational pages */
.uniform-list-header{
  width:100%!important;
}

/* All persistent typed filters use the exact same geometry. */
.compact-category-header > .persistent-name-filter,
.checked-orders-search{
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:0!important;
}

/* Dynamic headers use the same category controls as static ones. */
.uniform-list-header .compact-category-tabs{
  width:100%!important;
}

/* Checklist and Shopping tool rows match Recipe/Preparation filter row style. */
#view-checklist .compact-filter-row,
#view-stock-orders .compact-filter-row,
#view-expected-orders .compact-filter-row{
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

/* Remove obsolete list-page intro spacing where the uniform header is present. */
.has-compact-category-header > .view-intro{
  display:none!important;
}
.has-compact-category-header > .compact-category-header + *{
  margin-top:0!important;
}

/* Checked-off order search belongs inside its subpage, with side spacing matching modal/list content. */
.checked-orders-search{
  margin:8px 0!important;
}

@media(max-width:700px){
  .compact-category-header > .persistent-name-filter,
  .checked-orders-search{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }
}

/* v96 list-header reliability */
.has-compact-category-header > .compact-category-header > .persistent-name-filter{
  display:block!important;
  order:-10!important;
  width:100%!important;
  flex:0 0 34px!important;
  opacity:1!important;
  visibility:visible!important;
}
.has-compact-category-header > .compact-category-header > .persistent-name-filter .compact-name-filter{
  display:block!important;
  width:100%!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(max-width:700px){
  .has-compact-category-header > .compact-category-header > .persistent-name-filter{
    flex-basis:32px!important;
  }
}

/* v97 language selector */
.settings-language-item{
  cursor:default!important;
}
.settings-language-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}
.settings-language-copy small{
  color:var(--text-secondary);
  line-height:1.35;
}
.settings-language-select{
  flex:0 0 auto;
  width:min(180px,42vw);
  min-height:36px;
  padding:0 30px 0 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-primary);
  font-size:.78rem;
}
body.dark-mode .settings-language-select{
  background:var(--surface2);
  color:var(--text-primary);
  border-color:var(--border);
}
@media(max-width:600px){
  .settings-language-item{
    align-items:flex-start!important;
  }
  .settings-language-select{
    width:42vw;
    min-width:120px;
  }
}


/* ===== v110: filter spacing + Recipe horizontal overflow fix ===== */

/*
 * Keep a consistent gap between the category pills and the square filter
 * toggle. The gap uses the same page-edge spacing as the right side.
 */
.compact-filter-toolbar,
.category-filter-shell,
.category-filter-header,
.category-filter-topline {
  column-gap: var(--page-gap, 12px);
}

/* Known category-strip structures: reserve a real gap before the toggle. */
.category-filter-shell > .category-pills,
.category-filter-header > .category-pills,
.category-filter-topline > .category-pills,
.compact-filter-toolbar > .category-pills,
.category-filter-shell > .category-strip,
.category-filter-header > .category-strip,
.category-filter-topline > .category-strip,
.compact-filter-toolbar > .category-strip {
  min-width: 0;
  max-width: 100%;
}

/* Never allow the filter toggle to touch/overlay the final category pill. */
.category-filter-shell .filter-toggle,
.category-filter-header .filter-toggle,
.category-filter-topline .filter-toggle,
.compact-filter-toolbar .filter-toggle,
.category-filter-shell .filter-toggle-btn,
.category-filter-header .filter-toggle-btn,
.category-filter-topline .filter-toggle-btn,
.compact-filter-toolbar .filter-toggle-btn {
  flex: 0 0 auto;
  margin-left: var(--page-gap, 12px);
}

/*
 * Recipe page must remain viewport-width. Child flex/grid content may shrink;
 * only intended inner pill rows may scroll horizontally.
 */
#view-recipes,
#view-recipes .view-content,
#view-recipes .content,
#view-recipes .drink-list,
#view-recipes #drink-manager-list,
#view-recipes #recipe-list,
#view-recipes .recipe-list,
#view-recipes .drink-card,
#view-recipes .recipe-card,
#view-recipes .recipe-card-open-area,
#view-recipes .manager-row,
#view-recipes .manager-row-info {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#view-recipes {
  width: 100%;
  overflow-x: clip;
}

#view-recipes img,
#view-recipes input,
#view-recipes select,
#view-recipes textarea {
  max-width: 100%;
}

/* Long recipe/ingredient text should wrap instead of widening the page. */
#view-recipes .drink-name,
#view-recipes .recipe-name,
#view-recipes .service-ingredients-brief,
#view-recipes .recipe-card-open-area,
#view-recipes .manager-row-info,
#view-recipes small,
#view-recipes strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Flex children are a common source of the Recipe page scrollbar. */
#view-recipes .drink-card > *,
#view-recipes .recipe-card > *,
#view-recipes .recipe-card-open-area > *,
#view-recipes .manager-row > * {
  min-width: 0;
}