:root{--bg:#f7f4ee;--surface:#fff;--surface-2:#f1ede5;--text:#22231f;--muted:#74756f;--line:#e7e1d7;--brand:#546a55;--brand-dark:#3f5140;--accent:#c98964;--danger:#b94a48;--shadow:0 16px 45px rgba(42,42,34,.08);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.55}a{color:inherit}.site-shell{min-height:100vh}.container{width:min(1180px,calc(100% - 36px));margin:0 auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(247,244,238,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(231,225,215,.9)}.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:1.08rem}.brand-mark{width:40px;height:40px;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:20px}.nav-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{border:0;border-radius:14px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:700;cursor:pointer;font-size:.95rem;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--brand);color:white}.btn-primary:hover{background:var(--brand-dark)}.btn-secondary{background:var(--surface);border:1px solid var(--line)}.btn-danger{background:#fff1ef;color:var(--danger);border:1px solid #f1d1cd}.hero{padding:56px 0 26px}.hero-card{background:linear-gradient(135deg,#e9eee6,#f7eee7);border:1px solid var(--line);border-radius:30px;padding:42px;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero-card:after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.48);right:-70px;top:-80px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--brand);font-size:.76rem;font-weight:800}.hero h1,.page-title{font-family:Georgia,"Times New Roman",serif;margin:8px 0 12px;line-height:1.06}.hero h1{font-size:clamp(2.25rem,5vw,4.5rem);max-width:760px}.hero p{color:var(--muted);font-size:1.08rem;max-width:660px;margin:0 0 24px}.search-bar{display:grid;grid-template-columns:1fr 230px auto;gap:10px;max-width:900px;position:relative;z-index:2}.input,.select,.textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;font:inherit;color:var(--text);outline:none}.input:focus,.select:focus,.textarea:focus{border-color:#a9b5a5;box-shadow:0 0 0 3px rgba(84,106,85,.1)}.section{padding:26px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.section-head h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.65rem,3vw,2.25rem);margin:0}.section-head p{margin:3px 0 0;color:var(--muted)}.category-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.category-card{text-decoration:none;display:block}.category-image{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 7px 22px rgba(42,42,34,.05)}.category-image img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s ease}.category-card:hover img{transform:scale(1.045)}.category-name{font-weight:800;text-align:center;margin-top:9px;font-size:.92rem}.active-category .category-image{outline:3px solid rgba(84,106,85,.26)}.recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.recipe-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 28px rgba(42,42,34,.05);transition:.2s ease}.recipe-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.recipe-card-image{aspect-ratio:4/3;background:var(--surface-2);display:block;overflow:hidden;text-decoration:none}.recipe-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s ease}.recipe-card:hover .recipe-card-image img{transform:scale(1.03)}.image-placeholder{height:100%;display:grid;place-items:center;color:var(--muted);font-size:2.3rem}.recipe-card-body{padding:18px}.recipe-meta{color:var(--brand);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.recipe-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.45rem;line-height:1.18;margin:7px 0 12px}.recipe-card h3 a{text-decoration:none}.recipe-card-footer{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.9rem}.empty{padding:40px;border:1px dashed #d4ccbf;border-radius:20px;text-align:center;background:rgba(255,255,255,.5);color:var(--muted)}.utility-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-bottom:45px}.recipe-hero{padding:36px 0 20px}.recipe-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}.recipe-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow)}.recipe-details{padding:14px 0}.page-title{font-size:clamp(2.25rem,5vw,4.5rem)}.pill{display:inline-flex;align-items:center;background:#e7eee4;color:var(--brand-dark);padding:7px 11px;border-radius:999px;font-size:.82rem;font-weight:800}.source-link{display:inline-flex;margin-top:10px;color:var(--muted);word-break:break-word}.content-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;padding:18px 0 46px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 8px 28px rgba(42,42,34,.04)}.panel h2{font-family:Georgia,"Times New Roman",serif;margin:0 0 18px;font-size:1.7rem}.ingredient-list{display:grid;gap:9px}.ingredient-item{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f0ece5}.ingredient-item:last-child{border-bottom:0}.ingredient-item input{width:18px;height:18px;margin-top:3px;accent-color:var(--brand)}.ingredient-item:has(input:checked) span{text-decoration:line-through;color:#a09f9a}.instructions{font-size:1.02rem;white-space:normal}.recipe-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.form-wrap{padding:40px 0 60px}.form-card{width:min(800px,100%);margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:var(--shadow)}.form-card h1{font-family:Georgia,"Times New Roman",serif;font-size:2.4rem;margin:0 0 5px}.form-card>.intro{color:var(--muted);margin:0 0 26px}.field{margin:0 0 18px}.field label{display:block;font-weight:800;margin-bottom:7px}.field small{color:var(--muted);display:block;margin-top:5px}.textarea{min-height:150px;resize:vertical}.textarea.tall{min-height:230px}.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}.alert{padding:12px 14px;border-radius:14px;margin-bottom:18px}.alert-error{background:#fff0ed;color:#9d3d38;border:1px solid #f0cbc5}.alert-success{background:#edf5ea;color:#3f6b3e;border:1px solid #d3e6ce}.current-image{max-width:220px;max-height:160px;border-radius:16px;margin-top:10px;border:1px solid var(--line);object-fit:cover}.admin-table{width:100%;border-collapse:separate;border-spacing:0 10px}.admin-table th{text-align:left;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;padding:0 14px}.admin-table td{background:var(--surface);padding:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.admin-table td:first-child{border-left:1px solid var(--line);border-radius:15px 0 0 15px}.admin-table td:last-child{border-right:1px solid var(--line);border-radius:0 15px 15px 0}.admin-thumb{width:72px;height:56px;object-fit:cover;border-radius:10px}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.muted{color:var(--muted)}.footer{padding:30px 0 40px;color:var(--muted);text-align:center;font-size:.9rem}
@media(max-width:980px){.category-grid{grid-template-columns:repeat(4,1fr)}.recipe-grid{grid-template-columns:repeat(2,1fr)}.recipe-layout,.content-grid{grid-template-columns:1fr}.recipe-photo{max-height:520px}.search-bar{grid-template-columns:1fr 190px auto}}
@media(max-width:680px){.container{width:min(100% - 24px,1180px)}.header-inner{min-height:66px}.brand span:last-child{display:none}.nav-actions .btn-secondary{display:none}.hero{padding-top:24px}.hero-card{padding:27px 20px;border-radius:24px}.hero h1{font-size:2.55rem}.search-bar{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(3,1fr);gap:10px}.category-name{font-size:.82rem}.recipe-grid{grid-template-columns:1fr}.section{padding:20px 0}.form-card{padding:22px 18px;border-radius:22px}.form-card h1{font-size:2rem}.panel{padding:20px 17px}.recipe-hero{padding-top:24px}.page-title{font-size:2.6rem}.recipe-actions .btn{flex:1}.admin-table thead{display:none}.admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}.admin-table tr{margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px}.admin-table td{border:0!important;border-radius:0!important;padding:7px 5px;background:transparent}.admin-table td:before{content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;color:var(--muted);font-weight:800}.utility-row .btn{flex:1}.section-head{align-items:start;flex-direction:column}}
/* Phase 2: richer recipe details */
.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.input-with-suffix{position:relative}.input-with-suffix .input{padding-right:48px}.input-with-suffix span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.86rem}.favorite-field{display:flex;flex-direction:column;justify-content:center}.check-row{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}.check-row input{width:18px;height:18px;accent-color:var(--brand)}.notes-area{min-height:110px}.recipe-labels{display:flex;gap:8px;flex-wrap:wrap}.pill-neutral{background:#f1eee8;color:#696861}.favorite-badge{display:inline-flex;align-items:center;gap:6px;margin:3px 0 4px;color:#8a6726;font-weight:800}.recipe-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:22px 0 8px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px}.stat span{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.stat strong{display:block;margin-top:2px;font-size:.98rem}.inline-form{display:inline}.notes-panel{margin-bottom:18px;background:#fffaf2}.notes-panel h2{margin-top:4px}.card-favorite{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:#a77b24;box-shadow:0 4px 14px rgba(0,0,0,.12);font-size:1rem}.recipe-card-image{position:relative}.card-details{font-size:.88rem;color:var(--muted);margin:-3px 0 11px}.section-soft{background:rgba(255,255,255,.34);border-top:1px solid rgba(231,225,215,.7);border-bottom:1px solid rgba(231,225,215,.7)}
@media(max-width:980px){.recipe-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.form-grid-2,.form-grid-3{grid-template-columns:1fr}.recipe-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:10px}.section-soft{padding-left:0;padding-right:0}}

