:root {
  --page: #f7f5ed;
  --surface: #fffef9;
  --surface-2: #e8ecdf;
  --ink: #203022;
  --muted: #667066;
  --brand: #79bd3f;
  --brand-strong: #355834;
  --accent: #f1b928;
  --line: #d6dccf;
  --white: #fff;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 18px 55px rgba(38, 54, 38, .12);
  --display: Georgia, "Times New Roman", serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --condensed: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
}

html[data-theme="terracotta"] { --page:#f7eee7;--surface:#fffaf5;--surface-2:#f0d5c4;--ink:#3f241c;--muted:#785f53;--brand:#c85435;--brand-strong:#7a2f25;--accent:#e7a83e;--line:#e3c7b7;--radius:8px;--shadow:0 20px 55px rgba(92,44,29,.13); }
html[data-theme="mediterranean"] { --page:#edf5f3;--surface:#fffefa;--surface-2:#cfe3df;--ink:#153742;--muted:#587079;--brand:#e59b34;--brand-strong:#0b6072;--accent:#e7c85f;--line:#c2d8d6;--radius:22px;--display:"Trebuchet MS",Georgia,serif; }
html[data-theme="lemon"] { --page:#fff9d9;--surface:#fffdf1;--surface-2:#f5e478;--ink:#172b4d;--muted:#60708c;--brand:#f2c900;--brand-strong:#173664;--accent:#ef6a47;--line:#e8d95d;--radius:3px;--shadow:10px 10px 0 rgba(23,54,100,.12); }
html[data-theme="berry"] { --page:#fbf0f2;--surface:#fffafb;--surface-2:#eed6dd;--ink:#3f1e2c;--muted:#806270;--brand:#b64266;--brand-strong:#66213e;--accent:#dda650;--line:#e5cad3;--radius:28px;--display:Georgia,"Times New Roman",serif; }
html[data-theme="night"] { --page:#111712;--surface:#18221a;--surface-2:#253428;--ink:#f1f5e9;--muted:#aebbad;--brand:#a9d454;--brand-strong:#d7eea4;--accent:#f0b54a;--line:#344538;--white:#111712;--shadow:0 22px 65px rgba(0,0,0,.35);--radius:14px; }
html[data-theme="night"] { color-scheme:dark; }
html[data-theme="coastal"] { --page:#eef4ef;--surface:#fbfdf9;--surface-2:#dbe8df;--ink:#263f3e;--muted:#637b78;--brand:#7b9f92;--brand-strong:#315c5b;--accent:#d9a56d;--line:#ccdcd3;--radius:16px;--display:"Palatino Linotype",Palatino,serif; }
html[data-theme="picnic"] { --page:#fff9ef;--surface:#fffdf8;--surface-2:#f6ddd5;--ink:#302322;--muted:#756260;--brand:#dc3b34;--brand-strong:#85221f;--accent:#2d7855;--line:#e6c9bf;--radius:12px;--shadow:0 18px 0 rgba(220,59,52,.08); }
html[data-theme="lavender"] { --page:#f5f0fb;--surface:#fffaff;--surface-2:#e4d8f1;--ink:#332743;--muted:#746684;--brand:#8867a8;--brand-strong:#4e3869;--accent:#e6a567;--line:#dcd0e8;--radius:24px;--display:"Palatino Linotype",Palatino,serif; }
html[data-theme="editorial"] { --page:#f2f2ef;--surface:#fff;--surface-2:#deded8;--ink:#151515;--muted:#666;--brand:#171717;--brand-strong:#000;--accent:#b8ff32;--line:#cfcfca;--radius:0;--shadow:0 1px 0 rgba(0,0,0,.18);--display:Arial,Helvetica,sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0;background:var(--page);color:var(--ink);font-family:var(--body);line-height:1.55;transition:background .25s,color .25s; }
body.no-scroll { overflow:hidden; }
img { display:block;max-width:100%; }
a { color:inherit;text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 65%,white);outline-offset:3px; }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }
.container { width:min(1180px,calc(100% - 40px));margin-inline:auto; }
.skip-link { position:fixed;z-index:200;left:12px;top:-60px;background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:8px; }
.skip-link:focus { top:12px; }

.site-header { position:sticky;top:0;z-index:50;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:color-mix(in srgb,var(--page) 90%,transparent);backdrop-filter:blur(18px); }
.topbar { height:78px;display:flex;align-items:center;gap:24px; }
.brand { display:flex;align-items:center;gap:11px;margin-right:auto;min-width:max-content; }
.brand-mark { display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;overflow:hidden;border-radius:50%; }
.brand-logo { display:block;width:100%;height:100%;object-fit:contain; }
.brand-logo-dark { display:none; }
html[data-theme="night"] .brand-logo-light { display:none; }
html[data-theme="night"] .brand-logo-dark { display:block; }
.brand-copy { display:grid;line-height:1; }
.brand-copy strong { font-family:var(--display);font-size:18px;letter-spacing:-.02em; }
.brand-short { display:none; }
.brand-copy span { margin-top:5px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; }
.main-nav { display:flex;align-items:center;gap:25px;font-size:14px;font-weight:700; }
.main-nav a { position:relative; }
.main-nav a::after { content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--brand);transition:right .2s; }
.main-nav a:hover::after,.main-nav a.active::after { right:0; }
.header-actions { display:flex;align-items:center;gap:8px; }
.icon-link,.theme-trigger,.menu-toggle { min-height:42px;border:1px solid var(--line);border-radius:999px;background:var(--surface);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;cursor:pointer;font-weight:800;font-size:13px;transition:background .2s ease,border-color .2s ease,color .2s ease; }
.icon-link { width:42px;padding:0;position:relative; }
.icon-link:hover,.theme-trigger:hover,.menu-toggle:hover { background:var(--brand);border-color:var(--brand);color:var(--brand-strong); }
html[data-theme="night"] .icon-link:hover,
html[data-theme="night"] .theme-trigger:hover,
html[data-theme="night"] .menu-toggle:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }
.login-icon .user-icon { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
.fav-count { position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:var(--accent);color:#161616;font-size:10px; }
.theme-icon { width:16px;display:inline-grid;place-items:center;font-size:18px;line-height:1; }
.menu-toggle { display:none;width:42px;padding:0;font-size:20px; }

.hero { padding:42px 0 72px; }
.hero-panel { position:relative;min-height:590px;overflow:hidden;border-radius:calc(var(--radius) + 10px);background:var(--brand-strong);box-shadow:var(--shadow); }
.hero-panel::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,25,15,.87) 0%,rgba(10,25,15,.56) 46%,rgba(10,25,15,.03) 76%);pointer-events:none; }
.hero-media { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.hero-content { position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-height:590px;width:min(650px,70%);padding:clamp(34px,7vw,86px);color:white; }
.eyebrow { display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase; }
.eyebrow::before { content:"";width:28px;height:3px;background:var(--accent); }
h1,h2,h3 { font-family:var(--display);line-height:.98;letter-spacing:-.045em;margin:0; }
h1 { font-size:clamp(48px,7.4vw,92px);max-width:690px; }
.hero-copy { max-width:570px;margin:22px 0 28px;color:rgba(255,255,255,.83);font-size:17px; }
.hero-search { display:flex;gap:0;max-width:570px;padding:7px;border-radius:999px;background:white;box-shadow:0 14px 36px rgba(0,0,0,.16); }
.hero-search input { min-width:0;flex:1;border:0;background:transparent;padding:0 18px;color:#242424;outline:0; }
.hero-search button,.button { border:0;border-radius:999px;background:var(--brand);color:color-mix(in srgb,var(--brand-strong) 75%,#111);padding:13px 21px;font-weight:900;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
html[data-theme="night"] .hero-search button,
html[data-theme="night"] .recipe-actions .button:not(.secondary) { color:var(--page); }
.button.secondary { border:1px solid var(--line);background:var(--surface);color:var(--ink); }
.button.dark { background:var(--brand-strong);color:var(--page); }
.hero-search button:hover { background:var(--brand-strong);color:var(--page);transform:translateY(-1px); }
.button.dark:hover { background:var(--brand);color:var(--brand-strong);transform:translateY(-1px); }
html[data-theme="night"] .hero-search button:hover { background:var(--brand-strong);color:var(--page); }
html[data-theme="night"] .button.dark:hover { background:var(--brand);color:var(--page); }
.button.small { padding:9px 15px;font-size:13px; }

.section { padding:76px 0; }
.section.soft { background:var(--surface-2); }
.section-head { display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px; }
.section-title .eyebrow { color:var(--brand-strong); }
.section-title h2 { font-size:clamp(36px,5vw,60px); }
.section-title p { max-width:630px;margin:14px 0 0;color:var(--muted); }
.text-link { font-weight:900;border-bottom:2px solid var(--brand);padding-bottom:4px;white-space:nowrap; }
button.text-link { width:fit-content;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--brand-strong);font:inherit;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 4px 14px color-mix(in srgb,var(--brand-strong) 8%,transparent);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
button.text-link:hover { background:var(--brand);border-color:var(--brand);color:color-mix(in srgb,var(--brand-strong) 75%,#111); }
html[data-theme="night"] button.text-link:hover { color:var(--page); }

.category-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:14px; }
.category-card { display:grid;gap:13px;text-align:center;font-weight:850;font-size:14px; }
.category-image { aspect-ratio:1;overflow:hidden;border-radius:50%;border:5px solid var(--surface);box-shadow:0 0 0 1px var(--line);background:var(--surface-2); }
.category-image img { width:100%;height:100%;object-fit:cover;transition:transform .35s; }
.category-card:hover img { transform:scale(1.08); }

.recipe-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:25px; }
.recipe-card { position:relative;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s; }
.recipe-card:hover { transform:translateY(-4px); }
.card-media { display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2); }
.card-media img { width:100%;height:100%;object-fit:cover;transition:transform .45s; }
.recipe-card:hover .card-media img { transform:scale(1.05); }
.card-badge { position:absolute;left:14px;top:14px;padding:7px 11px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em; }
.favourite-button { position:absolute;right:14px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:var(--surface);display:grid;place-items:center;cursor:pointer;font-size:19px;box-shadow:0 8px 25px rgba(0,0,0,.13);transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease; }
.favourite-button[aria-pressed="true"] { background:var(--brand);color:var(--brand-strong); }
.favourite-button:hover { background:var(--brand);color:var(--brand-strong);transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.16); }
html[data-theme="night"] .favourite-button:hover { background:var(--brand-strong);color:var(--page); }
.favourite-button[aria-pressed="true"]:hover { background:var(--brand-strong);color:var(--page); }
.card-body { display:block;padding:24px 26px 22px; }
.card-kicker { color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.1em; }
.card-title { margin:7px 0 16px;font-family:var(--display);font-size:27px;line-height:1.06;letter-spacing:-.035em; }
.card-meta { display:flex;gap:17px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700; }

.story-grid { display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,7vw,90px);align-items:center; }
.story-image { position:relative;padding:22px 22px 0 0; }
.story-image::before { content:"";position:absolute;inset:0 0 22px 22px;background:var(--brand);border-radius:var(--radius); }
.story-image img { position:relative;width:100%;aspect-ratio:4/4.3;object-fit:cover;border-radius:var(--radius); }
.story-copy h2 { font-size:clamp(42px,6vw,72px); }
.story-copy p { color:var(--muted);font-size:17px; }
.stat-row { display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:26px 0; }
.stat { padding:16px;border-top:3px solid var(--brand);background:var(--surface); }
.stat strong { display:block;font-family:var(--display);font-size:28px; }
.stat span { color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase; }
.tag-cloud { display:flex;flex-wrap:wrap;gap:10px; }
.tag { padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:13px;font-weight:750;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease; }
.tag:hover { background:var(--brand);border-color:var(--brand);color:var(--brand-strong);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb,var(--brand-strong) 16%,transparent); }
html[data-theme="night"] .tag:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }

.page-hero { padding:64px 0 38px;border-bottom:1px solid var(--line); }
.page-hero .eyebrow { color:var(--brand-strong); }
.page-hero h1 { color:var(--ink);font-size:clamp(48px,7vw,78px); }
.page-hero p { max-width:680px;color:var(--muted);font-size:17px; }
.catalog { padding:34px 0 80px; }
.filters-sticky { position:sticky;top:78px;z-index:20;padding:18px 0 1px;background:color-mix(in srgb,var(--page) 96%,transparent);backdrop-filter:blur(14px); }
.filter-bar { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--shadow); }
.filter-bar > :not(:last-child) { padding-bottom:5px; }
.field-control { width:100%;min-height:48px;border:1px solid var(--line);border-radius:999px;background:var(--page);color:var(--ink);padding:0 16px;outline:0; }
select.field-control {
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' stroke='%23667066' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:12px 8px;
}
html[data-theme="night"] select.field-control {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' stroke='%23aebbad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.filter-search { position:relative;grid-column:1/-1; }
.filter-search input { padding-left:42px; }
.filter-search::before { content:"⌕";position:absolute;left:17px;top:9px;font-size:22px;color:var(--muted); }
.az-strip { display:flex;flex-wrap:wrap;gap:7px 4px;overflow:visible;margin:24px 0;padding-bottom:0; }
.az-strip button { flex:0 0 36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;font-size:12px;font-weight:850; }
.az-strip button.active { background:var(--brand-strong);color:var(--page); }
.results-line { display:flex;justify-content:space-between;align-items:center;margin:0 0 18px;color:var(--muted);font-size:13px;font-weight:750; }
.no-results { grid-column:1/-1;padding:60px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface); }
.no-results h3 { font-size:32px; }
.back-to-top { position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px;border:1px solid color-mix(in srgb,var(--brand-strong) 70%,var(--line));border-radius:999px;background:var(--brand-strong);color:var(--page);font-weight:850;box-shadow:0 12px 32px color-mix(in srgb,var(--brand-strong) 30%,transparent);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .2s ease,transform .2s ease,visibility .2s; }
.back-to-top.is-visible { opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0); }
.back-to-top:hover { transform:translateY(-2px); }
.back-to-top svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }
body[data-page="recipes"] .toast { bottom:84px; }

