:root {
  --ink: #203229;
  --muted: #68766f;
  --paper: #f7f5ef;
  --card: #fffefb;
  --green: #1f6b4b;
  --green-dark: #124832;
  --lime: #ddeb8c;
  --peach: #f1b59f;
  --line: #dde2dc;
  --shadow: 0 16px 44px rgba(36, 55, 44, .09);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1180px; margin: 0 auto; padding: 0 34px 80px; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 3px solid white; box-shadow: 0 5px 16px rgba(31,107,75,.18);
}
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-family: Georgia, serif; font-size: 20px; }
.brand small { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.account-button {
  min-height: 42px; padding: 5px 13px; border: 1px solid var(--line); border-radius: 13px;
  text-align: right; color: var(--ink); background: rgba(255,255,255,.7);
}
.account-button span, .account-button strong { display: block; line-height: 1.2; }
.account-button span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.account-button strong { font-size: 12px; }
.icon-button {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.7);
  color: var(--ink); font-size: 20px; display: grid; place-items: center;
}
.icon-button:hover { border-color: var(--green); color: var(--green); }

.hero {
  position: relative; min-height: 286px; overflow: hidden; border-radius: 34px; padding: 46px 52px;
  background: var(--green-dark); color: white; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 310px; height: 310px; right: -90px; top: -160px; background: var(--lime); opacity: .92; }