/* Phase 3: search, filters, and recipe organization */
.phase3-search{display:block;max-width:820px}.search-main{display:grid;grid-template-columns:1fr auto;gap:10px}.text-link{color:var(--brand-dark);font-weight:800;text-decoration:none}.text-link:hover{text-decoration:underline}.filter-panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;margin-bottom:14px;box-shadow:0 8px 26px rgba(42,42,34,.04)}.filter-grid{display:grid;grid-template-columns:1.35fr repeat(4,1fr) .9fr;gap:12px;align-items:end}.compact-field{margin:0}.compact-field label{font-size:.8rem;margin-bottom:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.favorite-filter .check-row{min-height:50px;text-transform:none;letter-spacing:0;color:var(--text);font-size:.9rem}.filter-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.filter-chip{display:inline-flex;align-items:center;gap:7px;background:#e9eee6;border:1px solid #d7dfd3;color:var(--brand-dark);padding:7px 11px;border-radius:999px;text-decoration:none;font-size:.84rem;font-weight:800}.filter-chip span{font-size:1rem;line-height:1}.filter-chip:hover{background:#dfe8db}.recipe-card .card-details{min-height:1.35em}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.search-main{grid-template-columns:1fr}.search-main .btn{width:100%}.filter-panel{padding:14px}.filter-grid{grid-template-columns:1fr}.filter-actions .btn{flex:1}.text-link{font-size:.9rem}.active-filters{margin-top:2px}}

/* Phase 4: shopping list */
.shopping-success{margin-top:22px}.shopping-success a{font-weight:800;color:inherit}.shopping-hero{padding:48px 0 20px}.shopping-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}.shopping-heading .page-title{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:10px}.shopping-heading p{margin:0;color:var(--muted);max-width:650px}.shopping-count{min-width:118px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 20px;text-align:center;box-shadow:0 8px 24px rgba(42,42,34,.04)}.shopping-count strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:2rem;line-height:1}.shopping-count span{display:block;color:var(--muted);font-size:.78rem;margin-top:5px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}.quick-add{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:24px;max-width:760px}.shopping-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.shopping-toolbar-actions{display:flex;gap:9px;flex-wrap:wrap}.shopping-toolbar-actions form{margin:0}.shopping-groups{display:grid;gap:18px}.shopping-group{padding:0;overflow:hidden}.shopping-group-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:#fbfaf7}.shopping-group-title h2{font-family:Georgia,"Times New Roman",serif;margin:0;font-size:1.35rem}.shopping-items{display:grid}.shopping-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:0 14px 0 20px;border-bottom:1px solid var(--line);background:var(--surface)}.shopping-item:last-child{border-bottom:0}.shopping-toggle{flex:1;margin:0}.shopping-toggle label{display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px 0}.shopping-toggle input{width:20px;height:20px;accent-color:var(--brand);flex:0 0 auto}.shopping-item.is-complete span{text-decoration:line-through;color:var(--muted)}.shopping-delete{border:0;background:transparent;color:#999;font-size:1.6rem;line-height:1;width:38px;height:38px;border-radius:50%;cursor:pointer}.shopping-delete:hover{background:#fff0ed;color:var(--danger)}.empty-shopping{text-align:center;padding:54px 22px}.empty-shopping h2{font-family:Georgia,"Times New Roman",serif;margin:8px 0}.empty-shopping p{margin:0 auto 22px;max-width:500px}.empty-icon{font-size:3rem}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
@media(max-width:680px){.shopping-hero{padding-top:28px}.shopping-heading{align-items:flex-start}.shopping-count{min-width:92px;padding:13px}.shopping-count strong{font-size:1.65rem}.quick-add{grid-template-columns:1fr}.quick-add .btn{width:100%}.shopping-toolbar{align-items:flex-start;flex-direction:column}.shopping-toolbar-actions{width:100%}.shopping-toolbar-actions form{flex:1}.shopping-toolbar-actions .btn{width:100%}.shopping-group-title{padding:15px}.shopping-item{padding-left:15px}}