.recipe-hero { padding:35px 0 50px; }
.breadcrumb { display:flex;flex-wrap:wrap;gap:9px;margin:0 0 25px;color:var(--muted);font-size:12px;font-weight:750; }
.recipe-lead { display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,70px);align-items:center; }
.recipe-lead-image { min-height:540px;height:68vh;max-height:700px;overflow:hidden;border-radius:calc(var(--radius) + 8px);background:var(--surface-2); }
.recipe-lead-image img { width:100%;height:100%;object-fit:cover; }
.recipe-lead-copy .eyebrow { color:var(--brand-strong); }
.recipe-lead-copy h1 { color:var(--ink);font-size:clamp(52px,6.5vw,82px); }
.byline { margin:18px 0;color:var(--muted);font-size:16px; }
.dietary-tags { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px; }
.dietary-tag { display:inline-flex;align-items:center;padding:8px 12px;border:1px solid color-mix(in srgb,var(--brand-strong) 35%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--brand) 20%,var(--surface));color:var(--brand-strong);font-size:12px;font-weight:850;letter-spacing:.03em; }
.dietary-tags small { color:var(--muted);font-size:11px; }
.recipe-actions { display:flex;flex-wrap:wrap;gap:10px;margin:25px 0; }
.recipe-actions .button { transition:background .2s ease,border-color .2s ease,color .2s ease; }
.recipe-actions .button:not(.secondary):hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }
.recipe-actions .button.secondary:hover { background:var(--brand);border-color:var(--brand);color:var(--brand-strong); }
html[data-theme="night"] .recipe-actions .button.secondary:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }
.recipe-facts { display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line); }
.recipe-fact { padding:17px 12px 17px 0; }
.recipe-fact + .recipe-fact { padding-left:18px;border-left:1px solid var(--line); }
.recipe-fact span { display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em; }
.recipe-fact strong { font-family:var(--display);font-size:20px; }
.recipe-body { padding:70px 0; }
.recipe-columns { display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(35px,8vw,100px);align-items:start; }
.ingredient-panel { position:sticky;top:116px;padding:28px;border-radius:var(--radius);background:var(--surface-2); }
.ingredient-panel h2,.method-panel h2 { margin-bottom:24px;font-size:42px; }
.ingredient-list { list-style:none;padding:0;margin:0; }
.ingredient-list li { display:flex;gap:12px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent); }
.ingredient-list li::before { content:"";flex:0 0 8px;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--brand); }
.method-list { list-style:none;counter-reset:steps;padding:0;margin:0; }
.method-list li { counter-increment:steps;position:relative;min-height:70px;padding:0 0 28px 66px;color:var(--muted);font-size:17px; }
.method-list li::before { content:counter(steps);position:absolute;left:0;top:-5px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:var(--brand-strong);font-family:var(--display);font-weight:900;font-size:19px; }
html[data-theme="night"] .method-list li::before { color:var(--page); }
.recipe-edit-section { border-top:1px solid var(--line); }
.recipe-edit-section .form-card { max-width:900px;margin:0 auto; }
.recipe-edit-section h2 { color:var(--ink);font-size:clamp(36px,5vw,58px); }
.edit-intro { max-width:720px;color:var(--muted); }
.recipe-edit-section .button.dark:hover { background:var(--brand);color:var(--brand-strong); }
html[data-theme="night"] .recipe-edit-section .button.dark { background:var(--brand-strong);color:var(--page); }
html[data-theme="night"] .recipe-edit-section .button.dark:hover { background:var(--brand);color:var(--page); }

