:root {
  --ink: #1c2b22;
  --muted: #687269;
  --cream: #f4f0e6;
  --paper: #fbfaf5;
  --green: #264f3b;
  --green-2: #397157;
  --lime: #dce98e;
  --orange: #ee7b3a;
  --line: rgba(28, 43, 34, 0.13);
  --shadow: 0 18px 50px rgba(43, 54, 36, 0.09);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", sans-serif;
}
.app-loading { display:none; min-height:50vh; place-items:center; align-content:center; gap:12px; color:var(--green); }
.app-loading span { width:28px; height:28px; border:3px solid #dce3d6; border-top-color:var(--orange); border-radius:50%; animation:app-loading-spin .75s linear infinite; }
.app-loading strong { font-size:12px; }
.app-hydrating .app-loading { display:grid; }
.app-hydrating main>.hero,.app-hydrating main>.workspace,.app-hydrating main>.impact-dashboard,.app-hydrating main>.plus-discovery { display:none !important; }
@keyframes app-loading-spin { to { transform:rotate(360deg); } }
html.boot-empty-pantry .workspace,html.boot-empty-pantry .plus-discovery { display:none !important; }
html.boot-hide-onboarding #receipt-onboarding { display:none !important; }
button, input, select { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.legal-entry-dialog { width:min(590px,calc(100% - 28px)); max-height:calc(100dvh - 28px); overflow:auto; border:0; padding:0; border-radius:26px; color:var(--ink); background:var(--paper); box-shadow:0 30px 100px rgba(13,31,20,.32); }
.legal-entry-dialog::backdrop { background:rgba(19,34,25,.66); backdrop-filter:blur(6px); }
.legal-entry-shell { padding:38px; }
.legal-entry-mark { width:48px; height:48px; display:grid; place-items:center; margin-bottom:24px; border-radius:50% 50% 44% 56% / 56% 43% 57% 44%; color:var(--cream); background:var(--green); font-family:"Fraunces",serif; font-size:22px; }
.legal-entry-kicker { margin:0 0 8px; color:var(--green-2); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.legal-entry-shell h2 { margin:0 0 18px; font-size:clamp(34px,7vw,48px); line-height:1; letter-spacing:-.03em; }
.legal-entry-shell > p:not(.legal-entry-kicker):not(.legal-storage-copy) { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.legal-entry-shell a { color:var(--green); text-underline-offset:3px; }
.legal-storage-copy { display:flex; gap:11px; margin:24px 0; padding:15px; border-radius:14px; color:#4d5c46; background:#eef3d7; font-size:12px; line-height:1.55; }
.legal-storage-copy > span:first-child { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:var(--green); background:var(--lime); font-weight:800; }
.legal-entry-actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.legal-entry-accept { min-height:50px; border:0; border-radius:13px; padding:14px 18px; color:white; background:var(--green); cursor:pointer; font-weight:700; }
.legal-entry-accept span { margin-left:7px; color:var(--lime); }
.legal-entry-accept:hover { background:#173d2b; }
.legal-entry-accept:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.legal-entry-actions > a { font-size:12px; font-weight:700; }

.topbar {
  max-width: 1380px;
  margin: 0 auto;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.6px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 44% 56% / 56% 43% 57% 44%;
  color: var(--cream);
  background: var(--green);
  font-family: "Fraunces", serif;
}
.topnav { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251,250,245,.62); }
.topnav a { padding: 8px 13px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 700; }
.topnav a:hover { color: var(--ink); }
.topnav a.active { color: white; background: var(--green); }
.topnav a[data-profile-link] { display: flex; align-items: center; }
.nav-avatar { display: inline-grid; place-items: center; width: 21px; height: 21px; margin: -5px 5px -5px -7px; border-radius: 50%; color: white; background: var(--avatar,var(--orange)); font-size: 8px; }
.dot { color: var(--orange); }
.hero {
  max-width: 1050px;
  margin: 60px auto 64px;
  padding: 0 36px;
  text-align: center;
}
.eyebrow, .kicker {
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 11px;
  font-weight: 700;
  color: var(--green-2);
  margin: 0 0 13px;
}
h1, h2 { font-family: "Fraunces", serif; }
h1 { font-size: clamp(55px, 8vw, 94px); line-height: .91; letter-spacing: -.04em; margin: 0; }
h1 em { font-weight: 600; color: var(--orange); }
.intro { max-width: 650px; margin: 28px auto 36px; color: var(--muted); line-height: 1.7; font-size: 17px; }
body:not(.has-pantry) .workspace,body:not(.has-pantry) .plus-discovery { display:none !important; }

.add-form {
  display: grid;
  grid-template-columns: minmax(260px,1fr) auto minmax(145px,.65fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 980px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 20px;
  background: var(--paper);
  border: 1px solid rgba(28,43,34,.1);
  box-shadow: var(--shadow);
}
.expiry-disclosure { min-width:0; text-align:left; }
.expiry-disclosure summary { padding:11px 10px; color:var(--green); cursor:pointer; font-size:11px; font-weight:750; }
.expiry-disclosure[open] summary { padding-bottom:3px; }
.expiry-wrap { display:grid; gap:2px; padding:4px 10px; color:var(--muted); text-align:left; }
.expiry-wrap span { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.expiry-wrap input { min-width:0; border:0; padding:3px 0; color:var(--ink); background:transparent; font:600 11px "DM Sans",sans-serif; }
.input-wrap { display: flex; align-items: center; gap: 12px; padding-left: 14px; }
.input-wrap svg { width: 20px; fill: none; stroke: var(--orange); stroke-width: 2; }
.input-wrap input { width: 100%; border: 0; outline: 0; padding: 14px 0; background: transparent; color: var(--ink); }
.input-wrap input::placeholder { color: #929991; }
.quantity-wrap { display: grid; grid-template-columns: 78px 82px; align-items: center; border-left: 1px solid var(--line); }
.quantity-wrap input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 12px 8px 12px 18px; background: transparent; color: var(--ink); text-align: right; font-weight: 600; }
select { border: 0; outline: none; padding: 12px 10px; background: transparent; color: var(--muted); cursor: pointer; }
.primary-button { border: 0; border-radius: 13px; padding: 15px 20px; color: white; background: var(--green); font-weight: 600; cursor: pointer; transition: transform .2s, background .2s; }
.primary-button:hover { transform: translateY(-2px); background: #173d2b; }
.primary-button span { color: var(--lime); margin-left: 6px; }
.unit-hint { min-height: 16px; margin: 9px 0 0; font-size: 11px; color: var(--green-2); }
.unit-hint::before { content: "✦"; color: var(--orange); margin-right: 6px; }
.form-error { min-height: 18px; margin: 2px 0 0; font-size: 13px; color: #a4422c; }

.receipt-onboarding { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; max-width:760px; margin:0 auto 18px; padding:24px 26px; border-radius:20px; color:white; background:var(--green); box-shadow:0 18px 42px rgba(38,79,59,.18); text-align:left; }
.receipt-onboarding-copy>span { color:var(--lime); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.receipt-onboarding h2 { margin:3px 0 5px; color:white; font-size:25px; }
.receipt-onboarding p { max-width:54ch; margin:0; color:rgba(255,255,255,.7); font-size:10px; line-height:1.45; }
.receipt-onboarding-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; min-width:260px; }
.receipt-onboarding-actions #onboarding-receipt-scan { grid-column:1/-1; }
.receipt-onboarding button { min-height:40px; border:0; border-radius:10px; padding:0 13px; color:var(--green); background:var(--lime); cursor:pointer; font-size:10px; font-weight:800; white-space:nowrap; }
.receipt-onboarding button span { margin-left:8px; }
.receipt-onboarding .receipt-onboarding-secondary { min-height:32px; padding:0 8px; color:rgba(255,255,255,.8); background:transparent; font-weight:650; }
.scan-actions { grid-column: 1 / -1; display: flex; justify-content: stretch; gap: 8px; width: 100%; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); }
.scan-action { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 7px; border: 1px solid var(--line); border-radius: 12px; color: var(--green); background: rgba(251,250,245,.55); cursor:pointer; text-align:left; transition:transform .2s,border-color .2s,background .2s; }
.scan-action:hover { transform: translateY(-2px); border-color: rgba(38,79,59,.35); background: var(--paper); }
.scan-action:focus-visible { outline: 3px solid rgba(238,123,58,.3); outline-offset: 2px; }
.scan-action-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: var(--lime); }
.scan-action-icon.receipt { color: #9c4d23; background: #f8d9c3; }
.scan-action-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scan-action strong, .scan-action small { display: block; }
.scan-action strong { font-size: 12px; }
.scan-action small { margin-top: 2px; color: var(--muted); font-size: 9px; }

.workspace {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 28px;
  padding: 0 40px 70px;
  align-items: start;
}
.impact-dashboard { max-width:1380px; display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); align-items:center; gap:34px; margin:0 auto 28px; padding:28px 34px; border-radius:26px; color:white; background:#315844; }
.impact-intro h2 { margin:2px 0 9px; color:white; font-size:31px; }
.impact-intro .kicker { color:var(--lime); }
.impact-intro>p:last-child { max-width:55ch; margin:0; color:rgba(255,255,255,.68); font-size:10px; line-height:1.5; }
.impact-dashboard dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; }
.impact-dashboard dl>div { min-width:0; padding:9px 18px; border-left:1px solid rgba(255,255,255,.14); }
.impact-dashboard dt,.impact-dashboard dd,.impact-dashboard small { display:block; }
.impact-dashboard dt { color:rgba(255,255,255,.65); font-size:9px; }
.impact-dashboard dd { margin:4px 0 2px; color:#f3bb80; font:600 clamp(24px,3vw,34px) "Fraunces",serif; }
.impact-dashboard small { color:rgba(255,255,255,.55); font-size:8px; line-height:1.3; }
.pantry-panel, .recipes-panel {
  background: var(--paper);
  border: 1px solid rgba(28,43,34,.09);
  border-radius: 26px;
}
.pantry-panel { position: sticky; top: 20px; padding: 26px; }
.recipes-panel { --recipes-panel-gutter: 30px; min-width: 0; padding: var(--recipes-panel-gutter); }
.section-heading, .recipes-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pantry-heading-actions { display:flex; align-items:center; gap:10px; }
.pantry-add-action { border:0; border-radius:10px; padding:8px 10px; color:white; background:var(--green); cursor:pointer; font-size:10px; font-weight:750; white-space:nowrap; }
.section-heading h2, .recipes-header h2 { font-size: 29px; letter-spacing: -.025em; margin: 0; }
.count { font-family: "DM Sans"; font-size: 12px; vertical-align: top; display: inline-grid; place-items: center; color: var(--green); background: var(--lime); width: 22px; height: 22px; border-radius: 50%; }
.text-button { border: 0; background: none; padding: 4px 0; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }

.pantry-list { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.expiry-alert { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 10px; margin-top:18px; padding:12px; border-radius:14px; color:var(--green); background:#fff1e5; }
.expiry-alert-count { grid-row:1/3; display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:white; background:var(--orange); font-weight:800; }
.expiry-alert strong,.expiry-alert p { display:block; margin:0; }
.expiry-alert strong { font-size:11px; }
.expiry-alert p { margin-top:2px; color:#765c4f; font-size:8px; line-height:1.35; }
.expiry-alert button { grid-column:2; width:max-content; border:0; padding:0; color:var(--green); background:transparent; cursor:pointer; font-size:8px; font-weight:800; text-decoration:underline; }
.pantry-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px; border-radius: 13px; background: #f0efe7; animation: pop .25s ease; }
.pantry-item.expired { background:#f6e2dc; }
.pantry-item.today,.pantry-item.soon { background:#fff0df; }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
.food-emoji { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; background: var(--paper); }
.pantry-name { display: block; font-size: 14px; font-weight: 600; }
.pantry-amount { color: var(--muted); font-size: 11px; }
.pantry-classification { display: block; width: fit-content; margin-top: 3px; padding: 2px 6px; border-radius: 999px; color: var(--green); background: #e5edce; font-size: 8px; font-weight: 700; }
.pantry-expiry { display:block; width:fit-content; margin-top:3px; color:var(--green); font-size:8px; font-weight:800; }
.pantry-expiry.expired { color:#9b4634; }.pantry-expiry.today,.pantry-expiry.soon { color:#a65324; }
.pantry-item-actions { display: flex; align-items: center; gap: 2px; }
.edit-item, .remove-item { width: 28px; height: 28px; border: 0; background: transparent; color: #889088; font-size: 18px; cursor: pointer; border-radius: 50%; }
.edit-item { font-size: 15px; }
.edit-item:hover { color: var(--green); background: #fff; }
.remove-item:hover { color: #a4422c; background: #fff; }
.pantry-item.editing { grid-template-columns: 34px minmax(0,1fr); align-items: start; background: #e9efdc; box-shadow: inset 0 0 0 1px rgba(38,79,59,.12); }
.pantry-edit-form { display: grid; gap: 7px; min-width: 0; }
.pantry-edit-form input, .pantry-edit-form select { min-width: 0; width: 100%; height: 34px; border: 1px solid rgba(38,79,59,.16); border-radius: 8px; padding: 6px 8px; color: var(--ink); background: var(--paper); font: inherit; font-size: 12px; }
.pantry-edit-form input:focus, .pantry-edit-form select:focus { border-color: var(--green); outline: 3px solid rgba(38,79,59,.1); }
.pantry-edit-name { font-weight: 600 !important; }
.pantry-edit-fields { display: grid; grid-template-columns: minmax(0,1fr) 82px; gap: 6px; }
.pantry-edit-fields input { text-align: right; }
.pantry-expiry-field { display:grid; grid-template-columns:1fr 132px; align-items:center; gap:7px; color:var(--muted); font-size:9px; font-weight:700; }
.pantry-remove-choice { grid-template-columns:34px minmax(0,1fr); background:#fff1e5; }
.pantry-remove-choice strong,.pantry-remove-choice small { display:block; }.pantry-remove-choice small { margin-top:2px; color:var(--muted); font-size:8px; }
.pantry-outcome-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr auto; gap:5px; }
.pantry-outcome-actions button { min-height:31px; border:0; border-radius:8px; color:var(--green); background:#e5edce; cursor:pointer; font-size:8px; font-weight:800; }
.pantry-outcome-actions button:nth-child(2) { color:#914833; background:#f4dcd3; }.pantry-outcome-actions button:last-child { color:var(--muted); background:rgba(255,255,255,.7); }
.pantry-edit-error { min-height: 0; margin: 0; color: #a4422c; font-size: 10px; }
.pantry-edit-error:empty { display: none; }
.pantry-edit-actions { display: flex; gap: 6px; }
.pantry-save, .pantry-cancel { min-height: 30px; border: 0; border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 10px; font-weight: 700; }
.pantry-save { color: white; background: var(--green); }
.pantry-cancel { color: var(--muted); background: rgba(255,255,255,.75); }
.empty-pantry { padding: 42px 15px 26px; text-align: center; color: var(--muted); }
.empty-pantry p { margin: 10px 0 4px; font-weight: 600; color: var(--ink); }
.empty-pantry span { font-size: 12px; line-height: 1.5; }
.empty-icon { margin: auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: var(--green); font-size: 22px; transform: rotate(-8deg); }
.pantry-tip { display: flex; gap: 11px; padding: 15px; border-radius: 14px; background: #eef3d7; margin-top: 22px; color: #536047; }
.pantry-tip > span { color: var(--orange); }
.pantry-tip p { margin: 0; font-size: 11px; line-height: 1.55; }

.recipes-header { margin-bottom: 18px; align-items: flex-end; }
.recipes-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.own-recipes-link { min-height:42px; display:inline-flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--line); border-radius:12px; color:var(--green); background:var(--paper); font-size:10px; font-weight:800; text-decoration:none; }
.own-recipes-link span { color:var(--orange); font-size:16px; }
.servings-control { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 12px; border-radius: 12px; background: #eef3d7; color: var(--green); font-size: 12px; }
.servings-label { color: var(--muted); margin-right: 2px; }
.servings-control button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--paper); color: var(--green); cursor: pointer; font-size: 17px; line-height: 1; }
.servings-control button:hover { background: var(--lime); }
.servings-control strong { min-width: 16px; text-align: center; font-size: 14px; }
.recipe-discovery { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; margin-bottom: 10px; }
.recipe-search { min-width: 0; min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 4px 14px rgba(28,43,34,.05); transition: border-color .2s, box-shadow .2s; }
.recipe-search:focus-within { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(130,165,73,.2); }
.recipe-search-icon, .search-empty-icon { position: relative; flex: 0 0 auto; width: 17px; height: 17px; display: inline-block; border: 2px solid currentColor; border-radius: 50%; color: var(--green); }
.recipe-search-icon::after, .search-empty-icon::after { content: ""; position: absolute; width: 8px; height: 2px; right: -6px; bottom: -3px; border-radius: 2px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.recipe-search input { min-width: 0; width: 100%; height: 48px; border: 0; outline: 0; padding: 0; color: var(--ink); background: transparent; font: inherit; font-size: 14px; }
.recipe-search input::placeholder { color: #6d776e; opacity: 1; }
.recipe-search input::-webkit-search-cancel-button { cursor: pointer; }
.favorites-filter { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; color: var(--green); background: var(--paper); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(28,43,34,.05); transition: background .2s, color .2s, border-color .2s; }
.favorites-filter > span:first-child { color: var(--orange); font-size: 18px; }
.favorites-filter strong { min-width: 24px; padding: 3px 7px; border-radius: 999px; color: var(--green); background: #eef3d7; font-size: 10px; }
.favorites-filter:hover { border-color: #bdc9b2; background: #f4f5eb; }
.favorites-filter[aria-pressed="true"] { border-color: var(--green); color: white; background: var(--green); }
.favorites-filter[aria-pressed="true"] > span:first-child { color: var(--lime); }
.favorites-filter[aria-pressed="true"] strong { color: var(--green); background: var(--lime); }
.favorites-filter:focus-visible, .recipe-favorite:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.use-first-filter { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid #e5c7ad; border-radius:14px; padding:0 13px; color:#8c4f2f; background:#fff4e9; cursor:pointer; font:700 11px "DM Sans",sans-serif; }
.use-first-filter[aria-pressed="true"] { color:white; border-color:var(--orange); background:var(--orange); }
.recipe-filter-drawer { margin-bottom:10px; }
.recipe-filter-drawer>summary { width:max-content; margin-left:auto; display:flex; align-items:center; gap:8px; padding:8px 11px; border-radius:10px; color:var(--green); background:#efeee7; cursor:pointer; font-size:11px; font-weight:750; list-style:none; }
.recipe-filter-drawer>summary::-webkit-details-marker { display:none; }
.recipe-filter-drawer>summary::before { content:"☰"; color:var(--orange); }
.recipe-filter-drawer>summary strong { color:var(--muted); font-size:9px; }
.recipe-filter-drawer[open]>summary { margin-bottom:7px; background:#e5ead8; }
.recipe-filters { display:grid; grid-template-columns:minmax(290px,1.7fr) repeat(3,minmax(135px,.65fr)); gap:10px; padding:12px; border-radius:14px; background:#efeee7; }
.filter-block { min-width: 0; }
.filter-label { display: block; margin: 0 0 7px 2px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.filter-chips { display: flex; gap: 4px; }
.filter-chip { min-height: 42px; flex: 1; border: 0; background: transparent; padding: 8px 10px; border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap; }
.filter-chip:hover { color: var(--ink); background: rgba(251,250,245,.55); }
.filter-chip.active { background: var(--paper); color: var(--green); box-shadow: 0 2px 8px rgba(28,43,34,.08); }
.select-filter select { width: 100%; min-height: 42px; padding: 8px 30px 8px 11px; border-radius: 10px; color: var(--ink); background: var(--paper); box-shadow: 0 2px 8px rgba(28,43,34,.05); }
.filter-hint { display: block; min-height: 15px; margin: 5px 2px -2px; color: var(--green-2); font-size: 9px; font-weight: 600; line-height: 1.35; }
.meal-filter select[data-mode="auto"] { color: var(--green); font-weight: 700; box-shadow: 0 2px 8px rgba(28,43,34,.05), inset 0 0 0 1px rgba(38,79,59,.16); }
.results-line { display: flex; align-items: center; justify-content: space-between; min-height: 35px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.results-line p { margin: 0; }
.results-line strong { color: var(--ink); font-size: 15px; }
.results-line button { border: 0; background: none; padding: 8px 0; color: var(--green); cursor: pointer; text-decoration: underline; }
.recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.load-more-recipes { display: block; min-height: 46px; margin: 22px auto 0; padding: 11px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--green); cursor: pointer; font-weight: 700; }
.load-more-recipes:hover { background: #eef3d7; }
.load-more-recipes:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.load-more-recipes[hidden] { display: none; }
.recipe-group-heading { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding: 12px 14px; border-radius: 13px; background: #efeee7; color: var(--muted); }
.recipe-group-heading:first-child { margin-top: 0; }
.recipe-group-heading > div { display: flex; align-items: center; gap: 9px; }
.recipe-group-heading > div > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #dedfd5; color: var(--green); font-size: 12px; font-weight: 800; }
.recipe-group-heading strong { color: var(--ink); font-size: 13px; }
.recipe-group-heading small { text-align: right; font-size: 10px; }
.recipe-group-heading.ready { border: 1px solid #cbdcab; background: #edf4df; color: #55713f; }
.recipe-group-heading.ready > div > span { background: var(--lime); }
.recipe-group-heading.more { margin-top: 15px; }
.recipe-card { position: relative; overflow: hidden; contain: layout paint style; content-visibility: auto; contain-intrinsic-size: auto 330px; border: 0; border-radius: 16px; padding: 0; background: var(--green); text-align: left; box-shadow: 0 8px 22px rgba(28,43,34,.11); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.recipe-open { display: block; width: 100%; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.recipe-open:focus-visible { outline: 3px solid var(--lime); outline-offset: -4px; }
.recipe-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28,43,34,.16); }
.recipe-art { position: relative; width: 100%; aspect-ratio: 2.18 / 1; overflow: hidden; background: #d9ded1; }
.recipe-image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.recipe-card:hover .recipe-image { transform: scale(1.025); }
.time-badge { position: absolute; z-index: 2; top: 15px; left: 15px; padding: 7px 10px; border-radius: 99px; background: rgba(251,250,245,.88); backdrop-filter: blur(7px); font-size: 11px; font-weight: 700; }
.match-badge { position: absolute; z-index: 2; right: 15px; bottom: 126px; padding: 7px 10px; border-radius: 99px; background: var(--green); color: white; font-size: 11px; font-weight: 700; }
.use-first-badge { position:absolute; z-index:2; left:15px; bottom:126px; max-width:45%; padding:7px 10px; border-radius:99px; color:#63361f; background:#ffd8b8; font-size:9px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recipe-card-actions { position: absolute; z-index: 4; isolation: isolate; top: 13px; right: 13px; display: grid; gap: 8px; }
.recipe-favorite, .recipe-share { position: relative; width: 40px; height: 40px; display: grid; place-items: center; overflow: visible; border: 0; border-radius: 50%; color: var(--green); background: rgba(251,250,245,.92); box-shadow: 0 4px 14px rgba(18,36,25,.16); cursor: pointer; line-height: 1; transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s, background .2s; }
.recipe-favorite { font-size: 20px; }
.recipe-share svg { width: 18px; height: 18px; overflow: visible; fill: var(--paper); stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recipe-share:hover { transform: scale(1.08); color: white; background: var(--green); }
.recipe-favorite:focus-visible, .recipe-share:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.recipe-favorite:disabled, .recipe-share:disabled { cursor: wait; opacity: .68; }
.recipe-favorite::before, .recipe-favorite::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.recipe-favorite::before { inset: -5px; border: 2px solid var(--lime); border-radius: 50%; }
.recipe-favorite::after {
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow:
    0 -29px 0 var(--lime),
    27px -10px 0 #f7b05b,
    22px 20px 0 #fff1a8,
    0 29px 0 #f7b05b,
    -23px 20px 0 var(--lime),
    -28px -8px 0 #fff1a8;
}
.recipe-favorite:hover { transform: scale(1.08); color: var(--orange); }
.recipe-favorite[aria-pressed="true"] { color: white; background: var(--orange); }
.recipe-favorite.is-celebrating { animation: favorite-heart-pop 560ms cubic-bezier(.16,1,.3,1) both; }
.recipe-favorite.is-celebrating::before { animation: favorite-ring 520ms cubic-bezier(.16,1,.3,1) both; }
.recipe-favorite.is-celebrating::after { animation: favorite-sparkles 620ms cubic-bezier(.16,1,.3,1) both; }

@keyframes favorite-heart-pop {
  0% { transform: scale(1); box-shadow: 0 4px 14px rgba(18,36,25,.16); }
  18% { transform: scale(.82) rotate(-7deg); }
  48% { transform: scale(1.28) rotate(5deg); box-shadow: 0 9px 24px rgba(216,111,54,.34); }
  72% { transform: scale(.96) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 4px 14px rgba(18,36,25,.16); }
}
@keyframes favorite-ring {
  0% { opacity: 0; transform: scale(.6); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.55); }
}
@keyframes favorite-sparkles {
  0% { opacity: 0; transform: scale(.45) rotate(-8deg); filter: blur(1px); }
  34% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3) rotate(7deg); filter: blur(0); }
}
.recipe-info { position: relative; z-index: 2; min-height: 112px; padding: 15px 18px 16px; background: var(--green); color: white; }
.recipe-info h3 { font-family: "Fraunces"; margin: 0 0 5px; font-size: 22px; }
.recipe-info p { margin: 0; color: rgba(255,255,255,.72); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipe-tags { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.diet-tag { display: inline-block; color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.health-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .02em; background: rgba(255,255,255,.12); }
.health-tag.health-great, .health-tag.health-good { color: #d9f08d; }
.health-tag.health-okay { color: #ffd38a; }
.health-tag.health-low { color: #ffaaa0; }
.recipe-card.perfect .match-badge { background: var(--lime); color: var(--green); }
.recipe-card.partial .match-badge { background: #f0b067; color: #342316; }
.share-toast { position: fixed; z-index: 30; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 12px 16px; transform: translateX(-50%); border-radius: 12px; color: white; background: var(--green); box-shadow: 0 12px 30px rgba(18,36,25,.24); font-size: 12px; font-weight: 700; text-align: center; }
.no-results { display: none; text-align: center; padding: 50px 20px; color: var(--muted); }
.no-results > .search-empty-icon { display: block; width: 30px; height: 30px; margin: 0 auto 18px; color: var(--orange); }
.no-results p { margin: 10px 0 8px; color: var(--ink); font-weight: 650; }
.no-results button { border: 0; background: none; color: var(--green); text-decoration: underline; cursor: pointer; }

dialog { width: min(680px, calc(100% - 28px)); max-height: calc(100dvh - 28px); overflow: auto; border: 0; padding: 0; border-radius: 26px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 90px rgba(13,31,20,.28); }
dialog::backdrop { background: rgba(19,34,25,.58); backdrop-filter: blur(4px); }
#recipe-dialog[open] { transform-origin: 50% 32%; animation: recipe-dialog-in .34s cubic-bezier(.16,1,.3,1) both; }
#recipe-dialog[open]::backdrop { animation: recipe-backdrop-in .28s ease-out both; }
#recipe-dialog.is-closing { pointer-events: none; animation: recipe-dialog-out .2s cubic-bezier(.4,0,1,1) both; }
#recipe-dialog.is-closing::backdrop { animation: recipe-backdrop-out .2s ease-in both; }
@keyframes recipe-dialog-in {
  0% { opacity: 0; transform: translateY(16px) scale(.972); filter: blur(1.5px); box-shadow: 0 10px 38px rgba(13,31,20,.14); }
  72% { opacity: 1; transform: translateY(-2px) scale(1.003); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); box-shadow: 0 24px 90px rgba(13,31,20,.28); }
}
@keyframes recipe-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(10px) scale(.986); filter: blur(1px); }
}
@keyframes recipe-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes recipe-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.dialog-shell { position: relative; padding: 34px; }
.dialog-photo { display: block; width: calc(100% + 68px); max-width: none; height: auto; aspect-ratio: 2.18 / 1; margin: -34px -34px 28px; border-radius: 26px 26px 0 0; object-fit: cover; object-position: center; background: #d9ded1; }
.close-button { position: absolute; right: 18px; top: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); font-size: 24px; cursor: pointer; z-index: 2; }
#recipe-dialog .close-button { display: grid; place-items: center; border-color: rgba(28,43,34,.18); color: var(--ink); background: rgba(251,250,245,.86); box-shadow: 0 5px 16px rgba(13,31,20,.16); backdrop-filter: blur(8px); transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
#recipe-dialog .close-button[data-photo-tone="dark"] { border-color: rgba(255,255,255,.42); color: white; background: rgba(20,35,26,.66); }
#recipe-dialog .close-button:hover { transform: translateY(-1px); background: rgba(251,250,245,.96); }
#recipe-dialog .close-button[data-photo-tone="dark"]:hover { background: rgba(20,35,26,.82); }
#recipe-dialog .close-button:active { transform: translateY(0); }
.dialog-kicker { color: var(--orange); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.dialog-title { font-size: clamp(34px, 6vw, 50px); line-height: 1; margin: 10px 40px 12px 0; letter-spacing: -.04em; }
.dialog-meta { display: flex; gap: 12px; color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.ingredients-heading { display: grid; gap: 8px; margin-bottom: 13px; }
.ingredients-heading > h3 { margin: 0; }
.recipe-conversion { display: grid; gap: 6px; }
.recipe-conversion-label { color: var(--muted); font-size: 9px; font-weight: 650; }
.recipe-conversion-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #f1f0e9; }
.recipe-conversion-actions button { min-height: 30px; border: 0; border-radius: 7px; padding: 6px 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }
.recipe-conversion-actions button:hover { color: var(--green); background: rgba(255,255,255,.6); }
.recipe-conversion-actions button[aria-pressed="true"] { color: var(--green); background: var(--paper); box-shadow: 0 1px 3px rgba(28,43,34,.12); }
.recipe-conversion-actions button:focus-visible { outline: 3px solid rgba(38,79,59,.18); outline-offset: 2px; }
.recipe-conversion p { margin: 1px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.nutrition-card { margin: 0 0 26px; overflow: hidden; border: 1px solid #dfe4d7; border-radius: 19px; background: linear-gradient(145deg,#f1f4e9,#fbfaf5 62%); }
.nutrition-summary { min-height: 78px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 13px 16px; cursor: pointer; list-style: none; transition: background .2s ease; }
.nutrition-summary::-webkit-details-marker { display: none; }
.nutrition-summary:hover { background: rgba(220,233,142,.16); }
.nutrition-summary:focus-visible { outline: 3px solid rgba(38,79,59,.2); outline-offset: -3px; }
.nutrition-summary-copy { min-width: 0; }
.nutrition-summary-copy h3 { margin: 2px 0; font-size: 17px; }
.nutrition-summary-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.nutrition-disclosure { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 7px 10px 7px 12px; border-radius: 10px; color: var(--green); background: #e4eccd; font-size: 9px; font-weight: 750; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.nutrition-disclosure svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.nutrition-disclosure .when-open { display: none; }
.nutrition-card[open] .nutrition-disclosure .when-closed { display: none; }
.nutrition-card[open] .nutrition-disclosure .when-open { display: inline; }
.nutrition-card[open] .nutrition-disclosure svg { transform: rotate(180deg); }
.nutrition-summary:hover .nutrition-disclosure { color: white; background: var(--green); box-shadow: 0 5px 14px rgba(38,79,59,.16); }
.nutrition-body { padding: 5px 16px 16px; border-top: 1px solid rgba(28,43,34,.08); }
.nutrition-card[open] .nutrition-body { animation: disclosure-content-in .28s cubic-bezier(.16,1,.3,1) both; }
.health-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; }
.score-ring { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 5px solid currentColor; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(28,43,34,.08); }
.score-ring strong { font-family: "Fraunces"; font-size: 20px; line-height: .85; color: var(--ink); }
.score-ring span { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 700; }
.score-great { color: #4e8e58; } .score-good { color: #79a64e; } .score-okay { color: #d39a35; } .score-low { color: #c45d4d; }
.nutrition-eyebrow { color: var(--green-2); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.health-summary h3 { margin: 3px 0 2px; font-size: 20px; }
.health-summary p { margin: 0; color: var(--muted); font-size: 11px; }
.fat-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 15px; }
.fat-controls label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.fat-controls select { width: 100%; min-height: 40px; padding: 8px 28px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 12px; }
.nutrition-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.nutrition-grid div { min-width: 0; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.72); }
.nutrition-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutrition-grid strong { font-size: 13px; }
.score-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.score-reasons p { margin: 0; padding: 9px 10px; border-radius: 10px; font-size: 10px; line-height: 1.45; }
.positive-reasons { color: #315c38; background: #e3efda; }
.caution-reasons { color: #71492d; background: #f5e6d3; }
.nutrition-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.dialog-columns { display: grid; grid-template-columns: .85fr 1.15fr; gap: 32px; border-top: 1px solid var(--line); padding-top: 24px; }
.dialog-columns h3 { font-size: 14px; margin: 0 0 13px; }
.ingredient-list, .steps-list { margin: 0; padding: 0; list-style: none; }
.ingredient-list li { display: flex; gap: 8px; margin-bottom: 11px; font-size: 13px; }
.ingredient-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ingredient-amount { color: var(--muted); font-size: 11px; }
.ingredient-short { color: var(--orange); font-size: 11px; font-weight: 600; }
.ingredient-replaced { padding: 8px; border: 1px solid #cddbb2; border-radius: 11px; background: #f4f7e9; }
.ingredient-replaced small { color: var(--muted); font-size: 9px; font-weight: 500; }
.ingredient-status-marker { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; margin: -3px 0 0 -5px; line-height: 1; }
.ingredient-check { color: var(--green-2); font-size: 16px; font-weight: 800; }
.ingredient-missing { color: var(--orange); }
.ingredient-bring-button { padding: 0; border: 1px solid #edaa82; border-radius: 8px; background: #fff2e8; cursor: pointer; font-size: 16px; font-weight: 800; transition: color .2s, background .2s, transform .2s; }
.ingredient-bring-button:hover { color: white; background: var(--orange); transform: translateY(-1px); }
.ingredient-bring-button:focus-visible { outline: 3px solid rgba(238,123,58,.3); outline-offset: 2px; }
.ingredient-bring-button:disabled { opacity: .55; cursor: wait; transform: none; }
.ingredient-bring-button.is-added, .ingredient-bring-button.is-added:disabled { border-color: #b9cda0; color: var(--green); background: #eaf2d6; opacity: 1; cursor: default; }
.optional-ingredient { margin: 4px 0 7px !important; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: #f1f0e9; transition: border-color .2s, background .2s; }
.optional-ingredient.selected { border-color: #bed28f; background: #eef3d7; }
.optional-ingredient small { display: inline-block; margin-left: 3px; padding: 2px 5px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.7); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.optional-toggle { position: relative; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; }
.optional-toggle input { position: absolute; opacity: 0; }
.optional-toggle > span:not(.sr-only) { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #c5cabf; border-radius: 8px; color: var(--green); background: white; font-size: 15px; font-weight: 800; transition: color .2s, background .2s, border-color .2s; }
.optional-toggle input:checked + span { border-color: var(--green); color: white; background: var(--green); }
.optional-toggle input:focus-visible + span { outline: 3px solid rgba(238,123,58,.3); outline-offset: 2px; }
.optional-hint { margin: 13px 0 0; padding: 10px; border-radius: 10px; color: var(--muted); background: #f3f1e8; font-size: 9px; line-height: 1.5; }
.optional-hint strong { color: var(--green); }
.pantry-basics { margin-top: 16px; padding: 12px; border: 1px solid #e5dfcc; border-radius: 12px; background: #faf8f0; }
.pantry-basics h4 { margin: 0 0 8px; color: var(--ink); font-size: 11px; }
.pantry-basics ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pantry-basics li { padding: 4px 7px; border-radius: 999px; background: #eeeadb; color: var(--ink); font-size: 10px; line-height: 1.25; }
.pantry-basics p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.side-dishes { margin-top: 12px; padding: 12px; border: 1px solid #d8e4ce; border-radius: 12px; background: #f3f7ee; }
.side-dishes h4 { margin: 0 0 7px; color: var(--green); font-size: 11px; }
.side-dishes ul { margin: 0; padding-left: 16px; color: var(--ink); font-size: 11px; line-height: 1.45; }
.side-dishes p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.steps-option-count { display: inline-block; margin-left: 5px; padding: 3px 6px; border-radius: 999px; color: var(--green); background: var(--lime); font-family: "DM Sans"; font-size: 8px; vertical-align: 2px; }
.steps-option-count:empty { display: none; }
.steps-list li { position: relative; padding-left: 34px; margin-bottom: 22px; font-size: 13px; line-height: 1.55; }
.step-number { position: absolute; left: 0; top: -2px; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--green); font-size: 11px; font-weight: 700; }
.step-title, .step-copy, .step-cue, .step-tip { display: block; }
.step-title { margin-bottom: 5px; color: var(--ink); font-size: 14px; }
.step-copy { color: var(--ink); }
.step-details { margin-top: 7px; }
.step-details > summary { width: fit-content; min-height: 32px; display: flex; align-items: center; gap: 6px; border-radius: 9px; padding: 6px 9px; color: var(--green); background: #edf2dc; cursor: pointer; font-size: 10px; font-weight: 750; list-style: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.step-details > summary::-webkit-details-marker { display: none; }
.step-details > summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.step-details > summary:hover { color: white; background: var(--green); box-shadow: 0 5px 14px rgba(38,79,59,.14); transform: translateY(-1px); }
.step-details > summary:focus-visible { outline: 3px solid rgba(38,79,59,.2); outline-offset: 2px; }
.step-details[open] > summary { background: var(--lime); }
.step-details[open] > summary:hover { color: var(--green); background: #d3e375; }
.step-details[open] > summary svg { transform: rotate(180deg); }
.step-guidance-preview { margin-top: 3px; }
.step-details[open] .step-guidance-preview { animation: disclosure-content-in .28s cubic-bezier(.16,1,.3,1) both; }
.step-cue, .step-tip { margin-top: 7px; padding: 8px 10px; border-radius: 9px; color: #536047; background: #f0f2e7; font-size: 10px; line-height: 1.45; }
.step-cue strong, .step-tip strong { color: var(--green); }
@keyframes disclosure-content-in {
  from { opacity: .18; transform: translateY(-6px); clip-path: inset(0 0 14% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}
.cook-button { margin-top: 24px; width: 100%; border: 0; border-radius: 13px; padding: 15px; color: white; background: var(--green); font-weight: 600; cursor: pointer; }
.recipe-action-dock { margin-top: 24px; }
.missing-preview { margin: 0 0 9px; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }
.recipe-primary-actions { display: grid; grid-template-columns: .72fr 1fr 1.35fr; gap: 9px; }
.recipe-primary-actions .cook-button { margin-top: 0; }
.recipe-primary-actions.is-ready .start-cook-mode { color: white; background: var(--green); }
.recipe-primary-actions.is-ready .cook-button { border: 1px solid var(--green); color: var(--green); background: transparent; }
.recipe-primary-actions.is-missing .cook-button { background: var(--orange); }
.recipe-primary-actions.is-missing .start-cook-mode { border: 1px solid var(--line); color: var(--green); background: transparent; }
.plan-recipe-button { border: 1px solid var(--green); border-radius: 13px; padding: 12px; color: var(--green); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.plan-recipe-button:hover { background: #eef3d7; }
.start-cook-mode { border: 0; border-radius: 13px; padding: 12px; color: var(--green); background: var(--lime); cursor: pointer; font-size: 11px; font-weight: 800; }
.start-cook-mode:hover { background: #d3e77d; }
.cook-button.bring-mode { background: var(--orange); }
.cook-button.bring-mode:hover { background: #d96528; }
.cook-button:disabled { opacity: .72; cursor: wait; }
.dialog-bring-status { min-height: 15px; margin: 8px 4px 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Ruhige, klar gekennzeichnete Werbeflächen. Die Höhe wird erst reserviert,
   wenn Werbung wirklich zulässig ist, damit Plus-Nutzer keine Leerfläche sehen. */
.ad-slot[hidden] { display: none; }
.ad-slot { box-sizing: border-box; width: 100%; overflow: hidden; }
.ad-slot-feed {
  grid-column: 1 / -1;
  width: calc(100% + var(--recipes-panel-gutter) + var(--recipes-panel-gutter));
  min-height: 118px;
  margin: 20px calc(0px - var(--recipes-panel-gutter)) 6px;
}
.ad-slot-feed .ad-label { padding-inline: var(--recipes-panel-gutter); }
.ad-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ad-test-copy { min-height: 90px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px dashed #c8c9bb; border-radius: 14px; color: var(--muted); background: #efeee6; }
.ad-test-copy strong { color: var(--green); font-size: 12px; }
.ad-test-copy p { margin: 0; font-size: 11px; line-height: 1.45; }
.ad-test-copy a { min-height: 40px; display: inline-flex; align-items: center; border-radius: 10px; padding: 0 12px; color: var(--green); background: var(--lime); font-size: 10px; font-weight: 800; text-decoration: none; }
.ad-slot.is-live-ad { min-height: 100px; }

/* Kochmodus: auf Distanz lesbar, mit großen, fett- und hitzesicheren Touch-Zielen. */
#cook-mode-dialog { box-sizing: border-box; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; overflow: hidden; overscroll-behavior: none; border-radius: 0; color: #f8f6ed; background: #173d2b; box-shadow: none; }
#cook-mode-dialog::backdrop { background: #173d2b; }
#cook-mode-dialog:fullscreen { width: 100vw; height: 100dvh; }
.cook-mode-shell { width: 100%; height: 100%; min-height: 0; max-height: 100%; overflow: hidden; display: grid; grid-template-rows: auto 5px minmax(0,1fr) auto; background: radial-gradient(circle at 82% 14%,rgba(217,240,141,.12),transparent 30%),#173d2b; }
.cook-mode-header { position: relative; z-index: 2; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; padding: max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 17px max(24px,env(safe-area-inset-left)); background: #173d2b; }
.cook-mode-exit { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; color: white; background: rgba(255,255,255,.08); cursor: pointer; font-size: 28px; }
.cook-mode-heading { min-width: 0; }
.cook-mode-heading span { display: block; margin-bottom: 3px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.cook-mode-heading h2 { overflow: hidden; margin: 0; color: white; font: 700 clamp(20px,3vw,30px)/1.1 "Fraunces",serif; text-overflow: ellipsis; white-space: nowrap; }
.cook-mode-device-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.wake-status { max-width: 220px; color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.35; text-align: right; }
.wake-status.active { color: var(--lime); }
.wake-status.warning { color: #ffd38a; }
#cook-fullscreen-toggle { min-height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; padding: 8px 13px; color: white; background: rgba(255,255,255,.08); cursor: pointer; font-weight: 700; }
.cook-mode-progress { overflow: hidden; background: rgba(255,255,255,.1); }
.cook-mode-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cook-mode-stage { --cook-stage-gutter: clamp(24px,6vw,76px); box-sizing: border-box; width: min(920px,100%); height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; margin: 0 auto; padding: clamp(34px,7vh,84px) var(--cook-stage-gutter) 32px; }
.cook-step-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cook-mode-stage h3 { max-width: 17ch; margin: 18px 0 24px; color: white; font: 700 clamp(42px,7.5vw,78px)/.98 "Fraunces",serif; letter-spacing: -.035em; text-wrap: balance; }
.cook-step-copy { max-width: 70ch; margin: 0; color: #f7f5ec; font-size: clamp(19px,2.5vw,28px); line-height: 1.55; }
.cook-step-guidance { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.cook-step-guidance p { min-width: 0; margin: 0; padding: 17px 18px; border-radius: 14px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.08); font-size: 14px; line-height: 1.5; }
.cook-step-guidance strong, .cook-step-guidance span { display: block; }
.cook-step-guidance strong { margin-bottom: 6px; color: var(--lime); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.cook-timer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 22px; padding: 13px 16px; border-radius: 14px; color: white; background: #0f2d1f; }
.cook-timer > span { color: rgba(255,255,255,.65); font-size: 11px; font-weight: 700; }
.cook-timer > strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.cook-timer > div { display: flex; gap: 7px; }
.cook-timer button { min-height: 40px; border: 0; border-radius: 10px; padding: 8px 12px; color: #173d2b; background: var(--lime); cursor: pointer; font-weight: 800; }
.cook-timer button:last-child { color: white; background: rgba(255,255,255,.12); }
.ad-slot-cooking { width: calc(100% + var(--cook-stage-gutter) + var(--cook-stage-gutter)); min-height: 104px; margin: 28px calc(0px - var(--cook-stage-gutter)) 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.ad-slot-cooking .ad-label { padding-inline: var(--cook-stage-gutter); }
.ad-slot-cooking .ad-label { color: rgba(255,255,255,.58); }
.ad-slot-cooking .ad-test-copy { min-height: 72px; border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.68); background: rgba(255,255,255,.06); }
.ad-slot-cooking .ad-test-copy strong { color: var(--lime); }
.native-ad-active body { padding-bottom: 58px; }
.native-ad-cooking body { padding-bottom: 0; }
.native-ad-cooking .cook-mode-stage { padding-bottom: 100px; }
.cook-mode-footer { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(120px,auto) 1fr minmax(120px,auto); align-items: center; gap: 18px; padding: 17px max(24px,env(safe-area-inset-right)) max(17px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background: #0f2d1f; box-shadow: 0 -12px 30px rgba(8,25,17,.24); }
.cook-mode-footer > button { min-height: 50px; border: 0; border-radius: 13px; padding: 11px 20px; cursor: pointer; font-size: 13px; font-weight: 800; }
.cook-back { color: white; background: rgba(255,255,255,.1); }
.cook-next { color: #173d2b; background: var(--lime); }
.cook-mode-footer button:disabled { opacity: .38; cursor: not-allowed; }
.cook-step-dots { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.cook-step-dots button { width: 11px; height: 11px; overflow: hidden; border: 0; border-radius: 50%; padding: 0; color: transparent; background: rgba(255,255,255,.24); cursor: pointer; }
.cook-step-dots button.active { width: 28px; border-radius: 999px; background: var(--lime); }

#scan-dialog { width: min(720px, calc(100% - 28px)); }
.scan-dialog-shell { position: relative; padding: 34px; }
.scan-title { margin: 7px 48px 22px 0; font-size: 38px; letter-spacing: -.035em; }
.scan-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin-bottom: 24px; border-radius: 14px; background: #eeede5; }
.scan-tabs button { min-height: 42px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.scan-tabs button[aria-selected="true"] { color: var(--green); background: var(--paper); box-shadow: 0 3px 10px rgba(28,43,34,.08); }
.scan-panel[hidden] { display: none; }
.scan-intro { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.scan-intro > span { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--green); background: var(--lime); font-size: 10px; font-weight: 800; }
.scan-intro strong { display: block; margin: 1px 0 4px; font-size: 14px; }
.scan-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.scan-choice { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9px; }
.scan-primary, .scan-secondary { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 700; }
.scan-primary { border: 0; color: white; background: var(--green); }
.scan-primary:hover { background: #173d2b; }
.scan-primary span { color: var(--lime); font-size: 18px; }
.scan-secondary { border: 1px solid var(--line); color: var(--green); background: #f1f0e9; }
.manual-code { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.manual-code > label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.manual-code > div { display: grid; grid-template-columns: 1fr auto; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.manual-code input { min-width: 0; border: 0; outline: 0; padding: 9px 10px; color: var(--ink); background: transparent; font-variant-numeric: tabular-nums; }
.manual-code button { border: 0; border-radius: 9px; padding: 8px 14px; color: var(--green); background: var(--lime); cursor: pointer; font-size: 11px; font-weight: 700; }
.camera-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 12px; border-radius: 18px; background: #101813; }
.camera-stage video { width: 100%; height: 100%; display: block; object-fit: cover; }
.scanner-frame { position: absolute; inset: 26% 12%; border: 2px solid rgba(220,233,142,.9); border-radius: 13px; box-shadow: 0 0 0 999px rgba(8,17,11,.3); }
.scanner-frame::before, .scanner-frame::after { content: ""; position: absolute; left: 7%; right: 7%; height: 1px; background: rgba(255,255,255,.24); }
.scanner-frame::before { top: 32%; } .scanner-frame::after { bottom: 32%; }
.scanner-frame i { position: absolute; left: 5%; right: 5%; top: 50%; height: 2px; background: var(--orange); box-shadow: 0 0 12px var(--orange); animation: scannerLine 1.8s ease-in-out infinite alternate; }
@keyframes scannerLine { from { transform: translateY(-42px); } to { transform: translateY(42px); } }
.camera-status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 11px; border-radius: 999px; color: white; background: rgba(13,31,20,.72); backdrop-filter: blur(8px); font-size: 10px; white-space: nowrap; }
.scan-status { min-height: 0; margin-top: 12px; padding: 0; border-radius: 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.scan-status:not(:empty) { min-height: 36px; padding: 10px 12px; background: #efeee7; }
.scan-status.success { color: #315c38; background: #e3efda; }
.scan-status.warning { color: #71492d; background: #f5e6d3; }
.scan-status.error { color: #8b392c; background: #f8ded8; }
.scan-status.working { color: var(--green); background: #edf4df; }
.scan-product { margin-top: 12px; padding: 15px; border: 1px solid #dfe4d7; border-radius: 16px; background: #f3f5ec; }
.product-result-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.product-pack { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--lime); font-size: 20px; }
.product-result-head small, .product-result-head strong { display: block; }
.product-result-head small { margin-bottom: 2px; color: var(--muted); font-size: 9px; }
.product-result-head strong { font-size: 14px; }
.product-classification { margin: -4px 0 12px; padding: 7px 9px; border-radius: 9px; color: var(--green); background: #e5edce; font-size: 9px; line-height: 1.4; }
.product-fields { display: grid; grid-template-columns: minmax(150px,1fr) 76px 88px 124px; gap: 8px; }
.product-fields label { min-width: 0; }
.product-fields label > span { display: block; margin: 0 0 5px 2px; color: var(--muted); font-size: 9px; font-weight: 700; }
.product-fields input, .product-fields select { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 9px; color: var(--ink); background: white; }
.scan-save { width: 100%; margin-top: 13px; }
.receipt-drop { min-height: 160px; display: grid; place-content: center; justify-items: center; padding: 24px; border: 1px dashed rgba(38,79,59,.35); border-radius: 18px; background: linear-gradient(145deg,#f3f5ea,#fbfaf5); cursor: pointer; text-align: center; transition: border-color .2s, background .2s; }
.receipt-drop:hover { border-color: var(--orange); background: #fbf3e9; }
.receipt-camera { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 15px; color: white; background: var(--green); font-size: 25px; transform: rotate(-3deg); }
.receipt-drop strong { font-size: 14px; }
.receipt-drop small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.receipt-progress { margin-top: 13px; padding: 14px; border-radius: 13px; color: var(--green); background: #edf4df; }
.receipt-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; font-weight: 700; }
.progress-track { height: 6px; overflow: hidden; margin: 9px 0 7px; border-radius: 999px; background: rgba(38,79,59,.12); }
.progress-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.receipt-progress p { margin: 0; color: var(--muted); font-size: 9px; }
.receipt-workspace { display: grid; grid-template-columns: 132px 1fr; gap: 12px; margin-top: 14px; }
.receipt-workspace > img { width: 100%; height: 165px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 12px; background: #eee; }
.receipt-text-wrap { min-width: 0; }
.receipt-text-wrap label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.receipt-text-wrap label button { border: 0; padding: 3px; color: var(--green); background: transparent; cursor: pointer; font-size: 9px; text-decoration: underline; }
.receipt-text-wrap textarea { width: 100%; height: 143px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: var(--ink); background: white; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.receipt-review { margin-top: 15px; }
.review-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.review-heading strong, .review-heading small { display: block; }
.review-heading strong { font-size: 13px; }
.review-heading small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.review-heading button { border: 0; padding: 4px 0; color: var(--green); background: transparent; cursor: pointer; font-size: 9px; text-decoration: underline; }
#receipt-items { max-height: 310px; overflow: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 2px; }
.receipt-item { display: grid; grid-template-columns: 34px minmax(120px,1fr) 64px 78px 118px; align-items: center; gap: 6px; padding: 6px; border-radius: 11px; background: #efeee7; }
.receipt-check { position: relative; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; }
.receipt-check input { position: absolute; opacity: 0; }
.receipt-check > span:not(.sr-only) { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #cbd0c5; border-radius: 7px; color: transparent; background: white; font-size: 12px; }
.receipt-check input:checked + span { border-color: var(--green); color: white; background: var(--green); }
.receipt-check input:focus-visible + span { outline: 3px solid rgba(238,123,58,.3); }
.receipt-item > input, .receipt-item > select { min-width: 0; width: 100%; height: 34px; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; color: var(--ink); background: white; font-size: 10px; }
.receipt-item > input:focus, .receipt-item > select:focus { border-color: var(--green); outline: none; }
.receipt-qty { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .scanner-frame i { animation: none; }
  .scan-action, .primary-button, .recipe-card { transition: none; }
  .recipe-favorite.is-celebrating, .recipe-favorite.is-celebrating::before, .recipe-favorite.is-celebrating::after { animation: none; }
}

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .pantry-panel { position: static; }
  .pantry-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .recipes-header { align-items: flex-start; flex-direction: column; }
  .recipes-tools { justify-content: flex-start; }
  .recipe-discovery { grid-template-columns: 1fr auto; }
  .recipe-filters { grid-template-columns: 1fr 1fr; }
  .diet-block { grid-column: 1 / -1; }
}
@media (max-width: 610px) {
  .topbar { padding: 16px 14px; gap: 10px; flex-wrap: wrap; }
  .topnav { order: 3; width: 100%; justify-content: center; }
  .topnav a { flex: 1; padding: 8px 6px; text-align: center; }
  .hero { margin: 40px auto 46px; padding: 0 18px; }
  h1 { font-size: 54px; }
  .intro { font-size: 15px; }
  .scan-actions { align-items: stretch; gap: 7px; }
  .scan-action { min-width: 0; flex: 1; padding: 8px; }
  .scan-action small { display: none; }
  .add-form { grid-template-columns: 1fr; }
  .input-wrap { grid-column: 1; border-bottom: 1px solid var(--line); }
  .quantity-wrap { border-left: 0; }
  .workspace { padding: 0 14px 40px; }
  .pantry-panel, .recipes-panel { border-radius: 20px; }
  .pantry-panel { padding: 20px; }
  .recipes-panel { --recipes-panel-gutter: 20px; padding: var(--recipes-panel-gutter); }
  .pantry-list, .recipe-grid { grid-template-columns: 1fr; }
  .recipe-group-heading { align-items: flex-start; }
  .recipe-group-heading small { max-width: 48%; }
  .recipe-filters { grid-template-columns: 1fr; padding: 10px; }
  .diet-block { grid-column: auto; }
  .filter-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-chip { min-height: 44px; }
  .recipes-tools { width: 100%; }
  .recipe-discovery { grid-template-columns: 1fr; }
  .recipe-search input { min-height: 48px; font-size: 16px; }
  .favorites-filter { min-height: 48px; width: 100%; }
  .servings-control { width: 100%; justify-content: center; }
  .dialog-shell { padding: 28px 22px; }
  .dialog-photo { width: calc(100% + 44px); margin: -28px -22px 24px; border-radius: 26px 26px 0 0; }
  .fat-controls, .score-reasons { grid-template-columns: 1fr; }
  .nutrition-grid { grid-template-columns: repeat(2,1fr); }
  .dialog-columns { grid-template-columns: 1fr; }
  .scan-dialog-shell { padding: 26px 18px; }
  .scan-title { font-size: 31px; }
  .scan-choice { grid-template-columns: 1fr; }
  .product-fields { grid-template-columns: 1fr 1fr; }
  .product-fields label:first-child { grid-column: 1 / -1; }
  .receipt-workspace { grid-template-columns: 82px 1fr; }
  .receipt-item { grid-template-columns: 30px 1fr 64px; }
  .receipt-item select { grid-column: 2 / -1; }
  .ad-test-copy { grid-template-columns: 1fr; gap: 7px; }
  .ad-test-copy a { width: fit-content; }
}

@media (pointer: coarse) {
  .edit-item, .remove-item, .servings-control button { min-width: 44px; min-height: 44px; }
}