:root {
  --terracotta: #b55338;
  --terracotta-dark: #873721;
  --terracotta-light: #f3ded6;
  --ink: #151312;
  --muted: #726d69;
  --line: #ded9d5;
  --paper: #ffffff;
  --cream: #f8f5f2;
  --shadow: 0 20px 70px rgba(28, 18, 13, .16);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100svh; background: var(--paper); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body.no-scroll { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button, a, input { touch-action: manipulation; }
a { color: inherit; }
.hidden { display: none !important; }
.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; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: max(clamp(20px, 5vw, 72px), env(safe-area-inset-right));
  padding-left: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left));
  color: white;
  background: rgba(18, 16, 15, .96);
  backdrop-filter: blur(12px);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; font-weight: 800; letter-spacing: .12em; }
.brand-mark { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; border-radius: 50%; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.icon-button, .shopping-button { min-height: 44px; border: 1px solid #4b4745; color: white; background: transparent; border-radius: 999px; transition: .2s ease; }
.icon-button { position: relative; width: 44px; font-size: 1.35rem; }
.mini-count { position: absolute; top: -5px; right: -4px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 4px; border: 2px solid var(--ink); border-radius: 99px; color: white; background: var(--terracotta); font-size: .62rem; font-weight: 850; }
.shopping-button { display: flex; align-items: center; gap: 9px; padding: 0 8px 0 16px; font-weight: 700; }
.icon-button:hover, .shopping-button:hover { border-color: var(--terracotta); background: #272321; }
.count-badge { display: grid; min-width: 27px; height: 27px; place-items: center; padding: 0 7px; border-radius: 99px; color: white; background: var(--terracotta); font-size: .78rem; }

.hero { position: relative; min-height: 540px; display: flex; align-items: center; overflow: hidden; background: #e9ded7; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.9) 37%, rgba(255,255,255,.2) 67%, rgba(255,255,255,0) 100%); }
.hero-content { position: relative; width: min(720px, calc(100% - 40px)); margin-left: clamp(20px, 8vw, 120px); padding: 74px 0; }
.eyebrow { margin: 0 0 12px; font-size: .76rem; line-height: 1.3; font-weight: 850; letter-spacing: .2em; }
.eyebrow.terracotta { color: var(--terracotta); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
h1 { max-width: 640px; margin: 0 0 28px; font-size: clamp(3rem, 6vw, 5.7rem); line-height: .93; letter-spacing: -.055em; }
h2 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); line-height: 1; letter-spacing: -.035em; }

.search-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; max-width: 670px; padding: 7px; background: white; border: 1px solid rgba(21,19,18,.12); border-radius: 18px; box-shadow: 0 14px 45px rgba(59,38,27,.18); }
.search-icon { padding-left: 14px; color: var(--terracotta); font-size: 1.8rem; line-height: 1; transform: rotate(-20deg); }
.search-form input { min-width: 0; height: 54px; padding: 0 14px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1.02rem; }
.search-form input::placeholder { color: #89817c; }
.search-form:focus-within { outline: 3px solid rgba(181,83,56,.2); border-color: var(--terracotta); }
.search-form button, .primary-button { min-height: 48px; padding: 0 22px; border: 0; color: white; background: var(--terracotta); border-radius: 12px; font-weight: 800; transition: .2s ease; }
.search-form button:hover, .primary-button:hover { background: var(--terracotta-dark); transform: translateY(-1px); }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.suggestions button, .suggestions a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid rgba(21,19,18,.19); color: var(--ink); background: rgba(255,255,255,.8); border-radius: 999px; font-size: .84rem; font-weight: 650; text-decoration: none; }
.suggestions button:hover, .suggestions a:hover { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.catalogue-total { margin: 15px 0 0; color: #4e4845; font-size: .88rem; font-weight: 750; }
.install-app-button { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; margin-top: 18px; padding: 0 18px; border: 0; border-radius: 13px; color: white; background: var(--ink); box-shadow: 0 10px 26px rgba(21,19,18,.2); font-weight: 850; }
.install-app-button span { display: grid; width: 27px; height: 27px; place-items: center; border: 2px solid currentColor; border-radius: 8px; font-size: 1.1rem; line-height: 1; }
.install-app-button:hover, .install-app-button:focus-visible { background: var(--terracotta); transform: translateY(-1px); }
.install-app-button[hidden] { display: none; }

.kitchen-tools { padding: 76px max(20px, calc((100% - 1240px) / 2)); background: var(--ink); color: white; }
.tools-heading { align-items: end; }
.tools-heading h2 { color: white; }
.tools-heading > p { max-width: 480px; margin: 0; color: #c9c4c1; line-height: 1.55; }
.tool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.tool-card { position: relative; display: flex; min-height: 520px; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid #47413e; border-radius: 22px; color: var(--ink); background: white; }
.tool-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--terracotta); }
.tool-number { color: var(--terracotta); font-size: .76rem; font-weight: 900; letter-spacing: .14em; }
.tool-card h3 { margin: 18px 0 10px; font-size: 1.8rem; line-height: 1.05; }
.tool-card > p { margin: 0 0 20px; color: var(--muted); line-height: 1.5; }
.preference-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.preference-list label { display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); font-size: .88rem; font-weight: 750; }
.preference-list input { width: 21px; height: 21px; accent-color: var(--terracotta); }
.tool-field { display: grid; gap: 7px; margin-bottom: 14px; color: var(--muted); font-size: .82rem; font-weight: 800; }
.tool-field select, .tool-field input, .tool-field textarea { width: 100%; min-height: 48px; padding: 11px 12px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font: inherit; }
.tool-field textarea { min-height: 124px; line-height: 1.45; }
.tool-field select:focus, .tool-field input:focus, .tool-field textarea:focus { outline: 3px solid rgba(181,83,56,.18); border-color: var(--terracotta); }
.tool-fields-row { display: grid; grid-template-columns: 1fr .7fr; gap: 10px; }
.tool-action { width: 100%; margin-top: auto; }
.tool-status { min-height: 38px; margin: 12px 0 0 !important; color: var(--terracotta-dark) !important; font-size: .8rem; font-weight: 750; }
.generated-menu { margin-top: 18px; }
.menu-result-list { display: grid; gap: 7px; }
.menu-result-list button { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--cream); text-align: left; }
.menu-result-list button:hover { border-color: var(--terracotta); }
.menu-result-list span { grid-column: 1/-1; color: var(--terracotta); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.menu-result-list strong { font-size: .85rem; }
.menu-result-list small { color: var(--muted); }
.menu-result-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: 12px; }
.menu-result-actions button { padding: 8px 10px; font-size: .78rem; }

.results-section { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 76px 0 64px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.result-count { margin: 0 0 4px; color: var(--muted); }
.filter-row { display: flex; gap: 8px; padding-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { flex: none; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); color: var(--ink); background: white; border-radius: 999px; font-weight: 700; }
.filter-chip:hover, .filter-chip.active { color: white; border-color: var(--ink); background: var(--ink); }
.advanced-filters { margin: -8px 0 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.advanced-filters summary { padding: 16px 18px; cursor: pointer; color: var(--terracotta-dark); font-weight: 850; }
.advanced-filters[open] summary { border-bottom: 1px solid var(--line); }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; padding: 18px 18px 10px; }
.advanced-filter-grid label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; font-weight: 750; }
.advanced-filter-grid select, .detail-actions select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font: inherit; }
.advanced-checks { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 10px 18px; }
.advanced-checks label { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: .9rem; font-weight: 700; }
.advanced-checks input { width: 20px; height: 20px; accent-color: var(--terracotta); }
.advanced-filter-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 18px 18px; }
.season-browser { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: -5px 0 28px; }
.season-browser > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; min-height: 84px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.season-browser span { grid-row: 1 / 3; font-size: 1.55rem; }
.season-browser button { align-self: end; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; font-family: Georgia, serif; font-size: 1.08rem; font-weight: 700; }
.season-browser button::after { content: " →"; color: var(--terracotta); }
.season-browser small { align-self: start; color: var(--muted); font-size: .7rem; }
.season-browser > div:hover { border-color: var(--terracotta); background: #fff9f6; }
.cuisine-browser { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin: -5px 0 28px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.cuisine-browser > span { padding-top: 8px; color: var(--terracotta-dark); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cuisine-browser > div { display: flex; flex-wrap: wrap; gap: 7px; }
.cuisine-browser button { min-height: 38px; padding: 7px 11px; border: 1px solid #ddd5d0; border-radius: 9px; color: var(--ink); background: white; font-size: .82rem; font-weight: 700; }
.cuisine-browser button:hover { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.cuisine-browser.regional { margin-top: -18px; background: white; }
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.recipe-card { position: relative; min-height: 480px; display: flex; flex-direction: column; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.favorite-card { position: absolute; z-index: 4; top: 14px; right: 14px; display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 1px solid rgba(0,0,0,.15); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 5px 18px rgba(0,0,0,.14); font-size: 1.55rem; }
.favorite-card.active { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.recipe-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--accent, var(--terracotta)); }
.recipe-card:hover { transform: translateY(-5px); border-color: rgba(181,83,56,.4); box-shadow: 0 18px 50px rgba(36,25,20,.11); }
.recipe-card:focus-within { outline: 3px solid rgba(181,83,56,.22); }
.card-media { height: 190px; margin: -25px -25px 22px; overflow: hidden; background: var(--cream); }
.card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.recipe-card:hover .card-media img { transform: scale(1.035); }
.card-top { display: flex; justify-content: space-between; gap: 16px; }
.category-tag { color: var(--terracotta); font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.source-tag { padding: 4px 8px; border-radius: 6px; color: #5c5652; background: var(--cream); font-size: .7rem; font-weight: 750; }
.recipe-card h3 { margin: 28px 0 12px; font-size: 1.85rem; line-height: 1.04; letter-spacing: -.025em; }
.recipe-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.card-tags span { padding: 5px 8px; color: #615a56; background: var(--cream); border-radius: 7px; font-size: .73rem; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.recipe-meta { color: var(--ink); font-size: .84rem; font-weight: 750; }
.view-button { min-height: 44px; padding: 9px 13px; border: 0; color: white; background: var(--terracotta); border-radius: 10px; font-size: .84rem; font-weight: 800; }
.remote-card { background: #fcfaf8; }
.remote-card .view-button { color: var(--ink); background: white; border: 1px solid var(--line); }
.status-card { margin: 8px 0 22px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); background: var(--cream); }
.online-block { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding: 20px 22px; border-left: 4px solid var(--terracotta); background: var(--cream); }
.online-block div { display: flex; flex-direction: column; gap: 5px; }
.online-block span { color: var(--muted); }
.online-status { align-self: center; white-space: nowrap; font-size: .83rem; font-weight: 750; }
.load-more { display: block; min-height: 48px; margin: 30px auto 0; padding: 0 22px; border: 1px solid var(--ink); border-radius: 12px; color: var(--ink); background: white; font-weight: 800; }
.load-more:hover { color: white; background: var(--ink); }

.sauce-section, .bbq-guide-section { scroll-margin-top: 88px; padding: 76px max(20px, calc((100% - 1240px) / 2)); }
.sauce-section { background: var(--cream); }
.guide-heading > p { max-width: 450px; margin: 0; color: var(--muted); line-height: 1.55; }
.sauce-filters { display: flex; gap: 8px; margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.sauce-filters::-webkit-scrollbar { display: none; }
.sauce-filters button { min-height: 44px; flex: none; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: white; font-weight: 750; }
.sauce-filters button:hover, .sauce-filters button.active { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.sauce-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sauce-card { display: flex; flex-direction: column; min-height: 285px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.sauce-card h3 { margin: 9px 0 10px; font-size: 1.55rem; }
.sauce-card > p { margin: 0; color: var(--muted); line-height: 1.5; }
.sauce-time { color: var(--terracotta); font-size: .73rem; font-weight: 850; letter-spacing: .12em; }
.sauce-ingredients { margin-top: 15px !important; color: var(--ink) !important; font-size: .84rem; }
.sauce-pairings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.sauce-pairings span { padding: 5px 8px; border-radius: 7px; color: #655a55; background: var(--terracotta-light); font-size: .72rem; font-weight: 750; }

.bbq-guide-section { background: white; }
.lighting-guide { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 14px; align-items: start; margin-bottom: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); }
.lighting-number { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--terracotta); font-weight: 900; }
.lighting-guide strong, .lighting-guide span { display: block; }
.lighting-guide span { margin-top: 5px; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.bbq-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bbq-method-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--cream); }
.bbq-method-card > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bbq-method-content { padding: 26px; }
.method-label { color: var(--terracotta); font-size: .75rem; font-weight: 850; letter-spacing: .1em; }
.bbq-method-content h3 { margin: 9px 0 12px; font-size: 2rem; }
.bbq-method-content p, .bbq-method-content li { color: var(--muted); line-height: 1.55; }
.bbq-method-content ul { margin: 18px 0; padding-left: 20px; }
.method-tip { display: block; padding: 14px; border-left: 4px solid var(--terracotta); background: white; font-size: .86rem; line-height: 1.5; }
.advanced-bbq-heading { margin: 42px 0 18px; }
.advanced-bbq-heading h3 { margin: 7px 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.advanced-bbq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.advanced-bbq-grid article { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.advanced-bbq-grid span { color: var(--terracotta); font-size: .72rem; font-weight: 850; letter-spacing: .09em; }
.advanced-bbq-grid h4 { margin: 8px 0; font-size: 1.1rem; }
.advanced-bbq-grid p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.bbq-safety { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-top: 22px; padding: 20px 22px; border-radius: 14px; color: white; background: var(--ink); line-height: 1.55; }
.bbq-safety strong { color: #f1aa94; text-transform: uppercase; letter-spacing: .08em; }

footer { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 30px clamp(20px, 5vw, 72px); color: #c9c4c1; background: var(--ink); font-size: .78rem; line-height: 1.5; }
footer > :first-child { color: white; font-weight: 900; letter-spacing: .12em; }
footer > :last-child { text-align: right; }

.modal-backdrop, .drawer-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(14,12,11,.66); backdrop-filter: blur(5px); }
.modal-backdrop { display: grid; place-items: center; padding: 20px; }
.recipe-modal { position: relative; width: min(1000px, 100%); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; border-radius: 25px; background: white; box-shadow: var(--shadow); }
.modal-close { position: absolute; z-index: 12; top: 10px; right: 10px; width: 56px; height: 56px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); background: #fff; box-shadow: 0 7px 24px rgba(0,0,0,.18); font-size: 2rem; font-weight: 700; line-height: 1; touch-action: manipulation; }
.modal-close:hover, .modal-close:focus-visible { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.modal-close.static { position: static; flex: none; }
.install-dialog { position: relative; width: min(560px,100%); max-height: calc(100dvh - 40px); padding: 42px; overflow: auto; border-radius: 25px; background: white; box-shadow: var(--shadow); }
.install-dialog-icon { display: grid; width: 66px; height: 66px; place-items: center; margin-bottom: 22px; border-radius: 18px; color: white; background: var(--terracotta); font-size: 2.2rem; font-weight: 900; }
.install-dialog h2 { max-width: 430px; padding-right: 58px; }
.install-dialog > p:not(.eyebrow) { margin: 18px 0 22px; color: var(--muted); line-height: 1.55; }
.install-steps { display: grid; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: install-step; }
.install-steps li { position: relative; min-height: 48px; padding: 13px 14px 13px 58px; border: 1px solid var(--line); border-radius: 13px; background: var(--cream); line-height: 1.4; counter-increment: install-step; }
.install-steps li::before { content: counter(install-step); position: absolute; top: 10px; left: 12px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: white; background: var(--terracotta); font-size: .85rem; font-weight: 900; }
.install-dialog-action { width: 100%; }
.detail-head { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 260px; }
.detail-intro { padding: 48px; }
.detail-intro h2 { max-width: 620px; margin: 8px 0 16px; font-size: clamp(2.4rem, 5vw, 4.8rem); }
.detail-intro p { max-width: 620px; color: var(--muted); line-height: 1.6; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.detail-actions .secondary-button.active { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.detail-actions label { min-width: 125px; flex: 1 1 125px; }
.detail-accent { position: relative; display: grid; place-items: end start; min-height: 300px; padding: 32px; overflow: hidden; color: white; background: var(--terracotta); }
.detail-accent::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, rgba(15,10,8,.76), transparent); }
.detail-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-time { position: relative; z-index: 1; }
.detail-accent strong { display: block; font-family: Georgia, serif; font-size: 3rem; }
.detail-accent span { font-size: .82rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.photo-credit { position: absolute; z-index: 3; right: 10px; bottom: 8px; padding: 4px 7px; border-radius: 5px; color: #fff; background: rgba(0,0,0,.62); font-size: .7rem; line-height: 1.2; text-decoration: none; }
.photo-credit:hover { text-decoration: underline; }
.detail-body { display: grid; grid-template-columns: .9fr 1.1fr; border-top: 1px solid var(--line); }
.ingredients-panel { padding: 38px 48px 48px; background: var(--cream); }
.steps-panel { padding: 38px 48px 48px; }
.panel-title { margin: 0 0 22px; font-family: Georgia, serif; font-size: 1.65rem; }
.servings-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; padding: 11px 12px 11px 15px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 1.2rem; }
.stepper strong { min-width: 42px; text-align: center; }
.ingredient-list { display: grid; gap: 0; margin: 0 0 24px; padding: 0; list-style: none; }
.ingredient-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #ded8d4; line-height: 1.35; }
.ingredient-list li > span { min-width: 0; }
.ingredient-list small { display: block; margin-top: 4px; color: var(--terracotta-dark); font-size: .76rem; font-weight: 700; }
.ingredient-list strong { white-space: nowrap; }
.dietary-adapter { margin: 0 0 22px; padding: 16px; border: 1px solid #d7b2a6; border-radius: 14px; background: #fff8f5; }
.dietary-adapter > strong { display: block; margin-bottom: 10px; font-family: Georgia, serif; font-size: 1.1rem; }
.dietary-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dietary-buttons button { min-height: 46px; padding: 0 14px; border: 1px solid var(--terracotta); border-radius: 999px; color: var(--terracotta-dark); background: white; font-size: .9rem; font-weight: 800; touch-action: manipulation; }
.dietary-buttons button::before { content: "○"; margin-right: 7px; }
.dietary-buttons button.active { color: white; background: var(--terracotta); }
.dietary-buttons button.active::before { content: "✓"; }
.dietary-adapter p { margin: 11px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.add-list-button { width: 100%; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.steps li { position: relative; min-height: 48px; padding: 0 0 24px 52px; color: #403c39; line-height: 1.6; counter-increment: steps; }
.steps li::before { content: counter(steps); position: absolute; left: 0; top: 0; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--terracotta); border-radius: 50%; color: var(--terracotta); font-weight: 850; }
.wine-card { margin-top: 16px; padding: 22px; border: 1px solid #d7b2a6; border-radius: 16px; background: #fff8f5; }
.wine-card .wine-label { color: var(--terracotta); font-size: .74rem; font-weight: 850; letter-spacing: .12em; }
.wine-card h3 { margin: 7px 0 8px; font-size: 1.45rem; }
.wine-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.pairing-card { margin-top: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.pairing-card > span { color: var(--terracotta); font-size: .74rem; font-weight: 850; letter-spacing: .12em; }
.pairing-card h3 { margin: 7px 0 12px; font-size: 1.45rem; }
.pairing-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pairing-links button { min-height: 42px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--cream); font-size: .82rem; font-weight: 700; text-align: left; }
.pairing-links button:hover { color: white; border-color: var(--terracotta); background: var(--terracotta); }
.source-link { display: inline-block; margin-top: 18px; color: var(--terracotta-dark); font-weight: 700; }

.cooking-backdrop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 18px; color: white; background: rgba(10,9,8,.94); backdrop-filter: blur(10px); }
.cooking-mode { width: min(920px,100%); max-height: calc(100dvh - 36px); display: flex; flex-direction: column; overflow: auto; border: 1px solid #514844; border-radius: 26px; background: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.cooking-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 26px 28px 18px; }
.cooking-header h2 { color: white; font-size: clamp(1.8rem,5vw,3.5rem); }
.dark-close { color: white; border-color: #655b56; background: #282320; }
.cooking-progress { padding: 0 28px; color: #d7d0cc; font-size: .82rem; font-weight: 750; }
.cooking-progress > div { height: 7px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: #403936; }
.cooking-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--terracotta); transition: width .3s ease; }
.cooking-step { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; min-height: 270px; padding: clamp(34px,7vw,70px) 28px; }
.cooking-step > span { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--terracotta); border-radius: 50%; color: #f2a98f; font-weight: 900; }
.cooking-step p { margin: 0; color: white; font-family: Georgia,"Times New Roman",serif; font-size: clamp(1.65rem,4vw,3rem); line-height: 1.25; }
.cooking-timer { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: center; margin: 0 28px; padding: 20px; border: 1px solid #514844; border-radius: 16px; background: #211d1b; }
.cooking-timer > div:first-child span, .cooking-timer > div:first-child strong { display: block; }
.cooking-timer > div:first-child span { color: #bfb6b1; font-size: .74rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.cooking-timer > div:first-child strong { min-width: 130px; color: white; font-family: Georgia,serif; font-size: 2.2rem; }
.cooking-timer > div:first-child strong.finished { color: #f2a98f; font-size: 1.4rem; }
.timer-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.timer-presets button { min-height: 42px; padding: 8px 13px; border: 1px solid #655b56; border-radius: 999px; color: white; background: transparent; font-weight: 750; }
.timer-presets button:hover { border-color: var(--terracotta); background: var(--terracotta); }
.timer-actions { grid-column: 1/-1; display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; }
.timer-actions input { min-width: 0; min-height: 48px; padding: 0 10px; border: 1px solid #655b56; border-radius: 10px; color: white; background: #151312; font: inherit; }
.timer-actions .secondary-button { color: white; border-color: #655b56; background: transparent; }
.cooking-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 22px 28px 28px; }
.cooking-navigation .secondary-button { color: white; border-color: #655b56; background: transparent; }
.cooking-navigation button:disabled { opacity: .38; cursor: not-allowed; }

.drawer-backdrop { z-index: 60; }
.shopping-drawer { position: fixed; z-index: 70; top: 0; right: 0; width: min(480px, 100%); height: 100dvh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); background: white; box-shadow: -20px 0 60px rgba(0,0,0,.22); transform: translateX(105%); transition: transform .28s ease; }
.shopping-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 30px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { font-size: 2.4rem; }
.shopping-list { flex: 1; overflow: auto; padding: 24px 30px; }
.shopping-empty { display: grid; min-height: 50vh; place-items: center; color: var(--muted); text-align: center; }
.aisle { margin-bottom: 26px; }
.aisle h3 { margin: 0 0 10px; color: var(--terracotta); font-family: inherit; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.shopping-item { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eeeae7; }
.shopping-item input { width: 19px; height: 19px; accent-color: var(--terracotta); }
.shopping-item.done span { color: #9a9390; text-decoration: line-through; }
.remove-item { width: 28px; height: 28px; border: 0; color: #807873; background: transparent; font-size: 1.1rem; }
.drawer-footer { display: grid; grid-template-columns: auto auto auto 1fr; gap: 9px; padding: 18px 24px; border-top: 1px solid var(--line); background: white; }
.planner-drawer { z-index: 75; }
.planner-day { margin-bottom: 24px; }
.planner-day > h3 { margin: 0 0 9px; color: var(--terracotta); font-family: inherit; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.planner-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.planner-item > button:first-child { padding: 6px 0; border: 0; color: var(--ink); background: transparent; font-weight: 800; text-align: left; }
.planner-item small { display: block; margin-top: 3px; color: var(--muted); font-weight: 600; }
.planner-item > button:last-child { width: 40px; border: 0; color: var(--muted); background: transparent; font-size: 1.3rem; }
.planner-footer { grid-template-columns: auto 1fr; }
.secondary-button { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); color: var(--ink); background: white; border-radius: 12px; font-weight: 750; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); padding: 13px 18px; color: white; background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.back-to-top { position: fixed; z-index: 45; right: max(20px, env(safe-area-inset-right)); bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); display: grid; width: 54px; height: 54px; place-items: center; padding: 0; border: 2px solid white; border-radius: 50%; color: white; background: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.28); font-size: 1.6rem; font-weight: 900; line-height: 1; touch-action: manipulation; }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--terracotta); }
.back-to-top.hidden { display: none; }

@media (max-width: 900px) {
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .menu-tool { grid-column: 1/-1; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sauce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lighting-guide { grid-template-columns: auto 1fr; }
  .detail-head, .detail-body { grid-template-columns: 1fr; }
  .detail-accent { min-height: 150px; }
  footer { grid-template-columns: 1fr; }
  footer > :last-child { text-align: left; }
  .season-browser { grid-template-columns: repeat(2, 1fr); }
  .advanced-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .topbar { height: calc(66px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-right: max(15px, env(safe-area-inset-right)); padding-left: max(15px, env(safe-area-inset-left)); }
  .brand { gap: 8px; max-width: 225px; font-size: .72rem; line-height: 1.15; }
  .brand > span { display: none; }
  .brand-mark { width: 42px; height: 42px; }
  .shopping-button > :first-child { display: none; }
  .top-actions { gap: 6px; }
  .top-actions .icon-button { width: 42px; }
  .shopping-button { padding: 6px; }
  .hero { min-height: 575px; align-items: end; }
  .hero-image { object-position: 62% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 48%, rgba(255,255,255,.2) 100%); }
  .hero-content { width: calc(100% - 30px); margin: 0 15px; padding: 54px 0 30px; }
  h1 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
  .search-form { grid-template-columns: auto 1fr; border-radius: 16px; }
  .search-form button { grid-column: 1 / -1; width: 100%; }
  .search-form input { padding-right: 6px; }
  .results-section { width: calc(100% - 30px); padding: 54px 0; }
  .kitchen-tools { padding: 54px 15px; }
  .tool-grid { grid-template-columns: 1fr; }
  .menu-tool { grid-column: auto; }
  .tool-card { min-height: auto; padding: 23px; }
  .tool-action { margin-top: 10px; }
  .preference-list { grid-template-columns: 1fr; }
  .cooking-backdrop { padding: 8px; }
  .cooking-mode { max-height: calc(100dvh - 16px); border-radius: 20px; }
  .cooking-header { padding: max(18px,env(safe-area-inset-top)) 18px 14px; }
  .cooking-progress { padding: 0 18px; }
  .cooking-step { grid-template-columns: 1fr; gap: 18px; min-height: 300px; padding: 34px 18px; }
  .cooking-step p { font-size: clamp(1.55rem,7vw,2.25rem); }
  .cooking-timer { grid-template-columns: 1fr; margin: 0 18px; padding: 16px; }
  .timer-actions { grid-template-columns: 72px 1fr; }
  .timer-actions .primary-button { grid-column: 1/-1; }
  .cooking-navigation { grid-template-columns: 1fr; padding: 18px; }
  .cooking-navigation .primary-button { grid-row: 1; }
  .section-heading { align-items: start; flex-direction: column; }
  .season-browser { display: flex; margin-right: -15px; padding-right: 15px; overflow-x: auto; scrollbar-width: none; }
  .season-browser::-webkit-scrollbar { display: none; }
  .season-browser > div { flex: 0 0 180px; }
  .cuisine-browser { grid-template-columns: 1fr; gap: 8px; }
  .cuisine-browser > div { flex-wrap: nowrap; margin-right: -19px; padding-right: 19px; overflow-x: auto; scrollbar-width: none; }
  .cuisine-browser > div::-webkit-scrollbar { display: none; }
  .cuisine-browser button { min-height: 44px; flex: none; }
  .recipe-grid { grid-template-columns: 1fr; }
  .advanced-filter-grid { grid-template-columns: 1fr; }
  .advanced-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sauce-section, .bbq-guide-section { padding: 54px 15px; }
  .sauce-grid, .bbq-method-grid { grid-template-columns: 1fr; }
  .advanced-bbq-grid { grid-template-columns: 1fr; }
  .sauce-card { min-height: 250px; }
  .bbq-safety { grid-template-columns: 1fr; }
  .recipe-card { min-height: 460px; }
  .online-block { flex-direction: column; }
  .online-status { align-self: flex-start; }
  .recipe-modal { max-height: calc(100dvh - 16px); border-radius: 20px; }
  .modal-close { position: sticky; float: right; top: max(8px, env(safe-area-inset-top)); margin: 8px 8px -64px 0; }
  .modal-close.static { position: static; float: none; margin: 0; }
  .modal-backdrop { padding: 8px; }
  .install-dialog { max-height: calc(100dvh - 16px); padding: 30px 22px 24px; border-radius: 20px; }
  .install-dialog h2 { padding-right: 46px; font-size: 2rem; }
  .detail-intro, .ingredients-panel, .steps-panel { padding: 34px 24px; }
  .detail-intro h2 { padding-right: 58px; }
  .dietary-buttons button { flex: 1 1 135px; }
  .back-to-top { right: max(14px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)); }
  .drawer-header, .shopping-list { padding-left: 20px; padding-right: 20px; }
  .drawer-footer { grid-template-columns: 1fr 1fr; }
  .drawer-footer .primary-button { grid-column: 1 / -1; }
}

@media (display-mode: standalone) {
  footer { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
  .install-app-button { display: none; }
}

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