.form-layout { display:grid;grid-template-columns:1.25fr .75fr;gap:36px;padding:48px 0 80px;align-items:start; }
.form-card,.aside-card,.login-card { border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow); }
.form-card { padding:clamp(22px,5vw,44px); }
.form-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start; }
.form-field { display:grid;align-content:start;gap:7px; }
.form-field.full { grid-column:1/-1; }
.form-field > label,.form-field > legend { font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.08em; }
.form-field input,.form-field select,.form-field textarea { width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--page);color:var(--ink);padding:13px 14px;outline:0; }
.form-field textarea { min-height:160px;resize:vertical; }
.form-note { color:var(--muted);font-size:12px; }
.image-upload { display:grid;gap:9px;padding:14px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--page); }
.image-upload input[type="file"] { padding:8px;border:1px solid var(--line);background:var(--surface); }
.image-preview { display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface); }
.image-preview[hidden] { display:none; }
.image-preview img { width:110px;height:88px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line); }
.image-preview .text-link { border:0;background:var(--brand);color:var(--brand-strong);padding:8px 14px; }
.image-preview .text-link:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:#fff; }
html[data-theme="night"] .image-preview .text-link:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }
html[data-theme="night"] .image-preview .text-link { background:var(--brand);border-color:var(--brand);color:var(--page); }
.ingredient-picker { min-width:0;margin:0;padding:0;border:0; }
.ingredient-picker legend { margin-bottom:7px;padding:0; }
.ingredient-options { display:flex;flex-wrap:wrap;gap:9px; }
.ingredient-pill { position:relative;cursor:pointer; }
.ingredient-pill input { position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none; }
.ingredient-pill span { display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--page);color:var(--ink);font-size:14px;font-weight:750;line-height:1;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s; }
.ingredient-pill:hover span { border-color:color-mix(in srgb,var(--brand) 70%,var(--line));transform:translateY(-1px); }
.ingredient-pill input:checked + span { border-color:var(--brand-strong);background:var(--brand-strong);color:var(--surface);box-shadow:0 4px 12px color-mix(in srgb,var(--brand-strong) 22%,transparent); }
.ingredient-pill input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--brand) 65%,white);outline-offset:3px; }
.ingredient-picker .form-note { margin-top:1px; }
.form-actions { display:flex;align-items:center;gap:14px;margin-top:24px; }
.account-summary .form-actions .button { white-space:nowrap; }
#recipeForm .button.dark:hover { background:var(--brand);color:var(--brand-strong); }
html[data-theme="night"] #recipeForm .button.dark { background:var(--brand-strong);color:var(--page); }
html[data-theme="night"] #recipeForm .button.dark:hover { background:var(--brand);color:var(--page); }
.form-success { display:none;margin-top:18px;padding:14px;border-radius:var(--radius-sm);background:var(--surface-2);font-weight:750; }
.form-success.show { display:block; }
.aside-card { overflow:hidden; }
.aside-card img { width:100%;aspect-ratio:4/3;object-fit:cover; }
.aside-card div { padding:25px; }
.aside-card h3 { font-size:31px; }
.aside-card p { color:var(--muted); }