.hero::after { width: 180px; height: 180px; right: 190px; bottom: -120px; background: var(--peach); opacity: .86; }
.hero > * { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 7px; text-transform: uppercase; letter-spacing: .15em; font-size: 11px; font-weight: 800; color: #91aa9e; }
.hero .eyebrow { color: var(--lime); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 14px; font: 500 clamp(35px, 5vw, 58px)/.98 Georgia, serif; letter-spacing: -.035em; }
h1 em { color: var(--lime); font-weight: 400; }
.hero-copy { margin: 0; color: #d6dfda; max-width: 540px; }
.hero-stats { display: flex; gap: 22px; padding: 19px 22px; min-width: 310px; border-radius: 18px; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.hero-stats div { flex: 1; text-align: center; }
.hero-stats strong { display: block; color: var(--lime); font: 600 24px Georgia, serif; }
.hero-stats span { white-space: nowrap; font-size: 10px; color: #cbd7d1; text-transform: uppercase; letter-spacing: .08em; }

.tabs { display: flex; gap: 30px; margin: 34px 0 32px; border-bottom: 1px solid var(--line); }
.tab { color: var(--muted); background: none; border: 0; padding: 0 2px 14px; font-weight: 700; position: relative; }
.tab.active { color: var(--green); }
.tab.active::after { content: ""; position: absolute; height: 3px; border-radius: 3px; left: 0; right: 0; bottom: -2px; background: var(--green); }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 20px; margin-left: 4px; background: #e2e8e1; font-size: 11px; }
.tab.active .count { background: var(--green); color: white; }
.hidden { display: none !important; }
.auth-screen {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 15% 15%, rgba(221,235,140,.55), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(241,181,159,.45), transparent 32%),
    var(--paper);
}
.login-card {
  width: min(430px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 28px;
  text-align: center; background: var(--card); box-shadow: var(--shadow);
}
.login-card > img {
  width: 112px; height: 112px; margin-bottom: 18px; border-radius: 50%; object-fit: cover;
  border: 5px solid #edf1d5;
}
.login-card h1 { margin-bottom: 10px; font-size: 36px; }
.login-card > p:not(.eyebrow) { color: var(--muted); }
.login-card form { margin-top: 24px; text-align: left; }
.login-card label, #account-dialog label, .inline-create label, .member-create label {
  display: block; color: #526158; font-size: 12px; font-weight: 750;
}
.form-error { margin: 10px 0 0; color: #a12c2c; font-size: 12px; }
.danger-text { color: #9b3535 !important; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font: 500 34px/1.1 Georgia, serif; letter-spacing: -.02em; }
.button {
  min-height: 44px; border-radius: 14px; padding: 0 18px; border: 1px solid transparent; font-weight: 750; font-size: 14px;
  transition: transform .15s, background .15s, opacity .15s;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.button.primary { color: white; background: var(--green); box-shadow: 0 7px 18px rgba(31,107,75,.19); }
.button.primary:hover { background: #175c3f; }
.button.ghost { background: transparent; color: var(--green); border-color: #b9c8bf; }
.button.full { width: 100%; margin-top: 18px; }
.actions { display: flex; gap: 9px; }

.empty-card { padding: 54px 24px; text-align: center; border: 1px dashed #c8d1c9; border-radius: var(--radius); background: rgba(255,255,255,.43); }
.empty-card h3 { font: 500 24px Georgia, serif; margin-bottom: 7px; }
.empty-card p { color: var(--muted); max-width: 500px; margin: 0 auto 20px; }
.empty-card.compact { padding: 38px 20px; }
.empty-illustration { font-size: 34px; margin-bottom: 18px; }
.empty-illustration span { display: inline-block; margin: 0 -2px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.1)); }
.empty-illustration span:nth-child(1) { transform: rotate(-15deg); }
.empty-illustration span:nth-child(3) { transform: rotate(14deg); }

.meal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.meal-card { min-width: 0; overflow: hidden; border-radius: var(--radius); background: var(--card); border: 1px solid #e4e5df; box-shadow: 0 8px 22px rgba(36,55,44,.04); }
.meal-card.rejected { opacity: .55; }
.meal-art {
  height: 118px; padding: 18px; background: #e8efcf; display: flex; align-items: flex-start; justify-content: space-between;
  position: relative; overflow: hidden;
}
.meal-art::after { content: attr(data-emoji); position: absolute; font-size: 72px; right: 14px; bottom: -15px; transform: rotate(-8deg); filter: drop-shadow(0 9px 8px rgba(34,60,43,.12)); }
.meal-art.has-photo { height: 160px; background-size: cover; background-position: center; }
.meal-art.has-photo::after { display: none; }
.meal-card:nth-child(3n+2) .meal-art { background: #f4d7c9; }
.meal-card:nth-child(3n) .meal-art { background: #d7e7e0; }
.day { position: relative; z-index: 1; background: rgba(255,255,255,.86); border-radius: 20px; padding: 5px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.meal-body { padding: 18px; }
.meal-body h3 { min-height: 48px; margin-bottom: 8px; font: 600 20px/1.2 Georgia, serif; }
.meal-description { height: 42px; overflow: hidden; margin-bottom: 15px; color: var(--muted); font-size: 13px; }
.metadata { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.metadata span { background: #f0f2ed; border-radius: 8px; padding: 5px 8px; font-size: 11px; color: #526158; }
.meal-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 7px; }
.small-button { border: 1px solid var(--line); background: white; color: var(--green); min-height: 38px; border-radius: 11px; font-weight: 700; padding: 0 11px; }
.small-button:hover { border-color: var(--green); }
.accept-button { width: 40px; padding: 0; font-size: 17px; }
.accept-button.active { color: white; background: var(--green); border-color: var(--green); }

.progress-row { display: flex; align-items: center; gap: 14px; margin: -5px 0 24px; color: var(--muted); font-size: 12px; }
.progress-track { height: 6px; flex: 1; border-radius: 8px; background: #dfe4df; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width .25s; }
.shopping-list { display: grid; gap: 17px; }
.shopping-category { background: var(--card); border: 1px solid #e2e5df; border-radius: 18px; padding: 18px 20px; }
.shopping-category h3 { margin-bottom: 8px; color: var(--green); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.shopping-item { display: flex; align-items: center; gap: 13px; min-height: 48px; border-top: 1px solid #edf0ec; cursor: pointer; }
.shopping-item:first-of-type { border-top: 0; }
.shopping-item input { position: absolute; opacity: 0; }
.checkmark { width: 23px; height: 23px; border: 2px solid #b9c6be; border-radius: 7px; display: grid; place-items: center; flex: none; transition: .15s; }
.shopping-item input:checked + .checkmark { background: var(--green); border-color: var(--green); }
.shopping-item input:checked + .checkmark::after { content: "✓"; color: white; font-weight: 900; font-size: 14px; }
.shopping-item input:focus-visible + .checkmark { outline: 3px solid #bbd9ca; outline-offset: 2px; }
.item-name { flex: 1; font-weight: 650; }
.item-qty { color: var(--muted); white-space: nowrap; font-size: 13px; }
.shopping-item:has(input:checked) .item-name { color: #97a099; text-decoration: line-through; }
.retailer-note { display: flex; gap: 15px; margin-top: 20px; padding: 18px 20px; border-radius: 16px; background: #e9eee9; color: #526158; }
.retailer-note > span { font-size: 23px; }
.retailer-note strong { color: var(--ink); font-size: 13px; }
.retailer-note p { margin: 3px 0 0; font-size: 12px; }

.catalog-summary { margin: 0; color: var(--muted); }
.catalog-summary strong { color: var(--green); font: 600 24px Georgia, serif; }
.catalog-toolbar {
  display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 10px; padding: 14px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); margin-bottom: 14px;
}
.catalog-toolbar label { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.catalog-toolbar input, .catalog-toolbar select { margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.kid-callout { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 20px; border-radius: 15px; background: #e7efc8; }
.kid-callout > span { font-size: 25px; }
.kid-callout strong { font-size: 13px; }
.kid-callout p { margin: 2px 0 0; color: #5c695f; font-size: 12px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.catalog-card { overflow: hidden; border: 1px solid #e1e4de; border-radius: 19px; background: var(--card); box-shadow: 0 8px 22px rgba(36,55,44,.04); }
.catalog-photo { height: 165px; display: grid; place-items: center; position: relative; background: #dfe9d5; background-size: cover; background-position: center; }
.catalog-photo > span { font-size: 70px; }
.select-recipe {
  position: absolute; top: 11px; right: 11px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--green); font-size: 24px; box-shadow: 0 5px 16px rgba(0,0,0,.13);
}
.select-recipe.selected { color: white; background: var(--green); }
.catalog-card-body { padding: 17px; }
.catalog-card-body h3 { min-height: 46px; margin-bottom: 13px; font: 600 19px/1.2 Georgia, serif; }
.catalog-tags { margin-bottom: 5px; color: var(--green); text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.nutrition { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.nutrition span { color: var(--muted); font-size: 10px; }
.nutrition b { color: var(--ink); font-size: 12px; }
.catalog-detail { width: 100%; }

.rumpfy-layout { display: grid; grid-template-columns: 300px 1fr; min-height: 620px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: var(--card); box-shadow: var(--shadow); }
.rumpfy-profile { padding: 25px; background: #eef1d9; }
.rumpfy-profile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: 20px; border: 5px solid rgba(255,255,255,.7); }
.rumpfy-profile h2 { margin-bottom: 10px; font: 500 30px Georgia, serif; }
.rumpfy-profile > p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.prompt-chips button { padding: 7px 10px; border: 1px solid #b9c8a6; border-radius: 18px; background: rgba(255,255,255,.65); color: var(--green-dark); font-size: 11px; }
.chat-panel { min-width: 0; display: flex; flex-direction: column; }
.chat-messages { flex: 1; height: 540px; overflow: auto; padding: 25px; display: flex; flex-direction: column; gap: 14px; }
.chat-message { max-width: 80%; padding: 13px 15px; border-radius: 16px 16px 16px 4px; background: #edf1ec; }
.chat-message.user { align-self: flex-end; color: white; background: var(--green); border-radius: 16px 16px 4px 16px; }
.chat-message strong { font-size: 11px; }
.chat-message p { margin: 3px 0 0; font-size: 13px; white-space: pre-wrap; }
.chat-recipes { display: grid; gap: 7px; margin-top: 10px; }
.chat-recipe { display: flex; flex-direction: column; gap: 2px; padding: 10px; text-align: left; border: 1px solid #d4dbd4; border-radius: 10px; background: white; color: var(--ink); }
.chat-recipe span { color: var(--muted); font-size: 10px; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 14px; border-top: 1px solid var(--line); }
.chat-form input { margin: 0; }
.inventory-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px;
  padding: 28px 32px; overflow: hidden; border-radius: 24px; color: white; background: var(--green-dark);
}
.inventory-hero h2 { margin-bottom: 9px; font: 500 34px/1.08 Georgia, serif; }
.inventory-hero p:not(.eyebrow) { max-width: 690px; margin: 0; color: #d4e0d9; }
.inventory-hero-icon { flex: none; font-size: 76px; filter: drop-shadow(0 9px 10px rgba(0,0,0,.18)); }
.bar-hero { background: #3d3046; }
.inventory-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 18px; }
.scan-card, .inventory-panel {
  padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 8px 22px rgba(36,55,44,.04);
}
.photo-preview {
  min-height: 260px; padding: 22px; display: grid; place-items: center; align-content: center; text-align: center;
  overflow: hidden; border: 1px dashed #b9c8bf; border-radius: 16px; background: #eef1e8; background-size: cover; background-position: center;
}
.photo-preview.has-photo { border-style: solid; }
.photo-preview.has-photo > * { display: none; }
.photo-preview span { font-size: 48px; }
.photo-preview p { max-width: 260px; margin: 8px auto 0; color: var(--muted); font-size: 12px; }
.privacy-note, .responsible-note { margin: 11px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.compact-heading { align-items: center; margin-bottom: 12px; }
.compact-heading h3 { margin: 0; font: 600 24px Georgia, serif; }
.analysis-note { padding: 11px 13px; border-radius: 11px; color: #536259; background: #eef2ed; font-size: 12px; }
.inventory-items { display: grid; gap: 8px; margin: 12px 0; max-height: 390px; overflow: auto; }
.inventory-row { display: grid; grid-template-columns: minmax(0, 1.8fr) .7fr .7fr auto; gap: 7px; align-items: center; }
.inventory-row input { min-width: 0; margin: 0; padding: 9px 10px; }
.inventory-row .remove-item { width: 36px; height: 36px; padding: 0; border: 1px solid #dfc9c3; border-radius: 10px; color: #9a4c3d; background: #fff7f4; }
.inventory-empty { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 12px; }
.suggestion-section { margin-top: 30px; }
.idea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.idea-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); }
.idea-card h3 { margin: 0 0 7px; font: 600 20px/1.15 Georgia, serif; }
.idea-card p { margin-bottom: 9px; color: var(--muted); font-size: 12px; }
.idea-detail { display: inline-block; padding: 5px 8px; border-radius: 8px; color: var(--green); background: #eaf0e8; font-size: 10px; font-weight: 750; }
.idea-card details { margin-top: 10px; font-size: 11px; color: var(--muted); }
.idea-card details ul, .idea-card details ol { padding-left: 18px; }
.analyzing { animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .55; } }
.recipe-nutrition { display: flex; gap: 8px; margin-top: 14px; }
.recipe-nutrition span { padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.13); font-size: 11px; }
.recipe-hero.with-photo { background-size: cover; background-position: 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; }

dialog { width: min(720px, calc(100% - 28px)); max-height: min(90vh, 850px); overflow: auto; border: 0; border-radius: 26px; padding: 26px; color: var(--ink); background: var(--card); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(16,31,23,.55); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }
.dialog-head h2 { margin: 0; font: 500 34px Georgia, serif; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label, fieldset { font-size: 12px; color: #526158; font-weight: 750; }
input, select, textarea { width: 100%; border: 1px solid #ccd4cd; border-radius: 11px; padding: 11px 12px; margin-top: 6px; color: var(--ink); background: white; }
input:focus, select:focus, textarea:focus { outline: 3px solid #d3e5da; border-color: var(--green); }
fieldset { border: 0; padding: 0; margin: 20px 0; }
legend { padding: 0; margin-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: block; padding: 8px 12px; border-radius: 20px; border: 1px solid #cad3cc; background: white; font-weight: 650; }
.chips input:checked + span { color: white; background: var(--green); border-color: var(--green); }
.chips input:focus-visible + span { outline: 3px solid #c3dfcf; }
.span-two { grid-column: 1 / -1; }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.ai-label { color: var(--muted); font-size: 11px; }
#recipe-dialog { max-width: 620px; }
#account-dialog { max-width: 520px; }
#admin-dialog { max-width: 820px; }
.first-login-note { padding: 13px 15px; border-radius: 13px; background: #eef1d9; color: #46573d; font-size: 13px; }
.inline-create { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-bottom: 22px; }
.families-list { display: grid; gap: 14px; }
.family-admin-card { padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fbfcf8; }
.family-admin-card h3 { margin-bottom: 3px; font: 600 20px Georgia, serif; }
.family-admin-card > p { margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.family-edit { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-bottom: 4px; }
.family-edit input { margin-top: 4px; font: 600 18px Georgia, serif; }
.member-list { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.member-chip { padding: 7px 10px; border-radius: 10px; background: #e9eee9; font-size: 11px; }
.member-chip b { display: block; }
.member-create { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 8px; }
.member-create input, .inline-create input { margin-top: 4px; }
.recipe-hero { margin: -26px -26px 24px; padding: 30px; min-height: 170px; background: var(--green-dark); color: white; border-radius: 26px 26px 0 0; }
.recipe-hero h2 { margin: 10px 0; font: 500 32px/1.08 Georgia, serif; }
.recipe-hero p { color: #cfdad4; margin: 0; }
.recipe-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; }
.recipe-columns h3 { font: 600 18px Georgia, serif; }
.ingredient-list, .step-list { margin: 0; padding-left: 20px; }
.ingredient-list li, .step-list li { margin-bottom: 8px; font-size: 13px; }
.plan-cart-action, .selection-dialog-button { margin-top: 22px; }
.selection-dialog-button.selected { background: var(--green-dark); }
#close-recipe { margin-top: 9px; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 25px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: #183c2b; color: white; border-radius: 12px; padding: 11px 17px; font-size: 13px; box-shadow: var(--shadow); transition: .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 820px) {
  .app-shell { padding: 0 18px 70px; }
  .hero { min-height: 310px; padding: 34px; align-items: flex-start; flex-direction: column; }
  .hero-stats { width: 100%; }
  .meal-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .rumpfy-layout { grid-template-columns: 240px 1fr; }
  .idea-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .app-shell { padding: 0 13px 60px; }
  .topbar { height: 72px; }
  .brand small { display: none; }
  .brand-mark { width: 46px; height: 46px; }
  .account-button { max-width: 120px; }
  .hero { padding: 28px 22px; min-height: 320px; border-radius: 25px; }
  .hero::before { right: -175px; }
  .hero-stats { min-width: 0; gap: 5px; padding: 15px 8px; }
  .hero-stats strong { font-size: 21px; }
  .hero-stats span { font-size: 8px; }
  .tabs { margin: 25px 0; }
  .section-heading, .shopping-heading { align-items: stretch; flex-direction: column; }
  .section-heading .button { width: 100%; }
  .section-heading h2 { font-size: 30px; }
  .meal-grid { grid-template-columns: 1fr; }
  .meal-art { height: 104px; }
  .meal-body h3 { min-height: auto; }
  .meal-description { height: auto; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .form-grid, .recipe-columns { grid-template-columns: 1fr; }
  .inline-create, .member-create, .family-edit { grid-template-columns: 1fr; }
  .inline-create .button, .member-create .button, .family-edit .button { width: 100%; }
  .span-two { grid-column: auto; }
  dialog { padding: 20px; border-radius: 20px; }
  .recipe-hero { margin: -20px -20px 20px; border-radius: 20px 20px 0 0; }
  .dialog-actions { align-items: stretch; flex-direction: column; }
  .dialog-actions .button { width: 100%; }
  .tabs { gap: 18px; overflow-x: auto; }
  .tab { white-space: nowrap; }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-photo { height: 190px; }
  .rumpfy-layout { grid-template-columns: 1fr; }
  .rumpfy-profile { padding: 18px; }
  .rumpfy-profile img { width: 120px; float: left; margin: 0 17px 10px 0; }
  .prompt-chips { clear: both; padding-top: 4px; }
  .chat-messages { height: 430px; padding: 14px; }
  .chat-message { max-width: 92%; }
  .chat-form { grid-template-columns: 1fr; }
  .inventory-hero { padding: 23px; align-items: flex-start; }
  .inventory-hero h2 { font-size: 29px; }
  .inventory-hero-icon { font-size: 48px; }
  .inventory-layout, .idea-grid { grid-template-columns: 1fr; }
  .photo-preview { min-height: 220px; }
  .inventory-row { grid-template-columns: minmax(0, 1.8fr) .8fr auto; }
  .inventory-row .inventory-unit { display: none; }
  .login-card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}