/* Shopping list sharing */
.share-status{
  display:none;
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--border, #ddd);
  border-radius:12px;
  background:var(--surface, #fff);
  font-weight:600;
}
.share-status.is-visible{display:block;}
@media (max-width:700px){
  .shopping-toolbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }
  .shopping-toolbar-actions .btn,
  .shopping-toolbar-actions form,
  .shopping-toolbar-actions form .btn{
    width:100%;
  }
}


/* === Shopping List Redesign === */
.shopping-hero{
  padding:28px 0 10px;
  background:linear-gradient(180deg, rgba(248,247,242,.9), rgba(255,255,255,0));
}
.shopping-hero-card{
  border:1px solid var(--border, #e8e4dc);
  background:var(--surface, #fff);
  border-radius:24px;
  padding:26px;
  box-shadow:0 12px 34px rgba(34,28,20,.06);
}
.shopping-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.shopping-title-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-width:0;
}
.shopping-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:25px;
  background:#f4efe6;
}
.shopping-heading .page-title{margin:.15rem 0 .35rem;}
.shopping-heading p{margin:0;max-width:680px;color:var(--muted, #6d675f);}
.shopping-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(105px,1fr));
  gap:10px;
  flex:0 0 auto;
}
.shopping-stat{
  min-width:105px;
  padding:14px 16px;
  border:1px solid var(--border, #e8e4dc);
  border-radius:16px;
  text-align:center;
  background:#faf9f6;
}
.shopping-stat strong{
  display:block;
  font-size:1.55rem;
  line-height:1;
  margin-bottom:5px;
}
.shopping-stat span{
  display:block;
  font-size:.78rem;
  color:var(--muted,#6d675f);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.quick-add{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}
.quick-add-field{
  position:relative;
}
.quick-add-field .input{
  width:100%;
  min-height:48px;
  padding-left:43px;
  border-radius:14px;
}
.quick-add-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  font-size:20px;
  color:var(--muted,#6d675f);
}
.quick-add .btn{
  min-height:48px;
  border-radius:14px;
  padding-inline:20px;
}
.shopping-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid var(--border,#e8e4dc);
  border-radius:16px;
  background:#fff;
}
.shopping-toolbar-summary{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted,#6d675f);
  font-size:.95rem;
}
.shopping-toolbar-summary strong{color:var(--text,#26221d);}
.shopping-progress-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#8ba17d;
  box-shadow:0 0 0 4px rgba(139,161,125,.14);
  margin-right:3px;
}
.shopping-divider{opacity:.5;padding:0 2px;}
.shopping-toolbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.shopping-toolbar-actions form{margin:0;}
.btn-ghost-danger{
  background:transparent;
  border:1px solid #ead8d4;
  color:#9a5146;
}
.btn-ghost-danger:hover{
  background:#fff5f2;
}
.shopping-groups{
  display:grid;
  gap:18px;
}
.shopping-group.panel{
  padding:0;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--border,#e8e4dc);
  box-shadow:0 8px 24px rgba(34,28,20,.04);
}
.shopping-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 15px;
  border-bottom:1px solid var(--border,#eee9e1);
  background:#fbfaf7;
}
.shopping-group-title h2{
  margin:2px 0 2px;
  font-size:1.08rem;
}
.shopping-group-kicker{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#7c756c);
  font-weight:700;
}
.shopping-group-count{
  font-size:.82rem;
  color:var(--muted,#7c756c);
}
.shopping-items{
  display:grid;
}
.shopping-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:0 12px 0 16px;
  border-bottom:1px solid #f0ede7;
  background:#fff;
  transition:background .16s ease, opacity .16s ease;
}
.shopping-item:last-child{border-bottom:0;}
.shopping-item:hover{background:#fcfbf8;}
.shopping-toggle{
  flex:1;
  min-width:0;
  margin:0;
}
.shopping-toggle label{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
}
.shopping-toggle input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.shopping-checkmark{
  width:24px;
  height:24px;
  border:2px solid #c8c1b6;
  border-radius:8px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#fff;
  transition:all .16s ease;
}
.shopping-checkmark::after{
  content:"";
  width:8px;
  height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0;
}
.shopping-toggle input:checked + .shopping-checkmark{
  background:#879c79;
  border-color:#879c79;
}
.shopping-toggle input:checked + .shopping-checkmark::after{opacity:1;}
.shopping-item-text{
  font-size:1rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.shopping-item.is-complete{
  background:#fafafa;
  opacity:.72;
}
.shopping-item.is-complete .shopping-item-text{
  text-decoration:line-through;
  color:var(--muted,#807a72);
}
.shopping-delete{
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#aaa39a;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.shopping-delete:hover{
  background:#fff1ee;
  color:#a44f42;
}
.empty-shopping.panel{
  max-width:620px;
  margin:0 auto;
  text-align:center;
  padding:44px 28px;
  border-radius:22px;
}
.empty-shopping .empty-icon{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  border-radius:20px;
  background:#f4efe6;
  font-size:34px;
}
.share-status{
  border-radius:14px;
  border:1px solid #dfe6d8;
  background:#f7faf4;
  color:#526047;
}
@media (max-width:760px){
  .shopping-hero{padding-top:16px;}
  .shopping-hero-card{
    padding:19px;
    border-radius:20px;
  }
  .shopping-heading{
    display:grid;
    gap:18px;
  }
  .shopping-title-wrap{gap:12px;}
  .shopping-icon{
    width:46px;
    height:46px;
    border-radius:14px;
    font-size:22px;
  }
  .shopping-stats{
    width:100%;
    grid-template-columns:1fr 1fr;
  }
  .shopping-stat{
    min-width:0;
    padding:12px 10px;
  }
  .quick-add{
    grid-template-columns:1fr;
  }
  .shopping-toolbar{
    align-items:stretch;
    flex-direction:column;
    padding:13px;
  }
  .shopping-toolbar-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .shopping-toolbar-actions .btn,
  .shopping-toolbar-actions form,
  .shopping-toolbar-actions form .btn{
    width:100%;
  }
  .shopping-toolbar-actions > :last-child:nth-child(3){
    grid-column:1 / -1;
  }
  .shopping-group-title{
    padding:16px;
  }
  .shopping-group-title .text-link{
    font-size:.86rem;
    white-space:nowrap;
  }
  .shopping-item{
    min-height:62px;
    padding-left:14px;
  }
  .shopping-toggle label{
    min-height:62px;
  }
  .shopping-item-text{
    font-size:.98rem;
  }
}


/* === Cleaner Grocery Checklist === */
.shopping-groups{
  display:grid;
  gap:14px;
}
.shopping-group.panel{
  padding:0;
  border:1px solid var(--border,#e8e4dc);
  border-radius:16px;
  box-shadow:none;
  overflow:hidden;
  background:#fff;
}
.shopping-group-title{
  padding:13px 16px;
  min-height:auto;
  border-bottom:1px solid #eeeae4;
  background:#f8f6f2;
}
.shopping-group-title h2{
  margin:0;
  font-size:.98rem;
  font-weight:700;
  line-height:1.25;
}
.shopping-group-title .text-link{
  font-size:.82rem;
}
.shopping-group-kicker,
.shopping-group-count{
  display:none !important;
}
.shopping-items{
  display:block;
}
.shopping-item{
  min-height:48px;
  padding:0 8px 0 14px;
  gap:6px;
  border-bottom:1px solid #f1eee9;
  background:#fff;
}
.shopping-item:last-child{
  border-bottom:0;
}
.shopping-item:hover{
  background:#fbfaf8;
}
.shopping-toggle{
  flex:1;
}
.shopping-toggle label{
  min-height:48px;
  gap:10px;
  padding:6px 0;
}
.shopping-checkmark{
  width:20px;
  height:20px;
  border-radius:6px;
  border-width:1.5px;
}
.shopping-checkmark::after{
  width:7px;
  height:3px;
  border-left-width:2px;
  border-bottom-width:2px;
}
.shopping-item-text{
  font-size:.95rem;
  line-height:1.35;
  color:var(--text,#2a2723);
}
.shopping-item.is-complete{
  opacity:.58;
  background:#fafafa;
}
.shopping-item.is-complete .shopping-item-text{
  text-decoration:line-through;
}
.shopping-delete-form{
  margin:0;
  flex:0 0 auto;
}
.shopping-delete{
  width:30px;
  height:30px;
  border-radius:8px;
  font-size:18px;
  color:#b1aba3;
}
.shopping-delete:hover{
  background:#f7efec;
}
@media (max-width:700px){
  .shopping-groups{
    gap:12px;
  }
  .shopping-group.panel{
    border-radius:14px;
  }
  .shopping-group-title{
    padding:11px 13px;
  }
  .shopping-group-title h2{
    font-size:.94rem;
  }
  .shopping-item{
    min-height:46px;
    padding-left:12px;
  }
  .shopping-toggle label{
    min-height:46px;
    gap:9px;
  }
  .shopping-item-text{
    font-size:.94rem;
  }
  .shopping-delete{
    width:28px;
    height:28px;
  }
}


/* === Smart Servings + Cooking Mode === */
.smart-recipe-tools{
  margin-top:18px;
  display:flex;
  align-items:stretch;
  gap:12px;
  flex-wrap:wrap;
}
.serving-tool{
  flex:1 1 420px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 14px;
  border:1px solid var(--border,#e7e2d9);
  border-radius:16px;
  background:#fbfaf7;
}
.serving-tool-label span{
  display:block;
  font-weight:750;
}
.serving-tool-label small{
  display:block;
  margin-top:2px;
  color:var(--muted,#756f67);
}
.serving-control{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.serving-btn{
  width:38px;
  height:38px;
  border:1px solid var(--border,#ddd7cd);
  border-radius:10px;
  background:#fff;
  font-size:19px;
  cursor:pointer;
}
.serving-btn:hover{background:#f5f2ec;}
.serving-value{
  min-width:86px;
  text-align:center;
}
.serving-value input{
  width:48px;
  border:0;
  background:transparent;
  text-align:center;
  font:inherit;
  font-weight:800;
  font-size:1.05rem;
  outline:none;
  appearance:textfield;
}
.serving-value input::-webkit-outer-spin-button,
.serving-value input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.serving-value span{
  display:block;
  margin-top:-3px;
  font-size:.72rem;
  color:var(--muted,#756f67);
}
.serving-reset{
  border:0;
  background:transparent;
  color:var(--muted,#756f67);
  font-weight:650;
  cursor:pointer;
  padding:8px;
}
.start-cooking-btn{
  min-width:170px;
  justify-content:center;
}
.ingredient-display{
  transition:opacity .15s ease;
}
.cooking-open{overflow:hidden;}
.cooking-mode[hidden]{display:none !important;}
.cooking-mode{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:22px;
}
.cooking-mode-backdrop{
  position:absolute;
  inset:0;
  background:rgba(25,22,18,.64);
}
.cooking-mode-panel{
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  max-height:calc(100vh - 44px);
  overflow:auto;
  background:#fff;
  border-radius:24px;
  box-shadow:0 28px 80px rgba(0,0,0,.24);
}
.cooking-mode-topbar{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px 14px;
  border-bottom:1px solid #ebe7df;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
}
.cooking-mode-topbar h2{
  margin:2px 0 0;
  font-size:1.2rem;
}
.cooking-close{
  width:42px;
  height:42px;
  border:1px solid #e2ddd5;
  border-radius:12px;
  background:#fff;
  font-size:25px;
  cursor:pointer;
}
.cooking-progress-wrap{
  padding:14px 22px 0;
}
.cooking-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:.88rem;
}
.cooking-progress-meta span{color:var(--muted,#716b63);}
.cooking-progress{
  height:7px;
  background:#eeeae3;
  border-radius:999px;
  overflow:hidden;
}
.cooking-progress span{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:#869b79;
  transition:width .2s ease;
}
.cooking-mode-body{
  display:grid;
  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:22px;
  padding:22px;
}
.cook-ingredients{
  align-self:start;
  border:1px solid #e8e3db;
  border-radius:18px;
  overflow:hidden;
}
.cook-side-title{
  padding:13px 14px;
  background:#f8f6f2;
  border-bottom:1px solid #ebe7e0;
}
.cook-side-title h3{margin:0;font-size:1rem;}
.cook-side-title span{font-size:.76rem;color:var(--muted,#756f67);}
.cook-ingredient{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 12px;
  border-bottom:1px solid #f0ede8;
  cursor:pointer;
}
.cook-ingredient:last-child{border-bottom:0;}
.cook-ingredient input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.cook-check{
  width:19px;
  height:19px;
  flex:0 0 auto;
  margin-top:1px;
  border:1.5px solid #bfb8ae;
  border-radius:6px;
  background:#fff;
}
.cook-ingredient input:checked + .cook-check{
  background:#869b79;
  border-color:#869b79;
  box-shadow:inset 0 0 0 4px #869b79;
  position:relative;
}
.cook-ingredient input:checked + .cook-check:after{
  content:"✓";
  position:absolute;
  inset:-3px 0 0 2px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.cook-ingredient input:checked ~ .cook-ingredient-text{
  text-decoration:line-through;
  opacity:.52;
}
.cook-ingredient-text{
  font-size:.88rem;
  line-height:1.35;
}
.cook-step-area{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px 6px;
}
.cook-step-number{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:14px;
  background:#f0eee8;
  font-weight:850;
  font-size:1.15rem;
}
.cook-step-text{
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  line-height:1.45;
  font-weight:650;
  max-width:760px;
}
.smart-timer-card,
.running-timer{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid #e5e0d7;
  border-radius:16px;
  background:#faf8f4;
}
.smart-timer-card[hidden],
.running-timer[hidden]{display:none !important;}
.timer-label,
.running-timer span{
  display:block;
  font-size:.75rem;
  color:var(--muted,#756f67);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.smart-timer-card strong,
.running-timer strong{
  display:block;
  margin-top:2px;
  font-size:1.15rem;
}
.timer-actions{display:flex;gap:8px;}
.cooking-mode-footer{
  position:sticky;
  bottom:0;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:15px 22px;
  border-top:1px solid #ebe7df;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);
}
.cooking-mode-footer .btn{
  min-width:135px;
}
@media (max-width:760px){
  .smart-recipe-tools{display:grid;grid-template-columns:1fr;}
  .serving-tool{
    display:grid;
    gap:10px;
    padding:13px;
  }
  .serving-control{
    justify-content:space-between;
  }
  .start-cooking-btn{width:100%;}
  .cooking-mode{
    padding:0;
    place-items:stretch;
  }
  .cooking-mode-panel{
    width:100%;
    max-height:100vh;
    min-height:100vh;
    border-radius:0;
  }
  .cooking-mode-topbar{
    padding:14px 15px 11px;
  }
  .cooking-progress-wrap{
    padding:11px 15px 0;
  }
  .cooking-mode-body{
    display:flex;
    flex-direction:column-reverse;
    gap:18px;
    padding:18px 15px 92px;
  }
  .cook-step-area{
    padding:6px 0;
  }
  .cook-step-number{
    width:40px;height:40px;margin-bottom:13px;border-radius:12px;
  }
  .cook-step-text{
    font-size:1.42rem;
    line-height:1.45;
  }
  .cook-ingredients{
    max-height:none;
  }
  .smart-timer-card,
  .running-timer{
    align-items:stretch;
    flex-direction:column;
  }
  .smart-timer-card .btn,
  .timer-actions,
  .timer-actions .btn{width:100%;}
  .cooking-mode-footer{
    padding:11px 12px;
    gap:8px;
  }
  .cooking-mode-footer .btn{
    flex:1;
    min-width:0;
    padding-inline:10px;
  }
}


/* === Cooking Mode Clean Redesign === */
.cooking-mode{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
}
.cooking-mode[hidden]{display:none!important;}
.cooking-mode-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,22,19,.58);
}
.cooking-mode-panel{
  position:relative;
  z-index:1;
  width:min(980px,100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.2);
}
.cook-header{
  position:sticky;
  top:0;
  z-index:5;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid #ece8e1;
  background:rgba(255,255,255,.98);
}
.cook-icon-btn{
  width:40px;
  height:40px;
  border:1px solid #e4dfd7;
  border-radius:11px;
  background:#fff;
  font-size:20px;
  cursor:pointer;
}
.cook-header-title{min-width:0;}
.cook-kicker{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#756f67);
  font-weight:750;
}
.cook-header-title h2{
  margin:2px 0 0;
  font-size:1.08rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cook-serving-chip{
  padding:8px 11px;
  border-radius:999px;
  background:#f3f0ea;
  font-size:.8rem;
  font-weight:700;
  white-space:nowrap;
}
.cook-progress-row{
  padding:12px 18px 0;
}
.cook-progress-text{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  font-size:.82rem;
}
.cook-progress-text span{
  color:var(--muted,#756f67);
}
.cooking-progress{
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:#eeeae4;
}
.cooking-progress span{
  display:block;
  height:100%;
  background:#859a77;
  border-radius:inherit;
  transition:width .2s ease;
}
.cook-main{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);
  gap:16px;
  padding:18px;
}
.cook-current-step{
  min-width:0;
  padding:22px 20px;
  border:1px solid #e8e3db;
  border-radius:18px;
  background:#fff;
}
.cook-step-eyebrow{
  margin-bottom:10px;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#756f67);
  font-weight:750;
}
.cook-step-number{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:12px;
  background:#f1eee8;
  font-size:1rem;
  font-weight:800;
}
.cook-step-text{
  font-size:clamp(1.45rem,2.4vw,2rem);
  line-height:1.5;
  font-weight:650;
  max-width:720px;
}
.cook-timer-strip,
.cook-running-timer{
  margin-top:22px;
  padding:12px 14px;
  border:1px solid #e6e1d9;
  border-radius:14px;
  background:#faf8f4;
}
.cook-timer-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cook-timer-strip[hidden],
.cook-running-timer[hidden]{display:none!important;}
.cook-timer-strip span,
.cook-running-time span{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted,#756f67);
}
.cook-timer-strip strong,
.cook-running-time strong{
  display:block;
  margin-top:2px;
}
.cook-running-timer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.cook-ingredients-panel{
  align-self:start;
  border:1px solid #e8e3db;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.cook-ingredients-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  border:0;
  background:#f8f6f2;
  cursor:pointer;
  text-align:left;
}
.cook-ingredients-toggle strong{
  display:block;
  font-size:.95rem;
}
.cook-ingredients-toggle small{
  display:block;
  margin-top:2px;
  color:var(--muted,#756f67);
}
.cook-toggle-icon{
  font-size:18px;
  color:var(--muted,#756f67);
}
.cook-ingredients-body{
  max-height:430px;
  overflow:auto;
}
.cook-ingredient{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 12px;
  border-bottom:1px solid #f0ede8;
  cursor:pointer;
}
.cook-ingredient:last-child{border-bottom:0;}
.cook-ingredient input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.cook-check{
  width:19px;
  height:19px;
  flex:0 0 auto;
  margin-top:1px;
  border:1.5px solid #c0b9af;
  border-radius:6px;
  background:#fff;
}
.cook-ingredient input:checked + .cook-check{
  background:#859a77;
  border-color:#859a77;
  position:relative;
}
.cook-ingredient input:checked + .cook-check:after{
  content:"✓";
  position:absolute;
  inset:-3px 0 0 2px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.cook-ingredient input:checked ~ .cook-ingredient-text{
  text-decoration:line-through;
  opacity:.5;
}
.cook-ingredient-text{
  font-size:.88rem;
  line-height:1.35;
}
.cook-footer{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:13px 16px;
  border-top:1px solid #ece8e1;
  background:rgba(255,255,255,.98);
}
.cook-footer .btn{
  min-width:130px;
}
@media (max-width:760px){
  .cooking-mode{
    padding:0;
    place-items:stretch;
  }
  .cooking-mode-panel{
    width:100%;
    max-height:100vh;
    min-height:100vh;
    border-radius:0;
  }
  .cook-header{
    grid-template-columns:auto minmax(0,1fr);
  }
  .cook-serving-chip{
    grid-column:2;
    justify-self:start;
    margin-top:-4px;
  }
  .cook-progress-row{
    padding:10px 14px 0;
  }
  .cook-main{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:14px 14px 88px;
  }
  .cook-current-step{
    padding:18px 16px;
    border-radius:16px;
  }
  .cook-step-text{
    font-size:1.45rem;
    line-height:1.5;
  }
  .cook-ingredients-panel{
    border-radius:16px;
  }
  .cook-ingredients-body{
    max-height:none;
  }
  .cook-ingredients-toggle[aria-expanded="false"] + .cook-ingredients-body{
    display:none;
  }
  .cook-running-timer,
  .cook-timer-strip{
    align-items:stretch;
    flex-direction:column;
  }
  .cook-running-timer .timer-actions,
  .cook-running-timer .timer-actions .btn,
  .cook-timer-strip .btn{
    width:100%;
  }
  .cook-footer{
    padding:10px 12px;
  }
  .cook-footer .btn{
    flex:1;
    min-width:0;
  }
}


/* === Smart Prep + Ingredient Awareness === */
.cook-prep-screen{
  padding:24px 20px 28px;
}
.cook-prep-screen[hidden],
#cookMainSteps[hidden],
#cookFooter[hidden]{display:none!important;}
.cook-prep-intro{
  max-width:660px;
  margin-bottom:20px;
}
.cook-prep-intro h3{
  margin:4px 0 7px;
  font-size:1.65rem;
}
.cook-prep-intro p{
  margin:0;
  color:var(--muted,#756f67);
  line-height:1.55;
}
.cook-prep-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);
  gap:14px;
}
.cook-prep-card{
  border:1px solid #e8e3db;
  border-radius:17px;
  overflow:hidden;
  background:#fff;
}
.cook-prep-card h4{
  margin:0;
  padding:13px 15px;
  background:#f8f6f2;
  border-bottom:1px solid #ece8e1;
  font-size:.95rem;
}
.smart-prep-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid #f0ede8;
  cursor:pointer;
}
.smart-prep-item:last-child{border-bottom:0;}
.smart-prep-item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.smart-prep-check{
  width:20px;
  height:20px;
  flex:0 0 auto;
  border:1.5px solid #bfb8ae;
  border-radius:6px;
  background:#fff;
}
.smart-prep-item input:checked + .smart-prep-check{
  background:#859a77;
  border-color:#859a77;
  position:relative;
}
.smart-prep-item input:checked + .smart-prep-check:after{
  content:"✓";
  position:absolute;
  left:3px;
  top:-2px;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.smart-prep-item input:checked ~ span:last-child{
  text-decoration:line-through;
  opacity:.55;
}
.cook-overview-list>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid #f0ede8;
}
.cook-overview-list>div:last-child{border-bottom:0;}
.cook-overview-list span{
  color:var(--muted,#756f67);
  font-size:.88rem;
}
.cook-overview-list strong{
  font-size:.9rem;
}
.cook-begin-btn{
  margin-top:16px;
  min-width:190px;
}
.cook-step-ingredients-note{
  padding:9px 12px;
  border-bottom:1px solid #ece8e1;
  color:var(--muted,#756f67);
  font-size:.76rem;
  line-height:1.35;
}
.cook-ingredient{
  transition:background .15s ease, border-color .15s ease;
}
.cook-ingredient.is-current-step{
  background:#f3f6ef;
  box-shadow:inset 3px 0 0 #859a77;
}
.cook-ingredient.is-current-step .cook-ingredient-text{
  font-weight:700;
  color:#34402e;
}
@media (max-width:760px){
  .cook-prep-screen{
    padding:18px 14px 92px;
  }
  .cook-prep-intro h3{
    font-size:1.4rem;
  }
  .cook-prep-grid{
    grid-template-columns:1fr;
  }
  .cook-begin-btn{
    width:100%;
    min-height:48px;
  }
  .cook-step-ingredients-note{
    font-size:.74rem;
  }
}


/* === Safe Cooking Mode Visual Cleanup (recipe page restore) === */
.cooking-mode-panel{
  width:min(820px,100%)!important;
}
.cooking-mode-body{
  grid-template-columns:minmax(0,1fr)!important;
}
.cook-ingredients{
  order:2;
  max-height:none!important;
}
.cook-step-area{
  order:1;
  padding:18px 8px!important;
}
.cook-step-text{
  font-size:clamp(1.5rem,3vw,2.1rem)!important;
  line-height:1.5!important;
}
.cook-ingredients{
  border-radius:16px!important;
}
.cook-side-title{
  cursor:default;
}
@media (max-width:760px){
  .cooking-mode-body{
    display:flex!important;
    flex-direction:column!important;
    padding:16px 14px 92px!important;
  }
  .cook-step-area{order:1!important;}
  .cook-ingredients{order:2!important;}
  .cook-step-text{
    font-size:1.48rem!important;
  }
}


/* === Before You Start Redesign === */
.cook-prep-screen{
  padding:0!important;
  background:#fff;
}
.prep-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:24px 24px 18px;
  border-bottom:1px solid #ece8e1;
  background:#fbfaf7;
}
.prep-hero-copy{
  max-width:560px;
}
.prep-kicker,
.prep-section-label{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#756f67);
  font-weight:750;
}
.prep-hero h3{
  margin:4px 0 6px;
  font-size:1.7rem;
  line-height:1.2;
}
.prep-hero p{
  margin:0;
  color:var(--muted,#756f67);
  line-height:1.5;
}
.prep-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.prep-meta span{
  padding:7px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e6e1d9;
  color:var(--muted,#756f67);
  font-size:.8rem;
  white-space:nowrap;
}
.prep-content{
  display:grid;
  gap:14px;
  padding:18px 24px 24px;
}
.prep-checklist-card,
.prep-start-card{
  border:1px solid #e8e3db;
  border-radius:16px;
  background:#fff;
}
.prep-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-bottom:1px solid #ece8e1;
}
.prep-section-head h4,
.prep-start-card h4{
  margin:2px 0 0;
  font-size:1rem;
}
.prep-tip{
  color:var(--muted,#756f67);
  font-size:.78rem;
  white-space:nowrap;
}
.prep-checklist{
  display:block;
}
.smart-prep-item{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:12px 16px!important;
  border-bottom:1px solid #f0ede8!important;
  background:#fff!important;
}
.smart-prep-item:last-child{
  border-bottom:0!important;
}
.smart-prep-item:hover{
  background:#fbfaf8!important;
}
.smart-prep-check{
  width:20px!important;
  height:20px!important;
  flex:0 0 auto!important;
  border-radius:6px!important;
}
.prep-start-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px;
  background:#f8f6f2;
}
.prep-start-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#fff;
  border:1px solid #e6e1d9;
  font-size:22px;
}
.prep-start-card p{
  margin:4px 0 0;
  color:var(--muted,#756f67);
  font-size:.86rem;
  line-height:1.45;
}
.prep-start-btn{
  min-width:150px;
  min-height:44px;
  justify-content:center;
}
@media (max-width:760px){
  .prep-hero{
    display:grid;
    align-items:start;
    gap:14px;
    padding:18px 15px 15px;
  }
  .prep-hero h3{
    font-size:1.45rem;
  }
  .prep-meta{
    justify-content:flex-start;
  }
  .prep-content{
    padding:14px 15px 92px;
  }
  .prep-section-head{
    padding:13px 14px;
  }
  .prep-tip{
    display:none;
  }
  .smart-prep-item{
    padding:12px 14px!important;
  }
  .prep-start-card{
    grid-template-columns:auto minmax(0,1fr);
    padding:14px;
  }
  .prep-start-btn{
    grid-column:1 / -1;
    width:100%;
  }
}


/* === Phase 7 Smart Ingredient Builder === */
.smart-ingredient-help{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.smart-ingredient-help strong{
  font-size:.88rem;
}
.smart-ingredient-help span{
  color:var(--muted,#756f67);
  font-size:.82rem;
}
.ingredient-builder{
  display:grid;
  gap:8px;
}
.ingredient-builder-row{
  display:grid;
  grid-template-columns:90px 120px minmax(0,1fr) 38px;
  gap:8px;
  align-items:center;
}
.ingredient-builder-row .input{
  min-width:0;
}
.ingredient-remove{
  width:38px;
  height:38px;
  border:1px solid #e5dfd6;
  border-radius:10px;
  background:#fff;
  color:#9d8f84;
  font-size:20px;
  cursor:pointer;
}
.ingredient-remove:hover{
  background:#fff3ef;
  color:#a24f43;
}
.ingredient-add-row{
  margin-top:10px;
}
@media(max-width:700px){
  .ingredient-builder-row{
    grid-template-columns:74px 94px minmax(0,1fr) 36px;
    gap:6px;
  }
  .ingredient-builder-row .input{
    padding-left:9px;
    padding-right:9px;
    font-size:16px;
  }
  .ingredient-remove{
    width:36px;
    height:40px;
  }
}
@media(max-width:430px){
  .ingredient-builder-row{
    grid-template-columns:68px 82px minmax(0,1fr);
  }
  .ingredient-remove{
    grid-column:3;
    justify-self:end;
    margin-top:-4px;
  }
}


/* === Phase 8 Smart Directions === */
.step-builder{display:grid;gap:10px;}
.step-builder-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:9px;align-items:start;}
.step-number-badge,.recipe-step-number{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1eee8;font-size:.82rem;font-weight:800;flex:0 0 auto;}
.step-textarea{min-height:72px!important;resize:vertical;}
.step-row-actions{display:grid;grid-template-columns:repeat(3,34px);gap:5px;}
.step-remove,.step-move{width:34px;height:34px;border:1px solid #e4dfd6;border-radius:9px;background:#fff;cursor:pointer;color:#736d65;}
.step-remove{font-size:18px;color:#a06056;}
.step-move:disabled{opacity:.28;cursor:default;}
.step-add-row{margin-top:10px;}
.recipe-step-list{display:grid;gap:14px;}
.recipe-step-item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;padding-bottom:14px;border-bottom:1px solid #eeeae4;line-height:1.6;}
.recipe-step-item:last-child{padding-bottom:0;border-bottom:0;}
.recipe-step-number{margin-top:1px;}
@media(max-width:700px){
  .step-builder-row{grid-template-columns:34px minmax(0,1fr);}
  .step-row-actions,.step-builder-row>.step-remove{grid-column:2;justify-self:end;}
  .recipe-step-item{grid-template-columns:34px minmax(0,1fr);gap:10px;}
}


/* === Edit Recipe Redesign === */
.edit-recipe-hero{
  padding-bottom:12px;
}
.edit-recipe-section{
  padding-top:8px;
}
.edit-recipe-container{
  max-width:1040px;
}
.edit-recipe-panel{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.edit-recipe-form{
  display:grid;
  gap:18px;
}
.edit-recipe-grid{
  display:grid;
  gap:16px;
}
.edit-section-card{
  border:1px solid var(--border,#e7e2da);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.edit-section-heading{
  padding:16px 18px 14px;
  border-bottom:1px solid #ece8e1;
  background:#faf9f6;
}
.edit-section-heading h2{
  margin:3px 0 3px;
  font-size:1.05rem;
}
.edit-section-heading p{
  margin:0;
  color:var(--muted,#756f67);
  font-size:.86rem;
  line-height:1.45;
}
.edit-section-kicker{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted,#756f67);
  font-weight:750;
}
.edit-section-body{
  padding:18px;
}
.edit-section-body>.field:last-child{
  margin-bottom:0;
}
.edit-recipe-form .field{
  margin-bottom:16px;
}
.edit-recipe-form .field>label{
  font-weight:700;
  margin-bottom:6px;
}
.edit-recipe-form .input,
.edit-recipe-form .textarea,
.edit-recipe-form select{
  border-radius:12px;
}
.edit-recipe-form .textarea{
  line-height:1.5;
}
.edit-recipe-form .form-grid{
  gap:12px;
}
.edit-recipe-form .ingredient-builder{
  gap:10px;
}
.edit-recipe-form .ingredient-builder-row{
  padding:10px;
  border:1px solid #ece7df;
  border-radius:13px;
  background:#fbfaf7;
}
.edit-recipe-form .ingredient-builder-row .input{
  background:#fff;
}
.edit-recipe-form .ingredient-add-row,
.edit-recipe-form .step-add-row{
  margin-top:12px;
}
.edit-recipe-form .step-builder{
  gap:12px;
}
.edit-recipe-form .step-builder-row{
  padding:11px;
  border:1px solid #ece7df;
  border-radius:14px;
  background:#fbfaf7;
}
.edit-recipe-form .step-number-badge{
  margin-top:2px;
  background:#ebe7df;
}
.edit-recipe-form .step-textarea{
  background:#fff;
  border-radius:11px;
}
.edit-recipe-form .step-row-actions{
  align-self:start;
}
.edit-recipe-form .smart-ingredient-help{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:11px;
  background:#f7f5f1;
}
.edit-recipe-form .smart-ingredient-help strong{
  display:block;
}
.edit-sticky-actions{
  position:sticky;
  bottom:12px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid #ded8cf;
  border-radius:15px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 28px rgba(33,28,21,.10);
  backdrop-filter:blur(10px);
}
.edit-save-copy{
  min-width:0;
}
.edit-save-copy strong{
  display:block;
  font-size:.9rem;
}
.edit-save-copy span{
  display:block;
  margin-top:2px;
  color:var(--muted,#756f67);
  font-size:.78rem;
}
.edit-sticky-actions .form-actions{
  margin:0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.edit-sticky-actions .btn{
  min-height:42px;
}
@media(max-width:760px){
  .edit-recipe-section{
    padding-top:4px;
  }
  .edit-section-card{
    border-radius:15px;
  }
  .edit-section-heading{
    padding:14px 14px 12px;
  }
  .edit-section-body{
    padding:14px;
  }
  .edit-recipe-form .ingredient-builder-row{
    padding:8px;
  }
  .edit-recipe-form .step-builder-row{
    padding:9px;
  }
  .edit-sticky-actions{
    position:static;
    display:grid;
    padding:12px;
    margin-top:2px;
  }
  .edit-sticky-actions .form-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .edit-sticky-actions .btn{
    width:100%;
  }
}

.ingredient-groups-builder{display:grid;gap:14px}
.ingredient-group-card{border:1px solid #e6e1d9;border-radius:15px;overflow:hidden;background:#fff}
.ingredient-group-header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #ece8e1;background:#f8f6f2}
.ingredient-group-kicker{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#756f67);font-weight:750}
.ingredient-group-title{width:min(360px,100%);border:0;border-bottom:1px solid #cfc8bd;background:transparent;padding:4px 0;font:inherit;font-weight:800}
.ingredient-group-remove{border:0;background:transparent;color:#9a5b51;font-size:.78rem;font-weight:700;cursor:pointer}
.ingredient-group-rows{display:grid;gap:8px;padding:12px}
.ingredient-group-card>.ingredient-add-row{margin:0 12px 12px}
.ingredient-add-group{margin-top:12px}
.ingredient-section-list{display:grid;gap:18px}
.recipe-ingredient-section h3{margin:0 0 8px;padding-bottom:7px;border-bottom:1px solid #e9e4dd;font-size:.95rem}
.cook-ingredient-group{border-bottom:1px solid #ece8e1}
.cook-ingredient-group:last-child{border-bottom:0}
.cook-ingredient-group-title{padding:9px 12px;background:#f6f4ef;color:#625c54;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}


/* === Phase 11 Component Cooking Steps === */
.step-groups-builder{display:grid;gap:14px}
.step-group-card{border:1px solid #e6e1d9;border-radius:15px;overflow:hidden;background:#fff}
.step-group-header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #ece8e1;background:#f8f6f2}
.step-group-kicker{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#756f67);font-weight:750}
.step-group-title{width:min(360px,100%);border:0;border-bottom:1px solid #cfc8bd;background:transparent;padding:4px 0;font:inherit;font-weight:800}
.step-group-remove{border:0;background:transparent;color:#9a5b51;font-size:.78rem;font-weight:700;cursor:pointer}
.step-group-rows{display:grid;gap:10px;padding:12px}
.step-group-card>.step-add-row{margin:0 12px 12px}
.step-add-group{margin-top:12px}
.recipe-step-group-title{margin:18px 0 4px;padding:8px 10px;border-radius:9px;background:#f6f3ed;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.recipe-step-group-title:first-child{margin-top:0}
.cook-component-label{display:inline-flex;margin-left:8px;padding:4px 8px;border-radius:999px;background:#f1eee8;color:#5f5951;font-size:.72rem;font-weight:800}
@media(max-width:700px){.step-group-header{align-items:flex-start}.cook-component-label{display:flex;margin:6px 0 0;width:max-content}}

.resume-cooking-btn[hidden],
.cancel-cooking-btn[hidden]{display:none!important;}

.resume-cooking-btn[hidden],
.cancel-cooking-btn[hidden]{
  display:none !important;
}


/* Shopping list source spacing fix */
.shopping-item-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  gap:3px;
}
.shopping-item-source{
  display:block;
  margin-top:1px;
  color:var(--muted,#756f67);
  font-size:.78rem;
  line-height:1.25;
  font-weight:400;
  text-decoration:none !important;
}
.shopping-item.is-complete .shopping-item-source{
  text-decoration:none !important;
}