.submission-page { background:linear-gradient(180deg,var(--page) 0,var(--page) 70%,color-mix(in srgb,var(--surface-2) 46%,var(--page)) 100%); }
.submission-hero { position:relative;overflow:hidden;padding-bottom:46px; }
.submission-hero::after { content:"";position:absolute;right:max(20px,calc((100vw - 1180px)/2));bottom:-42px;width:190px;height:190px;border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);border-radius:50%;box-shadow:0 0 0 26px color-mix(in srgb,var(--brand) 7%,transparent),0 0 0 52px color-mix(in srgb,var(--brand) 5%,transparent);pointer-events:none; }
.submission-hero .container { position:relative;z-index:1; }
.submission-hero h1 { max-width:820px; }
.submission-hero p:last-child { max-width:760px; }
.submission-layout { grid-template-columns:minmax(0,1.38fr) minmax(280px,.62fr);gap:30px;padding-top:36px; }
.recipe-builder { min-width:0;padding:0;overflow:hidden; }
.builder-head { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px clamp(22px,4vw,38px) 20px;border-bottom:1px solid var(--line); }
.builder-head h2 { margin-top:4px;font-size:clamp(31px,4vw,44px); }
.builder-kicker { color:var(--muted);font-size:13px;font-weight:850;text-transform:uppercase;letter-spacing:.1em; }
.draft-status { flex:0 0 auto;padding:8px 12px;border-radius:999px;background:var(--surface-2);color:var(--brand-strong);font-size:12px;font-weight:850; }
.builder-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0 clamp(22px,4vw,38px);border-bottom:1px solid var(--line);list-style:none; }
.builder-steps button { position:relative;width:100%;display:flex;align-items:center;gap:10px;padding:18px 8px;border:0;background:transparent;color:var(--muted);text-align:left;cursor:pointer; }
.builder-steps button::after { content:"";position:absolute;left:8px;right:100%;bottom:-1px;height:3px;background:var(--brand);transition:right .2s ease; }
.builder-steps button[aria-current="step"] { color:var(--ink); }
.builder-steps button[aria-current="step"]::after { right:8px; }
.builder-steps button > span { width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border:1px solid var(--line);border-radius:50%;background:var(--page);font-size:12px;font-weight:900; }
.builder-steps button[aria-current="step"] > span,.builder-steps button.is-complete > span { border-color:var(--brand-strong);background:var(--brand-strong);color:var(--page); }
.builder-steps strong { font-size:13px;line-height:1.2; }
.form-alert { margin:20px clamp(22px,4vw,38px) 0;padding:13px 15px;border:1px solid color-mix(in srgb,#a43d2d 45%,var(--line));border-radius:var(--radius-sm);background:color-mix(in srgb,#d9573e 9%,var(--surface));color:var(--ink);font-size:14px;font-weight:750; }
.form-step { padding:clamp(28px,5vw,44px) clamp(22px,4vw,38px) 10px; }
.form-step[hidden] { display:none; }
.step-heading { margin-bottom:30px; }
.step-heading .eyebrow { margin-bottom:13px;color:var(--brand-strong); }
.step-heading h3 { font-size:clamp(34px,5vw,50px); }
.step-heading > p:last-child { max-width:650px;margin:13px 0 0;color:var(--muted);font-size:16px; }
.submission-page .form-grid { gap:22px 18px; }
.submission-page .form-field > label,.submission-page .form-field > legend { font-size:14px;letter-spacing:.045em; }
.submission-page .form-field input,.submission-page .form-field select,.submission-page .form-field textarea { min-height:50px;background:var(--page);font-size:16px;transition:border-color .18s,box-shadow .18s,background .18s; }
.submission-page .form-field input:hover,.submission-page .form-field select:hover,.submission-page .form-field textarea:hover { border-color:color-mix(in srgb,var(--brand) 65%,var(--line)); }
.submission-page .form-field input:focus,.submission-page .form-field select:focus,.submission-page .form-field textarea:focus { border-color:var(--brand-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);background:var(--surface); }
.submission-page .form-field input:invalid:not(:placeholder-shown),.submission-page .form-field textarea:invalid:not(:placeholder-shown),.submission-page .form-field select:invalid { border-color:color-mix(in srgb,#a43d2d 65%,var(--line)); }
.submission-page .form-note { font-size:13px;line-height:1.45; }
.optional-label { display:inline-block;margin-left:5px;color:var(--muted);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0; }
.compact-picker { min-width:0;margin:0;padding:0;border:0; }
.compact-picker legend { margin-bottom:7px;padding:0; }
.compact-options { display:flex;flex-wrap:wrap;gap:8px; }
.compact-options label { position:relative;cursor:pointer; }
.compact-options input { position:absolute;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none; }
.compact-options span { display:inline-flex;align-items:center;min-height:50px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--page);font-size:14px;font-weight:800;transition:.18s; }
.compact-options input:checked + span { border-color:var(--brand-strong);background:var(--brand-strong);color:var(--page); }
.compact-options input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--brand) 65%,white);outline-offset:3px; }
.split-control { display:grid;grid-template-columns:minmax(0,1fr) 116px; }
.split-control input { border-radius:var(--radius-sm) 0 0 var(--radius-sm)!important; }
.split-control select { border-left:0!important;border-radius:0 var(--radius-sm) var(--radius-sm) 0!important; }
.scale-picker { min-width:0;margin:0;padding:0;border:0; }
.scale-picker legend { margin-bottom:8px;padding:0; }
.scale-options { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.scale-options label { position:relative;cursor:pointer; }
.scale-options input { position:absolute;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none; }
.scale-options span { min-height:82px;display:grid;align-content:center;gap:3px;padding:15px 16px 15px 46px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--page);transition:.18s; }
.scale-options span::before { content:"";position:absolute;left:17px;top:50%;width:17px;height:17px;border:2px solid var(--line);border-radius:50%;transform:translateY(-50%);box-shadow:inset 0 0 0 4px var(--page); }
.scale-options input:checked + span { border-color:var(--brand-strong);background:color-mix(in srgb,var(--surface-2) 64%,var(--surface)); }
.scale-options input:checked + span::before { border-color:var(--brand-strong);background:var(--brand-strong); }
.scale-options input:focus-visible + span { outline:3px solid color-mix(in srgb,var(--brand) 65%,white);outline-offset:3px; }
.scale-options strong { font-size:14px; }
.scale-options small { color:var(--muted);font-size:12px; }
#recipeFamilyNote { min-height:105px; }
.submission-page .ingredient-picker { margin-bottom:24px; }
.submission-page .ingredient-picker legend { font-size:14px;letter-spacing:.045em; }
.submission-page .ingredient-pill span { min-height:44px;padding:10px 14px; }
.entry-list { display:grid;gap:11px; }
.entry-row { display:grid;grid-template-columns:36px minmax(0,1fr) 40px;gap:10px;align-items:center; }
.entry-number { width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--brand-strong);font-family:var(--display);font-size:15px;font-weight:900; }
.entry-control { min-width:0; }
.entry-control input,.entry-control textarea { width:100%;min-height:50px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--page);color:var(--ink);font-size:16px;outline:0;transition:border-color .18s,box-shadow .18s,background .18s; }
.entry-control textarea { min-height:104px;resize:vertical; }
.entry-control input:focus,.entry-control textarea:focus { border-color:var(--brand-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);background:var(--surface); }
.entry-remove { width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font-size:23px;line-height:1;cursor:pointer;transition:.18s; }
.entry-remove:hover:not(:disabled) { border-color:var(--brand-strong);background:var(--brand-strong);color:var(--page); }
.entry-remove:disabled { opacity:.34;cursor:not-allowed; }
.add-entry { display:inline-flex;align-items:center;gap:8px;margin:15px 0 0 46px;padding:9px 0;border:0;border-bottom:2px solid var(--brand);background:transparent;color:var(--ink);font-size:14px;font-weight:900;cursor:pointer; }
.add-entry span { font-size:18px; }
.writing-example { display:grid;grid-template-columns:auto 1fr;gap:2px 18px;margin:25px 0 0 46px;padding:15px 17px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--surface-2) 55%,var(--surface));font-size:14px; }
.writing-example strong { grid-row:1/3;align-self:center;font-family:var(--display);font-size:18px; }
.writing-example span { font-weight:800; }
.writing-example small { color:var(--muted);font-size:12px; }
.photo-fields { display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line); }
.submission-page .image-upload { padding:16px;background:var(--page); }
.submission-page .image-upload input[type="file"] { min-height:0;padding:10px;background:var(--surface);font-size:14px; }
.quality-panel { margin-top:30px;padding:20px;border:1px solid color-mix(in srgb,var(--brand) 60%,var(--line));border-radius:var(--radius);background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 70%,var(--surface)),var(--surface)); }
.quality-head { display:flex;align-items:start;justify-content:space-between;gap:20px; }
.quality-head > div { display:flex;align-items:start;gap:13px; }
.quality-mark { width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:50%;background:var(--brand-strong);color:var(--page);font-size:18px; }
.quality-head h4 { margin:0;font-family:var(--display);font-size:24px;line-height:1; }
.quality-head p { max-width:520px;margin:7px 0 0;color:var(--muted);font-size:13px; }
.quality-results { margin-top:17px; }
.quality-empty,.quality-source-note { margin:0;color:var(--muted);font-size:13px; }
.quality-loading { display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px; }
.quality-loading span { width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--brand-strong);border-radius:50%;animation:spin .75s linear infinite; }
.quality-loading p,.quality-unavailable p,.quality-clear p { margin:0; }
.quality-clear { display:flex;align-items:start;gap:11px;padding:13px;border-radius:var(--radius-sm);background:var(--surface);font-size:13px; }
.quality-clear > span { width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:50%;background:var(--brand);color:var(--brand-strong);font-weight:900; }
.quality-clear p,.quality-unavailable p { margin-top:3px;color:var(--muted); }
.quality-unavailable { padding:13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);font-size:13px; }
.suggestion-list { display:grid;gap:10px;margin-top:12px; }
.suggestion-card { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:15px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface); }
.suggestion-copy > span { color:var(--brand-strong);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em; }
.suggestion-copy p { margin:5px 0;font-size:14px;line-height:1.4; }
.suggestion-copy del { color:var(--muted);text-decoration-color:#b75243; }
.suggestion-copy ins { color:var(--ink);font-weight:800;text-decoration:none; }
.suggestion-copy small { color:var(--muted);font-size:12px; }
.suggestion-actions { display:flex;align-items:center;gap:11px; }
.suggestion-actions .text-link { border:0;background:transparent;cursor:pointer;font-size:13px; }
.builder-actions { display:flex;align-items:center;gap:12px;margin-top:30px;padding:22px clamp(22px,4vw,38px) 28px;border-top:1px solid var(--line); }
.builder-actions .button { flex:0 0 auto; }
.submission-note { margin-left:auto;color:var(--muted);font-size:12px;text-align:right; }
.submission-success { margin:0 clamp(22px,4vw,38px) 30px;padding:19px;align-items:start;gap:13px; }
.submission-success.show { display:flex; }
.submission-success .success-mark { width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:50%;background:var(--brand);color:var(--brand-strong);font-weight:900; }
.submission-success p { margin:4px 0 9px;color:var(--muted);font-size:14px; }
.submission-aside { position:sticky;top:104px;display:grid;gap:18px; }
.submission-photo { box-shadow:0 16px 45px rgba(38,54,38,.09); }
.submission-photo img { aspect-ratio:16/10; }
.submission-photo div { padding:23px; }
.submission-photo .eyebrow { margin-bottom:14px;color:var(--brand-strong); }
.submission-photo h3 { font-size:32px; }
.process-card { padding:23px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); }
.process-card .eyebrow { margin-bottom:16px;color:var(--brand-strong); }
.process-card ol { display:grid;gap:16px;margin:0;padding:0;list-style:none; }
.process-card li { display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start; }
.process-card li > span { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--brand-strong);font-family:var(--display);font-size:14px;font-weight:900; }
.process-card li div { display:grid;gap:2px; }
.process-card li strong { font-size:14px; }
.process-card li small { color:var(--muted);font-size:12px;line-height:1.4; }
.signed-in-note { margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px; }
@keyframes spin { to { transform:rotate(360deg); } }

.login-wrap { min-height:calc(100vh - 78px);display:grid;place-items:center;padding:50px 20px;background:linear-gradient(135deg,var(--surface-2),var(--page)); }
.login-card { width:min(470px,100%);padding:clamp(25px,6vw,48px); }
.login-card h1 { color:var(--ink);font-size:50px; }
.login-card > p { color:var(--muted); }
.login-card .form-field { margin:15px 0; }
.profile-avatar { width:74px;height:74px;display:grid;place-items:center;margin-bottom:18px;border-radius:50%;background:var(--brand);color:var(--brand-strong);font-family:var(--display);font-size:30px;font-weight:900; }

.ingredient-browser { padding:45px 0 80px; }
.ingredient-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.ingredient-tile { position:relative;min-height:210px;display:flex;flex-direction:column;justify-content:end;overflow:hidden;padding:22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 35px rgba(38,54,38,.07);transition:transform .2s,box-shadow .2s; }
.ingredient-tile::before { content:"";position:absolute;right:-32px;top:-35px;width:150px;height:150px;border-radius:50%;background:var(--surface-2);transition:transform .3s; }
.ingredient-tile:hover { transform:translateY(-4px);background:var(--brand-strong);border-color:var(--brand-strong);color:#fff;box-shadow:var(--shadow); }
.ingredient-tile:hover .ingredient-count { color:inherit; }
.ingredient-tile:hover::before { transform:scale(1.08); }
.ingredient-icon { position:absolute;right:20px;top:18px;display:grid;place-items:center;width:82px;height:82px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--ink);line-height:1;transition:transform .25s,color .2s,border-color .2s; }
.ingredient-icon svg { width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke; }
.ingredient-tile:hover .ingredient-icon { color:var(--brand-strong);border-color:currentColor;transform:rotate(-5deg) scale(1.08); }
html[data-theme="night"] .ingredient-tile:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }
html[data-theme="night"] .ingredient-tile:hover .ingredient-icon { color:#fff;border-color:var(--brand-strong); }
.ingredient-count { position:relative;color:var(--muted);font-size:12px;font-weight:800; }
.ingredient-tile strong { position:relative;font-family:var(--display);font-size:30px;line-height:1; }
.empty-favourites { text-align:center;padding:80px 20px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface); }
.empty-favourites .heart { font-size:54px;color:var(--brand); }

.site-footer { padding:58px 0 28px;background:var(--brand-strong);color:var(--page); }
.footer-grid { display:grid;grid-template-columns:1.4fr .6fr .6fr;gap:50px; }
.footer-brand { max-width:440px; }
.footer-brand h2 { font-size:42px; }
.footer-brand p { color:color-mix(in srgb,var(--page) 68%,transparent); }
.footer-links { display:grid;align-content:start;gap:10px;font-size:13px; }
.footer-links strong { margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;font-size:11px; }
.footer-links a { color:color-mix(in srgb,var(--page) 70%,transparent); }
.site-footer button.text-link { margin-top:4px;background:var(--page);border-color:color-mix(in srgb,var(--page) 65%,transparent);color:var(--brand-strong);box-shadow:none; }
.site-footer button.text-link:hover { background:var(--brand);border-color:var(--brand);color:var(--brand-strong); }
html[data-theme="night"] .site-footer button.text-link:hover { background:var(--brand-strong);border-color:var(--brand-strong);color:var(--page); }
.footer-bottom { display:flex;justify-content:space-between;gap:20px;margin-top:50px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--page) 20%,transparent);font-size:11px;color:color-mix(in srgb,var(--page) 65%,transparent); }

.theme-dialog { width:min(860px,calc(100% - 28px));max-height:88vh;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--page);color:var(--ink);box-shadow:0 35px 100px rgba(0,0,0,.35); }
.theme-dialog::backdrop { background:rgba(10,15,10,.58);backdrop-filter:blur(6px); }
.theme-dialog-inner { padding:clamp(22px,5vw,42px); }
.dialog-head { display:flex;justify-content:space-between;gap:20px;margin-bottom:24px; }
.dialog-head h2 { font-size:42px; }
.dialog-head p { margin:10px 0 0;color:var(--muted); }
.dialog-close { width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;font-size:21px; }
.theme-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:13px; }
.theme-option { display:grid;grid-template-columns:82px 1fr auto;gap:16px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-align:left;cursor:pointer; }
.theme-option.active { box-shadow:inset 0 0 0 2px var(--brand); }
.swatches { height:56px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border-radius:8px; }
.swatches i:nth-child(1) { background:var(--s1); }.swatches i:nth-child(2) { background:var(--s2); }.swatches i:nth-child(3) { background:var(--s3); }
.theme-option strong { display:block; }.theme-option small { display:block;color:var(--muted); }
.theme-number { color:var(--muted);font-family:var(--display);font-size:23px; }
.toast { position:fixed;right:20px;bottom:20px;z-index:100;max-width:340px;padding:13px 17px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:750;box-shadow:var(--shadow);transform:translateY(90px);opacity:0;transition:.25s; }
.toast.show { transform:translateY(0);opacity:1; }

@media (max-width:1024px) {
  .main-nav { position:fixed;left:20px;right:20px;top:88px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:13px;border-radius:var(--radius-sm);transition:background .2s ease,color .2s ease; }.main-nav a::after { display:none; }
  .main-nav a:hover,.main-nav a:focus-visible { background:var(--surface-2);color:var(--ink); }
  .menu-toggle { display:inline-flex; }
  .theme-trigger span:last-child { display:none; }
  .category-grid { grid-template-columns:repeat(4,1fr); }
  .recipe-grid { grid-template-columns:repeat(2,1fr); }
  .recipe-facts { grid-template-columns:repeat(2,1fr); }.recipe-fact:nth-child(odd) { padding-left:0;border-left:0; }.recipe-fact:nth-child(n+3) { border-top:1px solid var(--line); }
  .filters-sticky { top:78px; }
  .filter-bar { grid-template-columns:1fr 1fr; }
  .filter-search { grid-column:1/-1; }
  .recipe-lead { grid-template-columns:1fr; }.recipe-lead-image { height:60vh;min-height:420px; }.recipe-lead-copy { max-width:760px; }
  .form-layout { grid-template-columns:1fr; }.aside-card { display:grid;grid-template-columns:.8fr 1.2fr; }.aside-card img { height:100%;aspect-ratio:auto; }
  .submission-layout { grid-template-columns:1fr; }
  .submission-aside { position:relative;top:auto;grid-template-columns:1fr 1fr; }
  .submission-photo { display:block; }
  .submission-photo img { height:auto;aspect-ratio:16/10; }
}

@media (max-width:700px) {
  .container { width:min(100% - 24px,1180px); }
  .topbar { height:68px;gap:8px; }.brand-copy > span { display:none; }.brand-copy strong { font-size:15px; }.brand-full { display:none; }.brand-short { display:inline; }.brand-mark { width:34px;height:34px; }
  .icon-link.login-icon { display:none; }.theme-trigger { width:42px;padding:0; }.theme-trigger span:last-child { display:none; }
  .hero { padding:12px 0 48px; }.hero-panel,.hero-content { min-height:610px; }.hero-content { width:100%;padding:34px 24px;justify-content:end; }.hero-panel::after { background:linear-gradient(0deg,rgba(8,20,10,.94) 0%,rgba(8,20,10,.6) 60%,rgba(8,20,10,.1) 100%); }
  h1 { font-size:50px; }.hero-copy { font-size:15px; }.hero-search { border-radius:18px;flex-wrap:wrap;padding:7px; }.hero-search input { min-height:48px; }.hero-search button { width:100%; }
  .section { padding:54px 0; }.section-head { align-items:start;flex-direction:column; }.section-title h2 { font-size:42px; }
  .category-grid { grid-template-columns:repeat(3,1fr);gap:15px 9px; }.category-card { font-size:12px; }
  .recipe-grid { grid-template-columns:1fr;gap:18px; }.recipe-card { display:grid;grid-template-columns:42% 58%; }.card-media { aspect-ratio:auto;min-height:190px; }.card-body { padding:20px; }.card-title { font-size:22px; }.card-meta { flex-direction:column;gap:3px; }.card-badge { left:8px;top:8px;padding:5px 7px; }.favourite-button { right:8px;top:8px;width:36px;height:36px; }
  .story-grid { grid-template-columns:1fr; }.story-image { order:2; }.stat-row { gap:5px; }.stat { padding:12px 7px; }.stat strong { font-size:23px; }
  .page-hero { padding:44px 0 28px; }.page-hero h1 { font-size:47px; }
  .filters-sticky { position:relative;top:auto; }
  .filter-bar { grid-template-columns:1fr; }.filter-search { grid-column:auto; }
  .back-to-top { right:14px;bottom:14px;width:48px;padding:0;justify-content:center; }
  .back-to-top span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  body[data-page="recipes"] .toast { right:14px;bottom:72px; }
  .recipe-lead-image { height:52vh;min-height:340px; }.recipe-lead-copy h1 { font-size:50px; }.recipe-facts { grid-template-columns:1fr; }.recipe-fact + .recipe-fact { padding-left:0;border-left:0;border-top:1px solid var(--line); }
  .recipe-body { padding:48px 0; }.recipe-columns { grid-template-columns:1fr; }.ingredient-panel { position:relative;top:auto; }.method-list li { padding-left:56px;font-size:16px; }
  .form-layout { padding-top:25px; }.form-grid { grid-template-columns:1fr; }.form-field.full { grid-column:auto; }.aside-card { display:block; }.form-actions { align-items:stretch;flex-direction:column; }
  .submission-hero { padding-top:44px; }
  .submission-hero::after { right:-70px;width:150px;height:150px; }
  .submission-layout { padding-top:24px; }
  .builder-head { align-items:flex-start; }
  .draft-status { max-width:130px;text-align:center; }
  .builder-steps { padding-inline:16px; }
  .builder-steps button { justify-content:center;flex-direction:column;gap:5px;padding-inline:3px;text-align:center; }
  .builder-steps button::after { left:3px; }
  .builder-steps button[aria-current="step"]::after { right:3px; }
  .builder-steps strong { font-size:11px; }
  .scale-options { grid-template-columns:1fr; }
  .entry-row { grid-template-columns:30px minmax(0,1fr) 38px;gap:7px; }
  .entry-number { width:28px;height:28px; }
  .add-entry,.writing-example { margin-left:37px; }
  .writing-example { grid-template-columns:1fr;gap:3px; }
  .writing-example strong { grid-row:auto;margin-bottom:5px; }
  .quality-head { flex-direction:column; }
  .quality-head .button { width:100%; }
  .suggestion-card { grid-template-columns:1fr; }
  .suggestion-actions { justify-content:flex-start; }
  .builder-actions { flex-wrap:wrap; }
  .builder-actions .button { flex:1 1 auto; }
  .submission-note { flex:1 0 100%;margin-left:0;text-align:left; }
  .submission-aside { grid-template-columns:1fr; }
  .ingredient-grid { grid-template-columns:repeat(2,1fr); }.ingredient-tile { min-height:175px;padding:16px; }.ingredient-icon { right:13px;top:13px;width:64px;height:64px; }.ingredient-icon svg { width:38px;height:38px; }.ingredient-tile strong { font-size:24px; }
  .footer-grid { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; }.footer-bottom { flex-direction:column; }
  .theme-grid { grid-template-columns:1fr; }.theme-option { grid-template-columns:68px 1fr auto; }.theme-dialog-inner { padding:22px; }
}

@media (max-width:420px) {
  .category-grid { grid-template-columns:repeat(2,1fr); }.recipe-card { grid-template-columns:1fr; }.card-media { min-height:230px; }.footer-grid { grid-template-columns:1fr; }.footer-brand { grid-column:auto; }
  .builder-steps strong { max-width:72px; }
  .compact-options { display:grid;grid-template-columns:1fr 1fr; }
  .compact-options span { justify-content:center; }
}

@media print {
  .site-header,.site-footer,.recipe-actions,.theme-dialog,.toast,.back-to-top { display:none!important; }
  body { background:white;color:black; }.recipe-hero,.recipe-body { padding:20px 0; }.recipe-lead-image { max-height:330px;min-height:0; }.ingredient-panel { position:static;background:#f3f3f3; }
}

/* Accounts, RBAC and admin workspace */
.button.danger { background:#9f2d2d;color:#fff; }
.button.danger:hover { background:#7f1f1f;transform:translateY(-1px); }
.button:disabled { opacity:.55;cursor:wait;transform:none!important; }
.role-pill,.request-status,.request-type,.account-state { display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; }
.role-pill.user { background:var(--surface-2);color:var(--ink); }
.role-pill.editor { background:color-mix(in srgb,var(--accent) 28%,var(--surface));color:var(--ink); }
.role-pill.administrator { background:var(--brand-strong);color:var(--page); }
.account-wrap { width:min(980px,calc(100% - 40px));min-height:calc(100vh - 78px);margin:auto;padding:48px 0 70px; }
.account-card { border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(24px,4vw,38px);box-shadow:var(--shadow); }
.account-summary { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;margin-bottom:22px; }
.account-summary h1 { font-size:clamp(34px,5vw,56px); }
.account-summary p { margin:7px 0 0;color:var(--muted); }
.account-summary .form-actions { margin:0;justify-content:flex-end; }
.account-summary .form-actions { flex-wrap:nowrap; }
.account-summary .form-actions > .button { flex:0 0 auto; }
.account-grid { display:grid;grid-template-columns:1fr 1fr;gap:22px; }
.account-card h2 { font-size:34px;margin-bottom:12px; }
.account-card > p { color:var(--muted); }
.profile-avatar { width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--brand-strong);font:900 32px/1 var(--display); }
.profile-avatar.small { width:46px;height:46px;font-size:20px; }
.inline-status { min-height:24px;margin:12px 0 0;color:var(--brand-strong);font-weight:800; }
#changePasswordForm > .button { margin-top:10px; }
.mfa-setup { margin-top:20px; }
.mfa-secret { border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:18px; }
.mfa-secret code,.recovery-codes pre { display:block;overflow-wrap:anywhere;margin:10px 0;padding:12px;border-radius:8px;background:var(--ink);color:var(--page);font:700 14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.mfa-secret details { margin-top:12px; }
.mfa-secret summary { cursor:pointer;font-weight:800; }
.mfa-secret .uri-code { max-height:120px;overflow:auto;font-size:12px; }
.recovery-codes { border:2px solid var(--accent);border-radius:var(--radius-sm);padding:18px;background:color-mix(in srgb,var(--accent) 9%,var(--surface)); }

.admin-hero { padding:48px 0 42px;background:var(--brand-strong);color:var(--page); }
.admin-hero .container { display:flex;align-items:end;justify-content:space-between;gap:25px; }
.admin-hero h1 { font-size:clamp(50px,7vw,82px); }
.admin-hero p:not(.eyebrow) { margin:14px 0 0;color:color-mix(in srgb,var(--page) 75%,transparent); }
.admin-hero .role-pill { background:var(--page);color:var(--brand-strong); }
.admin-workspace { padding:0 0 80px; }
.admin-tabs { position:sticky;top:78px;z-index:20;display:flex;gap:4px;overflow-x:auto;margin:0 0 28px;padding:14px 0;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--page) 94%,transparent);backdrop-filter:blur(15px); }
.admin-tabs button { flex:0 0 auto;border:0;border-radius:999px;background:transparent;padding:10px 16px;font-size:14px;font-weight:850;cursor:pointer; }
.admin-tabs button:hover,.admin-tabs button.active { background:var(--brand-strong);color:var(--page); }
.admin-tabs span { display:inline-grid;min-width:20px;margin-left:5px;padding:1px 5px;border-radius:99px;background:var(--accent);color:#181818;font-size:11px; }
.admin-tabs span:empty { display:none; }
.admin-panel { min-height:420px; }
.admin-panel-head { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px; }
.admin-panel-head h2 { font-size:clamp(36px,5vw,54px); }
.admin-panel-head h3 { font-size:34px; }
.admin-panel-head input,.admin-panel-head select { width:min(310px,100%); }
.admin-status { position:fixed;z-index:100;right:24px;bottom:24px;max-width:460px;transform:translateY(30px);opacity:0;pointer-events:none;border-radius:12px;background:var(--brand-strong);color:var(--page);padding:14px 18px;box-shadow:var(--shadow);font-weight:800;transition:.2s; }
.admin-status.show { transform:none;opacity:1; }
.admin-status.error { background:#922b2b;color:#fff; }
.admin-loading,.admin-empty { border:1px dashed var(--line);border-radius:var(--radius);padding:45px;text-align:center;color:var(--muted);background:var(--surface); }
.admin-empty span { display:block;margin-bottom:8px;color:var(--brand);font-size:38px;font-weight:900; }
.admin-empty h3 { font-size:28px; }
.admin-empty p { margin:8px 0 0; }
.review-list { display:grid;gap:18px; }
.review-card { overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 7%,transparent); }
.review-card > header { display:flex;justify-content:space-between;gap:18px;padding:24px 26px;border-bottom:1px solid var(--line); }
.review-card h3 { margin:9px 0 6px;font-size:30px; }
.review-card header p,.review-card > footer { margin:0;color:var(--muted);font-size:13px; }
.review-card > footer { padding:15px 26px;border-top:1px solid var(--line); }
.request-detail { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;background:var(--surface-2); }
.request-detail p { margin:0;color:var(--muted); }
.request-pagination { display:flex;justify-content:center;padding:8px 0 18px; }
.request-type.addition { background:color-mix(in srgb,var(--brand) 25%,var(--surface));color:var(--brand-strong); }
.request-type.edit { background:color-mix(in srgb,var(--accent) 28%,var(--surface));color:var(--ink); }
.request-status.pending { background:color-mix(in srgb,var(--accent) 28%,var(--surface));color:var(--ink); }
.request-status.approved { background:color-mix(in srgb,var(--brand) 24%,var(--surface));color:var(--brand-strong); }
.request-status.rejected { background:#f7dddd;color:#7f1f1f; }
.request-summary { display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:var(--line); }
.request-summary div { padding:18px 26px;background:var(--surface); }
.request-summary dt { color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase; }
.request-summary dd { margin:5px 0 0;white-space:pre-wrap; }
.change-list { display:grid;gap:14px;padding:22px 26px; }
.change-list strong { text-transform:capitalize; }
.change-list pre { margin:6px 0 0;white-space:pre-wrap;font:inherit;color:var(--muted); }
.review-decision { padding:20px 26px;border-top:1px solid var(--line);background:var(--surface-2); }
.review-decision label { display:block;margin-bottom:7px;font-weight:850; }
.review-decision label span { color:var(--muted);font-weight:500; }
.review-decision textarea { width:100%; }
.review-decision .form-actions { margin:12px 0 0; }
.admin-recipe-list { display:grid;max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); }
.admin-recipe-row { display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-bottom:1px solid var(--line);background:transparent;padding:16px 20px;text-align:left;cursor:pointer; }
.admin-recipe-row:last-child { border-bottom:0; }
.admin-recipe-row:hover { background:var(--surface-2); }
.admin-recipe-row span:first-child { display:grid; }
.admin-recipe-row small { margin-top:2px;color:var(--muted); }
.admin-recipe-row span:last-child { color:var(--brand-strong);font-weight:900; }
.admin-form { margin:22px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(22px,4vw,34px);box-shadow:var(--shadow); }
.admin-form fieldset { margin:0 0 26px;padding:0;border:0; }
.admin-form legend { margin-bottom:5px;font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.03em; }
.admin-form .form-note { display:block;margin-bottom:15px; }
.recipe-editor { scroll-margin-top:160px; }
.user-list { display:grid;gap:16px; }
.user-card { border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:22px; }
.user-card-head { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:20px; }
.user-card-head h3 { font-size:26px; }
.user-card-head p { margin:4px 0 0;color:var(--muted);font-size:13px; }
.account-state.active { background:color-mix(in srgb,var(--brand) 25%,var(--surface));color:var(--brand-strong); }
.account-state.inactive { background:var(--surface-2);color:var(--muted); }
.user-checks { display:flex;align-items:center;gap:15px; }
.check-row { display:flex;align-items:center;gap:9px;font-weight:800; }
.check-row input { width:19px;height:19px; }
.mfa-state { color:var(--muted);font-size:13px; }
.user-meta { display:flex;flex-wrap:wrap;gap:8px 18px;margin:15px 0;color:var(--muted);font-size:12px; }
.user-meta strong { color:#9f2d2d; }
.audit-list { overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface); }
.audit-row { display:grid;grid-template-columns:190px 1fr 180px 280px;gap:16px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px; }
.audit-row:last-child { border-bottom:0; }
.audit-row span,.audit-row code { color:var(--muted); }
.audit-row code { overflow:hidden;text-overflow:ellipsis; }

@media (max-width:850px) {
  .account-summary { grid-template-columns:auto 1fr; }.account-summary .form-actions { grid-column:1/-1;justify-content:flex-start; }
  .account-grid { grid-template-columns:1fr; }
  .request-summary { grid-template-columns:1fr; }
  .audit-row { grid-template-columns:145px 1fr; }.audit-row span:nth-of-type(2),.audit-row code { display:none; }
}

@media (max-width:700px) {
  .account-wrap { width:min(100% - 24px,980px);padding:24px 0 50px; }
  .account-summary { grid-template-columns:1fr;text-align:center; }.account-summary .profile-avatar { margin:auto; }.account-summary .form-actions { grid-column:auto; }
  .admin-hero { padding:34px 0; }.admin-hero .container { align-items:start;flex-direction:column; }.admin-hero h1 { font-size:52px; }
  .admin-tabs { top:68px;margin-bottom:22px; }
  .admin-panel-head { align-items:stretch;flex-direction:column; }.admin-panel-head input,.admin-panel-head select { width:100%; }
  .review-card > header { flex-direction:column;padding:20px; }.request-summary div,.change-list,.review-decision { padding:17px 20px; }
  .request-detail { align-items:stretch;flex-direction:column;padding:17px 20px; }
  .admin-recipe-row { align-items:start; }.admin-recipe-row span:last-child { font-size:0; }.admin-recipe-row span:last-child::after { content:"→";font-size:20px; }
  .user-card-head { grid-template-columns:auto 1fr; }.user-card-head .account-state { grid-column:1/-1; }
  .user-checks { align-items:flex-start;flex-direction:column; }
  .audit-row { grid-template-columns:1fr;gap:2px; }.audit-row span:first-child { font-size:11px; }
  .admin-status { left:12px;right:12px;bottom:12px; }
}