/* styles/foundation.css */
:root {
  --paper: #fbfaf4;
  --surface: #fffefb;
  --ink: #283229;
  --muted: #626e61;
  --soft: #e8e6dc;
  --line: #d9ded5;
  --green: var(--leaf);
  --sage: #edf3e9;
  --leaf: #315f49;
  --leaf-dark: #234535;
  --coral: #df654c;
  --coral-dark: #bd4d39;
  --butter: #f4dc7b;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow: 0 18px 46px rgba(46, 48, 36, 0.1);
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--coral-dark); outline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
[hidden] { display: none !important; }
.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--ink); color: #fff; left: 12px; padding: 10px 14px; position: fixed; top: -50px; z-index: 10; }
.skip-link:focus { top: 12px; }
.section-shell { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

svg { height: 1em; width: 1em; vertical-align: -0.13em; }
.site-header { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid transparent; background: rgba(251, 250, 244, .88); backdrop-filter: blur(18px); }
.site-header__inner { max-width: 1200px; min-height: 76px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { background: none; border: 0; color: var(--ink); font: 700 28px/1 var(--serif); letter-spacing: -.05em; padding: 5px 0; }
.brand span { color: var(--coral); }
nav { display: flex; gap: 28px; margin-left: auto; }
.nav-link { background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 650; padding: 10px 0; transition: color .2s ease; }
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link.is-active { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.header-add { border: 0; background: var(--ink); color: #fff; border-radius: 100px; padding: 10px 15px 10px 12px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: background .2s ease, transform .2s ease; }
.header-add:hover { background: var(--leaf); transform: translateY(-1px); }
.header-add span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); font-size: 14px; }

.kicker, .eyebrow { color: var(--leaf); font-size: 11px; font-weight: 800; letter-spacing: .14em; margin: 0 0 13px; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; }
h1 em, h2 em { color: var(--coral); font-style: italic; font-weight: 400; }
.hero { min-height: 625px; display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; gap: 35px; padding-top: 64px; padding-bottom: 72px; overflow: hidden; }
.hero__copy { padding: 24px 0 10px; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(58px, 7vw, 94px); line-height: .92; margin: 0 0 26px; }
.hero__intro { color: #545c51; max-width: 480px; font-size: 17px; line-height: 1.7; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 31px; }
.button { border: 0; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 21px; font-size: 14px; font-weight: 750; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.button svg { font-size: 18px; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px rgba(223, 101, 76, .2); }
.button--primary:hover { background: var(--coral-dark); }
.button--outline { border: 1px solid #bec5b9; background: transparent; color: var(--ink); }
.button--outline:hover { background: #f1f1e9; border-color: var(--ink); }
.text-button { padding: 2px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--leaf); display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 750; }
.text-button svg { font-size: 17px; }
.hero__proof { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 57px; }
.hero__proof strong { color: var(--ink); font-weight: 750; }
.avatar-stack { display: flex; padding-left: 4px; }
.avatar-stack i { width: 29px; height: 29px; border: 2px solid var(--paper); border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 800; margin-left: -7px; }
.avatar-stack i:nth-child(1) { background: #d37f64; }.avatar-stack i:nth-child(2) { background: #6f9568; }.avatar-stack i:nth-child(3) { background: #c6ad63; }

.hero__art { min-height: 460px; position: relative; }
.hero__sun { position: absolute; width: min(38vw, 430px); height: min(38vw, 430px); right: 4%; top: 5%; border-radius: 50%; background: #f2dc82; }
.hero__plate { background: #fffefb; box-shadow: var(--shadow); overflow: hidden; position: absolute; }
.hero__plate--one { width: 77%; aspect-ratio: 1.14; right: 4%; top: 9%; transform: rotate(5deg); border-radius: 48% 52% 47% 53% / 49% 50% 50% 51%; padding: 13px; }
.hero__plate--two { width: 35%; aspect-ratio: 1; left: 2%; bottom: 1%; transform: rotate(-14deg); border: 8px solid var(--surface); border-radius: 50%; }
.hero__dish { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.hero__plate--two .hero__dish { object-position: 52% 56%; }
.hero__note { position: absolute; top: 6%; left: 3%; color: var(--leaf); font: italic 21px/1.08 var(--serif); transform: rotate(-7deg); }
.hero__leaf { position: absolute; color: var(--leaf); display: grid; place-items: center; }
.hero__leaf svg { font-size: 46px; }.leaf-one { bottom: 3%; right: 3%; transform: rotate(35deg); }.leaf-two { top: 15%; right: -1%; color: var(--coral); }

.recipes { padding-top: 90px; padding-bottom: 105px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 37px; }
.section-heading h2, .ritual h2 { font-size: clamp(42px, 4.6vw, 62px); line-height: .95; margin: 0; }
.recipe-controls { border-top: 1px solid #d7d8cc; border-bottom: 1px solid #d7d8cc; padding: 15px 0; margin-bottom: 30px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.search-field { position: relative; width: 245px; }
.search-field input { background: transparent; width: 100%; border: 0; color: var(--ink); padding: 9px 25px 9px 0; outline: 0; font-size: 14px; }
.search-field input::placeholder { color: #8a8e84; }
.search-field span { position: absolute; right: 2px; top: 5px; color: var(--leaf); font: 27px/1 var(--serif); }
.chip-row { display: flex; justify-content: flex-end; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.chip { border: 0; background: transparent; color: var(--muted); border-radius: 99px; padding: 7px 11px; font-size: 12px; white-space: nowrap; }
.chip:hover { color: var(--ink); }.chip.is-active { background: var(--leaf); color: #fff; }
.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.recipe-card { background: var(--surface); border-radius: 4px; box-shadow: 0 2px 0 rgba(42, 49, 40, .03); overflow: hidden; animation: rise .56s both; animation-delay: var(--delay); }
.recipe-card__image { background: #e4ddc8; border: 0; display: block; height: 231px; padding: 0; position: relative; width: 100%; overflow: hidden; }
.recipe-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.recipe-card:hover .recipe-card__photo { transform: scale(1.045); }
.recipe-card__category { background: rgba(255,255,252,.94); border-radius: 99px; color: var(--leaf); font-size: 10px; font-weight: 800; left: 14px; letter-spacing: .1em; padding: 7px 10px; position: absolute; text-transform: uppercase; top: 14px; }
.recipe-card__open { background: var(--coral); color: #fff; bottom: 12px; border-radius: 50%; display: grid; place-items: center; height: 35px; opacity: 0; position: absolute; right: 12px; transform: translateY(8px); transition: .25s ease; width: 35px; }
.recipe-card:hover .recipe-card__open { opacity: 1; transform: translateY(0); }
.recipe-card__body { padding: 19px 20px 20px; }.recipe-card__body .eyebrow { color: #a87955; font-size: 10px; margin-bottom: 7px; }
.recipe-card h3 { font: 500 24px/1.05 var(--serif); letter-spacing: -.045em; margin-bottom: 10px; }
.recipe-card h3 button { background: none; color: inherit; border: 0; font: inherit; letter-spacing: inherit; padding: 0; text-align: left; }
.recipe-card h3 button:hover { color: var(--coral); }.recipe-card p { color: var(--muted); font-size: 13px; line-height: 1.52; margin-bottom: 18px; min-height: 59px; }
.recipe-card__meta { color: var(--muted); display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.recipe-card__meta span:first-child { display: inline-flex; gap: 5px; align-items: center; }.recipe-card__meta svg { font-size: 14px; color: var(--leaf); }
.difficulty { background: #f4f0e3; border-radius: 99px; color: #755f39; padding: 4px 8px; font-weight: 700; }.difficulty--mittel { background: #e9eee5; color: var(--leaf); }.difficulty--anspruchsvoll { background: #f6e8e1; color: #a95742; }
.empty-state { color: var(--muted); text-align: center; padding: 48px; }
.recipe-image-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, #f0d982, #e57655); color: rgba(255,255,255,.9); display: grid; place-items: center; }.recipe-image-fallback span { font-size: 50px; }

.ritual { background: var(--leaf); color: #fff; display: grid; grid-template-columns: 120px 1fr 1fr; gap: 30px; align-items: center; margin-bottom: 104px; padding-top: 51px; padding-bottom: 51px; }
.ritual__mark { width: 74px; height: 74px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; display: grid; place-items: center; font-size: 28px; }.ritual .kicker { color: #e3d783; }.ritual h2 { color: #fff; font-size: 44px; }.ritual h2 em { color: #f3db81; }.ritual > p { color: #d1ded2; font-size: 14px; line-height: 1.65; margin: 0; }.ritual .text-button { color: #f3db81; grid-column: 3; justify-self: start; margin-top: -13px; }

.detail-page { padding-bottom: 100px; }.detail-hero { padding-top: 36px; padding-bottom: 58px; }
.back-link { background: none; border: 0; color: var(--leaf); font-size: 13px; font-weight: 750; padding: 5px 0; margin-bottom: 48px; }.back-link:hover { color: var(--coral); }
.detail-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }.detail-hero__copy { max-width: 500px; }.detail-hero h1 { font-size: clamp(48px, 5.8vw, 78px); line-height: .94; margin: 0 0 22px; }.detail-hero__copy > p:not(.kicker) { color: #596158; font-size: 16px; line-height: 1.7; }
.detail-hero__image { width: 100%; aspect-ratio: 1.06; background: #e3dac5; padding: 11px; transform: rotate(2.5deg); box-shadow: var(--shadow); }.detail-hero__photo { height: 100%; object-fit: cover; }
.detail-meta { display: flex; gap: 20px; flex-wrap: wrap; border-top: 1px solid #d8d9ce; margin-top: 26px; padding-top: 17px; color: var(--leaf); font-size: 13px; font-weight: 700; }.detail-meta span { display: inline-flex; align-items: center; gap: 6px; }.detail-meta svg { font-size: 17px; }
.recipe-content { display: grid; grid-template-columns: minmax(290px, .72fr) 1.28fr; gap: 75px; align-items: start; }
.ingredients-card { background: #e9eee5; padding: 29px 28px 24px; position: sticky; top: 98px; }.ingredients-card__header { display: flex; justify-content: space-between; gap: 13px; align-items: flex-start; }.ingredients-card h2, .method h2 { font-size: 38px; line-height: 1; margin: 0; }.ingredients-card .kicker { margin-bottom: 7px; }.servings-control { display: flex; align-items: center; gap: 9px; color: var(--leaf); }.servings-control button { background: var(--surface); border: 0; color: var(--leaf); border-radius: 50%; height: 27px; width: 27px; font-size: 20px; line-height: 1; }.servings-control button:hover { background: var(--leaf); color: #fff; }.servings-control span { font-size: 14px; font-weight: 800; min-width: 15px; text-align: center; }.servings-label { color: var(--muted); font-size: 11px; margin: -4px 0 19px 0; text-align: right; }
.ingredients-card__controls { align-items: center; display: flex; gap: 11px; }.ingredients-cart-button { align-items: center; background: var(--leaf); border: 1px solid var(--leaf); border-radius: 50%; box-shadow: 0 6px 14px rgba(49,95,73,.18); color: #fff; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 34px; justify-content: center; position: relative; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; width: 34px; }.ingredients-cart-button > svg { height: 18px; width: 18px; }.ingredients-cart-button__plus { align-items: center; background: #f3c968; border: 2px solid #e9eee5; border-radius: 50%; bottom: -4px; color: #40512f; display: flex; font-size: 10px; font-weight: 900; height: 15px; justify-content: center; line-height: 1; position: absolute; right: -4px; width: 15px; }.ingredients-cart-button:hover, .ingredients-cart-button:focus-visible { background: var(--coral); border-color: var(--coral); box-shadow: 0 8px 17px rgba(220,110,86,.22); outline: none; transform: translateY(-1px); }.ingredients-cart-button:disabled, .ingredients-cart-button.is-loading { cursor: wait; opacity: .62; transform: none; }.ingredients-cart-button.is-loading > svg { animation: cart-pulse .7s ease-in-out infinite alternate; }.theme-dark .ingredients-cart-button { background: #7da27a; border-color: #7da27a; color: #102214; }.theme-dark .ingredients-cart-button__plus { border-color: #202c23; }.theme-dark .ingredients-cart-button:hover, .theme-dark .ingredients-cart-button:focus-visible { background: #ef8a73; border-color: #ef8a73; }.theme-dark .ingredients-card__note { color: #aebcab; }
@keyframes cart-pulse { to { transform: scale(.82); } }
.ingredient-list { border-top: 1px solid rgba(49,95,73,.2); list-style: none; margin: 0; padding: 0; }.ingredient-list li { border-bottom: 1px solid rgba(49,95,73,.14); }.ingredient-list label { cursor: pointer; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 12px 0; }.ingredient-list input { position: absolute; opacity: 0; }.ingredient-check { border: 1.5px solid #8ca390; border-radius: 50%; color: transparent; display: grid; place-items: center; height: 17px; width: 17px; }.ingredient-check svg { font-size: 12px; }.ingredient-name { font-size: 13px; }.ingredient-list strong { font-size: 12px; text-align: right; }.ingredient-list label.is-checked { color: #8a9388; text-decoration: line-through; }.ingredient-list label.is-checked .ingredient-check { background: var(--leaf); border-color: var(--leaf); color: #fff; }.ingredients-card__note { color: #6f7d70; font-size: 11px; line-height: 1.5; margin: 19px 0 0; }
.method { padding: 26px 0 10px; }.method__header { border-bottom: 1px solid #d8d9ce; padding-bottom: 25px; }.method__header .kicker { margin-bottom: 7px; }.step-list { list-style: none; margin: 0; padding: 0; }.step-list li { display: grid; grid-template-columns: 46px 1fr; gap: 19px; padding: 28px 0; border-bottom: 1px solid #d8d9ce; }.step-number { color: var(--coral); font: italic 26px/1 var(--serif); }.step-list p { color: #4f584e; font-size: 15px; line-height: 1.72; margin: 0; }.cook-note { display: flex; gap: 14px; align-items: flex-start; background: #f5edd6; color: #5f573e; font-size: 13px; line-height: 1.5; margin-top: 32px; padding: 17px; }.cook-note svg { color: #b8973f; flex: 0 0 auto; font-size: 23px; }.cook-note strong { color: #4d4938; }
.recipe-tips { border-bottom: 1px solid #d8d9ce; padding: 29px 0 30px; }.recipe-tips__heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }.recipe-tips__heading .kicker { margin: 0 0 6px; }.recipe-tips__heading h3 { font-size: 31px; line-height: .96; margin: 0; }.recipe-tips__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.recipe-tip-card { background: #f1f4ed; border: 1px solid rgba(49,95,73,.1); box-shadow: 0 8px 18px rgba(49,95,73,.055); min-height: 183px; padding: 17px 15px 15px; position: relative; }.recipe-tip-card__number { color: rgba(49,95,73,.42); font: italic 18px/1 var(--serif); position: absolute; right: 13px; top: 13px; }.recipe-tip-card .kicker { color: #6f816e; font-size: 9px; margin: 0 25px 8px 0; }.recipe-tip-card h4 { color: var(--leaf); font-size: 16px; line-height: 1.13; margin: 0 20px 10px 0; }.recipe-tip-card > p:last-child { color: #5b665b; font-size: 12px; line-height: 1.55; margin: 0; }

.add-page { display: grid; grid-template-columns: .72fr 1.28fr; gap: 84px; padding-top: 61px; padding-bottom: 105px; }.add-page__intro { align-self: start; position: sticky; top: 112px; }.add-page__intro .back-link { margin-bottom: 62px; }.add-page h1 { font-size: clamp(47px, 5.3vw, 72px); line-height: .94; margin: 0 0 22px; }.add-page__intro > p:not(.kicker) { color: #596158; font-size: 15px; line-height: 1.68; max-width: 300px; }.recipe-form { background: var(--surface); box-shadow: var(--shadow); }.form-section { border-bottom: 1px solid #dfdfd3; padding: 37px 39px; }.form-section__title { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 28px; }.form-section__title > span { border: 1px solid #b8c3b6; border-radius: 50%; color: var(--leaf); display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; font-size: 10px; font-weight: 800; }.form-section h2 { font: 500 29px/1 var(--serif); letter-spacing: -.04em; margin: 0 0 5px; }.form-section__title p { color: var(--muted); font-size: 12px; margin: 0; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }.field { display: grid; gap: 7px; }.field--wide { grid-column: 1 / -1; }.field > span, .ingredient-table__labels { color: #4f584f; font-size: 11px; font-weight: 750; }.field b, .ingredient-table__labels b, .form-footer b { color: var(--coral); }.field small { color: var(--muted); font-size: 10px; font-weight: 500; }.field input, .field textarea, .field select, .repeat-row input, .repeat-row textarea { border: 1px solid #d6d8ce; border-radius: 2px; background: #fff; color: var(--ink); padding: 10px 11px; width: 100%; }.field textarea { resize: vertical; }.field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23315f49' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") calc(100% - 11px) center / 13px no-repeat; }.ingredient-table__labels { display: grid; grid-template-columns: 1fr 105px 103px 32px; gap: 9px; padding: 0 0 8px; }.repeat-list { display: grid; gap: 9px; }.repeat-row { display: grid; gap: 9px; align-items: start; }.ingredient-row { grid-template-columns: 1fr 105px 103px 32px; }.repeat-row input, .repeat-row textarea { font-size: 13px; }.step-row { grid-template-columns: 1fr 32px; }.step-row textarea { resize: vertical; line-height: 1.45; }.icon-button { background: transparent; border: 0; color: #859083; display: grid; place-items: center; height: 38px; padding: 0; width: 32px; }.icon-button:hover { color: var(--coral); }.add-row-button { background: transparent; border: 0; color: var(--leaf); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; margin-top: 13px; padding: 2px 0; }.add-row-button:hover { color: var(--coral); }.form-footer { display: flex; justify-content: space-between; align-items: center; padding: 23px 39px; }.form-footer p { color: var(--muted); font-size: 11px; margin: 0; }

.site-footer { border-top: 1px solid #deded5; color: #7c8277; display: flex; justify-content: space-between; gap: 20px; max-width: 1120px; margin: 0 auto; padding: 24px 0 32px; font-size: 11px; }
.toast { background: var(--ink); border-radius: 100px; bottom: 25px; color: #fff; font-size: 13px; font-weight: 650; left: 50%; max-width: min(92vw, 480px); opacity: 0; padding: 12px 18px; pointer-events: none; position: fixed; text-align: center; transform: translate(-50%, 20px); transition: .28s ease; z-index: 30; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 860px) {
  .section-shell, .site-header__inner { padding-left: 24px; padding-right: 24px; }.hero { grid-template-columns: 1fr; padding-top: 38px; gap: 20px; }.hero__art { min-height: 390px; max-width: 560px; width: 100%; margin: 0 auto; }.hero__sun { width: 330px; height: 330px; }.recipe-grid { grid-template-columns: repeat(2, 1fr); }.ritual { grid-template-columns: 88px 1fr; }.ritual > p { grid-column: 2; }.ritual .text-button { grid-column: 2; margin-top: 0; }.detail-hero__grid, .recipe-content, .add-page { grid-template-columns: 1fr; gap: 35px; }.detail-hero__image { max-width: 570px; }.ingredients-card, .add-page__intro { position: static; }.recipe-content { gap: 28px; }.recipe-tips__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.add-page { padding-top: 35px; }.add-page__intro .back-link { margin-bottom: 40px; }.site-footer { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 600px) {
  .site-header__inner { min-height: 64px; }.brand { font-size: 25px; }.header-add { margin-left: auto; padding: 9px 12px; font-size: 0; }.header-add span { font-size: 14px; }.hero { min-height: auto; padding-bottom: 53px; }.hero h1 { font-size: clamp(51px, 15vw, 70px); }.hero__intro { font-size: 15px; }.hero__proof { margin-top: 36px; }.hero__art { min-height: 310px; }.hero__sun { width: 255px; height: 255px; right: 7%; }.hero__plate--one { width: 79%; }.hero__plate--two { bottom: 0; }.hero__note { font-size: 17px; }.leaf-one { right: 0; }.recipes { padding-top: 55px; padding-bottom: 63px; }.section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 25px; }.section-heading h2, .ritual h2 { font-size: 47px; }.recipe-controls { align-items: stretch; flex-direction: column; gap: 8px; }.search-field { width: 100%; }.chip-row { justify-content: flex-start; margin: 0 -2px; }.recipe-grid { grid-template-columns: 1fr; gap: 17px; }.recipe-card__image { height: 238px; }.recipe-card__open { opacity: 1; transform: none; }.ritual { margin-bottom: 62px; padding-top: 35px; padding-bottom: 35px; grid-template-columns: 1fr; gap: 18px; }.ritual__mark { width: 54px; height: 54px; }.ritual > p, .ritual .text-button { grid-column: 1; }.detail-hero { padding-top: 24px; padding-bottom: 35px; }.back-link { margin-bottom: 32px; }.detail-hero h1 { font-size: 51px; }.detail-meta { gap: 12px; }.detail-hero__image { transform: none; }.ingredients-card { margin-left: -8px; margin-right: -8px; }.method { padding-top: 12px; }.method h2, .ingredients-card h2 { font-size: 35px; }.recipe-tips { padding: 24px 0; }.recipe-tips__heading h3 { font-size: 29px; }.recipe-tips__grid { grid-template-columns: 1fr; gap: 9px; }.recipe-tip-card { min-height: 0; padding: 16px 16px 15px; }.recipe-tip-card h4 { font-size: 17px; }.recipe-tip-card > p:last-child { font-size: 13px; }.step-list li { grid-template-columns: 35px 1fr; gap: 12px; padding: 23px 0; }.step-number { font-size: 22px; }.step-list p { font-size: 14px; }.add-page { padding-top: 26px; padding-bottom: 60px; }.add-page h1 { font-size: 54px; }.recipe-form { margin-left: -12px; margin-right: -12px; }.form-section { padding: 28px 20px; }.form-grid { grid-template-columns: 1fr; }.field--wide { grid-column: auto; }.ingredient-table__labels { display: none; }.ingredient-row { grid-template-columns: 1fr 72px 32px; }.ingredient-row input[name='ingredientUnit'] { grid-column: 1 / 3; }.ingredient-row .icon-button { grid-column: 3; grid-row: 1; }.form-footer { padding: 19px 20px; align-items: flex-end; flex-direction: column; gap: 16px; }.form-footer .button { width: 100%; }.site-footer { align-items: flex-start; flex-direction: column; gap: 5px; margin-left: 24px; margin-right: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Social cooking layer */
a { color: inherit; text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.login-link { background: transparent; border: 0; color: var(--leaf); font-size: 13px; font-weight: 750; padding: 8px; }
.profile-chip, .author-line { background: transparent; border: 0; color: inherit; display: inline-flex; gap: 8px; align-items: center; text-align: left; padding: 0; }
.profile-chip { padding: 5px 7px; border-radius: 100px; }.profile-chip:hover { background: #ecede5; }
.profile-chip__name { max-width: 100px; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { --avatar: var(--leaf); width: 48px; height: 48px; border-radius: 50%; background: var(--avatar); color: #fff; display: inline-grid; place-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.avatar--small { width: 29px; height: 29px; font-size: 9px; }
.author-line { margin-bottom: 12px; }.author-line:hover b { color: var(--coral); }.author-line span { display: grid; line-height: 1.1; }.author-line b { font-size: 12px; }.author-line small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.social-card .recipe-card__body { padding-top: 16px; }.social-card .recipe-card__body > p { min-height: 40px; margin-bottom: 14px; }.social-card .eyebrow { margin-bottom: 5px; }
.social-actions { border-top: 1px solid #e2e3db; margin-top: 20px; padding-top: 13px; display: flex; gap: 4px; align-items: center; }
.social-actions--compact { margin-top: 16px; }.social-button { background: transparent; color: #758072; border: 0; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 5px 6px; border-radius: 99px; font-size: 11px; font-weight: 750; }.social-button:hover { color: var(--coral); background: #f9eee9; }.social-button svg { font-size: 16px; }.social-button.is-active { color: var(--coral); background: #f9e9e4; }.social-button.is-negative { color: #916154; }.social-button--save { margin-left: auto; }
.feed-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }.feed-tabs .chip { border: 1px solid #d7d8cc; padding: 8px 13px; }.feed-tabs .chip.is-active { border-color: var(--leaf); }
.community-page { padding-top: 70px; padding-bottom: 106px; }.page-intro { max-width: 670px; margin-bottom: 42px; }.page-intro h1 { font-size: clamp(50px, 6vw, 78px); line-height: .92; margin: 0 0 18px; }.page-intro > p:not(.kicker) { color: var(--muted); max-width: 540px; line-height: 1.7; }
.detail-hero .author-line { margin-bottom: 21px; }.detail-hero .social-actions { max-width: 485px; }.owner-actions { display: flex; gap: 20px; margin-top: 16px; }.text-button--danger { color: #ad5546; }
.comments-section { padding-top: 30px; padding-bottom: 105px; max-width: 860px; }.comments-section .section-heading h2 { font-size: clamp(40px, 4vw, 54px); }.comment-count { color: var(--muted); font-size: 13px; padding-bottom: 7px; }.comment-form { background: var(--surface); box-shadow: 0 5px 22px rgba(46,54,42,.08); padding: 20px; display: grid; gap: 12px; }.comment-form textarea { border: 1px solid #d6d8ce; resize: vertical; padding: 12px; width: 100%; font: inherit; }.comment-form .button { justify-self: end; }.login-prompt { background: #f5edd6; color: #5f573e; padding: 17px; font-size: 13px; }.login-prompt .text-button { margin-left: 5px; }.comment-list { display: grid; gap: 2px; margin-top: 23px; }.comment { border-bottom: 1px solid #dedfd7; display: grid; grid-template-columns: 31px 1fr; gap: 12px; padding: 18px 0; }.comment__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.comment__meta button { background: transparent; color: var(--ink); border: 0; font: inherit; padding: 0; }.comment__meta span { color: var(--muted); font-size: 11px; }.comment__meta .comment-edit { color: var(--leaf); font-size: 11px; margin-left: 5px; }.comment p { color: #4f584e; font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.step-tools { display: flex; }.step-tools .icon-button { width: 24px; }
.profile-page { padding-top: 55px; padding-bottom: 105px; }.profile-hero { border-bottom: 1px solid #d7d8cc; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; padding: 20px 0 45px; }.profile-identity { display: flex; gap: 19px; align-items: flex-start; }.profile-identity .avatar { width: 72px; height: 72px; font-size: 20px; }.profile-identity h1 { font-size: clamp(42px, 5vw, 64px); line-height: .95; margin: 0 0 10px; }.profile-identity > div > p:not(.kicker) { color: var(--muted); max-width: 520px; line-height: 1.55; margin: 0; }.profile-numbers { grid-column: 1; display: flex; gap: 24px; color: var(--muted); font-size: 12px; }.profile-numbers b { color: var(--ink); display: block; font-size: 18px; }.profile-actions { grid-column: 2; grid-row: 1 / span 2; }.profile-page .recipes { padding-bottom: 0; }
.modal-backdrop { background: rgba(27,36,28,.53); display: grid; place-items: center; inset: 0; padding: 22px; position: fixed; z-index: 80; }.auth-modal { background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.25); max-height: calc(100vh - 44px); overflow: auto; padding: 37px; position: relative; width: min(100%, 470px); }.modal-close { background: transparent; border: 0; color: var(--leaf); position: absolute; right: 14px; top: 14px; width: 33px; height: 33px; }.auth-modal h2 { font-size: 42px; line-height: .94; margin: 0 0 22px; }.auth-switch { display: flex; gap: 7px; margin-bottom: 20px; }.auth-switch .chip { border: 1px solid #d5d7cb; }.auth-modal form { display: grid; gap: 14px; }.auth-modal .button { margin-top: 6px; }.auth-hint { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }.notification-list { display: grid; gap: 15px; }.notification-item { border-top: 1px solid #e0e2da; display: flex; gap: 10px; padding-top: 13px; }.notification-item p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }.notification-item b, .notification-item a { color: var(--ink); }.notifications-modal { max-width: 540px; }
@media (max-width: 860px) { .profile-chip__name, .header-bell { display: none; }.header-actions { gap: 4px; }.profile-hero { grid-template-columns: 1fr; }.profile-actions { grid-column: 1; grid-row: auto; }.profile-numbers { grid-column: 1; } }
@media (max-width: 600px) { .site-header__inner { gap: 7px; }.login-link { font-size: 0; }.login-link::after { content: 'Login'; font-size: 11px; }.header-actions { margin-left: auto; }.header-add { margin-left: 0; }.header-add span { font-size: 15px; }.social-actions { gap: 1px; }.social-button { padding: 5px; }.social-actions--compact .social-button:nth-child(2) { display: none; }.profile-identity { gap: 12px; }.profile-identity .avatar { width: 54px; height: 54px; font-size: 15px; }.profile-numbers { gap: 16px; }.comments-section { padding-bottom: 68px; }.auth-modal { padding: 30px 22px; }.auth-modal h2 { font-size: 37px; }.comment-form .button { width: 100%; }.detail-hero .social-actions { flex-wrap: wrap; }.owner-actions { gap: 14px; }.page-intro { margin-bottom: 30px; } }

/* Recipe image upload and polished shopping checklist */
.ingredient-check { box-sizing: border-box; line-height: 1; padding: 0; text-align: center; }
.ingredient-list label.is-checked .ingredient-check { align-items: center; display: flex; font-size: 11px; font-weight: 800; justify-content: center; line-height: 1; padding-bottom: 1px; }
.image-dropzone { background: #fbfbf7; border: 1.5px dashed #b8c3b6; color: var(--leaf); cursor: pointer; min-height: 176px; overflow: hidden; position: relative; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.image-dropzone:hover, .image-dropzone:focus-visible, .image-dropzone.is-dragging { background: #eef3eb; border-color: var(--leaf); outline: 0; }
.image-dropzone.is-dragging { transform: scale(1.01); }
.image-dropzone.is-uploading { cursor: progress; opacity: .68; pointer-events: none; }
.image-dropzone.is-uploading::after { content: 'Bild wird hochgeladen …'; background: rgba(49,95,73,.9); color: #fff; display: grid; inset: 0; place-items: center; position: absolute; z-index: 2; font-size: 13px; font-weight: 750; }
.image-dropzone__empty { align-content: center; display: grid; justify-items: center; min-height: 176px; padding: 24px; text-align: center; }
.image-dropzone__empty strong { font-size: 14px; }.image-dropzone__empty small { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 6px; }
.image-dropzone__icon { align-items: center; background: #e4eee3; border-radius: 50%; display: flex; height: 38px; justify-content: center; margin-bottom: 9px; width: 38px; }.image-dropzone__icon svg { font-size: 18px; }
.image-dropzone__preview { height: 208px; position: relative; }.image-dropzone__preview img { height: 100%; object-fit: cover; width: 100%; }.image-dropzone__preview span { background: rgba(28,45,34,.78); bottom: 10px; color: #fff; font-size: 11px; font-weight: 750; left: 10px; padding: 7px 10px; position: absolute; }
.image-dropzone.has-image .image-dropzone__empty { display: none; }

/* A little more depth: warm paper, food colours and quiet surface layers. */
:root { --plum: #8f5c68; --sage-light: #e7efe6; --peach-light: #fae7df; --gold-light: #f8efca; --shadow-soft: 0 10px 30px rgba(42, 52, 41, .08); }
body { background: radial-gradient(circle at 88% -7%, rgba(244, 220, 123, .27), transparent 29rem), radial-gradient(circle at -5% 39%, rgba(223, 101, 76, .075), transparent 25rem), var(--paper); }
.site-header { border-bottom-color: rgba(49, 95, 73, .08); box-shadow: 0 5px 18px rgba(42, 52, 41, .025); }
.hero::before { background: linear-gradient(135deg, rgba(255, 255, 255, .54), rgba(248, 239, 202, .26)); border: 1px solid rgba(255,255,255,.64); border-radius: 38px 94px 48px 92px; content: ''; height: 80%; position: absolute; right: 2%; top: 10%; transform: rotate(-4deg); width: 45%; z-index: 0; }
.hero { position: relative; isolation: isolate; }
.hero__art { z-index: 1; }
.hero__sun { background: radial-gradient(circle at 35% 30%, #fff6c9, #f1d573 69%, #d6b95d); box-shadow: 0 22px 42px rgba(208, 175, 77, .18); }
.hero__plate { border: 1px solid rgba(255,255,255,.78); box-shadow: 0 24px 58px rgba(44, 52, 37, .16), 0 5px 12px rgba(44, 52, 37, .07); }
.hero__plate--two { box-shadow: 0 17px 38px rgba(44, 52, 37, .17); }
.button--primary { background: linear-gradient(135deg, #b84b37, #a33e2d); color: #fff; box-shadow: 0 12px 26px rgba(191, 77, 57, .2), inset 0 1px 0 rgba(255,255,255,.16); }
.button--primary:hover { background: linear-gradient(135deg, #a33e2d, #913525); }
html.theme-dark .button--primary { background: linear-gradient(135deg, #ef917a, #f5b69c); color: #302219; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
html.theme-dark .button--primary:hover { background: linear-gradient(135deg, #f3a48f, #f7c6b2); color: #302219; }
.button:disabled { cursor: not-allowed; transform: none; box-shadow: none; }
.button--outline { background: rgba(255,255,255,.45); box-shadow: 0 4px 12px rgba(42, 52, 41, .035); }
.recipe-controls { background: rgba(255,255,255,.38); border-radius: 16px; border: 1px solid rgba(215, 216, 204, .82); padding: 11px 15px; }
.recipe-card { border: 1px solid rgba(49, 95, 73, .075); box-shadow: var(--shadow-soft); position: relative; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.recipe-card::before { background: linear-gradient(90deg, var(--coral), #f0bc67, var(--leaf)); content: ''; height: 3px; left: 0; opacity: .82; position: absolute; right: 0; top: 0; z-index: 2; }
.recipe-card:hover { border-color: rgba(49, 95, 73, .18); box-shadow: 0 18px 38px rgba(42, 52, 41, .14); transform: translateY(-5px); }
.recipe-card__image::after { background: linear-gradient(180deg, transparent 55%, rgba(30, 44, 31, .11)); content: ''; inset: 0; pointer-events: none; position: absolute; }
.recipe-card__category, .recipe-card__open { z-index: 1; }
.social-actions { background: linear-gradient(90deg, rgba(231, 239, 230, .55), rgba(255,255,255,0)); border-radius: 0 0 8px 8px; margin-left: -7px; margin-right: -7px; padding-left: 4px; padding-right: 4px; }
.social-button.is-active { box-shadow: inset 0 0 0 1px rgba(223,101,76,.13); }
.ritual { background: linear-gradient(125deg, #284e3c, var(--leaf) 58%, #3f7259); box-shadow: 0 22px 45px rgba(31, 68, 50, .16); position: relative; overflow: hidden; }
.ritual::after { background: radial-gradient(circle, rgba(244,220,123,.27) 0 2px, transparent 3px); background-size: 22px 22px; content: ''; inset: 0; opacity: .18; pointer-events: none; position: absolute; }
.ritual > * { position: relative; z-index: 1; }
.ingredients-card { box-shadow: 0 14px 29px rgba(49,95,73,.095); border: 1px solid rgba(49,95,73,.08); }
.cook-note { border-left: 3px solid #d2aa49; box-shadow: 0 7px 16px rgba(91,80,37,.06); }
.recipe-form, .comment-form { border: 1px solid rgba(49, 95, 73, .07); }
.image-dropzone { box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 7px 15px rgba(42,52,41,.035); }
@media (max-width: 600px) { .hero::before { height: 39%; right: -14%; top: 48%; width: 81%; }.recipe-controls { border-radius: 12px; }.recipe-card:hover { transform: none; } }

/* More appetite: stronger image moments and satisfying micro-interactions. */
.hero h1 { text-shadow: 0 8px 22px rgba(40, 50, 41, .055); }
.hero__intro { font-size: 17.5px; }
.hero__actions .button--primary { letter-spacing: .01em; min-width: 205px; }
.hero__ticker { align-items: center; background: rgba(255, 254, 251, .67); border: 1px solid rgba(49,95,73,.1); border-radius: 100px; box-shadow: 0 9px 20px rgba(46,54,42,.06); color: var(--muted); display: inline-flex; gap: 8px; margin-top: 21px; padding: 8px 13px; font-size: 11px; }
.hero__ticker b { color: var(--ink); font-weight: 750; }.hero__ticker-dot { background: #e56e55; border: 3px solid #fbe3db; border-radius: 50%; box-shadow: 0 0 0 3px rgba(229,110,85,.14); height: 8px; width: 8px; }
.hero__plate--one::after { background: linear-gradient(135deg, rgba(255,255,255,.34), transparent 28%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.recipe-grid { align-items: start; }
.recipe-card:nth-child(3n+2)::before { background: linear-gradient(90deg, #e9b650, var(--coral), var(--plum)); }.recipe-card:nth-child(3n+3)::before { background: linear-gradient(90deg, var(--leaf), #79a375, #e9b650); }
.recipe-card:nth-child(3n+2) { background: linear-gradient(165deg, #fffefb 72%, #fff8e6); }.recipe-card:nth-child(3n+3) { background: linear-gradient(165deg, #fffefb 72%, #f1f6ef); }
.recipe-card__image { height: 242px; }.recipe-card__photo { filter: saturate(1.08) contrast(1.02); }.recipe-card:hover .recipe-card__photo { transform: scale(1.075); }
.recipe-card__signal { align-items: center; backdrop-filter: blur(8px); background: rgba(31, 61, 46, .83); border: 1px solid rgba(255,255,255,.22); border-radius: 100px; bottom: 13px; color: #fff; display: inline-flex; font-size: 9px; font-weight: 800; gap: 5px; left: 13px; letter-spacing: .05em; padding: 6px 9px; position: absolute; text-transform: uppercase; z-index: 2; }
.recipe-card__signal i { background: #f3d77b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(243,215,123,.16); height: 5px; width: 5px; }
.recipe-card__open { align-items: center; backdrop-filter: blur(8px); background: rgba(255,255,255,.92); box-shadow: 0 8px 17px rgba(24,42,31,.18); color: var(--leaf); display: flex; height: 39px; justify-content: center; opacity: 1; right: 13px; transform: translateY(0); width: 39px; z-index: 2; }.recipe-card:hover .recipe-card__open { background: var(--coral); color: #fff; transform: translateX(2px); }
.social-card .recipe-card__body { padding-bottom: 16px; }.social-card .author-line .avatar { box-shadow: 0 2px 0 #fff, 0 0 0 2px rgba(49,95,73,.14); }.social-button { transition: background .18s ease, color .18s ease, transform .18s ease; }.social-button:hover { transform: translateY(-2px); }
.chip { transition: color .18s ease, background .18s ease, transform .18s ease; }.chip:hover { transform: translateY(-1px); }.chip.is-active { box-shadow: 0 6px 13px rgba(49,95,73,.17); }
.section-heading h2 em { text-shadow: 0 7px 16px rgba(223,101,76,.12); }
.ritual__mark { background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 22px rgba(0,0,0,.12); }
@media (max-width: 600px) { .hero__ticker { font-size: 10px; margin-top: 18px; }.recipe-card__image { height: 248px; }.recipe-card__signal { font-size: 8px; }.recipe-card__open { height: 36px; width: 36px; } }

/* Creator tools, cookbook collection and more decisive community actions. */
.avatar--image { background: #e7ece5; overflow: hidden; }
.avatar--image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.site-header nav { align-items: center; display: flex; gap: 18px; }
.social-actions { gap: 7px; padding: 10px 6px 3px; }
.social-button { border: 1px solid transparent; min-height: 38px; min-width: 42px; justify-content: center; padding: 7px 9px; font-size: 12px; }
.social-button svg { font-size: 18px; }
.social-button:hover { box-shadow: 0 5px 12px rgba(49,95,73,.09); }
.social-button:nth-child(2) { background: #fff7f3; border-color: #e8c3b4; color: #9a5a49; }
.social-button:nth-child(2):hover, .social-button:nth-child(2).is-active { background: #f6dfd5; border-color: #d88d78; color: #8d4536; }
.social-button.is-active { box-shadow: inset 0 0 0 1px rgba(223,101,76,.16), 0 4px 10px rgba(223,101,76,.10); }
.creator-reward { align-items: center; background: linear-gradient(120deg, #f8efca, #fff9e9); border: 1px solid rgba(201,158,61,.25); box-shadow: 0 10px 20px rgba(112,91,39,.08); color: #66562b; display: flex; gap: 10px; margin-top: 23px; padding: 12px 14px; font-size: 12px; line-height: 1.35; }
.creator-reward svg { color: #bd8c28; font-size: 25px; }.creator-reward b { color: #5c4a1d; }
.recipe-gamebar { align-items: center; background: #f1f5ed; border-bottom: 1px solid #dce5d9; color: #748071; display: flex; flex-wrap: wrap; gap: 11px; padding: 14px 39px; font-size: 11px; font-weight: 750; }.recipe-gamebar span { background: #fff; border: 1px solid #d9e2d7; border-radius: 100px; padding: 5px 9px; }.recipe-gamebar .is-ready { background: #e0efdf; border-color: #b6d0b3; color: var(--leaf); }.recipe-gamebar b { color: #a3731d; margin-left: auto; }
.profile-level { align-items: center; background: linear-gradient(135deg, #f7edc8, #fffdf2); border: 1px solid rgba(199,160,69,.25); display: flex; gap: 10px; padding: 11px 14px; }.profile-level > span { background: #fff5d3; border-radius: 50%; color: #aa7b1f; display: grid; height: 35px; place-items: center; width: 35px; }.profile-level > span svg { font-size: 19px; }.profile-level div { display: grid; gap: 4px; min-width: 150px; }.profile-level b { color: #5d4c20; font-size: 12px; }.profile-level small { color: #8a794c; font-size: 10px; }.profile-level i { background: #e6d9ab; border-radius: 100px; height: 5px; overflow: hidden; position: relative; }.profile-level i::after { background: #c89835; border-radius: inherit; content: ''; height: 100%; left: 0; position: absolute; top: 0; width: var(--progress); }
.profile-socials { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.profile-socials a { background: #edf3eb; border: 1px solid #dce7da; border-radius: 100px; color: var(--leaf); font-size: 11px; font-weight: 750; padding: 6px 10px; }.profile-socials a:hover { background: var(--leaf); color: #fff; }
.achievement-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 5px; }.achievement { align-items: center; background: #f4f2ea; border: 1px solid #e1dfd4; color: #9ba09a; display: inline-flex; gap: 5px; padding: 7px 10px; font-size: 11px; font-weight: 750; }.achievement svg { font-size: 14px; }.achievement.is-unlocked { background: #eef5eb; border-color: #c3d8c0; color: var(--leaf); }
.cookbook-showcase { border-top: 1px solid #d7d8cc; margin-top: 65px; padding-top: 55px; }.cookbook-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.cookbook-card { background: #fffdf8; border: 1px solid rgba(49,95,73,.1); box-shadow: var(--shadow-soft); display: grid; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }.cookbook-card:hover { box-shadow: 0 18px 34px rgba(42,52,41,.13); transform: translateY(-4px); }.cookbook-card__cover { aspect-ratio: 1.08; background: #e5dcc5; overflow: hidden; position: relative; }.cookbook-card__cover img { height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }.cookbook-card:hover .cookbook-card__cover img { transform: scale(1.05); }.cookbook-card__cover span { background: rgba(30,52,38,.84); bottom: 10px; color: #fff; font-size: 10px; font-weight: 750; padding: 6px 8px; position: absolute; right: 10px; }.cookbook-card > div { display: grid; gap: 8px; padding: 17px; }.cookbook-card .kicker { margin: 0; }.cookbook-card h3 { font: 500 27px/1 var(--serif); letter-spacing: -.03em; margin: 0; }.cookbook-card > div > p:not(.kicker) { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }.cookbook-card__bottom { align-items: center; border-top: 1px solid #ebe7db; display: flex; justify-content: space-between; margin-top: 5px; padding-top: 11px; }.cookbook-card__bottom b { color: var(--coral-dark); font-size: 13px; }.cookbook-card__bottom a { color: var(--leaf); font-size: 11px; font-weight: 800; }
.admin-toolbox { align-items: center; background: linear-gradient(120deg, #ecf3e8, #fbfcf5); border: 1px solid #c9d9c5; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; padding: 16px; }.admin-toolbox > b { color: var(--leaf); font-size: 13px; }.admin-toolbox form { align-items: center; display: flex; gap: 7px; }.admin-toolbox input { border: 1px solid #cad6c7; padding: 9px 10px; font: inherit; font-size: 12px; }.admin-toolbox .button { padding: 9px 11px; font-size: 11px; }.admin-toolbox small { color: var(--muted); font-size: 10px; width: 100%; }
.knowledge-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.knowledge-card { background: #fffdf8; border: 1px solid rgba(49,95,73,.1); box-shadow: var(--shadow-soft); overflow: hidden; }.knowledge-card > img { display: block; height: 185px; object-fit: cover; width: 100%; }.knowledge-card > div { padding: 18px; }.knowledge-card .kicker { margin: 0 0 8px; }.knowledge-card h2 { font-size: 31px; line-height: .97; margin: 0 0 10px; }.knowledge-card > div > p { color: var(--muted); font-size: 13px; line-height: 1.55; }.knowledge-card details { border-top: 1px solid #e8e5da; color: var(--leaf); font-size: 12px; font-weight: 750; margin-top: 15px; padding-top: 12px; }.knowledge-card summary { cursor: pointer; }.knowledge-card details p { color: #596158; font-weight: 500; line-height: 1.6; }
.library-empty { align-items: center; background: #f4f7f0; border: 1px dashed #b9c8b5; display: grid; grid-column: 1 / -1; justify-items: center; min-height: 260px; padding: 32px; text-align: center; }.library-empty > span { color: #a8b8a2; }.library-empty > span svg { font-size: 42px; }.library-empty h2 { font-size: 38px; margin: 8px 0; }.library-empty p { color: var(--muted); font-size: 13px; max-width: 390px; }
.book-recipe-picker { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }.book-recipe-picker label { align-items: center; background: #fbfbf7; border: 1px solid #dde1d7; cursor: pointer; display: grid; gap: 10px; grid-template-columns: 20px 62px 1fr; padding: 8px; }.book-recipe-picker label:has(input:checked) { background: #edf5eb; border-color: #94b893; }.book-recipe-picker input { accent-color: var(--leaf); }.book-recipe-picker span { display: block; height: 52px; overflow: hidden; }.book-recipe-picker img { height: 100%; object-fit: cover; width: 100%; }.book-recipe-picker div { display: grid; gap: 3px; }.book-recipe-picker b { font-size: 12px; }.book-recipe-picker small { color: var(--muted); font-size: 10px; }
.book-detail { padding-bottom: 105px; }.book-detail__hero { padding-top: 37px; padding-bottom: 58px; }.book-detail__grid { align-items: center; display: grid; gap: 64px; grid-template-columns: minmax(260px, .8fr) 1.2fr; }.book-detail__grid > img { aspect-ratio: .9; box-shadow: 0 22px 45px rgba(42,52,41,.15); height: 100%; object-fit: cover; transform: rotate(-2deg); width: 100%; }.book-detail h1 { font-size: clamp(49px, 6vw, 78px); line-height: .93; margin: 0 0 20px; }.book-detail__grid > div > p:not(.kicker) { color: var(--muted); line-height: 1.7; max-width: 530px; }.book-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0 19px; }.book-facts span { align-items: center; background: #edf3eb; color: var(--leaf); display: inline-flex; gap: 6px; padding: 8px 10px; font-size: 12px; font-weight: 750; }.demo-note { color: var(--muted); display: block; font-size: 10px; margin-top: 8px; }.book-recipe-section { padding-top: 25px; }.locked-recipes { background: #f8efca; color: #685728; margin-top: 28px; padding: 15px; font-size: 13px; }
.profile-editor-modal { width: min(100%, 580px); }.social-editor { border-top: 1px solid #e0e3db; display: grid; gap: 12px; margin-top: 4px; padding-top: 16px; }.social-editor .kicker { margin: 0; }
@media (max-width: 980px) { .site-header nav { gap: 10px; }.nav-link { font-size: 11px; }.cookbook-grid, .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.book-detail__grid { gap: 34px; }.profile-level { grid-column: 1; justify-self: start; } }
@media (max-width: 600px) { .social-actions { flex-wrap: nowrap; gap: 3px; margin-left: -5px; margin-right: -5px; }.social-button { min-height: 38px; min-width: 36px; padding: 6px; }.social-button svg { font-size: 17px; }.social-actions--compact .social-button:nth-child(2) { display: inline-flex; }.social-actions--compact .social-button span { display: inline; }.recipe-gamebar { gap: 7px; padding: 14px 20px; }.recipe-gamebar b { margin-left: 0; }.profile-level { width: 100%; }.cookbook-grid, .knowledge-grid { grid-template-columns: 1fr; }.cookbook-card { grid-template-columns: 120px 1fr; }.cookbook-card__cover { aspect-ratio: auto; height: 100%; }.cookbook-card > div { padding: 13px; }.cookbook-card h3 { font-size: 23px; }.admin-toolbox { align-items: stretch; flex-direction: column; }.admin-toolbox form { width: 100%; }.admin-toolbox input { flex: 1; min-width: 0; }.book-recipe-picker { grid-template-columns: 1fr; }.book-detail__grid { grid-template-columns: 1fr; }.book-detail__grid > img { max-width: 300px; }.book-detail h1 { font-size: 52px; } }

/* Clear, field-level guidance when a recipe is not ready to publish yet. */
.form-feedback { background: #fff1ea; border-bottom: 1px solid #e7af9d; color: #7b3f32; font-size: 13px; font-weight: 650; line-height: 1.45; padding: 14px 39px; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select, .repeat-row.is-invalid input, .repeat-row.is-invalid textarea { border-color: #c96750; box-shadow: 0 0 0 3px rgba(201,103,80,.12); }
.image-dropzone.is-invalid { border-color: #c96750; box-shadow: inset 0 0 0 1px #c96750, 0 0 0 3px rgba(201,103,80,.12); }
@media (max-width: 600px) { .form-feedback { padding: 14px 20px; } }

/* Calmer feedback, practical creator shortcuts and clearer discovery tools. */
.social-button:nth-child(2) { background: transparent; border-color: transparent; color: #748072; }
.social-button:nth-child(2):hover { background: #f4f0e9; border-color: #ded5c8; color: #716052; }
.social-button:nth-child(2).is-active { background: #f3e4de; border-color: #d8aa9c; color: #945448; }
.social-views { align-items: center; color: #849084; display: inline-flex; font-size: 11px; font-weight: 750; gap: 4px; min-height: 38px; padding: 5px 4px; white-space: nowrap; }.social-views svg { font-size: 17px; }
.header-cookbook { align-items: center; background: #f3f6ee; border: 1px solid #d7e1d4; color: var(--leaf); display: inline-flex; gap: 6px; padding: 10px 12px; font-size: 11px; font-weight: 800; white-space: nowrap; }.header-cookbook:hover { background: #e5efe2; border-color: #adc7aa; }.header-cookbook svg { font-size: 15px; }
.editorial-search { margin: 0 0 26px; max-width: 410px; }.editorial-search input { background: rgba(255,255,255,.78); }
.achievement:nth-child(2n) { background: #fff8e6; border-color: #ead9a1; color: #8a6b25; }.achievement:nth-child(3n) { background: #eef1f8; border-color: #d3dbe9; color: #576a87; }.achievement.is-unlocked:nth-child(n) { background: #eef5eb; border-color: #c3d8c0; color: var(--leaf); }
@media (max-width: 1230px) { .site-header__inner { gap: 14px; padding-left: 25px; padding-right: 25px; }.site-header nav { gap: 11px; }.nav-link { font-size: 11px; }.header-cookbook { font-size: 0; padding: 10px; }.header-cookbook svg { font-size: 16px; } }
@media (max-width: 720px) { .social-views { min-width: 31px; padding: 5px 2px; }.social-actions--compact .social-views span { display: none; }.header-cookbook { display: none; } }

.profile-total-views { align-items: center; color: var(--leaf); display: inline-flex; font-size: 12px; font-weight: 750; gap: 7px; grid-column: 1; }.profile-total-views svg { color: #829d7d; font-size: 18px; }.profile-total-views b { color: var(--ink); }
@media (max-width: 860px) { .profile-total-views { grid-column: 1; } }

.nav-link, .header-add, .header-cookbook { white-space: nowrap; }.header-add, .header-cookbook { flex: 0 0 auto; }
.site-header nav .nav-link:nth-child(3) { font-size: 0; }.site-header nav .nav-link:nth-child(3)::after { content: 'Klassiker'; font-size: 11px; }
.header-add { min-width: 118px; }
@media (max-width: 1230px) { .header-add { min-width: 40px; } }
@media (max-width: 1320px) { .profile-chip__name { display: none; }.header-cookbook { font-size: 0; }.header-cookbook::after { content: 'Kochbuch'; font-size: 11px; }.site-header__inner { padding-left: 22px; padding-right: 22px; } }

/* Spacious reactions with clear icon language and lightweight hover explanations. */
.social-actions { gap: 9px; padding: 12px 9px 5px; }
.social-button { border: 1px solid transparent; min-height: 45px; min-width: 45px; padding: 9px 10px; }
.social-button svg { font-size: 21px; stroke-width: 1.9; }
.social-button:hover { background: #eef3eb; border-color: #d7e1d4; box-shadow: 0 6px 14px rgba(49,95,73,.09); }
.social-button:nth-child(2) { background: transparent; color: #7d887c; }
.social-button:nth-child(2):hover { background: #f4f0e9; border-color: #ded5c8; color: #726458; }
.social-button:nth-child(2).is-active { background: #f3e4de; border-color: #d8aa9c; color: #945448; }
.social-views { font-size: 12px; gap: 5px; min-height: 45px; padding: 7px 4px; }.social-views svg { font-size: 20px; }
.social-button[data-tooltip], .social-views[data-tooltip] { position: relative; }
@media (hover: hover) {
  .social-button[data-tooltip]::after, .social-views[data-tooltip]::after { background: #243c2e; border-radius: 5px; bottom: calc(100% + 8px); box-shadow: 0 8px 18px rgba(24,42,31,.18); color: #fff; content: attr(data-tooltip); font-size: 10px; font-weight: 750; left: 50%; line-height: 1; opacity: 0; padding: 8px 9px; pointer-events: none; position: absolute; transform: translate(-50%, 5px); transition: opacity .16s ease, transform .16s ease; white-space: nowrap; z-index: 20; }
  .social-button[data-tooltip]::before, .social-views[data-tooltip]::before { border: 5px solid transparent; border-top-color: #243c2e; bottom: calc(100% - 2px); content: ''; left: 50%; opacity: 0; pointer-events: none; position: absolute; transform: translate(-50%, 5px); transition: opacity .16s ease, transform .16s ease; z-index: 20; }
  .social-button[data-tooltip]:hover::after, .social-button[data-tooltip]:focus-visible::after, .social-views[data-tooltip]:hover::after, .social-button[data-tooltip]:hover::before, .social-button[data-tooltip]:focus-visible::before, .social-views[data-tooltip]:hover::before { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 600px) { .social-actions { gap: 5px; padding-left: 5px; padding-right: 5px; }.social-button { min-height: 42px; min-width: 42px; padding: 8px; }.social-button svg { font-size: 20px; }.social-views { min-height: 42px; }.social-views svg { font-size: 19px; } }

/* Deliberately large, consistent action controls: easy to see and to tap. */
.social-actions { gap: 10px; padding: 14px 10px 7px; }
.social-button { min-height: 51px; min-width: 51px; padding: 10px 11px; }
.social-button svg { font-size: 25px; stroke-width: 2; }
.social-button > span { font-size: 12px; }
.social-button--save { background: #eff5ec; border-color: #d2e1ce; color: var(--leaf); }.social-button--save:hover, .social-button--save.is-active { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.social-views { min-height: 51px; padding: 8px 5px; }.social-views svg { font-size: 23px; }
@media (max-width: 600px) { .social-actions { gap: 6px; padding-left: 5px; padding-right: 5px; }.social-button { min-height: 47px; min-width: 47px; padding: 9px; }.social-button svg { font-size: 23px; }.social-views { min-height: 47px; }.social-views svg { font-size: 21px; } }

/* Compact recipe cards keep every action visible instead of clipping the end
   of a long, single action row. The primary reactions stay together, while
   views and saving get their own, equally easy-to-reach second row. */
.social-actions--compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.social-actions--compact .social-button {
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.social-actions--compact .social-views {
  align-items: center;
  background: #f3f6ee;
  border: 1px solid #dce6d9;
  border-radius: 99px;
  grid-column: 1 / span 3;
  justify-content: center;
  min-width: 0;
  padding: 8px 12px;
}
.social-actions--compact .social-button--save {
  grid-column: 4;
  grid-row: 2;
  margin-left: 0;
}
@media (max-width: 600px) {
  .social-actions--compact { gap: 7px; }
  .social-actions--compact .social-views { padding: 7px 10px; }
}

/* Deliberate navigation: discovery, editorial recipes and learning each have
   their own visual weight instead of competing in one compressed row. */
.site-header__inner { display: grid; gap: 16px; grid-template-columns: auto minmax(175px, 245px) minmax(330px, 1fr) auto; justify-content: normal; max-width: 1320px; min-height: 78px; }
.site-header .primary-nav { align-items: center; display: flex; gap: clamp(12px, 1.8vw, 25px); justify-content: center; margin: 0; min-width: 0; }
.site-header .primary-nav .nav-link { font-size: 13px; font-weight: 760; letter-spacing: -.01em; }
.site-header .primary-nav .nav-link:nth-child(3) { font-size: 13px; }
.site-header .primary-nav .nav-link:nth-child(3)::after { content: none; }
.global-search { align-items: center; background: rgba(255,255,255,.78); border: 1px solid #d9e0d5; border-radius: 100px; box-shadow: 0 5px 15px rgba(42,52,41,.045); display: flex; min-width: 0; padding: 3px 5px 3px 13px; transition: box-shadow .2s ease, border-color .2s ease; }
.global-search:focus-within { border-color: #8dad88; box-shadow: 0 0 0 3px rgba(91,135,86,.12); }
.global-search label { flex: 1; min-width: 0; }.global-search input { background: transparent; border: 0; color: var(--ink); font: 650 12px/1.2 var(--sans); min-width: 0; outline: 0; padding: 8px 4px; width: 100%; }.global-search input::placeholder { color: #899285; }.global-search button { background: var(--leaf); border: 0; border-radius: 50%; color: #fff; display: grid; height: 29px; place-items: center; width: 29px; }.global-search button:hover { background: var(--coral-dark); }.global-search svg { font-size: 15px; }
.header-learning { align-items: center; background: #fff6d9; border: 1px solid #ecd995; border-radius: 100px; color: #796023; display: inline-flex; font-size: 11px; font-weight: 800; gap: 5px; padding: 8px 10px; white-space: nowrap; }.header-learning svg { font-size: 15px; }.header-learning:hover, .header-learning.is-active { background: #eab955; border-color: #eab955; color: #453410; }
.header-actions { gap: 7px; margin-left: 0; }.header-add { min-width: auto; }
.editorial-note { align-items: center; background: #f0f6ed; border: 1px solid #d4e2d0; color: var(--leaf); display: flex; font-size: 12px; font-weight: 720; gap: 8px; margin: 0 0 28px; padding: 12px 14px; }.editorial-note svg { font-size: 18px; }
.tags-field > small, .field > small { color: var(--muted); display: block; font-size: 10px; line-height: 1.35; margin-top: 6px; }.tag-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.tag-suggestions button { background: #f3f6ef; border: 1px solid #d9e2d5; border-radius: 100px; color: #52714f; font-size: 10px; font-weight: 750; padding: 5px 8px; }.tag-suggestions button:hover { background: var(--leaf); border-color: var(--leaf); color: #fff; }

/* Learning room */
.learning-page { padding-bottom: 105px; padding-top: 45px; }.learning-hero { align-items: center; background: linear-gradient(122deg, #ebf4e8, #fff8df 72%); border: 1px solid #d7e4d2; display: grid; gap: 48px; grid-template-columns: 1.25fr .75fr; overflow: hidden; padding: clamp(29px, 5vw, 62px); position: relative; }.learning-hero::before { background: rgba(255,255,255,.48); border-radius: 50%; content: ''; height: 260px; position: absolute; right: -70px; top: -125px; width: 260px; }.learning-hero > * { position: relative; }.learning-hero h1 { font-size: clamp(50px, 6vw, 79px); line-height: .91; margin: 0 0 17px; }.learning-hero > div > p:not(.kicker) { color: #5e685b; line-height: 1.65; margin: 0; max-width: 600px; }.points-card { background: #284a37; box-shadow: 0 18px 30px rgba(42,68,44,.2); color: #fff; display: grid; justify-items: start; padding: 25px; position: relative; }.points-card > span { align-items: center; background: #e9bc57; border-radius: 50%; color: #574114; display: grid; height: 42px; justify-content: center; width: 42px; }.points-card > span svg { font-size: 21px; }.points-card p { color: #c9ddc7; font-size: 11px; font-weight: 750; letter-spacing: .08em; margin: 18px 0 2px; text-transform: uppercase; }.points-card b { font: 700 44px/1 var(--serif); letter-spacing: -.05em; }.points-card small { color: #e8dcae; font-size: 12px; margin-top: 7px; }.points-card i { background: rgba(255,255,255,.18); height: 1px; margin: 18px 0 10px; width: 100%; }.points-card em { color: #e4f1de; font-size: 11px; font-style: normal; font-weight: 750; }.learning-section { padding-top: 74px; }.learning-count { background: #f8efca; color: #786123; font-size: 12px; font-weight: 800; padding: 9px 11px; }.quiz-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }.quiz-card { background: #fffefa; border: 1px solid #dce4d7; box-shadow: var(--shadow-soft); padding: 21px; transition: transform .2s ease, box-shadow .2s ease; }.quiz-card:hover { box-shadow: 0 15px 28px rgba(42,52,41,.11); transform: translateY(-3px); }.quiz-card.is-complete { background: linear-gradient(150deg, #f0f7ed, #fffefa); border-color: #bfd8bb; }.quiz-card__top { align-items: center; display: flex; gap: 9px; }.quiz-card__top > span { align-items: center; background: #e5f0e1; border-radius: 50%; color: var(--leaf); display: grid; height: 31px; justify-content: center; width: 31px; }.quiz-card__top svg { font-size: 16px; }.quiz-card .kicker { margin: 0; }.quiz-card h2 { font-size: 29px; line-height: .98; margin: 20px 0 9px; }.quiz-fact { color: #586356; font-size: 12px; line-height: 1.55; margin: 0 0 17px; }.quiz-card h3 { border-top: 1px solid #e5e8df; font-size: 14px; line-height: 1.4; margin: 0; padding-top: 15px; }.quiz-options { display: grid; gap: 8px; margin-top: 15px; }.quiz-options button { align-items: center; background: #fbfcf8; border: 1px solid #dfe6da; color: #3e4c3c; display: flex; font-size: 11px; gap: 8px; padding: 8px; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.quiz-options button:hover { background: #edf5ea; border-color: #93b58f; transform: translateX(2px); }.quiz-options b { align-items: center; background: #e9eee6; border-radius: 50%; display: grid; flex: 0 0 21px; font-size: 10px; height: 21px; justify-content: center; }.quiz-success { align-items: flex-start; background: #e9f4e5; color: #3b653b; display: flex; font-size: 12px; gap: 9px; line-height: 1.5; margin-top: 16px; padding: 11px; }.quiz-success > svg { flex: 0 0 auto; font-size: 19px; }.quiz-success b { display: block; }.quiz-success p { color: #527052; margin: 3px 0 0; }.learning-articles { border-top: 1px solid #d8ddd3; margin-top: 72px; }

@media (max-width: 1190px) { .site-header__inner { grid-template-columns: auto minmax(180px, 1fr) auto; padding-bottom: 10px; padding-top: 10px; }.site-header .primary-nav { grid-column: 1 / -1; grid-row: 2; }.header-cookbook { font-size: 0; padding: 10px; }.header-cookbook svg { font-size: 16px; } }
@media (max-width: 860px) { .site-header__inner { column-gap: 10px; }.site-header .primary-nav { justify-content: flex-start; overflow-x: auto; padding: 1px 0 5px; }.learning-hero { grid-template-columns: 1fr; gap: 28px; }.points-card { max-width: 360px; }.quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .site-header__inner { grid-template-columns: 1fr auto; min-height: 0; padding-bottom: 9px; padding-top: 9px; }.global-search { grid-column: 1 / -1; grid-row: 2; }.site-header .primary-nav { display: flex; grid-column: 1 / -1; grid-row: 3; gap: 19px; padding: 5px 0 1px; }.site-header .primary-nav .nav-link { font-size: 12px; }.header-learning span { display: none; }.header-learning { padding: 8px; }.header-actions { gap: 4px; }.learning-page { padding-top: 24px; }.learning-hero { margin-left: -10px; margin-right: -10px; padding: 28px 22px; }.learning-hero h1 { font-size: 52px; }.learning-section { padding-top: 55px; }.learning-section .section-heading { gap: 13px; }.quiz-grid { grid-template-columns: 1fr; }.learning-articles { margin-top: 55px; }.points-card { max-width: none; } }

/* Breathing room in the desktop navigation and the compact Kulinara mark. */
.site-header__inner { gap: 22px; grid-template-columns: auto minmax(175px, 235px) minmax(290px, 1fr) auto; }
.site-header .primary-nav { padding-left: 10px; }
.header-actions { border-left: 1px solid rgba(109, 133, 102, .22); padding-left: 16px; }
.brand { align-items: center; display: inline-flex; gap: 9px; }
.brand .brand__word { color: var(--ink); }
.brand .brand__word > span { color: var(--coral); }
.brand-mark { filter: drop-shadow(0 5px 8px rgba(36,73,54,.16)); height: 31px; transition: transform .2s ease, filter .2s ease; width: 31px; }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { filter: drop-shadow(0 8px 12px rgba(232,137,103,.28)); transform: rotate(-5deg) scale(1.1); }

/* Cooking Points are visible as a simple progression, without showing an exchange rate. */
.points-package { align-items: center; align-self: stretch; background: #f8e6a9; border: 1px solid #f3cf65; color: #4f3d12; display: flex; font: 800 11px/1 var(--sans); justify-content: space-between; margin-top: 15px; padding: 10px 11px; text-align: left; transition: background .16s ease, transform .16s ease; }
.points-package span { background: rgba(255,255,255,.52); padding: 5px 7px; }.points-package:hover { background: #ffd76f; transform: translateY(-1px); }

/* Tap or click a knowledge card for a calm, readable focus state. */
.knowledge-card { cursor: pointer; outline: none; transform-origin: center; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.knowledge-card:hover, .knowledge-card:focus-visible { border-color: #a8c4a2; box-shadow: 0 14px 28px rgba(42,70,48,.12); transform: translateY(-3px); }
.knowledge-card:has(details[open]) { border-color: #91b58c; box-shadow: 0 20px 38px rgba(42,70,48,.16); transform: scale(1.035); z-index: 2; }
.knowledge-card details[open] { animation: knowledge-reveal .2s ease both; }
@keyframes knowledge-reveal { from { opacity: .35; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1190px) { .site-header__inner { gap: 14px; }.header-actions { border-left: 0; padding-left: 0; } }
@media (min-width: 1191px) and (max-width: 1320px) { .header-cookbook { justify-content: center; padding: 10px; width: 38px; }.header-cookbook::after { content: none; } }
@media (max-width: 600px) { .brand-mark { height: 28px; width: 28px; }.knowledge-card:has(details[open]) { transform: scale(1.015); }.points-package { margin-top: 13px; } }

/* A simpler navigation keeps the search, discovery and recipe areas from

/* styles/experience.css */
   competing for the same horizontal space. */
.site-header__inner { gap: 18px; grid-template-columns: auto minmax(165px, 255px) minmax(150px, 1fr) auto; max-width: 1400px; }
.site-header .primary-nav { justify-content: flex-start; padding-left: 0; }
.recipe-nav { position: relative; z-index: 30; }
.recipe-nav summary { align-items: center; cursor: pointer; display: inline-flex; gap: 7px; list-style: none; }
.recipe-nav summary::-webkit-details-marker { display: none; }
.recipe-nav[open] summary span { transform: rotate(180deg); }
.recipe-nav summary span { color: var(--coral); font-size: 15px; line-height: 1; transition: transform .16s ease; }
.recipe-nav__menu { background: #fffef9; border: 1px solid #d9e2d6; box-shadow: 0 18px 38px rgba(39,54,40,.15); display: grid; gap: 2px; left: -14px; min-width: 244px; padding: 8px; position: absolute; top: calc(100% + 11px); }
.recipe-nav__menu a { border-radius: 10px; color: var(--ink); display: grid; gap: 3px; padding: 10px 11px; text-decoration: none; }
.recipe-nav__menu a:hover, .recipe-nav__menu a:focus-visible { background: #eff5ed; outline: none; }
.recipe-nav__menu b { font-size: 12px; }.recipe-nav__menu small { color: var(--muted); font-size: 10px; }
.header-actions { align-items: center; border-left: 0; gap: 7px; padding-left: 0; }
.header-create-group { display: flex; position: relative; }
.header-create, .header-create-toggle { align-items: center; background: var(--leaf); border: 0; color: #fff; display: inline-flex; font: 800 11px/1 var(--sans); min-height: 39px; }
.header-create { border-radius: 100px 0 0 100px; gap: 6px; padding: 0 13px 0 14px; text-decoration: none; }.header-create:hover { background: #264a36; }
.header-create svg { font-size: 16px; }.header-create-toggle { border-left: 1px solid rgba(255,255,255,.28); border-radius: 0 100px 100px 0; cursor: pointer; font-size: 15px; justify-content: center; padding: 0 10px 2px 8px; }.header-create-toggle:hover { background: #264a36; }
.creator-menu { background: #fffef9; border: 1px solid #d9e2d6; box-shadow: 0 18px 38px rgba(39,54,40,.17); display: grid; gap: 3px; padding: 7px; position: absolute; right: 0; top: calc(100% + 10px); width: 280px; z-index: 40; }
.creator-menu button { align-items: flex-start; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: flex; gap: 10px; padding: 10px; text-align: left; }.creator-menu button:hover, .creator-menu button:focus-visible { background: #eef4eb; outline: none; }
.creator-menu > button > svg { color: var(--coral); flex: 0 0 auto; font-size: 19px; margin-top: 2px; }.creator-menu span { display: grid; gap: 3px; }.creator-menu b { font-size: 12px; }.creator-menu small { color: var(--muted); font-size: 10px; line-height: 1.35; }

/* Recipe destinations recur gently throughout the experience. */
.recipe-shortcuts { align-items: center; border-top: 1px solid #dce1d8; display: grid; gap: 28px; grid-template-columns: minmax(160px, .4fr) minmax(0, 1fr); padding-bottom: 44px; padding-top: 31px; }
.recipe-shortcuts__intro .kicker { margin: 0 0 4px; }.recipe-shortcuts__intro > b { font: 700 22px/1.05 var(--serif); letter-spacing: -.025em; }
.recipe-shortcuts__links { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recipe-shortcuts__links > a { align-items: center; background: rgba(255,255,255,.48); border: 1px solid #dce5d8; color: var(--ink); display: grid; gap: 9px; grid-template-columns: auto minmax(0,1fr) auto; min-height: 66px; padding: 9px 10px; text-decoration: none; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.recipe-shortcuts__links > a:hover, .recipe-shortcuts__links > a:focus-visible { background: #fffef8; border-color: #a8c6a4; box-shadow: 0 10px 22px rgba(39,60,43,.09); outline: none; transform: translateY(-2px); }
.recipe-shortcuts__links > a > svg { color: var(--coral); font-size: 15px; }.recipe-shortcuts__links b, .recipe-shortcuts__links small { display: block; }.recipe-shortcuts__links b { font-size: 11px; }.recipe-shortcuts__links small { color: var(--muted); font-size: 9px; line-height: 1.25; margin-top: 3px; }
.recipe-shortcuts__icon { align-items: center; border-radius: 50%; display: grid; height: 34px; justify-content: center; width: 34px; }.recipe-shortcuts__icon svg { font-size: 16px; }.recipe-shortcuts__icon--community { background: #e7f0e5; color: var(--leaf); }.recipe-shortcuts__icon--basic { background: #fff0c9; color: #9b721c; }.recipe-shortcuts__icon--classic { background: #f5e8e3; color: #aa604c; }
.recipe-shortcuts--compact { display: block; padding: 0; }.recipe-shortcuts--compact .recipe-shortcuts__intro { display: none; }.recipe-shortcuts--compact .recipe-shortcuts__links { gap: 7px; }.recipe-shortcuts--compact .recipe-shortcuts__links > a { min-height: 55px; padding: 7px; }.recipe-shortcuts--compact .recipe-shortcuts__icon { height: 29px; width: 29px; }.recipe-shortcuts--compact .recipe-shortcuts__icon svg { font-size: 14px; }
.site-footer { display: block; max-width: 1180px; padding-top: 28px; }.site-footer .recipe-shortcuts { border-top: 0; }.site-footer__line { border-top: 1px solid #deded5; color: #7c8277; display: flex; font-size: 11px; gap: 20px; justify-content: space-between; padding: 20px 0 4px; }
.search-empty { background: rgba(255,255,255,.34); border: 1px solid #e0e5dd; padding: 24px; }.search-empty .empty-state { margin: 0 0 22px; }

/* A place on the home page for the recipes people are talking about. */
.community-spotlight { border-top: 1px solid #dce1d8; display: grid; gap: 30px; grid-template-columns: minmax(215px,.55fr) minmax(0,1fr); padding-bottom: 72px; padding-top: 43px; }
.community-spotlight__heading h2 { font-size: clamp(35px, 3.8vw, 54px); line-height: .92; margin: 0; }.community-spotlight__heading > p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 300px; }
.community-spotlight__cards { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.spotlight-card { background: #244b36; color: #fff; display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 13px; min-height: 112px; overflow: hidden; padding: 10px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }.spotlight-card:nth-child(2) { background: #834f4c; }.spotlight-card:hover, .spotlight-card:focus-visible { box-shadow: 0 16px 28px rgba(39,52,43,.2); outline: none; transform: translateY(-3px); }.spotlight-card__image { height: 92px; object-fit: cover; width: 92px; }.spotlight-card > div { align-self: center; min-width: 0; }.spotlight-card p { color: #d9e8d5; font-size: 9px; font-weight: 800; letter-spacing: .08em; margin: 0 0 5px; text-transform: uppercase; }.spotlight-card:nth-child(2) p { color: #ffe1d8; }.spotlight-card h3 { color: #fff; font: 700 21px/1 var(--serif); margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.spotlight-card span { color: rgba(255,255,255,.75); font-size: 10px; }.spotlight-card > svg { align-self: center; font-size: 18px; }

/* The creation entry point makes the two publishing paths feel intentional. */
.creator-hub { padding-bottom: 104px; padding-top: 60px; }.creator-hub__intro { max-width: 650px; }.creator-hub__intro h1 { font-size: clamp(54px, 6.7vw, 90px); line-height: .88; margin: 0 0 20px; }.creator-hub__intro > p:not(.kicker) { color: var(--muted); line-height: 1.65; margin: 0; max-width: 470px; }
.creator-hub__choices { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 45px; min-height: 390px; }.creator-choice { border: 1px solid #d8e3d6; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; overflow: hidden; padding: clamp(28px,4vw,52px); position: relative; text-align: left; transition: filter .24s ease, box-shadow .24s ease, transform .24s ease; }.creator-choice::after { border: 1px solid rgba(255,255,255,.45); border-radius: 50%; content: ''; height: 280px; position: absolute; right: -90px; top: -100px; transition: transform .28s ease; width: 280px; }.creator-choice--recipe { background: linear-gradient(135deg, #e8f1e4, #bdceae); }.creator-choice--book { background: linear-gradient(135deg, #f6e5d9, #e8bda9); }.creator-choice > * { position: relative; z-index: 1; }.creator-choice:hover, .creator-choice:focus-visible { box-shadow: 0 22px 38px rgba(47,62,44,.18); filter: saturate(1.08); outline: none; transform: translateY(-5px) scale(1.01); z-index: 2; }.creator-hub__choices:has(.creator-choice:hover) .creator-choice:not(:hover) { filter: opacity(.58) saturate(.7); transform: scale(.985); }.creator-choice:hover::after { transform: scale(1.15); }.creator-choice__icon { align-items: center; background: rgba(255,255,255,.58); border-radius: 50%; display: grid; height: 46px; justify-content: center; margin-bottom: 25px; width: 46px; }.creator-choice__icon svg { font-size: 22px; }.creator-choice .kicker { margin: 0 0 9px; }.creator-choice h2 { font-size: clamp(43px,4.7vw,68px); line-height: .88; margin: 0 0 15px; }.creator-choice > p:not(.kicker) { font-size: 13px; line-height: 1.6; margin: 0; max-width: 300px; }.creator-choice__go { align-items: center; display: inline-flex; font-size: 12px; font-weight: 800; gap: 8px; margin-top: auto; padding-top: 28px; }.creator-choice__go svg { font-size: 18px; }

/* Less dashboard-like profile details, more of the cook behind the recipes. */
.profile-hero--personal { align-items: start; grid-template-columns: minmax(0,1fr) minmax(230px,.38fr); padding-top: 31px; }.profile-hero--personal .profile-identity { gap: 21px; }.profile-kitchen-note { align-items: center; border-left: 2px solid #e3bd60; display: flex; gap: 9px; margin-top: 18px; padding-left: 10px; }.profile-kitchen-note > span { color: #b58328; }.profile-kitchen-note svg { font-size: 17px; }.profile-kitchen-note p { display: grid; gap: 2px; margin: 0; }.profile-kitchen-note b { font-size: 10px; }.profile-kitchen-note small { color: var(--muted); font-size: 11px; }.profile-side { align-items: stretch; display: grid; gap: 10px; }.profile-side .profile-level { width: 100%; }.profile-quiet-stats { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 10px; gap: 12px; padding: 0 4px; }.profile-quiet-stats span { align-items: center; display: inline-flex; gap: 4px; }.profile-quiet-stats svg { color: #829d7d; font-size: 14px; }.profile-quiet-stats b { color: var(--ink); }.profile-hero--personal .profile-numbers { grid-column: 1; margin-top: 3px; }.profile-hero--personal .profile-actions { align-self: end; grid-column: 2; grid-row: 2; }

/* Keep card reactions clear while giving the actual recipe room to breathe. */
.recipe-card__signal { background: rgba(35,61,45,.62); bottom: 10px; font-size: 8px; letter-spacing: .04em; opacity: .88; padding: 4px 7px; }.recipe-card__signal i { height: 4px; width: 4px; }
.social-actions--compact { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }.social-actions--compact .social-button { flex: 0 0 45px; min-height: 45px; min-width: 45px; width: 45px; }.social-actions--compact .social-views { background: transparent; border: 0; color: #9aa397; flex: 0 0 auto; font-size: 10px; grid-column: auto; min-height: 34px; padding: 3px 2px; }.social-actions--compact .social-views svg { font-size: 15px; }.social-actions--compact .social-button--save { grid-column: auto; grid-row: auto; margin-left: auto; }.social-button--save { border-radius: 50%; }.social-button--save svg { stroke-width: 1.9; }

@media (max-width: 1050px) { .site-header__inner { grid-template-columns: auto minmax(175px,1fr) auto; }.site-header .primary-nav { grid-column: 1 / -1; grid-row: 2; padding: 2px 0 7px; }.profile-chip__name { display: none; } }
@media (max-width: 860px) { .recipe-shortcuts, .community-spotlight { grid-template-columns: 1fr; gap: 19px; }.community-spotlight { padding-bottom: 57px; }.community-spotlight__heading > p:not(.kicker) { max-width: 550px; }.creator-hub__choices { min-height: 340px; }.profile-hero--personal { grid-template-columns: 1fr; }.profile-hero--personal .profile-actions { grid-column: 1; grid-row: auto; }.profile-hero--personal .profile-numbers { grid-column: 1; }.profile-side { max-width: 360px; }.recipe-shortcuts__links { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .site-header__inner { gap: 9px; grid-template-columns: minmax(0,1fr) auto; }.global-search { grid-column: 1 / -1; grid-row: 2; }.site-header .primary-nav { gap: 18px; grid-column: 1 / -1; grid-row: 3; overflow: visible; }.header-learning { display: none; }.header-create span { display: none; }.header-create { border-radius: 100px 0 0 100px; padding: 0 10px; }.header-create-toggle { padding-left: 7px; padding-right: 8px; }.creator-menu { right: 0; width: min(280px, calc(100vw - 32px)); }.recipe-nav__menu { left: -72px; min-width: min(244px, calc(100vw - 36px)); }.recipe-shortcuts { padding-bottom: 38px; padding-top: 27px; }.recipe-shortcuts__links > a { min-height: 58px; }.community-spotlight__cards { grid-template-columns: 1fr; }.spotlight-card { grid-template-columns: 80px minmax(0,1fr) auto; min-height: 96px; }.spotlight-card__image { height: 76px; width: 80px; }.creator-hub { padding-top: 36px; }.creator-hub__choices { grid-template-columns: 1fr; min-height: 0; }.creator-choice { min-height: 302px; padding: 31px 27px; }.creator-hub__choices:has(.creator-choice:hover) .creator-choice:not(:hover) { filter: none; transform: none; }.site-footer__line { align-items: flex-start; flex-direction: column; gap: 5px; }.site-footer .recipe-shortcuts__links { grid-template-columns: 1fr; }.profile-hero--personal .profile-identity { gap: 13px; }.profile-kitchen-note { margin-top: 14px; }.social-actions--compact .social-button { flex-basis: 43px; min-height: 43px; min-width: 43px; width: 43px; } }

/* Restore the spacious recipe-card rhythm: reactions are easy to scan, while
   views stay deliberately secondary. */
.social-actions--compact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.social-actions--compact .social-button { flex: none; justify-content: center; min-height: 51px; min-width: 0; width: 100%; }
.social-actions--compact .social-views { align-items: center; background: #f5f7f2; border: 1px solid #e4eadf; border-radius: 100px; color: #929b8f; font-size: 10px; grid-column: 1 / span 3; justify-content: center; min-height: 39px; padding: 5px 10px; }
.social-actions--compact .social-views svg { font-size: 15px; }.social-actions--compact .social-button--save { grid-column: 4; grid-row: 2; margin-left: 0; }.social-button--save { border-radius: 50%; }
.social-views b { color: inherit; font-size: inherit; }

/* Private editorial pulse: compact, readable and never exposed on public profiles. */
.admin-audience-overview { align-items: center; background: linear-gradient(120deg, #edf5e9, #fff9e8); border: 1px solid #d5e2d1; border-radius: 24px; display: grid; gap: 16px 24px; grid-template-columns: minmax(210px,.75fr) minmax(320px,1fr); margin: 18px 0 28px; padding: 20px 24px; }
.admin-audience-overview > header { align-items: center; display: flex; gap: 12px; }.admin-audience-overview > header > span { align-items: center; background: var(--leaf); border-radius: 50%; color: #fff; display: grid; height: 42px; justify-content: center; width: 42px; }.admin-audience-overview > header svg { font-size: 20px; }.admin-audience-overview .kicker { margin: 0 0 4px; }.admin-audience-overview h2 { font-size: clamp(24px,2.4vw,33px); line-height: 1; margin: 0; }
.admin-audience-overview__numbers { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-audience-overview__numbers > span { background: rgba(255,255,255,.72); border: 1px solid rgba(62,100,70,.13); border-radius: 16px; display: grid; gap: 3px; padding: 12px 15px; }.admin-audience-overview__numbers b { color: var(--leaf); font: 700 26px/1 var(--serif); }.admin-audience-overview__numbers small { color: var(--muted); font-size: 10px; font-weight: 750; }.admin-audience-overview > p { color: var(--muted); font-size: 9px; grid-column: 2; margin: -10px 2px 0; }
html.theme-dark .admin-audience-overview { background: linear-gradient(120deg, #1c2d22, #2b281b); border-color: #405044; }html.theme-dark .admin-audience-overview__numbers > span { background: rgba(10,16,12,.42); border-color: #405044; }
@media (max-width: 720px) { .admin-audience-overview { grid-template-columns: 1fr; padding: 18px; }.admin-audience-overview > p { grid-column: 1; margin-top: -7px; }.admin-audience-overview__numbers b { font-size: 24px; } }

/* Search remains available on every page, directly below the visible sections. */
.site-header__inner { align-items: center; display: grid; gap: 10px 18px; grid-template-areas: 'brand space actions' 'nav nav nav' 'search search search'; grid-template-columns: auto 1fr auto; max-width: 1400px; min-height: 0; padding-bottom: 11px; padding-top: 11px; }
.site-header__inner > .brand { grid-area: brand; }.site-header__inner > .global-search { grid-area: search; justify-self: center; margin: 0 0 2px; max-width: 510px; width: 100%; }.site-header__inner > .primary-nav { grid-area: nav; justify-content: center; margin: 0; overflow: visible; padding: 0; }.site-header__inner > .header-actions { grid-area: actions; justify-self: end; }
.site-header .primary-nav { gap: clamp(12px, 2.1vw, 29px); }.site-header .primary-nav .nav-link { font-size: 12px; padding: 6px 0; }
.header-actions { gap: 7px; }.header-points { align-items: center; background: #fff3c9; border: 1px solid #eedf9f; border-radius: 100px; color: #7a5c16; display: inline-flex; font-size: 10px; font-weight: 800; gap: 4px; min-height: 32px; padding: 5px 8px; white-space: nowrap; }.header-points svg { color: #bf8a1c; font-size: 14px; }.header-points b { font-size: 11px; }.header-points small { font-size: 9px; font-weight: 800; }

@media (max-width: 760px) { .site-header__inner { gap: 9px; grid-template-areas: 'brand actions' 'nav nav' 'search search'; grid-template-columns: minmax(0,1fr) auto; padding-bottom: 10px; padding-top: 10px; }.site-header__inner > .primary-nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }.site-header .primary-nav { gap: 18px; }.site-header .primary-nav .nav-link { flex: 0 0 auto; }.profile-chip__name, .header-bell { display: none; }.header-points small { display: none; }.header-points { padding: 5px 7px; }.global-search { max-width: 100%; } }
@media (max-width: 600px) { .site-header__inner { grid-template-areas: 'brand actions' 'nav nav' 'search search'; }.brand .brand__word { font-size: 24px; }.header-points b { font-size: 10px; }.header-points { min-height: 30px; }.site-header .primary-nav .nav-link { font-size: 11px; }.social-actions--compact { gap: 7px; }.social-actions--compact .social-button { min-height: 45px; }.social-actions--compact .social-views { min-height: 36px; } }

/* A focused learning wheel replaces the long stack of quiz cards. */
.learning-section__heading { align-items: flex-end; }.learning-count { align-items: flex-end; background: transparent; color: var(--muted); display: grid; font-size: 11px; gap: 3px; padding: 0; text-align: right; }.learning-count b { color: var(--leaf); font-size: 12px; }.learning-count span { font-size: 10px; }
.quiz-wheel { align-items: center; display: grid; gap: 18px; grid-template-columns: minmax(120px,.38fr) minmax(0,560px) minmax(120px,.38fr); justify-content: center; margin: 0 auto; max-width: 1030px; overflow: hidden; padding: 16px 0 24px; position: relative; }
.quiz-card--active { animation: quiz-wheel-arrive .42s cubic-bezier(.2,.75,.25,1) both; background: #fffefa; border: 1px solid #c9dbc4; box-shadow: 0 22px 45px rgba(38,67,46,.14); min-height: 350px; padding: clamp(23px,3vw,34px); position: relative; z-index: 2; }.quiz-card--active::before { background: linear-gradient(90deg, #e7f1e2, #fff4ce); content: ''; height: 4px; left: 0; position: absolute; right: 0; top: 0; }.quiz-card--active h2 { font-size: clamp(32px,4vw,46px); margin: 22px 0 13px; }.quiz-card--active h3 { border-top: 1px solid #e0e7dc; font-size: 17px; line-height: 1.4; margin: 0; padding-top: 18px; }.quiz-card--active .quiz-options { gap: 9px; grid-template-columns: 1fr 1fr; margin-top: 20px; }.quiz-card--active .quiz-options button { font-size: 12px; min-height: 55px; padding: 10px; }.quiz-card--active.is-locked { border-color: #eadca5; }.quiz-card--active .quiz-success { margin-top: 25px; }
.quiz-wheel__side { align-content: center; background: rgba(255,255,255,.42); border: 1px solid #e0e6dd; display: grid; justify-items: start; min-height: 220px; opacity: .48; overflow: hidden; padding: 19px; position: relative; transition: opacity .25s ease, transform .35s ease; }.quiz-wheel__side::after { background: linear-gradient(135deg, rgba(255,255,255,.6), transparent); content: ''; inset: 0; position: absolute; }.quiz-wheel__side > * { position: relative; z-index: 1; }.quiz-wheel__side--left { transform: translateX(38px) scale(.88); }.quiz-wheel__side--right { transform: translateX(-38px) scale(.88); }.quiz-wheel__side .kicker { font-size: 8px; margin-bottom: 13px; }.quiz-wheel__side > span { color: var(--leaf); font-size: 20px; }.quiz-wheel__side h3 { font: 700 24px/.98 var(--serif); margin: 18px 0 8px; }.quiz-wheel__side > p:not(.kicker) { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 0; }.quiz-wheel__side.is-complete > span { color: #528454; }.quiz-wheel__side--empty { align-content: center; justify-items: center; text-align: center; }.quiz-wheel__side--empty > p { max-width: 110px; }
.quiz-wheel__hint { color: var(--muted); font-size: 11px; margin: 0; text-align: center; }.quiz-wheel__hint::before { color: var(--coral); content: '↔'; font-size: 15px; margin-right: 7px; vertical-align: -1px; }
@keyframes quiz-wheel-arrive { from { opacity: .15; transform: translateX(62px) scale(.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
@media (max-width: 760px) { .quiz-wheel { gap: 0; grid-template-columns: 1fr; max-width: 590px; padding-top: 8px; }.quiz-wheel__side { display: none; }.quiz-card--active { min-height: 0; }.learning-section__heading { align-items: flex-start; }.learning-count { align-items: flex-start; text-align: left; } }
@media (max-width: 520px) { .quiz-card--active { margin-left: -7px; margin-right: -7px; padding: 22px 17px; }.quiz-card--active .quiz-options { grid-template-columns: 1fr; }.quiz-card--active .quiz-options button { min-height: 48px; }.quiz-wheel__hint { font-size: 10px; } }

/* Compact theme switch and a warm, low-glare dark palette. */
.theme-toggle { background: #234535; border: 1px solid #426c50; border-radius: 100px; display: block; flex: 0 0 auto; height: 30px; padding: 0; position: relative; transition: background .2s ease, border-color .2s ease; width: 48px; }.theme-toggle__thumb { align-items: center; background: #fff9e9; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.28); display: flex; height: 24px; justify-content: center; left: 2px; position: absolute; top: 2px; transition: background .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1); width: 24px; }.theme-toggle__thumb::before { color: #755c1f; content: '☀'; font-size: 13px; line-height: 1; }.theme-toggle.is-active { background: #f7f1e2; border-color: #d9cfb3; }.theme-toggle.is-active .theme-toggle__thumb { background: #234535; box-shadow: 0 2px 5px rgba(65,50,22,.2); transform: translateX(18px); }.theme-toggle.is-active .theme-toggle__thumb::before { color: #ffe49b; content: '☾'; font-size: 15px; transform: translateY(-.5px); }.theme-toggle:hover { border-color: #9fb89f; }.theme-toggle:focus-visible { outline-offset: 2px; }

html.theme-dark { --paper: #121813; --surface: #1a241d; --ink: #f3f0e5; --muted: #afb9ae; --soft: #2a352d; --line: #39483c; --green: #8bb889; --sage: #243429; --leaf: #8bb889; --leaf-dark: #c1ddbd; --coral: #f08a70; --coral-dark: #ffad94; --butter: #eccd71; --shadow-soft: 0 12px 30px rgba(0,0,0,.26); color-scheme: dark; }
html.theme-dark body { background: radial-gradient(circle at 88% -7%, rgba(207,171,73,.13), transparent 29rem), radial-gradient(circle at -5% 39%, rgba(237,111,83,.08), transparent 25rem), var(--paper); }
html.theme-dark .site-header { background: rgba(18,24,19,.91); border-bottom-color: rgba(181,209,175,.14); box-shadow: 0 6px 18px rgba(0,0,0,.16); }.theme-dark .brand .brand__word { color: var(--ink); }.theme-dark .nav-link { color: #b6c0b5; }.theme-dark .nav-link:hover, .theme-dark .nav-link.is-active { color: #fffdf5; }.theme-dark .global-search { background: #202b23; border-color: #3b4d40; box-shadow: none; }.theme-dark .global-search input { color: #f5f1e5; }.theme-dark .global-search input::placeholder { color: #9eab9e; }.theme-dark .header-points { background: #3b341f; border-color: #695c31; color: #ffe59a; }.theme-dark .profile-chip:hover { background: #263329; }.theme-dark .icon-button { color: #dbe8d8; }
.theme-dark .hero::before { background: linear-gradient(135deg, rgba(42,58,45,.75), rgba(95,79,34,.22)); border-color: rgba(219,235,213,.08); }.theme-dark .hero__intro, .theme-dark .detail-hero__copy > p:not(.kicker), .theme-dark .page-intro > p:not(.kicker), .theme-dark .creator-hub__intro > p:not(.kicker) { color: #c0c9bd; }.theme-dark .hero__ticker { background: rgba(29,42,33,.75); box-shadow: 0 8px 18px rgba(0,0,0,.18); }.theme-dark .hero__ticker b { color: #e5eee1; }
.theme-dark .recipe-controls, .theme-dark .search-empty { background: #1c271f; border-color: #39483c; }.theme-dark .search-field input, .theme-dark .chip, .theme-dark .feed-tabs .chip { background: #202c23; border-color: #3b4a3d; color: #e6ede3; }.theme-dark .chip.is-active, .theme-dark .feed-tabs .chip.is-active { background: #315340; border-color: #6e986d; color: #fffdf4; }.theme-dark .recipe-card, .theme-dark .cookbook-card, .theme-dark .knowledge-card, .theme-dark .quiz-card, .theme-dark .creator-menu, .theme-dark .auth-modal { background: #1a241d; border-color: #35483a; box-shadow: 0 12px 28px rgba(0,0,0,.2); }.theme-dark .recipe-card__body > p, .theme-dark .cookbook-card > div > p:not(.kicker), .theme-dark .knowledge-card > div > p, .theme-dark .knowledge-card details p, .theme-dark .quiz-fact { color: #b6c1b4; }.theme-dark .social-actions { border-top-color: #354239; }.theme-dark .social-button { color: #c1cdbf; }.theme-dark .social-button:hover { background: #2b3c2f; border-color: #46624d; }.theme-dark .social-actions--compact .social-views { background: #202d23; border-color: #394b3d; color: #aab7a8; }.theme-dark .social-button--save { background: #2a442f; border-color: #52785a; color: #ddf0d9; }.theme-dark .recipe-card__meta, .theme-dark .author-line small, .theme-dark .eyebrow { color: #adb9aa; }
.theme-dark .recipe-shortcuts, .theme-dark .community-spotlight, .theme-dark .site-footer__line, .theme-dark .cookbook-showcase, .theme-dark .learning-articles { border-color: #334337; }.theme-dark .recipe-shortcuts__links > a { background: #1c271f; border-color: #37483a; color: #f0f3ec; }.theme-dark .recipe-shortcuts__links > a:hover { background: #243326; border-color: #658666; }.theme-dark .spotlight-card { box-shadow: 0 14px 28px rgba(0,0,0,.23); }.theme-dark .site-footer { color: #98a697; }
.theme-dark .ingredients-card { background: #202c23; border-color: #3a4d3c; box-shadow: none; }.theme-dark .servings-control button { background: #2a382c; color: #dcebd8; }.theme-dark .ingredient-list { border-color: #3e4f40; }.theme-dark .ingredient-list li, .theme-dark .method__header, .theme-dark .step-list li { border-color: #37483a; }.theme-dark .step-list p { color: #d2d9cf; }.theme-dark .cook-note { background: #39331f; color: #f1dda0; }.theme-dark .cook-note strong { color: #fff0bd; }
.theme-dark .recipe-tips { border-color: #37483a; }.theme-dark .recipe-tip-card { background: #202d24; border-color: #3a4d3c; box-shadow: none; }.theme-dark .recipe-tip-card .kicker { color: #a8c5a5; }.theme-dark .recipe-tip-card h4 { color: #e5f0df; }.theme-dark .recipe-tip-card > p:last-child { color: #c5d2c4; }.theme-dark .recipe-tip-card__number { color: #8fac8d; }
.theme-dark .learning-hero { background: linear-gradient(122deg, #1e3025, #3c321d 72%); border-color: #405842; }.theme-dark .learning-hero::before { background: rgba(255,255,255,.045); }.theme-dark .learning-hero > div > p:not(.kicker) { color: #c6d1c3; }.theme-dark .quiz-card--active { background: #1b271f; border-color: #527253; box-shadow: 0 22px 45px rgba(0,0,0,.31); }.theme-dark .quiz-card--active::before { background: linear-gradient(90deg, #426447, #735d2e); }.theme-dark .quiz-card--active h3, .theme-dark .quiz-options button { border-color: #3b4d3e; color: #e6ede2; }.theme-dark .quiz-options button { background: #222f25; }.theme-dark .quiz-options button:hover { background: #2d4030; border-color: #719775; }.theme-dark .quiz-options b { background: #394b3c; }.theme-dark .quiz-wheel__side { background: #1c271f; border-color: #35483a; }.theme-dark .quiz-wheel__side::after { background: linear-gradient(135deg, rgba(255,255,255,.04), transparent); }.theme-dark .quiz-success { background: #213c28; color: #d7f0d4; }.theme-dark .quiz-success p { color: #bad5b8; }
.theme-dark .form-section, .theme-dark .form-footer, .theme-dark .admin-toolbox, .theme-dark .comment-form, .theme-dark .profile-level { background-color: #1c271f; border-color: #3b4d3d; }.theme-dark input, .theme-dark textarea, .theme-dark select { background: #202c23; border-color: #405143; color: #edf2e9; }.theme-dark .field > span, .theme-dark .repeat-row label { color: #d8e1d5; }.theme-dark .creator-choice--recipe { background: linear-gradient(135deg, #294332, #4b654d); }.theme-dark .creator-choice--book { background: linear-gradient(135deg, #543b34, #78594a); }.theme-dark .creator-choice { border-color: #56685a; }.theme-dark .profile-kitchen-note, .theme-dark .profile-hero { border-color: #3a4a3b; }
@media (max-width: 760px) { .theme-toggle { height: 28px; width: 45px; }.theme-toggle__thumb { height: 22px; width: 22px; }.theme-toggle.is-active .theme-toggle__thumb { transform: translateX(17px); } }

/* Knowledge is arranged by topic, with a concise jump index instead of one
   undifferentiated wall of cards. */
.knowledge-index { border-bottom: 1px solid #dce3d8; display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 38px; padding-bottom: 20px; }.knowledge-index a { align-items: center; background: #f0f5ed; border: 1px solid #d9e4d6; border-radius: 100px; color: var(--leaf); display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; padding: 7px 10px; text-decoration: none; transition: background .16s ease, color .16s ease, transform .16s ease; }.knowledge-index a:hover, .knowledge-index a:focus-visible { background: var(--leaf); color: #fff; outline: none; transform: translateY(-1px); }.knowledge-index span { align-items: center; background: rgba(255,255,255,.6); border-radius: 50%; display: inline-grid; font-size: 9px; height: 17px; justify-content: center; min-width: 17px; }.knowledge-index a:hover span { color: var(--leaf); }
.knowledge-groups { display: grid; gap: 44px; }.knowledge-group { scroll-margin-top: 178px; }.knowledge-group__heading { align-items: flex-end; border-bottom: 1px solid #dce3d8; display: flex; justify-content: space-between; margin-bottom: 17px; padding-bottom: 12px; }.knowledge-group__heading .kicker { margin: 0 0 4px; }.knowledge-group__heading h3 { font: 600 31px/.98 var(--serif); letter-spacing: -.035em; margin: 0; }.knowledge-group__heading > span { color: var(--muted); font-size: 10px; font-weight: 750; }.knowledge-grid--grouped { gap: 17px; }.knowledge-grid--grouped .knowledge-card { display: grid; grid-template-rows: 150px minmax(0, 1fr); }.knowledge-grid--grouped .knowledge-card > img { height: 150px; }.knowledge-grid--grouped .knowledge-card > div { display: flex; flex-direction: column; min-height: 0; padding: 16px; }.knowledge-grid--grouped .knowledge-card h2 { font-size: 27px; }.knowledge-grid--grouped .knowledge-card details { margin-top: auto; }.knowledge-grid--grouped .knowledge-card > div > p { margin-bottom: 14px; }
.theme-dark .knowledge-index, .theme-dark .knowledge-group__heading { border-color: #37483a; }.theme-dark .knowledge-index a { background: #202d23; border-color: #405443; color: #dcead9; }.theme-dark .knowledge-index a:hover { background: #4b734f; color: #fff; }.theme-dark .knowledge-index span { background: rgba(255,255,255,.12); }.theme-dark .knowledge-index a:hover span { color: #fff; }
@media (max-width: 980px) { .knowledge-grid--grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .knowledge-index { gap: 6px; margin-bottom: 30px; }.knowledge-index a { font-size: 10px; padding: 6px 8px; }.knowledge-groups { gap: 34px; }.knowledge-group { scroll-margin-top: 164px; }.knowledge-group__heading h3 { font-size: 27px; }.knowledge-grid--grouped { grid-template-columns: 1fr; }.knowledge-grid--grouped .knowledge-card { grid-template-rows: 142px minmax(0,1fr); }.knowledge-grid--grouped .knowledge-card > img { height: 142px; } }

/* Type scale: small information remains secondary, never microscopic. */
:root {
  --type-meta: 12px;
  --type-label: 13px;
  --type-support: 14px;
}
.kicker, .eyebrow { font-size: var(--type-meta); letter-spacing: .115em; line-height: 1.3; }
.nav-link, .site-header .primary-nav .nav-link { font-size: var(--type-label); line-height: 1.25; }
.global-search input { font-size: var(--type-support); line-height: 1.3; }
.header-points { font-size: var(--type-meta); }.header-points b { font-size: var(--type-label); }.header-points small { font-size: 11px; }
.header-learning, .header-create, .header-create-toggle { font-size: var(--type-label); }
.recipe-nav__menu b, .creator-menu b { font-size: var(--type-label); }.recipe-nav__menu small, .creator-menu small { font-size: var(--type-meta); line-height: 1.45; }
.recipe-card__category, .recipe-card__body .eyebrow { font-size: 11px; }.recipe-card p { font-size: var(--type-support); line-height: 1.55; }.recipe-card__meta { font-size: var(--type-meta); }.author-line b { font-size: var(--type-label); }.author-line small { font-size: var(--type-meta); }
.social-button > span, .social-actions--compact .social-views { font-size: var(--type-meta); }
.recipe-card__signal { font-size: 10px; letter-spacing: .055em; padding: 5px 8px; }
.chip, .comment-count, .profile-numbers, .profile-total-views, .editorial-note { font-size: var(--type-meta); }
.profile-quiet-stats { font-size: var(--type-meta); }.profile-kitchen-note b { font-size: 11px; }.profile-kitchen-note small { font-size: var(--type-meta); }
.field > span, .ingredient-table__labels { font-size: var(--type-meta); }.field small, .tags-field > small, .form-section__title p, .form-footer p { font-size: var(--type-meta); line-height: 1.45; }.repeat-row input, .repeat-row textarea, .ingredient-name { font-size: var(--type-support); }.tag-suggestions button, .add-row-button { font-size: var(--type-meta); }
.site-footer, .site-footer__line { font-size: var(--type-meta); line-height: 1.45; }
.recipe-shortcuts__links b { font-size: var(--type-label); }.recipe-shortcuts__links small { font-size: 11px; line-height: 1.35; }.recipe-shortcuts--compact .recipe-shortcuts__links > a { padding: 9px; }
.community-spotlight__heading > p:not(.kicker) { font-size: var(--type-support); }.spotlight-card p { font-size: 11px; }.spotlight-card span { font-size: var(--type-meta); }
.points-card p, .points-card em { font-size: var(--type-meta); }.points-card small { font-size: var(--type-label); }
.learning-count { font-size: var(--type-meta); }.learning-count b { font-size: var(--type-label); }.learning-count span { font-size: 11px; }
.quiz-fact { font-size: var(--type-label); line-height: 1.6; }.quiz-options button, .quiz-card--active .quiz-options button { font-size: var(--type-label); line-height: 1.35; }.quiz-options b { font-size: 11px; }.quiz-success { font-size: var(--type-label); }.quiz-wheel__side .kicker { font-size: 10px; }.quiz-wheel__side > p:not(.kicker), .quiz-wheel__hint { font-size: var(--type-meta); }
.knowledge-index a { font-size: var(--type-meta); }.knowledge-index span, .knowledge-group__heading > span { font-size: 11px; }

@media (max-width: 600px) {
  .site-header .primary-nav .nav-link { font-size: var(--type-meta); }
  .header-points b { font-size: var(--type-meta); }
  .knowledge-index a { font-size: 11px; }
  .quiz-wheel__hint { font-size: 11px; }
}

/* Product pass: cards now lead to useful next steps, not negative signals. */
.home-selection__intro { color: var(--muted); font-size: var(--type-support); line-height: 1.6; margin: -19px 0 25px; max-width: 580px; }
.home-community-empty { align-items: center; background: linear-gradient(120deg,#f7f1e5,#edf3e9); border: 1px solid #dfe0d3; border-radius: 24px; display: flex; gap: 26px; justify-content: space-between; margin-bottom: 42px; margin-top: 42px; padding: 28px 32px; }
.home-community-empty h2 { font: 700 clamp(32px,4vw,48px)/.95 var(--display); margin: 4px 0 10px; }
.home-community-empty h2 em { color: var(--coral); font-weight: 500; }
.home-community-empty p:last-child { color: var(--muted); margin: 0; max-width: 650px; }
.theme-dark .home-community-empty { background: linear-gradient(120deg,#29281f,#1b2a21); border-color: #3b4b40; }
.social-actions--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.social-actions--compact .social-button--save { grid-column: auto; grid-row: auto; margin-left: 0; }
.social-button--shopping { background: #f3f6ee; border-color: #dce7d9; color: var(--leaf); }
.social-button--shopping:hover { background: #e4efe0; border-color: #afcaaa; color: var(--leaf); }
.social-actions:not(.social-actions--compact) .social-button--shopping { padding-left: 13px; padding-right: 13px; }
.points-package { display: none; }

/* A single shopping list turns saved inspiration into a practical cooking plan. */
.shopping-page { padding-bottom: 112px; padding-top: 58px; }
.shopping-page__intro { align-items: end; border-bottom: 1px solid #d8ded5; display: flex; gap: 32px; justify-content: space-between; padding-bottom: 38px; }
.shopping-page__intro > div:first-child { max-width: 620px; }.shopping-page__intro h1 { font-size: clamp(54px, 6.7vw, 88px); line-height: .88; margin: 0 0 17px; }.shopping-page__intro > div > p:not(.kicker) { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0; }
.shopping-page__count { align-items: center; background: #244936; color: #fff; display: grid; grid-template-columns: auto auto; column-gap: 10px; min-width: 165px; padding: 17px 19px; }.shopping-page__count > span { align-items: center; background: #e9bc57; border-radius: 50%; color: #4e3d14; display: grid; grid-row: 1 / span 2; height: 39px; justify-content: center; width: 39px; }.shopping-page__count > span svg { font-size: 19px; }.shopping-page__count b { font: 700 29px/1 var(--serif); }.shopping-page__count small { color: #dbe7d8; font-size: 12px; }
.shopping-panel { margin: 39px auto 0; max-width: 820px; }.shopping-add { align-items: center; background: #edf3ea; border: 1px solid #d7e2d3; display: grid; gap: 9px; grid-template-columns: minmax(0,1fr) 108px 108px auto; padding: 10px; }.shopping-add input { background: #fffefa; border: 1px solid #d2ddd0; color: var(--ink); font: 650 14px/1.3 var(--sans); min-height: 44px; outline: none; padding: 0 12px; width: 100%; }.shopping-add input:focus { border-color: #7fa47a; box-shadow: 0 0 0 3px rgba(89,133,83,.12); }.shopping-add .button { min-height: 44px; padding: 10px 15px; }
.shopping-list { background: var(--surface); border: 1px solid #e0e4db; box-shadow: 0 12px 26px rgba(42,57,43,.06); margin-top: 22px; }.shopping-list__heading { align-items: center; border-bottom: 1px solid #e0e4db; display: flex; justify-content: space-between; padding: 18px 20px; }.shopping-list__heading b { font-size: 15px; }.shopping-list__heading span { color: var(--muted); font-size: 12px; }.shopping-list ul, .shopping-done ul { list-style: none; margin: 0; padding: 0; }
.shopping-item { align-items: center; border-bottom: 1px solid #ebede8; display: flex; gap: 12px; justify-content: space-between; padding: 0 14px 0 20px; }.shopping-item:last-child { border-bottom: 0; }.shopping-item label { align-items: center; cursor: pointer; display: flex; flex: 1; gap: 12px; min-height: 65px; }.shopping-item input { height: 1px; opacity: 0; position: absolute; width: 1px; }.shopping-item__check { align-items: center; border: 1.5px solid #9aab98; border-radius: 50%; color: transparent; display: grid; flex: 0 0 auto; height: 22px; justify-content: center; transition: background .16s ease, border-color .16s ease, color .16s ease; width: 22px; }.shopping-item__check svg { font-size: 14px; }.shopping-item b { display: block; font-size: 14px; }.shopping-item small { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }.shopping-item > button { align-items: center; background: transparent; border: 0; color: #94a092; display: grid; height: 32px; justify-content: center; width: 32px; }.shopping-item > button:hover { color: var(--coral); }.shopping-item > button svg { font-size: 16px; }.shopping-item.is-checked b, .shopping-item.is-checked small { color: #99a297; text-decoration: line-through; }.shopping-item.is-checked .shopping-item__check { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.shopping-empty { align-items: center; color: var(--muted); display: grid; justify-items: center; padding: 53px 24px; text-align: center; }.shopping-empty > svg { color: var(--leaf); font-size: 28px; margin-bottom: 11px; }.shopping-empty b { color: var(--ink); font: 600 27px/1 var(--serif); }.shopping-empty p { font-size: 14px; line-height: 1.55; margin: 9px 0 15px; max-width: 310px; }.shopping-done { background: #f4f7f2; border: 1px solid #e0e7dc; margin-top: 14px; }.shopping-done summary { align-items: center; color: var(--leaf); cursor: pointer; display: flex; font-size: 13px; font-weight: 800; justify-content: space-between; list-style: none; padding: 14px 19px; }.shopping-done summary::-webkit-details-marker { display: none; }.shopping-done summary svg { font-size: 16px; transition: transform .18s ease; }.shopping-done[open] summary svg { transform: rotate(90deg); }.shopping-done .shopping-item { background: rgba(255,255,255,.45); }
.theme-dark .shopping-page__intro, .theme-dark .shopping-list__heading { border-color: #37483a; }.theme-dark .shopping-add { background: #202d23; border-color: #3a4d3e; }.theme-dark .shopping-add input { background: #1a251e; border-color: #405443; color: #eef3e9; }.theme-dark .shopping-list { background: #1a241d; border-color: #35483a; box-shadow: 0 12px 26px rgba(0,0,0,.22); }.theme-dark .shopping-item { border-color: #303e33; }.theme-dark .shopping-item__check { border-color: #708870; }.theme-dark .shopping-done { background: #1d2a21; border-color: #394c3d; }.theme-dark .shopping-done .shopping-item { background: rgba(255,255,255,.025); }.theme-dark .social-button--shopping { background: #294331; border-color: #4d7052; color: #d9efd5; }
@media (max-width: 700px) { .shopping-page { padding-top: 34px; }.shopping-page__intro { align-items: flex-start; flex-direction: column; gap: 23px; padding-bottom: 28px; }.shopping-page__count { min-width: 0; width: 100%; }.shopping-add { grid-template-columns: 1fr 1fr; }.shopping-add label:first-child { grid-column: 1 / -1; }.shopping-add .button { grid-column: 1 / -1; width: 100%; }.home-selection__intro { margin-top: -13px; }.home-community-empty { align-items: stretch; flex-direction: column; margin-bottom: 28px; margin-top: 28px; padding: 22px 18px; }.home-community-empty .button { justify-content: center; width: 100%; } }

/* The list stays one short click away and reads like a small plan, not a form. */
.header-shopping { align-items: center; background: #edf4ea; border: 1px solid #cfe0cb; border-radius: 100px; color: var(--leaf); display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 800; gap: 6px; min-height: 32px; padding: 4px 6px 4px 9px; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; white-space: nowrap; }.header-shopping svg { font-size: 16px; }.header-shopping b { align-items: center; background: #fffef9; border-radius: 50%; color: #426842; display: inline-grid; font-size: 10px; height: 20px; justify-content: center; min-width: 20px; padding: 0 4px; }.header-shopping:hover, .header-shopping:focus-visible { background: #dfeeda; border-color: #9dbd99; outline: none; transform: translateY(-1px); }.header-shopping.is-active { background: var(--leaf); border-color: var(--leaf); color: #fff; }.header-shopping.is-active b { background: #fff3c9; color: #5f4915; }
.shopping-page__back { color: var(--leaf); display: inline-flex; font-size: 13px; font-weight: 800; margin-bottom: 25px; text-decoration: none; }.shopping-page__back:hover, .shopping-page__back:focus-visible { color: var(--coral); outline: none; text-decoration: underline; text-underline-offset: 4px; }
.shopping-page__routes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.shopping-page__routes a { background: #f0f5ed; border: 1px solid #d8e5d5; border-radius: 100px; color: var(--leaf); font-size: 12px; font-weight: 800; padding: 7px 10px; text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease; }.shopping-page__routes a:hover, .shopping-page__routes a:focus-visible { background: var(--leaf); border-color: var(--leaf); color: #fff; outline: none; }
.shopping-page__count i { color: #d9e6d5; font-size: 11px; font-style: normal; grid-column: 1 / -1; margin-top: 2px; }.shopping-page__count:has(i) { padding-bottom: 14px; }
.shopping-tools { align-items: center; border-bottom: 1px solid #dfe6dc; display: flex; gap: 16px; justify-content: space-between; margin: 18px 0 0; padding: 0 2px 15px; }.shopping-tools p { display: grid; gap: 2px; margin: 0; }.shopping-tools b { color: var(--leaf); font-size: 13px; }.shopping-tools span { color: var(--muted); font-size: 12px; }.shopping-tools > div { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }.shopping-tools .text-button { font-size: 12px; white-space: nowrap; }.text-button--muted { color: #839081; }.text-button--muted:hover { color: var(--coral); }
.theme-dark .header-shopping { background: #213b29; border-color: #45654b; color: #d8eed4; }.theme-dark .header-shopping b { background: #314a35; color: #dbeed6; }.theme-dark .header-shopping:hover { background: #2c5134; border-color: #68986c; }.theme-dark .header-shopping.is-active { background: #6e986d; border-color: #6e986d; color: #102214; }.theme-dark .header-shopping.is-active b { background: #ffe6a0; color: #563e0e; }.theme-dark .shopping-page__routes a { background: #202d23; border-color: #405443; color: #dcead9; }.theme-dark .shopping-page__routes a:hover { background: #4b734f; border-color: #4b734f; color: #fff; }.theme-dark .shopping-tools { border-color: #37483a; }.theme-dark .shopping-tools b { color: #b7d9b4; }.theme-dark .text-button--muted { color: #9fad9e; }
@media (max-width: 760px) { .header-shopping { gap: 4px; padding-left: 7px; }.header-shopping span { display: none; }.shopping-tools { align-items: flex-start; flex-direction: column; }.shopping-tools > div { width: 100%; }.shopping-tools .text-button { padding-left: 0; } }
@media (max-width: 520px) { .shopping-page__back { margin-bottom: 19px; }.shopping-page__routes { margin-top: 17px; }.shopping-tools > div { align-items: flex-start; flex-direction: column; gap: 5px; }.header-shopping { min-width: 32px; justify-content: center; padding: 5px; }.header-shopping b { font-size: 9px; height: 18px; min-width: 18px; } }

.shopping-export-actions { align-items: center; background: linear-gradient(115deg, #f6f1e4, #edf4ea); border: 1px solid #dde6d7; display: flex; gap: 20px; justify-content: space-between; margin-top: 15px; padding: 16px 18px; }.shopping-export-actions .kicker { margin: 0 0 4px; }.shopping-export-actions b { color: var(--ink); display: block; font: 700 22px/1 var(--serif); letter-spacing: -.02em; }.shopping-export-actions small { color: var(--muted); display: block; font-size: 12px; margin-top: 5px; }.shopping-export-actions > div:last-child { display: flex; flex: 0 0 auto; gap: 8px; }.shopping-export-actions .button { align-items: center; display: inline-flex; gap: 7px; min-height: 38px; padding: 9px 12px; }.shopping-export-actions svg { font-size: 16px; }.theme-dark .shopping-export-actions { background: linear-gradient(115deg, #2a2c20, #1d2d21); border-color: #3d4e3e; }.theme-dark .shopping-export-actions b { color: #f0f3e9; }
@media (max-width: 620px) { .shopping-export-actions { align-items: flex-start; flex-direction: column; gap: 14px; }.shopping-export-actions > div:last-child { width: 100%; }.shopping-export-actions .button { flex: 1; justify-content: center; } }

/* styles/progression.css */
/* The grocery list is deliberately stable: checked items stay on the same
   sheet instead of disappearing into a collapsed secondary panel. */
.shopping-page--planner { padding-top: 46px; }.shopping-page__intro--planner { align-items: flex-end; border-bottom: 0; padding-bottom: 30px; }.shopping-page__intro--planner > div:first-child { max-width: 590px; }.shopping-summary { background: linear-gradient(145deg, #244936, #315d45); box-shadow: 0 18px 32px rgba(35,72,53,.14); color: #fff; display: grid; gap: 16px; min-width: 238px; padding: 19px; }.shopping-summary > div:first-child { align-items: center; display: flex; gap: 11px; }.shopping-summary > div:first-child > span { align-items: center; background: #f4c865; border-radius: 50%; color: #554216; display: grid; height: 39px; justify-content: center; width: 39px; }.shopping-summary > div:first-child > span svg { font-size: 19px; }.shopping-summary p { display: grid; gap: 2px; margin: 0; }.shopping-summary p b { font: 700 29px/.88 var(--serif); }.shopping-summary p small { color: #d7e8d8; font-size: 12px; }.shopping-progress { display: grid; gap: 7px; }.shopping-progress > span { background: rgba(255,255,255,.18); display: block; height: 5px; overflow: hidden; }.shopping-progress i { background: #f4c865; display: block; height: 100%; transition: width .24s ease; }.shopping-progress small { color: #d7e8d8; font-size: 11px; }.shopping-panel--planner { margin-top: 25px; max-width: 860px; }.shopping-panel--planner .shopping-add { background: #f4f7f0; border-color: #dce6d9; box-shadow: 0 10px 22px rgba(42,57,43,.045); }.shopping-panel--planner .shopping-add input { background: #fffefa; }.shopping-list__toolbar { align-items: center; display: flex; gap: 18px; justify-content: space-between; padding: 20px 2px 14px; }.shopping-list__toolbar > div { display: grid; gap: 4px; }.shopping-list__toolbar b { color: var(--ink); font: 700 24px/1 var(--serif); letter-spacing: -.025em; }.shopping-list__toolbar small { color: var(--muted); font-size: 12px; }.shopping-list--planner { border: 1px solid #dfe6dc; box-shadow: 0 15px 34px rgba(42,57,43,.075); margin-top: 0; overflow: hidden; }.shopping-list--planner .shopping-list__heading { background: #fafbf7; padding: 17px 20px; }.shopping-list--planner .shopping-list__heading > div { display: grid; gap: 3px; }.shopping-list--planner .shopping-list__heading b { color: var(--ink); font: 700 24px/1 var(--serif); letter-spacing: -.02em; }.shopping-list--planner .shopping-list__heading span { font-size: 12px; }.shopping-list__progress-number { align-items: center; background: #e7f0e4; border-radius: 50%; color: var(--leaf); display: inline-grid; font-size: 12px !important; font-weight: 850; height: 37px; justify-content: center; min-width: 37px; }.shopping-list--planner .shopping-item { background: var(--surface); min-height: 72px; padding-left: 20px; transition: background .18s ease; }.shopping-list--planner .shopping-item:hover { background: #fbfcf8; }.shopping-list--planner .shopping-item label { min-height: 72px; }.shopping-list--planner .shopping-item__check { border-color: #8ea58d; height: 27px; width: 27px; }.shopping-list--planner .shopping-item__check svg { font-size: 16px; }.shopping-list--planner .shopping-item b { font-size: 15px; }.shopping-list--planner .shopping-item small { font-size: 12px; }.shopping-list--planner .shopping-item > button { border-radius: 50%; transition: background .16s ease, color .16s ease; }.shopping-list--planner .shopping-item > button:hover { background: #fff0eb; }.shopping-list--planner .shopping-item.is-checked { background: #f4f8f2; }.shopping-list--planner .shopping-item.is-checked b, .shopping-list--planner .shopping-item.is-checked small { color: #849482; }.shopping-list__divider { align-items: center; background: #edf3eb; border-bottom: 1px solid #dfe8dc; border-top: 1px solid #dfe8dc; color: var(--leaf); display: flex; font-size: 12px; font-weight: 850; justify-content: space-between; letter-spacing: .04em; padding: 10px 20px; text-transform: uppercase; }.shopping-list__divider small { color: #849381; font-size: 10px; letter-spacing: 0; text-transform: none; }.shopping-list--planner .shopping-empty { background: var(--surface); }.shopping-page--planner .shopping-export-actions { margin-top: 16px; }
.theme-dark .shopping-summary { background: linear-gradient(145deg, #284631, #31523a); box-shadow: 0 18px 32px rgba(0,0,0,.24); }.theme-dark .shopping-panel--planner .shopping-add { background: #1d2a20; border-color: #3a4c3c; box-shadow: none; }.theme-dark .shopping-panel--planner .shopping-add input { background: #18231b; }.theme-dark .shopping-list__toolbar b, .theme-dark .shopping-list--planner .shopping-list__heading b { color: #eff3e9; }.theme-dark .shopping-list--planner { border-color: #36493a; box-shadow: 0 15px 34px rgba(0,0,0,.18); }.theme-dark .shopping-list--planner .shopping-list__heading { background: #1c271f; border-color: #35483a; }.theme-dark .shopping-list__progress-number { background: #294631; color: #d7edd2; }.theme-dark .shopping-list--planner .shopping-item { background: #19231c; }.theme-dark .shopping-list--planner .shopping-item:hover { background: #202e23; }.theme-dark .shopping-list--planner .shopping-item.is-checked { background: #1d2d21; }.theme-dark .shopping-list__divider { background: #243527; border-color: #3a4d3c; color: #c4dfbf; }.theme-dark .shopping-list__divider small { color: #a9bda6; }
@media (max-width: 700px) { .shopping-page--planner { padding-top: 34px; }.shopping-page__intro--planner { align-items: stretch; gap: 20px; }.shopping-page__intro--planner > div:first-child { min-width: 0; width: 100%; }.shopping-summary { min-width: 0; width: 100%; }.shopping-list__toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }.shopping-list--planner .shopping-list__heading { padding: 16px; }.shopping-list--planner .shopping-item { padding-left: 16px; }.shopping-list__divider { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 520px) { .shopping-page__intro--planner h1 { font-size: clamp(2rem, 12vw, 3.375rem); hyphens: auto; line-height: 1.04; overflow-wrap: break-word; } }
.shopping-list__toolbar > .shopping-list__toolbar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; }.shopping-list__toolbar-actions .text-button { font-size: 12px; white-space: nowrap; }.theme-dark .shopping-list__toolbar-actions .text-button--danger { color: #ef9b89; }

/* Header actions are grouped by intent: settings and shopping, account, then
   the creation call-to-action as the clear right-hand endpoint. */
.header-actions--grouped { gap: 11px; }.header-utility-actions, .header-account-actions, .header-profile-end { align-items: center; display: flex; gap: 7px; }.header-utility-actions { border-right: 1px solid rgba(109, 133, 102, .2); padding-right: 11px; }.header-account-actions { border-right: 1px solid rgba(109, 133, 102, .2); padding-right: 11px; }.header-actions--grouped .header-shopping { order: 2; }.header-actions--grouped .theme-toggle { order: 1; }.header-account-actions .header-bell { border-radius: 50%; height: 32px; width: 32px; }.header-actions--grouped .header-create-group { margin-left: 0; }.header-profile-end .profile-chip { margin-left: -3px; }.theme-dark .header-utility-actions, .theme-dark .header-account-actions { border-color: rgba(190, 221, 183, .18); }
@media (max-width: 760px) { .header-actions--grouped { gap: 6px; }.header-utility-actions, .header-account-actions, .header-profile-end { gap: 5px; }.header-utility-actions, .header-account-actions { border-right: 0; padding-right: 0; }.header-actions--grouped .header-create-group { margin-left: 0; } }
@media (max-width: 520px) { .header-actions--grouped .header-account-actions { display: none; }.header-actions--grouped .header-utility-actions { gap: 4px; }.header-actions--grouped .profile-chip { padding-left: 3px; padding-right: 3px; } }

/* Community momentum should make the people behind recipes feel worth
   following, not reduce their work to a row of neutral statistics. */
.community-spotlight--aspirational { border-top: 0; padding-bottom: 82px; padding-top: 36px; }.community-spotlight__heading--aspirational { align-items: end; display: flex; gap: 42px; justify-content: space-between; }.community-spotlight__heading--aspirational > p:not(.kicker) { font-size: 15px; margin: 0 0 5px; max-width: 400px; }.spotlight-stage { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.48fr) minmax(285px, .72fr); }.spotlight-feature { background: #1e392b; color: #fff; display: flex; min-height: 465px; overflow: hidden; padding: 28px; position: relative; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }.spotlight-feature:hover, .spotlight-feature:focus-visible { box-shadow: 0 24px 46px rgba(34,55,39,.23); outline: none; transform: translateY(-4px); }.spotlight-feature__image { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .5s cubic-bezier(.2,.72,.22,1); width: 100%; }.spotlight-feature:hover .spotlight-feature__image { transform: scale(1.045); }.spotlight-feature__veil { background: linear-gradient(90deg, rgba(18,35,26,.95) 0%, rgba(23,41,30,.72) 48%, rgba(23,41,30,.08) 100%), linear-gradient(0deg, rgba(13,28,20,.68), transparent 48%); inset: 0; position: absolute; }.spotlight-feature__content { display: flex; flex: 1; flex-direction: column; justify-content: space-between; min-width: 0; position: relative; z-index: 1; }.spotlight-feature__eyebrow { align-items: center; display: flex; gap: 8px; }.spotlight-feature__eyebrow > span { align-items: center; background: #f3c766; border-radius: 50%; color: #553f12; display: grid; height: 31px; justify-content: center; width: 31px; }.spotlight-feature__eyebrow svg { font-size: 15px; }.spotlight-feature__eyebrow p { color: #f6dfa2; font-size: 11px; font-weight: 850; letter-spacing: .1em; margin: 0; text-transform: uppercase; }.spotlight-feature__copy { margin-top: auto; max-width: 470px; padding-top: 60px; }.spotlight-feature__copy h3 { color: #fffdf4; font: 700 clamp(42px,4.35vw,65px)/.89 var(--serif); letter-spacing: -.045em; margin: 0 0 15px; text-wrap: balance; }.spotlight-feature__copy p { color: rgba(245,249,240,.87); font-size: 14px; line-height: 1.57; margin: 0; max-width: 430px; }.spotlight-feature__footer { align-items: end; display: flex; gap: 18px; justify-content: space-between; margin-top: 27px; }.spotlight-feature__author { align-items: center; display: flex; gap: 9px; }.spotlight-feature__author .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.75); height: 33px; width: 33px; }.spotlight-feature__author > span:last-child { display: grid; gap: 2px; }.spotlight-feature__author b { color: #fffdf4; font-size: 12px; }.spotlight-feature__author small { color: rgba(238,246,234,.72); font-size: 11px; }.spotlight-feature__go { align-items: center; color: #fff5ce; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 850; gap: 7px; }.spotlight-feature__go svg { font-size: 17px; transition: transform .2s ease; }.spotlight-feature:hover .spotlight-feature__go svg { transform: translateX(3px); }.spotlight-feature__proof { align-items: center; background: rgba(15,32,23,.68); backdrop-filter: blur(10px); display: flex; flex-wrap: wrap; gap: 6px; max-width: 245px; padding: 8px; position: absolute; right: 13px; top: 13px; z-index: 2; }.spotlight-feature__proof span { align-items: center; color: #f2f7ed; display: inline-flex; font-size: 10px; font-weight: 750; gap: 4px; white-space: nowrap; }.spotlight-feature__proof svg { color: #f3c766; font-size: 13px; }.spotlight-momentum { background: #f1f5ed; display: flex; flex-direction: column; min-height: 465px; padding: 25px; }.spotlight-momentum__intro .kicker { margin: 0 0 10px; }.spotlight-momentum__intro h3 { color: var(--ink); font: 700 38px/.9 var(--serif); letter-spacing: -.04em; margin: 0 0 13px; }.spotlight-momentum__intro h3 em { color: var(--coral-dark); }.spotlight-momentum__intro > p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }.spotlight-rising { align-items: stretch; background: var(--surface); color: var(--ink); display: grid; gap: 12px; grid-template-columns: 81px minmax(0,1fr) auto; margin-top: 25px; min-height: 101px; padding: 9px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }.spotlight-rising:hover, .spotlight-rising:focus-visible { box-shadow: 0 14px 26px rgba(35,57,42,.13); outline: none; transform: translateY(-2px); }.spotlight-rising > img { height: 83px; object-fit: cover; width: 81px; }.spotlight-rising > div { align-self: center; min-width: 0; }.spotlight-rising > div > span { color: var(--coral-dark); display: block; font-size: 9px; font-weight: 850; letter-spacing: .08em; margin-bottom: 5px; text-transform: uppercase; }.spotlight-rising h4 { font: 700 22px/.94 var(--serif); margin: 0 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.spotlight-rising p { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 6px; margin: 0; }.spotlight-rising p .avatar { height: 20px; width: 20px; }.spotlight-rising > svg { align-self: center; color: var(--coral); font-size: 17px; }.spotlight-momentum__signal { align-items: center; border-top: 1px solid #dce5d8; display: flex; gap: 9px; margin-top: auto; padding-top: 16px; }.spotlight-momentum__signal > span { align-items: center; background: #dfeee0; border-radius: 50%; color: var(--leaf); display: grid; height: 31px; justify-content: center; width: 31px; }.spotlight-momentum__signal svg { font-size: 15px; }.spotlight-momentum__signal p { display: grid; gap: 2px; margin: 0; }.spotlight-momentum__signal b { color: var(--ink); font-size: 11px; }.spotlight-momentum__signal small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.theme-dark .spotlight-momentum { background: #1d2a21; }.theme-dark .spotlight-momentum__intro h3, .theme-dark .spotlight-rising { color: #f2f5eb; }.theme-dark .spotlight-rising { background: #18231c; }.theme-dark .spotlight-momentum__signal { border-color: #394b3c; }.theme-dark .spotlight-momentum__signal > span { background: #294631; color: #cfebca; }.theme-dark .spotlight-momentum__signal b { color: #f0f4ea; }
@media (max-width: 860px) { .community-spotlight--aspirational { padding-bottom: 64px; }.community-spotlight__heading--aspirational { align-items: flex-start; flex-direction: column; gap: 12px; }.spotlight-stage { grid-template-columns: 1fr; }.spotlight-momentum { min-height: 0; }.spotlight-momentum__signal { margin-top: 24px; } }
@media (max-width: 600px) { .community-spotlight--aspirational { margin-left: 0; margin-right: 0; padding-top: 25px; }.spotlight-feature { min-height: 460px; padding: 20px; }.spotlight-feature__veil { background: linear-gradient(0deg, rgba(16,33,24,.96) 0%, rgba(18,35,26,.35) 100%); }.spotlight-feature__copy { padding-top: 108px; }.spotlight-feature__copy h3 { font-size: 45px; }.spotlight-feature__proof { left: 11px; max-width: calc(100% - 22px); right: auto; top: 11px; }.spotlight-feature__footer { align-items: flex-start; flex-direction: column; gap: 15px; }.spotlight-momentum { padding: 21px; }.spotlight-momentum__intro h3 { font-size: 35px; }.spotlight-rising { grid-template-columns: 73px minmax(0,1fr) auto; }.spotlight-rising > img { height: 79px; width: 73px; } }

/* A quieter creator-led spotlight: recognisable people and real momentum,
   without turning the home page into an editorial billboard. */
.community-spotlight--creator-led { display: block; padding-bottom: 72px; padding-top: 42px; }.community-spotlight__heading--creator-led { align-items: end; display: flex; gap: 35px; justify-content: space-between; margin-bottom: 24px; }.community-spotlight__heading--creator-led > p:not(.kicker) { font-size: 14px; line-height: 1.6; margin: 0 0 5px; max-width: 360px; }.creator-spotlight-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }.creator-spotlight-card { border: 1px solid #d8e3d5; color: var(--ink); display: grid; grid-template-columns: minmax(135px,.78fr) minmax(0,1fr); min-height: 202px; overflow: hidden; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }.creator-spotlight-card:hover, .creator-spotlight-card:focus-visible { box-shadow: 0 17px 30px rgba(39,57,43,.13); outline: none; transform: translateY(-3px); }.creator-spotlight-card > img { height: 100%; object-fit: cover; width: 100%; }.creator-spotlight-card__body { display: flex; flex-direction: column; min-width: 0; padding: 17px 17px 14px; }.creator-spotlight-card--leaf .creator-spotlight-card__body { background: #edf4ea; }.creator-spotlight-card--coral .creator-spotlight-card__body { background: #f8ede8; }.creator-spotlight-card__body > p { color: var(--leaf); font-size: 10px; font-weight: 850; letter-spacing: .085em; margin: 0 0 10px; text-transform: uppercase; }.creator-spotlight-card--coral .creator-spotlight-card__body > p { color: #a95e4b; }.creator-spotlight-card h3 { color: var(--ink); font: 700 clamp(26px,2.45vw,36px)/.92 var(--serif); letter-spacing: -.035em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.creator-spotlight-card__author { align-items: center; display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }.creator-spotlight-card__author .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.72); height: 28px; width: 28px; }.creator-spotlight-card__author > span { display: grid; gap: 1px; min-width: 0; }.creator-spotlight-card__author b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.creator-spotlight-card__author small { color: var(--muted); font-size: 10px; }.creator-spotlight-card__proof { align-items: center; border-top: 1px solid rgba(70,100,73,.15); display: flex; gap: 10px; margin-top: 12px; padding-top: 10px; }.creator-spotlight-card__proof span { align-items: center; color: #677765; display: inline-flex; font-size: 10px; font-weight: 760; gap: 4px; }.creator-spotlight-card__proof svg { color: var(--coral); font-size: 13px; }.theme-dark .creator-spotlight-card { border-color: #3b4e3e; }.theme-dark .creator-spotlight-card--leaf .creator-spotlight-card__body { background: #1d2b20; }.theme-dark .creator-spotlight-card--coral .creator-spotlight-card__body { background: #30231f; }.theme-dark .creator-spotlight-card h3 { color: #f1f4eb; }.theme-dark .creator-spotlight-card__proof { border-color: rgba(193,220,187,.14); }.theme-dark .creator-spotlight-card__proof span { color: #b3c2b0; }
@media (max-width: 860px) { .community-spotlight--creator-led { padding-bottom: 60px; }.community-spotlight__heading--creator-led { align-items: flex-start; flex-direction: column; gap: 12px; }.community-spotlight__heading--creator-led > p:not(.kicker) { max-width: 540px; }.creator-spotlight-grid { grid-template-columns: 1fr; }.creator-spotlight-card { grid-template-columns: 210px minmax(0,1fr); } }
@media (max-width: 600px) { .community-spotlight--creator-led { padding-bottom: 50px; padding-top: 30px; }.creator-spotlight-card { grid-template-columns: 125px minmax(0,1fr); min-height: 184px; }.creator-spotlight-card__body { padding: 14px 13px 12px; }.creator-spotlight-card h3 { font-size: 28px; }.creator-spotlight-card__proof { gap: 7px; }.creator-spotlight-card__proof span { font-size: 9px; } }

.creator-spotlight-card h3 { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; line-height: .96; white-space: normal; }
.creator-spotlight-card { position: relative; }
.creator-spotlight-card__live { align-items: center; background: rgba(17, 35, 25, .84); backdrop-filter: blur(8px); border: 1px solid rgba(245, 250, 239, .28); border-radius: 999px; box-shadow: 0 6px 18px rgba(18, 35, 23, .2); color: #f6faef; display: inline-flex; font-size: 10px; font-weight: 780; gap: 6px; left: 11px; letter-spacing: .01em; line-height: 1; padding: 7px 9px; position: absolute; top: 11px; z-index: 2; }
.creator-spotlight-card__live > i { animation: creator-live-pulse 1.8s ease-in-out infinite; background: #f27e62; border-radius: 50%; box-shadow: 0 0 0 3px rgba(242, 126, 98, .16); height: 6px; width: 6px; }
.creator-spotlight-card__live > b { color: #fff4d3; font-size: 9px; letter-spacing: .09em; }
.creator-spotlight-card__live > span { align-items: center; display: inline-flex; gap: 3px; }
.creator-spotlight-card__live svg { color: #cce8c7; font-size: 12px; }
@keyframes creator-live-pulse { 50% { box-shadow: 0 0 0 5px rgba(242, 126, 98, 0); } }
@media (max-width: 600px) { .creator-spotlight-card__live { font-size: 9px; gap: 5px; left: 8px; padding: 6px 7px; top: 8px; }.creator-spotlight-card__live > b { font-size: 8px; }.creator-spotlight-card__live svg { font-size: 10px; } }

/* Kochwissen can grow into a large library without becoming a wall of cards. */
.knowledge-shelves { display: grid; gap: 52px; min-width: 0; }.knowledge-shelf { max-width: 100%; min-width: 0; overflow: visible; scroll-margin-top: 178px; width: 100%; }.knowledge-shelf__heading { align-items: end; margin-bottom: 12px; min-width: 0; }.knowledge-shelf__controls { align-items: center; display: flex; flex: 0 0 auto; gap: 7px; }.knowledge-shelf__controls > span { color: var(--muted); font-size: 11px; font-weight: 750; margin-right: 4px; }.knowledge-shelf__controls button { align-items: center; background: #eef4eb; border: 1px solid #d6e2d3; border-radius: 50%; color: var(--leaf); cursor: pointer; display: grid; font-size: 19px; height: 31px; justify-content: center; line-height: 1; padding: 0 0 2px; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; width: 31px; }.knowledge-shelf__controls button:hover, .knowledge-shelf__controls button:focus-visible { background: var(--leaf); border-color: var(--leaf); color: #fff; outline: none; transform: translateY(-1px); }.knowledge-track { display: flex; gap: 18px; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; padding: 10px 7px 27px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-color: #b9cdb5 transparent; scrollbar-width: thin; width: 100%; }.knowledge-track::-webkit-scrollbar { height: 8px; }.knowledge-track::-webkit-scrollbar-thumb { background: #b9cdb5; border-radius: 100px; }.knowledge-track::-webkit-scrollbar-track { background: transparent; }.knowledge-track .knowledge-card { display: grid; flex: 0 0 clamp(300px, 28vw, 356px); grid-template-rows: 176px minmax(0,1fr); min-height: 405px; scroll-snap-align: start; transform-origin: center bottom; }.knowledge-track .knowledge-card > img { height: 176px; }.knowledge-track .knowledge-card > div { display: flex; flex-direction: column; padding: 20px; }.knowledge-track .knowledge-card h2 { font-size: 32px; }.knowledge-track .knowledge-card > div > p { margin-bottom: 16px; }.knowledge-track .knowledge-card details { margin-top: auto; }.knowledge-track .knowledge-card.is-expanded, .knowledge-track .knowledge-card:has(details[open]) { box-shadow: 0 23px 42px rgba(42,70,48,.18); transform: scale(1.025) translateY(-4px); }.knowledge-track .knowledge-card.is-expanded { border-color: #91b58c; z-index: 2; }.theme-dark .knowledge-shelf__controls button { background: #223026; border-color: #405443; color: #d8ead3; }.theme-dark .knowledge-shelf__controls button:hover { background: #4b734f; border-color: #4b734f; color: #fff; }.theme-dark .knowledge-track::-webkit-scrollbar-thumb { background: #4c674d; }
@media (max-width: 700px) { .knowledge-shelves { gap: 40px; }.knowledge-shelf__heading { align-items: flex-start; }.knowledge-shelf__controls > span { display: none; }.knowledge-track { gap: 13px; margin-left: -7px; margin-right: -7px; padding-left: 12px; padding-right: 12px; }.knowledge-track .knowledge-card { flex-basis: min(82vw, 344px); min-height: 390px; }.knowledge-track .knowledge-card > div { padding: 18px; }.knowledge-track .knowledge-card h2 { font-size: 30px; } }

/* Progression: achievements should feel collectible, legible and rewarding. */
.header-points { align-items: center; background: #fff8dd; border: 1px solid #ead58e; border-radius: 999px; color: #705815; cursor: pointer; display: inline-flex; font: inherit; gap: 4px; min-height: 33px; padding: 5px 9px; transition: box-shadow .18s ease, transform .18s ease; }.header-points:hover, .header-points:focus-visible { box-shadow: 0 7px 18px rgba(140,107,22,.17); outline: none; transform: translateY(-1px); }.header-points svg { color: #d29322; font-size: 15px; }.header-points b { font-size: 12px; }.header-points small { font-size: 9px; font-weight: 850; letter-spacing: .05em; }
.achievement-section { margin: 58px 0 70px; }.achievement-section__hint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; max-width: 260px; }.achievement-grid { display: grid; gap: 13px; grid-template-columns: repeat(3, minmax(0,1fr)); }.achievement-card { background: linear-gradient(145deg,#f7f4e9,#fffdf7); border: 1px solid #dce3d5; display: grid; gap: 13px; grid-template-columns: 64px minmax(0,1fr); min-height: 174px; padding: 15px; position: relative; transition: box-shadow .2s ease, transform .2s ease; }.achievement-card:hover, .achievement-card:focus-visible { box-shadow: 0 17px 28px rgba(34,57,40,.15); outline: none; transform: translateY(-4px); z-index: 2; }.achievement-card__crest { align-content: center; background: #dfe4df; border-radius: 14px; color: #657069; display: grid; gap: 3px; justify-items: center; padding: 8px 3px; text-align: center; }.achievement-card__crest svg { font-size: 28px; }.achievement-card__crest span { font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }.achievement-card--tier-1 .achievement-card__crest { background: linear-gradient(145deg,#d8e0df,#9aa7a4); color: #34413e; }.achievement-card--tier-2 .achievement-card__crest { background: linear-gradient(145deg,#ead2bb,#ad795b); color: #5f3d2b; }.achievement-card--tier-3 .achievement-card__crest { background: linear-gradient(145deg,#eff1f4,#aab7c1); color: #4a5965; }.achievement-card--tier-4 .achievement-card__crest { background: linear-gradient(145deg,#fff2ad,#d29c25); color: #675111; }.achievement-card--tier-5 .achievement-card__crest { background: linear-gradient(145deg,#dcecc9,#78a76a); color: #285131; }.achievement-card--tier-6 .achievement-card__crest { background: linear-gradient(145deg,#d7f0ef,#56a9ad); color: #1a5157; }.achievement-card--tier-7 .achievement-card__crest { animation: master-glow 2.3s ease-in-out infinite; background: linear-gradient(145deg,#f6d2ff,#7454bd); color: #fff; }.achievement-card .kicker { font-size: 9px; margin: 0 0 4px; }.achievement-card h3 { font: 700 25px/.94 var(--serif); margin: 0 0 7px; }.achievement-card > div:last-child > p:not(.kicker) { color: var(--muted); display: -webkit-box; font-size: 11px; line-height: 1.42; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.achievement-card__progress { border-top: 1px solid rgba(74,102,75,.16); display: grid; gap: 2px; margin-top: 10px; padding-top: 8px; }.achievement-card__progress b { color: var(--ink); font-size: 10px; }.achievement-card__progress span { color: var(--coral-dark); font-size: 10px; font-weight: 780; }.theme-dark .header-points { background: #342d1b; border-color: #705b24; color: #f4df9a; }.theme-dark .achievement-card { background: linear-gradient(145deg,#1f2d23,#17221b); border-color: #3d5041; }.theme-dark .achievement-card h3, .theme-dark .achievement-card__progress b { color: #f4f6ef; }.theme-dark .achievement-card__progress { border-color: rgba(197,226,191,.16); }
.cookbook-lock { align-items: center; background: linear-gradient(125deg,#203b2a,#16261d); color: #f6f9ed; display: grid; gap: 28px; grid-template-columns: 82px minmax(0,1fr); margin: 58px 0; overflow: hidden; padding: 36px; position: relative; }.cookbook-lock::after { background: radial-gradient(circle,rgba(243,199,102,.35),transparent 65%); content:""; height: 260px; position:absolute; right:-90px; top:-110px; width:260px; }.cookbook-lock__icon { align-items: center; background: #f3c766; border-radius: 22px; color: #514014; display: grid; height: 74px; justify-content: center; position: relative; width: 74px; z-index: 1; }.cookbook-lock__icon svg { font-size: 32px; }.cookbook-lock .kicker { color: #efcf7c; margin: 0 0 7px; }.cookbook-lock h2 { color: #fffdf4; font: 700 clamp(30px,3vw,45px)/.92 var(--serif); margin: 0 0 10px; position:relative; z-index:1; }.cookbook-lock h2 em { color: #f1d899; }.cookbook-lock p:not(.kicker) { color: rgba(244,248,236,.8); line-height:1.55; margin:0; max-width:610px; position:relative; z-index:1; }.creator-choice--locked { cursor: default; opacity: .78; text-align: left; }.creator-choice--locked:hover { transform: none; }.creator-choice--locked .creator-choice__go { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; text-align: left; }
.cp-modal { max-width: 510px; }.cp-modal__intro { color: var(--muted); line-height: 1.55; }.cp-rule-list { border-top: 1px solid #dce5d8; margin: 23px 0; }.cp-rule-list > div { align-items: baseline; border-bottom: 1px solid #dce5d8; display: grid; gap: 4px 14px; grid-template-columns: 1fr auto; padding: 11px 0; }.cp-rule-list b { font-size: 12px; }.cp-rule-list span { color: var(--coral-dark); font-size: 12px; font-weight: 850; }.cp-rule-list small { color: var(--muted); font-size: 10px; grid-column: 1 / -1; }.cp-reward { align-items: center; animation: cp-reward-in .35s cubic-bezier(.22,.8,.26,1.2); background: #244b31; box-shadow: 0 17px 35px rgba(24,47,31,.27); color: #f9f9ed; display: flex; gap: 10px; left: 50%; padding: 11px 15px; position: fixed; top: 92px; transform: translateX(-50%); z-index: 200; }.cp-reward > span { align-items:center; background:#f3c766; border-radius:50%; color:#644d11; display:grid; height:34px; justify-content:center; width:34px; }.cp-reward svg { font-size:18px; }.cp-reward div { display:grid; gap:2px; }.cp-reward b { font-size:15px; }.cp-reward small { color:#deebd9; font-size:10px; max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.recipe-card__featured { align-items:center; background:#f3c766; color:#58420e; display:inline-flex; font-size:9px; font-weight:850; gap:4px; left:10px; letter-spacing:.04em; padding:6px 8px; position:absolute; text-transform:uppercase; top:40px; }.recipe-card__featured svg { font-size:12px; }.owner-actions__promote { color: #956117; }
.modal-backdrop[data-dismiss-on-backdrop="true"] { cursor: pointer; }
.modal-backdrop[data-dismiss-on-backdrop="true"] > .auth-modal { cursor: default; }
.cp-modal__actions { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.cp-modal__actions .button { justify-content: center; margin: 0; min-height: 44px; }
.cp-modal__dismiss { align-items: center; background: #edf2ea; border: 1px solid #d0dccd; color: #35573e; display: inline-flex; gap: 7px; }
.cp-modal__dismiss:hover,.cp-modal__dismiss:focus-visible { background: #e1ebde; border-color: #b8cdb4; }
.cp-modal__dismiss svg { font-size: 17px; }
.theme-dark .cp-modal__dismiss { background: #26362a; border-color: #405443; color: #d9ead5; }
.theme-dark .cp-modal__dismiss:hover,.theme-dark .cp-modal__dismiss:focus-visible { background: #304535; border-color: #58705b; }
@keyframes master-glow { 50% { box-shadow: 0 0 0 4px rgba(174,116,227,.15), 0 0 25px rgba(213,152,246,.45); } } @keyframes cp-reward-in { from { opacity:0; transform:translate(-50%,-18px) scale(.92); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@media (max-width: 900px) { .achievement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.achievement-section .section-heading { align-items:start; flex-direction:column; gap:12px; }.achievement-section__hint { max-width:520px; }.cookbook-lock { grid-template-columns:64px minmax(0,1fr); padding:28px; }.cookbook-lock__icon { height:60px; width:60px; } }
@media (max-width: 560px) { .achievement-grid { grid-template-columns:1fr; }.achievement-card { min-height:145px; }.cookbook-lock { gap:18px; grid-template-columns:1fr; margin:38px 0; padding:24px; }.cookbook-lock__icon { border-radius:16px; }.cp-reward { left:12px; right:12px; top:77px; transform:none; }.cp-reward small { max-width:240px; } @keyframes cp-reward-in { from { opacity:0; transform:translateY(-18px) scale(.92); } to { opacity:1; transform:translateY(0) scale(1); } } }
@media (max-width: 520px) { .cp-modal__actions { grid-template-columns: 1fr; } }

/* Recipe cards remain calm while browsing; movement is now reserved for direct
   actions, so moving the cursor across the page does not feel like a refresh. */
.recipe-card { animation: none; }.recipe-card:hover { box-shadow: 0 12px 26px rgba(42,52,41,.11); transform: none; }.recipe-card:hover .recipe-card__photo { transform: none; }.recipe-card:hover .recipe-card__open { transform: none; }.social-button:hover { transform: none; }

.cp-rule-list__group { color: var(--leaf); font-size: 10px; font-weight: 850; grid-column: 1 / -1; letter-spacing: .08em; margin: 18px 0 2px; text-transform: uppercase; }.cp-rule-list__group:first-child { margin-top: 13px; }.cp-rule-list b { align-items: center; display: inline-flex; gap: 7px; }.cp-rule-list b svg { color: var(--coral); font-size: 15px; }.cp-rule-list > div { padding: 12px 0; }.cp-rule-list > div:nth-of-type(4n) { border-bottom-color: #c9d9c6; }

/* A stored like must read as a decision, even on the compact recipe cards. */
.social-button--like.is-active { background: #f9e1da; box-shadow: inset 0 0 0 1px rgba(205,90,68,.24); color: var(--coral-dark); }.social-button--like.is-active svg { fill: currentColor; filter: drop-shadow(0 2px 4px rgba(192,73,54,.22)); stroke-width: 2.05; }.social-button--like.is-active span { font-weight: 850; }.theme-dark .social-button--like.is-active { background: #4b2925; box-shadow: inset 0 0 0 1px rgba(247,148,124,.34); color: #ffb09b; }

/* Paid visibility has one unmistakable home of its own. */
.featured-shelf { background: linear-gradient(135deg,#f6edcf,#f5eee2 52%,#e9f1e5); border: 1px solid #dfd1a7; margin-bottom: 40px; margin-top: 34px; overflow: hidden; padding: 25px; position: relative; }.featured-shelf::after { background: radial-gradient(circle,rgba(222,164,49,.2),transparent 67%); content:""; height:260px; pointer-events:none; position:absolute; right:-80px; top:-130px; width:260px; }.featured-shelf__heading { align-items:end; display:flex; gap:24px; justify-content:space-between; margin-bottom:19px; position:relative; z-index:1; }.featured-shelf__heading .kicker { margin:0 0 5px; }.featured-shelf__heading h2 { font:700 clamp(30px,3.5vw,47px)/.93 var(--serif); margin:0; }.featured-shelf__heading h2 em { color:var(--coral-dark); }.featured-shelf__heading > span { align-items:center; color:#79601e; display:inline-flex; font-size:11px; font-weight:850; gap:6px; }.featured-shelf__heading svg { font-size:15px; }.featured-shelf__track { display:grid; gap:14px; grid-auto-columns:minmax(285px,340px); grid-auto-flow:column; overflow-x:auto; padding:2px 2px 12px; position:relative; scroll-snap-type:x mandatory; z-index:1; }.featured-shelf__track .recipe-card { min-width:0; scroll-snap-align:start; }.theme-dark .featured-shelf { background:linear-gradient(135deg,#352f20,#2b2820 52%,#203126); border-color:#655b38; }.theme-dark .featured-shelf__heading > span { color:#ead58d; }

/* Private recipes feel like a useful working library, not a second public feed. */
.draft-notice { align-items:center; background:#fff7d9; border:1px solid #ead790; color:#604e17; display:inline-flex; gap:10px; margin:13px 0 27px; padding:11px 13px; }.draft-notice > svg { flex:0 0 auto; font-size:20px; }.draft-notice span { display:grid; gap:2px; }.draft-notice b { font-size:12px; }.draft-notice small { color:#7e6d35; font-size:10px; line-height:1.4; }.detail-page--draft .detail-hero { padding-top:38px; }.private-library { background:#f1f5ed; border:1px solid #dbe5d8; margin:34px 0 68px; padding:27px; }.private-library .section-heading { margin-bottom:8px; }.private-library__intro { color:var(--muted); font-size:13px; margin:0 0 20px; }.draft-grid { display:grid; gap:13px; grid-template-columns:repeat(2,minmax(0,1fr)); }.draft-card { background:var(--surface); border:1px solid #dce3d8; display:grid; grid-template-columns:142px minmax(0,1fr); min-height:170px; overflow:hidden; }.draft-card > a img { height:100%; object-fit:cover; width:100%; }.draft-card > div { display:flex; flex-direction:column; min-width:0; padding:15px; }.draft-card__status { align-items:center; color:#8a6c17; display:inline-flex; font-size:9px; font-weight:850; gap:4px; margin-bottom:8px; text-transform:uppercase; }.draft-card__status svg { font-size:12px; }.draft-card .kicker { font-size:8px; margin:0 0 4px; }.draft-card h3 { font:700 25px/.95 var(--serif); margin:0 0 6px; }.draft-card h3 a { color:var(--ink); text-decoration:none; }.draft-card small { color:var(--muted); font-size:9px; }.draft-card > div > div { align-items:center; display:flex; gap:8px; margin-top:auto; padding-top:12px; }.draft-card .button { min-height:32px; padding:7px 10px; }.draft-card .text-button { font-size:10px; }.form-footer--split > div { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; }.form-footer--split .button { min-width:170px; }.theme-dark .draft-notice { background:#3a321d; border-color:#73632f; color:#f5df94; }.theme-dark .draft-notice small { color:#d7c685; }.theme-dark .private-library { background:#1d2a21; border-color:#3a4d3e; }.theme-dark .draft-card { background:#18231c; border-color:#3a4a3d; }

/* Referral links are prominent enough to use, without competing with the profile hero. */
.referral-panel { align-items:center; background:linear-gradient(120deg,#213f2d,#2f5b42); color:#f4f8ef; display:grid; gap:18px; grid-template-columns:58px minmax(0,1fr); margin:24px 0 18px; padding:22px 24px; }.referral-panel__icon { align-items:center; background:#f1c85f; border-radius:17px; color:#5c4710; display:grid; height:52px; justify-content:center; width:52px; }.referral-panel__icon svg { font-size:24px; }.referral-panel .kicker { color:#d9e9d6; margin:0 0 3px; }.referral-panel h2 { color:#fff; font:700 28px/1 var(--serif); margin:0 0 6px; }.referral-panel p:not(.kicker) { color:#d7e4d4; font-size:12px; line-height:1.5; margin:0; }.referral-panel > div > small { color:#bfd1bc; display:block; font-size:10px; margin-top:8px; }.referral-link { display:flex; gap:8px; margin-top:13px; }.referral-link input { background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.25); color:#fff; flex:1; font-size:11px; min-width:0; padding:10px 12px; }.referral-link .button { background:#fff; border-color:#fff; color:#244632; flex:0 0 auto; min-height:37px; padding:8px 11px; }.referral-welcome { align-items:center; background:#fff6d5; border:1px solid #ead489; color:#634d0d; display:flex; gap:10px; margin:15px 0; padding:11px 12px; }.referral-welcome > svg { font-size:20px; }.referral-welcome span { display:grid; gap:2px; }.referral-welcome b { font-size:12px; }.referral-welcome small { color:#836d2c; font-size:10px; }

/* The achievement system stays useful while collapsed and expands on demand. */
.achievement-vault { border:1px solid #dce4d8; margin:18px 0 54px; }.achievement-vault > summary { align-items:center; background:#f7f8f3; cursor:pointer; display:grid; gap:18px; grid-template-columns:minmax(180px,.75fr) minmax(0,1.5fr) auto; list-style:none; padding:16px 18px; }.achievement-vault > summary::-webkit-details-marker { display:none; }.achievement-vault > summary > div:first-child { display:grid; gap:2px; }.achievement-vault > summary .kicker { margin:0; }.achievement-vault > summary b { font:700 21px/1 var(--serif); }.achievement-vault > summary > div:first-child > span { color:var(--muted); font-size:9px; }.achievement-vault > summary > i { color:var(--leaf); font-size:23px; font-style:normal; transition:transform .18s ease; }.achievement-vault[open] > summary > i { transform:rotate(180deg); }.achievement-vault__preview { display:flex; gap:6px; justify-content:flex-end; min-width:0; }.achievement-mini { align-items:center; background:#e2e7e1; border-radius:9px; color:#6c7770; display:grid; height:42px; justify-items:center; min-width:44px; padding:4px; }.achievement-mini svg { font-size:18px; }.achievement-mini small { font-size:7px; font-weight:850; max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.achievement-mini--tier-1 { background:#ced8d6; color:#334440; }.achievement-mini--tier-2 { background:#dfc1a9; color:#60432f; }.achievement-mini--tier-3 { background:#dce2e7; color:#4a5965; }.achievement-mini--tier-4 { background:#f6df89; color:#665012; }.achievement-mini--tier-5 { background:#cfe2bd; color:#285131; }.achievement-mini--tier-6 { background:#c8e5e4; color:#1a5157; }.achievement-mini--tier-7 { animation:master-glow 2.3s ease-in-out infinite; background:#8c68ca; color:#fff; }.achievement-vault__body { border-top:1px solid #dce4d8; padding:25px; }.achievement-vault__body .section-heading { margin-bottom:19px; }.theme-dark .achievement-vault { border-color:#3a4c3e; }.theme-dark .achievement-vault > summary { background:#1d2920; }.theme-dark .achievement-vault__body { border-color:#3a4c3e; }

@media (max-width: 760px) { .featured-shelf { padding:19px; }.featured-shelf__heading { align-items:flex-start; flex-direction:column; gap:8px; }.draft-grid { grid-template-columns:1fr; }.referral-panel { align-items:start; grid-template-columns:45px minmax(0,1fr); padding:18px; }.referral-panel__icon { border-radius:13px; height:42px; width:42px; }.referral-link { align-items:stretch; flex-direction:column; }.achievement-vault > summary { grid-template-columns:1fr auto; }.achievement-vault__preview { grid-column:1 / -1; grid-row:2; justify-content:flex-start; overflow-x:auto; }.achievement-vault > summary > i { grid-column:2; grid-row:1; }.achievement-vault__body { padding:18px; } }
@media (max-width: 520px) { .featured-shelf__track { grid-auto-columns:minmax(265px,82vw); }.draft-card { grid-template-columns:105px minmax(0,1fr); }.draft-card h3 { font-size:22px; }.draft-card > div > div { align-items:flex-start; flex-direction:column; }.form-footer--split { align-items:stretch; flex-direction:column; }.form-footer--split > div { width:100%; }.form-footer--split .button { flex:1; min-width:0; }.achievement-mini { min-width:40px; } }
.draft-card .kicker { margin: 0 0 4px; }

/* The profile now treats achievements as a collectible rank shelf. */
.achievement-vault { background: var(--surface); border: 1px solid #d8e2d5; border-radius: 24px; box-shadow: 0 16px 42px rgba(35,57,39,.07); margin: 28px 0 62px; overflow: hidden; }
.achievement-vault > summary { background: linear-gradient(120deg,#f4f7ee 0%,#fbfaf3 55%,#f4edda 100%); gap: 24px; grid-template-columns: minmax(235px,.9fr) minmax(0,1.45fr) 38px; min-height: 112px; padding: 20px 22px; transition: background .2s ease; }
.achievement-vault > summary:hover { background: linear-gradient(120deg,#eff5e9 0%,#faf9f0 55%,#f5e8ca 100%); }
.achievement-vault__title { align-items: center; display: flex !important; gap: 13px !important; min-width: 0; }
.achievement-vault__seal { align-items: center; background: linear-gradient(145deg,#315a3d,#1e3d29); border: 4px solid rgba(255,255,255,.82); border-radius: 50%; box-shadow: 0 5px 0 #c9a94d, 0 10px 24px rgba(39,65,44,.2); color: #f5d778; display: grid; flex: 0 0 auto; height: 58px; justify-content: center; width: 58px; }
.achievement-vault__seal svg { font-size: 26px; }
.achievement-vault__title > div { display: grid; gap: 2px; min-width: 0; }
.achievement-vault__title .kicker { color: var(--leaf); font-size: 9px; }
.achievement-vault__title b { color: var(--ink); font: 700 25px/.98 var(--serif) !important; }
.achievement-vault__title > div > span { color: var(--muted); font-size: 10px !important; font-weight: 720; }
.achievement-vault__title > div > i { background: rgba(46,82,54,.12); border-radius: 99px; display: block; height: 4px; margin-top: 6px; overflow: hidden; width: min(190px,100%); }
.achievement-vault__title > div > i > span { background: linear-gradient(90deg,#5b8a5c,#d3ac45); border-radius: inherit; display: block; height: 100%; width: var(--achievement-progress); }
.achievement-vault__preview { align-items: center; gap: 8px; justify-content: flex-end; mask-image: linear-gradient(90deg,transparent 0,#000 20px,#000 100%); overflow: hidden; padding: 6px 2px 7px 18px; }
.achievement-mini { align-content: center; background: #e2e7e1; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 5px 12px rgba(42,58,44,.12); flex: 0 0 55px; height: 55px; min-width: 55px; padding: 6px; position: relative; transition: transform .18s ease; }
.achievement-mini:hover { transform: translateY(-3px); }
.achievement-mini svg { font-size: 20px; }
.achievement-mini small { display: none; }
.achievement-mini b { background: #fffdf6; border: 1px solid currentColor; border-radius: 999px; bottom: -7px; color: inherit; font-size: 6px; font-weight: 900; left: 50%; letter-spacing: .035em; max-width: 62px; overflow: hidden; padding: 2px 5px; position: absolute; text-overflow: ellipsis; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.achievement-vault__toggle { align-items: center; background: rgba(255,255,255,.76); border: 1px solid #d6dfd2; border-radius: 50%; color: var(--leaf); display: flex; font-size: 22px; height: 36px; justify-content: center; line-height: 1; transition: transform .2s ease, background .2s ease; width: 36px; }
.achievement-vault[open] .achievement-vault__toggle { background: #315a3d; color: #fff; transform: rotate(180deg); }
.achievement-vault__body { background: linear-gradient(180deg,#fffdf8,#f8f8f2); border-top: 1px solid #d8e2d5; padding: 30px; }
.achievement-vault__body .section-heading { align-items: end; }
.achievement-vault__body .section-heading h2 { margin-bottom: 0; }
.achievement-grid { gap: 16px; }
.achievement-card { --achievement-tone:#78857b; background: linear-gradient(145deg,#fffef9,#f5f4ea); border: 1px solid color-mix(in srgb,var(--achievement-tone) 28%,#dfe5dc); border-radius: 20px; box-shadow: 0 8px 22px rgba(36,53,39,.055); gap: 14px 15px; grid-template-areas: "award copy" "meter meter"; grid-template-columns: 70px minmax(0,1fr); min-height: 218px; padding: 17px; }
.achievement-card:hover, .achievement-card:focus-visible { border-color: color-mix(in srgb,var(--achievement-tone) 55%,#dfe5dc); box-shadow: 0 18px 34px rgba(34,57,40,.14); transform: translateY(-3px); }
.achievement-card--tier-1 { --achievement-tone:#677873; }.achievement-card--tier-2 { --achievement-tone:#a16c4e; }.achievement-card--tier-3 { --achievement-tone:#738692; }.achievement-card--tier-4 { --achievement-tone:#c18d20; }.achievement-card--tier-5 { --achievement-tone:#609154; }.achievement-card--tier-6 { --achievement-tone:#438f94; }.achievement-card--tier-7 { --achievement-tone:#7851bc; }
.achievement-card__award { align-items: center; align-self: start; display: flex; flex-direction: column; gap: 7px; grid-area: award; }
.achievement-card__crest { aspect-ratio: 1; border: 3px solid rgba(255,255,255,.82); border-radius: 50%; box-shadow: 0 5px 13px color-mix(in srgb,var(--achievement-tone) 25%,transparent); min-height: 62px; padding: 8px; width: 62px; }
.achievement-card__crest svg { font-size: 29px; }
.achievement-card__award > span { background: color-mix(in srgb,var(--achievement-tone) 12%,#fff); border: 1px solid color-mix(in srgb,var(--achievement-tone) 35%,#fff); border-radius: 999px; color: var(--achievement-tone); font-size: 7px; font-weight: 900; letter-spacing: .055em; max-width: 72px; overflow: hidden; padding: 3px 7px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.achievement-card__copy { align-self: start; grid-area: copy; min-width: 0; }
.achievement-card__copy .kicker { color: var(--achievement-tone); margin-bottom: 5px; }
.achievement-card__copy h3 { font-size: 25px; line-height: .98; margin: 0 0 8px; }
.achievement-card__copy > p:not(.kicker) { color: var(--muted); display: -webkit-box; font-size: 11px; line-height: 1.48; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.achievement-card__meter { border-top: 1px solid color-mix(in srgb,var(--achievement-tone) 18%,transparent); display: grid; gap: 7px; grid-area: meter; padding-top: 11px; }
.achievement-card__meter > span { background: color-mix(in srgb,var(--achievement-tone) 13%,#fff); border-radius: 99px; height: 6px; overflow: hidden; }
.achievement-card__meter > span > i { background: linear-gradient(90deg,var(--achievement-tone),color-mix(in srgb,var(--achievement-tone) 52%,#f1cc64)); border-radius: inherit; display: block; height: 100%; width: var(--achievement-progress); }
.achievement-card__meter > div { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.achievement-card__meter b { color: var(--ink); font-size: 9px; }
.achievement-card__meter em { background: #fff3d2; border-radius: 999px; color: #8a6412; font-size: 8px; font-style: normal; font-weight: 850; padding: 4px 7px; text-align: right; }

/* A referral is useful profile utility, so it closes the page quietly. */
.referral-panel--profile-end { background: linear-gradient(120deg,#eef4e9,#fbf9ef); border: 1px solid #d7e1d2; border-radius: 20px; color: var(--ink); margin: 8px 0 74px; padding: 21px 23px; }
.referral-panel--profile-end .referral-panel__icon { background: #315a3d; border-radius: 50%; color: #f4d477; height: 48px; width: 48px; }
.referral-panel--profile-end .kicker { color: var(--leaf); }
.referral-panel--profile-end h2 { color: var(--ink); font-size: 25px; }
.referral-panel--profile-end p:not(.kicker) { color: var(--muted); }
.referral-panel--profile-end > div > small { color: var(--muted); }
.referral-panel--profile-end .referral-link { max-width: 740px; }
.referral-panel--profile-end .referral-link input { background: rgba(255,255,255,.76); border-color: #cedaca; color: var(--ink); }
.referral-panel--profile-end .referral-link .button { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.theme-dark .achievement-vault { background: #18231c; border-color: #3a4c3e; box-shadow: none; }
.theme-dark .achievement-vault > summary { background: linear-gradient(120deg,#1d2b21,#232c22 58%,#332f21); }
.theme-dark .achievement-vault > summary:hover { background: linear-gradient(120deg,#213126,#293329 58%,#3b3524); }
.theme-dark .achievement-vault__title b { color: #f4f6ef; }
.theme-dark .achievement-vault__toggle { background: #26372b; border-color: #435746; color: #d8ead3; }
.theme-dark .achievement-vault__body { background: linear-gradient(180deg,#1b281f,#17221b); border-color: #3a4c3e; }
.theme-dark .achievement-mini { border-color: rgba(28,39,31,.9); }
.theme-dark .achievement-mini b { background: #202c23; }
.theme-dark .achievement-card { background: linear-gradient(145deg,#202e24,#19241d); }
.theme-dark .achievement-card__meter em { background: #3a321e; color: #f1d782; }
.theme-dark .referral-panel--profile-end { background: linear-gradient(120deg,#1d2b21,#292a20); border-color: #3b4d3e; }
.theme-dark .referral-panel--profile-end h2 { color: #f4f6ef; }
.theme-dark .referral-panel--profile-end .referral-link input { background: #18231c; border-color: #435647; color: #edf3e9; }

@media (max-width: 760px) {
  .achievement-vault > summary { grid-template-columns: minmax(0,1fr) 38px; min-height: 0; padding: 18px; }
  .achievement-vault__preview { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; mask-image: none; overflow-x: auto; padding: 7px 4px 8px; }
  .achievement-vault__toggle { grid-column: 2; grid-row: 1; }
  .achievement-vault__body { padding: 22px 18px; }
  .achievement-vault__body .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .referral-panel--profile-end { grid-template-columns: 44px minmax(0,1fr); }
  .referral-panel--profile-end .referral-panel__icon { height: 42px; width: 42px; }
}
@media (max-width: 560px) {
  .achievement-vault { border-radius: 18px; margin-bottom: 46px; }
  .achievement-vault__seal { height: 50px; width: 50px; }
  .achievement-vault__title b { font-size: 22px !important; }
  .achievement-card { min-height: 205px; }
  .referral-panel--profile-end { border-radius: 16px; margin-bottom: 48px; padding: 18px; }
}

/* styles/catalog-profile.css */
/* Shared recipe browser for Community, Grundrezepte and Klassiker. */
.recipe-browser-page { padding-bottom: 108px; padding-top: 58px; }
.recipe-browser-page__intro { max-width: 790px; }
.recipe-browser-page__intro > p:not(.kicker) { max-width: 680px; }
.community-browser-note {
  align-items: center;
  background: linear-gradient(115deg,#eef5ea,#fffaf0);
  border: 1px solid #d6e2d2;
  border-radius: var(--radius-lg);
  display: grid;
  gap: 12px;
  grid-template-columns: 43px minmax(0,1fr) auto;
  margin: 0 0 25px;
  padding: 15px 17px;
}
.community-browser-note > span { align-items: center; background: #dcebd8; border-radius: 50%; color: var(--leaf); display: grid; height: 43px; justify-content: center; width: 43px; }
.community-browser-note > span svg { font-size: 20px; }
.community-browser-note p { display: grid; gap: 2px; margin: 0; }
.community-browser-note b { font-size: 13px; }
.community-browser-note small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.community-browser-note .button { min-height: 39px; padding: 9px 13px; }
.recipe-browser {
  background: var(--surface);
  border: 1px solid #dce4d9;
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 30px rgba(37,56,40,.065);
  display: grid;
  gap: 16px;
  margin: 0 0 30px;
  padding: 20px;
}
.recipe-browser__heading { align-items: end; display: flex; gap: 20px; justify-content: space-between; }
.recipe-browser__heading .kicker { margin: 0 0 4px; }
.recipe-browser__heading h2 { font: 700 27px/1 var(--serif); margin: 0; }
.recipe-browser__heading > span { color: var(--muted); font-size: 11px; text-align: right; }
.recipe-browser__reset { align-items: center; background: #f5f2ea; border: 1px solid #e1ddd1; border-radius: 999px; color: #6d746b; display: inline-flex; font-size: 11px; font-weight: 800; gap: 5px; padding: 8px 10px; }
.recipe-browser__reset:hover { background: #fff0ea; border-color: #e5bbae; color: var(--coral-dark); }
.recipe-browser__reset svg { font-size: 14px; }
.recipe-browser__search { align-items: center; background: #f5f7f2; border: 1px solid #dbe3d8; border-radius: var(--radius-md); display: flex; gap: 9px; padding: 0 13px; transition: border-color .18s ease, box-shadow .18s ease; }
.recipe-browser__search:focus-within { border-color: #8dac88; box-shadow: 0 0 0 3px rgba(80,125,78,.11); }
.recipe-browser__search > svg { color: var(--leaf); flex: 0 0 auto; font-size: 18px; }
.recipe-browser__search input { background: transparent; border: 0; color: var(--ink); font-size: 14px; min-height: 48px; outline: 0; width: 100%; }
.recipe-browser__search input::placeholder { color: #8b9488; }
.recipe-browser__filters { display: grid; gap: 10px; grid-template-columns: 1.35fr repeat(4,minmax(0,1fr)); }
.recipe-browser-control { display: grid; gap: 6px; min-width: 0; }
.recipe-browser-control > span { color: #667165; font-size: 9px; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.recipe-browser-control select { appearance: none; background: #fffef9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23315f49' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") calc(100% - 10px) center / 12px no-repeat; border: 1px solid #d8e0d5; border-radius: 11px; color: var(--ink); font-size: 11px; min-height: 40px; overflow: hidden; padding: 8px 29px 8px 10px; text-overflow: ellipsis; width: 100%; }
.recipe-browser-control select:hover { border-color: #a9bca6; }
.recipe-browser-results { min-height: 160px; }
.recipe-browser-results > .empty-state { background: var(--surface); border: 1px dashed #cbd8c7; border-radius: var(--radius-lg); grid-column: 1 / -1; margin: 0; }
.recipe-browser-page .featured-shelf { border-radius: var(--radius-xl); }
.recipe-browser-page .admin-toolbox,
.recipe-browser-page .editorial-note { border-radius: var(--radius-md); }
.theme-dark .community-browser-note { background: linear-gradient(115deg,#1d2b21,#312d20); border-color: #3c4d3f; }
.theme-dark .community-browser-note > span { background: #293d2d; }
.theme-dark .recipe-browser { border-color: #384a3d; }
.theme-dark .recipe-browser__search { background: #202c23; border-color: #3d4f41; }
.theme-dark .recipe-browser-control > span { color: #aebbaa; }
.theme-dark .recipe-browser-control select { background-color: #202c23; border-color: #405143; color: #edf2e9; }
.theme-dark .recipe-browser__reset { background: #272d27; border-color: #434b42; color: #c2cbc0; }
@media (max-width: 980px) {
  .recipe-browser__filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .recipe-browser-page { padding-top: 38px; }
  .community-browser-note { align-items: start; grid-template-columns: 40px minmax(0,1fr); }
  .community-browser-note .button { grid-column: 1 / -1; width: 100%; }
  .recipe-browser { border-radius: 18px; padding: 16px; }
  .recipe-browser__heading { align-items: flex-start; flex-direction: column; gap: 9px; }
  .recipe-browser__heading > span { text-align: left; }
  .recipe-browser__filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .recipe-browser__filters { grid-template-columns: 1fr; }
}

/* One visual language: the same soft geometry now continues beyond Entdecken. */
.recipe-card,
.featured-shelf,
.spotlight-card,
.ritual,
.ingredients-card,
.recipe-tip-card,
.cook-note,
.comment-form,
.login-prompt,
.recipe-form,
.auth-modal,
.creator-reward,
.admin-toolbox,
.editorial-note,
.knowledge-card,
.quiz-card,
.quiz-success,
.points-card,
.cookbook-card,
.cookbook-lock,
.library-empty,
.book-recipe-picker label,
.locked-recipes,
.referral-panel,
.shopping-page__count,
.shopping-summary,
.shopping-add,
.shopping-list,
.shopping-done,
.shopping-export-actions,
.private-library,
.draft-card,
.draft-notice,
.my-kitchen-section--drafts,
.my-kitchen-empty,
.legal-placeholder,
.legal-sources a,
.consent-banner,
.creator-menu,
.recipe-nav__menu,
.recipe-shortcuts__links > a { border-radius: var(--radius-lg); }
.recipe-card { border-radius: var(--radius-lg); box-shadow: 0 10px 28px rgba(42,52,41,.07); }
.recipe-card__image { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.detail-hero__image { border-radius: var(--radius-xl); overflow: hidden; }
.detail-hero__photo { border-radius: 16px; }

.editorial-image-note {
  align-items: flex-start;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 20%, transparent);
  border-radius: var(--radius-md);
  display: flex;
  gap: 11px;
  grid-column: 2;
  margin-top: -20px;
  padding: 13px 15px;
}
.editorial-image-note > span { color: var(--terracotta); flex: 0 0 auto; margin-top: 2px; }
.editorial-image-note > span svg { height: 19px; width: 19px; }
.editorial-image-note small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.editorial-image-note p { font-size: 13px; line-height: 1.48; margin: 3px 0 7px; }
.editorial-image-note a { align-items: center; color: var(--leaf); display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; }
.editorial-image-note a svg { height: 15px; transition: transform .2s ease; width: 15px; }
.editorial-image-note a:hover svg { transform: translateX(3px); }
.support-photo-field > small { color: var(--muted); display: block; font-size: 12px; line-height: 1.5; margin-top: 8px; }
.theme-dark .editorial-image-note { background: rgba(27,39,32,.9); border-color: #3c4e40; }

@media (max-width: 900px) {
  .editorial-image-note { grid-column: 1; margin-top: -23px; max-width: 570px; }
}
.profile-hero--personal:not(.has-profile-banner) { background: var(--surface); border: 1px solid #dce4d9; border-radius: var(--radius-xl); box-shadow: 0 12px 30px rgba(37,56,40,.055); padding: 30px; }
.field input,
.field textarea,
.field select,
.repeat-row input,
.repeat-row textarea,
.comment-form textarea,
.admin-toolbox input,
.referral-link input,
.shopping-add input { border-radius: var(--radius-sm); }
.image-dropzone { border-radius: var(--radius-md); }
.form-feedback { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.recipe-form { overflow: hidden; }
.quiz-options button { border-radius: var(--radius-sm); }
.knowledge-index,
.knowledge-group,
.shopping-tools { border-radius: var(--radius-md); }
.theme-dark .profile-hero--personal:not(.has-profile-banner) { background: var(--surface); border-color: #394b3d; }
@media (max-width: 680px) {
  .profile-hero--personal:not(.has-profile-banner) { border-radius: 18px; padding: 22px; }
  .recipe-form,
  .auth-modal,
  .featured-shelf,
  .ritual { border-radius: 18px; }
}

/* A personal banner turns the profile header into an earned creator surface. */
.profile-hero--personal { position: relative; }
.profile-hero--personal.has-profile-banner { align-items: end; border: 0; border-radius: 28px; box-shadow: 0 22px 48px rgba(25,43,30,.2); margin-top: 18px; min-height: 360px; overflow: hidden; padding: 156px 30px 30px; }
.profile-hero__banner { inset: 0; position: absolute; z-index: 0; }
.profile-hero__banner img { height: 100%; object-fit: cover; width: 100%; }
.profile-hero__banner span { background: linear-gradient(180deg,rgba(11,22,15,.08) 12%,rgba(12,25,17,.38) 48%,rgba(10,23,15,.92) 100%); inset: 0; position: absolute; }
.profile-hero--personal.has-profile-banner > *:not(.profile-hero__banner) { position: relative; z-index: 1; }
.profile-hero--personal.has-profile-banner .profile-identity h1,
.profile-hero--personal.has-profile-banner .profile-identity > div > p:not(.kicker),
.profile-hero--personal.has-profile-banner .profile-numbers b { color: #fff; text-shadow: 0 2px 15px rgba(0,0,0,.28); }
.profile-hero--personal.has-profile-banner .profile-identity .kicker { color: #f2d77e; }
.profile-hero--personal.has-profile-banner .profile-identity .avatar { border: 3px solid rgba(255,255,255,.9); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.profile-hero--personal.has-profile-banner .profile-socials a { background: rgba(15,31,20,.55); border-color: rgba(255,255,255,.38); color: #fff; }
.profile-hero--personal.has-profile-banner .profile-level { background: rgba(18,36,24,.72); border-color: rgba(255,255,255,.24); backdrop-filter: blur(10px); }
.profile-hero--personal.has-profile-banner .profile-level b { color: #fff; }
.profile-hero--personal.has-profile-banner .profile-level small,
.profile-hero--personal.has-profile-banner .profile-quiet-stats,
.profile-hero--personal.has-profile-banner .profile-quiet-stats b,
.profile-hero--personal.has-profile-banner .profile-numbers { color: rgba(255,255,255,.84); }
.profile-hero--personal.has-profile-banner .profile-actions .button--outline { background: rgba(255,255,255,.9); border-color: #fff; color: #244832; }
.profile-hero--personal.has-profile-banner .profile-actions .button--primary { background: #efcc70; border-color: #efcc70; color: #45360f; }

.profile-banner-editor { border: 1px solid #d9e2d5; border-radius: 18px; display: grid; gap: 14px; margin-bottom: 6px; padding: 17px; }
.profile-banner-editor--locked { align-items: center; background: linear-gradient(125deg,#edf4e9,#fff8df); grid-template-columns: 42px minmax(0,1fr) auto; }
.profile-banner-editor--locked > span { align-items: center; background: #315a3d; border-radius: 50%; color: #f0d06f; display: grid; height: 42px; justify-content: center; width: 42px; }
.profile-banner-editor--locked > span svg { font-size: 19px; }
.profile-banner-editor--locked .kicker { margin: 0 0 3px; }
.profile-banner-editor--locked h3 { font: 700 24px/1 var(--serif); margin: 0 0 5px; }
.profile-banner-editor--locked p:not(.kicker) { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 0; }
.profile-banner-editor--locked .button { margin: 0; min-width: 154px; }
.profile-banner-editor--unlocked { background: #f2f6ee; }
.profile-banner-editor--unlocked > div:first-child { align-items: center; display: flex; gap: 10px; }
.profile-banner-editor--unlocked > div:first-child > span { align-items: center; background: #e8c863; border-radius: 50%; color: #59430d; display: grid; height: 34px; justify-content: center; width: 34px; }
.profile-banner-editor--unlocked > div:first-child svg { font-size: 17px; }
.profile-banner-editor--unlocked > div:first-child p { display: grid; gap: 2px; margin: 0; }
.profile-banner-editor--unlocked > div:first-child b { font-size: 11px; }
.profile-banner-editor--unlocked > div:first-child small,
.profile-banner-editor__format { color: var(--muted); font-size: 9px; }
.profile-banner-editor .image-dropzone { min-height: 126px; }
.profile-banner-editor .image-dropzone__preview img { height: 126px; object-fit: cover; }

.cp-shortfall-modal { max-width: 540px; text-align: center; }
.cp-shortfall-modal__icon { align-items: center; background: linear-gradient(145deg,#f5d978,#dca832); border-radius: 50%; box-shadow: 0 9px 23px rgba(166,119,21,.22); color: #5d450c; display: grid; height: 58px; justify-content: center; margin: 0 auto 17px; width: 58px; }
.cp-shortfall-modal__icon svg { font-size: 27px; }
.cp-shortfall-modal > .kicker { color: var(--coral-dark); margin-bottom: 7px; }
.cp-shortfall-modal > h2 { margin-bottom: 14px; }
.cp-shortfall-modal > p:not(.kicker) { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0 auto; max-width: 420px; }
.cp-shortfall-ways { display: grid; gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 22px 0; }
.cp-shortfall-ways > span { background: #f3f6ef; border: 1px solid #dce4d8; border-radius: 13px; display: grid; gap: 5px; padding: 10px 7px; }
.cp-shortfall-ways b { align-items: center; display: flex; font-size: 9px; gap: 4px; justify-content: center; }
.cp-shortfall-ways b svg { color: var(--leaf); font-size: 13px; }
.cp-shortfall-ways em { color: var(--coral-dark); font-size: 10px; font-style: normal; font-weight: 900; }
.cp-shortfall-actions { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.cp-shortfall-actions .button { margin: 0; }
.cp-shortfall-modal > small { color: var(--muted); display: block; font-size: 9px; line-height: 1.45; margin-top: 13px; }
.theme-dark .profile-banner-editor { border-color: #405244; }
.theme-dark .profile-banner-editor--locked { background: linear-gradient(125deg,#203025,#373322); }
.theme-dark .profile-banner-editor--unlocked,
.theme-dark .cp-shortfall-ways > span { background: #202d23; border-color: #3c4d40; }
.theme-dark .profile-banner-editor--locked h3 { color: #f3f6ef; }

@media (max-width: 700px) {
  .profile-hero--personal.has-profile-banner { min-height: 430px; padding: 138px 22px 24px; }
  .profile-banner-editor--locked { align-items: start; grid-template-columns: 42px minmax(0,1fr); }
  .profile-banner-editor--locked .button { grid-column: 1 / -1; width: 100%; }
  .cp-shortfall-ways { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 470px) {
  .profile-hero--personal.has-profile-banner { border-radius: 20px; margin-left: -8px; margin-right: -8px; min-height: 480px; padding-left: 18px; padding-right: 18px; }
  .cp-shortfall-actions { grid-template-columns: 1fr; }
}

/* "Meine Küche" keeps private work out of the public profile. */
.site-header .primary-nav .nav-link--personal { align-items: center; background: #edf3e9; border: 1px solid #d5e1d2; border-radius: 999px; color: #315a3d; display: inline-flex; gap: 6px; padding: 7px 11px; text-decoration: none; }
.site-header .primary-nav .nav-link--personal svg { font-size: 13px; }
.site-header .primary-nav .nav-link--personal:hover,
.site-header .primary-nav .nav-link--personal.is-active { background: #315a3d; border-color: #315a3d; color: #fff; text-decoration: none; }
.profile-page .achievement-vault { margin-bottom: 22px; }
.profile-published-recipes { padding-top: 40px; }
.my-kitchen-page { padding-bottom: 100px; padding-top: 42px; }
.my-kitchen-hero { align-items: end; background: linear-gradient(125deg,#203d2a,#315f43 58%,#677f54); border-radius: 28px; color: #f7f8ef; display: flex; gap: 30px; justify-content: space-between; min-height: 300px; overflow: hidden; padding: 42px; position: relative; }
.my-kitchen-hero::after { background: radial-gradient(circle,rgba(241,205,107,.34),transparent 67%); content: ""; height: 360px; pointer-events: none; position: absolute; right: -90px; top: -150px; width: 360px; }
.my-kitchen-hero > * { position: relative; z-index: 1; }
.my-kitchen-hero .kicker { color: #ead585; }
.my-kitchen-hero h1 { color: #fff; font: 700 clamp(56px,7vw,88px)/.88 var(--serif); margin: 0 0 17px; }
.my-kitchen-hero h1 em { color: #f0d47d; }
.my-kitchen-hero > div > p:not(.kicker) { color: rgba(244,248,238,.8); font-size: 14px; line-height: 1.6; margin: 0; max-width: 610px; }
.my-kitchen-hero > .button { background: #f0cd69; border-color: #f0cd69; color: #46350c; flex: 0 0 auto; }
.my-kitchen-stats { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 29px; }
.my-kitchen-stats span { color: rgba(244,248,238,.68); font-size: 10px; }
.my-kitchen-stats b { color: #fff; display: block; font: 700 25px/1 var(--serif); margin-bottom: 3px; }
.my-kitchen-tabs { align-items: center; background: var(--surface); border: 1px solid #dce4d8; border-radius: 18px; box-shadow: 0 12px 30px rgba(37,56,40,.07); display: flex; gap: 7px; margin: -22px 26px 0; padding: 10px; position: relative; z-index: 2; }
.my-kitchen-tabs a { align-items: center; border-radius: 12px; color: var(--muted); display: inline-flex; font-size: 11px; font-weight: 800; gap: 7px; padding: 10px 12px; text-decoration: none; }
.my-kitchen-tabs a:hover { background: #eef4ea; color: var(--leaf); }
.my-kitchen-tabs a:last-child { margin-left: auto; }
.my-kitchen-tabs svg { color: var(--leaf); font-size: 15px; }
.my-kitchen-tabs b { align-items: center; background: #e7eee3; border-radius: 999px; color: var(--leaf); display: inline-flex; font-size: 8px; justify-content: center; min-width: 20px; padding: 3px 6px; }
.my-kitchen-section { scroll-margin-top: 185px; }
.my-kitchen-section--drafts { background: #f0f5ec; border: 1px solid #dbe5d7; margin-top: 58px; padding: 30px; }
.my-kitchen-section--published { padding-top: 82px; }
.my-kitchen-section .section-heading > p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0; max-width: 330px; }
.my-kitchen-empty { align-items: center; background: rgba(255,255,255,.7); border: 1px dashed #cbd8c7; display: grid; gap: 15px; grid-column: 1 / -1; grid-template-columns: 46px minmax(0,1fr) auto; min-height: 120px; padding: 20px; }
.my-kitchen-empty > span { align-items: center; background: #e1ebdd; border-radius: 50%; color: var(--leaf); display: grid; height: 46px; justify-content: center; width: 46px; }
.my-kitchen-empty > span svg { font-size: 21px; }
.my-kitchen-empty h3 { font: 700 24px/1 var(--serif); margin: 0 0 5px; }
.my-kitchen-empty p { color: var(--muted); font-size: 10px; margin: 0; }
.theme-dark .site-header .primary-nav .nav-link--personal { background: #223126; border-color: #405443; color: #d8ead3; }
.theme-dark .site-header .primary-nav .nav-link--personal:hover,
.theme-dark .site-header .primary-nav .nav-link--personal.is-active { background: #4a744f; border-color: #4a744f; color: #fff; }
.theme-dark .my-kitchen-tabs { background: #1b281f; border-color: #3a4d3e; }
.theme-dark .my-kitchen-tabs a:hover { background: #27372b; }
.theme-dark .my-kitchen-section--drafts { background: #1c2920; border-color: #3b4d3e; }
.theme-dark .my-kitchen-empty { background: #202d23; border-color: #455a49; }

@media (max-width: 720px) {
  .site-header .primary-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .site-header .primary-nav::-webkit-scrollbar { display: none; }
  .my-kitchen-page { padding-top: 25px; }
  .my-kitchen-hero { align-items: flex-start; flex-direction: column; min-height: 0; padding: 34px 26px 52px; }
  .my-kitchen-hero > .button { width: 100%; }
  .my-kitchen-tabs { margin-left: 12px; margin-right: 12px; overflow-x: auto; }
  .my-kitchen-tabs a { flex: 0 0 auto; }
  .my-kitchen-tabs a:last-child { margin-left: 0; }
  .my-kitchen-section--drafts { margin-left: -8px; margin-right: -8px; padding: 24px 18px; }
  .my-kitchen-empty { align-items: start; grid-template-columns: 42px minmax(0,1fr); }
  .my-kitchen-empty .button { grid-column: 1 / -1; width: 100%; }
}

/* Achievement ranks stay readable at a glance and carry their tier color. */
.achievement-vault__title > div > span { font-size: 11px !important; }
.achievement-vault__preview { gap: 10px; mask-image: none; overflow-x: auto; padding: 8px 3px; scrollbar-width: none; }
.achievement-vault__preview::-webkit-scrollbar { display: none; }
.achievement-mini { border-width: 3px; box-shadow: 0 7px 16px rgba(42,58,44,.16), inset 0 0 0 1px rgba(255,255,255,.38); flex: 0 0 62px; height: 62px; min-width: 62px; padding: 10px; }
.achievement-mini svg { filter: drop-shadow(0 2px 2px rgba(25,35,27,.14)); font-size: 28px; stroke-width: 2.05; }
.achievement-mini--tier-0 { background: linear-gradient(145deg,#edf0ed,#cdd3cf); color: #737d76; }
.achievement-mini--tier-1 { background: linear-gradient(145deg,#dce4e2,#9daaa6); color: #354943; }
.achievement-mini--tier-2 { background: linear-gradient(145deg,#efd5bd,#b77750); color: #643c27; }
.achievement-mini--tier-3 { background: linear-gradient(145deg,#f1f4f6,#a9bac4); color: #4e606b; }
.achievement-mini--tier-4 { background: linear-gradient(145deg,#fff0a5,#d6a22d); color: #6c5111; }
.achievement-mini--tier-5 { background: linear-gradient(145deg,#e2f0d2,#81ac6e); color: #315d35; }
.achievement-mini--tier-6 { background: linear-gradient(145deg,#d9f2f1,#5eb2b6); color: #1f6067; }
.achievement-mini--tier-7 { background: linear-gradient(145deg,#efd6ff,#7954c5); color: #fff; }
.achievement-vault__body .section-heading h2 { font-size: clamp(36px,4vw,49px); }
.achievement-vault__body .section-heading .kicker { font-size: 10px; }
.achievement-section__hint { font-size: 12px; max-width: 310px; }
.achievement-card { background: linear-gradient(145deg,color-mix(in srgb,var(--achievement-tone) 10%,#fffef9),#fbfaf3 72%); border-color: color-mix(in srgb,var(--achievement-tone) 38%,#dfe5dc); box-shadow: inset 0 3px 0 color-mix(in srgb,var(--achievement-tone) 42%,transparent),0 9px 23px rgba(36,53,39,.07); grid-template-columns: 82px minmax(0,1fr); min-height: 232px; padding: 19px; }
.achievement-card--tier-0 { --achievement-tone:#78817b; }
.achievement-card__award { gap: 9px; }
.achievement-card__crest { border-width: 4px; box-shadow: 0 7px 17px color-mix(in srgb,var(--achievement-tone) 34%,transparent); min-height: 70px; padding: 10px; width: 70px; }
.achievement-card__crest svg { filter: drop-shadow(0 2px 2px rgba(25,35,27,.14)); font-size: 34px; stroke-width: 2.05; }
.achievement-card__award > span { background: color-mix(in srgb,var(--achievement-tone) 15%,#fff); border-color: color-mix(in srgb,var(--achievement-tone) 48%,#fff); color: color-mix(in srgb,var(--achievement-tone) 90%,#1f2b22); font-size: 10px; letter-spacing: .035em; max-width: none; min-width: 70px; overflow: visible; padding: 5px 9px; text-align: center; text-overflow: clip; }
.achievement-card__copy .kicker { font-size: 10px; }
.achievement-card__copy h3 { font-size: 26px; line-height: 1; margin-bottom: 9px; }
.achievement-card__copy > p:not(.kicker) { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 3; }
.achievement-card__meter { gap: 9px; padding-top: 13px; }
.achievement-card__meter > span { height: 7px; }
.achievement-card__meter b { font-size: 11px; }
.achievement-card__meter em { align-items: center; background: linear-gradient(110deg,#fff2c9,#f7e4aa); border: 1px solid #ead18c; box-shadow: 0 3px 9px rgba(144,105,22,.08); color: #79580f; display: inline-flex; font-size: 10px; gap: 5px; padding: 5px 8px; }
.achievement-card__meter em svg { color: #b78319; flex: 0 0 auto; font-size: 13px; }
.theme-dark .achievement-card { background: linear-gradient(145deg,color-mix(in srgb,var(--achievement-tone) 13%,#202e24),#19241d 72%); border-color: color-mix(in srgb,var(--achievement-tone) 48%,#36463a); }
.theme-dark .achievement-card__award > span { background: color-mix(in srgb,var(--achievement-tone) 22%,#1b271f); border-color: color-mix(in srgb,var(--achievement-tone) 58%,#34463a); color: #edf3e9; }
.theme-dark .achievement-card__meter em { background: linear-gradient(110deg,#3b321d,#312b1c); border-color: #685a2c; color: #f1d782; }

@media (max-width: 760px) {
  .achievement-mini { flex-basis: 58px; height: 58px; min-width: 58px; }
  .achievement-mini svg { font-size: 26px; }
  .achievement-card { grid-template-columns: 78px minmax(0,1fr); }
}
@media (max-width: 420px) {
  .achievement-card { gap: 12px; grid-template-columns: 70px minmax(0,1fr); padding: 16px; }
  .achievement-card__crest { min-height: 64px; width: 64px; }
  .achievement-card__award > span { font-size: 9px; min-width: 64px; padding-left: 6px; padding-right: 6px; }
  .achievement-card__meter > div { align-items: flex-start; flex-direction: column; }
}

/* Trust, consent and legal pages */
.footer-legal { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 18px 0 2px; }
.footer-legal a, .footer-legal button { background: none; border: 0; color: #6f776d; font: inherit; padding: 2px 0; text-decoration: none; }
.footer-legal a:hover, .footer-legal button:hover, .footer-legal a:focus-visible, .footer-legal button:focus-visible { color: var(--leaf); outline: none; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal .footer-withdrawal { border: 1px solid currentColor; border-radius: 9px; color: var(--leaf); font-weight: 750; padding: 10px 14px; }
.footer-legal .footer-withdrawal:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
#withdrawal-form { display: grid; gap: 18px; max-width: 640px; }
#withdrawal-form .field { display: grid; gap: 7px; min-width: 0; }
#withdrawal-form input, #withdrawal-form textarea { box-sizing: border-box; width: 100%; max-width: 100%; font: inherit; }
#withdrawal-form button { justify-self: start; }
#withdrawal-receipt:empty { display: none; }
#withdrawal-receipt { border-left: 3px solid var(--leaf); padding: 8px 16px; overflow-wrap: anywhere; }
.legal-page { padding-bottom: 100px; padding-top: 62px; }
.legal-hero { max-width: 820px; padding-bottom: 42px; }
.legal-hero h1 { font: 650 clamp(2rem, 6vw, 5.375rem)/1.06 var(--serif); letter-spacing: -.045em; margin: 8px 0 20px; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.legal-page, .legal-hero, .legal-document { min-width: 0; }
.legal-document a { overflow-wrap: anywhere; }
.cosmetic-preview-earn { margin-top: 12px; min-height: 44px; }
.legal-hero > p:not(.kicker) { color: #505a50; font-size: 16px; line-height: 1.7; margin: 0 0 15px; max-width: 720px; }
.legal-hero > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.legal-layout { align-items: start; display: grid; gap: 62px; grid-template-columns: 190px minmax(0, 760px); }
.legal-index { border-left: 1px solid #d8ded4; display: grid; gap: 3px; padding-left: 14px; position: sticky; top: 130px; }
.legal-index a { color: #667066; font-size: 12px; font-weight: 750; padding: 6px 0; text-decoration: none; }
.legal-index a:hover { color: var(--leaf); }
.legal-document { display: grid; gap: 10px; }
.legal-document section { border-bottom: 1px solid #e0e3db; padding: 24px 0 30px; }
.legal-document h2 { font: 650 29px/1.08 var(--serif); letter-spacing: -.025em; margin: 0 0 13px; }
.legal-document p, .legal-document li { color: #4f594f; font-size: 14px; line-height: 1.72; }
.legal-document ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 20px; }
.legal-document mark { background: #fff1bd; color: #5b4719; padding: 1px 3px; }
.legal-placeholder { background: #fff8db; border: 1px solid #eed887; color: #5d4b17; padding: 20px 22px; }
.legal-placeholder b { display: block; font-size: 13px; margin-bottom: 8px; text-transform: uppercase; }
.legal-placeholder p { color: inherit; margin: 0; }
.legal-sources { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.legal-sources a { align-items: center; background: #eef4ec; border: 1px solid #d5e1d2; color: var(--leaf); display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; padding: 9px 11px; text-decoration: none; }
.legal-sources svg { height: 14px; width: 14px; }
.cookie-table { border: 1px solid #dfe3da; }
.cookie-table > div { display: grid; gap: 4px; grid-template-columns: minmax(150px,.65fr) minmax(210px,1fr); padding: 17px 18px; }
.cookie-table > div + div { border-top: 1px solid #dfe3da; }
.cookie-table b { color: var(--ink); font-size: 13px; }
.cookie-table span { color: var(--leaf); font-size: 12px; font-weight: 750; }
.cookie-table p { grid-column: 1 / -1; margin: 2px 0 0; }
.privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.button--danger { background: #8d332c; border: 1px solid #8d332c; color: #fff; }
.button--danger:hover { background: #712620; border-color: #712620; }
.auth-legal-check { align-items: flex-start; color: #566056; display: flex; font-size: 11px; gap: 9px; line-height: 1.5; margin: 6px 0 14px; }
.auth-legal-check input { flex: 0 0 auto; margin-top: 2px; width: auto; }
.auth-legal-check a { color: var(--leaf); font-weight: 750; }
.auth-legal-group { display: grid; gap: 2px; margin-top: 4px; }
.legal-acceptance-modal > p:not(.kicker) { color: #596258; font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.legal-acceptance-modal form { display: grid; gap: 9px; }
.legal-acceptance-modal form > .text-button { justify-self: center; margin-top: 2px; }
.content-report { background: transparent; border: 0; color: #7f887d; font-size: 10px; font-weight: 750; margin-top: 12px; padding: 3px 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.content-report:hover, .content-report:focus-visible { color: #8d332c; outline: none; text-decoration-color: currentColor; }
.comment__meta .content-report { margin-top: 0; }
.consent-banner { align-items: center; background: rgba(252,251,245,.98); border: 1px solid #d7ddd2; bottom: 18px; box-shadow: 0 22px 60px rgba(31,49,36,.2); display: flex; gap: 30px; justify-content: space-between; left: 50%; max-width: 1120px; padding: 22px 24px; position: fixed; transform: translateX(-50%); width: calc(100% - 36px); z-index: 120; }
.consent-banner__copy { max-width: 720px; }
.consent-banner .kicker { margin-bottom: 4px; }
.consent-banner h2 { font: 650 25px/1.05 var(--serif); letter-spacing: -.025em; margin: 0 0 8px; }
.consent-banner p:not(.kicker) { color: #566056; font-size: 12px; line-height: 1.55; margin: 0; }
.consent-banner nav { display: flex; gap: 13px; margin-top: 9px; }
.consent-banner nav a { color: var(--leaf); font-size: 11px; font-weight: 800; }
.consent-choices { display: grid; gap: 7px; margin-top: 13px; }
.consent-choices label { align-items: flex-start; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid #dde3d9; border-radius: 12px; cursor: pointer; display: flex; gap: 10px; padding: 10px 12px; }
.consent-choices input { accent-color: var(--leaf); flex: 0 0 auto; height: 17px; margin-top: 2px; width: 17px; }
.consent-choices span { display: grid; gap: 2px; }
.consent-choices b { font-size: 13px; }
.consent-choices small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.consent-banner__actions { display: grid; flex: 0 0 250px; gap: 8px; }
.consent-banner__actions .button { white-space: nowrap; }
.theme-dark .legal-hero > p:not(.kicker), .theme-dark .legal-document p, .theme-dark .legal-document li, .theme-dark .auth-legal-check { color: #bdc8bb; }
.theme-dark .legal-acceptance-modal > p:not(.kicker) { color: #bdc8bb; }
.theme-dark .legal-index, .theme-dark .legal-document section, .theme-dark .cookie-table, .theme-dark .cookie-table > div + div { border-color: #39483b; }
.theme-dark .legal-index a, .theme-dark .footer-legal a, .theme-dark .footer-legal button { color: #a8b4a6; }
.theme-dark .legal-placeholder { background: #40391f; border-color: #756634; color: #f1dea0; }
.theme-dark .legal-document mark { background: #514522; color: #f2dda1; }
.theme-dark .legal-sources a { background: #1f3024; border-color: #3b503f; color: #c8e3c5; }
.theme-dark .cookie-table b { color: #edf2e9; }
.theme-dark .consent-banner { background: rgba(25,35,28,.98); border-color: #435347; box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.theme-dark .consent-banner h2 { color: #f1f4ed; }
.theme-dark .consent-banner p:not(.kicker) { color: #b8c4b6; }
.theme-dark .consent-choices label { background: #202e24; border-color: #405044; }
@media (max-width: 760px) {
  .legal-page { padding-top: 36px; }
  .legal-layout { gap: 28px; grid-template-columns: 1fr; }
  .legal-index { display: flex; flex-wrap: wrap; position: static; }
  .cookie-table > div { grid-template-columns: 1fr; }
  .cookie-table p { grid-column: auto; }
  .consent-banner { align-items: stretch; bottom: 8px; flex-direction: column; gap: 16px; padding: 18px; width: calc(100% - 16px); }
  .consent-banner__actions { display: grid; flex-basis: auto; grid-template-columns: 1fr 1fr; }
  .consent-banner__actions .button:last-child { grid-column: 1 / -1; }
  .consent-banner__actions .button { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 460px) { .consent-banner__actions { grid-template-columns: 1fr; }.footer-legal { gap: 9px 14px; } }

.points-package--locked { cursor: default; display: inline-flex; justify-content: center; opacity: .78; }
.email-verification-progress { align-items: center; background: #eef4eb; border: 1px solid #d5e2d2; border-radius: var(--radius-md); display: flex; gap: 13px; padding: 17px; }
.email-verification-progress > span { align-items: center; animation: email-pulse 1.4s ease-in-out infinite; background: var(--leaf); border-radius: 50%; color: #fff; display: grid; height: 42px; justify-content: center; width: 42px; }
.email-verification-progress p { display: grid; gap: 3px; margin: 0; }
.email-verification-progress small { color: var(--muted); font-size: 12px; }
.account-email-status { align-items: center; display: inline-flex; font-size: 11px; font-weight: 750; gap: 5px; }
.account-email-status.is-verified { color: var(--leaf); }
.account-email-status.is-pending { color: #98651f; }
.theme-dark .email-verification-progress { background: #203025; border-color: #405443; }
@keyframes email-pulse { 50% { box-shadow: 0 0 0 8px rgba(49,95,73,.12); transform: scale(1.04); } }

/* Keep secondary information readable without making the editorial hierarchy noisy. */
.profile-page small,
.timeline-page small,
.account-page small,
.learning-page small,
.help-page small,
.legal-page small { font-size: max(11px, .72rem); }

/* Saved recipes now live in Meine Küche; all five card actions remain visible. */
.social-actions--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.social-actions--compact .social-button--share,
.social-actions--compact .social-button--save { grid-column: auto; grid-row: auto; }
.social-actions--compact .social-button--save.is-active svg { transform: rotate(45deg); }
.social-button--save svg { transition: transform .18s ease; }
.my-kitchen-section--saved { border-bottom: 1px solid #dce4d8; padding-bottom: 82px; padding-top: 82px; }

/* A single creation action and an unmistakably interactive profile control. */
.header-create--single { border-radius: 100px; padding-left: 15px; padding-right: 15px; }
.header-profile-end .profile-chip {
  background: #f4f7f1;
  border: 1px solid #d7e1d4;
  box-shadow: 0 4px 12px rgba(37,56,40,.07);
  cursor: pointer;
  gap: 9px;
  margin-left: 0;
  padding: 4px 11px 4px 5px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-profile-end .profile-chip:hover,
.header-profile-end .profile-chip:focus-visible {
  background: #eaf2e6;
  border-color: #9fbd99;
  box-shadow: 0 7px 18px rgba(37,56,40,.13);
  outline: none;
  transform: translateY(-1px);
}
.profile-chip__copy { display: grid; gap: 1px; line-height: 1; text-align: left; }
.profile-chip__copy > small { color: #7c8879; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.profile-chip__copy .profile-chip__name { display: block; }
.theme-dark .header-profile-end .profile-chip { background: #202d23; border-color: #3a4d3e; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.theme-dark .header-profile-end .profile-chip:hover,
.theme-dark .header-profile-end .profile-chip:focus-visible { background: #293a2e; border-color: #64826a; }
.theme-dark .profile-chip__copy > small { color: #9ba999; }
.theme-dark .my-kitchen-section--saved { border-color: #394a3d; }

@media (max-width: 1050px) {
  .profile-chip__copy { display: none; }
  .header-profile-end .profile-chip { padding: 4px; }
}
@media (max-width: 600px) {
  .header-create--single { border-radius: 100px; padding-left: 10px; padding-right: 10px; }
  .social-actions--compact { gap: 6px; }
  .social-actions--compact .social-button { min-height: 42px; }
}

/* styles/creator-community.css */
/* Creator studio: a warm editorial workbench that belongs to Kulinara. */
.creator-hub {
  isolation: isolate;
  padding-bottom: 118px;
  padding-top: 72px;
  position: relative;
}
.creator-hub::before {
  background:
    radial-gradient(circle at 88% 13%, rgba(225,190,90,.20), transparent 24rem),
    radial-gradient(circle at 8% 91%, rgba(67,105,73,.11), transparent 22rem),
    linear-gradient(145deg, #f5f2e8 0%, #ece9dd 100%);
  border: 1px solid #e2ddce;
  border-radius: 38px;
  box-shadow: inset 0 1px rgba(255,255,255,.72);
  content: '';
  inset: 28px -28px 42px;
  pointer-events: none;
  position: absolute;
  z-index: -2;
}
.creator-hub::after {
  background-image:
    linear-gradient(rgba(50,75,56,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50,75,56,.035) 1px, transparent 1px);
  background-size: 38px 38px;
  border-radius: 38px;
  content: '';
  inset: 28px -28px 42px;
  mask-image: linear-gradient(110deg, transparent 0%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.7) 100%);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.creator-hub__intro { padding-left: clamp(4px, 2vw, 26px); }
.creator-hub__intro .kicker { color: #7d6b34; }
.creator-hub__choices {
  background: #183324;
  border: 1px solid rgba(29,57,40,.4);
  border-radius: 30px;
  box-shadow: 0 24px 52px rgba(39,55,40,.17);
  gap: 11px;
  margin-top: 48px;
  min-height: 410px;
  padding: 11px;
}
.creator-choice {
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 21px;
  box-shadow: inset 0 1px rgba(255,255,255,.28);
}
.creator-choice::after {
  border-color: rgba(255,255,255,.34);
  height: 330px;
  right: -118px;
  top: -132px;
  width: 330px;
}
.creator-choice--recipe {
  background:
    radial-gradient(circle at 92% 9%, rgba(235,207,111,.18), transparent 18rem),
    linear-gradient(145deg, #315e43 0%, #214631 67%, #193925 100%);
  color: #f8f6eb;
}
.creator-choice--recipe .kicker { color: #e8cf78; }
.creator-choice--recipe h2,
.creator-choice--recipe h2 em { color: #fffdf5; }
.creator-choice--recipe > p:not(.kicker) { color: rgba(244,248,238,.76); }
.creator-choice--recipe .creator-choice__icon {
  background: rgba(245,232,178,.14);
  border: 1px solid rgba(244,223,144,.34);
  color: #f2d878;
}
.creator-choice--recipe .creator-choice__go { color: #f5dd8a; }
.creator-choice--book {
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.62), transparent 16rem),
    linear-gradient(145deg, #eee8da 0%, #d9cfbd 100%);
  border-color: #d5cab6;
  color: #3d453b;
}
.creator-choice--book .kicker { color: #837353; }
.creator-choice--book h2 { color: #374238; }
.creator-choice--book h2 em { color: #88704e; }
.creator-choice--book > p:not(.kicker) { color: #706b5f; }
.creator-choice--book .creator-choice__icon {
  background: rgba(255,253,246,.72);
  border: 1px solid rgba(118,102,76,.16);
  color: #75684e;
}
.creator-choice--book .creator-choice__go { color: #5a664f; }
.creator-choice:hover,
.creator-choice:focus-visible { box-shadow: 0 24px 42px rgba(20,42,29,.25), inset 0 1px rgba(255,255,255,.3); }

.theme-dark .creator-hub::before {
  background:
    radial-gradient(circle at 88% 13%, rgba(218,178,70,.11), transparent 24rem),
    radial-gradient(circle at 8% 91%, rgba(99,142,101,.11), transparent 22rem),
    linear-gradient(145deg, #171f19, #1d251f);
  border-color: #334038;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.theme-dark .creator-hub::after { opacity: .42; }
.theme-dark .creator-hub__intro .kicker { color: #d0b866; }
.theme-dark .creator-hub__choices { background: #0f1c14; border-color: #314437; box-shadow: 0 24px 52px rgba(0,0,0,.28); }
.theme-dark .creator-choice--book {
  background: radial-gradient(circle at 86% 12%, rgba(255,255,255,.055), transparent 16rem), linear-gradient(145deg, #302f28, #252820);
  border-color: #49483b;
  color: #e4e0d3;
}
.theme-dark .creator-choice--book h2 { color: #f0ece0; }
.theme-dark .creator-choice--book h2 em { color: #d0b982; }
.theme-dark .creator-choice--book > p:not(.kicker) { color: #bcb6a8; }
.theme-dark .creator-choice--book .creator-choice__icon { background: #39382e; border-color: #555142; color: #d4c292; }
.theme-dark .creator-choice--book .creator-choice__go { color: #d2c9ad; }

@media (max-width: 760px) {
  .creator-hub { padding-bottom: 78px; padding-top: 44px; }
  .creator-hub::before,
  .creator-hub::after { border-radius: 26px; inset: 16px -8px 26px; }
  .creator-hub__intro { padding-left: 12px; padding-right: 12px; }
  .creator-hub__choices { border-radius: 24px; margin-top: 34px; padding: 8px; }
  .creator-choice { border-radius: 17px; }
}

/* Entdecken is a social recipe timeline; Startseite remains the landing page. */
.discover-page {
  background: linear-gradient(180deg, #eef2ec 0%, #f5f5ef 540px, var(--paper) 100%);
  border-top: 1px solid #dfe6dc;
  min-height: 100vh;
  padding-bottom: 110px;
}
.discover-intro {
  align-items: end;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  padding-bottom: 34px;
  padding-top: 46px;
}
.discover-intro h1 { font: 700 clamp(52px, 6vw, 78px)/.9 var(--serif); letter-spacing: -.045em; margin: 4px 0 12px; }
.discover-intro > div > p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; max-width: 570px; }
.timeline-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: 230px minmax(0, 650px) minmax(220px, 270px); justify-content: center; }
.timeline-rail { display: grid; gap: 16px; position: sticky; top: 176px; }
.timeline-rail > section,
.timeline-composer,
.timeline-feed-tabs,
.timeline-post,
.timeline-empty {
  background: rgba(255,255,251,.95);
  border: 1px solid #dde4da;
  box-shadow: 0 8px 24px rgba(40,57,43,.055);
}
.timeline-personal { display: grid; gap: 4px; padding: 17px; }
.timeline-personal > div { align-items: center; border-bottom: 1px solid #e5e9e1; display: flex; gap: 10px; margin-bottom: 7px; padding-bottom: 15px; }
.timeline-personal > div > span { display: grid; gap: 2px; min-width: 0; }
.timeline-personal > div small { color: var(--muted); font-size: 9px; }
.timeline-personal > div b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-personal > a { align-items: center; color: #526052; display: flex; font-size: 11px; font-weight: 750; gap: 9px; padding: 9px 4px; text-decoration: none; }
.timeline-personal > a:hover { color: var(--leaf); }
.timeline-personal > a svg { color: #799076; font-size: 17px; }
.timeline-personal--guest { gap: 10px; padding: 21px; }
.timeline-personal--guest > span { align-items: center; background: #e9f1e5; border-radius: 50%; color: var(--leaf); display: grid; height: 42px; justify-content: center; width: 42px; }
.timeline-personal--guest > span svg { font-size: 20px; }
.timeline-personal--guest h2 { font: 700 25px/.96 var(--serif); margin: 3px 0 0; }
.timeline-personal--guest p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 5px; }
.timeline-categories { display: grid; gap: 3px; padding: 17px; }
.timeline-categories .kicker { margin: 0 0 8px 5px; }
.timeline-categories button { background: transparent; border: 0; color: #687368; cursor: pointer; font: 750 11px/1 var(--sans); padding: 10px; text-align: left; }
.timeline-categories button:hover,
.timeline-categories button.is-active { background: #e9f1e6; color: var(--leaf); }
.timeline-stream { display: grid; gap: 16px; min-width: 0; }
.timeline-composer { align-items: center; display: flex; gap: 11px; padding: 13px 15px; }
.timeline-composer > .avatar { flex: 0 0 auto; }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) { background: #f1f3ed; border: 1px solid #e0e5dc; color: #687168; display: grid; flex: 1; gap: 2px; min-width: 0; padding: 10px 14px; text-align: left; }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile):hover { background: #eaf0e7; border-color: #cbd8c8; }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) span { color: #3f4a40; font-size: 12px; font-weight: 750; }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) small { color: var(--muted); font-size: 9px; }
.timeline-composer__add { align-items: center; background: var(--leaf); border: 0; border-radius: 50%; color: #fff; display: flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.timeline-composer__add svg { font-size: 18px; }
.timeline-composer--guest > span { color: #bd8c29; }
.timeline-composer--guest > span svg { font-size: 23px; }
.timeline-composer--guest > p { display: grid; flex: 1; gap: 2px; margin: 0; }
.timeline-composer--guest > p b { font-size: 12px; }
.timeline-composer--guest > p small { color: var(--muted); font-size: 10px; }
.timeline-feed-tabs { align-items: center; display: flex; gap: 18px; justify-content: space-between; padding: 13px 15px; }
.timeline-feed-tabs > div:first-child { display: grid; gap: 2px; }
.timeline-feed-tabs > div:first-child b { font: 700 22px/1 var(--serif); }
.timeline-feed-tabs > div:first-child small { color: var(--muted); font-size: 9px; }
.timeline-feed-tabs .feed-tabs { flex-wrap: nowrap; margin: 0; }
.timeline-feed-tabs .chip { padding: 7px 9px; white-space: nowrap; }
.timeline-post { overflow: hidden; }
.timeline-post__header { align-items: center; display: flex; justify-content: space-between; padding: 17px 18px 12px; }
.timeline-post__author { align-items: center; background: transparent; border: 0; color: inherit; display: flex; gap: 10px; min-width: 0; padding: 0; text-align: left; }
.timeline-post__author > span { display: grid; gap: 3px; min-width: 0; }
.timeline-post__author b { font-size: 12px; }
.timeline-post__author small { color: var(--muted); font-size: 9px; }
.timeline-post__more { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #8b9489; display: flex; height: 34px; justify-content: center; text-decoration: none; width: 34px; }
.timeline-post__more:hover { background: #eef1eb; color: var(--leaf); }
.timeline-post__more svg { font-size: 18px; }
.timeline-post__copy { padding: 0 18px 16px; }
.timeline-post__copy > p:first-child { color: #6f796f; font-size: 10px; margin: 0 0 11px; }
.timeline-post__copy h2 { font: 700 clamp(29px, 4vw, 39px)/.98 var(--serif); letter-spacing: -.025em; margin: 0 0 9px; }
.timeline-post__copy h2 a { color: var(--ink); text-decoration: none; }
.timeline-post__copy h2 a:hover { color: var(--leaf); }
.timeline-post__copy > p:nth-of-type(2) { color: #596359; font-size: 12px; line-height: 1.55; margin: 0; }
.timeline-post__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.timeline-post__tags span { color: #738670; font-size: 9px; font-weight: 750; }
.timeline-post__image { display: block; height: clamp(310px, 47vw, 470px); overflow: hidden; position: relative; }
.timeline-post__image > img { height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.7,.2,1); width: 100%; }
.timeline-post__image:hover > img { transform: scale(1.018); }
.timeline-post__image > span { align-items: center; background: #f2d779; color: #4f3b0b; display: inline-flex; font-size: 9px; font-weight: 850; gap: 5px; left: 13px; padding: 7px 9px; position: absolute; top: 13px; }
.timeline-post__image > span svg { font-size: 14px; }
.timeline-post__image > i { align-items: center; background: rgba(21,40,28,.76); bottom: 13px; color: #fff; display: inline-flex; font-size: 10px; font-style: normal; font-weight: 800; gap: 7px; padding: 9px 11px; position: absolute; right: 13px; }
.timeline-post__image > i svg { font-size: 15px; }
.timeline-post__facts { color: #7b857a; display: flex; font-size: 9px; justify-content: space-between; padding: 12px 18px 0; }
.timeline-post__facts span { align-items: center; display: inline-flex; gap: 5px; }
.timeline-post__facts svg { color: var(--coral); font-size: 14px; }
.timeline-post > .social-actions { margin: 11px 18px 0; padding-bottom: 11px; }
.timeline-post > .social-actions .social-button { flex: 1; justify-content: center; min-height: 38px; }
.timeline-post > .social-actions .social-button--save { flex: 0 0 40px; margin-left: 2px; }
.timeline-trending,
.timeline-creators { padding: 18px; }
.timeline-trending .kicker { margin-bottom: 11px; }
.timeline-trending > a { align-items: start; color: inherit; display: grid; gap: 10px; grid-template-columns: 25px minmax(0,1fr); padding: 12px 0; text-decoration: none; }
.timeline-trending > a + a { border-top: 1px solid #e5e9e1; }
.timeline-trending > a > span { color: #b18a32; font: 700 16px/1 var(--serif); }
.timeline-trending > a div { display: grid; gap: 4px; min-width: 0; }
.timeline-trending > a b { font-size: 11px; line-height: 1.28; }
.timeline-trending > a small { color: var(--muted); font-size: 8px; }
.timeline-creators > div:first-child { align-items: center; display: flex; justify-content: space-between; margin-bottom: 9px; }
.timeline-creators > div:first-child .kicker { margin: 0; }
.timeline-creators > div:first-child a { color: var(--leaf); font-size: 9px; font-weight: 800; }
.timeline-creators > button { align-items: center; background: transparent; border: 0; color: inherit; display: grid; gap: 8px; grid-template-columns: auto minmax(0,1fr) auto; padding: 10px 0; text-align: left; width: 100%; }
.timeline-creators > button > span { display: grid; gap: 2px; min-width: 0; }
.timeline-creators > button b { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-creators > button small { color: var(--muted); font-size: 8px; }
.timeline-creators > button > svg { color: #8e9b8b; font-size: 14px; }
.timeline-empty { padding: 60px 28px; text-align: center; }
.timeline-empty > span { color: #87a284; }
.timeline-empty > span svg { font-size: 30px; }
.timeline-empty h2 { font: 700 31px/1 var(--serif); margin: 14px 0 8px; }
.timeline-empty p { color: var(--muted); font-size: 11px; margin: 0; }

.theme-dark .discover-page { background: linear-gradient(180deg, #151e18 0%, #121813 540px, var(--paper) 100%); border-color: #344138; }
.theme-dark .timeline-rail > section,
.theme-dark .timeline-composer,
.theme-dark .timeline-feed-tabs,
.theme-dark .timeline-post,
.theme-dark .timeline-empty { background: rgba(26,36,29,.97); border-color: #36483a; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.theme-dark .timeline-personal > div,
.theme-dark .timeline-trending > a + a { border-color: #35443a; }
.theme-dark .timeline-personal > a,
.theme-dark .timeline-post__copy > p:nth-of-type(2) { color: #bac5b8; }
.theme-dark .timeline-categories button { color: #afbaad; }
.theme-dark .timeline-categories button:hover,
.theme-dark .timeline-categories button.is-active { background: #26372b; color: #d9ead5; }
.theme-dark .timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) { background: #222f26; border-color: #3a4a3d; }
.theme-dark .timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) span { color: #e1e9de; }
.theme-dark .timeline-post__copy h2 a { color: #f2f0e7; }
.theme-dark .timeline-post__copy h2 a:hover { color: #a9cfa6; }
.theme-dark .timeline-post__more:hover { background: #26352a; }

@media (max-width: 1100px) {
  .timeline-layout { grid-template-columns: 210px minmax(0, 650px); }
  .timeline-rail--right { display: none; }
}
@media (max-width: 760px) {
  .discover-intro { align-items: flex-start; flex-direction: column; padding-bottom: 25px; padding-top: 33px; }
  .discover-intro > .button { width: 100%; }
  .timeline-layout { display: flex; flex-direction: column; gap: 12px; }
  .timeline-rail--left { position: static; width: 100%; }
  .timeline-personal { display: none; }
  .timeline-categories { display: flex; gap: 6px; overflow-x: auto; padding: 9px; }
  .timeline-categories .kicker { display: none; }
  .timeline-categories button { flex: 0 0 auto; padding: 9px 11px; }
  .timeline-stream { gap: 12px; width: 100%; }
  .timeline-feed-tabs { align-items: flex-start; flex-direction: column; gap: 12px; }
  .timeline-feed-tabs .feed-tabs { max-width: 100%; overflow-x: auto; }
  .timeline-post__image { height: min(78vw, 430px); }
  .timeline-post__facts { gap: 9px; }
  .timeline-post > .social-actions { margin-left: 10px; margin-right: 10px; }
}
@media (max-width: 470px) {
  .timeline-composer { padding: 11px; }
  .timeline-composer > .avatar { display: none; }
  .timeline-composer--guest > span { display: none; }
  .timeline-post__header { padding-left: 14px; padding-right: 14px; }
  .timeline-post__copy { padding-left: 14px; padding-right: 14px; }
  .timeline-post__facts { flex-direction: column; padding-left: 14px; padding-right: 14px; }
  .timeline-post > .social-actions .social-button span { display: none; }
}

/* Final timeline pass: explain ranking, reward trust and tighten interactions. */
.timeline-feed-tabs > div:first-child { grid-template-columns: auto 1fr; }
.timeline-feed-tabs > div:first-child > b,
.timeline-feed-tabs > div:first-child > small { grid-column: 1 / -1; }
.timeline-feed-tabs__badge {
  align-items: center;
  background: #e8f0e5;
  color: var(--leaf);
  display: inline-flex;
  font-size: 8px;
  font-weight: 850;
  gap: 5px;
  justify-self: start;
  letter-spacing: .055em;
  margin-bottom: 3px;
  padding: 5px 7px;
  text-transform: uppercase;
}
.timeline-feed-tabs__badge svg { font-size: 12px; }
.timeline-post { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.timeline-post:hover { border-color: #ccd9c9; box-shadow: 0 14px 34px rgba(40,57,43,.09); }
.timeline-post--followed { border-color: #c9d9c6; }
.timeline-post__context {
  align-items: center;
  border-bottom: 1px solid #e5eae2;
  color: #6f7d6e;
  display: flex;
  font-size: 9px;
  font-weight: 780;
  gap: 6px;
  min-height: 31px;
  padding: 7px 18px;
}
.timeline-post__context svg { font-size: 13px; }
.timeline-post__context b { background: #f1e5bc; color: #72591c; font-size: 7px; letter-spacing: .06em; margin-left: auto; padding: 4px 6px; text-transform: uppercase; }
.timeline-post__context.is-followed { background: #f0f6ed; color: #416348; }
.timeline-post__context.is-followed svg { color: #5f8a63; }
.timeline-post__context.is-featured { background: #fff7da; color: #745815; }
.timeline-post__context.is-new { color: #5e7a60; }
.timeline-post__context.is-discovery { color: #7a735f; }
.timeline-post__category { background: #e8f0e5; color: var(--leaf) !important; padding: 5px 7px; }
.timeline-post__image > .timeline-post__time {
  background: rgba(250,248,238,.92);
  color: #304335;
  left: 13px;
  top: 13px;
}
.timeline-post__facts > div { display: flex; flex-wrap: wrap; gap: 11px; }
.timeline-post__facts > div span { white-space: nowrap; }
.timeline-post__facts > div span:nth-child(2) svg { color: #5d855f; }
.timeline-post__facts > div span:nth-child(3) svg { color: #899387; }
.timeline-post > .social-actions .social-button:hover { transform: translateY(-1px); }
.timeline-post > .social-actions .social-button:focus-visible { outline: 2px solid #91aa8f; outline-offset: 1px; }
.timeline-trending > a { align-items: center; grid-template-columns: 23px 48px minmax(0,1fr); }
.timeline-trending > a > img { height: 48px; object-fit: cover; width: 48px; }
.timeline-trending > a:hover b { color: var(--leaf); }
.timeline-trending > a:hover > img { filter: saturate(1.08); }
.timeline-creators > button { cursor: pointer; }
.timeline-creators > button:hover b { color: var(--leaf); }
.timeline-creators__empty { color: var(--muted); font-size: 9px; line-height: 1.45; margin: 12px 0 2px; }
.timeline-note { align-items: flex-start; background: #223f2d !important; border-color: #223f2d !important; color: #fff; display: flex; gap: 9px; padding: 16px; }
.timeline-note > svg { color: #e0c66c; flex: 0 0 auto; font-size: 18px; }
.timeline-note p { display: grid; gap: 4px; margin: 0; }
.timeline-note b { font-size: 10px; }
.timeline-note small { color: rgba(241,246,236,.72); font-size: 8px; line-height: 1.45; }
.timeline-empty .button { margin-top: 19px; }
.theme-dark .timeline-feed-tabs__badge { background: #293c2e; color: #b7d7b3; }
.theme-dark .timeline-post:hover,
.theme-dark .timeline-post--followed { border-color: #4a6250; }
.theme-dark .timeline-post__context { border-color: #35453a; color: #b5c0b3; }
.theme-dark .timeline-post__context.is-followed { background: #213126; color: #b7d5b3; }
.theme-dark .timeline-post__context.is-featured { background: #3a331e; color: #efd98d; }
.theme-dark .timeline-post__context b { background: #40391f; color: #f0da90; }
.theme-dark .timeline-post__category { background: #26382b; color: #bdd8ba !important; }
.theme-dark .timeline-post__image > .timeline-post__time { background: rgba(28,39,31,.9); color: #e4eee1; }
.theme-dark .timeline-note { background: #1d3526 !important; border-color: #3d5644 !important; }

@media (max-width: 760px) {
  .timeline-feed-tabs > div:first-child { width: 100%; }
  .timeline-post__facts { align-items: flex-start; flex-direction: column; }
  .timeline-post__facts > div { gap: 9px; }
}
@media (max-width: 470px) {
  .timeline-post__context { padding-left: 14px; padding-right: 14px; }
  .timeline-post__facts > div span:nth-child(3) { display: none; }
  .timeline-post__image > .timeline-post__time { left: 9px; top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-post,
  .timeline-post__image > img,
  .timeline-post > .social-actions .social-button { transition: none; }
  .timeline-post:hover,
  .timeline-post > .social-actions .social-button:hover { transform: none; }
}

/* Timeline final polish: one soft geometry and readable type across the page. */
.timeline-rail > section,
.timeline-composer,
.timeline-feed-tabs,
.timeline-post,
.timeline-empty { border-radius: 20px; }
.timeline-self-link {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e5e9e1;
  border-radius: 12px 12px 8px 8px;
  color: inherit;
  display: flex;
  font: inherit;
  gap: 10px;
  margin-bottom: 7px;
  padding: 5px 4px 15px;
  text-align: left;
  width: 100%;
}
.timeline-self-link > span { display: grid; gap: 2px; min-width: 0; }
.timeline-self-link small { color: var(--muted); font-size: 11px; }
.timeline-self-link b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-self-link:hover { background: #f3f6f0; color: var(--leaf); }
.timeline-self-link:focus-visible,
.timeline-composer__profile:focus-visible { outline: 2px solid #91aa8f; outline-offset: 2px; }
.timeline-personal > a { border-radius: 10px; font-size: 12px; padding: 10px 7px; }
.timeline-personal > a:hover { background: #f3f6f0; }
.timeline-personal--guest p { font-size: 12px; }
.timeline-categories button { border-radius: 10px; font-size: 12px; }
.timeline-composer > button.timeline-composer__profile {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0;
  width: 40px;
}
.timeline-composer__profile .avatar { transition: box-shadow .2s ease, transform .2s ease; }
.timeline-composer > button.timeline-composer__profile:hover { background: transparent; border-color: transparent; }
.timeline-composer__profile:hover .avatar { box-shadow: 0 0 0 3px #dce9d9; transform: scale(1.035); }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) { border-radius: 13px; }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) span { font-size: 13px; }
.timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) small { font-size: 11px; }
.timeline-feed-tabs > div:first-child b { font-size: 24px; }
.timeline-feed-tabs > div:first-child small { font-size: 11px; line-height: 1.4; }
.timeline-feed-tabs__badge { border-radius: 999px; font-size: 10px; }
.timeline-post__context { font-size: 11px; }
.timeline-post__context b { border-radius: 999px; font-size: 9px; }
.timeline-post__author b { font-size: 13px; }
.timeline-post__author small { font-size: 11px; }
.timeline-post__copy > p:first-child { font-size: 11px; }
.timeline-post__copy > p:nth-of-type(2) { font-size: 14px; }
.timeline-post__tags span { font-size: 11px; }
.timeline-post__category,
.timeline-post__image > span,
.timeline-post__image > i { border-radius: 10px; }
.timeline-post__image > span { font-size: 10px; }
.timeline-post__image > i { font-size: 11px; }
.timeline-post__facts { font-size: 11px; line-height: 1.4; }
.timeline-trending a,
.timeline-creators button { border-radius: 11px; }
.timeline-trending b,
.timeline-creators b { font-size: 12px; }
.timeline-trending small,
.timeline-creators small,
.timeline-note small { font-size: 10px; line-height: 1.4; }
.timeline-note b { font-size: 12px; }
.timeline-empty p { font-size: 12px; }
.theme-dark .timeline-self-link { border-color: #3a493d; }
.theme-dark .timeline-self-link:hover,
.theme-dark .timeline-personal > a:hover { background: #26352a; }
@media (max-width: 470px) {
  .timeline-composer > button.timeline-composer__profile { display: flex; height: 34px; min-width: 34px; width: 34px; }
  .timeline-composer__profile .avatar { height: 34px; width: 34px; }
  .timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) small { display: none; }
  .timeline-composer > button:not(.timeline-composer__add):not(.timeline-composer__profile) { padding: 10px 11px; }
}

/* Achievement rewards remain visible before opening the vault and explicit on every card. */
.achievement-vault__reward-summary {
  align-items: center;
  background: #fff1c6;
  border: 1px solid #ead28e;
  border-radius: 999px;
  color: #74550f !important;
  display: inline-flex;
  font-size: 10px !important;
  font-weight: 850 !important;
  gap: 5px;
  margin-top: 5px;
  padding: 5px 8px;
  width: max-content;
}
.achievement-vault__reward-summary svg { color: #b78319; font-size: 13px; }
.achievement-reward-guide {
  background: linear-gradient(120deg,#f1f5eb,#fffaf0);
  border: 1px solid #d7e1d2;
  border-radius: 18px;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(7,minmax(0,1fr));
  margin: -7px 0 23px;
  padding: 11px;
}
.achievement-reward-guide > span {
  align-items: center;
  background: rgba(255,255,255,.72);
  border: 1px solid #e1e5dc;
  border-radius: 12px;
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0;
  padding: 9px 5px;
  text-align: center;
}
.achievement-reward-guide b { color: #536254; font-size: 10px; }
.achievement-reward-guide strong { color: var(--leaf); font: 800 18px/1 var(--sans); }
.achievement-reward-guide small { color: var(--muted); font-size: 8px; font-weight: 800; }
.achievement-card__status { display: grid !important; flex: 1; gap: 2px !important; min-width: 0; }
.achievement-card__status b { font-size: 12px; }
.achievement-card__status small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.achievement-card__reward {
  align-items: center;
  background: linear-gradient(110deg,#fff0bd,#f8dfa0);
  border: 1px solid #e5c873;
  border-radius: 12px;
  color: #76540b;
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
  padding: 7px 9px;
}
.achievement-card__reward > svg { color: #ac7711; flex: 0 0 auto; font-size: 16px; }
.achievement-card__reward > span { display: grid; gap: 1px; }
.achievement-card__reward small { color: #8c6d25; font-size: 8px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.achievement-card__reward strong { color: #634707; font-size: 11px; line-height: 1.2; white-space: nowrap; }
.achievement-card__reward.is-complete { background: #e9f3e5; border-color: #bfd4ba; color: var(--leaf); }
.achievement-card__reward.is-complete > svg,
.achievement-card__reward.is-complete strong { color: var(--leaf); }
.theme-dark .achievement-vault__reward-summary { background: #3b321d; border-color: #685a2c; color: #f1d782 !important; }
.theme-dark .achievement-reward-guide { background: linear-gradient(120deg,#1c2b20,#2d2b1e); border-color: #3e5041; }
.theme-dark .achievement-reward-guide > span { background: rgba(24,36,28,.84); border-color: #3b4c3e; }
.theme-dark .achievement-reward-guide b,
.theme-dark .achievement-reward-guide small,
.theme-dark .achievement-card__status small { color: #b5c2b3; }
.theme-dark .achievement-reward-guide strong { color: #b9d9b5; }
.theme-dark .achievement-card__reward { background: linear-gradient(110deg,#3b321d,#312b1c); border-color: #685a2c; }
.theme-dark .achievement-card__reward small { color: #d1bc79; }
.theme-dark .achievement-card__reward strong { color: #f1d782; }
.theme-dark .achievement-card__reward.is-complete { background: #213426; border-color: #46604b; }
@media (max-width: 900px) {
  .achievement-reward-guide { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .achievement-vault__reward-summary { font-size: 9px !important; white-space: normal; }
  .achievement-reward-guide { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .achievement-card__meter > div { align-items: stretch; }
  .achievement-card__reward { justify-content: center; width: 100%; }
  .achievement-card__reward strong { white-space: normal; }
}

/* Final radius safeguards for later component-specific rules. */
.learning-hero,
.creator-choice,
.creator-spotlight-card { border-radius: var(--radius-xl); overflow: hidden; }
.profile-level,
.profile-banner-editor,
.learning-count,
.points-package { border-radius: var(--radius-md); }
.book-detail__grid > img { border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 680px) {
  .learning-hero,
  .creator-choice,
  .creator-spotlight-card { border-radius: 18px; }
}

/* A single combined rank replaces the ambiguous row of achievement emblems. */
.profile-hero--personal:not(.has-profile-banner) {
  background: linear-gradient(145deg,#fffef9 0%,#f6f8f1 72%,#eef4e9 100%);
  border-radius: 30px;
  box-shadow: 0 18px 46px rgba(35,57,39,.075);
  padding: 34px;
}
.profile-side { gap: 9px; }
.profile-side .profile-level {
  background: linear-gradient(135deg,#fff4cb 0%,#fbefd0 48%,#edf4e6 100%);
  border: 1px solid rgba(183,145,53,.28);
  border-radius: 22px;
  box-shadow: 0 10px 25px rgba(112,85,25,.09), inset 0 1px 0 rgba(255,255,255,.75);
  gap: 13px;
  min-height: 80px;
  padding: 14px 16px;
}
.profile-side .profile-level > span {
  background: linear-gradient(145deg,#315a3d,#213e2b);
  box-shadow: 0 7px 18px rgba(35,68,45,.22);
  color: #f3d375;
  height: 46px;
  width: 46px;
}
.profile-side .profile-level > span svg { font-size: 23px; }
.profile-side .profile-level div { gap: 5px; min-width: 0; width: 100%; }
.profile-side .profile-level b { color: #4e411d; font-size: 15px; letter-spacing: -.01em; }
.profile-side .profile-level small { color: #786a43; font-size: 10px; line-height: 1.35; }
.profile-side .profile-level i { background: rgba(126,104,45,.17); height: 6px; }
.profile-side .profile-level i::after { background: linear-gradient(90deg,#be8e29,#e5bc55); }
.profile-quiet-stats { gap: 7px; padding: 0; }
.profile-quiet-stats span {
  background: rgba(255,255,255,.72);
  border: 1px solid #dce5d8;
  border-radius: 999px;
  min-height: 31px;
  padding: 6px 9px;
}
.profile-hero--personal.has-profile-banner .profile-quiet-stats span {
  background: rgba(15,31,20,.52);
  border-color: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
}
.theme-dark .profile-hero--personal:not(.has-profile-banner) {
  background: linear-gradient(145deg,#1b281f 0%,#18231c 72%,#202d23 100%);
}
.theme-dark .profile-side .profile-level {
  background: linear-gradient(135deg,#3b321d,#2d2a1d 55%,#223226);
  border-color: #65582c;
  box-shadow: none;
}
.theme-dark .profile-side .profile-level b { color: #f5e5ad; }
.theme-dark .profile-side .profile-level small { color: #cbbb88; }
.theme-dark .profile-quiet-stats span { background: #202d23; border-color: #3b4c3e; }
.achievement-vault {
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(35,57,39,.085);
}
.achievement-vault > summary {
  grid-template-columns: minmax(250px,.9fr) minmax(310px,1.15fr) 38px;
  min-height: 126px;
  padding: 22px 24px;
}
.achievement-vault__title { gap: 15px !important; }
.achievement-vault__seal {
  background: linear-gradient(145deg,#315a3d,#1f3b29);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 9px 22px rgba(36,68,44,.2);
  color: #f1d273;
  height: 60px;
  width: 60px;
}
.achievement-vault__seal svg { font-size: 28px; }
.achievement-vault__title b {
  font-size: clamp(27px,2.4vw,34px) !important;
  letter-spacing: -.025em;
}
.achievement-vault__title > div > span:not(.achievement-vault__reward-summary) {
  font-size: 11px !important;
  line-height: 1.4;
}
.achievement-overall {
  --achievement-overall-tone: #737f77;
  align-items: center;
  background: color-mix(in srgb,var(--achievement-overall-tone) 9%,rgba(255,255,255,.82));
  border: 1px solid color-mix(in srgb,var(--achievement-overall-tone) 32%,#dfe5dc);
  border-radius: 22px;
  display: grid;
  gap: 12px;
  grid-template-columns: 50px minmax(0,1fr);
  min-width: 0;
  padding: 14px 16px;
}
.achievement-overall--tier-1 { --achievement-overall-tone:#677873; }
.achievement-overall--tier-2 { --achievement-overall-tone:#a16c4e; }
.achievement-overall--tier-3 { --achievement-overall-tone:#738692; }
.achievement-overall--tier-4 { --achievement-overall-tone:#c18d20; }
.achievement-overall--tier-5 { --achievement-overall-tone:#609154; }
.achievement-overall--tier-6 { --achievement-overall-tone:#438f94; }
.achievement-overall--tier-7 { --achievement-overall-tone:#7851bc; }
.achievement-overall__crest {
  align-items: center;
  background: color-mix(in srgb,var(--achievement-overall-tone) 18%,#fff);
  border: 2px solid color-mix(in srgb,var(--achievement-overall-tone) 46%,#fff);
  border-radius: 17px;
  color: var(--achievement-overall-tone);
  display: flex;
  height: 50px;
  justify-content: center;
  width: 50px;
}
.achievement-overall__crest svg { font-size: 27px; stroke-width: 2.1; }
.achievement-overall > div { display: grid; gap: 2px; min-width: 0; }
.achievement-overall small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.achievement-overall strong {
  color: var(--achievement-overall-tone);
  font: 750 27px/1 var(--serif);
}
.achievement-overall > div > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.achievement-overall i {
  background: color-mix(in srgb,var(--achievement-overall-tone) 14%,#fff);
  border-radius: 99px;
  display: block;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
}
.achievement-overall i > span {
  background: linear-gradient(90deg,var(--achievement-overall-tone),color-mix(in srgb,var(--achievement-overall-tone) 52%,#f2ca61));
  border-radius: inherit;
  display: block;
  height: 100%;
  width: var(--achievement-progress);
}
.achievement-vault__toggle {
  border-radius: 13px;
  box-shadow: 0 5px 13px rgba(37,61,41,.09);
}
.achievement-vault__body { padding: 32px; }
.achievement-reward-guide { border-radius: 22px; }
.achievement-reward-guide > span { border-radius: 15px; }
.achievement-card { border-radius: 24px; }
.theme-dark .achievement-overall {
  background: color-mix(in srgb,var(--achievement-overall-tone) 17%,#1b271f);
  border-color: color-mix(in srgb,var(--achievement-overall-tone) 48%,#35463a);
}
.theme-dark .achievement-overall__crest {
  background: color-mix(in srgb,var(--achievement-overall-tone) 24%,#1b271f);
  border-color: color-mix(in srgb,var(--achievement-overall-tone) 58%,#34463a);
  color: #f1f5ed;
}
.theme-dark .achievement-overall strong { color: #f1f5ed; }
.theme-dark .achievement-overall i { background: rgba(255,255,255,.11); }
@media (max-width: 820px) {
  .achievement-vault > summary { grid-template-columns: minmax(0,1fr) 38px; }
  .achievement-overall { grid-column: 1 / -1; grid-row: 2; }
  .achievement-vault__toggle { grid-column: 2; grid-row: 1; }
}
@media (max-width: 680px) {
  .profile-hero--personal:not(.has-profile-banner) { border-radius: 22px; padding: 24px; }
  .profile-side { max-width: none; width: 100%; }
  .achievement-vault { border-radius: 22px; }
}
@media (max-width: 480px) {
  .achievement-vault__title { align-items: flex-start; }
  .achievement-vault__seal { border-radius: 15px; height: 48px; width: 48px; }
  .achievement-vault__seal svg { font-size: 21px; }
  .achievement-vault__title b { font-size: 25px !important; }
  .achievement-overall { border-radius: 18px; grid-template-columns: 44px minmax(0,1fr); padding: 11px; }
  .achievement-overall__crest { border-radius: 13px; height: 44px; width: 44px; }
  .achievement-overall strong { font-size: 23px; }
  .achievement-vault__body { padding: 22px 16px; }
}

/* Restaurant accounts: from registration to menu, visit information and reviews. */
.auth-modal--account { width: min(100%,540px); }
.account-type-picker {
  border: 0;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin: 0 0 15px;
  padding: 0;
}
.account-type-picker legend { color: #4f584f; font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.account-type-picker label { cursor: pointer; min-width: 0; position: relative; }
.account-type-picker input { opacity: 0; pointer-events: none; position: absolute; }
.account-type-picker label > span {
  align-items: center;
  background: #f6f8f3;
  border: 1px solid #d9e1d7;
  border-radius: 16px;
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 32px minmax(0,1fr);
  min-height: 76px;
  padding: 12px;
  transition: border-color .18s ease,background .18s ease,transform .18s ease;
}
.account-type-picker label > span > svg { color: #668066; font-size: 23px; grid-row: 1 / 3; }
.account-type-picker label > span b { color: var(--ink); font-size: 12px; }
.account-type-picker label > span small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.account-type-picker label:hover > span { border-color: #9cb49a; transform: translateY(-1px); }
.account-type-picker input:checked + span { background: linear-gradient(135deg,#e9f3e6,#fff9e7); border-color: #6f936e; box-shadow: inset 0 0 0 1px #6f936e,0 7px 18px rgba(47,84,55,.08); }
.account-type-picker input:focus-visible + span { outline: 3px solid rgba(62,111,74,.2); outline-offset: 2px; }

.profile-editor-modal--restaurant { width: min(100%,880px); }
.restaurant-editor {
  background: linear-gradient(145deg,#f3f7ef,#fffaf0);
  border: 1px solid #d6e2d3;
  border-radius: 24px;
  display: grid;
  gap: 24px;
  margin: 10px 0;
  padding: 24px;
}
.restaurant-editor__heading { align-items: center; display: grid; gap: 14px; grid-template-columns: 50px minmax(0,1fr); }
.restaurant-editor__heading > span { align-items: center; background: #315a3d; border-radius: 16px; color: #f0d276; display: flex; height: 50px; justify-content: center; width: 50px; }
.restaurant-editor__heading > span svg { font-size: 24px; }
.restaurant-editor__heading .kicker,.restaurant-menu-editor .kicker { margin: 0 0 3px; }
.restaurant-editor__heading h3,.restaurant-menu-editor h3 { font: 700 27px/1 var(--serif); margin: 0 0 5px; }
.restaurant-editor__heading p:not(.kicker),.restaurant-menu-editor > div > p:not(.kicker) { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }
.restaurant-editor__grid { display: grid; gap: 15px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.restaurant-editor .field input,.restaurant-editor .field textarea,.restaurant-editor .field select,.restaurant-hours input,.restaurant-menu-row input,.restaurant-menu-row textarea { border-radius: 11px; }
.restaurant-services { border: 0; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.restaurant-services legend { color: #4f584f; font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.restaurant-services label { align-items: center; background: rgba(255,255,255,.76); border: 1px solid #d7e1d3; border-radius: 999px; color: #4f6252; display: inline-flex; font-size: 10px; font-weight: 750; gap: 6px; padding: 7px 9px; }
.restaurant-services input { accent-color: var(--leaf); }
.restaurant-hours { background: rgba(255,255,255,.65); border: 1px solid #dce4d9; border-radius: 18px; display: grid; gap: 7px; padding: 17px; }
.restaurant-hours > p { margin: 0 0 4px; }
.restaurant-hours label { align-items: center; display: grid; gap: 10px; grid-template-columns: 92px minmax(0,1fr); }
.restaurant-hours label > span { color: var(--ink); font-size: 10px; font-weight: 780; }
.restaurant-hours input { border: 1px solid #d7ddd3; min-width: 0; padding: 8px 10px; }
.restaurant-menu-editor { border-top: 1px solid #d4dfd1; display: grid; gap: 15px; padding-top: 22px; }
.restaurant-menu-row { background: rgba(255,255,255,.78); border: 1px solid #dce4d9; border-radius: 18px; padding: 15px; }
.restaurant-menu-row__main { align-items: end; display: grid; gap: 9px; grid-template-columns: minmax(170px,1fr) minmax(120px,.55fr) 105px 34px; }
.restaurant-menu-row__meta { display: grid; gap: 12px; grid-template-columns: minmax(0,1fr) auto; }
.restaurant-menu-row__meta fieldset { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.restaurant-menu-row__meta legend { color: #4f584f; font-size: 10px; font-weight: 750; margin-bottom: 7px; }
.restaurant-menu-row__meta fieldset label { color: var(--muted); font-size: 9px; }
.restaurant-menu-row__meta input[type="checkbox"] { accent-color: var(--leaf); width: auto; }

.restaurant-account-badge { background: #e8f0df; border: 1px solid #c9dbbf; border-radius: 999px; color: #315a3d; display: inline-flex; font-size: 8px; margin-left: 5px; padding: 3px 7px; vertical-align: middle; }
.restaurant-profile { background: var(--surface); border: 1px solid #d9e3d6; border-radius: 30px; box-shadow: 0 18px 48px rgba(35,57,39,.07); margin: 24px 0; overflow: hidden; }
.restaurant-profile__header { align-items: end; background: linear-gradient(125deg,#203d2a,#315f43 62%,#74865c); color: #fff; display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) auto; min-height: 205px; padding: 32px; position: relative; }
.restaurant-profile__header::after { background: radial-gradient(circle,rgba(242,207,111,.25),transparent 68%); content: ''; height: 280px; pointer-events: none; position: absolute; right: -80px; top: -120px; width: 280px; }
.restaurant-profile__header > * { position: relative; z-index: 1; }
.restaurant-profile__header .kicker { color: #f1d276; }
.restaurant-profile__header h2 { color: #fff; font-size: clamp(37px,4vw,54px); line-height: .95; margin: 5px 0 8px; }
.restaurant-profile__header p:not(.kicker) { color: rgba(255,255,255,.78); font-size: 12px; margin: 0; }
.restaurant-profile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.restaurant-profile__tags span { background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.21); border-radius: 999px; color: #eef5e9; font-size: 9px; font-weight: 760; padding: 6px 8px; }
.restaurant-rating-summary { align-items: center; background: rgba(17,37,24,.48); border: 1px solid rgba(255,255,255,.2); border-radius: 22px; backdrop-filter: blur(10px); display: grid; justify-items: center; min-width: 145px; padding: 16px 18px; }
.restaurant-rating-summary > strong { color: #fff; font: 750 39px/1 var(--serif); }
.restaurant-rating-summary > small { color: rgba(255,255,255,.68); font-size: 9px; margin-top: 4px; }
.restaurant-stars { display: inline-flex; gap: 1px; }
.restaurant-stars i { color: rgba(202,205,195,.48); font-size: 15px; font-style: normal; }
.restaurant-stars i.is-filled { color: #efc95e; }
.restaurant-profile__actions { align-items: center; border-bottom: 1px solid #dfe6dc; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px; }
.restaurant-profile__actions a { align-items: center; background: #f2f6ef; border: 1px solid #d8e3d5; border-radius: 999px; color: var(--leaf); display: inline-flex; font-size: 10px; font-weight: 800; gap: 6px; min-height: 36px; padding: 8px 11px; text-decoration: none; }
.restaurant-profile__actions a svg { font-size: 14px; }
.restaurant-profile__actions a.is-primary { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.restaurant-profile__content { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0,1.35fr) minmax(250px,.65fr); padding: 30px; }
.restaurant-section-heading .kicker { margin: 0 0 4px; }
.restaurant-section-heading h2 { font-size: clamp(36px,4vw,49px); line-height: .95; margin: 0 0 22px; }
.restaurant-menu__group + .restaurant-menu__group { margin-top: 24px; }
.restaurant-menu__group > h3 { border-bottom: 1px solid #dfe5dc; color: var(--leaf); font-size: 10px; letter-spacing: .08em; margin: 0; padding-bottom: 8px; text-transform: uppercase; }
.restaurant-menu__group article { align-items: start; border-bottom: 1px solid #eceee8; display: flex; gap: 18px; justify-content: space-between; padding: 14px 0; }
.restaurant-menu__group article > div { min-width: 0; }
.restaurant-menu__group article b { font: 700 20px/1.08 var(--serif); }
.restaurant-menu__group article p { color: var(--muted); font-size: 10px; line-height: 1.45; margin: 5px 0; }
.restaurant-menu__group article small { color: #7a8478; display: block; font-size: 8px; line-height: 1.4; }
.restaurant-menu__group article > strong { color: var(--leaf); flex: 0 0 auto; font-size: 12px; }
.restaurant-visit { background: linear-gradient(145deg,#f2f6ed,#fff9ea); border: 1px solid #d8e2d5; border-radius: 22px; padding: 22px; position: sticky; top: 120px; }
.restaurant-visit h3 { font: 700 27px/1 var(--serif); margin: 4px 0 16px; }
.restaurant-visit span { align-items: baseline; border-top: 1px solid #dfe5da; display: flex; gap: 10px; justify-content: space-between; padding: 9px 0; }
.restaurant-visit span b { font-size: 9px; }
.restaurant-visit span small { color: var(--muted); font-size: 9px; text-align: right; }
.restaurant-reviews { background: #f7f8f3; border-top: 1px solid #dfe6dc; padding: 30px; }
.restaurant-review-note { align-items: center; background: #fff7dd; border: 1px solid #ead795; border-radius: 16px; color: #6b5620; display: flex; gap: 10px; margin-bottom: 20px; padding: 12px; }
.restaurant-review-note > svg { flex: 0 0 auto; font-size: 20px; }
.restaurant-review-note span { display: grid; gap: 2px; }
.restaurant-review-note b { font-size: 11px; }.restaurant-review-note small { color: #806e3c; font-size: 9px; }
.restaurant-review-form { background: #fff; border: 1px solid #dce4d9; border-radius: 20px; display: grid; gap: 14px; grid-template-columns: minmax(150px,.35fr) minmax(0,1fr); margin-bottom: 22px; padding: 19px; }
.restaurant-review-form h3 { font: 700 25px/1 var(--serif); margin: 2px 0 0; }
.restaurant-review-form__body { grid-column: 2; grid-row: 1 / 3; }
.restaurant-review-form__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 13px; }
.restaurant-review-form__actions .button { margin: 0; }
.restaurant-review-login { align-items: center; background: #edf4e9; border: 1px solid #ceddca; border-radius: 999px; color: var(--leaf); display: inline-flex; font-size: 11px; font-weight: 800; gap: 7px; margin-bottom: 20px; padding: 10px 13px; }
.restaurant-review-login svg { font-size: 16px; }
.restaurant-review-transparency { background: #eef2eb; border-left: 3px solid #9aab97; border-radius: 0 12px 12px 0; color: #596459; font-size: 10px; line-height: 1.5; margin: 0 0 16px; padding: 10px 12px; }
.restaurant-review-list { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.restaurant-review-list > article { align-items: start; background: #fff; border: 1px solid #dfe5dc; border-radius: 18px; display: grid; gap: 11px; grid-template-columns: 34px minmax(0,1fr); padding: 15px; }
.restaurant-review-list header { align-items: center; display: flex; flex-wrap: wrap; gap: 5px 9px; }
.restaurant-review-list header b { font-size: 10px; }
.restaurant-review-list header small { color: var(--muted); font-size: 8px; margin-left: auto; }
.restaurant-review-list .restaurant-stars i { font-size: 11px; }
.restaurant-review-list p { color: #586158; font-size: 11px; line-height: 1.5; margin: 7px 0 0; }
.restaurant-empty { background: #f5f6f1; border: 1px dashed #cbd6c8; border-radius: 16px; color: var(--muted); font-size: 11px; padding: 18px; }

.theme-dark .account-type-picker label > span,.theme-dark .restaurant-menu-row,.theme-dark .restaurant-hours,.theme-dark .restaurant-review-form,.theme-dark .restaurant-review-list > article { background: #202d23; border-color: #3b4d3f; }
.theme-dark .account-type-picker input:checked + span { background: linear-gradient(135deg,#294231,#3b3622); border-color: #6e986d; }
.theme-dark .restaurant-editor { background: linear-gradient(145deg,#1d2b21,#302d20); border-color: #3d5041; }
.theme-dark .restaurant-services label { background: #202d23; border-color: #3b4d3f; color: #cbd7c8; }
.theme-dark .restaurant-profile { background: #18231c; border-color: #3a4c3e; box-shadow: none; }
.theme-dark .restaurant-profile__actions,.theme-dark .restaurant-reviews { border-color: #374a3b; }
.theme-dark .restaurant-profile__actions a { background: #202d23; border-color: #3b4d3f; color: #d5e7d1; }
.theme-dark .restaurant-profile__actions a.is-primary { background: #41654a; }
.theme-dark .restaurant-menu__group > h3,.theme-dark .restaurant-menu__group article { border-color: #34463a; }
.theme-dark .restaurant-visit { background: linear-gradient(145deg,#202e24,#302d20); border-color: #3d5041; }
.theme-dark .restaurant-visit span { border-color: #3a4b3e; }
.theme-dark .restaurant-reviews { background: #17221b; }
.theme-dark .restaurant-review-transparency { background: #202d23; border-color: #789078; color: #bdc9bc; }
.theme-dark .restaurant-review-list p { color: #c1cec0; }
.theme-dark .restaurant-empty { background: #202d23; border-color: #465849; }
@media (max-width: 820px) {
  .restaurant-profile__content { grid-template-columns: 1fr; }
  .restaurant-visit { position: static; }
  .restaurant-review-list { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .account-type-picker,.restaurant-editor__grid { grid-template-columns: 1fr; }
  .restaurant-editor { border-radius: 18px; padding: 18px; }
  .restaurant-menu-row__main { grid-template-columns: minmax(0,1fr) 90px 34px; }
  .restaurant-menu-row__main .field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .restaurant-menu-row__main .field:nth-child(3) { grid-column: 2; grid-row: 1; }
  .restaurant-menu-row__main .icon-button { grid-column: 3; grid-row: 1; }
  .restaurant-menu-row__meta { grid-template-columns: 1fr; }
  .restaurant-profile { border-radius: 22px; }
  .restaurant-profile__header { align-items: start; grid-template-columns: 1fr; padding: 24px; }
  .restaurant-rating-summary { justify-self: start; min-width: 135px; }
  .restaurant-profile__content,.restaurant-reviews { padding: 22px 18px; }
  .restaurant-review-form { grid-template-columns: 1fr; }
  .restaurant-review-form__body { grid-column: 1; grid-row: auto; }
}

/* styles/product-account.css */
/* Private account settings stay visually connected to the profile while keeping
   sensitive access data clearly separated from public profile editing. */
.account-hub-tabs { align-items: stretch; background: rgba(255,255,255,.7); border: 1px solid #dbe1d7; border-radius: 18px; box-shadow: 0 8px 24px rgba(42,58,43,.055); display: inline-grid; gap: 5px; grid-template-columns: repeat(2,minmax(190px,1fr)); margin-bottom: 24px; padding: 5px; }
.account-hub-tabs a { align-items: center; border: 1px solid transparent; border-radius: 13px; color: var(--muted); display: grid; gap: 3px 10px; grid-template-columns: 31px minmax(0,1fr); min-height: 54px; padding: 8px 14px; text-decoration: none; transition: background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.account-hub-tabs a:hover { background: #f1f5ee; color: var(--ink); transform: translateY(-1px); }
.account-hub-tabs a.is-active { background: #315a3d; border-color: #315a3d; color: #fff; box-shadow: 0 8px 18px rgba(49,90,61,.18); }
.account-hub-tabs svg { font-size: 23px; grid-row: 1 / 3; }
.account-hub-tabs span { display: contents; }
.account-hub-tabs b { font-size: 13px; line-height: 1.15; }
.account-hub-tabs small { color: inherit; font-size: 11px; line-height: 1.2; opacity: .72; }
.account-page { padding-bottom: 105px; padding-top: 55px; }
.account-hero { align-items: center; background: linear-gradient(135deg,#eaf2e7 0%,#fff9e8 72%); border: 1px solid #d6e0d3; border-radius: 30px; display: grid; gap: 20px; grid-template-columns: 64px minmax(0,1fr) auto; overflow: hidden; padding: 30px 34px; position: relative; }
.account-hero::after { background: rgba(236,187,80,.2); border-radius: 50%; content: ''; height: 170px; pointer-events: none; position: absolute; right: 17%; top: -105px; width: 170px; }
.account-hero__icon { align-items: center; background: #315a3d; border-radius: 20px; color: #f4d578; display: flex; height: 64px; justify-content: center; width: 64px; }
.account-hero__icon svg { font-size: 31px; }
.account-hero .kicker { margin: 0 0 5px; }
.account-hero h1 { font-size: clamp(38px,5vw,58px); line-height: .95; margin: 0 0 9px; }
.account-hero > div > p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; max-width: 620px; }
.account-hero__identity { align-items: center; background: rgba(255,255,255,.7); border: 1px solid rgba(193,207,188,.9); border-radius: 18px; display: flex; gap: 11px; min-width: 230px; padding: 11px 14px; position: relative; z-index: 1; }
.account-hero__identity .avatar { flex: 0 0 auto; height: 43px; width: 43px; }
.account-hero__identity span { display: grid; gap: 3px; min-width: 0; }
.account-hero__identity b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-hero__identity small { color: var(--muted); font-size: 11px; }
.account-settings-grid { display: grid; gap: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 22px; }
.account-card { background: rgba(255,255,255,.78); border: 1px solid #dce2d9; border-radius: 25px; box-shadow: 0 12px 35px rgba(39,55,40,.055); min-width: 0; padding: 25px; }
.account-card__heading { align-items: start; display: grid; gap: 13px; grid-template-columns: 44px minmax(0,1fr); margin-bottom: 22px; }
.account-card__heading > span { align-items: center; background: #edf3ea; border-radius: 14px; color: #315a3d; display: flex; height: 44px; justify-content: center; width: 44px; }
.account-card--password .account-card__heading > span { background: #fff1e9; color: #bf5946; }
.account-card--display-name .account-card__heading > span { background: #fff4cf; color: #8d681a; }
.account-card--sessions .account-card__heading > span { background: #edf0fb; color: #53669b; }
.account-card--privacy .account-card__heading > span { background: #fff7dd; color: #856b24; }
.account-card--privacy { grid-column: 1 / -1; }
.account-card__heading svg { font-size: 22px; }
.account-card__heading .kicker { margin: 0 0 4px; }
.account-card__heading h2 { font: 700 27px/1.05 var(--serif); margin: 0 0 7px; }
.account-card__heading p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.48; margin: 0; }
.account-card form { display: grid; gap: 14px; }
.account-card .field { margin: 0; }
.account-card .field > span { font-size: 13px; }
.account-name-cost { align-items: center; background: linear-gradient(120deg,#f2f6ed,#fff8df); border: 1px solid #dce4cf; border-radius: 16px; display: grid; gap: 2px 12px; grid-template-columns: minmax(0,1fr) auto; margin-bottom: 16px; padding: 13px 15px; }
.account-name-cost > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.account-name-cost > b { color: #8a6418; font-size: 16px; grid-column: 2; grid-row: 1 / span 2; }
.account-name-cost > small { color: var(--ink); font-size: 11px; font-weight: 800; }
.profile-display-name { align-items: center; background: #f3f6ef; border: 1px solid #dbe3d7; border-radius: 18px; display: grid; gap: 6px 12px; grid-template-columns: 42px minmax(0,1fr) auto; padding: 14px; }
.profile-display-name > span { align-items: center; background: #315a3d; border-radius: 13px; color: #f3d373; display: flex; height: 42px; justify-content: center; width: 42px; }
.profile-display-name > div { display: grid; gap: 2px; min-width: 0; }
.profile-display-name .kicker { margin: 0; }
.profile-display-name b { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-display-name small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.profile-display-name .text-button { font-size: 11px; text-align: right; }
.account-card .field small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.account-card input { border-radius: 13px; min-height: 48px; }
.account-card form .button { justify-self: start; margin-top: 3px; }
.account-card .button:disabled { cursor: default; opacity: .5; transform: none; }
.account-logout { align-items: center; background: transparent; border: 0; color: var(--muted); display: inline-flex; font-size: 12px; font-weight: 750; gap: 8px; margin-top: 18px; padding: 5px 2px; }
.account-logout:hover { color: var(--ink); }
.account-logout svg { font-size: 17px; }
.account-card__actions { align-items: flex-start; display: flex; flex-direction: column; gap: 16px; }
.account-card__actions .text-button { font-size: 12px; }
.account-facts { border-top: 1px solid #e1e5dc; display: grid; gap: 0; margin: 22px 0 0; }
.account-facts > div { align-items: center; border-bottom: 1px solid #e7eae3; display: flex; gap: 14px; justify-content: space-between; padding: 11px 0; }
.account-facts dt { color: var(--muted); font-size: 12px; }
.account-facts dd { font-size: 12px; font-weight: 800; margin: 0; text-align: right; }
.account-danger { align-items: start; background: #fff5f2; border: 1px solid #e9c6bd; border-radius: 25px; display: grid; gap: 28px; grid-template-columns: minmax(0,1fr) minmax(300px,.68fr); margin-top: 22px; padding: 26px; scroll-margin-top: 120px; }
.account-danger > div { align-items: start; display: grid; gap: 14px; grid-template-columns: 46px minmax(0,1fr); }
.account-danger > div > span { align-items: center; background: #8d332c; border-radius: 15px; color: #fff; display: flex; height: 46px; justify-content: center; width: 46px; }
.account-danger > div > span svg { font-size: 22px; }
.account-danger .kicker { color: #994136; margin: 0 0 4px; }
.account-danger h2 { font: 700 29px/1.05 var(--serif); margin: 0 0 8px; }
.account-danger p:not(.kicker) { color: #755951; font-size: 13px; line-height: 1.5; margin: 0; }
.account-danger form { display: grid; gap: 13px; }
.account-danger .field { margin: 0; }
.account-danger .field > span { font-size: 12px; }
.account-danger input { background: #fff; border-color: #dab6ad; border-radius: 13px; min-height: 46px; }
.account-danger .button { justify-self: start; }
.theme-dark .account-hub-tabs { background: #18231c; border-color: #3b4c3e; box-shadow: none; }
.theme-dark .account-hub-tabs a:hover { background: #243229; }
.theme-dark .account-hub-tabs a.is-active { background: #41654a; border-color: #547c5e; }
.theme-dark .account-hero { background: linear-gradient(135deg,#203025,#393421); border-color: #405242; }
.theme-dark .account-hero__identity,.theme-dark .account-card { background: #1b2720; border-color: #3c4e40; box-shadow: none; }
.theme-dark .account-card__heading > span { background: #27372b; color: #a9d3a4; }
.theme-dark .account-card--password .account-card__heading > span { background: #3c2924; color: #f0a18e; }
.theme-dark .account-card--display-name .account-card__heading > span { background: #3b331d; color: #f2d174; }
.theme-dark .account-card--sessions .account-card__heading > span { background: #282d3e; color: #aebbec; }
.theme-dark .account-card--privacy .account-card__heading > span { background: #3b341e; color: #f2d477; }
.theme-dark .account-name-cost { background: linear-gradient(120deg,#243128,#37321f); border-color: #4b543b; }
.theme-dark .account-name-cost > b { color: #f0cf72; }

/* Product core: compact catalog, focused learning and trusted cooking reports. */
.recipe-browser__active-tag { align-items: center; background: #edf3e9; border: 1px solid #cfddcc; border-radius: 999px; color: var(--green); display: inline-flex; font-size: 12px; font-weight: 800; gap: 5px; margin-top: 14px; padding: 5px 6px 5px 12px; }
.recipe-browser__active-tag button { align-items: center; background: transparent; border: 0; border-radius: 50%; color: inherit; cursor: pointer; display: inline-flex; height: 27px; justify-content: center; width: 27px; }
.recipe-load-more { align-items: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 24px; display: flex; justify-content: space-between; margin: 28px auto 0; max-width: 720px; padding: 16px 18px; }
.recipe-load-more p { display: grid; gap: 2px; margin: 0; }
.recipe-load-more p small { color: var(--muted); }

.cooked-proof { background: linear-gradient(135deg,#eef4e9,#fff9ed); border: 1px solid #d9e2cd; border-radius: 22px; margin-bottom: 24px; padding: 19px 21px; }
.cooked-proof > header { align-items: center; display: flex; gap: 20px; justify-content: space-between; }
.cooked-proof h2 { font-family: var(--display); font-size: clamp(28px,3.4vw,40px); line-height: 1; margin: 3px 0 7px; }
.cooked-proof header p:last-child { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0; max-width: 590px; }
.cooked-proof .button { flex: 0 0 auto; }
.cooked-proof__empty { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.cooked-proof__numbers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cooked-proof__numbers span { align-items: baseline; background: rgba(255,255,255,.72); border: 1px solid rgba(23,63,53,.1); border-radius: 999px; display: flex; gap: 7px; padding: 8px 12px; }
.cooked-proof__numbers b { color: var(--green); font-size: 16px; }
.cooked-proof__numbers small { color: var(--muted); font-size: 11px; }
.cooked-reports { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 14px; }
.cooked-report { background: rgba(255,255,255,.76); border: 1px solid rgba(23,63,53,.1); border-radius: 16px; display: grid; grid-template-columns: auto minmax(0,1fr); overflow: hidden; padding: 12px; }
.cooked-report > img { border-radius: 11px; grid-row: 1 / span 3; height: 88px; margin-right: 12px; object-fit: cover; width: 88px; }
.cooked-report > div { align-items: center; display: flex; gap: 8px; padding: 0; }
.cooked-report > div p { display: grid; gap: 2px; margin: 0; }
.cooked-report > div small { display: block; }
.cooked-report > p { grid-column: 2; padding: 0; }
.cooked-report p { color: var(--ink); font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.cooked-report small { color: var(--muted); }

.action-dialog { max-width: 640px; }
.action-dialog > p:not(.kicker) { color: var(--muted); margin: -4px 0 22px; }
.action-dialog form { display: grid; gap: 16px; }
.cooked-dialog { max-height: min(92vh,780px); max-width: 570px; overflow: auto; padding: 28px; }
.cooked-dialog h2 { font-size: clamp(34px,5vw,48px); margin: 4px 0 7px; }
.cooked-dialog__intro { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.cooked-dialog__ratings { display: grid; gap: 10px; }
.cooked-range { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 15px; display: grid; gap: 7px; padding: 11px 13px 9px; }
.cooked-range__top { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.cooked-range__top b { font-size: 13px; }
.cooked-range output { background: #e2ecdf; border-radius: 999px; color: var(--green); font-size: 11px; font-weight: 850; padding: 5px 9px; }
.cooked-range input { accent-color: var(--coral); cursor: pointer; margin: 0; width: 100%; }
.cooked-range__ends { color: var(--muted); display: flex; font-size: 10px; justify-content: space-between; }
.cooked-again { border: 0; margin: 0; padding: 0; }
.cooked-again legend { font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.cooked-again > div { display: grid; gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.cooked-again label { cursor: pointer; }
.cooked-again input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.cooked-again span { align-items: center; border: 1px solid var(--line); border-radius: 13px; display: flex; font-size: 12px; font-weight: 800; gap: 6px; justify-content: center; min-height: 40px; padding: 8px 10px; }
.cooked-again input:checked + span { background: #e5efe2; border-color: #79a47e; color: var(--green); box-shadow: inset 0 0 0 1px #79a47e; }
.cooked-dialog__details { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.cooked-dialog__details summary { align-items: center; cursor: pointer; display: flex; font-size: 12px; font-weight: 850; gap: 7px; list-style: none; padding: 12px 13px; }
.cooked-dialog__details summary::-webkit-details-marker { display: none; }
.cooked-dialog__details summary small { color: var(--muted); font-weight: 600; margin-left: auto; }
.cooked-dialog__details[open] summary { border-bottom: 1px solid var(--line); }
.cooked-dialog__details > div { display: grid; gap: 12px; padding: 13px; }
.cooked-dialog__details .field { margin: 0; }
.cooked-dialog__details .image-dropzone { min-height: 105px; }
.cooked-dialog__actions { align-items: center; display: flex; justify-content: space-between; }
.cooked-dialog__delete { background: transparent; border: 0; color: #9b463a; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; padding: 9px 0; text-decoration: underline; text-underline-offset: 3px; }
.cooked-delete-dialog { max-width: 460px; text-align: center; }
.cooked-delete-dialog__icon { align-items: center; background: #f6e2dc; border-radius: 50%; color: #a74739; display: inline-flex; height: 48px; justify-content: center; margin-bottom: 12px; width: 48px; }
.cooked-delete-dialog h2 { font-size: 38px; margin: 5px 0 12px; }
.cooked-delete-dialog > p:not(.kicker) { margin: 0 auto 22px; max-width: 360px; }
.cooked-delete-dialog__actions { display: flex; gap: 10px; justify-content: center; }
.cooked-delete-confirm { background: #a74739; border-color: #a74739; color: #fff; }

.learning-library-controls { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin: 18px 0; }
.learning-articles { margin-top: 42px; padding-top: 52px; }
.learning-library-controls select { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: inherit; padding: 10px 34px 10px 14px; }
.learning-topic-filter { color: var(--muted); display: grid; font-size: 10px; font-weight: 800; gap: 6px; letter-spacing: .08em; text-transform: uppercase; }
.learning-topic-filter select { min-width: 210px; text-transform: none; }
.knowledge-grid--lessons { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.knowledge-card--lesson { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; min-height: 0; position: relative; }
.knowledge-card--lesson > a { color: inherit; display: grid; gap: 15px; grid-template-columns: 40px minmax(0,1fr); padding: 18px 50px 18px 18px; text-decoration: none; }
.knowledge-card__index { align-items: center; background: #f6eee0; border-radius: 12px; color: var(--coral); display: flex; font-size: 12px; font-weight: 900; height: 40px; justify-content: center; }
.knowledge-card--lesson > a div { min-width: 0; }
.knowledge-card--lesson h2 { font-size: 22px; margin: 3px 0 7px; }
.knowledge-card--lesson > a div > p:not(.kicker) { color: var(--muted); display: -webkit-box; font-size: 13px; line-height: 1.45; margin: 0 0 9px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.knowledge-card--lesson > a div > span { color: var(--green); font-size: 12px; font-weight: 800; }
.knowledge-favorite { background: var(--surface-soft); border: 0; border-radius: 999px; color: var(--green); cursor: pointer; height: 36px; position: absolute; right: 12px; top: 12px; width: 36px; }
.knowledge-favorite.is-active { background: var(--coral); color: #fff; }
.learning-load-more { display: flex; margin: 24px auto 0; }

.knowledge-detail { max-width: 980px; padding-bottom: 76px; padding-top: 34px; }
.knowledge-detail > article { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 50px rgba(38,55,43,.07); margin-top: 22px; overflow: hidden; }
.knowledge-detail article > header { margin: 0 auto; max-width: 840px; padding: clamp(38px,6vw,62px) clamp(28px,6vw,58px) 44px; }
.knowledge-detail h1 { font-family: var(--display); font-size: clamp(44px,7vw,72px); line-height: .98; margin: 10px 0 18px; max-width: 800px; }
.knowledge-detail header > p:not(.kicker) { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0; max-width: 650px; }
.knowledge-detail header .button { margin-top: 26px; }
.knowledge-detail__body { border-top: 1px solid var(--line); display: grid; font-size: 16px; gap: 18px; line-height: 1.78; margin: 0 auto; max-width: 840px; padding: 42px clamp(28px,6vw,58px) 50px; }
.knowledge-detail__body p { margin: 0; }
.knowledge-detail__lead { color: var(--leaf); font-family: var(--display); font-size: clamp(21px,2.4vw,25px); line-height: 1.5; }
.knowledge-detail__sources { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 25px; }
.knowledge-detail__sources h2 { font-size: 22px; margin: 0 0 12px; }
.knowledge-detail__sources ul { display: grid; gap: 8px; margin: 0; padding-left: 19px; }
.knowledge-detail__sources a { color: var(--leaf); text-decoration: underline; text-decoration-color: rgba(49,95,73,.35); text-underline-offset: 3px; }
.knowledge-detail > article > footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 20px; justify-content: space-between; margin: 0 auto; max-width: 840px; padding: 24px clamp(28px,6vw,58px); }
.knowledge-detail footer small { color: var(--muted); line-height: 1.5; max-width: 370px; text-align: right; }

.notifications-live-note { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 8px; }
.notifications-live-note span { animation: livePulse 1.8s infinite; background: #49a66d; border-radius: 99px; height: 8px; width: 8px; }
.notifications-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(73,166,109,.12); } }
.theme-dark .recipe-browser__active-tag,.theme-dark .cooked-range,.theme-dark .knowledge-card--lesson { background: #1c2921; border-color: #3b4c40; }
.theme-dark .cooked-proof { background: linear-gradient(135deg,#1b2d25,#302c20); border-color: #3d4d40; }
.theme-dark .cooked-proof__numbers span,.theme-dark .cooked-report { background: #18251f; border-color: #3b4b42; }
.theme-dark .cooked-range output,.theme-dark .cooked-again input:checked + span { background: #293b2e; color: #b4d8b0; }
.theme-dark .cooked-dialog__details { border-color: #3b4c40; }
.theme-dark .knowledge-card__index { background: #3b2a25; }

@media (max-width: 760px) {
  .recipe-load-more,.cooked-proof > header,.learning-library-controls,.knowledge-detail > article > footer { align-items: stretch; flex-direction: column; }
  .cooked-proof { border-radius: 18px; margin-bottom: 18px; padding: 16px; }
  .cooked-proof > header { gap: 14px; }
  .cooked-proof h2 { font-size: 30px; }
  .cooked-proof .button { justify-content: center; width: 100%; }
  .cooked-proof__numbers { gap: 6px; }
  .cooked-proof__numbers span { flex: 1 1 calc(50% - 6px); }
  .cooked-proof__numbers span:last-child { flex-basis: 100%; }
  .cooked-reports,.knowledge-grid--lessons { grid-template-columns: 1fr; }
  .cooked-report { grid-template-columns: auto minmax(0,1fr); }
  .cooked-dialog { border-radius: 20px 20px 0 0; margin-top: auto; max-height: 94vh; max-width: none; padding: 22px 17px calc(20px + env(safe-area-inset-bottom)); width: 100%; }
  .modal-backdrop:has(.cooked-dialog) { align-items: end; padding: 0; }
  .cooked-dialog__actions { gap: 12px; }
  .cooked-dialog__actions .button { justify-content: center; }
  .cooked-delete-dialog__actions { flex-direction: column-reverse; }
  .cooked-delete-dialog__actions .button { justify-content: center; width: 100%; }
  .knowledge-detail article > header { padding-bottom: 34px; }
  .knowledge-detail h1 { font-size: clamp(39px,12vw,55px); }
  .knowledge-detail__body { font-size: 15px; padding-bottom: 38px; padding-top: 34px; }
  .knowledge-detail footer small { text-align: left; }
  .learning-articles { margin-top: 34px; padding-top: 40px; }
  .notifications-modal__actions { flex-direction: column; }
}
.theme-dark .profile-display-name { background: #202d24; border-color: #3b4c3e; }
.theme-dark .account-facts,.theme-dark .account-facts > div { border-color: #35463a; }
.theme-dark .account-danger { background: #321f1d; border-color: #68413b; }
.theme-dark .account-danger p:not(.kicker) { color: #d1aaa1; }
.theme-dark .account-danger input { background: #241a19; border-color: #69433d; }
@media (max-width: 900px) {
  .account-hero { grid-template-columns: 58px minmax(0,1fr); }
  .account-hero__icon { height: 58px; width: 58px; }
  .account-hero__identity { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 760px) {
  .account-page { padding-top: 28px; }
  .account-settings-grid { grid-template-columns: 1fr; }
  .account-danger { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .account-hub-tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
  .account-hero { border-radius: 23px; grid-template-columns: minmax(0,1fr); padding: 24px 20px; }
  .account-hero h1 { font-size: clamp(28px,8vw,38px); line-height: 1.1; hyphens: auto; overflow-wrap: anywhere; }
  .account-hero__identity small { overflow-wrap: anywhere; }
  .account-hero__icon { height: 50px; width: 50px; }
  .account-hero__identity { min-width: 0; width: 100%; }
  .account-card,.account-danger { border-radius: 20px; padding: 20px 17px; }
  .profile-display-name { grid-template-columns: 42px minmax(0,1fr); }
  .profile-display-name .text-button { grid-column: 1 / -1; text-align: left; }
}

/* Password recovery and an explicit sign-out affordance. */
.header-signout { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 50%; color: #788078; display: inline-flex; height: 36px; justify-content: center; transition: background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; width: 36px; }
.header-signout:hover,.header-signout:focus-visible { background: #fff0eb; border-color: #e7c8c0; color: #a94739; transform: translateY(-1px); }
.header-signout svg { font-size: 18px; }
.auth-forgot { align-self: flex-end; background: transparent; border: 0; color: var(--leaf); font-size: 12px; font-weight: 800; margin: -7px 0 2px; padding: 3px 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.auth-forgot:hover,.auth-forgot:focus-visible { text-decoration-color: currentColor; }
.password-reset-modal { width: min(100%,480px); }
.password-reset-intro { color: var(--muted); font-size: 14px; line-height: 1.55; margin: -4px 0 21px; }
.password-reset-modal form { display: grid; gap: 15px; }
.password-reset-modal form .field { margin: 0; }
.password-reset-modal form .button { justify-self: start; margin-top: 3px; }
.password-control { position: relative; }
.password-control > input { padding-right: 104px; }
.password-visibility { align-items: center; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--leaf); display: inline-flex; font: inherit; font-size: 11px; font-weight: 800; gap: 5px; height: calc(100% - 12px); padding: 0 10px; position: absolute; right: 6px; top: 6px; }
.password-visibility:hover,.password-visibility:focus-visible { color: var(--coral); }
.password-visibility svg { height: 15px; width: 15px; }
.theme-dark .password-visibility { border-left-color: #405143; color: #bcd7bd; }
.password-reset-ready { align-items: start; background: linear-gradient(135deg,#edf5e9,#fff8df); border: 1px solid #d2dfce; border-radius: 20px; display: grid; gap: 14px; grid-template-columns: 42px minmax(0,1fr); padding: 18px; }
.password-reset-ready > svg { background: #315a3d; border-radius: 13px; color: #f3d474; font-size: 22px; padding: 10px; }
.password-reset-ready > div { display: grid; gap: 10px; }
.password-reset-ready b { font: 700 22px/1.05 var(--serif); }
.password-reset-ready p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.password-reset-ready .button { justify-self: start; }
.password-reset-back { font-size: 12px; margin-top: 18px; }
.theme-dark .header-signout { color: #aeb9ae; }
.theme-dark .header-signout:hover,.theme-dark .header-signout:focus-visible { background: #3a2723; border-color: #68433c; color: #f1a594; }
.theme-dark .password-reset-ready { background: linear-gradient(135deg,#203025,#393421); border-color: #405242; }
@media (max-width: 520px) {
  .header-profile-end .header-signout { display: inline-flex; }
  .header-signout { height: 34px; width: 34px; }
}

/* Help is always within reach, but stays quieter than the primary cooking actions. */
.header-help { align-items: center; background: #f2f5ee; border: 1px solid #d7e1d3; border-radius: 999px; color: #45604a; display: inline-flex; font-size: 11px; font-weight: 800; gap: 5px; min-height: 34px; padding: 6px 9px; text-decoration: none; transition: background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.header-help:hover,.header-help:focus-visible { background: #e7f0e3; border-color: #b9ceb5; color: #274c33; transform: translateY(-1px); }
.header-help svg { flex: 0 0 auto; font-size: 17px; }
.help-page { padding-bottom: 110px; padding-top: 48px; }
.help-hero { align-items: center; background: linear-gradient(135deg,#e6f0e2 0%,#fff8df 72%); border: 1px solid #d2dfce; border-radius: 30px; display: grid; gap: 28px; grid-template-columns: minmax(0,1fr) 96px; overflow: hidden; padding: 38px 42px; position: relative; }
.help-hero::after { background: rgba(236,187,80,.2); border-radius: 50%; content: ''; height: 220px; pointer-events: none; position: absolute; right: 6%; top: -135px; width: 220px; }
.help-hero > * { position: relative; z-index: 1; }
.help-hero .kicker { margin: 0 0 7px; }
.help-hero h1 { font-size: clamp(43px,6vw,67px); line-height: .93; margin: 0 0 15px; }
.help-hero h1 em { color: var(--leaf); font-weight: inherit; }
.help-hero p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; max-width: 650px; }
.help-hero > span { align-items: center; background: #315a3d; border: 1px solid rgba(255,255,255,.25); border-radius: 28px; box-shadow: 0 18px 38px rgba(49,90,61,.19); color: #f3d474; display: flex; height: 96px; justify-content: center; justify-self: end; width: 96px; }
.help-hero > span svg { font-size: 46px; }
.help-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(300px,.8fr) minmax(440px,1.2fr); margin-top: 23px; }
.help-faq,.help-report { background: rgba(255,255,255,.78); border: 1px solid #dce2d9; border-radius: 26px; box-shadow: 0 13px 38px rgba(39,55,40,.055); padding: 27px; }
.help-section-heading { margin-bottom: 21px; }
.help-section-heading .kicker { margin: 0 0 5px; }
.help-section-heading h2 { font: 700 31px/1.05 var(--serif); margin: 0; }
.help-section-heading > p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.help-faq__list { display: grid; gap: 9px; }
.help-faq__list details { background: #f5f7f2; border: 1px solid #e0e6dd; border-radius: 17px; overflow: hidden; transition: background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.help-faq__list details[open] { background: #edf4e9; border-color: #cbdcc7; box-shadow: 0 8px 20px rgba(43,77,49,.07); }
.help-faq__list summary { align-items: center; cursor: pointer; display: grid; gap: 10px; grid-template-columns: 28px minmax(0,1fr) 20px; list-style: none; min-height: 61px; padding: 12px 14px; }
.help-faq__list summary::-webkit-details-marker { display: none; }
.help-faq__list summary > span { color: #8a9788; font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.help-faq__list summary b { font-size: 13px; line-height: 1.3; }
.help-faq__list summary svg { color: var(--leaf); font-size: 17px; transition: transform .2s ease; }
.help-faq__list details[open] summary svg { transform: rotate(45deg); }
.help-faq__list details p { color: #586558; font-size: 13px; line-height: 1.55; margin: -2px 14px 15px 52px; }
.help-report form { display: grid; gap: 20px; }
.help-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.help-form-grid .field { margin: 0; }
.help-form-grid .field > span { font-size: 13px; }
.help-form-grid .field small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.help-form-grid input,.help-form-grid select,.help-form-grid textarea { border-radius: 13px; font-size: 13px; min-height: 48px; }
.help-form-grid textarea { line-height: 1.5; min-height: 152px; resize: vertical; }
.help-report form > .button { justify-self: start; margin: 0; }
.help-report__privacy { color: var(--muted); font-size: 11px; line-height: 1.5; margin: -7px 0 0; }
.support-legal-fields { background: color-mix(in srgb, var(--paper) 82%, transparent); border: 1px solid #dce2d9; border-radius: 16px; padding: 14px 16px; }
.support-legal-fields summary { color: var(--leaf); cursor: pointer; font-size: 13px; font-weight: 800; }
.support-legal-fields[open] summary { margin-bottom: 15px; }
.support-legal-fields .help-form-grid { margin: 0; }
.cp-referral-note { background: color-mix(in srgb, var(--sage) 28%, transparent); border-radius: 12px; color: var(--leaf); font-size: 12px; font-weight: 750; margin: 0 0 8px; padding: 10px 12px; }
.theme-dark .header-help { background: #223027; border-color: #3b4e3e; color: #d5e5d1; }
.theme-dark .header-help:hover,.theme-dark .header-help:focus-visible { background: #2c4032; border-color: #57705b; color: #fff; }
.theme-dark .help-hero { background: linear-gradient(135deg,#203025,#393421); border-color: #405242; }
.theme-dark .help-faq,.theme-dark .help-report { background: #1b2720; border-color: #3c4e40; box-shadow: none; }
.theme-dark .support-legal-fields { background: #18231d; border-color: #3c4e40; }
.theme-dark .help-faq__list details { background: #202d23; border-color: #3a4b3e; }
.theme-dark .help-faq__list details[open] { background: #26382b; border-color: #4d6752; box-shadow: none; }
.theme-dark .help-faq__list details p { color: #becabc; }
@media (max-width: 1080px) {
  .header-help { border-radius: 50%; height: 34px; justify-content: center; padding: 0; width: 34px; }
  .header-help span { display: none; }
}
@media (max-width: 820px) {
  .help-page { padding-top: 28px; }
  .help-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .help-hero { border-radius: 23px; grid-template-columns: 1fr; padding: 27px 22px; }
  .help-hero > span { height: 62px; justify-self: start; width: 62px; }
  .help-hero > span svg { font-size: 30px; }
  .help-faq,.help-report { border-radius: 21px; padding: 21px 17px; }
  .help-form-grid { grid-template-columns: 1fr; }
  .help-form-grid .field--wide { grid-column: auto; }
}

/* Reserved in-feed advertising: intentionally sparse, transparent and visually
   separate from community recipes until a consent-aware provider is connected. */
.timeline-ad-slot { background: linear-gradient(135deg,rgba(246,247,241,.94),rgba(238,242,234,.94)); border: 1px solid #d9e0d6; border-radius: 20px; box-shadow: 0 8px 24px rgba(39,55,40,.035); overflow: hidden; padding: 13px; }
.timeline-ad-slot__heading { align-items: center; display: flex; justify-content: space-between; margin: 0 2px 9px; }
.timeline-ad-slot__heading > span { background: #e7ece4; border: 1px solid #d2dbcf; border-radius: 999px; color: #657164; font-size: 9px; font-weight: 850; letter-spacing: .08em; padding: 4px 7px; text-transform: uppercase; }
.timeline-ad-slot__heading > small { color: #8b9489; font-size: 10px; }
.timeline-ad-slot__preview { align-items: center; background: rgba(255,255,255,.78); border: 1px dashed #cbd5c8; border-radius: 14px; display: grid; gap: 13px; grid-template-columns: 42px minmax(0,1fr); min-height: 112px; padding: 18px 21px; }
.timeline-ad-slot__preview > span { align-items: center; background: #e9f0e5; border-radius: 13px; color: #638064; display: flex; height: 42px; justify-content: center; width: 42px; }
.timeline-ad-slot__preview > span svg { font-size: 21px; }
.timeline-ad-slot__preview > div { display: grid; gap: 4px; }
.timeline-ad-slot__preview b { color: #435044; font: 700 19px/1.08 var(--serif); }
.timeline-ad-slot__preview small { color: #7b867a; font-size: 11px; line-height: 1.45; }
.timeline-ad-slot > p { color: #879087; font-size: 10px; line-height: 1.45; margin: 9px 3px 1px; }
.timeline-ad-slot > .adsbygoogle { background: rgba(255,255,255,.54); border-radius: 14px; min-height: 100px; overflow: hidden; width: 100%; }
.theme-dark .timeline-ad-slot { background: linear-gradient(135deg,#1c2820,#222e25); border-color: #38483b; box-shadow: none; }
.theme-dark .timeline-ad-slot__heading > span { background: #27342a; border-color: #3e4f42; color: #b4c0b2; }
.theme-dark .timeline-ad-slot__heading > small,.theme-dark .timeline-ad-slot > p { color: #96a294; }
.theme-dark .timeline-ad-slot__preview { background: rgba(29,41,33,.82); border-color: #46584a; }
.theme-dark .timeline-ad-slot__preview > span { background: #2b3b2e; color: #a6c4a2; }
.theme-dark .timeline-ad-slot__preview b { color: #e7ece3; }
.theme-dark .timeline-ad-slot__preview small { color: #aeb9ad; }
.theme-dark .timeline-ad-slot > .adsbygoogle { background: rgba(29,41,33,.82); }
@media (max-width: 560px) {
  .timeline-ad-slot { padding: 10px; }
  .timeline-ad-slot__preview { grid-template-columns: 34px minmax(0,1fr); min-height: 96px; padding: 15px; }
  .timeline-ad-slot__preview > span { border-radius: 10px; height: 34px; width: 34px; }
  .timeline-ad-slot__preview b { font-size: 17px; }
}

/* Cooking Points: free allowance, earnings and spending are deliberately
   separated so the balance and every price can be understood at a glance. */
.cp-modal--structured { max-width: 820px; padding: 31px; width: min(100%,820px); }
.cp-modal__header { align-items: center; background: linear-gradient(135deg,#284f35,#3b6947); border-radius: 24px; color: #fff; display: grid; gap: 18px; grid-template-columns: minmax(0,1fr) 60px; margin-bottom: 14px; overflow: hidden; padding: 24px 26px; position: relative; }
.cp-modal__header::after { background: rgba(245,207,102,.16); border-radius: 50%; content: ''; height: 155px; position: absolute; right: -46px; top: -91px; width: 155px; }
.cp-modal__header .kicker { color: #dcebd9; margin: 0 0 4px; }
.cp-modal__header h2 { color: #fff; font-size: clamp(35px,5vw,48px); line-height: .94; margin: 0 0 8px; }
.cp-modal__header h2 em { color: #f4d270; font-style: normal; }
.cp-modal__header p:not(.kicker) { color: #dce8da; font-size: 12px; line-height: 1.4; margin: 0; }
.cp-modal__header > span { align-items: center; background: #f3ce69; border-radius: 18px; color: #614b12; display: flex; height: 60px; justify-content: center; position: relative; width: 60px; z-index: 1; }
.cp-modal__header > span svg { font-size: 29px; }
.cp-free-frame { align-items: center; background: #f6f1dc; border: 1px solid #e6d69f; border-radius: 20px; display: grid; gap: 20px; grid-template-columns: minmax(175px,.75fr) minmax(0,1.6fr); margin-bottom: 14px; padding: 18px 20px; }
.cp-free-frame .kicker { color: #876c24; margin: 0 0 4px; }
.cp-free-frame h3 { font: 700 22px/1.05 var(--serif); margin: 0; }
.cp-free-frame__items { display: grid; gap: 7px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.cp-free-frame__items > span { align-content: start; background: rgba(255,255,255,.62); border: 1px solid rgba(213,194,129,.68); border-radius: 14px; display: grid; gap: 2px; min-height: 78px; padding: 10px; }
.cp-free-frame__items svg { color: #6f7e43; font-size: 17px; margin-bottom: 3px; }
.cp-free-frame__items b { font-size: 11px; }
.cp-free-frame__items small { color: #746c50; font-size: 10px; line-height: 1.3; }
.cp-info-section { border: 1px solid #dce4d9; border-radius: 22px; margin-top: 14px; padding: 20px; }
.cp-info-section--earn { background: #f5f8f3; }
.cp-info-section--spend { background: #fff7f1; border-color: #ecd8cc; }
.cp-info-section__heading { align-items: center; display: flex; gap: 12px; margin-bottom: 15px; }
.cp-info-section__heading > span { align-items: center; background: #dfeadd; border-radius: 13px; color: #315a3d; display: flex; height: 40px; justify-content: center; width: 40px; }
.cp-info-section--spend .cp-info-section__heading > span { background: #f8dfd2; color: #a64d3e; }
.cp-info-section__heading svg { font-size: 20px; }
.cp-info-section__heading .kicker { margin: 0 0 2px; }
.cp-info-section__heading h3 { font: 700 24px/1.05 var(--serif); margin: 0; }
.cp-info-columns { display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.cp-info-columns > article { background: rgba(255,255,255,.82); border: 1px solid #e0e7de; border-radius: 17px; min-width: 0; padding: 13px; }
.cp-info-columns h4 { font-size: 12px; margin: 1px 2px 10px; }
.cp-info-row { align-items: start; border-top: 1px solid #e7ebe5; display: grid; gap: 2px 8px; grid-template-columns: 30px minmax(0,1fr) auto; padding: 9px 0; }
.cp-info-row:first-of-type { border-top: 0; padding-top: 2px; }
.cp-info-row__icon { align-items: center; background: #e9f1e6; border-radius: 9px; color: #3f6848; display: flex; grid-row: 1 / 3; height: 30px; justify-content: center; width: 30px; }
.cp-info-row__icon svg { font-size: 15px; }
.cp-info-row b { font-size: 11px; line-height: 1.25; }
.cp-info-row > strong { color: #2d6c3d; font-size: 11px; white-space: nowrap; }
.cp-info-row small { color: var(--muted); font-size: 9px; grid-column: 2 / 4; line-height: 1.35; }
.cp-spend-list { display: grid; gap: 8px 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.cp-spend-list .cp-info-row { background: rgba(255,255,255,.72); border: 1px solid #ebddd5; border-radius: 15px; padding: 11px; }
.cp-spend-list .cp-info-row__icon { background: #fae7dd; color: #a64d3e; }
.cp-info-row--spend > strong { color: #ad493b; }
.cp-info-row--locked { opacity: .72; }
.cp-info-row--locked .cp-info-row__icon { background: #e8e8e2; color: #72766e; }
.cp-modal__footer { align-items: center; border-top: 1px solid #dfe4dc; display: flex; gap: 16px; justify-content: space-between; margin-top: 18px; padding-top: 18px; }
.cp-modal__footer > div:first-child { display: grid; gap: 3px; }
.cp-modal__footer b { font-size: 12px; }
.cp-modal__footer small { color: var(--muted); font-size: 10px; }
.cp-modal__footer .cp-modal__actions { display: flex; flex: 0 0 auto; }
.cp-modal--structured > .modal-close { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); border-radius: 50%; color: #fff; right: 42px; top: 42px; z-index: 3; }
.theme-dark .cp-modal__header { background: linear-gradient(135deg,#31573b,#476e4e); }
.theme-dark .cp-free-frame { background: #38331f; border-color: #5f5631; }
.theme-dark .cp-free-frame__items > span { background: rgba(22,31,25,.62); border-color: #585338; }
.theme-dark .cp-free-frame__items small { color: #c8c1a8; }
.theme-dark .cp-info-section--earn { background: #1b2820; border-color: #394c3d; }
.theme-dark .cp-info-section--spend { background: #30231f; border-color: #5a3d35; }
.theme-dark .cp-info-columns > article,.theme-dark .cp-spend-list .cp-info-row { background: rgba(21,30,24,.72); border-color: #3b4b3e; }
.theme-dark .cp-info-row { border-color: #35433a; }
.theme-dark .cp-info-row__icon { background: #293c2d; color: #afd2aa; }
.theme-dark .cp-spend-list .cp-info-row__icon { background: #472e28; color: #f0a291; }
.theme-dark .cp-info-row--locked .cp-info-row__icon { background: #363934; color: #b7bcb4; }
.theme-dark .cp-modal__footer { border-color: #39483c; }
@media (max-width: 760px) {
  .cp-modal--structured { padding: 22px; }
  .cp-free-frame { grid-template-columns: 1fr; }
  .cp-info-columns { grid-template-columns: 1fr; }
  .cp-spend-list { grid-template-columns: 1fr; }
  .cp-modal__footer { align-items: stretch; flex-direction: column; }
  .cp-modal__footer .cp-modal__actions { display: grid; width: 100%; }
  .cp-modal--structured > .modal-close { right: 31px; top: 31px; }
}
@media (max-width: 520px) {
  .modal-backdrop:has(.cp-modal--structured) { align-items: end; padding: 0; }
  .cp-modal--structured { border-radius: 24px 24px 0 0; max-height: 92vh; padding: 16px; }
  .cp-modal__header { border-radius: 19px; grid-template-columns: minmax(0,1fr) 45px; padding: 20px; }
  .cp-modal__header > span { border-radius: 14px; height: 45px; width: 45px; }
  .cp-modal__header > span svg { font-size: 23px; }
  .cp-modal--structured > .modal-close { right: 24px; top: 24px; }
  .cp-free-frame,.cp-info-section { border-radius: 18px; padding: 16px; }
  .cp-free-frame__items { grid-template-columns: 1fr; }
  .cp-free-frame__items > span { align-items: center; gap: 7px; grid-template-columns: 22px auto minmax(0,1fr); min-height: 0; }
  .cp-free-frame__items svg { margin: 0; }
  .cp-free-frame__items small { text-align: right; }
}

/* Profiles expose their social graph without turning the stats into oversized
   controls. The weekly board gives sustained community activity a visible home. */
.profile-numbers--interactive { align-items: stretch; }
.profile-numbers--interactive > button { background: transparent; border: 0; border-bottom: 1px solid transparent; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 2px; min-width: 62px; padding: 0 0 4px; text-align: left; transition: border-color .2s ease,color .2s ease,transform .2s ease; }
.profile-numbers--interactive > button:hover,.profile-numbers--interactive > button:focus-visible { border-color: var(--leaf); color: var(--leaf); transform: translateY(-1px); }
.profile-numbers--interactive > button b { color: var(--ink); }
.profile-hero--personal.has-profile-banner .profile-numbers--interactive > button { color: rgba(255,255,255,.84); }
.profile-hero--personal.has-profile-banner .profile-numbers--interactive > button b { color: #fff; }
.profile-hero--personal.has-profile-banner .profile-numbers--interactive > button:hover { border-color: #f4d270; color: #fff; }
.creator-milestone { background: linear-gradient(135deg,#f7f3df,#f2f7ed 58%,#e8f1e6); border: 1px solid #d8dfc6; border-radius: 22px; box-shadow: 0 12px 32px rgba(43,67,44,.07); margin: 18px 0 0; overflow: hidden; }
.creator-milestone > summary { align-items: center; cursor: pointer; display: grid; gap: 14px; grid-template-columns: 46px minmax(0,1fr) auto 30px; list-style: none; min-height: 76px; padding: 14px 17px; transition: background .2s ease; }
.creator-milestone > summary::-webkit-details-marker { display: none; }
.creator-milestone > summary:hover,.creator-milestone > summary:focus-visible { background: rgba(255,255,255,.34); outline: none; }
.creator-milestone__icon { align-items: center; background: linear-gradient(145deg,#2e593c,#1f3f2b); border-radius: 14px; box-shadow: 0 7px 17px rgba(35,68,45,.18); color: #f1d273; display: flex; height: 46px; justify-content: center; width: 46px; }
.creator-milestone__icon svg { font-size: 22px; }
.creator-milestone__title { display: grid; gap: 2px; min-width: 0; }
.creator-milestone__body { border-top: 1px solid rgba(108,126,91,.18); display: grid; gap: 10px; min-width: 0; padding: 16px 18px 18px 77px; }
.creator-milestone .kicker { color: #8b6d24; margin: 0; }
.creator-milestone h2 { color: var(--ink); font: 700 clamp(18px,2.1vw,23px)/1.08 var(--serif); margin: 0; }
.creator-milestone summary > strong { background: rgba(255,255,255,.74); border: 1px solid #ded8b9; border-radius: 999px; color: #6d571d; flex: 0 0 auto; font-size: 10px; padding: 7px 10px; }
.creator-milestone__toggle { align-items: center; background: rgba(255,255,255,.62); border: 1px solid #d8ddc8; border-radius: 50%; color: #526451; display: flex; font-size: 19px; height: 28px; justify-content: center; line-height: 1; padding-bottom: 4px; transition: transform .2s ease,background .2s ease; width: 28px; }
.creator-milestone[open] .creator-milestone__toggle { background: #315a3d; color: #fff; transform: rotate(180deg); }
.creator-milestone__body > p { color: #556055; font-size: 11px; line-height: 1.55; margin: 0; max-width: 850px; }
.creator-milestone__progress { background: rgba(46,83,53,.13); border-radius: 999px; height: 6px; overflow: hidden; }
.creator-milestone__progress i { background: linear-gradient(90deg,#3e754d,#d1aa43); border-radius: inherit; display: block; height: 100%; width: var(--creator-progress); }
.creator-milestone__body > small { color: #747a6d; font-size: 9px; line-height: 1.45; }
.creator-milestone--ready { background: linear-gradient(135deg,#f7e8ad,#f4f3d7 48%,#e7f1e5); border-color: #d3ba63; }
.creator-milestone--ready summary > strong { background: #315a3d; border-color: #315a3d; color: #f6dd87; }
.theme-dark .creator-milestone { background: linear-gradient(135deg,#2c2a1c,#202e23 58%,#1c2b20); border-color: #4a5234; box-shadow: none; }
.theme-dark .creator-milestone h2 { color: #f5f1e6; }
.theme-dark .creator-milestone__body > p { color: #c1c8bb; }
.theme-dark .creator-milestone summary > strong { background: #27372a; border-color: #556044; color: #ead389; }
.theme-dark .creator-milestone__toggle { background: #27372a; border-color: #4b5a4c; color: #d8dfd4; }
.theme-dark .creator-milestone__body > small { color: #aeb7aa; }
@media (max-width: 680px) {
  .creator-milestone { border-radius: 19px; }
  .creator-milestone > summary { gap: 10px; grid-template-columns: 42px minmax(0,1fr) 27px; padding: 13px; }
  .creator-milestone__icon { border-radius: 13px; height: 42px; width: 42px; }
  .creator-milestone summary > strong { display: none; }
  .creator-milestone__toggle { height: 27px; width: 27px; }
  .creator-milestone__body { padding: 15px; }
}
.weekly-leaderboard { overflow: hidden; padding: 17px; }
.weekly-leaderboard > header { align-items: center; display: flex; gap: 10px; margin-bottom: 10px; }
.weekly-leaderboard > header > span { align-items: center; background: #f3d577; border-radius: 12px; color: #644e15; display: flex; height: 38px; justify-content: center; width: 38px; }
.weekly-leaderboard > header > span svg { font-size: 19px; }
.weekly-leaderboard > header div { display: grid; gap: 2px; }
.weekly-leaderboard > header .kicker { margin: 0; }
.weekly-leaderboard > header h2 { font: 700 20px/1 var(--serif); margin: 0; }
.weekly-leader { align-items: center; background: transparent; border: 0; border-top: 1px solid #e5e9e1; color: inherit; cursor: pointer; display: grid; gap: 7px; grid-template-columns: 19px 30px minmax(0,1fr) auto; padding: 9px 2px; text-align: left; width: 100%; }
.weekly-leader:first-of-type { border-top: 0; }
.weekly-leader > strong { color: #9c7829; font: 750 14px/1 var(--serif); text-align: center; }
.weekly-leader--1 > strong { align-items: center; background: #f3d577; border-radius: 50%; color: #604a13; display: flex; height: 19px; justify-content: center; }
.weekly-leader .avatar { height: 30px; width: 30px; }
.weekly-leader > span { display: grid; gap: 2px; min-width: 0; }
.weekly-leader > span b { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-leader > span small { color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weekly-leader > em { color: #3f704a; font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }
.weekly-leader:hover > span b { color: var(--leaf); }
.weekly-leaderboard > footer { border-top: 1px solid #e5e9e1; color: var(--muted); font-size: 8px; line-height: 1.4; margin-top: 4px; padding-top: 10px; }
.weekly-leaderboard__empty { align-items: center; display: flex; gap: 9px; padding: 12px 2px; }
.weekly-leaderboard__empty > svg { color: #bd9130; font-size: 21px; }
.weekly-leaderboard__empty p { display: grid; gap: 2px; margin: 0; }
.weekly-leaderboard__empty b { font-size: 11px; }
.weekly-leaderboard__empty small { color: var(--muted); font-size: 9px; }
.theme-dark .weekly-leader { border-color: #35443a; }
.theme-dark .weekly-leaderboard > footer { border-color: #35443a; }
.theme-dark .weekly-leader > em { color: #acd0a8; }
.connections-modal { max-width: 560px; width: min(100%,560px); }
.connections-modal > h2 { margin-bottom: 20px; }
.connections-tabs { background: #eef3eb; border: 1px solid #d8e2d5; border-radius: 16px; display: grid; gap: 5px; grid-template-columns: repeat(2,1fr); margin-bottom: 13px; padding: 5px; }
.connections-tabs button { background: transparent; border: 1px solid transparent; border-radius: 12px; color: var(--muted); cursor: pointer; display: flex; gap: 7px; justify-content: center; min-height: 48px; padding: 9px; }
.connections-tabs button b { color: inherit; font-size: 14px; }
.connections-tabs button span { font-size: 12px; }
.connections-tabs button.is-active { background: #315a3d; border-color: #315a3d; box-shadow: 0 7px 15px rgba(49,90,61,.16); color: #fff; }
.connection-list { display: grid; max-height: min(430px,48vh); overflow: auto; padding-right: 3px; }
.connection-person { align-items: center; background: transparent; border: 0; border-bottom: 1px solid #e4e9e1; color: inherit; cursor: pointer; display: grid; gap: 11px; grid-template-columns: 42px minmax(0,1fr) auto 20px; min-height: 66px; padding: 10px 4px; text-align: left; width: 100%; }
.connection-person:hover { background: #f3f6f0; }
.connection-person .avatar { height: 42px; width: 42px; }
.connection-person > span { display: grid; gap: 3px; min-width: 0; }
.connection-person > span b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-person > span small { color: var(--muted); font-size: 10px; }
.connection-person > em { background: #e7efe4; border-radius: 999px; color: #45694d; font-size: 9px; font-style: normal; font-weight: 850; padding: 5px 7px; white-space: nowrap; }
.connection-person > svg { color: #8a9788; font-size: 16px; }
.connection-list__empty { align-items: center; color: var(--muted); display: grid; gap: 11px; justify-items: center; padding: 42px 20px; text-align: center; }
.connection-list__empty svg { color: #91a48e; font-size: 30px; }
.connection-list__empty p { font-size: 12px; margin: 0; }
.connections-modal__limit { color: var(--muted); font-size: 9px; margin: 11px 0 0; text-align: center; }
.connections-modal__close { justify-content: center; margin-top: 16px; width: 100%; }
.theme-dark .connections-tabs { background: #202e25; border-color: #3a4c3e; }
.theme-dark .connections-tabs button.is-active { background: #41654a; border-color: #547c5e; }
.theme-dark .connection-person { border-color: #35463a; }
.theme-dark .connection-person:hover { background: #243229; }
.theme-dark .connection-person > em { background: #293b2e; color: #bdd8b9; }
@media (max-width: 1100px) {
  .timeline-rail--right { display: grid; grid-column: 1 / -1; position: static; width: 100%; }
  .timeline-rail--right > section:not(.weekly-leaderboard) { display: none; }
  .weekly-leaderboard { display: grid; gap: 0 10px; grid-template-columns: repeat(5,minmax(0,1fr)); }
  .weekly-leaderboard > header,.weekly-leaderboard > footer { grid-column: 1 / -1; }
  .weekly-leader { border-left: 1px solid #e5e9e1; border-top: 0; grid-template-columns: 22px 34px minmax(0,1fr); margin-top: 6px; padding: 9px; }
  .weekly-leader:first-of-type { border-left: 0; }
  .weekly-leader > em { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .weekly-leaderboard { grid-template-columns: 1fr; }
  .weekly-leader { border-left: 0; border-top: 1px solid #e5e9e1; grid-template-columns: 22px 34px minmax(0,1fr) auto; margin: 0; }
  .weekly-leader:first-of-type { border-top: 0; }
  .weekly-leader > em { grid-column: auto; }
  .theme-dark .weekly-leader { border-color: #35443a; }
}
@media (max-width: 520px) {
  .modal-backdrop:has(.connections-modal) { align-items: end; padding: 0; }
  .connections-modal { border-radius: 24px 24px 0 0; max-height: 88vh; padding: 28px 18px 18px; }
  .connections-modal h2 { font-size: 34px; }
}

/* The CP window uses focused views instead of squeezing every rule into one
   screen. Balance and free allowances remain visible in both views. */
.cp-modal--spacious { max-width: 960px; padding: 28px; width: min(100%,960px); }
.cp-modal--spacious > .modal-close { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; right: 39px; top: 39px; z-index: 3; }
.cp-balance { align-items: center; background: linear-gradient(135deg,#284f35,#3f704a); border-radius: 24px; color: #fff; display: grid; gap: 24px; grid-template-columns: minmax(0,1fr) 64px; overflow: hidden; padding: 25px 28px; position: relative; }
.cp-balance::after { background: rgba(244,210,112,.16); border-radius: 50%; content: ''; height: 180px; pointer-events: none; position: absolute; right: -55px; top: -108px; width: 180px; }
.cp-balance .kicker { color: #dcebd9; margin: 0 0 5px; }
.cp-balance h2 { color: #fff; font-size: clamp(40px,5vw,54px); line-height: .92; margin: 0 0 9px; }
.cp-balance h2 em { color: #f4d270; font-style: normal; }
.cp-balance p:not(.kicker) { color: #dce8da; font-size: 13px; line-height: 1.45; margin: 0; }
.cp-balance > span { align-items: center; background: #f3ce69; border-radius: 20px; color: #614b12; display: flex; height: 64px; justify-content: center; position: relative; width: 64px; z-index: 1; }
.cp-balance > span svg { font-size: 31px; }
.cp-view-tabs { background: #edf2ea; border: 1px solid #d7e1d4; border-radius: 18px; display: grid; gap: 6px; grid-template-columns: repeat(2,1fr); margin-top: 17px; padding: 6px; }
.cp-view-tabs > button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 13px; color: #59675a; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 39px minmax(0,1fr); min-height: 65px; padding: 9px 15px; text-align: left; transition: background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease; }
.cp-view-tabs > button > span { align-items: center; background: #dce7d9; border-radius: 12px; color: #45624a; display: flex; height: 39px; justify-content: center; width: 39px; }
.cp-view-tabs > button > span svg { font-size: 19px; }
.cp-view-tabs > button > div { display: grid; gap: 3px; }
.cp-view-tabs > button b { font-size: 14px; }
.cp-view-tabs > button small { color: inherit; font-size: 11px; opacity: .72; }
.cp-view-tabs > button.is-active { background: #fff; border-color: #cad8c7; box-shadow: 0 8px 20px rgba(41,65,44,.09); color: #284f35; }
.cp-view-tabs > button.is-active > span { background: #315a3d; color: #fff; }
.cp-view-tabs > button[data-tab="spend"].is-active { border-color: #ebd1c4; color: #984c3e; }
.cp-view-tabs > button[data-tab="spend"].is-active > span { background: #b65645; }
.cp-view-panel { background: #f8faf6; border: 1px solid #dce5d9; border-radius: 22px; margin-top: 12px; padding: 24px; }
.cp-view-panel[hidden] { display: none; }
.cp-view-panel > header { margin-bottom: 18px; }
.cp-view-panel > header .kicker { margin: 0 0 5px; }
.cp-view-panel > header h3 { font: 700 30px/1 var(--serif); margin: 0 0 8px; }
.cp-view-panel > header > p:not(.kicker) { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; max-width: 690px; }
.cp-earn-layout { display: grid; gap: 13px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.cp-info-group { background: #fff; border: 1px solid #dfe7dc; border-radius: 18px; min-width: 0; padding: 17px; }
.cp-info-group > header { align-items: center; border-bottom: 1px solid #e6ebe3; display: grid; gap: 11px; grid-template-columns: 42px minmax(0,1fr); margin-bottom: 4px; padding-bottom: 14px; }
.cp-info-group > header > span { align-items: center; background: #e6efe3; border-radius: 13px; color: #3e6847; display: flex; height: 42px; justify-content: center; width: 42px; }
.cp-info-group > header > span svg { font-size: 21px; }
.cp-info-group > header h4 { font-size: 14px; margin: 0 0 3px; }
.cp-info-group > header p { color: var(--muted); font-size: 10px; line-height: 1.4; margin: 0; }
.cp-modal--spacious .cp-info-row { align-items: center; gap: 3px 10px; grid-template-columns: 36px minmax(0,1fr) auto; min-height: 52px; padding: 8px 1px; }
.cp-modal--spacious .cp-info-row__icon { border-radius: 11px; height: 36px; width: 36px; }
.cp-modal--spacious .cp-info-row__icon svg { font-size: 17px; }
.cp-modal--spacious .cp-info-row > div { display: grid; gap: 3px; }
.cp-modal--spacious .cp-info-row b { font-size: 13px; font-weight: 800; line-height: 1.3; }
.cp-modal--spacious .cp-info-row small { font-size: 10px; grid-column: auto; line-height: 1.4; }
.cp-modal--spacious .cp-info-row > strong { font-size: 12px; }
.theme-dark .cp-info-row > strong { color: #b4dfb8; }
.cp-info-group--wide { grid-column: 1 / -1; }
.cp-info-group--wide > div { display: grid; gap: 0 16px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.cp-info-group--wide .cp-info-row { border-left: 1px solid #e6ebe3; border-top: 0; padding-left: 16px; }
.cp-info-group--wide .cp-info-row:first-child { border-left: 0; padding-left: 1px; }
.cp-view-panel--spend { background: #fff8f3; border-color: #ecd9ce; }
.cp-cost-grid { display: grid; gap: 13px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.cp-cost-grid .cp-cost-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cp-cost-card { align-items: start; background: #fff; border: 1px solid #eadbd3; border-radius: 19px; display: grid; gap: 13px; grid-template-columns: 48px minmax(0,1fr) auto; min-height: 142px; padding: 18px; }
.cp-cost-card > span { align-items: center; background: #fae6dc; border-radius: 14px; color: #a65343; display: flex; height: 48px; justify-content: center; width: 48px; }
.cp-cost-card > span svg { font-size: 23px; }
.cp-cost-card > div { align-self: stretch; display: flex; flex-direction: column; }
.cp-cost-card .kicker { color: #a75a4b; font-size: 9px; margin: 1px 0 5px; }
.cp-cost-card h4 { font: 700 20px/1.08 var(--serif); margin: 0 0 8px; }
.cp-cost-card > div > p:not(.kicker) { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 0; }
.cp-cost-card > strong { align-self: start; background: #fff0e8; border-radius: 999px; color: #a64839; font-size: 12px; padding: 7px 9px; white-space: nowrap; }
.cp-cost-card.is-locked { background: #f1f1ec; border-color: #dedfd8; }
.cp-cost-card.is-locked > span { background: #e1e2dc; color: #70766e; }
.cp-cost-card.is-locked .kicker,.cp-cost-card.is-locked > strong { color: #70766e; }
.cp-cost-card.is-locked > strong { background: #e5e6e0; }
.cp-modal__footer--spacious { padding-inline: 3px; }
.cp-modal__footer--spacious > div:first-child b { font-size: 13px; }
.cp-modal__footer--spacious > div:first-child small { font-size: 11px; }
.theme-dark .cp-balance { background: linear-gradient(135deg,#31573b,#476e4e); }
.theme-dark .cp-view-tabs { background: #202d24; border-color: #394b3c; }
.theme-dark .cp-view-tabs > button { color: #b8c4b6; }
.theme-dark .cp-view-tabs > button > span { background: #2c3d30; color: #b8d5b4; }
.theme-dark .cp-view-tabs > button.is-active { background: #2a3a2e; border-color: #49604d; color: #e6efe3; box-shadow: none; }
.theme-dark .cp-view-tabs > button[data-tab="spend"].is-active { background: #3a2925; border-color: #67443c; color: #f1b0a1; }
.theme-dark .cp-view-panel { background: #1a2720; border-color: #394b3d; }
.theme-dark .cp-view-panel--spend { background: #30231f; border-color: #5b3f37; }
.theme-dark .cp-info-group { background: #202f26; border-color: #3b4e3f; }
.theme-dark .cp-info-group > header,.theme-dark .cp-info-group--wide .cp-info-row { border-color: #3a4a3e; }
.theme-dark .cp-info-group > header > span { background: #2c4131; color: #b5d5b0; }
.theme-dark .cp-cost-card { background: #261d1a; border-color: #563c35; }
.theme-dark .cp-cost-card > span { background: #472e28; color: #f0a291; }
.theme-dark .cp-cost-card > strong { background: #402923; color: #f0a291; }
.theme-dark .cp-cost-card.is-locked { background: #282b27; border-color: #434741; }
@media (max-width: 760px) {
  .cp-modal--spacious { padding: 21px; }
  .cp-modal--spacious > .modal-close { right: 30px; top: 30px; }
  .cp-earn-layout,.cp-cost-grid { grid-template-columns: 1fr; }
  .cp-cost-grid .cp-cost-card:last-child:nth-child(odd) { grid-column: auto; }
  .cp-info-group--wide { grid-column: auto; }
  .cp-info-group--wide > div { grid-template-columns: 1fr; }
  .cp-info-group--wide .cp-info-row,.cp-info-group--wide .cp-info-row:first-child { border-left: 0; border-top: 1px solid #e6ebe3; padding-left: 1px; }
  .cp-info-group--wide .cp-info-row:first-child { border-top: 0; }
  .theme-dark .cp-info-group--wide .cp-info-row { border-color: #3a4a3e; }
}
@media (max-width: 520px) {
  .modal-backdrop:has(.cp-modal--spacious) { align-items: end; padding: 0; }
  .cp-modal--spacious { border-radius: 24px 24px 0 0; max-height: 94vh; padding: 14px; }
  .cp-modal--spacious > .modal-close { right: 22px; top: 22px; }
  .cp-balance { border-radius: 19px; grid-template-columns: minmax(0,1fr) 46px; padding: 20px; }
  .cp-balance > span { border-radius: 14px; height: 46px; width: 46px; }
  .cp-balance > span svg { font-size: 23px; }
  .cp-balance p:not(.kicker) { font-size: 11px; max-width: 230px; }
  .cp-view-tabs > button { gap: 8px; grid-template-columns: 34px minmax(0,1fr); min-height: 58px; padding: 8px; }
  .cp-view-tabs > button > span { border-radius: 10px; height: 34px; width: 34px; }
  .cp-view-tabs > button b { font-size: 12px; }
  .cp-view-tabs > button small { font-size: 9px; }
  .cp-view-panel { border-radius: 18px; padding: 17px; }
  .cp-view-panel > header h3 { font-size: 26px; }
  .cp-info-group { padding: 14px; }
  .cp-cost-card { grid-template-columns: 42px minmax(0,1fr); min-height: 0; padding: 15px; }
  .cp-cost-card > span { height: 42px; width: 42px; }
  .cp-cost-card > strong { grid-column: 2; justify-self: start; }
}

/* Profile notices stay useful without visually outweighing the profile content. */
.profile-page .cookbook-lock--compact {
  gap: 16px;
  grid-template-columns: 50px minmax(0,1fr);
  margin: 30px 0 18px;
  padding: 18px 20px;
}
.profile-page .cookbook-lock--compact::after { height: 180px; right: -72px; top: -82px; width: 180px; }
.profile-page .cookbook-lock--compact .cookbook-lock__icon { border-radius: 14px; height: 46px; width: 46px; }
.profile-page .cookbook-lock--compact .cookbook-lock__icon svg { font-size: 21px; }
.profile-page .cookbook-lock--compact .kicker { font-size: 9px; margin-bottom: 4px; }
.profile-page .cookbook-lock--compact h2 { font-size: clamp(23px,2.15vw,30px); line-height: .98; margin-bottom: 6px; }
.profile-page .cookbook-lock--compact p:not(.kicker) { font-size: 11px; line-height: 1.45; max-width: 720px; }
.profile-page .referral-panel--profile-end {
  gap: 14px;
  grid-template-columns: 46px minmax(0,1fr);
  margin: 0 0 58px;
  padding: 16px 18px;
}
.profile-page .referral-panel--profile-end .referral-panel__icon { height: 42px; width: 42px; }
.profile-page .referral-panel--profile-end .referral-panel__icon svg { font-size: 20px; }
.profile-page .referral-panel--profile-end .kicker { font-size: 9px; }
.profile-page .referral-panel--profile-end h2 { font-size: 22px; margin-bottom: 4px; }
.profile-page .referral-panel--profile-end p:not(.kicker) { font-size: 11px; line-height: 1.42; }
.profile-page .referral-panel--profile-end > div > small { font-size: 9px; margin-top: 6px; }
.profile-page .referral-panel--profile-end .referral-link { margin-top: 9px; max-width: 680px; }
.profile-page .referral-panel--profile-end .referral-link input { font-size: 10px; padding: 8px 10px; }
.profile-page .referral-panel--profile-end .referral-link .button { min-height: 34px; padding: 7px 10px; }
@media (max-width: 560px) {
  .profile-page .cookbook-lock--compact { gap: 12px; grid-template-columns: 40px minmax(0,1fr); margin-top: 24px; padding: 15px; }
  .profile-page .cookbook-lock--compact .cookbook-lock__icon { border-radius: 12px; height: 38px; width: 38px; }
  .profile-page .cookbook-lock--compact h2 { font-size: 22px; }
  .profile-page .referral-panel--profile-end { gap: 11px; grid-template-columns: 38px minmax(0,1fr); margin-bottom: 44px; padding: 15px; }
  .profile-page .referral-panel--profile-end .referral-panel__icon { height: 36px; width: 36px; }
}

/* styles/app-release.css */
/* Final readability floor: compact metadata remains secondary, but never
   collapses into illegible 7–10px text after later component refinements. */
:where(main, .auth-modal, .consent-banner, .notifications-modal, .connections-modal) small {
  font-size: max(11px, .72rem) !important;
  line-height: 1.4;
}
:where(main, .auth-modal, .consent-banner) .kicker,
:where(main, .auth-modal, .consent-banner) .eyebrow {
  font-size: max(10.5px, .68rem) !important;
}
.recipe-card__category,
.recipe-card__signal,
.timeline-post__context,
.timeline-post__facts,
.timeline-post__tags span,
.timeline-ad-slot__heading > span,
.restaurant-account-badge,
.weekly-leader > em,
.weekly-leaderboard > footer,
.connection-person > em {
  font-size: max(10.5px, .68rem) !important;
  line-height: 1.3;
}

/* Toasts must remain an unmistakable status message on the dark canvas.
   --ink becomes a light text colour in dark mode, so it cannot also serve
   as the toast background there. */
.toast {
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 34px rgba(17,29,21,.28);
  line-height: 1.45;
}
.theme-dark .toast {
  background: #f4f1e7;
  border-color: #fffdf5;
  box-shadow: 0 16px 42px rgba(0,0,0,.48), 0 0 0 1px rgba(25,42,31,.2);
  color: #17241b;
  font-size: 14px;
  font-weight: 750;
  text-shadow: none;
}

/* Saving is a primary card action. In dark mode the neutral green control
   blended into recipe cards, so both states now have an explicit signal. */
.theme-dark .social-button--save {
  background: #f3e5aa;
  border-color: #f2cf62;
  box-shadow: 0 5px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(255,232,144,.12);
  color: #193224;
}
.theme-dark .social-button--save:hover,
.theme-dark .social-button--save:focus-visible {
  background: #ffd86f;
  border-color: #ffe293;
  color: #13291c;
}

/* Installable app shell. Website and installed app share the same markup,
   routes and online account; only the mobile chrome changes. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
html.is-network-busy::after {
  animation: network-progress 1.05s ease-in-out infinite;
  background: linear-gradient(90deg,transparent,var(--coral),var(--gold),transparent);
  content: '';
  height: 3px;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateX(-70%);
  width: 58%;
  z-index: 250;
}
@keyframes network-progress { to { transform: translateX(205%); } }
.route-loading { align-items: start; display: grid; gap: 34px; grid-template-columns: minmax(0,.72fr) minmax(280px,1fr); min-height: 58vh; padding-bottom: 90px; padding-top: clamp(72px,10vw,140px); }
.route-loading > div:first-child { max-width: 620px; }
.route-loading__mark { align-items: center; background: #e8f0e3; border: 1px solid #d5e2d1; border-radius: 50%; color: var(--leaf); display: inline-flex; height: 46px; justify-content: center; margin-bottom: 18px; width: 46px; }
.route-loading__mark svg { animation: route-loading-pulse 1.15s ease-in-out infinite alternate; font-size: 22px; }
.route-loading h1 { font: 700 clamp(39px,6vw,72px)/.98 var(--serif); letter-spacing: -.04em; margin: 8px 0 14px; }
.route-loading > div:first-child > p:last-child { color: var(--muted); font-size: 15px; }
.route-loading__cards { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.route-loading__cards span { animation: route-loading-shimmer 1.4s ease-in-out infinite alternate; background: linear-gradient(120deg,#edf1e9,#fbf8ee 55%,#e9efe5); border: 1px solid #e0e5dc; border-radius: 24px; display: block; min-height: 170px; }
.route-loading__cards span:first-child { grid-column: 1 / -1; min-height: 230px; }
.route-loading__cards span:nth-child(2) { animation-delay: .12s; }
.route-loading__cards span:nth-child(3) { animation-delay: .24s; }
@keyframes route-loading-pulse { to { opacity: .42; transform: scale(.88); } }
@keyframes route-loading-shimmer { to { filter: brightness(.965); opacity: .7; } }
.theme-dark .route-loading__mark { background: #273b2d; border-color: #405443; color: #d8ead3; }
.theme-dark .route-loading__cards span { background: linear-gradient(120deg,#202e24,#2b3327 55%,#24352a); border-color: #35473b; }
@media (prefers-reduced-motion: reduce) {
  html.is-network-busy::after,.route-loading__mark svg,.route-loading__cards span { animation-duration: 2.4s; }
}
.header-install-app {
  align-items: center;
  background: #edf3e9;
  border: 1px solid #d5e1d2;
  border-radius: 999px;
  color: #315a3d;
  display: inline-flex;
  font-size: 11px;
  font-weight: 850;
  gap: 5px;
  min-height: 34px;
  padding: 6px 10px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.header-install-app:hover,.header-install-app:focus-visible { background: #e2eddd; border-color: #b9ceb5; transform: translateY(-1px); }
.header-install-app svg { font-size: 16px; }
.theme-dark .header-install-app { background: #223126; border-color: #405443; color: #d8ead3; }
.theme-dark .header-install-app:hover,.theme-dark .header-install-app:focus-visible { background: #2c4032; border-color: #57705b; color: #fff; }
.app-bottom-nav,.mobile-menu-trigger,.mobile-menu-layer { display: none; }

/* Keep all header tools reachable between phone and desktop layouts. */
@media (min-width: 761px) and (max-width: 980px) {
  .header-actions--grouped, .header-utility-actions { gap: 6px; }
  .header-utility-actions .header-install-app { width: 36px; height: 36px; min-width: 36px; padding: 0; justify-content: center; }
  .header-install-app > span, .header-app-status::after, .header-shopping > span, .header-create > span { display: none; }
  .header-create-group .header-create { min-width: 40px; width: 40px; padding: 8px; justify-content: center; }
}
.app-install-modal { border-radius: 28px; display: grid; gap: 18px; grid-template-columns: 86px minmax(0,1fr); max-width: 570px; }
.app-install-modal > img { border-radius: 24px; box-shadow: 0 13px 30px rgba(28,55,39,.2); height: 86px; width: 86px; }
.app-install-modal .kicker { margin-bottom: 7px; }
.app-install-modal h2 { margin-bottom: 14px; }
.app-install-modal p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
.app-install-modal small { color: var(--muted); display: block; font-size: 11px; line-height: 1.45; }
.app-install-modal > .button { grid-column: 2; justify-self: start; margin-top: 0; }
.theme-dark .app-install-modal { background: #19251d; }

@media (max-width: 760px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .route-loading { gap: 22px; grid-template-columns: 1fr; min-height: 62vh; padding-bottom: 52px; padding-top: 54px; }
  .route-loading h1 { font-size: clamp(38px,12vw,54px); }
  .route-loading__cards { gap: 9px; }
  .route-loading__cards span { border-radius: 18px; min-height: 108px; }
  .route-loading__cards span:first-child { min-height: 148px; }
  html.mobile-menu-open,html.mobile-menu-open body { overflow: hidden; }
  .site-header__inner {
    grid-template-areas: 'brand actions' 'search search' !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .site-header .primary-nav { display: none !important; }
  .site-header__inner > .global-search { grid-area: search; max-width: none; }
  .site-header__inner > .header-actions { grid-area: actions; }
  .header-actions--grouped .header-utility-actions { display: none; }
  .header-actions--grouped .header-create-group,
  .header-actions--grouped .header-profile-end,
  .header-actions--grouped > .login-link,
  .header-help { display: none; }
  .header-actions--grouped { gap: 6px; }
  .header-actions--grouped .header-account-actions { border-right: 0; gap: 5px; padding-right: 0; }
  .header-actions--grouped .header-account-actions .header-points { min-height: 36px; padding: 5px 9px; }
  .header-actions--grouped .header-account-actions .header-bell { height: 36px; width: 36px; }
  .mobile-menu-trigger {
    align-items: center;
    background: #edf3e9;
    border: 1px solid #d5e1d2;
    border-radius: 50%;
    color: var(--leaf);
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
  }
  .mobile-menu-trigger svg { font-size: 20px; }
  .mobile-menu-trigger.is-active { background: var(--leaf); border-color: var(--leaf); color: #fff; }
  .header-install-app { border-radius: 50%; height: 34px; justify-content: center; padding: 0; width: 34px; }
  .header-install-app span { display: none; }
  .app-bottom-nav {
    align-items: end;
    background: rgba(255,254,249,.94);
    border: 1px solid rgba(178,193,178,.58);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    bottom: 0;
    box-shadow: 0 -12px 34px rgba(29,54,38,.13);
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    left: 0;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding: 7px max(7px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(7px,env(safe-area-inset-left,0px));
    position: fixed;
    width: 100%;
    z-index: 65;
  }
  .app-bottom-nav > a,.app-bottom-nav > button {
    align-items: center;
    align-self: stretch;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: #768176;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    font-weight: 800;
    gap: 3px;
    justify-content: center;
    min-height: 52px;
    min-width: 0;
    padding: 5px 2px;
    position: relative;
    text-decoration: none;
  }
  .app-bottom-nav > a svg,.app-bottom-nav > button svg { font-size: 21px; }
  .app-bottom-nav > .is-active { background: #e9f1e5; color: var(--leaf); }
  .app-bottom-nav > a > b { align-items: center; background: var(--coral); border: 2px solid #fffef9; border-radius: 999px; color: #fff; display: flex; font-size: 8px; height: 18px; justify-content: center; min-width: 18px; padding: 0 4px; position: absolute; right: calc(50% - 18px); top: 3px; }
  .app-bottom-nav .app-bottom-nav__create {
    background: var(--leaf);
    box-shadow: 0 9px 22px rgba(35,69,53,.3);
    color: #fff;
    margin: -16px 3px 3px;
    min-height: 61px;
  }
  .app-bottom-nav .app-bottom-nav__create svg { color: var(--butter); font-size: 25px; }
  .theme-dark .app-bottom-nav { background: rgba(24,35,28,.96); border-color: #3a4c3e; box-shadow: 0 -12px 34px rgba(0,0,0,.35); }
  .theme-dark .app-bottom-nav > a,.theme-dark .app-bottom-nav > button { color: #aeb9ae; }
  .theme-dark .app-bottom-nav > .is-active { background: #26382b; color: #e0efdc; }
  .theme-dark .app-bottom-nav .app-bottom-nav__create { background: #4c7653; color: #fff; }
  .theme-dark .mobile-menu-trigger { background: #26382b; border-color: #405443; color: #d9ead5; }
  .theme-dark .mobile-menu-trigger.is-active { background: #5b8661; border-color: #78a17c; color: #fff; }
  .mobile-menu-layer { display: block; inset: 0; position: fixed; z-index: 64; }
  .mobile-menu-scrim { background: rgba(16,29,21,.54); border: 0; inset: 0; position: absolute; width: 100%; }
  .mobile-menu-sheet {
    animation: mobile-menu-enter .22s cubic-bezier(.2,.72,.25,1) both;
    background: #fffef9;
    border: 1px solid #d8e2d5;
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    bottom: calc(65px + env(safe-area-inset-bottom,0px));
    box-shadow: 0 -24px 54px rgba(22,43,29,.24);
    left: 50%;
    max-height: calc(100dvh - 86px - env(safe-area-inset-top,0px));
    max-width: 560px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px max(18px,env(safe-area-inset-right,0px)) 24px max(18px,env(safe-area-inset-left,0px));
    position: absolute;
    transform: translateX(-50%);
    width: min(100%,560px);
  }
  @keyframes mobile-menu-enter { from { opacity: 0; transform: translate(-50%,18px); } to { opacity: 1; transform: translate(-50%,0); } }
  .mobile-menu-sheet > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
  .mobile-menu-sheet > header .kicker { margin: 0 0 3px; }
  .mobile-menu-sheet > header h2 { font: 700 30px/1 var(--serif); margin: 0; }
  .mobile-menu-close { align-items: center; background: #edf3e9; border: 1px solid #d5e1d2; border-radius: 50%; color: var(--leaf); display: flex; height: 42px; justify-content: center; width: 42px; }
  .mobile-menu-close svg { font-size: 19px; }
  .mobile-menu-account { background: linear-gradient(135deg,#eef4e9,#fff7df); border: 1px solid #d9e3d4; border-radius: 20px; margin-bottom: 14px; padding: 11px; }
  .mobile-menu-account > a { align-items: center; color: var(--ink); display: grid; gap: 10px; grid-template-columns: 46px minmax(0,1fr) 20px; min-height: 50px; text-decoration: none; }
  .mobile-menu-account > a > span:nth-child(2),.mobile-menu-account--guest > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
  .mobile-menu-account small { color: var(--muted); font-size: 10px; }
  .mobile-menu-account b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-account > a > svg { color: var(--leaf); font-size: 17px; }
  .mobile-menu-account > div { border-top: 1px solid rgba(109,133,102,.18); display: grid; gap: 6px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 10px; padding-top: 10px; }
  .mobile-menu-account > div a { align-items: center; background: rgba(255,255,255,.72); border: 1px solid rgba(190,205,184,.8); border-radius: 13px; color: var(--leaf); display: flex; font-size: 11px; font-weight: 800; gap: 7px; min-height: 42px; padding: 8px 10px; text-decoration: none; }
  .mobile-menu-account > div svg { font-size: 17px; }
  .mobile-menu-account--guest { align-items: center; display: grid; gap: 10px; grid-template-columns: 46px minmax(0,1fr); }
  .mobile-menu-account--guest .button { grid-column: 1 / -1; min-height: 44px; width: 100%; }
  .mobile-menu-avatar { align-items: center; background: var(--avatar,#365f4a); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 3px 10px rgba(27,52,36,.16); color: #fff; display: flex; font-size: 12px; font-weight: 850; height: 46px; justify-content: center; overflow: hidden; width: 46px; }
  .mobile-menu-avatar img { height: 100%; object-fit: cover; width: 100%; }
  .mobile-menu-destinations { display: grid; gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobile-menu-destinations > a,.mobile-menu-tools > a,.mobile-menu-tools > button { align-items: center; background: #f5f7f2; border: 1px solid #dfe6dc; border-radius: 16px; color: var(--ink); display: grid; gap: 9px; grid-template-columns: 34px minmax(0,1fr); min-height: 66px; padding: 10px; text-align: left; text-decoration: none; width: 100%; }
  .mobile-menu-destinations > a > svg,.mobile-menu-tools > a > svg,.mobile-menu-tools > button > svg { background: #e4eee0; border-radius: 11px; color: var(--leaf); font-size: 18px; height: 34px; padding: 8px; width: 34px; }
  .mobile-menu-destinations span,.mobile-menu-tools span { display: grid; gap: 2px; min-width: 0; }
  .mobile-menu-destinations b,.mobile-menu-tools b { font-size: 11px; }
  .mobile-menu-destinations small,.mobile-menu-tools small { color: var(--muted); font-size: 9px; line-height: 1.3; }
  .mobile-menu-destinations__learn { grid-column: 1 / -1; grid-template-columns: 34px minmax(0,1fr) 18px !important; }
  .mobile-menu-destinations__learn > svg:last-child { background: transparent; height: 18px; padding: 0; width: 18px; }
  .mobile-menu-tools { border-top: 1px solid #e2e7df; display: grid; gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 14px; padding-top: 14px; }
  .mobile-menu-tools > button { font: inherit; }
  .mobile-menu-sheet > footer { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 0 3px; }
  .mobile-menu-sheet > footer a,.mobile-menu-signout { background: transparent; border: 0; color: var(--muted); font-size: 10px; font-weight: 750; padding: 6px 0; text-decoration: none; }
  .mobile-menu-signout { align-items: center; color: #a34e3e; display: inline-flex; gap: 5px; margin-left: auto; }
  .mobile-menu-signout svg { font-size: 14px; }
  .theme-dark .mobile-menu-sheet { background: #18231c; border-color: #3b4d3f; box-shadow: 0 -24px 54px rgba(0,0,0,.5); }
  .theme-dark .mobile-menu-close { background: #26382b; border-color: #405443; color: #d9ead5; }
  .theme-dark .mobile-menu-account { background: linear-gradient(135deg,#24372a,#332f21); border-color: #405143; }
  .theme-dark .mobile-menu-account > div { border-color: #405143; }
  .theme-dark .mobile-menu-account > div a { background: rgba(20,31,24,.75); border-color: #435547; color: #d9ead5; }
  .theme-dark .mobile-menu-destinations > a,.theme-dark .mobile-menu-tools > a,.theme-dark .mobile-menu-tools > button { background: #202d23; border-color: #3a4c3e; color: #e9f0e6; }
  .theme-dark .mobile-menu-destinations > a > svg,.theme-dark .mobile-menu-tools > a > svg,.theme-dark .mobile-menu-tools > button > svg { background: #2c4131; color: #c5dfc0; }
  .theme-dark .mobile-menu-tools { border-color: #34463a; }
  .toast { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .modal-backdrop { padding-bottom: max(22px,env(safe-area-inset-bottom,0px)); padding-top: max(22px,env(safe-area-inset-top,0px)); }
  .consent-banner { bottom: calc(73px + env(safe-area-inset-bottom,0px)); }
  .field input,.field select,.field textarea,.repeat-row input,.repeat-row textarea { font-size: 16px; min-height: 44px; }
}

@media (max-width: 520px) {
  .brand .brand__word { font-size: 23px; }
  .header-utility-actions .header-shopping span { display: none; }
  .app-install-modal { border-radius: 24px; grid-template-columns: 62px minmax(0,1fr); padding: 27px 20px 22px; }
  .app-install-modal > img { border-radius: 18px; height: 62px; width: 62px; }
  .app-install-modal h2 { font-size: 35px; }
  .app-install-modal > .button { grid-column: 1 / -1; justify-self: stretch; }
  .mobile-menu-sheet { border-radius: 24px 24px 0 0; padding-left: 14px; padding-right: 14px; }
  .mobile-menu-tools { grid-template-columns: 1fr; }
  .mobile-menu-destinations > a { min-height: 64px; }
}
.theme-dark .social-button--save.is-active,
.theme-dark .social-button--save[aria-pressed="true"] {
  background: #79a97d;
  border-color: #a9d2aa;
  box-shadow: inset 0 0 0 1px rgba(238,255,236,.2), 0 6px 17px rgba(0,0,0,.28);
  color: #0e2415;
}

/* Photo posts are a distinct social format: they share the calm timeline
   language without inheriting recipe-only labels, statistics or actions. */
.photo-post__menu { align-items: center; display: flex; }
.photo-post__menu button { align-items: center; background: transparent; border: 0; border-radius: 50%; color: #839083; display: flex; height: 36px; justify-content: center; width: 36px; }
.photo-post__menu button:hover,.photo-post__menu button:focus-visible { background: #eef3eb; color: var(--leaf); outline: none; }
.photo-post__menu svg { font-size: 18px; }
.photo-post__caption { padding: 0 18px 16px; }
.photo-post__caption p { color: #4d594e; font-size: 14px; line-height: 1.6; margin: 0; white-space: pre-line; }
.photo-post__image { aspect-ratio: 4 / 5; background: #e9ede5; overflow: hidden; }
.photo-post__image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.photo-post__actions { align-items: center; display: flex; gap: 8px; padding: 12px 18px 14px; }
.photo-post__actions button { align-items: center; background: #f2f5ef; border: 1px solid #dde5da; border-radius: 999px; color: #586459; display: inline-flex; font: 780 12px/1 var(--sans); gap: 7px; min-height: 42px; padding: 9px 13px; }
.photo-post__actions button:hover,.photo-post__actions button:focus-visible { background: #e8f1e5; border-color: #bfd1bc; color: var(--leaf); outline: none; }
.photo-post__actions button.is-active { background: #f8e5df; border-color: #e6b9aa; color: #a55443; }
.photo-post__actions button svg { font-size: 19px; }
.photo-post__actions button b { font-size: 11px; }
.photo-post__actions button:last-child { margin-left: auto; }

/* Creation flow: one focused task, with the uploaded image as the visual centrepiece. */
.photo-post-create { display: grid; gap: 38px; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); padding-bottom: 100px; padding-top: 58px; }
.photo-post-create__intro { align-self: start; padding: 18px 8px; position: sticky; top: 150px; }
.photo-post-create__intro h1 { font-size: clamp(46px,5.7vw,76px); line-height: .91; margin: 18px 0; }
.photo-post-create__intro > p:not(.kicker) { color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 430px; }
.photo-post-form { background: #fffef9; border: 1px solid #dce5d9; border-radius: 28px; box-shadow: 0 18px 46px rgba(35,57,39,.08); overflow: hidden; }
.photo-post-form > section { display: grid; gap: 20px; padding: clamp(22px,4vw,38px); }
.photo-post-form__author { align-items: center; display: flex; gap: 12px; }
.photo-post-form__author .avatar { height: 46px; width: 46px; }
.photo-post-form__author > span { display: grid; gap: 3px; }
.photo-post-form__author b { font-size: 14px; }
.photo-post-form__author small { color: var(--muted); }
.photo-post-dropzone,.photo-post-dropzone .image-dropzone__empty { min-height: 390px; }
.photo-post-dropzone .image-dropzone__preview { height: min(62vw,620px); min-height: 390px; }
.photo-post-form .field textarea { min-height: 130px; resize: vertical; }
.photo-post-form > footer { align-items: center; background: #f3f6ef; border-top: 1px solid #dce5d9; display: flex; gap: 20px; justify-content: space-between; padding: 18px clamp(22px,4vw,38px); }
.photo-post-form > footer p { align-items: center; color: var(--muted); display: flex; font-size: 12px; gap: 7px; margin: 0; }
.photo-post-form > footer p svg { color: var(--leaf); font-size: 18px; }

/* Three clear choices fit the creator hub without compressing their type. */
.creator-hub__choices--social { grid-template-columns: repeat(3,minmax(0,1fr)); }
.creator-hub__choices--social .creator-choice { min-height: 430px; padding: clamp(24px,3vw,40px); }
.creator-hub__choices--social .creator-choice h2 { font-size: clamp(34px,3.2vw,50px); }
.creator-choice--post { background: radial-gradient(circle at 90% 10%,rgba(255,255,255,.55),transparent 15rem),linear-gradient(145deg,#f7ddd1,#eab69f); border-color: #dfad98; }
.creator-choice--post .kicker { color: #8d4939; }
.creator-choice--post h2 { color: #3f4037; }
.creator-choice--post h2 em { color: #9f5948; }
.creator-choice--post > p:not(.kicker) { color: #6c5e57; }
.creator-choice--post .creator-choice__icon { background: rgba(255,251,244,.72); border: 1px solid rgba(141,73,57,.16); color: #a45644; }
.creator-choice--post .creator-choice__go { color: #814c3f; }
.creator-choice--locked { cursor: default; }
.creator-choice--locked:hover { filter: none; transform: none; }

/* Public profile gallery: an editorial grid, not a second recipe browser. */
.profile-photo-posts { border-top: 1px solid #d8ded5; margin-top: 54px; padding-top: 62px; }
.profile-photo-grid { display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.profile-photo-grid > .empty-state { grid-column: 1 / -1; }
.profile-photo-post { aspect-ratio: 1; background: #e7ece3; border-radius: 20px; box-shadow: 0 10px 25px rgba(38,55,40,.06); overflow: hidden; position: relative; }
.profile-photo-post > img { height: 100%; object-fit: cover; transition: transform .35s ease; width: 100%; }
.profile-photo-post__overlay { align-items: center; background: linear-gradient(180deg,transparent 48%,rgba(13,26,17,.65)); color: #fff; display: flex; inset: 0; justify-content: flex-end; padding: 16px; pointer-events: none; position: absolute; }
.profile-photo-post__overlay span { align-items: center; display: flex; font-size: 12px; font-weight: 800; gap: 6px; }
.profile-photo-post__copy { background: rgba(18,31,22,.91); color: #fff; display: grid; gap: 10px; inset: auto 0 0; max-height: 100%; opacity: 0; padding: 15px; position: absolute; transform: translateY(10px); transition: opacity .22s ease,transform .22s ease; }
.profile-photo-post__copy p { font-size: 12px; line-height: 1.5; margin: 0; max-height: 5.8em; overflow: auto; white-space: pre-line; }
.profile-photo-post__copy small { color: rgba(255,255,255,.72); }
.profile-photo-post__copy > div { display: flex; gap: 7px; }
.profile-photo-post__copy button { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26); border-radius: 999px; color: #fff; font: 780 11px/1 var(--sans); min-height: 34px; padding: 7px 10px; }
.profile-photo-post__copy button.is-active { background: #f1c2b3; border-color: #f3cabc; color: #54271d; }
.profile-photo-post:hover > img,.profile-photo-post:focus-within > img { transform: scale(1.025); }
.profile-photo-post:hover .profile-photo-post__copy,.profile-photo-post:focus-within .profile-photo-post__copy { opacity: 1; transform: translateY(0); }
.profile-photo-post:hover .profile-photo-post__overlay,.profile-photo-post:focus-within .profile-photo-post__overlay { opacity: 0; }

/* Registration errors remain beside the field that needs attention. */
.auth-form-feedback { background: #fff0e9; border: 1px solid #e5ad9b; border-radius: 14px; color: #793f32; font-size: 13px; font-weight: 700; line-height: 1.45; margin-bottom: 14px; padding: 12px 14px; }
.auth-username-help { border-radius: 10px; display: block; margin-top: 7px; padding: 7px 9px; }
.auth-username-help.is-valid { background: #ebf4e7; color: #3e6b43; }
.auth-username-help.is-invalid { background: #fff0e9; color: #934d3c; }
.auth-modal .field.is-invalid input { border-color: #c96750; box-shadow: 0 0 0 3px rgba(201,103,80,.12); }

.theme-dark .photo-post__caption p { color: #d3ddd0; }
.theme-dark .photo-post__menu button:hover,.theme-dark .photo-post__menu button:focus-visible { background: #26372b; color: #c7dfc3; }
.theme-dark .photo-post__image { background: #263029; }
.theme-dark .photo-post__actions button { background: #233027; border-color: #3a4a3d; color: #c0cabd; }
.theme-dark .photo-post__actions button:hover,.theme-dark .photo-post__actions button:focus-visible { background: #2d4132; border-color: #526a56; color: #d8ead4; }
.theme-dark .photo-post__actions button.is-active { background: #53352e; border-color: #815045; color: #f4c2b4; }
.theme-dark .photo-post-form { background: #1b2720; border-color: #3b4d3f; box-shadow: 0 18px 46px rgba(0,0,0,.25); }
.theme-dark .photo-post-form > footer { background: #202e25; border-color: #3b4d3f; }
.theme-dark .photo-post-dropzone { background: #202c24; border-color: #516254; }
.theme-dark .creator-choice--post { background: radial-gradient(circle at 90% 10%,rgba(255,255,255,.05),transparent 15rem),linear-gradient(145deg,#493129,#382924); border-color: #69463b; }
.theme-dark .creator-choice--post h2 { color: #f3ebe4; }
.theme-dark .creator-choice--post h2 em { color: #edaa95; }
.theme-dark .creator-choice--post > p:not(.kicker) { color: #d3bdb4; }
.theme-dark .creator-choice--post .kicker,.theme-dark .creator-choice--post .creator-choice__go { color: #f1ad97; }
.theme-dark .creator-choice--post .creator-choice__icon { background: #53372e; border-color: #765044; color: #f3b29d; }
.theme-dark .profile-photo-posts { border-color: #39483d; }
.theme-dark .auth-form-feedback,.theme-dark .auth-username-help.is-invalid { background: #472d27; border-color: #70483f; color: #f0c0b3; }
.theme-dark .auth-username-help.is-valid { background: #243a29; color: #b7d8b4; }

@media (max-width: 980px) {
  .creator-hub__choices--social { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creator-hub__choices--social .creator-choice--locked { grid-column: 1 / -1; min-height: 280px; }
  .photo-post-create { grid-template-columns: 1fr; }
  .photo-post-create__intro { padding: 0; position: static; }
}
@media (max-width: 680px) {
  .creator-hub__choices--social { grid-template-columns: 1fr; }
  .creator-hub__choices--social .creator-choice--locked { grid-column: auto; }
  .creator-hub__choices--social .creator-choice { min-height: 330px; }
  .photo-post-create { gap: 24px; padding-bottom: 82px; padding-top: 30px; }
  .photo-post-create__intro h1 { font-size: 48px; }
  .photo-post-form { border-radius: 20px; }
  .photo-post-form > section { padding: 18px; }
  .photo-post-form > footer { align-items: stretch; flex-direction: column; padding: 16px 18px; }
  .photo-post-form > footer .button { justify-content: center; width: 100%; }
  .photo-post-dropzone,.photo-post-dropzone .image-dropzone__empty { min-height: 290px; }
  .photo-post-dropzone .image-dropzone__preview { height: 112vw; max-height: 560px; min-height: 290px; }
  .profile-photo-grid { gap: 7px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-photo-post { border-radius: 14px; }
  .profile-photo-post__copy { opacity: 1; padding: 10px; transform: none; }
  .profile-photo-post__copy p,.profile-photo-post__copy small { display: none; }
  .profile-photo-post__copy button { font-size: 0; min-width: 36px; padding: 7px; }
  .profile-photo-post__copy button svg { font-size: 17px; }
  .profile-photo-post__overlay { display: none; }
}
@media (max-width: 470px) {
  .photo-post__caption,.photo-post__actions { padding-left: 14px; padding-right: 14px; }
  .photo-post__actions button span { display: none; }
  .photo-post__actions button:last-child { min-width: 42px; }
}

/* Release polish: live notifications, clear publication rules and deliberate ad spacing. */
.header-bell { position: relative; }
.header-bell__badge,.mobile-notification-badge {
  align-items: center;
  background: #d65f4a;
  border: 2px solid var(--surface);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font: 850 9px/1 var(--sans);
  justify-content: center;
  min-height: 17px;
  min-width: 17px;
  padding: 2px 4px;
  pointer-events: none;
}
.header-bell__badge { position: absolute; right: -5px; top: -5px; }
.mobile-notification-badge { margin-left: auto; }
.header-bell__badge[hidden],.mobile-notification-badge[hidden] { display: none; }
.notification-item { border-radius: 14px; padding: 13px 12px; position: relative; }
.notification-item:first-child { border-top-color: transparent; }
.notification-item.is-unread { background: #eff5ec; border-top-color: transparent; }
.notification-item.is-unread::after { background: #d65f4a; border-radius: 50%; content: ''; height: 7px; position: absolute; right: 12px; top: 16px; width: 7px; }
.notification-item p { padding-right: 14px; }
.notification-item p > small { color: var(--muted); display: block; font-size: 10px; margin-top: 3px; }
.notifications-modal__close { justify-content: center; margin-top: 20px; width: 100%; }
.notifications-modal { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(760px, calc(100dvh - 32px)); overflow: hidden; }
.notifications-modal .notification-list { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.notifications-modal__actions { background: var(--surface); border-top: 1px solid #e0e5dc; margin-top: 12px; padding-top: 14px; }
.detail-hero .social-actions:not(.social-actions--compact) .social-button--share { background: #edf4e9; border-color: #cbdcc7; color: var(--leaf); font-weight: 800; padding-left: 15px; padding-right: 15px; }
.detail-hero .social-actions:not(.social-actions--compact) .social-button--share:hover { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.button.is-loading { cursor: progress; opacity: .78; }
.button.is-loading::after { animation: kulinara-spin .75s linear infinite; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ''; height: 13px; margin-left: 8px; width: 13px; }
@keyframes kulinara-spin { to { transform: rotate(360deg); } }
.recipe-browser-results > .timeline-ad-slot { grid-column: 1 / -1; margin: 3px 0 7px; }
.detail-page > .timeline-ad-slot { margin: 14px auto 36px; max-width: 860px; width: min(calc(100% - 40px),860px); }
.detail-page > .timeline-ad-slot .timeline-ad-slot__preview { min-height: 90px; }
.profile-photo-post__overlay b { font: inherit; }
.theme-dark .header-bell__badge,.theme-dark .mobile-notification-badge { border-color: #16221b; }
.theme-dark .notification-item.is-unread { background: #24352a; }
.theme-dark .notification-item { border-color: #39483d; }
.theme-dark .notifications-modal__actions { background: #1a241d; border-color: #39483d; }
.theme-dark .detail-hero .social-actions:not(.social-actions--compact) .social-button--share { background: #294331; border-color: #52725a; color: #d9efd5; }

@media (max-width: 600px) {
  .modal-backdrop:has(.notifications-modal) { padding: 8px; }
  .notifications-modal { max-height: calc(100dvh - 16px); padding: 28px 20px 18px; }
  .notifications-modal h2 { font-size: 34px; margin-bottom: 14px; }
  .notifications-modal__actions { margin-top: 8px; }
  .notifications-modal__close { margin-top: 0; }
}

@media (max-width: 860px) {
  .header-actions--grouped .header-account-actions .header-bell { display: inline-flex; }
}
@media (max-width: 560px) {
  .detail-page > .timeline-ad-slot { margin-bottom: 24px; width: min(calc(100% - 24px),860px); }
  .notification-item { padding-left: 10px; padding-right: 10px; }
}

/* One calm recipe destination across Community, editorial basics and classics. */
.recipes-hub .recipe-browser-page__intro { margin-bottom: 28px; }
.recipe-scope-tabs {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 0 0 18px;
}
.recipe-scope-tabs > a {
  align-items: center;
  background: #f5f7f2;
  border: 1px solid #dce5d9;
  border-radius: 18px;
  color: var(--ink);
  display: grid;
  gap: 10px;
  grid-template-columns: 40px minmax(0,1fr);
  min-height: 72px;
  padding: 12px;
  text-decoration: none;
  transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.recipe-scope-tabs > a > svg { background: #e5eee1; border-radius: 12px; color: var(--leaf); height: 40px; padding: 10px; width: 40px; }
.recipe-scope-tabs > a > span { display: grid; gap: 3px; min-width: 0; }
.recipe-scope-tabs b { font-size: 13px; }
.recipe-scope-tabs small { color: var(--muted); font-size: 10px; }
.recipe-scope-tabs > a:hover,.recipe-scope-tabs > a:focus-visible { border-color: #9eb79b; box-shadow: 0 8px 20px rgba(38,67,46,.09); transform: translateY(-2px); }
.recipe-scope-tabs > a.is-active { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 10px 24px rgba(37,70,52,.18); color: #fff; }
.recipe-scope-tabs > a.is-active > svg { background: rgba(255,255,255,.15); color: var(--butter); }
.recipe-scope-tabs > a.is-active small { color: rgba(255,255,255,.76); }
.recipes-hub-note { align-items: center; background: linear-gradient(135deg,#edf4e9,#fff8e5); border: 1px solid #d6e1d2; border-radius: var(--radius-md); display: grid; gap: 12px; grid-template-columns: 42px minmax(0,1fr); margin: 0 0 18px; padding: 14px 16px; }
.recipes-hub-note > svg { background: #dfeadd; border-radius: 13px; color: var(--leaf); height: 42px; padding: 11px; width: 42px; }
.recipes-hub-note p { display: grid; gap: 3px; margin: 0; }
.recipes-hub-note b { font-size: 13px; }
.recipes-hub-note small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.recipe-source-card { display: grid; gap: 8px; min-width: 0; }
.recipe-source-card > .recipe-card { height: 100%; }
.recipe-source-badge { align-items: center; color: var(--muted); display: inline-flex; font-size: 10px; font-weight: 850; gap: 6px; justify-self: start; letter-spacing: .03em; padding-left: 4px; text-transform: uppercase; }
.recipe-source-badge svg { color: var(--leaf); height: 15px; width: 15px; }
.recipe-source-badge--basic svg { color: #a46f22; }
.recipe-source-badge--classic svg { color: var(--coral-dark); }
.theme-dark .recipe-scope-tabs > a { background: #202d23; border-color: #3a4c3e; color: #e9f0e6; }
.theme-dark .recipe-scope-tabs > a > svg { background: #2c4131; color: #c5dfc0; }
.theme-dark .recipe-scope-tabs > a.is-active { background: #4c7653; border-color: #78a17c; color: #fff; }
.theme-dark .recipes-hub-note { background: linear-gradient(135deg,#24372a,#332f21); border-color: #405143; }
.theme-dark .recipes-hub-note > svg { background: #2c4131; color: #c5dfc0; }

@media (max-width: 760px) {
  .recipes-hub { padding-top: 30px; }
  .recipes-hub .recipe-browser-page__intro { margin-bottom: 20px; }
  .recipe-scope-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recipe-scope-tabs > a { min-height: 68px; }
}
@media (max-width: 420px) {
  .recipe-scope-tabs { gap: 8px; }
  .recipe-scope-tabs > a { gap: 8px; grid-template-columns: 36px minmax(0,1fr); padding: 10px; }
  .recipe-scope-tabs > a > svg { height: 36px; padding: 9px; width: 36px; }
  .recipe-scope-tabs b { font-size: 12px; }
  .recipes-hub-note { grid-template-columns: 36px minmax(0,1fr); padding: 12px; }
  .recipes-hub-note > svg { height: 36px; padding: 9px; width: 36px; }
}

/* Kulinara tomato brand system */
.brand-mark {
  filter: none;
  height: 34px;
  transform-origin: 50% 60%;
  width: 34px;
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  filter: none;
  transform: translateY(-1px) scale(1.045);
}
.site-footer__brand { align-items: center; color: var(--ink); display: inline-flex; gap: 10px; }
.site-footer__brand > img { height: 30px; width: 30px; }
.site-footer__brand > span { display: grid; gap: 1px; }
.site-footer__brand b { font: 700 19px/1 var(--serif); letter-spacing: -.02em; }
.site-footer__brand small { color: var(--muted); font-size: 10px; }
.route-loading__mark { background: #fff3e9; border-color: #f1d7c9; }
.route-loading__mark img { animation: route-loading-pulse 1.15s ease-in-out infinite alternate; height: 32px; width: 32px; }

.brand-update {
  align-items: center;
  background:
    radial-gradient(circle at 83% 18%, rgba(243,111,82,.13) 0 3px, transparent 4px) 0 0 / 24px 24px,
    linear-gradient(125deg, #fff7e9, #f4ead6 62%, #eaf1e5);
  border: 1px solid #eadbc6;
  border-radius: 22px;
  display: grid;
  gap: 25px;
  grid-template-columns: 90px minmax(0,1fr) auto;
  margin-bottom: 86px;
  margin-top: 22px;
  overflow: hidden;
  padding-bottom: 30px;
  padding-top: 30px;
  position: relative;
}
.brand-update > img { filter: drop-shadow(0 13px 20px rgba(124,58,40,.15)); height: 76px; width: 76px; }
.brand-update h2 { font: 700 clamp(34px,4.2vw,50px)/.94 var(--serif); letter-spacing: -.035em; margin: 3px 0 12px; }
.brand-update h2 em { color: var(--coral); font-weight: 500; }
.brand-update p:not(.kicker) { color: #5f655d; font-size: 13px; line-height: 1.65; margin: 0; max-width: 610px; }
.brand-update__actions { align-items: flex-start; display: grid; gap: 10px; justify-items: stretch; min-width: 180px; }
.brand-update__actions .text-button { justify-content: center; }

.recipe-submission {
  align-items: center;
  background: linear-gradient(120deg, #f5efe0, #fffaf0 58%, #edf4e9);
  border: 1px solid #e4dccb;
  border-radius: 20px;
  display: grid;
  gap: 24px;
  grid-template-columns: 76px minmax(0,1fr) auto;
  margin-bottom: 35px;
  margin-top: 48px;
  padding-bottom: 27px;
  padding-top: 27px;
}
.recipe-submission > img { height: 64px; width: 64px; }
.recipe-submission h2 { font: 700 clamp(30px,3.5vw,43px)/.96 var(--serif); letter-spacing: -.03em; margin: 3px 0 10px; }
.recipe-submission h2 em { color: var(--coral); font-weight: 500; }
.recipe-submission p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.62; margin: 0; max-width: 670px; }
.recipe-submission .button { white-space: nowrap; }

.social-button--save.is-active,
.social-button--save[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.social-button--save.is-active svg,
.social-button--save[aria-pressed="true"] svg { transform: none !important; }
.social-button--save:active { transform: scale(.9); }

.theme-dark .brand-update,
.theme-dark .recipe-submission { background: linear-gradient(125deg, #2a2b20, #202d24 65%, #2b382d); border-color: #465043; }
.theme-dark .brand-update p:not(.kicker),
.theme-dark .recipe-submission p:not(.kicker) { color: #b9c3b5; }
.theme-dark .site-footer__brand { color: #f1f4ed; }
.theme-dark .route-loading__mark { background: #342b24; border-color: #5c493d; }

/* Lesbarer, vollständig indexierbarer Rezeptinhalt, bevor die interaktive App übernimmt. */
.seo-recipe-prerender { margin: 0 auto; max-width: 1120px; padding: 42px 24px 90px; }
.seo-recipe-prerender__card { background: var(--paper, #fffdf8); border: 1px solid var(--line, #dedfd6); border-radius: 26px; box-shadow: 0 22px 70px rgba(35,55,44,.08); overflow: hidden; padding: clamp(24px,5vw,62px); }
.seo-recipe-prerender__brand { color: var(--leaf, #173f35); display: inline-block; font: 700 24px/1 var(--serif, Georgia, serif); margin-bottom: 42px; text-decoration: none; }
.seo-recipe-prerender h1 { font: 700 clamp(44px,7vw,78px)/.94 var(--serif, Georgia, serif); letter-spacing: -.045em; margin: 8px 0 20px; max-width: 900px; }
.seo-recipe-prerender__description { color: var(--muted, #626a62); font-size: clamp(16px,2vw,20px); line-height: 1.6; max-width: 780px; }
.seo-recipe-prerender img { aspect-ratio: 3 / 2; border-radius: 20px; display: block; height: auto; margin: 34px 0 18px; object-fit: cover; width: 100%; }
.seo-recipe-prerender__meta { color: var(--leaf, #173f35); font-size: 14px; font-weight: 700; }
.seo-recipe-prerender section { margin-top: 38px; max-width: 780px; }
.seo-recipe-prerender h2 { font: 700 34px/1 var(--serif, Georgia, serif); margin-bottom: 18px; }
.seo-recipe-prerender li { line-height: 1.65; margin: 7px 0; }
.seo-recipe-prerender__author { color: var(--muted, #626a62); margin: 34px 0 20px; }
.seo-catalog-prerender__count { color: var(--leaf, #173f35); font-weight: 800; margin: 26px 0; }
.seo-catalog-prerender__grid { display: grid; gap: 22px; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; margin: 34px 0 44px; padding: 0; }
.seo-catalog-prerender__grid li { margin: 0; }
.seo-catalog-prerender__grid article,.seo-catalog-prerender__grid a { height: 100%; }
.seo-catalog-prerender__grid a { background: #fff; border: 1px solid var(--line,#dedfd6); border-radius: 18px; color: inherit; display: block; overflow: hidden; padding-bottom: 18px; text-decoration: none; }
.seo-catalog-prerender__grid img { border-radius: 0; margin: 0 0 16px; }
.seo-catalog-prerender__grid h2 { font-size: 25px; line-height: 1.05; margin: 5px 16px 10px; }
.seo-catalog-prerender__grid p { color: var(--muted,#626a62); display: -webkit-box; font-size: 14px; line-height: 1.5; margin: 0 16px 14px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.seo-catalog-prerender__grid .kicker,.seo-catalog-prerender__grid small { display: block; margin-left: 16px; margin-right: 16px; }

@media (max-width: 760px) {
  .brand-mark { height: 30px; width: 30px; }
  .brand-update,
  .recipe-submission { grid-template-columns: 60px minmax(0,1fr); }
  .brand-update > img { height: 56px; width: 56px; }
  .recipe-submission > img { height: 52px; width: 52px; }
  .brand-update__actions,
  .recipe-submission .button { grid-column: 1 / -1; width: 100%; }
  .brand-update { margin-bottom: 58px; padding-bottom: 24px; padding-top: 24px; }
  .recipe-submission { margin-top: 30px; padding-bottom: 22px; padding-top: 22px; }
  .social-button[data-tooltip]::before,
  .social-button[data-tooltip]::after,
  .social-views[data-tooltip]::before,
  .social-views[data-tooltip]::after { display: none !important; }
  .detail-hero .social-actions { max-width: 100%; overflow: clip; }
  .seo-recipe-prerender { padding: 18px 12px 70px; }
  .seo-recipe-prerender__card { border-radius: 18px; padding: 24px 18px 34px; }
  .seo-recipe-prerender__brand { margin-bottom: 28px; }
  .seo-catalog-prerender__grid { grid-template-columns: 1fr; }
}

/* Kulinara Studio: ruhige, handwerkliche Flächen statt austauschbarer KI-Verläufe. */
.creator-hub::before {
  background: #f7f2e7;
  border-color: #e7ddca;
  box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.creator-hub::after { display: none; }
.creator-hub__intro { max-width: 720px; }
.creator-hub__intro .kicker { color: var(--coral-dark); }
.creator-hub__choices,
.creator-hub__choices--social {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 16px;
  padding: 0;
}
.creator-choice,
.creator-hub__choices--social .creator-choice {
  background: #fffdf8;
  border: 1px solid #e2ddd1;
  border-radius: 22px;
  box-shadow: 0 13px 32px rgba(42,55,43,.07);
  color: var(--ink);
  min-height: 390px;
  overflow: hidden;
}
.creator-choice::before {
  background: var(--studio-accent, var(--leaf));
  content: '';
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}
.creator-choice::after { display: none; }
.creator-choice--post { --studio-accent: var(--coral); }
.creator-choice--recipe { --studio-accent: var(--leaf); }
.creator-choice--book { --studio-accent: #c49b3f; }
.creator-choice--post,
.creator-choice--recipe,
.creator-choice--book { background: #fffdf8; border-color: #e2ddd1; color: var(--ink); }
.creator-choice--post .kicker { color: var(--coral-dark); }
.creator-choice--recipe .kicker { color: var(--leaf); }
.creator-choice--book .kicker { color: #8b6b27; }
.creator-choice--post h2,
.creator-choice--recipe h2,
.creator-choice--book h2 { color: var(--ink); }
.creator-choice--post h2 em { color: var(--coral); }
.creator-choice--recipe h2 em { color: var(--leaf); }
.creator-choice--book h2 em { color: #9d792d; }
.creator-choice--post > p:not(.kicker),
.creator-choice--recipe > p:not(.kicker),
.creator-choice--book > p:not(.kicker) { color: var(--muted); }
.creator-choice--post .creator-choice__icon,
.creator-choice--recipe .creator-choice__icon,
.creator-choice--book .creator-choice__icon {
  background: #f5f1e7;
  border: 1px solid #e7dfd0;
}
.creator-choice--post .creator-choice__icon { color: var(--coral-dark); }
.creator-choice--recipe .creator-choice__icon { color: var(--leaf); }
.creator-choice--book .creator-choice__icon { color: #8b6b27; }
.creator-choice--post .creator-choice__go,
.creator-choice--recipe .creator-choice__go,
.creator-choice--book .creator-choice__go { color: var(--leaf); }
.creator-choice:hover,
.creator-choice:focus-visible {
  border-color: #b9c8b5;
  box-shadow: 0 18px 38px rgba(40,58,43,.12);
  filter: none;
  transform: translateY(-4px);
}
.creator-hub__choices:has(.creator-choice:hover) .creator-choice:not(:hover) { filter: none; transform: none; }

.add-page,
.photo-post-create,
.locked-cookbook-page {
  background: #f8f4ea;
  border: 1px solid #e7dfd0;
  border-radius: 32px;
  margin-top: 28px;
  padding-left: clamp(22px,4vw,54px);
  padding-right: clamp(22px,4vw,54px);
}
.recipe-form,
.photo-post-form {
  border: 1px solid #dddccc;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(43,57,44,.08);
  overflow: hidden;
}
.form-section { background: #fffdf8; }
.form-section:nth-child(even) { background: #fbfaf4; }
.photo-post-form { background: #fffdf8; }
.photo-post-form > footer { background: #f1f4eb; }

.header-app-status {
  background: #fff2e9;
  border-color: #efd0bf;
  color: #874a3b;
  font-weight: 850;
  letter-spacing: .01em;
  white-space: nowrap;
}
.header-app-status::after {
  background: var(--coral);
  border-radius: 50%;
  content: '';
  height: 6px;
  width: 6px;
}
.header-app-status:hover,
.header-app-status:focus-visible { background: #ffe9dc; border-color: #dcae96; color: #71392d; }
.app-install-modal__hint { color: var(--muted); font-size: 12px; grid-column: 2; line-height: 1.5; margin: 0; }

.profile-load-more {
  align-items: center;
  background: #f7f4ea;
  border: 1px solid #e4ddcf;
  border-radius: 18px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-top: 24px;
  padding: 14px 16px 14px 20px;
}
.profile-load-more p { display: grid; gap: 3px; margin: 0; }
.profile-load-more b { font-size: 13px; }
.profile-load-more small { color: var(--muted); font-size: 10px; }
.profile-load-more .button { flex: 0 0 auto; }
.profile-published-recipes .recipe-card[hidden],
.profile-photo-posts .profile-photo-post[hidden] { display: none; }

.theme-dark .creator-hub::before,
.theme-dark .add-page,
.theme-dark .photo-post-create,
.theme-dark .locked-cookbook-page { background: #1c251f; border-color: #36433a; }
.theme-dark .creator-choice,
.theme-dark .creator-choice--post,
.theme-dark .creator-choice--recipe,
.theme-dark .creator-choice--book,
.theme-dark .form-section,
.theme-dark .photo-post-form { background: #202c24; border-color: #3a493e; color: #eef2eb; }
.theme-dark .form-section:nth-child(even) { background: #1d2821; }
.theme-dark .creator-choice--post h2,
.theme-dark .creator-choice--recipe h2,
.theme-dark .creator-choice--book h2 { color: #f2f3ed; }
.theme-dark .creator-choice--post > p:not(.kicker),
.theme-dark .creator-choice--recipe > p:not(.kicker),
.theme-dark .creator-choice--book > p:not(.kicker) { color: #b5beb2; }
.theme-dark .header-app-status { background: #392921; border-color: #614236; color: #f4c8b3; }
.theme-dark .profile-load-more { background: #202a23; border-color: #3c493f; }

/* Redaktionelle Rezepteinreichung: bewusst getrennt vom normalen Creator-Editor. */
.official-submission-page { padding-bottom: 80px; padding-top: 34px; }
.official-submission-hero {
  align-items: center;
  background: linear-gradient(125deg, #f8f0df 0%, #f8f4e8 58%, #e6f0e2 100%);
  border: 1px solid #e1d8c4;
  border-radius: 30px;
  display: grid;
  gap: 26px;
  grid-template-columns: 82px minmax(0, 1fr) minmax(220px, .72fr);
  overflow: hidden;
  padding: 38px 44px;
  position: relative;
}
.official-submission-hero .back-link { grid-column: 1 / -1; margin-bottom: -6px; }
.official-submission-hero > img { background: #fffaf0; border-radius: 22px; padding: 9px; width: 82px; }
.official-submission-hero h1 { color: #17372d; font-family: var(--serif); font-size: clamp(42px, 5vw, 72px); line-height: .9; margin: 5px 0 14px; }
.official-submission-hero h1 em { color: #e8684e; font-weight: 500; }
.official-submission-hero > div > p:last-child { color: #536459; line-height: 1.65; margin: 0; max-width: 680px; }
.official-submission-hero ol { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.official-submission-hero li { align-items: center; background: rgba(255,255,255,.66); border: 1px solid rgba(49,95,73,.15); border-radius: 15px; display: flex; gap: 12px; padding: 11px 14px; }
.official-submission-hero li b { color: #e8684e; font-size: 12px; }
.official-submission-hero li span { color: #28483a; font-size: 13px; font-weight: 800; }
.official-submission-layout { align-items: start; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) 330px; margin-top: 28px; }
.official-submission-form { display: grid; gap: 20px; }
.official-submission-form > section,
.official-submission-sidebar > section,
.official-review-queue { background: #fffdf8; border: 1px solid #dfdfd3; border-radius: 24px; padding: 30px; }
.official-section-heading { align-items: flex-start; display: flex; gap: 16px; margin-bottom: 22px; }
.official-section-heading > span { align-items: center; background: #e8684e; border-radius: 50%; color: white; display: inline-flex; flex: 0 0 38px; font-size: 12px; font-weight: 900; height: 38px; justify-content: center; }
.official-section-heading h2,
.official-submission-sidebar h2,
.official-review-queue h2 { color: #17372d; font-family: var(--serif); font-size: 32px; margin: 0 0 5px; }
.official-section-heading p { color: #6b756e; margin: 0; }
.official-recipe-choice { align-items: center; border: 1px solid #d9dfd7; border-radius: 17px; cursor: pointer; display: grid; gap: 14px; grid-template-columns: auto 58px minmax(0,1fr) auto; margin-bottom: 10px; padding: 11px 15px; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.official-recipe-choice:has(input:checked) { background: #edf4e9; border-color: #78a478; transform: translateY(-1px); }
.official-recipe-choice input { accent-color: #315f49; }
.official-recipe-choice__image { align-items: center; background: #eff1e9; border-radius: 12px; display: flex; height: 58px; justify-content: center; overflow: hidden; }
.official-recipe-choice__image img { height: 100%; object-fit: cover; width: 100%; }
.official-recipe-choice > span:nth-of-type(2) { display: grid; gap: 3px; }
.official-recipe-choice small { color: #778078; }
.official-recipe-choice em { color: #315f49; font-size: 12px; font-style: normal; font-weight: 850; }
.official-inline-link { color: #315f49; display: inline-flex; font-size: 13px; font-weight: 850; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; }
.official-proposal-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.official-proposal-grid label { cursor: pointer; }
.official-proposal-grid input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.official-proposal-grid span { background: #f6f5ee; border: 1px solid #dedfd4; border-radius: 17px; display: grid; gap: 9px; height: 100%; padding: 18px; transition: border-color .16s ease, background .16s ease; }
.official-proposal-grid input:checked + span { background: #edf4e9; border-color: #5f916f; box-shadow: inset 0 0 0 1px #5f916f; }
.official-proposal-grid svg { color: #e8684e; font-size: 22px; }
.official-proposal-grid small { color: #707a72; line-height: 1.45; }
.official-submit-note { align-items: flex-start; background: #f7f0dc; border-radius: 15px; color: #5d5b4e; display: flex; gap: 12px; margin: 20px 0; padding: 15px; }
.official-submit-note svg { color: #e8684e; flex: 0 0 auto; }
.official-submit-note p { margin: 0; }
.official-submission-sidebar { display: grid; gap: 18px; position: sticky; top: 120px; }
.official-submission-sidebar ul { color: #59675e; line-height: 1.7; margin: 14px 0 0; padding-left: 18px; }
.official-submission-history { display: grid; gap: 9px; margin-top: 14px; }
.official-submission-history article { background: #f6f5ee; border-radius: 14px; display: grid; gap: 7px; padding: 13px; }
.official-submission-history article > div { display: grid; gap: 2px; }
.official-submission-history small { color: #747d76; line-height: 1.35; }
.official-submission-history code { color: #315f49; font-size: 11px; }
.official-status { align-items: center; border-radius: 999px; display: inline-flex; font-size: 10px; font-weight: 900; justify-self: start; letter-spacing: .04em; padding: 5px 8px; text-transform: uppercase; }
.official-status--submitted { background: #f6e7bd; color: #745b18; }
.official-status--in_review { background: #dceaf2; color: #2d5e75; }
.official-status--accepted { background: #dcebdc; color: #315f49; }
.official-status--rejected { background: #f0deda; color: #8a4034; }
.official-submission-empty { color: #707a72; font-size: 14px; line-height: 1.6; }
.official-submission-empty--action { background: #f7f5ec; border: 1px dashed #cbd2c7; border-radius: 18px; padding: 22px; }
.official-submission-empty--action p { margin: 7px 0 15px; }
.official-review-queue { margin-top: 26px; }
.official-review-card { border-top: 1px solid #dde0d7; padding: 22px 0; }
.official-review-card header { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.official-review-card header small { color: #718077; }
.official-review-card h3 { color: #17372d; font-family: var(--serif); font-size: 28px; margin: 14px 0 6px; }
.official-review-card blockquote { background: #f6f5ee; border-left: 3px solid #e8684e; margin: 12px 0; padding: 14px 17px; }
.official-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.official-review-actions button { background: #edf3eb; border: 1px solid #cbd8cc; border-radius: 999px; color: #315f49; cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; padding: 8px 13px; }
.theme-dark .official-submission-hero { background: linear-gradient(125deg, #252a22, #1b2921); border-color: #3b493d; }
.theme-dark .official-submission-hero h1,
.theme-dark .official-section-heading h2,
.theme-dark .official-submission-sidebar h2,
.theme-dark .official-review-queue h2,
.theme-dark .official-review-card h3 { color: #f2f3ed; }
.theme-dark .official-submission-form > section,
.theme-dark .official-submission-sidebar > section,
.theme-dark .official-review-queue { background: #18221c; border-color: #344238; }
.theme-dark .official-recipe-choice,
.theme-dark .official-proposal-grid span,
.theme-dark .official-submission-history article,
.theme-dark .official-review-card blockquote { background: #202b24; border-color: #3b493f; }
.theme-dark .official-recipe-choice:has(input:checked),
.theme-dark .official-proposal-grid input:checked + span { background: #26372c; border-color: #74a27e; }

@media (max-width: 760px) {
  .header-actions--grouped .header-account-actions,
  .header-actions--grouped .header-account-actions .header-points,
  .header-actions--grouped .header-account-actions .header-bell { display: inline-flex !important; }
  .header-actions--grouped .header-account-actions { visibility: visible; }
  .add-page,
  .photo-post-create,
  .locked-cookbook-page { border-radius: 24px; margin-top: 14px; padding-left: 16px; padding-right: 16px; }
  .creator-hub::before { left: -8px; right: -8px; }
  .creator-choice,
  .creator-hub__choices--social .creator-choice { min-height: 315px; }
  .profile-load-more { align-items: stretch; flex-direction: column; }
  .profile-load-more .button { justify-content: center; width: 100%; }
  .app-install-modal__hint { grid-column: 1 / -1; }
  .official-submission-page { padding-left: 13px; padding-right: 13px; padding-top: 14px; }
  .official-submission-hero { border-radius: 22px; grid-template-columns: 56px minmax(0,1fr); padding: 23px 18px; }
  .official-submission-hero > img { border-radius: 15px; padding: 6px; width: 56px; }
  .official-submission-hero h1 { font-size: 42px; }
  .official-submission-hero ol { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .official-submission-hero li { align-items: flex-start; flex-direction: column; gap: 3px; padding: 10px; }
  .official-submission-layout { grid-template-columns: 1fr; }
  .official-submission-sidebar { position: static; }
  .official-proposal-grid { grid-template-columns: 1fr; }
  .official-submission-form > section,
  .official-submission-sidebar > section,
  .official-review-queue { border-radius: 20px; padding: 20px 17px; }
  .official-recipe-choice { grid-template-columns: auto 48px minmax(0,1fr); padding: 10px; }
  .official-recipe-choice__image { height: 48px; }
  .official-recipe-choice em { display: none; }
}

/* Redaktionelles Küchenwissen bleibt am Desktop offen und wird mobil kompakt. */
.recipe-tips__toggle { display: none; }

/* Two reading depths keep the recipe scannable while giving beginners the
   sensory cues and error recovery they need. */
.method__header {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}
.method > .recipe-tips:first-child { padding-top: 0; }
.recipe-tips + .method__header { padding-top: 30px; }
.step-detail-control {
  align-items: center;
  color: #7a8378;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 750;
  gap: 8px;
  padding-bottom: 2px;
}
.step-detail-control > span { transition: color .18s ease; }
.step-detail-control > span.is-active { color: var(--leaf); }
.step-detail-switch {
  background: #dfe5dc;
  border: 1px solid #cbd5c8;
  border-radius: 999px;
  cursor: pointer;
  height: 26px;
  padding: 2px;
  position: relative;
  transition: background .18s ease, border-color .18s ease;
  width: 47px;
}
.step-detail-switch > span {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(42, 59, 47, .22);
  display: block;
  height: 20px;
  transform: translateX(0);
  transition: transform .2s ease;
  width: 20px;
}
.step-detail-switch[aria-checked='true'] { background: var(--leaf); border-color: var(--leaf); }
.step-detail-switch[aria-checked='true'] > span { transform: translateX(21px); }
.step-detail-switch:focus-visible { outline: 3px solid rgba(49, 95, 73, .25); outline-offset: 3px; }
.step-copy { min-width: 0; }
.step-copy__short { font-weight: 650; }
.step-copy__details {
  background: #f3f6f0;
  border-left: 3px solid #a9bea8;
  margin-top: 14px;
  padding: 14px 16px 15px;
}
.step-copy__details small {
  color: var(--leaf);
  display: block;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.step-copy__details p { color: #566156; font-size: 14px; line-height: 1.72; }
.method--detailed .step-list li { padding-bottom: 31px; padding-top: 31px; }
.step-row__fields { display: grid; gap: 10px; }
.step-row__fields label { display: grid; gap: 6px; }
.step-row__fields label > span { color: #4f584f; font-size: 11px; font-weight: 750; }
.step-row__fields label small { color: var(--muted); font-size: 10px; font-weight: 500; }
.theme-dark .step-detail-control { color: #9ba89b; }
.theme-dark .step-detail-control > span.is-active { color: #e0efdc; }
.theme-dark .step-detail-switch { background: #35433a; border-color: #526258; }
.theme-dark .step-detail-switch[aria-checked='true'] { background: #5d865f; border-color: #76a078; }
.theme-dark .step-copy__details { background: #202d24; border-left-color: #6e946f; }
.theme-dark .step-copy__details small { color: #b9d6b5; }
.theme-dark .step-copy__details p { color: #cbd7c9; }
.theme-dark .step-row__fields label > span { color: #d8e1d5; }
.theme-dark .step-row__fields label small { color: #aebbad; }

@media (max-width: 600px) {
  .method__header { align-items: flex-start; flex-direction: column; gap: 15px; }
  .recipe-tips + .method__header { padding-top: 0; }
  .step-detail-control { align-self: stretch; justify-content: space-between; }
  .step-detail-switch { margin: 0 auto; }
  .step-copy__details { margin-left: -4px; padding: 13px 13px 14px; }
  .step-copy__details p { font-size: 13px; }
}

@media (max-width: 600px) {
  .recipe-tips--mobile-collapsible {
    background: #f7f4ea;
    border: 1px solid #e2ddd1;
    border-radius: 18px;
    margin: 0 0 23px;
    padding: 15px 16px;
  }
  .recipe-tips--mobile-collapsible .recipe-tips__heading {
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  .recipe-tips--mobile-collapsible .recipe-tips__heading > div { min-width: 0; }
  .recipe-tips--mobile-collapsible .recipe-tips__heading .kicker { margin-bottom: 3px; }
  .recipe-tips--mobile-collapsible .recipe-tips__heading h3 {
    font-size: 24px;
    line-height: 1;
  }
  .recipe-tips--mobile-collapsible .recipe-tips__heading h3 br { display: none; }
  .recipe-tips__toggle {
    align-items: center;
    background: #fffdf8;
    border: 1px solid #d7dfd1;
    border-radius: 999px;
    color: var(--leaf);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    gap: 6px;
    min-height: 38px;
    padding: 8px 11px 8px 13px;
  }
  .recipe-tips__toggle svg {
    font-size: 15px;
    transform: rotate(90deg);
    transition: transform .18s ease;
  }
  .recipe-tips--mobile-collapsible .recipe-tips__grid { display: none; }
  .recipe-tips--mobile-collapsible.is-open .recipe-tips__grid {
    animation: knowledge-reveal .2s ease both;
    display: grid;
    margin-top: 16px;
  }
  .recipe-tips--mobile-collapsible.is-open .recipe-tips__toggle svg { transform: rotate(-90deg); }
  .theme-dark .recipe-tips--mobile-collapsible { background: #1d2821; border-color: #3a493e; }
  .theme-dark .recipe-tips__toggle { background: #253229; border-color: #46594a; color: #d9ead6; }
}

/* styles/editorial-seo.css */
.public-info-page { padding-bottom: 96px; padding-top: 58px; }
.public-info-page > header { align-items: center; display: grid; gap: 44px; grid-template-columns: .88fr 1.12fr; padding-bottom: 64px; }
.public-info-page > header h1 { font-size: clamp(46px, 6vw, 78px); line-height: .98; margin-bottom: 24px; }
.public-info-page > header > div > p:last-child { color: var(--muted); font-size: 18px; line-height: 1.75; max-width: 660px; }
.public-info-page figure { margin: 0; }
.public-info-page figure img { aspect-ratio: 3 / 2; border-radius: var(--radius-xl); box-shadow: var(--shadow); object-fit: cover; }
.public-info-page figcaption { color: var(--muted); font-size: 12px; margin-top: 9px; }
.public-info-layout { align-items: start; display: grid; gap: 54px; grid-template-columns: minmax(0, 1fr) 310px; }
.public-info-layout article { display: grid; gap: 18px; }
.public-info-layout article > section { background: var(--surface); border: 1px solid var(--soft); border-radius: var(--radius-lg); padding: 34px; }
.public-info-layout h2 { font-size: clamp(28px, 3.5vw, 42px); line-height: 1.08; margin-bottom: 18px; }
.public-info-layout p, .public-info-layout li { color: #545c51; line-height: 1.75; }
.public-info-layout ul { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.public-info-layout aside { background: var(--leaf-dark); border-radius: var(--radius-lg); color: #fff; padding: 28px; position: sticky; top: 104px; }
.public-info-layout aside .kicker { color: var(--butter); }
.public-info-layout aside h2 { color: #fff; font-size: 31px; }
.public-info-layout aside p { color: rgba(255,255,255,.76); }
.public-info-layout aside a { color: #fff; font-weight: 750; }
.public-info-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.nutrition-fields { border: 1px solid var(--soft); border-radius: var(--radius-md); margin: 0; padding: 18px; }
.nutrition-fields legend { font-weight: 760; padding: 0 6px; }
.nutrition-fields legend small, .nutrition-fields > small { color: var(--muted); font-weight: 500; }
.nutrition-fields > div { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.nutrition-fields label { display: grid; gap: 6px; }
.nutrition-card { align-items: center; background: #f3efe1; border-radius: var(--radius-lg); display: grid; gap: 26px; grid-template-columns: minmax(180px, .55fr) 1fr auto; margin-bottom: 60px; margin-top: 40px; padding-bottom: 28px; padding-top: 28px; }
.nutrition-card h2 { font-size: 31px; margin: 0; }
.nutrition-card dl { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(90px, 1fr)); margin: 0; }
.nutrition-card dl div { border-left: 1px solid #d4cfbd; padding-left: 14px; }
.nutrition-card dt, .nutrition-card > small { color: var(--muted); font-size: 12px; }
.nutrition-card dd { font-size: 17px; font-weight: 800; margin: 2px 0 0; }

@media (max-width: 820px) {
  .public-info-page { padding-top: 34px; }
  .public-info-page > header, .public-info-layout { grid-template-columns: 1fr; }
  .public-info-page > header { gap: 28px; padding-bottom: 38px; }
  .public-info-layout { gap: 24px; }
  .public-info-layout article > section { padding: 24px; }
  .public-info-layout aside { position: static; }
  .nutrition-fields > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutrition-card { grid-template-columns: 1fr; margin: 0 18px 42px; }
  .nutrition-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .public-info-page > header h1 { font-size: 43px; }
  .nutrition-fields > div { grid-template-columns: 1fr; }
}

/* styles/cosmetics-knowledge.css */
.modal-footer-actions{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid var(--line,#d9ddd2)}
.shopping-undo{display:flex;align-items:center;gap:.8rem;margin:.9rem 0 1.2rem;padding:.8rem 1rem;border:1px solid #bdd0bc;border-radius:16px;background:#eff7ec;color:#315f48}.shopping-undo>svg{width:1.25rem}.shopping-undo>span{display:grid;gap:.12rem;flex:1}.shopping-undo small{color:#657365}
.button--danger{background:#9f3f35;color:#fff;border-color:#9f3f35}.button--danger:hover{background:#813029}
.cosmetic-art{position:relative;display:grid;place-items:center;overflow:hidden;color:var(--cosmetic-primary);background:linear-gradient(145deg,var(--cosmetic-secondary),#fff8);isolation:isolate}
.cosmetic-art:before,.cosmetic-art:after,.cosmetic-art>i{content:"";position:absolute;border-radius:999px;background:currentColor;opacity:.1}
.cosmetic-art:before{width:70%;aspect-ratio:1;left:-18%;top:-25%}.cosmetic-art:after{width:45%;aspect-ratio:1;right:-8%;bottom:-18%}.cosmetic-art>i{inset:12%;border:1px solid currentColor;background:transparent;opacity:.18}
.cosmetic-art svg{position:relative;z-index:1;width:58%;height:58%;filter:drop-shadow(0 5px 10px #0001)}
.cosmetic-art--avatar{width:100%;height:100%;border-radius:inherit}.cosmetic-art--banner{width:100%;height:100%;min-height:86px;border-radius:18px}.cosmetic-art--banner svg{width:28%;height:70%}
.cosmetic-art--rare,.cosmetic-art--epic,.cosmetic-art--legendary{box-shadow:inset 0 0 0 1px #fff9}.cosmetic-art--epic{background:radial-gradient(circle at 25% 20%,#fff8,transparent 25%),linear-gradient(135deg,var(--cosmetic-secondary),var(--cosmetic-primary))}.cosmetic-art--legendary{background:linear-gradient(120deg,var(--cosmetic-primary),var(--cosmetic-secondary),#f6cf7c,var(--cosmetic-primary));background-size:300% 300%}
@keyframes cosmetic-shimmer{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:no-preference){.cosmetic-art.is-animated{animation:cosmetic-shimmer 7s ease-in-out infinite}.cosmetic-art.is-animated svg{animation:cosmetic-float 3.4s ease-in-out infinite}@keyframes cosmetic-float{50%{transform:translateY(-4px) rotate(2deg)}}}
.avatar--cosmetic{position:relative;isolation:isolate;padding:0;overflow:hidden;background:none}.avatar--cosmetic .cosmetic-art{position:absolute;inset:0}
.profile-hero__banner--cosmetic .cosmetic-art{position:absolute;inset:0;border-radius:0;min-height:100%}.profile-hero__banner--contributor{display:flex;align-items:center;gap:1rem;padding:1.25rem 2rem;background:linear-gradient(120deg,#203e36,#416f5c,#e6bd70);color:#fff}.profile-hero__banner--contributor svg{width:2rem}.profile-hero__banner--contributor b{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem}
.profile-recognition{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}.community-moderator-badge,.early-access-badge,.contribution-progress{display:inline-flex;align-items:center;gap:.4rem;width:max-content;padding:.42rem .7rem;border-radius:999px;font-size:.76rem;font-weight:800}.community-moderator-badge{color:#284b3f;background:#f1dca9;border:1px solid #d9b969}.early-access-badge{color:#fff;background:#315f48;border:1px solid #315f48}.community-moderator-badge svg,.early-access-badge svg,.contribution-progress svg{width:1rem}.contribution-progress{color:var(--muted);background:var(--surface-soft,#f5f2e9);border:1px solid var(--line)}
.profile-cosmetic-entry,.cp-shop-teaser{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border:1px solid #d8dfcf;border-radius:18px;background:linear-gradient(110deg,#f2f7ed,#fff9f0)}.profile-cosmetic-entry>span,.cp-shop-teaser>span{display:grid;place-items:center;flex:0 0 2.8rem;aspect-ratio:1;border-radius:14px;background:#315f48;color:#fff}.profile-cosmetic-entry svg,.cp-shop-teaser svg{width:1.25rem}.profile-cosmetic-entry>div,.cp-shop-teaser>div{display:grid;gap:.2rem;flex:1}.profile-cosmetic-entry small,.cp-shop-teaser small{color:var(--muted)}
.cosmetic-shop-modal{width:min(1180px,calc(100vw - 2rem));max-height:min(900px,calc(100vh - 2rem));overflow:auto}.cosmetic-shop__header{display:flex;justify-content:space-between;gap:2rem}.cosmetic-shop__header h2{margin:.25rem 0}.cosmetic-shop__header>div>p:last-child{max-width:620px;color:var(--muted)}.cosmetic-shop__balance{display:grid;align-content:center;justify-items:center;min-width:150px;padding:1rem;border-radius:20px;background:#294f40;color:#fff}.cosmetic-shop__balance svg{width:1.3rem}.cosmetic-shop__balance b{font-size:1.45rem}.cosmetic-shop__balance small{opacity:.75}
.cosmetic-shop__type{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:1.4rem 0 .8rem;padding:.35rem;background:#edf0e8;border-radius:16px}.cosmetic-shop__type button,.cosmetic-shop__rarities button{border:0;background:transparent;border-radius:12px;padding:.75rem 1rem;font:inherit;font-weight:800;color:var(--muted);cursor:pointer}.cosmetic-shop__type button.is-active{background:#fff;color:#234638;box-shadow:0 4px 15px #273c2b12}.cosmetic-shop__rarities{display:flex;gap:.35rem;overflow:auto;padding-bottom:.5rem;scrollbar-width:none}.cosmetic-shop__rarities::-webkit-scrollbar{display:none}.cosmetic-shop__rarities button{white-space:nowrap;padding:.55rem .8rem}.cosmetic-shop__rarities button.is-active{background:#294f40;color:#fff}
.cosmetic-shop__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.2rem;align-items:start}.cosmetic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;max-height:520px;overflow:auto;padding:.15rem}.cosmetic-card{display:grid;grid-template-columns:72px 1fr;gap:.8rem;align-items:center;text-align:left;border:1px solid var(--line);border-radius:18px;padding:.65rem;background:var(--surface,#fff);color:inherit;cursor:pointer}.cosmetic-card:hover,.cosmetic-card.is-selected{border-color:#47725f;box-shadow:0 7px 22px #294b3817}.cosmetic-card>.cosmetic-art{width:72px;height:72px}.cosmetic-card>span{display:grid;gap:.12rem;min-width:0}.cosmetic-card small{text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:var(--muted)}.cosmetic-card b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cosmetic-card em{font-size:.72rem;font-style:normal;color:#47725f}.cosmetic-card.is-equipped{outline:2px solid #e2b64f}.cosmetic-preview{position:sticky;top:0;padding:1rem;border:1px solid var(--line);border-radius:22px;background:var(--surface,#fff)}.cosmetic-preview__art{height:175px!important;margin-bottom:1rem}.cosmetic-preview h3{font-size:1.5rem;margin:.2rem 0}.cosmetic-preview p{color:var(--muted)}.cosmetic-preview .button{width:100%;margin-top:.8rem}.cosmetic-preview>small{display:block;margin-top:.7rem;color:var(--muted)}
.recipe-title-row{display:flex;align-items:flex-start;gap:1rem}.recipe-title-row h1{flex:1}.recipe-quick-report{display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;border:1px solid #d3d8ce;background:#fff;border-radius:999px;padding:.55rem .75rem;color:#315f48;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer;white-space:nowrap}.recipe-quick-report svg{width:1rem}.recipe-quick-report:hover{border-color:#315f48;background:#f1f6ee}
.recipe-quality-panel{grid-column:2;display:grid;overflow:hidden;margin-top:.15rem;border:1px solid #d9e1d5;border-radius:20px;background:linear-gradient(135deg,#fbfcf8,#f3f7ef);box-shadow:0 12px 30px rgba(40,65,48,.06)}.recipe-quality-panel>div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:.75rem;padding:.9rem 1rem}.recipe-quality-panel>div+div{border-top:1px solid #dde4d9}.recipe-quality-panel>div>span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#e7efe2;color:#315f48}.recipe-quality-panel>div>span svg{width:1.05rem}.recipe-quality-panel>div>div{display:grid;gap:.22rem;min-width:0}.recipe-quality-panel b{font-size:.76rem;line-height:1.3}.recipe-quality-panel p{margin:0;color:#687267;font-size:.69rem;line-height:1.5}.recipe-quality-panel__contribution{grid-template-columns:36px minmax(0,1fr) auto!important;align-items:center}.recipe-quality-panel__contribution>span{background:#fff1c9!important;color:#8a6818!important}.recipe-quality-panel__contribution .text-button{align-self:center;white-space:nowrap;font-size:.7rem}.theme-dark .recipe-quality-panel{background:linear-gradient(135deg,#1b2921,#202d24);border-color:#3a4d3f;box-shadow:none}.theme-dark .recipe-quality-panel>div+div{border-color:#3a4d3f}.theme-dark .recipe-quality-panel>div>span{background:#293d30;color:#c0dfbd}.theme-dark .recipe-quality-panel p{color:#b6c4b3}.theme-dark .recipe-quality-panel b{color:#f3f1e8}.theme-dark .recipe-quality-panel__contribution>span{background:#3d351c!important;color:#f0d273!important}
.community-composer{margin:1.3rem 0 1.5rem;padding:.65rem;border:1px solid #d9dfd4;border-radius:22px;background:#f7f8f3}.community-composer__switch{display:flex;width:max-content;gap:.25rem;padding:.25rem;border-radius:14px;background:#e8ede4}.community-composer__switch button{display:flex;align-items:center;gap:.4rem;border:0;border-radius:11px;background:transparent;padding:.6rem .8rem;font:inherit;font-weight:800;color:#687268;cursor:pointer}.community-composer__switch button.is-active{background:#fff;color:#294f40;box-shadow:0 3px 10px #243a2a14}.community-composer__switch svg{width:1rem}.community-composer .comment-form{margin:.65rem 0 0;background:#fff;border-radius:16px}.experience-composer{display:flex;align-items:center;gap:1.2rem;padding:1rem}.experience-composer>div{flex:1}.experience-composer h3{margin:.1rem 0;font-size:1.35rem}.experience-composer p{margin:.2rem 0;color:var(--muted)}.experience-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1.4rem}.experience-summary span{display:grid;padding:.85rem 1rem;border:1px solid var(--line);border-radius:15px;background:#fff}.experience-summary b{font-size:1.1rem;color:#315f48}.experience-summary small{color:var(--muted)}.comment__meta em{padding:.18rem .45rem;border-radius:999px;background:#edf3ea;color:#315f48;font-size:.66rem;font-style:normal;font-weight:800}.comment--experience{border-left:3px solid #80a286}.comment-experience__image{width:72px;height:72px;object-fit:cover;border-radius:16px}.comment-experience__ratings{display:flex;flex-wrap:wrap;gap:.4rem;margin:.45rem 0}.comment-experience__ratings span{padding:.28rem .48rem;border-radius:8px;background:#f0f3ec;font-size:.72rem}.comment-experience__ratings svg{width:.8rem}.comment-experience__quiet{color:var(--muted);font-style:italic}
.improvement-kind{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;border:0;padding:0;margin:1rem 0}.improvement-kind legend{grid-column:1/-1;font-weight:800;margin-bottom:.3rem}.improvement-kind label span{display:flex;align-items:center;gap:.45rem;padding:.75rem;border:1px solid var(--line);border-radius:14px;cursor:pointer}.improvement-kind label:has(input:checked) span{border-color:#315f48;background:#edf4eb}.improvement-kind input{position:absolute;opacity:0}.improvement-kind svg{width:1.1rem}
.knowledge-card--lesson{position:relative;overflow:hidden;min-height:210px}.knowledge-card__motif{position:absolute;right:2.2rem;top:1.25rem;width:4rem;height:4rem;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--knowledge-accent,#315f48) 12%,#fff);color:var(--knowledge-accent,#315f48);transform:rotate(4deg)}.knowledge-card__motif svg{width:1.65rem}.knowledge-card--lesson>a>div{padding-right:4.5rem}.knowledge-card--lesson footer{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:1rem}.knowledge-card--lesson footer small{display:flex;align-items:center;gap:.3rem;color:var(--muted)}.knowledge-card--lesson footer small svg{width:.85rem}.knowledge-card--technik,.knowledge-detail--technik{--knowledge-accent:#326b69}.knowledge-card--aromen,.knowledge-detail--aromen{--knowledge-accent:#9a5d31}.knowledge-card--kuechenhygiene,.knowledge-detail--kuechenhygiene{--knowledge-accent:#3a6a4f}.knowledge-card--organisation,.knowledge-detail--organisation{--knowledge-accent:#6a5d87}.knowledge-card--backen,.knowledge-detail--backen{--knowledge-accent:#9b5c54}.knowledge-card--lesson:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--knowledge-accent,#315f48)}
.knowledge-detail__hero{display:grid!important;grid-template-columns:minmax(0,1fr) 240px;gap:2rem;align-items:center}.knowledge-detail__hero>aside{display:grid;gap:.5rem;padding:1.25rem;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--knowledge-accent,#315f48) 12%,#fff),#fff);border:1px solid color-mix(in srgb,var(--knowledge-accent,#315f48) 28%,#fff)}.knowledge-detail__hero>aside span{display:grid;place-items:center;width:3rem;height:3rem;border-radius:15px;background:var(--knowledge-accent,#315f48);color:#fff}.knowledge-detail__hero>aside svg{width:1.4rem}.knowledge-detail__hero>aside small{color:var(--muted)}.knowledge-detail__layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:2rem;align-items:start}.knowledge-detail__chapter{border-top:1px solid var(--line);display:grid;gap:9px;padding-top:22px}.knowledge-detail__chapter h2{color:var(--ink);font-family:var(--display);font-size:clamp(22px,2.2vw,29px);line-height:1.12;margin:0}.knowledge-detail__chapter p{color:var(--muted)}.knowledge-practice{position:sticky;top:110px;padding:1.35rem;border-radius:22px;background:#f2f5ee;border:1px solid #d8dfd3}.knowledge-practice h2{margin:.2rem 0 1rem}.knowledge-practice ol{display:grid;gap:.7rem;list-style:none;padding:0}.knowledge-practice li{display:grid;grid-template-columns:32px 1fr;gap:.6rem;align-items:start}.knowledge-practice li span{display:grid;place-items:center;aspect-ratio:1;border-radius:10px;background:#fff;color:var(--knowledge-accent,#315f48);font-size:.7rem;font-weight:900}.knowledge-practice li p{margin:0}.knowledge-practice>small{display:block;margin-top:1rem;color:var(--muted)}.knowledge-related{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}.knowledge-related>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem}.knowledge-related a{display:grid;grid-template-columns:34px 1fr;gap:.6rem;padding:1rem;border:1px solid var(--line);border-radius:18px;color:inherit;text-decoration:none}.knowledge-related a>span{color:var(--knowledge-accent,#315f48)}.knowledge-related svg{width:1rem}.knowledge-related a div{display:grid;gap:.25rem}.knowledge-related a small{color:var(--knowledge-accent,#315f48);font-weight:800}.knowledge-related a p{margin:0;color:var(--muted);font-size:.82rem}
@media (max-width:900px){.cosmetic-shop__layout{grid-template-columns:1fr}.cosmetic-preview{position:relative;grid-row:1}.cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.knowledge-detail__layout,.knowledge-detail__hero{grid-template-columns:1fr}.knowledge-practice{position:relative;top:auto}.knowledge-related>div:last-child{grid-template-columns:1fr}.recipe-quality-panel{grid-column:1}.experience-composer{align-items:flex-start;flex-direction:column}.experience-summary{grid-template-columns:1fr}}
@media (max-width:600px){.cosmetic-shop-modal{width:100vw;max-height:100dvh;border-radius:0}.cosmetic-shop__header{display:grid}.cosmetic-shop__balance{grid-template-columns:auto auto;justify-content:start;gap:.25rem 1rem}.cosmetic-shop__balance svg{grid-row:1/3}.cosmetic-preview{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:.9rem;align-items:center}.cosmetic-preview__art{grid-row:1/5;height:96px!important;margin:0}.cosmetic-preview .kicker,.cosmetic-preview h3,.cosmetic-preview p{margin-top:0}.cosmetic-preview>div,.cosmetic-preview>small{grid-column:1/-1}.cosmetic-grid{grid-template-columns:1fr}.cosmetic-card{grid-template-columns:64px 1fr}.cosmetic-card>.cosmetic-art{width:64px;height:64px}.recipe-title-row{display:block}.recipe-quick-report{margin:.4rem 0 .6rem}.recipe-quality-panel__contribution{grid-template-columns:36px minmax(0,1fr)!important}.recipe-quality-panel__contribution .text-button{grid-column:2;justify-self:start;white-space:normal}.community-composer__switch{width:100%}.community-composer__switch button{flex:1;justify-content:center}.improvement-kind{grid-template-columns:1fr}.modal-footer-actions{align-items:stretch;flex-direction:column-reverse}.modal-footer-actions .button{width:100%}.knowledge-card__motif{right:1rem}.knowledge-card--lesson>a>div{padding-right:3.5rem}}

/* styles/quality-polish.css */
/* Final visual consistency layer: shared motion, dialog legibility and theme-safe surfaces. */
.discover-page,
.theme-dark .discover-page {
  background: transparent;
  border-top: 0;
}

.recipe-title-row {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.recipe-title-row h1 { min-width: 0; width: 100%; }
.recipe-quick-report {
  margin: 0 0 6px;
  max-width: 100%;
  position: static;
}

.detail-hero__grid {
  align-items: start;
  column-gap: 64px;
  row-gap: 18px;
}
.detail-hero__copy { grid-column: 1; grid-row: 1 / span 2; }
.detail-hero__image { grid-column: 2; grid-row: 1; }

.recipe-quality-panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--sage)), color-mix(in srgb, var(--surface) 88%, var(--sage)));
  border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(40, 65, 48, .05);
  display: grid;
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  overflow: hidden;
}
.recipe-quality-panel > div {
  align-items: start;
  display: grid;
  gap: 11px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 12px 14px;
}
.recipe-quality-panel > div + div { border-top: 1px solid color-mix(in srgb, var(--green) 15%, var(--line)); }
.recipe-quality-panel__icon {
  align-items: center;
  background: color-mix(in srgb, var(--sage) 80%, var(--surface)) !important;
  border-radius: 11px !important;
  color: var(--green) !important;
  display: inline-flex !important;
  height: 34px !important;
  justify-content: center;
  width: 34px !important;
}
.recipe-quality-panel__photo .recipe-quality-panel__icon { background: #fff0c4 !important; color: #8e6912 !important; }
.recipe-quality-panel__icon svg { width: 16px; }
.recipe-quality-panel .kicker { font-size: 8px; margin: 0 0 3px; }
.recipe-quality-panel b { color: var(--ink); display: block; font-size: 12px; line-height: 1.3; }
.recipe-quality-panel p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
  margin: 3px 0 0;
}
.recipe-quality-panel .text-button { font-size: 11px; margin-top: 7px; }
.theme-dark .recipe-quality-panel { background: linear-gradient(135deg, #1b2921, #202d24); border-color: #3a4d3f; box-shadow: none; }
.theme-dark .recipe-quality-panel > div + div { border-color: #3a4d3f; }
.theme-dark .recipe-quality-panel__icon { background: #293d30 !important; color: #c0dfbd !important; }
.theme-dark .recipe-quality-panel__photo .recipe-quality-panel__icon { background: #3d351c !important; color: #f0d273 !important; }

.knowledge-detail__layout {
  border-top: 1px solid var(--line);
  gap: clamp(28px, 5vw, 54px);
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  margin: 0 auto;
  max-width: 840px;
  padding: 42px clamp(28px, 6vw, 58px) 50px;
}
.knowledge-detail__layout .knowledge-detail__body {
  border: 0;
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 0;
}
.knowledge-detail__hero {
  column-gap: 28px;
  padding-left: clamp(38px, 4vw, 48px) !important;
  padding-right: clamp(38px, 4vw, 48px) !important;
}
.knowledge-detail__hero > div { min-width: 0; }
.knowledge-detail h1 {
  font-size: clamp(44px, 5.3vw, 64px);
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}
.knowledge-practice { min-width: 0; }
.knowledge-related {
  border-top: 1px solid var(--line);
  margin: 0 auto;
  max-width: 840px;
  padding: 38px clamp(28px, 6vw, 58px) 44px;
}
.knowledge-related > div:first-child { display: grid; gap: 6px; }
.knowledge-related h2 { margin: 0; }
.knowledge-related > div:last-child {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 20px;
}
.knowledge-related a {
  background: color-mix(in srgb, var(--surface) 92%, var(--sage));
  min-height: 150px;
  padding: 17px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.knowledge-related a:hover,
.knowledge-related a:focus-visible {
  border-color: color-mix(in srgb, var(--knowledge-accent, var(--green)) 48%, var(--line));
  box-shadow: 0 10px 24px rgba(38,55,43,.08);
  outline: none;
  transform: translateY(-2px);
}

.auth-modal {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 26px;
  color: var(--ink);
  scrollbar-color: color-mix(in srgb, var(--leaf) 60%, transparent) transparent;
  scrollbar-width: thin;
}
.auth-modal::-webkit-scrollbar { width: 7px; }
.auth-modal::-webkit-scrollbar-track { background: transparent; }
.auth-modal::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--leaf) 55%, transparent); border-radius: 99px; }
.modal-backdrop { overscroll-behavior: contain; }

.theme-dark .image-dropzone {
  background: #1b2820;
  border-color: #4a5d4d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  color: #b8d8b4;
}
.theme-dark .image-dropzone:hover,
.theme-dark .image-dropzone:focus-visible,
.theme-dark .image-dropzone.is-dragging { background: #24342a; border-color: #769176; }
.theme-dark .image-dropzone__icon { background: #2c4031; color: #c3dfbf; }
.theme-dark .image-dropzone__empty strong { color: #eef2e9; }
.theme-dark .image-dropzone__empty small { color: #aebaaa; }
.theme-dark .profile-cosmetic-entry,
.theme-dark .cp-shop-teaser { background: linear-gradient(110deg,#203026,#302b1f); border-color: #425445; }
.theme-dark .profile-cosmetic-entry b,
.theme-dark .cp-shop-teaser b { color: #f1f3eb; }
.theme-dark .profile-cosmetic-entry small,
.theme-dark .cp-shop-teaser small { color: #b5c1b2; }
.theme-dark .cosmetic-shop__type { background: #202d24; }
.theme-dark .cosmetic-shop__type button.is-active { background: #334a38; color: #fff; box-shadow: none; }
.theme-dark .cosmetic-card,
.theme-dark .cosmetic-preview { background: #1c2921; border-color: #3b4d3f; }
.theme-dark .cosmetic-card em { color: #acd1a8; }
.theme-dark .cosmetic-preview h3,
.theme-dark .profile-editor-modal h2 { color: #f3f0e6; }
.theme-dark .knowledge-detail > article { background: #18231d; border-color: #384a3d; }
.theme-dark .knowledge-detail__hero > aside,
.theme-dark .knowledge-practice { background: linear-gradient(145deg,#223128,#1b2720); border-color: #405244; color: #eef2e9; }
.theme-dark .knowledge-practice li span { background: #2b3c31; color: #c9e1c5; }
.theme-dark .knowledge-detail__lead { color: #a9d0a5; }
.theme-dark .knowledge-detail__chapter h2 { color: #f2efe6; }

.theme-dark .community-composer {
  background: #1a241d;
  border-color: #3b4d3d;
  box-shadow: none;
  color: #f3f0e5;
}
.theme-dark .community-composer__switch { background: #202d23; }
.theme-dark .community-composer__switch button { color: #b8c4b6; }
.theme-dark .community-composer__switch button.is-active {
  background: #315340;
  color: #fffdf4;
  box-shadow: none;
}
.theme-dark .community-composer .comment-form {
  background: #202d23;
  border-color: #3b4d3d;
  box-shadow: none;
}
.theme-dark .community-composer .comment-form textarea {
  background: #151f19;
  border-color: #405546;
  color: #edf2e9;
}
.theme-dark .community-composer .comment-form textarea::placeholder { color: #8f9d90; }
.theme-dark .community-composer .comment-form textarea:focus {
  border-color: #78a17d;
  box-shadow: 0 0 0 3px rgba(120,161,125,.16);
  outline: 0;
}
.theme-dark .experience-composer h3 { color: #f3f0e5; }
.theme-dark .experience-composer p { color: #b8c4b6; }
.theme-dark .experience-summary span {
  background: #1a241d;
  border-color: #3b4d3d;
}
.theme-dark .experience-summary b { color: #b9d9b5; }
.theme-dark .experience-summary small { color: #aeb9ad; }
.theme-dark .comment { border-color: #35463a; }
.theme-dark .comment p { color: #c6d0c3; }
.theme-dark .comment__meta button { color: #f0f3e9; }
.theme-dark .comment__meta em,
.theme-dark .comment-experience__ratings span {
  background: #25362b;
  color: #cde2c9;
}
.theme-dark .comment-experience__quiet { color: #aeb9ad; }
.theme-dark .login-prompt { background: #39331f; color: #f1dda0; }

.hero__reasons {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  max-width: 520px;
}
.hero__reasons > span { align-items: center; display: flex; gap: 10px; }
.hero__reasons svg { color: var(--leaf); flex: 0 0 auto; height: 18px; width: 18px; }
.hero__reasons small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.hero__reasons b { color: var(--ink); }
.theme-dark .hero__reasons svg { color: #a9d0a5; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .56s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms), transform .56s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms);
    will-change: opacity, transform;
  }
  .reveal-item.is-revealed { opacity: 1; transform: none; will-change: auto; }
  .hero__art.reveal-item,
  .detail-hero__image.reveal-item { transform: translate3d(24px, 0, 0); }
  .hero__copy.reveal-item,
  .detail-hero__copy.reveal-item { transform: translate3d(-18px, 0, 0); }
  .hero__art.reveal-item.is-revealed,
  .detail-hero__image.reveal-item.is-revealed,
  .hero__copy.reveal-item.is-revealed,
  .detail-hero__copy.reveal-item.is-revealed { transform: none; }
  .auth-modal { animation: dialog-enter .28s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } }
}

@media (max-width: 900px) {
  .knowledge-detail__layout { grid-template-columns: 1fr; }
  .detail-hero__grid { column-gap: 0; row-gap: 24px; }
  .detail-hero__copy,
  .detail-hero__image,
  .recipe-quality-panel { grid-column: 1; grid-row: auto; }
}

@media (max-width: 600px) {
  .auth-modal { border-radius: 24px 24px 0 0; max-height: 94dvh; }
  .modal-backdrop { align-items: end; padding: 0; }
  .knowledge-detail__layout { padding: 34px 22px 40px; }
  .knowledge-related { padding: 32px 22px 38px; }
  .knowledge-detail h1 { font-size: clamp(38px, 12vw, 52px); overflow-wrap: break-word; }
  .recipe-quality-panel { align-items: stretch; flex-direction: column; }
  .recipe-quality-panel > .recipe-quality-panel__disclosure,
  .recipe-quality-panel__contribution,
  .recipe-quality-panel__reward > summary { border-radius: 16px; width: 100%; }
  .recipe-quality-panel__reward > p { max-width: none; position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Nutrition and allergen information: one calm, legible evidence panel. */
.nutrition-fields > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.allergen-fields {
  border: 1px solid var(--soft);
  border-radius: var(--radius-md);
  margin: 0;
  padding: 18px;
}

.allergen-fields legend {
  font-weight: 760;
  padding: 0 6px;
}

.allergen-fields > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 6px 0 14px;
}

.allergen-fields label {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 88%, var(--sage));
  border: 1px solid var(--soft);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 9px;
  min-height: 44px;
  padding: 9px 11px;
}

.allergen-fields input {
  accent-color: var(--green);
  height: 17px;
  width: 17px;
}

.allergen-fields > small {
  color: var(--muted);
}

.nutrition-card {
  align-items: stretch;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--sage)), var(--surface));
  border: 1px solid var(--soft);
  border-radius: 28px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 64px;
  margin-top: 40px;
  padding: 30px clamp(24px, 4vw, 46px);
}

.nutrition-card > header {
  display: grid;
  gap: 7px;
  max-width: 760px;
}

.nutrition-card > header h2,
.nutrition-card > header p,
.nutrition-card h3 {
  margin: 0;
}

.nutrition-card > header h2 {
  font-size: clamp(30px, 4vw, 44px);
}

.nutrition-card > header > p:last-child,
.nutrition-card__allergens > p,
.nutrition-card__allergens small,
.nutrition-card footer {
  color: var(--muted);
}

.nutrition-card__content {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
}

.nutrition-card__content > section {
  background: var(--surface);
  border: 1px solid var(--soft);
  border-radius: 20px;
  padding: 22px;
}

.nutrition-card h3 {
  font-size: 17px;
  margin-bottom: 16px;
}

.nutrition-card dl {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.nutrition-card dl div {
  border-bottom: 1px solid var(--soft);
  border-left: 0;
  padding: 12px 10px 12px 0;
}

.nutrition-card dt {
  color: var(--muted);
  font-size: 12px;
}

.nutrition-card dd {
  font-size: 18px;
  font-weight: 800;
  margin: 3px 0 0;
}

.nutrition-card__allergens ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
}

.nutrition-card__allergens li {
  background: color-mix(in srgb, var(--coral) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--coral) 38%, var(--soft));
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  padding: 7px 10px;
}

.nutrition-card__allergens small {
  display: block;
  line-height: 1.5;
  margin-top: 14px;
}

.nutrition-card footer {
  border-top: 1px solid var(--soft);
  display: grid;
  font-size: 12px;
  gap: 6px;
  line-height: 1.5;
  padding-top: 18px;
}

.nutrition-card footer a {
  color: var(--green);
  font-weight: 750;
  width: fit-content;
}

.nutrition-card__sources {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--soft);
  border-radius: 14px;
  color: var(--ink);
  margin-top: 6px;
  overflow: hidden;
}

.nutrition-card__sources summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: space-between;
  padding: 11px 13px;
}

.nutrition-card__sources summary span {
  align-items: center;
  background: var(--sage);
  border-radius: 999px;
  display: inline-flex;
  height: 23px;
  justify-content: center;
  min-width: 23px;
  padding: 0 7px;
}

.nutrition-card__sources ul {
  border-top: 1px solid var(--soft);
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  max-height: 240px;
  overflow: auto;
  padding: 12px 13px;
}

.nutrition-card__sources li {
  align-items: baseline;
  display: grid;
  gap: 10px;
  grid-template-columns: 72px minmax(0, 1fr);
}

.nutrition-card__sources li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nutrition-card__sources code {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .nutrition-fields > div,
  .allergen-fields > div,
  .nutrition-card__content {
    grid-template-columns: 1fr;
  }

  .nutrition-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-card {
    border-radius: 22px;
    margin: 0 16px 42px;
    padding: 24px 18px;
  }

  .nutrition-card__sources ul {
    max-height: none;
    overflow: visible;
  }

  .nutrition-card__sources li {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

/* styles/recipe-creation-shopping.css */
.nutrition-live { background: #f4f8f1; border: 1px solid #d8e4d4; border-radius: 15px; margin-top: 26px; overflow: hidden; }
.nutrition-live > header { align-items: center; border-bottom: 1px solid #dce5d9; display: flex; justify-content: space-between; padding: 17px 19px; }
.nutrition-live h3 { font: 600 25px/1 var(--serif); margin: 4px 0 0; }
.nutrition-live__badge { background: #dfeadd; border-radius: 100px; color: var(--leaf); font-size: 10px; font-weight: 850; padding: 6px 9px; }
.nutrition-live [data-nutrition-preview] { padding: 18px 19px; transition: opacity .16s ease; }
.nutrition-live [data-nutrition-preview].is-loading { opacity: .55; }
.nutrition-live__empty, .nutrition-live__status { align-items: center; display: flex; gap: 12px; }
.nutrition-live__empty > svg, .nutrition-live__status > span { align-items: center; background: #e4eee1; border-radius: 50%; color: var(--leaf); display: flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.nutrition-live__status > span.is-complete { background: var(--leaf); color: #fff; }
.nutrition-live__empty span, .nutrition-live__status > div { display: grid; gap: 2px; }
.nutrition-live__empty b, .nutrition-live__status b { color: var(--ink); font-size: 12px; }
.nutrition-live__empty small, .nutrition-live__status small { color: var(--muted); font-size: 10px; }
.nutrition-live__metrics { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 17px; }
.nutrition-live__metrics div { border-bottom: 1px solid #dbe4d8; display: grid; gap: 3px; padding: 11px 8px 11px 0; }
.nutrition-live__metrics div:nth-child(3n+2), .nutrition-live__metrics div:nth-child(3n+3) { padding-left: 11px; }
.nutrition-live__metrics span { color: var(--muted); font-size: 9px; }
.nutrition-live__metrics b { color: var(--ink); font-size: 13px; }
.nutrition-live__allergens { margin-top: 17px; }
.nutrition-live__allergens > b { display: block; font-size: 11px; margin-bottom: 7px; }
.nutrition-live__allergens p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }
.nutrition-live__allergens p span { background: #fffaf1; border: 1px solid #ead9be; border-radius: 100px; color: #815a2a; display: inline-block; font-weight: 750; margin: 0 5px 5px 0; padding: 5px 8px; }
.nutrition-live__allergens > small { color: var(--muted); display: block; font-size: 9px; line-height: 1.5; margin-top: 7px; }
.nutrition-live__warning { background: #fff8e9; border-left: 3px solid #e4b54e; margin-top: 17px; padding: 12px 14px; }
.nutrition-live__warning b { font-size: 11px; }
.nutrition-live__warning ul { color: #695d43; font-size: 10px; line-height: 1.5; margin: 7px 0; padding-left: 17px; }
.nutrition-live__warning p, .nutrition-live__no-values { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 8px 0 0; }
.nutrition-live footer { border-top: 1px solid #dbe4d8; color: #687466; font-size: 9px; line-height: 1.4; margin-top: 17px; padding-top: 12px; }

.shopping-recipes { background: #f4f8f1; border: 1px solid #d9e5d6; border-radius: 16px; margin: 4px 0 25px; max-width: 860px; padding: 20px; }
.shopping-recipes > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.shopping-recipes h2 { font: 600 27px/1 var(--serif); margin: 4px 0 0; }
.shopping-recipes > header > span { background: #e1ecde; border-radius: 100px; color: var(--leaf); font-size: 10px; font-weight: 850; padding: 7px 10px; }
.shopping-recipes > div { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shopping-recipes article { align-items: center; background: var(--surface); border: 1px solid #dce5d9; border-radius: 11px; display: flex; gap: 8px; justify-content: space-between; padding: 10px 10px 10px 12px; }
.shopping-recipes article > a { align-items: center; color: var(--ink); display: flex; gap: 9px; min-width: 0; text-decoration: none; }
.shopping-recipes article > a > svg { color: var(--leaf); flex: 0 0 auto; }
.shopping-recipes article > a span { display: grid; gap: 2px; min-width: 0; }
.shopping-recipes article b { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shopping-recipes article small { color: var(--muted); font-size: 9px; }
.shopping-recipes article button { background: transparent; border: 0; color: var(--coral-dark); font-size: 9px; font-weight: 800; padding: 7px; }
.shopping-item__amount { color: var(--leaf) !important; font-weight: 800; }
.shopping-item__sources { align-items: center; display: flex !important; flex-wrap: wrap; gap: 5px; line-height: 1.35; margin-top: 4px !important; }
.shopping-item__sources a, .shopping-item__sources span { color: #667667; font-weight: 650; text-decoration: none; }
.shopping-item__sources a:hover { color: var(--coral); text-decoration: underline; }
.shopping-item__sources i { color: #a8b2a6; font-style: normal; }
.shopping-item.is-partial .shopping-item__check { background: linear-gradient(90deg, var(--leaf) 50%, transparent 50%); border-color: var(--leaf); }
.shopping-item__content { flex: 1; min-width: 0; padding: 10px 0; }
.shopping-list--planner .shopping-item__content label { min-height: 44px; }
.shopping-item__content label > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.shopping-item__content > .shopping-item__sources { padding: 0 0 3px 39px; }
.shopping-item input:focus-visible + .shopping-item__check { outline: 2px solid var(--leaf); outline-offset: 4px; }
.shopping-list--planner .shopping-item > button { flex: 0 0 44px; width: 44px; height: 44px; }
.shopping-recipes article button { min-height: 44px; min-width: 44px; font-size: 12px; }
.shopping-item__sources a:focus-visible, .shopping-item > button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 4px; }

.theme-dark .nutrition-live, .theme-dark .shopping-recipes { background: #1d2a20; border-color: #3a4c3c; }
.theme-dark .shopping-recipes article { background: #253429; border-color: #49604b; color: #e8efe5; }
.theme-dark .nutrition-live__empty > svg, .theme-dark .nutrition-live__status > span { background: #2b4932; color: #d3ebcf; }
.theme-dark .nutrition-live h3, .theme-dark .nutrition-live__metrics b, .theme-dark .nutrition-live__empty b, .theme-dark .nutrition-live__status b, .theme-dark .shopping-recipes h2 { color: #f0f3ea; }
.theme-dark .nutrition-live > header, .theme-dark .nutrition-live__metrics div, .theme-dark .nutrition-live footer { border-color: #3b4d3d; }
.theme-dark .nutrition-live__warning { background: #342f20; }
.theme-dark .shopping-item__sources a, .theme-dark .shopping-item__sources span { color: #a9b9a6; }

@media (max-width: 700px) {
  .nutrition-live__metrics { grid-template-columns: repeat(2, 1fr); }
  .nutrition-live__metrics div:nth-child(3n+2), .nutrition-live__metrics div:nth-child(3n+3) { padding-left: 0; }
  .nutrition-live__metrics div:nth-child(even) { padding-left: 10px; }
  .shopping-recipes > div { grid-template-columns: 1fr; }
  .shopping-item__sources { max-width: 230px; }
}

/* Keep each optional comment with its ingredient, including on narrow screens. */
.recipe-form .ingredient-row { grid-template-columns: minmax(100px, 1.2fr) 64px 76px minmax(90px, 1fr) 28px; gap: 8px; align-items: end; }
.ingredient-field { display: grid; gap: 6px; min-width: 0; }
.ingredient-field > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.ingredient-field small { font-size: 9px; font-weight: 400; }
.ingredient-field input { min-width: 0; }
.ingredient-input-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin: -8px 0 20px; }
.ingredient-note { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.recipe-form .ingredient-row .icon-button { width: 28px; }
@media (max-width: 700px) {
  .recipe-form .ingredient-row { grid-template-columns: minmax(0, 1fr) 76px 28px; padding-bottom: 14px; border-bottom: 1px solid var(--border, #d6d8ce); }
  .ingredient-field--unit { grid-column: 1; }
  .ingredient-field--note { grid-column: 1 / 3; }
  .recipe-form .ingredient-row .icon-button { grid-column: 3; grid-row: 1; }
}

.recipe-draft-save { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border, #d6d8ce); }
.recipe-draft-save > span { flex: 1 1 180px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.recipe-draft-save a { display: block; color: var(--leaf); }
.recipe-draft-save .button { font-size: 12px; }
.recipe-draft-image { display: flex; width: 100%; min-height: 160px; gap: 12px; align-items: center; justify-content: center; flex-direction: column; background: var(--surface); color: var(--muted); font-size: 13px; }
.recipe-draft-image > svg { width: 32px; height: 32px; }

/* A calm, full-width writing surface inside Kulinara's existing shell. */
.recipe-editor.add-page { display: block; max-width: 1120px; padding: 32px clamp(16px, 3vw, 40px) 40px; margin-bottom: 64px; }
.recipe-editor .add-page__intro { position: static; margin-bottom: 28px; }
.recipe-editor .back-link { margin-bottom: 24px; font-size: 13px; }
.recipe-editor__welcome { display: flex; align-items: end; gap: 30px; justify-content: space-between; }
.recipe-editor__welcome > div { flex: 1 1 570px; }
.recipe-editor__welcome .kicker { margin-bottom: 10px; }
.recipe-editor h1 { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -.045em; margin: 0; }
.recipe-editor h1 em { white-space: nowrap; }
.recipe-editor__welcome > p { flex: 0 1 280px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.recipe-editor .recipe-form { margin: 0; min-width: 0; }
.recipe-editor__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; background: #f1f5ed; border-bottom: 1px solid #dce5d9; }
.recipe-editor__toolbar > div { display: grid; gap: 4px; }
.recipe-editor__status { color: var(--leaf); font-size: 14px; font-weight: 750; }
.recipe-editor__status::before { content: ''; width: 7px; height: 7px; display: inline-block; background: currentColor; border-radius: 50%; margin-right: 8px; }
.recipe-editor__status.has-changes { color: #966525; }
.recipe-editor__toolbar small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.recipe-editor__toolbar .button { flex-shrink: 0; }
.recipe-editor__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 24px; gap: 6px; border-bottom: 1px solid #dfdfd3; background: var(--surface); }
.recipe-editor__nav button { display: flex; align-items: center; gap: 9px; padding: 12px 8px; min-height: 44px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-size: 13px; text-align: left; font-weight: 650; }
.recipe-editor__nav button:hover { background: #f0f4eb; color: var(--leaf); }
.recipe-editor__nav span { color: var(--leaf); font-size: 11px; }
.recipe-editor .form-section { padding: 32px; scroll-margin-top: 210px; }
.recipe-editor .form-section__title { margin-bottom: 24px; gap: 14px; }
.recipe-editor .form-section__title > span { width: 34px; height: 34px; background: #f3f6ee; }
.recipe-editor .form-section h2 { font-size: 32px; margin-bottom: 7px; }
.recipe-editor .form-section__title p { font-size: 13px; line-height: 1.6; }
.recipe-editor__required { color: var(--muted); font-size: 12px; margin: -8px 0 24px; line-height: 1.6; }
.recipe-editor__required b { color: var(--coral); }
.recipe-editor .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.recipe-editor .field { min-width: 0; gap: 8px; }
.recipe-editor .field--wide { grid-column: 1 / -1; }
.recipe-editor .field > span, .recipe-editor .ingredient-field > span, .recipe-editor .step-row__fields label > span { font-size: 13px; line-height: 1.5; }
.recipe-editor .field small { font-size: 12px; line-height: 1.5; }
.recipe-editor :is(.field, .repeat-row) :is(input:not([type="hidden"]), textarea, select) { min-width: 0; min-height: 48px; font-size: 16px; padding: 12px; line-height: 1.5; }
.recipe-editor select { padding-right: 32px !important; }
.recipe-editor textarea { resize: vertical; }
.recipe-editor input:focus, .recipe-editor textarea:focus, .recipe-editor select:focus { border-color: var(--leaf); outline: 2px solid #b8ceaf; outline-offset: 2px; }
.recipe-editor .ingredient-input-help { font-size: 13px; margin: -7px 0 12px; line-height: 1.65; }
.recipe-disclosure { min-width: 0; }
.recipe-disclosure > summary { color: var(--leaf); cursor: pointer; font-size: 13px; font-weight: 650; line-height: 1.5; padding: 12px 0; min-height: 44px; }
.recipe-disclosure > summary small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 5px; }
.recipe-disclosure > .form-grid, .recipe-disclosure > label { margin-top: 10px; }
.recipe-disclosure > p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 16px; max-width: 70ch; }
.ingredient-examples { margin-bottom: 18px; }
.recipe-editor .repeat-list { gap: 18px; }
.recipe-editor .ingredient-row { grid-template-columns: minmax(220px, 1.6fr) minmax(84px, .55fr) minmax(100px, .7fr) minmax(150px, 1fr) 44px; gap: 10px; align-items: end; border: 0; padding: 0; }
.recipe-editor .ingredient-field--unit, .recipe-editor .ingredient-field--note { grid-column: auto; }
.recipe-editor .ingredient-field { gap: 7px; }
.recipe-editor .ingredient-row .icon-button { width: 44px; height: 48px; grid-column: auto; grid-row: auto; border-radius: 9px; }
.recipe-editor .icon-button:hover { background: #f9eae1; }
.recipe-editor .icon-button:disabled { opacity: .28; cursor: default; }
.recipe-editor .add-row-button { min-height: 44px; margin-top: 18px; padding: 10px 16px; background: #edf3e8; border: 1px solid #d4e0cf; border-radius: 10px; font-size: 13px; }
.recipe-editor .step-row { display: block; padding: 20px; border: 1px solid #dce1d5; border-radius: 14px; background: var(--surface); }
.step-row__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.step-row__heading > b { color: var(--leaf); font-size: 14px; }
.recipe-editor .step-tools { display: flex; gap: 4px; }
.recipe-editor .step-tools .icon-button { width: 44px; height: 44px; border: 1px solid #e0e3d9; border-radius: 9px; font-size: 18px; }
.recipe-editor .step-row__fields { gap: 6px; }
.recipe-editor .step-row__fields label { gap: 8px; }
.recipe-editor .nutrition-live { margin-top: 28px; }
.recipe-editor .nutrition-live > header { padding: 18px 22px; }
.recipe-editor .nutrition-live h3 { font-size: 26px; line-height: 1.2; }
.recipe-editor .nutrition-live [data-nutrition-preview] { padding: 20px 22px; }
.recipe-editor .nutrition-live__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recipe-editor .nutrition-live__metrics span, .recipe-editor .nutrition-live__allergens > b, .recipe-editor .nutrition-live__empty b, .recipe-editor .nutrition-live__status b { font-size: 13px; }
.recipe-editor .nutrition-live__metrics b { font-size: 17px; }
.recipe-editor .nutrition-live :is(small, footer), .recipe-editor .nutrition-live__allergens p, .recipe-editor .nutrition-live__warning :is(p, ul, b), .recipe-editor .nutrition-live__no-values { font-size: 12px; line-height: 1.65; }
.recipe-editor .nutrition-live__warning { border-radius: 8px; }
.recipe-editor .image-dropzone { min-height: 180px; }
.recipe-editor .image-dropzone__preview img { max-height: 340px; object-fit: cover; }
.recipe-editor .tag-suggestions { gap: 8px; }
.recipe-editor .tags-field > label { color: var(--ink); font-size: 13px; font-weight: 750; }
.recipe-editor .tag-suggestions button { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.recipe-editor .tag-suggestions button[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.recipe-editor .form-footer { padding: 28px 32px; align-items: center; gap: 24px; background: #f1f5ed; }
.recipe-editor .recipe-editor__finish-note { display: block; flex: 1; }
.recipe-editor__finish-note > b { color: var(--ink); font-family: var(--serif); font-size: 23px; font-weight: 500; }
.recipe-editor__finish-note p { font-size: 13px; line-height: 1.6; margin: 6px 0; max-width: 48ch; }
.recipe-editor__finish-note a { color: var(--leaf); font-size: 12px; }
.recipe-editor .recipe-editor__actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.recipe-editor .button { min-height: 46px; font-size: 13px; }
.recipe-editor .form-feedback { font-size: 14px; line-height: 1.6; padding: 20px 32px; }
.recipe-editor__recovery-note { display: grid; gap: 4px; padding: 14px 32px; color: var(--muted); font-size: 12px; line-height: 1.5; border-bottom: 1px solid var(--line); }
.recipe-editor__recovery-note > span { color: var(--leaf); font-weight: 650; }
.recipe-editor__recovery-note > small { font-size: 11px; max-width: 75ch; }
.recipe-recovery { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 24px 32px; background: var(--surface); border-bottom: 2px solid var(--leaf); }
.recipe-recovery[hidden], .recipe-editor-preview[hidden] { display: none; }
.recipe-recovery > div:last-child { display: grid; gap: 8px; }
.recipe-recovery b { color: var(--ink); font-size: 16px; }
.recipe-recovery p { color: var(--muted); line-height: 1.6; font-size: 13px; margin: 6px 0 0; }
.recipe-editor-preview { padding: 32px; scroll-margin-top: 130px; color: var(--ink); }
.recipe-editor-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.recipe-editor-preview h2 { margin: 4px 0; font-size: 30px; }
.recipe-editor-preview__hint, .recipe-editor-preview__missing { font-size: 13px; line-height: 1.65; }
.recipe-editor-preview__hint { color: var(--muted); }
.recipe-editor-preview__missing { padding: 14px 16px; border-left: 3px solid var(--leaf); background: var(--surface); }
.recipe-editor-preview article { margin-top: 28px; }
.recipe-editor-preview__intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 28px; }
.recipe-editor-preview__intro h3 { margin: 12px 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); font-weight: 500; line-height: 1.12; overflow-wrap: anywhere; }
.recipe-editor-preview__intro p { line-height: 1.65; overflow-wrap: anywhere; }
.recipe-editor-preview__intro figure { margin: 0; min-width: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--surface); }
.recipe-editor-preview__intro img { width: 100%; height: 100%; display: block; }
.recipe-editor-preview__intro:has(.recipe-editor-preview__no-image) { grid-template-columns: 1fr; gap: 14px; }
.recipe-editor-preview__intro figure:has(.recipe-editor-preview__no-image) { aspect-ratio: auto; border: 1px dashed var(--line); background: var(--paper); }
.recipe-editor-preview__no-image { margin: 0; padding: 20px; color: var(--muted); text-align: center; }
.recipe-editor-preview__facts { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--leaf); }
.recipe-editor-preview__body { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; }
.recipe-editor-preview__body h4 { font-family: var(--serif); font-size: 27px; font-weight: 500; margin: 0 0 14px; }
.recipe-editor-preview__body :is(ul,ol) { padding-left: 20px; margin: 0; }
.recipe-editor-preview__body li { padding: 0 0 12px 4px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.recipe-editor-preview__body p { margin: 0 0 6px; white-space: pre-line; }
.recipe-editor-preview__detail { color: var(--muted); }
.recipe-form.is-previewing > :is(.form-section,.recipe-editor__nav) { display: none; }
.recipe-editor-preview:focus { outline: 2px solid var(--leaf); outline-offset: -3px; }
@media (max-width: 700px) {
  .recipe-editor__recovery-note, .recipe-recovery, .recipe-editor-preview { padding: 20px 18px; }
  .recipe-recovery, .recipe-editor-preview__intro, .recipe-editor-preview__body { grid-template-columns: 1fr; }
  .recipe-editor-preview > header { align-items: stretch; flex-direction: column; }
  .recipe-editor-preview__intro { gap: 18px; }
  .recipe-editor-preview__body { gap: 20px; }
}
@media (max-width: 1050px) {
  .recipe-editor__welcome { display: block; }
  .recipe-editor__welcome > p { max-width: 65ch; margin-top: 18px; }
  .recipe-editor .ingredient-row { grid-template-columns: minmax(0, 1fr) 100px 120px 44px; padding-bottom: 18px; border-bottom: 1px solid #dce1d5; }
  .recipe-editor .ingredient-field--note { grid-column: 1 / 4; }
  .recipe-editor .ingredient-row .icon-button { grid-column: 4; grid-row: 1; }
}
@media (max-width: 700px) {
  .recipe-editor.add-page { padding: 24px 12px; margin-top: 16px; border-radius: 20px; margin-bottom: 24px; }
  .recipe-editor .add-page__intro { padding: 0 8px; margin-bottom: 24px; }
  .recipe-editor h1 { font-size: clamp(32px, 7.5vw, 44px); }
  .recipe-editor h1 em { white-space: normal; }
  .recipe-editor .back-link { margin-bottom: 20px; }
  .recipe-editor__welcome > p { font-size: 13px; margin-top: 14px; }
  .recipe-editor__toolbar { padding: 18px; flex-wrap: wrap; gap: 12px; }
  .recipe-editor__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
  .recipe-editor__nav button { font-size: 12px; }
  .recipe-editor .form-section { padding: 26px 18px; scroll-margin-top: 170px; }
  .recipe-editor .form-section h2 { font-size: 29px; }
  .recipe-editor .form-grid { grid-template-columns: 1fr; gap: 20px; }
  .recipe-editor .ingredient-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 12px; }
  .recipe-editor .ingredient-field--name { grid-column: 1 / 3; }
  .recipe-editor .ingredient-field--amount { grid-column: 1; }
  .recipe-editor .ingredient-field--unit { grid-column: 2 / 4; }
  .recipe-editor .ingredient-field--note { grid-column: 1 / -1; }
  .recipe-editor .ingredient-row .icon-button { grid-column: 3; grid-row: 1; }
  .recipe-editor .step-row { padding: 14px; }
  .recipe-editor .nutrition-live > header, .recipe-editor .nutrition-live [data-nutrition-preview] { padding: 16px; }
  .recipe-editor .nutrition-live h3 { font-size: 23px; }
  .recipe-editor .nutrition-live__badge { display: none; }
  .recipe-editor .nutrition-live__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recipe-editor .form-footer { padding: 24px 18px; align-items: stretch; flex-direction: column; gap: 20px; }
  .recipe-editor .recipe-editor__actions { width: 100%; }
  .recipe-editor .form-feedback { padding: 18px; }
}
.shopping-add__hint,
.shopping-add__error { grid-column: 1 / -1; margin: 0; padding: 2px 4px; }
.shopping-add__hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.shopping-add__error { color: var(--coral-dark); font-size: 14px; line-height: 1.5; }
.shopping-add__error[hidden] { display: none; }
.shopping-add input[aria-invalid="true"] { border-color: var(--coral-dark); }

/* styles/recipe-food-search.css */
.ingredient-food-picker { min-width: 0; position: relative; }
.ingredient-food-picker > input { width: 100%; }
.food-search-results {
  background: var(--surface);
  border: 1px solid #cfdaca;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(28, 48, 33, .16);
  left: 0;
  max-height: 310px;
  overflow: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 24;
}
.food-search-results[hidden] { display: none; }
.food-search-results [role="option"] {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  min-height: 52px;
  padding: 9px 10px;
  text-align: left;
  width: 100%;
}
.food-search-results [role="option"]:hover,
.food-search-results [role="option"].is-active { background: #edf4e9; }
.food-search-results [role="option"] > span { display: grid; gap: 3px; min-width: 0; }
.food-search-results [role="option"] b { font-size: 12px; line-height: 1.35; }
.food-search-results [role="option"] small { color: var(--muted); font-size: 10px; font-weight: 500; }
.food-search-results [role="option"] em { color: var(--leaf); flex: 0 0 auto; font-size: 9px; font-style: normal; font-weight: 800; }
.food-search__empty { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; padding: 12px; }
.nutrition-live footer a { color: var(--leaf); font-weight: 700; }

.theme-dark .food-search-results { background: #223027; border-color: #4a5d4d; box-shadow: 0 18px 42px rgba(0, 0, 0, .35); }
.theme-dark .food-search-results [role="option"] { color: #eef3e9; }
.theme-dark .food-search-results [role="option"]:hover,
.theme-dark .food-search-results [role="option"].is-active { background: #304436; }

@media (max-width: 700px) {
  .food-search-results { max-height: 260px; }
  .food-search-results [role="option"] { min-height: 58px; }
}

/* styles/final-polish.css */
/* Final interaction and visual cleanup kept last so every page shares one hierarchy. */
img.recipe-media {
  background: color-mix(in srgb, var(--sage) 52%, var(--surface));
  object-fit: var(--recipe-image-fit, cover);
  object-position: var(--recipe-image-x, 50%) var(--recipe-image-y, 50%);
}

.detail-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-hero__copy { min-width: 0; }
.detail-hero h1 { hyphens: auto; max-width: 100%; overflow-wrap: anywhere; }
.detail-hero__copy--long-title h1 { font-size: clamp(42px, 4vw, 60px); }
.ingredient-list strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

.recipe-image-editor {
  background: color-mix(in srgb, var(--sage) 36%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 13%, var(--line));
  border-radius: 20px;
  display: grid;
  gap: 14px;
  padding: 12px;
}
.recipe-image-editor .image-dropzone { background: var(--surface); }
.recipe-image-editor .image-dropzone__preview img {
  object-fit: cover;
  object-position: var(--recipe-image-x, 50%) var(--recipe-image-y, 50%);
}
.recipe-image-editor[data-image-fit='contain'] .image-dropzone__preview img { object-fit: contain; }
.image-framing { border: 0; display: grid; gap: 12px; margin: 0; padding: 0 2px 2px; }
.image-framing legend { color: var(--ink); font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.image-framing__modes { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-framing__modes label {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}
.image-framing__modes label:has(input:checked) { background: color-mix(in srgb, var(--sage) 76%, var(--surface)); border-color: var(--green); }
.image-framing__modes input { accent-color: var(--green); }
.image-framing__modes span { display: grid; gap: 2px; }
.image-framing__modes b { color: var(--ink); font-size: 12px; }
.image-framing__modes small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.image-framing__position { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.image-framing__position label { color: var(--muted); display: grid; font-size: 11px; gap: 5px; }
.image-framing__position input { accent-color: var(--green); width: 100%; }
.recipe-image-editor[data-image-fit='contain'] .image-framing__position { display: none; }

/* Warm surfaces reduce the hard white-card effect without losing structure. */
.nutrition-card { background: linear-gradient(145deg, #eef1e7, #f5f1e6); border-color: #d9dfd1; }
.nutrition-card__content > section { background: rgba(235, 240, 229, .72); border-color: #d7ded2; box-shadow: none; }
.community-composer { background: #eef2e9; border-color: #d4dccf; }
.community-composer .comment-form { background: transparent; border-color: transparent; box-shadow: none; }
.community-composer .comment-form textarea { background: #f6f3e9; border-color: #d5dbcf; }

/* Photo conversations stay compact: context is fixed, only the discussion
   scrolls, and the composer remains reachable on short/mobile screens. */
.photo-post__actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); }
.photo-post__actions button:last-child { justify-self: end; margin-left: 0; }
.profile-photo-post__overlay { gap: 11px; }
.photo-comments-modal {
  background: #f5f2e8;
  display: grid;
  grid-template-rows: auto minmax(90px, 1fr) auto auto;
  max-height: min(820px, calc(100dvh - 44px));
  overflow: hidden;
  padding: 0;
  width: min(100%, 620px);
}
.photo-comments-modal > .modal-close { background: rgba(247,244,234,.88); border-radius: 50%; z-index: 2; }
.photo-comments-modal__header {
  background: linear-gradient(135deg, #e6eee1, #f4eadb);
  border-bottom: 1px solid #d6ded1;
  display: grid;
  gap: 13px;
  padding: 30px 34px 22px;
}
.photo-comments-modal__header .kicker { margin: 0; }
.photo-comments-modal__header h2 { font-size: clamp(35px, 5vw, 48px); margin: 0; }
.photo-comments-modal__header > div { align-items: center; display: flex; gap: 10px; }
.photo-comments-modal__header > div > span { display: grid; gap: 2px; }
.photo-comments-modal__header > div b { font-size: 13px; }
.photo-comments-modal__header > div small { color: var(--muted); font-size: 11px; }
.photo-comments-modal__header > p:last-child { color: #536154; font-size: 13px; line-height: 1.55; margin: 0; white-space: pre-line; }
.photo-comment-list { display: grid; gap: 0; min-height: 0; overflow-y: auto; padding: 7px 26px; scrollbar-color: #9aaa98 transparent; scrollbar-width: thin; }
.photo-comment { display: grid; gap: 11px; grid-template-columns: auto minmax(0, 1fr); padding: 15px 4px; }
.photo-comment + .photo-comment { border-top: 1px solid #d9dfd3; }
.photo-comment__author,.photo-comment header button { background: transparent; border: 0; color: inherit; padding: 0; }
.photo-comment__author { align-self: start; border-radius: 50%; }
.photo-comment__author:focus-visible,.photo-comment header button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.photo-comment .avatar { height: 38px; width: 38px; }
.photo-comment > div { min-width: 0; }
.photo-comment header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 7px; }
.photo-comment header b { font-size: 12px; }
.photo-comment header small { color: var(--muted); font-size: 10px; }
.photo-comment header .photo-comment__delete { color: #a75241; font-size: 10px; font-weight: 800; margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.photo-comment p { color: #465247; font-size: 13px; line-height: 1.55; margin: 6px 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.photo-comment-empty { align-self: center; color: var(--muted); font-size: 13px; margin: 0; padding: 36px 8px; text-align: center; }
.photo-comment-form { align-items: end; background: #e9eee4; border-top: 1px solid #d5ddd1; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 15px 26px; }
.photo-comment-form label { min-width: 0; }
.photo-comment-form textarea { background: #faf8f0; border: 1px solid #cad4c7; border-radius: 14px; color: var(--ink); display: block; min-height: 76px; padding: 12px 13px; resize: vertical; width: 100%; }
.photo-comment-form .button { min-height: 48px; white-space: nowrap; }
.photo-comment-login { align-items: center; background: #e9eee4; border-top: 1px solid #d5ddd1; display: flex; font-size: 12px; justify-content: space-between; padding: 17px 26px; }
.photo-comments-modal__close { justify-self: center; margin: 14px 0 18px !important; min-width: 180px; }

/* Let the final odd CP option keep its natural card width. The deliberate
   empty grid cell reads calmer than a single stretched full-width block. */
.cp-cost-grid .cp-cost-card:last-child:nth-child(odd) { grid-column: auto; }

/* Achievements show the next meaningful goals first. The complete catalogue
   remains one deliberate action away instead of forming an endless card wall. */
.achievement-grid--focus { margin-top: 2px; }
.achievement-catalog {
  background: color-mix(in srgb, var(--sage) 42%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 14%, var(--line));
  border-radius: 19px;
  margin-top: 18px;
  overflow: hidden;
}
.achievement-catalog > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  list-style: none;
  padding: 17px 19px;
}
.achievement-catalog > summary::-webkit-details-marker { display: none; }
.achievement-catalog > summary > span { display: grid; gap: 3px; }
.achievement-catalog > summary b { color: var(--ink); font-size: 14px; }
.achievement-catalog > summary small { color: var(--muted); font-size: 11px; }
.achievement-catalog > summary > strong { align-items: center; color: var(--green); display: inline-flex; font-size: 12px; gap: 8px; white-space: nowrap; }
.achievement-catalog > summary i { font-style: normal; transition: transform .2s ease; }
.achievement-catalog[open] > summary i { transform: rotate(180deg); }
.achievement-catalog__body { border-top: 1px solid var(--line); display: grid; gap: 18px; padding: 18px; }
.achievement-catalog__body .achievement-reward-guide { margin: 0; }

@media (min-width: 1200px) {
  .site-header__inner {
    grid-template-areas: 'brand space actions' 'nav search search';
    grid-template-columns: auto minmax(40px, 1fr) auto;
    row-gap: 8px;
  }
  .site-header__inner > .primary-nav { grid-area: nav; justify-content: flex-start; }
  .site-header__inner > .global-search { grid-area: search; justify-self: end; margin: 0; max-width: 480px; }
}

.theme-dark .recipe-image-editor { background: #1d2a21; border-color: #3a4b3e; }
.theme-dark .recipe-image-editor .image-dropzone { background: #202d24; }
.theme-dark .image-framing__modes label { background: #202d24; border-color: #415245; }
.theme-dark .image-framing__modes label:has(input:checked) { background: #2a3d2f; border-color: #739174; }
.theme-dark .nutrition-card { background: linear-gradient(145deg, #19251d, #1d2a21); border-color: #3a4b3e; }
.theme-dark .nutrition-card__content > section { background: rgba(31, 44, 35, .72); border-color: #3d4e41; box-shadow: none; }
.theme-dark .community-composer { background: #19261e; border-color: #3a4b3e; }
.theme-dark .community-composer .comment-form { background: #1d2a21; }
.theme-dark .community-composer .comment-form textarea { background: #202d24; }
.theme-dark .achievement-catalog { background: #1b2920; border-color: #3b4d3f; }
.theme-dark .achievement-catalog__body { border-color: #3a4a3e; }

@media (max-width: 900px) {
  .detail-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .detail-hero__copy--long-title h1 { font-size: clamp(38px, 11vw, 50px); }
  .image-framing__modes, .image-framing__position { grid-template-columns: 1fr; }
  .ingredient-list label { grid-template-columns: 20px minmax(0, 1fr) minmax(72px, auto); }
  .ingredient-list strong { max-width: 132px; white-space: normal; }
  .achievement-catalog > summary { align-items: flex-start; padding: 15px; }
  .achievement-catalog > summary > strong { padding-top: 2px; }
  .achievement-catalog__body { padding: 14px; }
  .modal-backdrop:has(.photo-comments-modal) { align-items: end; padding: 0; }
  .photo-comments-modal { border-bottom: 0; border-radius: 24px 24px 0 0; max-height: calc(100dvh - 24px); width: 100%; }
  .photo-comments-modal__header { gap: 10px; padding: 24px 20px 17px; }
  .photo-comments-modal__header h2 { font-size: 36px; }
  .photo-comment-list { padding: 4px 17px; }
  .photo-comment-form { grid-template-columns: 1fr; padding: 13px 17px; }
  .photo-comment-form textarea { min-height: 68px; }
  .photo-comment-form .button { justify-content: center; margin: 0; width: 100%; }
  .photo-comment-login { padding: 15px 18px; }
  .photo-comments-modal__close { margin: 11px 0 15px !important; min-height: 48px; width: calc(100% - 34px); }
}

/* styles/visual-refresh.css */
/* Shared rhythm: one quiet surface, clear reading order, consistent actions. */
:root { --editorial-gold: #947022; --editorial-line: #ccb783; --quiet-surface: #f3f4ed; }
html.theme-dark { --editorial-gold: #e3c777; --editorial-line: #806d3e; --quiet-surface: #202d24; }
summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }
:is(.recipe-grid,.recipe-browser-results) { align-items: stretch; }

/* The main row is deliberately limited to navigation and frequent actions. */
.site-header.site-header--refined { background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: none; }
.site-header--refined .site-header__inner { position: relative; display: flex; grid-template: none; max-width: 1360px; min-height: 82px; padding: 12px 32px; gap: 28px; }
.site-header--refined .brand { flex: 0 0 auto; gap: 9px; margin: 0; }
.site-header--refined .brand-mark { width: 30px; height: 34px; object-fit: contain; }
.site-header--refined .brand__word { font-size: 28px; }
.site-header--refined .primary-nav { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 0 auto; padding: 0; border: 0; }
.site-header--refined .nav-link { white-space: nowrap; font-size: 13px; padding: 12px 0; background: none; border: 0; }
.site-header--refined .header-actions { display: flex; gap: 12px; margin: 0; min-width: 0; }
.site-header--refined .header-account-actions { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; }
.site-header--refined .header-points { background: var(--quiet-surface); color: var(--ink); border: 1px solid var(--line); padding: 8px 10px; min-height: 38px; gap: 4px; white-space: nowrap; }
.site-header--refined .header-points svg { color: var(--editorial-gold); }
.site-header--refined .header-points b { font-size: 12px; }
.site-header--refined .header-points small { display: inline; font-size: 10px; }
.site-header--refined .profile-chip { min-width: 0; padding: 0; border: 0; background: transparent; width: 36px; height: 36px; border-radius: 50%; }
.site-header--refined .profile-chip .avatar { width: 36px; height: 36px; }
.site-header--refined .header-create { min-height: 40px; padding: 10px 13px; background: var(--leaf); color: var(--surface); box-shadow: none; border-radius: 12px; gap: 6px; }
.site-header--refined .header-create svg { width: 17px; height: 17px; }
.site-header--refined .header-bell { display: flex; width: 36px; height: 40px; padding: 8px; background: transparent; border: 0; color: var(--ink); }
.header-search-disclosure,.header-tools { position: static; }
.header-search-disclosure > summary,.header-tools > summary { list-style: none; cursor: pointer; display: grid; place-items: center; height: 40px; width: 36px; color: var(--ink); border-radius: 12px; }
.header-search-disclosure > summary::-webkit-details-marker,.header-tools > summary::-webkit-details-marker { display: none; }
.header-search-disclosure > summary svg,.header-tools > summary svg { width: 21px; height: 21px; }
.header-search-disclosure[open] > summary,.header-tools[open] > summary { background: var(--quiet-surface); }
.header-search-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 24px; }
.site-header--refined .global-search { display: flex; width: 100%; max-width: none; height: auto; border: 0; background: none; box-shadow: none; margin: 0; padding: 0; gap: 10px; align-items: end; }
.site-header--refined .global-search label { display: grid; gap: 10px; flex: 1; color: var(--ink); font-size: 15px; font-weight: 650; }
.site-header--refined .global-search input { width: 100%; background: var(--quiet-surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-height: 50px; color: var(--ink); font-size: 16px; }
.site-header--refined .global-search button { position: static; width: 50px; height: 50px; flex: 0 0 50px; margin: 0; background: var(--leaf); color: var(--surface); border-radius: 12px; }
.header-search-panel > a { display: inline-flex; align-items: center; gap: 8px; color: var(--leaf); font-size: 13px; margin-top: 16px; }
.header-tools__menu { position: absolute; right: 24px; top: calc(100% + 8px); z-index: 2; min-width: 245px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 2px; }
.header-tools__menu :is(a,button) { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 12px; min-height: 44px; border-radius: 9px; color: var(--ink); font-size: 14px; text-decoration: none; }
.header-tools__menu :is(a,button):hover { background: var(--quiet-surface); }
.header-tools__menu svg { width: 18px; height: 18px; }

/* All recipes share the same grid. Origin is a detail, not a separate destination. */
.recipes-hub.recipe-browser-page { padding-top: 0; }
.recipes-hub .recipe-browser-page__intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-top: 34px; padding-bottom: 22px; margin: 0; }
.recipes-hub .recipe-browser-page__intro h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.03; margin: 0 0 18px; }
.recipes-hub .recipe-browser-page__intro p { max-width: 570px; }
.recipes-hub .recipe-browser-page__intro .button { flex-shrink: 0; margin-bottom: 18px; }
.recipes-hub .recipe-browser { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 26px; margin: 0 0 26px; border-bottom: 1px solid var(--line); }
.recipes-hub .recipe-browser__heading { margin-bottom: 16px; }
.recipes-hub .recipe-browser__heading .kicker { display: none; }
.recipes-hub .recipe-browser__heading h2 { font: 650 15px/1.4 var(--sans); letter-spacing: 0; }
.recipes-hub .recipe-browser__heading > span { display: none; }
.recipes-hub .recipe-browser__search { background: var(--surface); min-height: 54px; border-color: var(--line); border-radius: 14px; margin-bottom: 18px; }
.recipes-hub .recipe-browser__filters { gap: 14px; }
.recipe-grid { gap: 28px 24px; }
.recipe-grid > .recipe-card { height: 100%; }
.recipe-card.social-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 5px 18px rgb(40 50 41 / 4%); min-width: 0; }
.recipe-card.social-card::before { display: none; }
.recipe-card.social-card:hover { box-shadow: 0 10px 25px rgb(40 50 41 / 9%); }
.recipe-card.social-card.recipe-card--editorial { border-color: var(--editorial-line); }
.recipe-card__source { display: flex; align-items: center; gap: 6px; min-height: 35px; padding: 8px 17px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .045em; }
.recipe-card--editorial .recipe-card__source { color: var(--editorial-gold); background: color-mix(in srgb, var(--editorial-line) 9%, var(--surface)); }
.recipe-card__source svg { width: 13px; height: 13px; flex-shrink: 0; }
.recipe-card.social-card .recipe-card__image { display: block; aspect-ratio: 4 / 3; height: auto; min-height: 0; border-radius: 0; }
.recipe-card.social-card .recipe-card__image > img { height: 100%; width: 100%; }
.recipe-card.social-card .recipe-card__body { display: flex; flex-direction: column; flex: 1; padding: 19px 17px 10px; min-width: 0; }
.recipe-card .author-line { margin: 0 0 14px; gap: 8px; min-height: 32px; }
.recipe-card .author-line b { font-size: 12px; }
.recipe-card .author-line small { font-size: 10px; color: var(--muted); }
.recipe-card.social-card h3 { font-size: 23px; line-height: 1.17; min-height: 54px; margin: 0 0 9px; overflow-wrap: anywhere; }
.recipe-card.social-card h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-card.social-card .recipe-card__body > p { font-size: 13px; line-height: 1.65; min-height: 65px; margin: 0 0 18px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-card.social-card .recipe-card__meta { margin-top: auto; padding-bottom: 14px; gap: 12px; }
.recipe-card__meta > span { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; }

/* One action row everywhere; no gradient slabs and no repeated counters. */
.social-actions.social-actions { display: grid; grid-template-columns: repeat(4, auto) minmax(40px, 1fr) auto; align-items: center; gap: 5px; padding: 12px 0 0; margin: 0; background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.social-actions .social-button { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 5px; min-height: 42px; min-width: 40px; margin: 0; padding: 8px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); box-shadow: none; font-size: 12px; line-height: 1; white-space: nowrap; }
.social-actions .social-button svg { width: 19px; height: 19px; flex: 0 0 19px; }
.social-actions .social-button > span:empty { display: none; }
.social-actions .social-button:hover { background: var(--quiet-surface); color: var(--ink); transform: none; }
.social-actions .social-button--like { background: transparent; color: var(--coral-dark); }
.social-actions .social-button--like.is-active { background: color-mix(in srgb, var(--coral) 12%, var(--surface)); color: var(--coral-dark); }
.social-actions .social-button--save { background: transparent; border-color: transparent; color: var(--leaf); justify-self: end; border-radius: 11px; }
.social-actions .social-button--save.is-active { background: var(--quiet-surface); }
.social-actions .social-button--share { color: var(--leaf); }
.social-actions .social-views { grid-column: auto; justify-self: end; display: inline-flex; gap: 4px; min-height: 40px; padding: 6px; width: auto; background: transparent; border: 0; border-radius: 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
.social-actions .social-views b { font-size: inherit; }
.social-actions--compact.social-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.social-actions--compact .social-views { justify-self: center; padding: 4px 0; }
.social-actions--compact .social-views__label { display: none; }
.social-actions--compact .social-button { padding: 6px 4px; min-width: 0; width: 100%; }
.timeline-post > .social-actions { margin: 0 22px; padding: 12px 0; }

/* Recipe intro: two balanced columns with natural height. */
.detail-page .detail-hero { padding-top: 28px; padding-bottom: 36px; min-height: 0; margin-bottom: 0; }
.detail-page .detail-hero > .back-link { display: inline-flex; margin-bottom: 24px; }
.detail-page .detail-hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; column-gap: 54px; row-gap: 20px; min-height: 0; }
.detail-page .detail-hero__copy { grid-column: 1; grid-row: 1; padding: 6px 0 0; min-height: 0; align-self: start; }
.detail-page .detail-hero__image { grid-column: 2; grid-row: 1; height: auto; min-height: 0; aspect-ratio: 1.08; padding: 0; border: 1px solid var(--line); border-radius: 24px; box-shadow: none; align-self: start; }
.detail-page .detail-hero__image img { height: 100%; border-radius: inherit; }
.detail-page .detail-hero__copy > .author-line { margin-bottom: 24px; }
.detail-page .detail-hero__copy > .kicker { line-height: 1.6; margin-bottom: 12px; color: var(--muted); font-size: 10px; }
.detail-page .recipe-title-row { display: block; margin: 0; }
.detail-page .detail-hero h1 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.07; margin: 0 0 20px; }
.detail-page .detail-description { font-size: 15px; line-height: 1.75; margin-bottom: 20px; color: var(--muted); max-width: 52ch; }
.detail-tags { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin: 0 0 22px; color: var(--muted); font-size: 11px; }
.detail-tags > span,.detail-tags > details > summary { padding: 5px 10px; border-radius: 6px; background: var(--quiet-surface); list-style: none; }
.detail-tags summary { cursor: pointer; }
.detail-tags details > div { display: grid; gap: 6px; padding: 10px; }
.detail-page .detail-meta { display: flex; gap: 12px 20px; flex-wrap: wrap; padding: 17px 0; border-top: 1px solid var(--line); margin: 0; }
.detail-page .detail-meta > span { font-size: 12px; font-weight: 600; }
.detail-hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 4px 0 20px; }
.detail-hero__links > a { display: inline-flex; align-items: center; gap: 5px; color: var(--leaf); font-size: 12px; font-weight: 700; }
.detail-hero__links .recipe-quick-report { margin-left: auto; border: 0; background: transparent; padding: 8px 0; min-height: 36px; color: var(--muted); box-shadow: none; font-size: 11px; }
.detail-page .recipe-content { margin-top: 0; padding-top: 20px; padding-bottom: 42px; align-items: start; }
.detail-page .ingredients-card { position: static; align-self: start; box-shadow: none; }
.detail-page .owner-actions { margin-top: 16px; gap: 14px; }
.detail-page .nutrition-card { margin-top: 0; margin-bottom: 36px; }
.nutrition-card .nutrition-card__content { gap: 24px; }
.nutrition-card .nutrition-card__sources { margin-top: 12px; }
.nutrition-card .nutrition-card__sources li { gap: 14px; }
.nutrition-card .nutrition-card__empty { font-size: 14px; line-height: 1.7; }
:is(#recipe-ingredients,#recipe-steps,#nutrition-title) { scroll-margin-top: 120px; }

.nutrition-method { margin-top: 10px; }
.nutrition-method > summary { cursor: pointer; font-size: 13px; font-weight: 650; padding: 12px 0; color: var(--leaf); }
.nutrition-method > div { display: grid; gap: 14px; padding: 10px 0; }
.nutrition-method p { margin: 0; font-size: 12px; line-height: 1.7; }
.site-header--refined .login-link { font-size: 13px; }
.site-header--refined .login-link::after { content: none; }
/* CP: spacing communicates groups; the shop is a single destination. */
.cp-modal.cp-modal { background: var(--surface); }
.cp-modal .cp-balance { padding: 26px; border-radius: 18px; }
.cp-modal .cp-balance h2 { font-size: 44px; margin-bottom: 8px; }
.cp-modal .cp-balance p:last-child { max-width: 52ch; font-size: 12px; line-height: 1.6; }
.cp-modal .cp-view-tabs { margin: 20px 0; gap: 8px; padding: 5px; border-radius: 14px; }
.cp-modal .cp-view-panel { padding: 0; background: transparent; border: 0; border-radius: 0; }
.cp-modal .cp-view-panel > header { padding: 4px 2px 18px; }
.cp-modal .cp-view-panel > header .kicker { display: none; }
.cp-modal .cp-view-panel > header h3 { font-size: 27px; }
.cp-modal .cp-view-panel > header p { font-size: 13px; line-height: 1.6; max-width: 55ch; }
.cp-modal .cp-shop-teaser { background: var(--quiet-surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; gap: 16px; margin: 0 0 20px; }
.cp-modal .cp-shop-teaser small { display: block; font-size: 12px; line-height: 1.6; padding-top: 4px; }
.cp-modal .cp-cost-grid { gap: 16px; margin: 0; }
.cp-modal .cp-cost-card { padding: 18px; background: transparent; border: 1px solid var(--line); border-radius: 16px; gap: 12px; grid-template-columns: auto minmax(0,1fr); }
.cp-modal .cp-cost-card > strong { grid-column: 2; justify-self: start; background: var(--quiet-surface); color: var(--ink); }
.cp-modal .cp-cost-card .kicker { display: none; }
.cp-modal .cp-cost-card h4 { font-size: 19px; line-height: 1.2; }
.cp-modal .cp-earn-layout { gap: 16px; }
.cp-modal .cp-info-group { background: var(--quiet-surface); box-shadow: none; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.cp-modal .cp-info-row { padding: 12px 0; }
.cp-modal .cp-modal__footer { margin-top: 24px; padding-top: 18px; gap: 18px; }

/* One disclosure opens every achievement, including its explanation and reward. */
.achievement-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.achievement-grid .achievement-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0; box-shadow: none; min-width: 0; overflow: hidden; cursor: auto; }
.achievement-grid .achievement-tile::before { display: none; }
.achievement-tile__header { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; align-items: center; padding: 18px; }
.achievement-tile .achievement-tile__crest { width: 38px; height: 38px; background: var(--quiet-surface); border: 0; border-radius: 12px; box-shadow: none; display: grid; place-items: center; color: var(--leaf); }
.achievement-tile .achievement-tile__crest svg { width: 23px; height: 23px; }
.achievement-tile .achievement-tile__copy { min-width: 0; }
.achievement-tile .achievement-tile__copy h3 { font: 650 15px/1.35 var(--sans); margin: 0 0 4px; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; letter-spacing: 0; }
.achievement-tile__rank { color: var(--muted); font-size: 11px; }
.achievement-tile .achievement-tile__meter { grid-column: 1 / -1; padding: 0; border: 0; margin: 2px 0 0; }
.achievement-tile .achievement-tile__meter > span[role] { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.achievement-tile .achievement-tile__meter i { display: block; height: 100%; width: var(--achievement-progress); background: var(--leaf); }
.achievement-tile .achievement-tile__status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 9px; }
.achievement-tile .achievement-tile__status b { font-size: 12px; }
.achievement-tile .achievement-tile__status small { font-size: 10px; color: var(--muted); }
.achievement-tile__details { border-top: 1px solid var(--line); padding: 16px 18px; color: var(--muted); display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.achievement-tile__details p { font-size: 13px; line-height: 1.65; margin: 0 0 12px; }
.achievement-tile .achievement-tile__reward { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 0; margin-top: auto; color: var(--editorial-gold); font-size: 12px; font-weight: 650; }
.achievement-tile__reward svg { flex-shrink: 0; }
.achievement-vault__action { color: var(--leaf) !important; margin-top: 6px; }
.achievement-vault__hide, .achievement-vault[open] .achievement-vault__show { display: none; }
.achievement-vault[open] .achievement-vault__hide { display: inline; }
.achievement-vault > summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: -4px; }
.achievement-vault .achievement-section__hint { font-size: 13px; max-width: 42ch; }
.achievement-reward-guide { gap: 8px; padding: 12px; margin-bottom: 20px; background: var(--quiet-surface); border-color: var(--line); }

@media (max-width: 1190px) {
  .site-header--refined .site-header__inner { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'brand actions' 'nav nav'; gap: 6px 20px; padding: 12px 24px 4px; }
  .site-header--refined .brand { grid-area: brand; }
  .site-header--refined .header-actions { grid-area: actions; justify-self: end; }
  .site-header--refined .primary-nav { grid-area: nav; justify-content: center; width: 100%; padding: 0; gap: 30px; }
  .recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 850px) {
  .detail-page .detail-hero__grid { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; gap: 24px; }
  .detail-page .detail-hero__copy,.detail-page .detail-hero__image { grid-column: 1; grid-row: auto; }
  .detail-page .detail-hero__image { aspect-ratio: 4 / 3; width: 100%; max-height: 540px; }
  .detail-page .recipe-content { grid-template-columns: 1fr; gap: 32px; }
  .detail-page .detail-hero { padding-bottom: 20px; }
  .detail-page .detail-hero__copy > .author-line { margin-bottom: 18px; }
}
@media (max-width: 600px) {
  .section-shell { padding-left: 20px; padding-right: 20px; }
  .site-header--refined .site-header__inner { padding: 10px 16px 3px; gap: 5px 8px; }
  .site-header--refined .brand__word { font-size: 23px; }
  .site-header--refined .brand-mark { width: 24px; height: 28px; }
  .site-header--refined .header-actions { gap: 2px; }
  .site-header--refined .header-account-actions { gap: 2px; }
  .site-header--refined .header-create,.site-header--refined .profile-chip { display: none; }
  .site-header--refined .header-points { border: 0; background: none; padding: 7px 4px; }
  .site-header--refined .header-points svg { display: none; }
  .site-header--refined .header-points b { max-width: 54px; overflow: hidden; text-overflow: ellipsis; }
  .site-header--refined .primary-nav { display: flex; gap: 23px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .site-header--refined .primary-nav .nav-link { display: block; font-size: 12px; padding: 10px 0 14px; }
  .site-header--refined .header-bell { width: 32px; }
  .header-tools__menu { right: 16px; max-width: calc(100vw - 32px); }
  .header-search-panel { padding: 18px; }
  .recipe-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .recipes-hub .recipe-browser-page__intro { padding-top: 28px; padding-bottom: 22px; display: block; }
  .recipes-hub .recipe-browser-page__intro .button { margin: 0; min-height: 42px; font-size: 12px; padding: 10px 14px; }
  .recipes-hub .recipe-browser__filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recipe-card.social-card .recipe-card__body { padding: 19px 18px 10px; }
  .recipe-card.social-card h3 { min-height: 0; }
  .recipe-card.social-card .recipe-card__body > p { min-height: 0; }
  .detail-page .detail-hero h1 { font-size: clamp(34px,9vw,46px); }
  .detail-page .detail-hero__links { gap: 12px; }
  .detail-hero__links .recipe-quick-report { font-size: 10px; }
  .detail-page .social-actions { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 2px; }
  .detail-page .social-actions .social-button__label,.detail-page .social-views__label { display: none; }
  .detail-page .social-actions .social-button--share span { display: none; }
  .detail-page .social-actions .social-button { padding: 6px 4px; }
  .timeline-post > .social-actions { margin: 0 14px; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; }
  .timeline-post .social-button__label,.timeline-post .social-button--share span,.timeline-post .social-views__label { display: none; }
  .cp-modal .cp-balance { padding: 22px; }
  .cp-modal .cp-shop-teaser { grid-template-columns: auto minmax(0,1fr); padding: 18px; }
  .cp-modal .cp-shop-teaser .button { grid-column: 1 / -1; width: 100%; }
  .cp-modal .cp-cost-grid { grid-template-columns: 1fr; }
  .cp-modal .cp-modal__footer { align-items: stretch; }
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-reward-guide { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* styles/profile-studio.css */
/* Approved profile design: isolated from legacy hero and social-card styles. */
.profile-studio { --ps-gold:#936824; max-width:1240px; padding:32px 32px 70px; color:var(--ink); }
.theme-dark .profile-studio { --ps-gold:#e4c882; }
.profile-studio svg { flex-shrink:0; }
.profile-studio h1,.profile-studio h2,.profile-studio h3 { color:var(--ink); }
.ps-identity { margin-bottom:34px; }
.ps-cover { position:relative; height:190px; border-radius:18px; overflow:hidden; background:var(--sage); }
.ps-cover > img { width:100%; height:100%; object-fit:cover; object-position:50% 56%; }
.ps-cover > .profile-hero__banner { inset:0; height:100%; border-radius:0; }
.ps-cover .profile-hero__banner > img { height:100%; object-fit:cover; }
.ps-cover .profile-hero__banner > img + span { display:none; }
.ps-cover .profile-hero__banner--contributor > span { position:static; background:none; }
.ps-cover-note { position:absolute; top:30px; left:34px; font:italic 25px/1.3 var(--serif); color:#fffdf2; text-shadow:0 1px 8px #0009; }
.ps-cover-edit { position:absolute; right:17px; bottom:16px; z-index:1; display:flex; align-items:center; gap:8px; min-height:40px; padding:9px 13px; border:1px solid #ffffff88; border-radius:9px; color:#fff; background:#18231ace; font-size:12px; }
.ps-cover-edit svg { width:17px; height:17px; }
.ps-identity-body { position:relative; display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:25px; padding:0 16px; }
.ps-avatar { position:relative; align-self:start; z-index:1; margin-top:-32px; }
.ps-avatar > .avatar { display:grid; place-items:center; width:100px; height:100px; border:6px solid var(--paper); border-radius:50%; font-size:36px; box-shadow:none; overflow:hidden; }
.ps-avatar .avatar img { height:100%; width:100%; object-fit:cover; }
.ps-identity-copy { min-width:0; padding-top:18px; }
.ps-name-line { display:flex; flex-wrap:wrap; align-items:center; gap:12px 17px; }
.ps-name-line h1 { font:normal 42px/1.12 var(--serif); margin:0; letter-spacing:-1.4px; overflow-wrap:anywhere; }
.ps-rank { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ps-gold); }
.ps-rank svg { width:17px; height:17px; }
.ps-role { display:block; color:var(--muted); font-size:11px; margin-top:6px; }
.ps-identity-copy > p { color:var(--muted); margin:12px 0 16px; max-width:530px; font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
.ps-recognition { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.ps-recognition > span { font-size:11px; }
.ps-identity-copy .social-links { margin:12px 0; }
.ps-stats { display:flex; align-items:center; flex-wrap:wrap; gap:12px 25px; font-size:14px; color:var(--muted); margin-top:14px; }
.ps-stats button { border:0; padding:8px 0; background:transparent; color:inherit; font-size:inherit; }
.ps-stats b { color:var(--ink); font-weight:650; margin-right:3px; }
.ps-stats button:hover { text-decoration:underline; text-underline-offset:4px; }
.ps-identity-actions { display:flex; gap:10px; align-items:center; padding-top:25px; align-self:start; }
.profile-studio .ps-identity-actions .button--primary { background:var(--leaf); color:var(--paper); border-color:var(--leaf); box-shadow:none; }
.profile-studio .button { min-height:43px; padding:9px 17px; border-radius:10px; font-size:14px; gap:9px; }
.profile-studio .button svg { width:17px; height:17px; }
.ps-icon-button { display:inline-flex; align-items:center; justify-content:center; width:43px; height:43px; border:0; border-radius:50%; flex-shrink:0; color:var(--leaf); background:transparent; }
.ps-icon-button svg { width:19px; height:19px; }
.ps-icon-button:hover { background:var(--sage); }
.ps-outlined { border:1px solid var(--line); }
.ps-layout { display:grid; grid-template-columns:minmax(0,1fr) 266px; gap:44px; }
.ps-main { min-width:0; }
.ps-tabs { display:flex; gap:32px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.ps-tabs button { scroll-margin-top:100px; }
.ps-tabs button { position:relative; bottom:-1px; padding:14px 0 16px; border:0; border-bottom:2px solid transparent; background:transparent; font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; min-height:48px; }
.ps-tabs button[aria-selected=true] { border-bottom-color:var(--leaf); color:var(--ink); }
.ps-tabs button span { margin-left:7px; font-size:12px; font-weight:500; color:var(--muted); }
.ps-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:21px; }
.ps-section-heading h2 { margin:0; font:normal 27px/1.3 var(--serif); letter-spacing:-.65px; }
.ps-muted { color:var(--muted); font-size:13px; margin:9px 0 0; }
.ps-sort select { max-width:165px; min-height:44px; padding:8px 20px 8px 5px; font-size:13px; background:transparent; border:0; color:var(--muted); }
.ps-panel { outline-offset:6px; }
.profile-studio .ps-panel.profile-published-recipes { padding-top:0; }
.ps-panel.profile-photo-posts { margin:0; padding:0; }
.ps-recipe-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; align-items:start; }
.ps-recipe { min-width:0; }
.ps-recipe-media { position:relative; }
.ps-recipe-cover { display:block; position:relative; width:100%; aspect-ratio:1.55; border-radius:13px; background:var(--sage); overflow:hidden; }
.ps-recipe-cover > .recipe-media { width:100%; height:100%; object-fit:var(--recipe-image-fit,cover); object-position:var(--recipe-image-x,50%) var(--recipe-image-y,50%); }
.ps-recipe-cover:hover { outline:2px solid var(--line); outline-offset:3px; }
.ps-duration { position:absolute; bottom:11px; left:11px; display:flex; gap:5px; align-items:center; border:1px solid #ffffff88; border-radius:7px; color:#364a38; background:#fffef5ed; font-size:12px; padding:4px 8px; }
.ps-duration svg { width:13px; height:13px; }
.ps-recipe-save { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #ffffffaa; color:#315f49; background:#fffef5f0; }
.ps-recipe-save svg { width:18px; height:18px; }
.ps-recipe-save[aria-pressed=true] { background:#e4f0df; }
.ps-recipe-copy { padding:13px 1px 0; }
.ps-recipe-category { display:flex; gap:5px; align-items:center; color:var(--leaf); font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.ps-recipe--editorial .ps-recipe-cover { border:1px solid var(--ps-gold); }
.ps-recipe--editorial .ps-recipe-category { color:var(--ps-gold); }
.ps-recipe-copy h3 { font:normal 23px/1.25 var(--serif); letter-spacing:-.5px; margin:5px 0 8px; overflow-wrap:anywhere; }
.ps-recipe-copy h3 a { color:inherit; }
.ps-recipe-copy h3 a:hover { color:var(--leaf); }
.ps-recipe-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px; }
.ps-reactions { display:flex; gap:14px; align-items:center; }
.ps-reactions button { display:flex; align-items:center; gap:6px; min-width:40px; min-height:40px; padding:5px 0; border:0; color:inherit; background:transparent; font-size:13px; }
.ps-reactions svg { width:17px; height:17px; }
.ps-reactions [aria-pressed=true] { color:var(--coral); }
.ps-reactions [aria-pressed=true] svg { fill:currentColor; }
.ps-empty { grid-column:1/-1; padding:44px 25px; border:1px dashed var(--line); border-radius:15px; text-align:center; color:var(--muted); }
.ps-empty > svg { height:30px; width:30px; color:var(--leaf); }
.ps-empty h3 { font:normal 25px/1.3 var(--serif); margin:15px 0 10px; }
.ps-empty p { max-width:430px; margin:0 auto 20px; font-size:14px; line-height:1.7; }
.ps-aside { padding-top:10px; min-width:0; }
.ps-level { padding:23px; border:1px solid var(--line); border-radius:15px; background:var(--sage); }
.ps-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--leaf); font-size:11px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.ps-eyebrow svg { width:20px; height:20px; }
.ps-level h2 { margin:13px 0 0; font:normal 27px/1.3 var(--serif); letter-spacing:-.8px; }
.ps-level > p { font-size:13px; color:var(--muted); margin:6px 0 22px; }
.ps-meter { height:5px; border-radius:8px; overflow:hidden; background:var(--line); }
.ps-meter i { display:block; height:100%; background:var(--leaf); border-radius:8px; }
.ps-meter-label { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:11px; margin-top:9px; }
.ps-meter-label b { color:var(--ink); font-weight:600; }
.ps-level .ps-reward { display:flex; justify-content:space-between; font-size:12px; margin:20px 0 16px; }
.ps-reward strong { color:var(--leaf); font-weight:600; }
.ps-text-link { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; padding:14px 0 0; border:0; border-top:1px solid var(--line); color:var(--leaf); background:transparent; font-size:12px; font-weight:600; min-height:40px; text-align:left; }
.ps-text-link svg { width:16px; height:16px; }
.ps-create { justify-content:flex-start; width:max-content; max-width:100%; margin-top:22px; }
.ps-wallet { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:21px 4px; }
.ps-wallet > span { padding:10px; border-radius:11px; color:var(--ps-gold); background:color-mix(in srgb,var(--ps-gold) 9%,transparent); }
.ps-wallet > span svg { width:20px; height:20px; }
.ps-wallet > button:not(.ps-icon-button) { flex:1; padding:0; border:0; text-align:left; background:transparent; color:var(--ink); }
.ps-wallet b { display:block; font-size:21px; font-weight:600; line-height:1.4; letter-spacing:-.7px; }
.ps-wallet small { color:var(--muted); font-size:11px; }
.ps-about { padding:25px 4px; }
.ps-about h2 { margin:0; font:750 11px/1.5 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--leaf); }
.ps-flavours { display:flex; flex-wrap:wrap; gap:7px; margin:15px 0; }
.ps-flavours span { border:1px solid var(--line); padding:4px 9px; border-radius:6px; font-size:11px; color:var(--muted); }
.ps-about p { font-size:13px; color:var(--muted); line-height:1.8; margin:17px 0; }
.ps-about small { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); }
.ps-about svg { width:15px; height:15px; }
.ps-private { display:grid; border-top:1px solid var(--line); padding-top:12px; gap:2px; }
.ps-private > a,.ps-invite > summary { display:flex; gap:10px; align-items:center; padding:11px 4px; min-height:44px; font-size:12px; color:var(--ink); cursor:pointer; }
.ps-private > a svg,.ps-invite > summary svg { width:16px; height:16px; color:var(--muted); }
.ps-private > a svg:last-child { margin-left:auto; width:13px; }
.ps-private > a:hover,.ps-invite > summary:hover { color:var(--leaf); background:var(--sage); border-radius:7px; }
.ps-private > small { color:var(--muted); font-size:10px; padding:9px 4px; }
.ps-invite > summary::after { content:'+'; margin-left:auto; }
.ps-invite[open] > summary::after { content:'−'; }
.ps-invite > p,.ps-invite > small { color:var(--muted); font-size:12px; line-height:1.7; }
.ps-invite > small { display:block; margin:12px 0; }
.ps-rank-guide { display:flex; gap:14px; align-items:center; border-bottom:1px solid var(--line); padding:0 0 20px; margin:5px 0 23px; color:var(--ps-gold); }
.ps-rank-guide > svg { width:26px; height:26px; }
.ps-rank-guide p { margin:0; font-size:14px; }
.ps-rank-guide small { display:block; color:var(--muted); font-size:12px; line-height:1.7; margin-top:5px; }
.profile-studio .achievement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.profile-studio .achievement-reward-guide { margin:24px 0 0; grid-template-columns:repeat(4,minmax(0,1fr)); }
.profile-studio .creator-milestone { margin:24px 0 0; }
.profile-studio .creator-milestone h2 { font-size:20px; }
.profile-studio .creator-milestone summary { grid-template-columns:32px minmax(0,1fr) 16px; }
.profile-studio .creator-milestone summary > strong { grid-column:2; }
.profile-studio .profile-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.profile-studio .profile-photo-post { margin:0; min-width:0; }
.profile-studio .profile-photo-post__copy > div { display:flex; flex-wrap:wrap; gap:10px; }
.profile-studio .profile-photo-post__copy p { overflow-wrap:anywhere; }
.profile-studio .admin-audience-overview { display:block; margin-top:24px; padding:18px; }
.profile-studio .admin-audience-overview h2 { font-size:21px; }
.profile-studio .admin-audience-overview__numbers { flex-wrap:wrap; margin-top:15px; }
.profile-studio :is(button,a,select,summary):focus-visible { outline:3px solid var(--coral); outline-offset:4px; }
@media(min-width:1400px) { .ps-cover { height:205px; } .profile-studio { padding-top:36px; } }
@media(max-width:1000px) {
  .profile-studio { padding:24px 24px 55px; }
  .ps-identity-body { grid-template-columns:90px minmax(0,1fr); gap:20px; }
  .ps-avatar > .avatar { width:90px; height:90px; }
  .ps-identity-actions { grid-column:2; padding-top:0; }
  .ps-layout { gap:25px; grid-template-columns:minmax(0,1fr) 230px; }
  .ps-level { padding:20px; }
  .ps-recipe-copy h3 { font-size:21px; }
}
@media(max-width:760px) {
  .profile-studio { padding:20px 18px 40px; }
  .ps-cover { height:150px; border-radius:13px; }
  .ps-cover-note { top:23px; left:22px; font-size:22px; }
  .ps-cover-edit { padding:10px; right:12px; bottom:12px; }
  .ps-cover-edit > span { display:none; }
  .ps-identity-body { grid-template-columns:72px minmax(0,1fr); gap:15px; padding:0 6px; }
  .ps-avatar { margin-top:-23px; }
  .ps-avatar > .avatar { width:72px; height:72px; border-width:4px; font-size:29px; }
  .ps-name-line h1 { font-size:35px; letter-spacing:-1px; }
  .ps-identity-copy { padding-top:15px; }
  .ps-identity-copy > p { font-size:14px; }
  .ps-stats { gap:4px 14px; font-size:12px; }
  .ps-identity-actions { grid-column:1/-1; padding-top:0; justify-content:flex-end; }
  .ps-identity-actions .button { flex:1; }
  .ps-layout { display:flex; flex-direction:column; gap:34px; }
  .ps-main { width:100%; }
  .ps-tabs { gap:28px; margin-bottom:22px; }
  .ps-tabs button { font-size:14px; }
  .ps-tabs button span { margin-left:4px; font-size:11px; }
  .ps-section-heading { gap:10px; flex-wrap:wrap; margin-bottom:18px; }
  .ps-section-heading h2 { font-size:25px; }
  .ps-sort select { max-width:143px; font-size:12px; }
  .ps-recipe-grid { gap:25px 17px; }
  .ps-recipe-cover { aspect-ratio:1.25; }
  .ps-recipe-bottom > span { display:none; }
  .ps-aside { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; border-top:1px solid var(--line); padding-top:24px; }
  .ps-level { grid-row:span 2; }
  .ps-wallet { padding-top:5px; }
  .ps-about,.ps-private,.ps-aside .admin-audience-overview { grid-column:1/-1; }
}
@media(max-width:450px) {
  .ps-recipe-grid,.profile-studio .profile-photo-grid,.profile-studio .achievement-grid { grid-template-columns:1fr; }
  .ps-recipe-cover { aspect-ratio:1.55; }
  .ps-recipe-copy h3 { font-size:25px; }
  .ps-recipe-bottom > span { display:block; }
  .ps-tabs { gap:24px; }
  .ps-aside { display:block; }
  .ps-wallet { padding:23px 4px; }
  .profile-studio .achievement-reward-guide { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* styles/studio-refinements.css */
/* Shared, quiet surfaces for the profile, editor, homepage and learning room. */
.ls-feedback { border:1px solid var(--line); border-radius:16px; padding:28px; margin-bottom:18px; background:var(--sage); }
.ls-feedback h2 { font:normal 27px/1.3 var(--serif); margin:12px 0 18px; }
.ls-feedback > p:not(.kicker) { font-size:16px; line-height:1.75; color:var(--ink); }
.ls-feedback .ls-feedback-sources { font-size:13px; }
.ls-feedback .ls-feedback-retry { font-size:14px; color:var(--muted); }
.learning-studio .ls-feedback .button--primary { background:var(--leaf); color:var(--paper); }
.theme-dark .auth-modal.editor-studio { background:var(--paper); }
.avatar--rank-1 { --rank-edge:#778583; }
.avatar--rank-2 { --rank-edge:#ac754c; }
.avatar--rank-3 { --rank-edge:#99a8b5; }
.avatar--rank-4 { --rank-edge:#c49b40; }
.avatar--rank-5 { --rank-edge:#73aaa0; }
.avatar--rank-6 { --rank-edge:#8b9de0; }
.avatar--rank-7 { --rank-edge:#b47ba2; }
.avatar.avatar--ranked { outline:2px solid var(--rank-edge); outline-offset:2px; flex-shrink:0; }
.ps-avatar > .avatar.avatar--ranked { outline-width:3px; outline-offset:1px; border-width:5px; box-shadow:0 0 0 6px var(--paper); }
.profile-chip { overflow:visible; }
.ps-sort { position:relative; display:inline-flex; max-width:100%; }
.ps-sort::after { content:""; position:absolute; right:15px; top:17px; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); pointer-events:none; }
.profile-studio .ps-sort select { appearance:none; min-height:43px; border:1px solid var(--line); border-radius:10px; padding:10px 35px 10px 14px; background:var(--paper); color:var(--ink); font:inherit; font-size:14px; cursor:pointer; }
.ps-sort select:focus-visible { outline:2px solid var(--leaf); outline-offset:3px; }
.ps-creator { padding:24px 0; border-top:1px solid var(--line); scroll-margin-top:110px; }
.ps-creator-link { display:inline-flex; align-items:center; gap:6px; padding:9px 0; font-size:12px; color:var(--leaf); }
.ps-creator-link svg { width:14px; height:14px; }
.ps-creator h2 { margin:7px 0 10px; font:normal 25px/1.2 var(--serif); }
.ps-creator > p:not(.kicker) { color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px; }
.ps-creator .creator-milestone { display:block; margin:18px 0 0; padding:0; border:0; background:transparent; box-shadow:none; border-radius:0; }
.ps-creator .creator-milestone summary { display:flex; justify-content:space-between; padding:8px 0; font-size:14px; color:var(--leaf); cursor:pointer; }
.ps-creator .creator-milestone summary svg { width:16px; height:16px; transform:rotate(90deg); }
.ps-creator .creator-milestone[open] summary svg { transform:rotate(-90deg); }
.ps-creator .creator-milestone p,.ps-creator .creator-milestone small { font-size:13px; line-height:1.65; color:var(--muted); }
.ps-creator .ps-text-link { margin-top:12px; font-size:13px; }

.auth-modal.editor-studio { width:min(800px,100%); max-width:800px; padding:36px; border:1px solid var(--line); border-radius:22px; background:var(--paper); color:var(--ink); }
.es-header { padding:0 35px 24px 0; }
.editor-studio .es-header h2 { font:normal clamp(30px,4vw,42px)/1.12 var(--serif); margin:10px 0 12px; }
.es-header > p:last-child { color:var(--muted); font-size:16px; margin:0; }
.editor-studio #profile-form { display:block; }
.editor-studio .es-section { padding:24px 0; border-top:1px solid var(--line); }
.es-section > header { display:flex; align-items:flex-start; gap:15px; margin-bottom:20px; }
.es-section > header > span { font:italic 23px/1.25 var(--serif); color:var(--leaf); }
.es-section h3 { margin:0 0 5px; font:normal 24px/1.2 var(--serif); }
.es-section header p { margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.es-images { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:24px; }
.es-images h4 { font:600 14px/1.3 var(--sans); margin:0 0 10px; }
.es-images > div { min-width:0; }
.editor-studio .image-dropzone { min-height:158px; height:158px; padding:10px; border:1px dashed var(--line); border-radius:12px; background:var(--sage); }
.editor-studio .image-dropzone__empty { padding:6px; gap:8px; }
.editor-studio .image-dropzone__icon { width:30px; height:30px; }
.editor-studio .image-dropzone strong { font-size:14px; }
.editor-studio .image-dropzone small { font-size:12px; line-height:1.45; color:var(--muted); }
.editor-studio .image-dropzone__preview { height:100%; }
.editor-studio .image-dropzone__preview img { max-height:138px; object-fit:contain; }
.editor-studio .es-avatar-picker .image-dropzone__preview img { width:130px; height:130px; object-fit:cover; border-radius:50%; margin:auto; }
.editor-studio .profile-banner-editor { margin:0; padding:0; border:0; background:transparent; box-shadow:none; display:block; }
.editor-studio .profile-banner-editor--unlocked > div:first-child { display:none; }
.editor-studio .profile-banner-editor__format { display:block; color:var(--muted); font-size:12px; margin:8px 0 0; }
.editor-studio .profile-banner-editor--locked { min-height:158px; padding:16px; border-radius:12px; background:var(--sage); }
.editor-studio .profile-banner-editor--locked > span,.editor-studio .profile-banner-editor--locked .kicker { display:none; }
.editor-studio .profile-banner-editor--locked h3 { font:600 14px/1.3 var(--sans); }
.editor-studio .profile-banner-editor--locked p { font-size:13px; line-height:1.5; }
.editor-studio .button { min-height:43px; padding:10px 15px; border-radius:10px; font-size:14px; box-shadow:none; }
.editor-studio .profile-cosmetic-entry { margin:22px 0 0; padding:14px; border:1px solid var(--line); background:transparent; border-radius:12px; gap:12px; }
.editor-studio .profile-cosmetic-entry > span { width:32px; height:32px; background:var(--sage); color:var(--leaf); }
.editor-studio .profile-cosmetic-entry b { font-size:14px; }
.editor-studio .profile-cosmetic-entry small { font-size:12px; color:var(--muted); }
.editor-studio .profile-display-name { display:flex; flex-wrap:wrap; margin:0 0 20px; padding:16px; border:0; background:var(--sage); border-radius:12px; gap:12px; }
.editor-studio .profile-display-name > span { display:none; }
.editor-studio .profile-display-name > div { flex:1 1 220px; }
.editor-studio .profile-display-name b { font-size:17px; }
.editor-studio .profile-display-name small { font-size:12px; }
.editor-studio .profile-display-name button { font-size:14px; }
.editor-studio .field { margin:0 0 18px; }
.editor-studio .field > span { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:14px; }
.editor-studio .field small { font-weight:400; color:var(--muted); font-size:12px; }
.editor-studio .field input,.editor-studio .field textarea { background:var(--paper); border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:16px; }
.editor-studio .es-color { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.editor-studio .es-color > span { display:grid; gap:5px; }
.editor-studio input[type=color] { width:54px; height:42px; padding:4px; cursor:pointer; }
.editor-studio .social-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:0; border:0; background:transparent; }
.editor-studio .social-editor .field { min-width:0; margin:0; }
.editor-studio .modal-footer-actions { position:sticky; bottom:-36px; z-index:2; margin:0 -36px -36px; padding:18px 36px; border-top:1px solid var(--line); background:var(--paper); }

.home-studio :where(h1,h2,h3),.learning-studio :where(h1,h2,h3) { color:var(--ink); }
.home-studio .section-shell { max-width:1240px; padding-left:32px; padding-right:32px; }
.home-studio .button { border-radius:10px; box-shadow:none; }
.home-studio .button--primary,.editor-studio .button--primary { background:var(--leaf); color:var(--paper); border-color:var(--leaf); }
.hs-hero { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:64px; padding-top:54px; padding-bottom:48px; }
.hs-hero h1 { font:normal clamp(48px,5.4vw,76px)/1.04 var(--serif); letter-spacing:-2px; margin:18px 0 24px; }
.hs-hero-copy > p:not(.kicker) { font-size:17px; line-height:1.75; color:var(--muted); max-width:440px; margin:0 0 28px; }
.hs-quick-links { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:24px; }
.hs-quick-links a { font-size:14px; color:var(--leaf); border-bottom:1px solid var(--line); padding:5px 0; }
.hs-hero-media { position:relative; height:470px; overflow:hidden; border-radius:20px; background:var(--sage); }
.hs-hero-media > img { width:100%; height:100%; object-fit:cover; object-position:65% 50%; }
.hs-hero-note { position:absolute; left:25px; top:25px; font:italic 25px/1.25 var(--serif); color:#fffdf4; text-shadow:0 1px 10px #17251af0; }
.hs-hero-recipe { position:absolute; bottom:18px; left:18px; right:18px; background:var(--paper); padding:17px 20px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--ink); }
.hs-hero-recipe small { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.hs-hero-recipe b { font:normal 21px/1.2 var(--serif); }
.hs-hero-recipe svg { width:20px; height:20px; flex-shrink:0; }
.hs-slideshow { isolation:isolate; }
.hs-slide { position:absolute; inset:0; display:block; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .65s ease,visibility .65s; color:var(--ink); }
.hs-slide.is-active { opacity:1; visibility:visible; pointer-events:auto; z-index:1; }
.hs-slide img { width:100%; height:100%; object-fit:var(--recipe-image-fit,cover); object-position:var(--recipe-image-x,50%) var(--recipe-image-y,50%); }
.hs-slide-caption { position:absolute; bottom:18px; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--paper); border-radius:12px; padding:18px 20px; }
.hs-slide-caption small { display:block; color:var(--muted); font-size:.8125rem; line-height:1.5; margin-bottom:6px; }
.hs-slide-caption b { display:block; font:normal clamp(1.2rem,2vw,1.6rem)/1.25 var(--serif); color:var(--ink); hyphens:auto; overflow-wrap:break-word; }
.hs-slide-caption > svg { width:20px; height:20px; flex-shrink:0; color:var(--leaf); }
.hs-slide-caption > span { min-width:0; }
.hs-slide-controls { position:absolute; top:16px; right:16px; z-index:3; display:flex; align-items:center; gap:2px; padding:3px; border-radius:12px; background:var(--paper); box-shadow:0 3px 12px #0001; color:var(--leaf); }
.hs-slide-controls button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:9px; background:transparent; color:inherit; }
.hs-slide-controls button:hover { background:var(--sage); }
.hs-slide-controls [data-slide-counter] { min-width:42px; text-align:center; font-size:.8125rem; font-variant-numeric:tabular-nums; }
.hs-slide-controls [data-home-slide="previous"] svg { transform:rotate(180deg); }
.hs-slide:focus-visible { outline:3px solid var(--leaf); outline-offset:-5px; }
@media (max-width:700px) { .home-studio .hs-slideshow { height:350px; } .hs-slide-caption { bottom:12px; left:12px; right:12px; padding:15px 17px; } .hs-slide-controls { top:12px; right:12px; } }
.hs-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding-top:15px; padding-bottom:45px; }
.hs-paths a { display:flex; align-items:center; gap:13px; padding:22px 0; border-bottom:1px solid var(--line); color:var(--leaf); }
.hs-paths a > svg { width:22px; height:22px; flex-shrink:0; }
.hs-paths a > svg:last-child { width:17px; margin-left:auto; }
.hs-paths b { color:var(--ink); font-size:15px; }
.hs-paths small { display:block; color:var(--muted); font-size:13px; line-height:1.6; margin-top:4px; }
.hs-selection { padding-top:25px; padding-bottom:45px; }
.home-studio .section-heading h2 { font-size:38px; line-height:1.15; }
.hs-community { display:grid; grid-template-columns:1.3fr 1fr; gap:75px; padding-top:45px; padding-bottom:60px; }
.hs-community h2 { font:normal 44px/1.12 var(--serif); margin:15px 0 20px; }
.hs-community p:not(.kicker) { color:var(--muted); font-size:16px; line-height:1.75; max-width:480px; }
.hs-community > div > div { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:25px; }
.hs-community aside { padding:32px; border-radius:16px; background:var(--sage); align-self:center; }
.hs-community aside > span { display:block; color:var(--leaf); margin-bottom:20px; }
.hs-community aside > span svg { height:26px; width:26px; }
.hs-community h3 { font:normal 29px/1.2 var(--serif); margin:10px 0; }
.hs-update { display:flex; align-items:center; gap:20px; padding-top:24px; padding-bottom:35px; border-top:1px solid var(--line); }
.hs-update > span svg { width:25px; height:25px; color:var(--leaf); }
.hs-update p { flex:1; color:var(--muted); font-size:14px; line-height:1.6; margin:0; }
.hs-update b { color:var(--ink); }

.learning-page.learning-studio { max-width:1200px; padding:45px 32px 70px; }
.ls-intro { padding:0 0 40px; border-bottom:1px solid var(--line); }
.ls-intro h1 { margin:15px 0 20px; max-width:850px; font:normal clamp(42px,5vw,64px)/1.08 var(--serif); letter-spacing:-1.5px; }
.ls-intro > p:not(.kicker) { font-size:17px; line-height:1.7; max-width:580px; color:var(--muted); }
.ls-intro nav { display:flex; flex-wrap:wrap; gap:25px; margin-top:22px; }
.ls-intro nav a { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--leaf); }
.ls-intro nav svg { width:16px; height:16px; }
.learning-studio .learning-section { padding:40px 0; margin:0; scroll-margin-top:100px; }
.learning-studio .ls-quiz { display:grid; grid-template-columns:270px minmax(0,1fr); gap:55px; align-items:start; }
.ls-quiz-heading { padding-top:18px; }
.ls-quiz-heading h2 { font:normal 36px/1.2 var(--serif); margin:12px 0 20px; }
.ls-quiz-heading > p:not(.kicker) { font-size:15px; line-height:1.7; color:var(--muted); }
.learning-studio .learning-count { display:grid; text-align:left; gap:6px; margin:30px 0 12px; }
.learning-studio .learning-count b { font-size:14px; }
.learning-studio .learning-count span,.ls-quiz-heading > small { font-size:13px; color:var(--muted); }
.learning-studio .quiz-wheel { display:block; overflow:visible; margin:0; padding:0; min-height:0; }
.learning-studio .quiz-card.quiz-card--active { margin:0; width:100%; min-width:0; max-width:none; transform:none; box-shadow:none; border:1px solid var(--line); border-radius:16px; background:var(--sage); color:var(--ink); padding:28px; }
.learning-studio .quiz-card__top { margin-bottom:18px; }
.learning-studio .quiz-card__top > span { display:none; }
.learning-studio .quiz-card h2 { font:normal 28px/1.3 var(--serif); margin:0 0 25px; }
.learning-studio .quiz-options { display:grid; grid-template-columns:1fr; gap:10px; }
.learning-studio .quiz-options button { display:flex; gap:13px; min-height:56px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:10px; box-shadow:none; background:var(--paper); color:var(--ink); font-size:15px; line-height:1.55; }
.learning-studio .quiz-options button b { display:grid; place-items:center; width:27px; height:27px; flex:0 0 27px; font-size:12px; border-radius:7px; background:var(--sage); color:var(--leaf); }
.learning-studio .quiz-options button:hover { border-color:var(--leaf); background:var(--sage); }
.learning-studio .quiz-options button:focus-visible { outline:2px solid var(--leaf); outline-offset:2px; }
.learning-studio .learning-articles { border-top:1px solid var(--line); }
.learning-studio .section-heading h2 { font:normal 36px/1.15 var(--serif); }
.learning-studio .learning-library-controls { justify-content:space-between; margin:22px 0 28px; padding:0; background:transparent; border:0; }
.learning-studio .learning-topic-filter { gap:10px; color:var(--muted); font-size:14px; }
.learning-studio .learning-topic-filter select { min-height:43px; padding:9px 30px 9px 13px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-size:14px; }
.learning-studio .button { border-radius:10px; box-shadow:none; font-size:14px; }
.learning-studio .knowledge-grid--lessons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.learning-studio .knowledge-card--lesson { position:relative; min-width:0; margin:0; padding:0; background:var(--paper); box-shadow:none; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.learning-studio .knowledge-card--lesson::before,.learning-studio .knowledge-card--lesson::after { display:none; }
.learning-studio .knowledge-card--lesson > a { display:flex; flex-direction:column; gap:0; padding:24px; height:100%; background:transparent; }
.learning-studio .knowledge-card--lesson > a:focus-visible { outline:2px solid var(--leaf); outline-offset:-5px; border-radius:14px; }
.learning-studio .knowledge-card--lesson .ls-lesson-topic { display:flex; align-items:center; gap:12px; min-width:0; padding:0 30px 0 0; margin-bottom:18px; }
.learning-studio .ls-lesson-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:12px; background:var(--sage); color:var(--leaf); }
.ls-lesson-icon > svg { display:block; width:25px; height:25px; }
.learning-studio .knowledge-card .kicker { margin:0; font-size:11px; line-height:1.5; letter-spacing:.09em; color:var(--leaf); }
.learning-studio .knowledge-card h3 { margin:0 0 10px; font:normal 25px/1.25 var(--serif); letter-spacing:-.025em; overflow-wrap:anywhere; }
.learning-studio .knowledge-card .ls-lesson-summary { font-size:14px; line-height:1.65; color:var(--muted); margin:0 0 24px; }
.learning-studio .knowledge-card footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding:0; border:0; font-size:12px; color:var(--muted); }
.learning-studio .knowledge-card footer .ls-lesson-open { display:inline-flex; align-items:center; gap:8px; color:var(--leaf); font-size:12px; font-weight:700; }
.learning-studio .knowledge-card footer svg { width:14px; height:14px; }
.learning-studio .knowledge-favorite { top:24px; right:18px; width:36px; height:36px; box-shadow:none; background:transparent; color:var(--leaf); border:0; }
.learning-studio .knowledge-favorite:focus-visible { outline:2px solid var(--leaf); outline-offset:2px; }
.learning-studio .knowledge-favorite.is-active { color:var(--coral); background:var(--sage); }
.learning-studio .knowledge-card:focus-within,.learning-studio .knowledge-card:hover { border-color:var(--leaf); transform:none; }
.learning-studio .learning-load-more { display:flex; margin:28px auto 0; }
@media (max-width:1000px) {
  .hs-hero { gap:32px; }
  .hs-hero-media { height:430px; }
  .hs-paths { gap:20px; }
  .hs-paths a > svg:last-child { display:none; }
  .hs-community { gap:35px; }
  .learning-studio .ls-quiz { grid-template-columns:220px minmax(0,1fr); gap:30px; }
  .learning-studio .knowledge-card--lesson > a { padding:20px; }
  .learning-studio .knowledge-favorite { top:20px; right:14px; }
}
@media (max-width:700px) {
  .home-studio .section-shell,.learning-page.learning-studio { padding-left:20px; padding-right:20px; }
  .hs-hero { grid-template-columns:1fr; padding-top:30px; padding-bottom:20px; gap:28px; }
  .hs-hero h1 { font-size:54px; }
  .hs-hero-copy > p:not(.kicker) { font-size:16px; }
  .hs-hero-media { height:310px; }
  .hs-hero-note { font-size:22px; }
  .hs-paths { grid-template-columns:1fr; gap:0; padding-bottom:20px; }
  .hs-paths a { padding:17px 0; }
  .hs-paths a > svg:last-child { display:block; }
  .home-studio .section-heading { align-items:flex-start; gap:15px; }
  .home-studio .section-heading h2 { font-size:31px; }
  .hs-community { grid-template-columns:1fr; gap:30px; padding-top:15px; padding-bottom:35px; }
  .hs-community h2 { font-size:36px; }
  .hs-community aside { padding:24px; }
  .hs-update { flex-wrap:wrap; }
  .hs-update p { flex-basis:80%; }
  .learning-studio .ls-quiz { grid-template-columns:1fr; gap:20px; }
  .ls-quiz-heading { padding:0; }
  .ls-quiz-heading h2 br { display:none; }
  .ls-quiz-heading h2 { font-size:30px; margin:10px 0; }
  .learning-studio .learning-count { margin:16px 0 8px; }
  .learning-studio .quiz-card.quiz-card--active { padding:20px; }
  .learning-studio .quiz-card h2 { font-size:25px; }
  .learning-studio .knowledge-grid--lessons { grid-template-columns:1fr; gap:15px; }
  .learning-studio .knowledge-card h3 { font-size:23px; }
  .learning-studio .learning-library-controls { flex-wrap:wrap; gap:14px; }
  .learning-studio .learning-topic-filter select { min-width:0; max-width:100%; }
  .auth-modal.editor-studio { padding:24px 20px; border-radius:16px; }
  .editor-studio .modal-footer-actions { bottom:-24px; margin:0 -20px -24px; padding:16px 20px; }
  .es-images { grid-template-columns:1fr; gap:22px; }
  .editor-studio .social-editor { grid-template-columns:1fr; }
  .editor-studio .profile-cosmetic-entry { display:flex; flex-wrap:wrap; }
  .editor-studio .profile-cosmetic-entry > div { flex:1 1 180px; }
  .editor-studio .profile-cosmetic-entry .button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .home-studio *,.learning-studio *,.editor-studio * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* styles/kitchen-studio.css */
/* A personal working surface, using the same typography and materials as the profile. */
.kitchen-studio { max-width:1240px; padding:42px 32px 80px; color:var(--ink); }
.kitchen-studio .kicker { font-size:.75rem; }
.ks-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.ks-heading h1 { font:normal clamp(2.6rem,5vw,3.8rem)/1.08 var(--serif); margin:12px 0 14px; letter-spacing:-.045em; }
.ks-heading p:not(.kicker) { font-size:1rem; line-height:1.7; color:var(--muted); margin:0; }
.kitchen-studio .button { border-radius:10px; box-shadow:none; min-height:44px; }
.kitchen-studio .button--primary { background:var(--leaf); color:var(--paper); }
.ks-heading > .button { flex-shrink:0; }
.ks-tools { display:flex; flex-wrap:wrap; gap:12px 30px; padding:24px 0 30px; margin:0; }
.ks-tools a { display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:.875rem; color:var(--leaf); }
.ks-tools a > svg:last-child { width:13px; margin-left:3px; }
.ks-tabs { display:flex; gap:30px; border-bottom:1px solid var(--line); }
.ks-tabs button { display:flex; align-items:center; justify-content:center; gap:9px; background:none; color:var(--muted); border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:16px 0; min-height:52px; font-size:.9375rem; }
.ks-tabs button[aria-selected="true"] { border-bottom-color:var(--leaf); color:var(--ink); }
.ks-tabs button b { font-size:.75rem; font-weight:500; color:var(--muted); }
.ks-tabs button:hover { color:var(--leaf); }
.ks-panel { padding-top:30px; scroll-margin-top:100px; }
.ks-panel:focus-visible { outline:2px solid var(--leaf); outline-offset:8px; }
.ks-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.ks-section-heading h2 { font:normal clamp(1.6rem,3vw,2rem)/1.2 var(--serif); margin:0 0 8px; }
.ks-section-heading p { margin:0; color:var(--muted); font-size:.875rem; line-height:1.65; }
.ks-section-heading > span { font-size:.8125rem; color:var(--muted); flex-shrink:0; }
.ks-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 25px; }
.ks-recipe { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:transparent; }
.ks-recipe--editorial { border-color:var(--editorial-line,#c4ad73); }
.ks-recipe-media { position:relative; aspect-ratio:1.55; background:var(--sage); overflow:hidden; }
.ks-recipe-media > a { display:block; height:100%; }
.ks-recipe-media img { width:100%; height:100%; object-fit:var(--recipe-image-fit,cover); object-position:var(--recipe-image-x,50%) var(--recipe-image-y,50%); }
.ks-save { position:absolute; top:12px; right:12px; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--leaf); background:var(--paper); }
.ks-save:hover { background:var(--sage); }
.ks-private { position:absolute; bottom:12px; left:12px; display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:7px; background:var(--paper); font-size:.75rem; color:var(--leaf); }
.ks-recipe-copy { display:flex; flex:1; flex-direction:column; padding:20px 20px 10px; }
.ks-recipe-category { color:var(--leaf); font-size:.75rem; margin:0 0 9px; }
.ks-recipe--editorial .ks-recipe-category { color:var(--editorial-gold,#876524); }
.ks-recipe h3 { font:normal 1.6rem/1.2 var(--serif); letter-spacing:-.025em; margin:0 0 15px; hyphens:auto; overflow-wrap:break-word; }
.ks-recipe h3 a { color:var(--ink); }
.ks-recipe-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--muted); font-size:.8125rem; margin-top:auto; }
.ks-recipe-meta span { display:inline-flex; align-items:center; gap:5px; }
.ks-author { color:var(--muted); font-size:.8125rem; margin:10px 0 0; align-self:flex-start; }
.ks-author:hover { color:var(--leaf); text-decoration:underline; }
.ks-recipe-actions { display:flex; justify-content:space-between; gap:12px; padding-top:8px; margin-top:16px; border-top:1px solid var(--line); }
.ks-recipe-actions button { display:flex; align-items:center; gap:8px; background:transparent; border:0; border-radius:7px; min-height:44px; padding:8px 0; color:var(--leaf); font-size:.875rem; }
.ks-recipe-actions button:last-child { justify-content:center; min-width:44px; }
.ks-recipe-actions button:hover { background:var(--sage); }
.ks-empty { grid-column:1/-1; display:flex; align-items:center; text-align:center; flex-direction:column; padding:42px 24px; border-radius:14px; background:var(--sage); }
.ks-empty > svg { height:26px; width:26px; color:var(--leaf); margin-bottom:20px; }
.ks-empty h3 { font:normal 1.7rem/1.25 var(--serif); margin:0 0 12px; }
.ks-empty p { color:var(--muted); max-width:440px; font-size:1rem; line-height:1.65; margin:0 0 24px; }
.ks-more { display:flex; flex-direction:column; align-items:center; gap:14px; padding-top:32px; }
.ks-more > span { font-size:.8125rem; color:var(--muted); }
@media (max-width:950px) { .ks-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .kitchen-studio { padding:28px 20px 70px; }
  .ks-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .ks-tools { gap:6px 20px; padding:16px 0 22px; }
  .ks-tools a { font-size:.875rem; }
  .ks-tabs { gap:14px; }
  .ks-tabs button { gap:6px; font-size:.875rem; flex:1; flex-wrap:wrap; }
  .ks-tabs button > svg { display:none; }
  .ks-section-heading { align-items:flex-start; flex-wrap:wrap; gap:8px; }
  .ks-section-heading > span { font-size:.8125rem; }
  .ks-grid { grid-template-columns:1fr; gap:24px; }
  .ks-recipe-media { aspect-ratio:1.7; }
  .ks-empty { padding:32px 20px; }
}

/* styles/lesson-studio.css */
.lesson-studio { max-width:1200px; padding:32px 32px 75px; color:var(--ink); }
.lesson-studio .kicker { font-size:.75rem; }
.lesson-breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 32px; font-size:.875rem; align-items:center; }
.lesson-breadcrumbs a { display:flex; align-items:center; gap:8px; color:var(--leaf); min-height:44px; }
.lesson-breadcrumbs a:first-child svg { transform:rotate(180deg); }
.lesson-breadcrumbs > span { color:var(--muted); }
.lesson-heading { padding:0 0 35px; border-bottom:1px solid var(--line); }
.lesson-heading--illustrated { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:55px; align-items:center; }
.lesson-heading h1 { font:normal clamp(2.35rem,4.7vw,3.75rem)/1.1 var(--serif); letter-spacing:-.045em; margin:14px 0 20px; hyphens:auto; overflow-wrap:break-word; text-wrap:balance; }
.lesson-summary { max-width:640px; font-size:1.0625rem; line-height:1.8; color:var(--muted); margin:0 0 22px; }
.lesson-meta { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }
.lesson-meta > span { display:flex; align-items:center; gap:7px; font-size:.875rem; color:var(--muted); }
.lesson-save { display:flex; align-items:center; gap:8px; padding:10px 12px; min-height:44px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--leaf); font-size:.875rem; }
.lesson-save:hover,.lesson-save.is-active { background:var(--sage); }
.lesson-heading figure { margin:0; border-radius:14px; overflow:hidden; background:var(--sage); }
.lesson-heading img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; }
.lesson-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:60px; padding-top:40px; }
.lesson-outline { align-self:start; position:sticky; top:110px; }
.lesson-outline nav { display:grid; gap:5px; margin:0; }
.lesson-outline a { display:flex; gap:10px; align-items:baseline; color:var(--muted); font-size:.875rem; line-height:1.5; padding:12px 0; border-bottom:1px solid var(--line); }
.lesson-outline a:hover { color:var(--leaf); }
.lesson-outline a span { font-size:.75rem; color:var(--leaf); }
.lesson-reading { width:100%; max-width:700px; min-width:0; }
.lesson-reading:only-child { grid-column:1/-1; margin:auto; }
.lesson-chapter { scroll-margin-top:110px; padding-bottom:34px; margin-bottom:30px; border-bottom:1px solid var(--line); }
.lesson-chapter:last-child { border-bottom:0; }
.lesson-chapter header { display:flex; align-items:baseline; gap:16px; margin-bottom:17px; }
.lesson-chapter header > span { color:var(--leaf); font-size:.8125rem; }
.lesson-chapter h2 { font:normal clamp(1.6rem,3vw,1.95rem)/1.25 var(--serif); margin:0; letter-spacing:-.03em; }
.lesson-chapter p { font-size:1.0625rem; line-height:1.9; margin:0 0 18px; color:var(--ink); hyphens:auto; overflow-wrap:break-word; }
.lesson-chapter p:last-child { margin-bottom:0; }
.lesson-sources { scroll-margin-top:110px; padding:0 0 30px; }
.lesson-sources h2 { font:normal 1.45rem/1.3 var(--serif); margin:0 0 16px; }
.lesson-sources ul { padding:0; margin:0; display:grid; gap:12px; list-style:none; }
.lesson-sources a { display:inline-flex; gap:8px; align-items:baseline; font-size:.875rem; line-height:1.7; color:var(--leaf); text-decoration:underline; text-underline-offset:4px; }
.lesson-sources svg { flex-shrink:0; transform:rotate(-45deg); }
.lesson-source-note { margin:5px 0 8px; color:var(--muted); font-size:.8125rem; line-height:1.6; }
.recipe-method-note { margin:0 0 24px; color:var(--muted); font-size:.875rem; line-height:1.65; max-width:65ch; }
.recipe-method-note a { color:var(--leaf); text-decoration:underline; text-underline-offset:3px; }
.lesson-related { border-top:1px solid var(--line); padding-top:32px; margin-top:12px; }
.lesson-related h2 { font:normal 2rem/1.2 var(--serif); margin:10px 0 24px; }
.lesson-related > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.lesson-related a { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 0; border-top:1px solid var(--line); color:var(--leaf); }
.lesson-related span { font-size:.75rem; }
.lesson-related h3 { color:var(--ink); font:normal 1.4rem/1.35 var(--serif); margin:8px 0 0; hyphens:auto; }
.lesson-related a > svg { flex-shrink:0; }
.lesson-footer { display:flex; align-items:center; flex-wrap:wrap; gap:20px 30px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.lesson-footer a { display:inline-flex; align-items:center; gap:8px; color:var(--leaf); font-size:.875rem; min-height:44px; }
.lesson-footer .button { border-radius:10px; }
.lesson-footer small { color:var(--muted); font-size:.8125rem; }
.lesson-empty { padding:30px 0; }
.lesson-apply { padding:18px 0; border-top:1px solid var(--line); }
.lesson-apply h2 { font:normal 1.45rem/1.3 var(--serif); margin:0 0 10px; }
.lesson-apply a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--leaf); text-decoration:underline; text-underline-offset:4px; }
.lesson-studio--compact { max-width:860px; }
.lesson-studio--compact .lesson-heading { padding-bottom:24px; }
.lesson-studio--compact .lesson-heading h1 { font-size:clamp(2rem,4vw,3rem); }
.lesson-studio--compact .lesson-layout { display:block; padding-top:28px; }
.lesson-studio--compact .lesson-reading { max-width:none; }
.lesson-studio--compact .lesson-chapter { padding-bottom:20px; margin-bottom:20px; }
.lesson-studio--compact .lesson-chapter header { gap:12px; margin-bottom:10px; }
.lesson-studio--compact .lesson-chapter h2 { font-size:1.4rem; }
.lesson-studio--compact .lesson-chapter p { font-size:1rem; line-height:1.8; }
.lesson-studio--compact .lesson-related > div { grid-template-columns:1fr; gap:0; }
.learning-quiz-controls { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:20px; }
.learning-quiz-controls fieldset { display:flex; flex-wrap:wrap; gap:4px; padding:0; margin:0; border:0; min-width:0; }
.learning-quiz-controls legend { padding:0; margin-bottom:6px; color:var(--muted); font-size:.75rem; }
.learning-quiz-controls button { min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-size:.8125rem; cursor:pointer; }
.learning-quiz-controls button[aria-pressed="true"] { background:var(--leaf); border-color:var(--leaf); color:var(--paper,#fff); }
.learning-quiz-controls button:focus-visible { outline:3px solid var(--coral,#d65c45); outline-offset:3px; }
.learning-quiz-controls > p { flex-basis:100%; margin:0; color:var(--muted); font-size:.8125rem; line-height:1.6; }
/* Answers advance immediately; the last explanation stays available without a timer. */
.learning-studio .ls-feedback { background:transparent; border:0; border-left:2px solid var(--line); border-radius:0; padding:4px 0 4px 18px; margin:0 0 22px; }
.learning-studio .ls-feedback.is-correct { margin:22px 0 0; border-left-color:var(--leaf); }
.learning-studio .ls-feedback .kicker { font-size:.75rem; margin-bottom:8px; }
.learning-studio .ls-feedback > p:not(.kicker) { font-size:.9375rem; line-height:1.7; margin:0 0 8px; }
.learning-studio .ls-feedback details { margin-top:10px; font-size:.8125rem; color:var(--muted); }
.learning-studio .ls-feedback summary { cursor:pointer; padding:6px 0; color:var(--leaf); }
.learning-studio .ls-feedback details p { margin:10px 0; }
.learning-studio .ls-feedback a { color:var(--leaf); text-decoration:underline; }
@media (max-width:900px) {
  .lesson-heading--illustrated { grid-template-columns:minmax(0,1fr) 210px; gap:30px; }
  .lesson-layout { grid-template-columns:180px minmax(0,1fr); gap:30px; }
}
@media (max-width:650px) {
  .lesson-studio { padding:20px 20px 65px; }
  .lesson-breadcrumbs { margin-bottom:18px; }
  .lesson-heading--illustrated { grid-template-columns:1fr; gap:24px; }
  .lesson-heading figure { max-width:320px; }
  .lesson-heading img { aspect-ratio:16/9; }
  .lesson-heading h1 { font-size:2.4rem; }
  .lesson-layout { grid-template-columns:1fr; gap:30px; padding-top:26px; }
  .lesson-outline { position:static; }
  .lesson-outline nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
  .lesson-outline a { font-size:.875rem; }
  .lesson-chapter { padding-bottom:28px; margin-bottom:25px; }
  .lesson-chapter p { font-size:1rem; line-height:1.85; }
  .lesson-related > div { grid-template-columns:1fr; gap:0; }
  .lesson-footer { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  .kitchen-studio *,.lesson-studio * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Library search shares the topic control's quiet light/dark treatment. */
.learning-studio .learning-library-controls { align-items: end; flex-wrap: wrap; }
.learning-studio .learning-library-search { flex: 1 1 280px; min-width: 0; }
.learning-studio .learning-library-search input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.learning-studio .learning-library-search input:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.learning-studio .learning-library-count { margin: -12px 0 16px; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .learning-studio .learning-library-controls { align-items: stretch; }
  .learning-studio .learning-library-controls .learning-topic-filter { flex: 1 1 100%; width: 100%; }
  .learning-studio .learning-topic-filter select { width: 100%; }
}
.learning-paths { margin-block: 40px; }
.learning-paths, .learning-articles { scroll-margin-top:110px; }
.learning-paths__grid small { display:block; color:var(--muted); font-size:.8125rem; }
.learning-paths__grid .learning-path-start { display:flex; width:fit-content; min-height:44px; margin:8px 0; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.lesson-path-context { margin:24px 0 0; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--sage); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; }
.lesson-path-context h2 { margin:6px 0 0; font:normal 1.5rem/1.3 var(--serif); }
.lesson-path-context .kicker { margin:0; }
.lesson-path-context > a { color:var(--leaf); font-size:.875rem; min-height:44px; display:flex; align-items:center; text-decoration:underline; text-underline-offset:4px; }
.lesson-path-context ol { flex-basis:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; list-style:none; padding:0; margin:0; }
.lesson-path-context li { min-width:0; }
.lesson-path-context li a { display:flex; align-items:center; gap:10px; height:100%; min-height:52px; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper); font-size:.875rem; line-height:1.5; }
.lesson-path-context li span { flex-shrink:0; color:var(--leaf); font-weight:700; }
.lesson-path-context a[aria-current="step"] { border:2px solid var(--leaf); font-weight:700; }
.lesson-path-next { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:24px 0; border-top:1px solid var(--line); }
.lesson-path-next a { display:inline-flex; align-items:center; gap:10px; min-height:44px; }
.lesson-path-next > a:not(.button) { color:var(--leaf); }
.lesson-path-next > a:not(.button) svg { transform:rotate(180deg); }
.lesson-practice { padding:24px; margin:0 0 32px; border:1px solid var(--line); border-radius:16px; background:var(--sage); }
.lesson-practice h2 { margin:8px 0 16px; font:normal 1.6rem/1.25 var(--serif); }
.lesson-practice > p { line-height:1.8; margin:0 0 16px; }
.lesson-practice dl { margin:0; }
.lesson-practice dl > div { padding:16px 0; border-top:1px solid var(--line); }
.lesson-practice dt { display:flex; align-items:center; gap:8px; font-weight:700; font-size:.875rem; }
.lesson-practice dd { margin:8px 0 0; line-height:1.7; }
.lesson-practice .lesson-practice-note { font-size:.8125rem; color:var(--muted); margin:0; }
.lesson-path-context a:focus-visible,.lesson-path-next a:focus-visible,.learning-paths a:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
@media(max-width:640px) {
  .lesson-path-context { padding:16px; }
  .lesson-path-context ol { grid-template-columns:1fr; }
  .lesson-path-context li a { min-height:44px; padding:9px 12px; }
  .lesson-practice { padding:20px; }
  .lesson-path-next { align-items:stretch; flex-direction:column; }
  .lesson-path-next > span:empty { display:none; }
  .lesson-path-next .button { justify-content:center; }
}
.learning-paths__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.learning-paths__grid article { border:1px solid var(--line); border-radius:16px; padding:22px; min-width:0; }
.learning-paths__grid h3 { margin:0 0 8px; font-size:23px; }
.learning-paths__grid p { color:var(--muted); line-height:1.6; margin:0 0 12px; }
.learning-paths__grid ol { margin:0; padding-left:22px; }
.learning-paths__grid li { padding:4px 0; }
.learning-paths__grid a { display:inline-flex; align-items:center; gap:8px; min-height:40px; color:var(--leaf); }
.learning-paths__grid svg { width:14px; height:14px; flex-shrink:0; }
.learning-preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px; }
@media(max-width:640px) { .learning-paths__grid { grid-template-columns:1fr; } }

/* Reviewed lesson photography: a clear view of the cooking context, no overlays. */
.knowledge-photo { margin:0; min-width:0; }
.learning-studio .knowledge-photo img,.lesson-heading .knowledge-photo img,.seo-knowledge-prerender .knowledge-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; margin:0; border-radius:0; }
.knowledge-photo figcaption { color:var(--muted); font-size:12px; line-height:1.55; font-weight:400; }
.learning-studio .knowledge-card--photo > a > .knowledge-photo { margin:-24px -24px 22px; flex-shrink:0; }
.learning-studio .knowledge-photo--card figcaption { padding:10px 24px; border-bottom:1px solid var(--line); }
.learning-studio .knowledge-card--photo .ls-lesson-topic { margin-bottom:10px; padding:0; }
.learning-studio .knowledge-card--photo:has(.knowledge-favorite) footer { padding-right:54px; min-height:44px; }
.learning-studio .knowledge-card--photo .knowledge-favorite { top:auto; right:18px; bottom:22px; width:44px; height:44px; }
.lesson-studio--compact.lesson-studio--photographic { max-width:1200px; }
.lesson-studio--compact.lesson-studio--photographic .lesson-reading { max-width:780px; margin-inline:auto; }
.lesson-heading--photo { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center; }
.lesson-heading--photo > div { min-width:0; }
.lesson-heading .knowledge-photo--hero { border-radius:0; overflow:visible; background:transparent; }
.lesson-heading .knowledge-photo--hero img,.seo-knowledge-prerender .knowledge-photo--hero img { border-radius:14px; }
.knowledge-photo--hero figcaption { margin-top:10px; }
.seo-knowledge-prerender .knowledge-photo--hero { max-width:900px; margin:28px auto 36px; }
@media(max-width:1000px) {
  .learning-studio .knowledge-card--photo > a > .knowledge-photo { margin:-20px -20px 20px; }
  .learning-studio .knowledge-photo--card figcaption { padding-inline:20px; }
  .learning-studio .knowledge-card--photo .knowledge-favorite { bottom:20px; right:14px; }
}
@media(max-width:760px) {
  .lesson-heading--photo { grid-template-columns:1fr; gap:24px; }
  .lesson-heading .knowledge-photo--hero { max-width:none; }
  .lesson-heading .knowledge-photo--hero img { aspect-ratio:3/2; }
}

/* styles/recipe-information.css */
/* Recipe information: close to the image, calm typography, no nested card stack. */
.detail-page .detail-hero__grid { grid-template-rows: auto; }
.detail-hero__media { grid-column: 2; grid-row: 1; min-width: 0; align-self: start; }
.recipe-tips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipe-photo-note { padding: 0; margin: 0; color: var(--ink); }
.recipe-photo-note__disclosure { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .8125rem; margin: .75rem 0 1rem; }
.recipe-photo-note__disclosure svg { width: 1rem; height: 1rem; flex: none; }
.recipe-photo-note__invite { display: flex; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.recipe-photo-note__invite b { font-size: 1rem; }
.recipe-photo-note__invite p { color: var(--muted); font-size: .875rem; line-height: 1.6; margin: .35rem 0 0; }
.recipe-photo-note__invite .button { flex: none; font-size: .875rem; min-height: 44px; white-space: nowrap; }
.nutrition-card.nutrition-studio { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding-top: 2rem; padding-bottom: 2rem; gap: 1.75rem; box-shadow: none; }
.nutrition-studio > header h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.nutrition-studio > header > p:last-child { font-size: .875rem; line-height: 1.65; }
.nutrition-studio__body { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr); gap: 2rem; }
.nutrition-studio h3 { font-family: inherit; font-weight: 650; font-size: .9375rem; line-height: 1.5; margin-bottom: 1.25rem; }
.nutrition-studio dl.nutrition-studio__main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.nutrition-studio dl div { padding: 0; border: 0; min-width: 0; }
.nutrition-studio dt { font-size: .875rem; line-height: 1.5; }
.nutrition-studio dd { font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.4; font-weight: 700; margin-top: .25rem; overflow-wrap: anywhere; }
.nutrition-studio dd span { font-size: .875rem; font-weight: 500; }
.nutrition-studio dl small { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.55; margin-top: .25rem; }
.nutrition-studio .nutrition-energy dd { color: var(--green); }
.nutrition-studio dl.nutrition-studio__additional { display: flex; gap: 2rem; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1rem; }
.nutrition-studio__additional > div { display: flex; align-items: baseline; gap: .6rem; }
.nutrition-studio__unavailable { color: var(--muted); font-size: .8125rem; line-height: 1.65; margin: 1rem 0 0; }
.nutrition-studio__unavailable b { color: var(--ink); }
.nutrition-studio .nutrition-studio__additional dd { font-size: 1rem; margin: 0; }
.nutrition-studio__allergens { border-left: 1px solid var(--line); padding-left: 2rem; }
.nutrition-studio__allergens ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.nutrition-studio__allergens li { border: 1px solid color-mix(in srgb, var(--coral) 40%, var(--line)); background: color-mix(in srgb, var(--coral) 7%, transparent); border-radius: 6px; padding: .35rem .6rem; font-size: .875rem; font-weight: 600; }
.nutrition-studio__allergens p { font-size: .875rem; color: var(--muted); line-height: 1.65; margin: 0; }
.nutrition-studio footer { font-size: .8125rem; line-height: 1.65; border-color: var(--line); gap: .75rem; }
.nutrition-studio__source { margin: 0; }
.nutrition-studio footer, .nutrition-studio__foods span { min-width: 0; overflow-wrap: anywhere; }
.nutrition-studio summary { font-size: .875rem; min-height: 44px; display: list-item; align-content: center; cursor: pointer; }
.nutrition-studio__foods ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.nutrition-studio__foods li { display: flex; gap: 1rem; }
.nutrition-studio__foods code { flex: none; }
.theme-dark .nutrition-card.nutrition-studio { background: transparent; border-color: var(--line); }
.theme-dark .nutrition-studio .nutrition-energy dd { color: var(--ink); }
.daily-quiz-quest { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1.25rem; }
.daily-quiz-quest > div { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: space-between; align-items: center; font-size: .875rem; }
.daily-quiz-quest b { display: flex; align-items: center; gap: .4rem; }
.daily-quiz-quest svg { width: 1rem; }
.daily-quiz-quest > div > span { color: var(--green); font-weight: 700; }
.daily-quiz-quest progress { display: block; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 9px; margin: 1rem 0 .6rem; overflow: hidden; background: var(--line); accent-color: var(--green); }
.daily-quiz-quest progress::-webkit-progress-bar { background: var(--line); border-radius: 9px; }
.daily-quiz-quest progress::-webkit-progress-value { background: var(--green); border-radius: 9px; }
.daily-quiz-quest progress::-moz-progress-bar { background: var(--green); border-radius: 9px; }
.daily-quiz-quest p { font-size: .875rem; margin: .5rem 0; }
.daily-quiz-quest small { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.theme-dark .daily-quiz-quest > div > span { color: var(--ink); }
@media (max-width: 1000px) { .recipe-photo-note__invite { align-items: flex-start; flex-direction: column; } }
@media (max-width: 900px) { .detail-hero__media { grid-column: 1; grid-row: auto; } .nutrition-studio__body { grid-template-columns: 1fr; gap: 1.5rem; } .nutrition-studio__allergens { border: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; } }
@media (max-width: 600px) { .recipe-tips__grid { grid-template-columns: 1fr; } .nutrition-studio dl.nutrition-studio__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; } .nutrition-studio__foods li { flex-direction: column; gap: .1rem; } }

/* styles/audit-refinements.css */
/* September usability pass: scoped refinements, shared light/dark tokens. */
.ks-filters { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:20px; margin:24px 0 0; }
.ks-filters label,.recipe-preferences label { display:grid; gap:8px; font-size:13px; color:var(--muted); min-width:0; }
.ks-filters input,.ks-filters select,.recipe-preferences input { width:100%; min-height:44px; border:1px solid var(--line); border-radius:10px; padding:10px 14px; color:var(--ink); background:var(--surface); font:inherit; }
.recipe-preferences { margin-top:18px; border-top:1px solid var(--line); padding-top:8px; }
.recipe-preferences summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:13px; color:var(--leaf); gap:10px; }
.recipe-preferences summary::after { content:'+'; margin-left:auto; font-size:20px; }
.recipe-preferences[open] summary::after { content:'−'; }
.recipe-preferences > div { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:10px; }
.recipe-preferences > p { font-size:12px; line-height:1.65; color:var(--muted); max-width:95ch; }
.recipe-card.social-card h3 { min-height:0; font-size:25px; line-height:1.2; margin-bottom:12px; }
.recipe-card.social-card .recipe-card__body > p { min-height:0; -webkit-line-clamp:2; line-height:1.6; margin-bottom:16px; }
.recipe-card.social-card .recipe-card__body { padding:18px 20px 12px; }
.recipe-card.social-card .social-actions { margin-top:16px; padding-top:10px; }
.recipe-card.social-card .author-line { margin-bottom:16px; }
.recipe-card .social-actions--compact .social-views { display:none; }
.recipe-card .social-actions--compact .social-button { min-width:40px; min-height:44px; }
.recipe-card .social-actions--compact .social-button--save { margin-left:auto; background:var(--quiet-surface); }
.detail-page .detail-author { margin:16px 0; min-height:44px; }
.detail-page .detail-author span { text-align:left; }
.detail-page .detail-author small { font-size:11px; color:var(--muted); }
.detail-page .detail-meta { padding:18px 0; gap:12px 20px; border-bottom:1px solid var(--line); font-weight:500; }
.detail-page .detail-meta > span:first-child { color:var(--ink); font-weight:750; }
.detail-page .detail-hero__links { padding:12px 0; margin:8px 0; align-items:center; }
.detail-page .detail-hero__links a { min-height:44px; display:inline-flex; align-items:center; }
.detail-page .owner-actions { flex-wrap:wrap; gap:8px 18px; padding-top:12px; }
.servings-control button { width:44px; height:44px; flex:0 0 44px; }
.servings-control { gap:5px; }
.ingredients-card__controls { flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ingredients-card .servings-label { margin-top:8px; }
.step-detail-switch::after { content:''; position:absolute; inset:-10px -4px; }
.step-detail-switch { position:relative; }
.ls-feedback--previous { margin-bottom:16px; padding:0; border:1px solid var(--line); background:var(--quiet-surface); border-radius:12px; }
.ls-feedback--previous > summary { min-height:48px; display:flex; gap:9px; align-items:center; cursor:pointer; padding:12px 16px; font-size:13px; color:var(--leaf); }
.ls-feedback--previous > summary > span { margin-left:auto; font-size:12px; color:var(--muted); }
.ls-feedback--previous > div { padding:0 18px 18px; color:var(--ink); font-size:14px; line-height:1.65; }
.ls-feedback--previous a { text-decoration:underline; text-underline-offset:3px; }
.cosmetic-card.cosmetic-card--banner { grid-template-columns:1fr; gap:10px; }
.cosmetic-card.cosmetic-card--banner .cosmetic-art { width:100%; height:auto; min-height:0; aspect-ratio:3 / 1; }
.cosmetic-card b { white-space:normal; overflow:visible; text-overflow:clip; font-size:13px; line-height:1.4; }
.cosmetic-preview-back { display:none; }
.cosmetic-profile-preview { border-radius:12px; border:1px solid var(--line); overflow:hidden; background:var(--quiet-surface); margin-bottom:18px; }
.cosmetic-profile-preview > span:not(.cosmetic-art) { display:block; padding:14px; color:var(--ink); font-weight:650; font-size:14px; }
.cosmetic-profile-preview--banner .cosmetic-preview__art { width:100%; height:auto!important; min-height:0; aspect-ratio:3 / 1; border-radius:0; margin-bottom:0; }
.cosmetic-profile-preview--avatar { padding-top:22px; text-align:center; }
.cosmetic-profile-preview--avatar .cosmetic-preview__art { width:110px; height:110px!important; border-radius:50%; margin:0 auto; }
.cosmetic-preview .button { width:100%; }
.cosmetic-preview .button--primary { background:var(--leaf); color:var(--paper); box-shadow:none; }
.editor-studio .image-dropzone { min-height:130px; }
.editor-studio .image-dropzone__empty { padding:18px; }
.editor-studio .image-dropzone__preview img { max-height:150px; object-fit:contain; }
.editor-studio .profile-banner-editor--locked { padding:18px; border:1px solid var(--line); background:var(--quiet-surface); box-shadow:none; }
.editor-studio .profile-banner-editor--locked h3 { font-size:21px; }
.editor-studio .profile-banner-editor--locked p { font-size:13px; line-height:1.6; }
.ps-aside .ps-creator { background:transparent; border-top:1px solid var(--line); padding:20px 0 0; }
.ps-aside .ps-creator h2 { font-size:23px; }
.support-legal-fields[hidden],.support-photo-field[hidden] { display:none!important; }
@media(max-width:900px) {
  .cosmetic-shop__layout .cosmetic-preview { display:none; grid-row:auto; position:static; }
  .cosmetic-shop__layout.has-preview .cosmetic-preview { display:block; }
  .cosmetic-shop__layout.has-preview .cosmetic-grid { display:none; }
  .cosmetic-preview-back { display:inline-flex; min-height:44px; margin-bottom:14px; }
  .cosmetic-grid { max-height:none; }
  .cosmetic-preview { scroll-margin-top:20px; }
}
@media(max-width:600px) {
  .ks-filters { grid-template-columns:1fr; gap:14px; }
  .recipe-preferences > div { grid-template-columns:1fr; }
  .learning-studio .ls-intro { padding:25px 0 22px; }
  .learning-studio .ls-intro h1 { font-size:38px; margin:8px 0 12px; }
  .learning-studio .ls-intro > p:not(.kicker) { font-size:14px; line-height:1.6; margin-bottom:12px; }
  .learning-studio .ls-intro nav { gap:12px; margin-top:12px; }
  .learning-studio .ls-quiz { padding:24px 0 34px; gap:14px; }
  .learning-studio .ls-quiz-heading > .kicker,.learning-studio .ls-quiz-heading > h2,.learning-studio .ls-quiz-heading > p { display:none; }
  .learning-studio .learning-count { margin:0 0 5px; display:flex; flex-wrap:wrap; gap:8px 16px; }
  .learning-studio .daily-quiz-quest { padding:12px 14px; margin:12px 0 0; }
  .learning-studio .daily-quiz-quest small { font-size:11px; }
  .learning-studio .daily-quiz-quest progress { margin:6px 0; }
  .ls-feedback--previous > summary { flex-wrap:wrap; }
  .ls-feedback--previous > summary > span { margin-left:25px; }
  .cosmetic-shop__header h2 { font-size:32px; }
  .cosmetic-shop__header { gap:12px; }
  .cosmetic-shop__balance { display:flex; align-items:center; justify-content:flex-start; gap:8px; padding:10px 14px; }
  .cosmetic-shop__balance small { font-size:12px; }
  .cosmetic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cosmetic-card { grid-template-columns:1fr; justify-items:start; padding:12px; }
  .cosmetic-card .cosmetic-art { width:64px; height:64px; }
  .cosmetic-profile-preview--banner .cosmetic-preview__art { height:auto!important; }
  .ingredients-card__header { flex-wrap:wrap; }
  .ingredients-card__controls { margin-left:auto; }
  .detail-page .detail-meta { gap:12px 16px; font-size:13px; }
  .detail-page .detail-hero__links { flex-wrap:wrap; }
  .community-composer__switch { display:grid; grid-template-columns:1fr 1fr; }
  .community-composer__switch button { min-width:0; gap:6px; padding:10px 4px; font-size:12px; min-height:44px; }
  .community-composer__switch svg { flex-shrink:0; }
}

/* styles/funding.css */
/* Quiet placements, visibly separated from recipe actions. Never crop Google ads. */
.timeline-ad-slot { align-self: start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; overflow: visible; padding: 18px; min-width: 0; }
.timeline-ad-slot[hidden] { display: none !important; }
.recipe-browser-results > .timeline-ad-slot { grid-column: auto; margin: 0; }
.timeline-ad-slot__heading { margin: 0 0 18px; }
.timeline-ad-slot__heading > span { background: transparent; border: 0; border-radius: 0; color: var(--muted); font-size: 12px; letter-spacing: .06em; padding: 0; }
.timeline-ad-slot > .adsbygoogle { display: block; min-height: 0; width: 100%; overflow: visible; border-radius: 0; background: transparent; }
.timeline-ad-slot--detail { margin: 40px auto !important; }
.detail-page > .timeline-ad-slot { max-width: 420px; width: min(calc(100% - 40px),420px); }
.ad-placement-preview { min-height: 250px; display: grid; place-content: center; gap: 12px; text-align: center; border: 1px dashed var(--line); padding: 24px; }
.ad-placement-preview p { max-width: 26ch; font-size: 13px; color: var(--muted); }
.support-campaign { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 72px; border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px,4vw,48px); background: var(--sage); margin: 12px 0 40px; }
.legal-document section[id] { scroll-margin-top: 110px; }
.support-campaign__copy h2, .support-campaign__amount strong, .support-campaign__pending { color: var(--ink); }
.support-campaign__copy h2 { font: 400 clamp(30px,3.5vw,44px)/1.1 var(--serif); margin: 12px 0 18px; letter-spacing: -.035em; }
.support-campaign__copy h2 em { color: var(--leaf); }
.support-campaign__copy > p:last-child { max-width: 47ch; line-height: 1.7; color: var(--muted); font-size: 15px; }
.support-campaign__fund { align-self: center; min-width: 0; }
.support-campaign__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.support-campaign__amount strong { font: 400 38px/1.2 var(--serif); letter-spacing: -.025em; }
.support-campaign__amount span { color: var(--muted); font-size: 13px; }
.support-campaign progress { display: block; appearance: none; border: 0; background: var(--line); border-radius: 20px; width: 100%; height: 7px; margin: 16px 0; overflow: hidden; }
.support-campaign progress::-webkit-progress-bar { background: var(--line); border-radius: 20px; }
.support-campaign progress::-webkit-progress-value { background: var(--leaf); border-radius: 20px; }
.support-campaign progress::-moz-progress-bar { background: var(--leaf); border-radius: 20px; }
.support-campaign__status { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.support-campaign__status svg { width: 16px; flex: 0 0 16px; color: var(--leaf); }
.support-campaign__pending { font-size: 14px; font-weight: 650; line-height: 1.55; margin: 0 0 8px; }
.support-campaign__fund > small { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); }
.support-campaign__details { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--leaf); }
.support-campaign__details svg { width: 16px; }
.support-campaign__note { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.theme-dark .support-campaign { background: #1b2a21; border-color: #3b4e40; }
.theme-dark .timeline-ad-slot { background: #1b2a21; border-color: #3b4e40; }
.support-campaign--pending { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 40px; padding: 24px 28px; border-radius: 16px; }
.support-campaign--pending .support-campaign__copy h2 { font-size: clamp(26px, 3vw, 34px); margin: 4px 0 8px; }
.support-campaign--pending .support-campaign__copy .kicker { margin-bottom: 8px; }
.support-campaign--pending .support-campaign__copy > p:last-child { font-size: 14px; margin-bottom: 0; }
.support-campaign--pending .support-campaign__amount strong { font-size: 30px; }
.support-campaign--pending .support-campaign__status { margin-bottom: 0; }
.support-campaign__transparency { grid-column: 1 / -1; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.65; }
.support-campaign__transparency > summary { color: var(--leaf); cursor: pointer; min-height: 44px; padding-top: 12px; font-weight: 650; }
.support-campaign__transparency > summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
.support-campaign__transparency > div { max-width: 82ch; padding-top: 10px; }
.support-campaign__transparency p { margin-bottom: 10px; }
.support-campaign__transparency small { display: block; font-size: 12px; }
@media (max-width: 700px) { .support-campaign { grid-template-columns: 1fr; gap: 26px; } .legal-document section[id] { scroll-margin-top: 110px; }
.support-campaign__copy h2, .support-campaign__amount strong, .support-campaign__pending { color: var(--ink); }
.support-campaign__copy h2 { font-size: 34px; } }
@media print { #support-campaign-host, .timeline-ad-slot { display: none !important; } }

/* styles/quality-preview.css */
/* Local quality pass: preserve the established palette and profile layout. */
.recipes-hub.recipe-browser-page { padding-top: 34px; }
.recipes-hub .recipe-browser-page__intro { align-items: center; gap: 24px; margin: 0 0 24px; padding: 0; max-width: none; }
.recipes-hub .recipe-browser-page__intro h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.08; margin: 0 0 10px; }
.recipes-hub .recipe-browser-page__intro p { font-size: 14px; line-height: 1.6; margin: 0; }
.recipes-hub .recipe-browser-page__intro > .button { flex-shrink: 0; margin-bottom: 0; }
.recipes-hub .recipe-browser--compact { background: transparent; border: 0; border-radius: 0; box-shadow: none; gap: 12px; padding: 0; margin: 0 0 24px; }
.recipe-browser__primary { display: grid; grid-template-columns: minmax(0, 1fr) 205px; gap: 14px; align-items: end; }
.recipe-browser__primary > .recipe-browser-control > span { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.recipe-browser__primary select { min-height: 50px; font-size: 13px; background-color: var(--paper); border-color: var(--line); }
.recipe-browser--compact .recipe-browser__search { background: var(--quiet-surface); border-color: var(--line); margin-bottom: 0; min-height: 50px; }
.recipe-browser--compact .recipe-browser__search input { font-size: 15px; min-height: 50px; }
.recipe-browser__quick { display: flex; gap: 8px; flex-wrap: wrap; }
.recipe-quick-filter { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); min-height: 44px; padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.recipe-quick-filter svg { width: 16px; height: 16px; color: var(--leaf); }
.recipe-quick-filter[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: var(--paper); }
.recipe-quick-filter[aria-pressed="true"] svg { color: inherit; }
.recipe-browser__advanced { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.recipe-browser__advanced > summary { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 42px; cursor: pointer; color: var(--leaf); font-size: 13px; font-weight: 700; list-style: none; }
.recipe-browser__advanced > summary::-webkit-details-marker { display: none; }
.recipe-browser__advanced > summary::after { content: '+'; font-size: 18px; font-weight: 400; }
.recipe-browser__advanced[open] > summary::after { content: '−'; }
.recipe-browser__advanced > summary > span { font-size: 11px; font-weight: 500; color: var(--muted); }
.recipes-hub .recipe-browser__advanced .recipe-browser__filters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 10px 0 0; }
.recipe-browser__advanced .recipe-browser-control:last-child { grid-column: span 2; }
.recipe-browser__advanced .recipe-browser-control select,
.recipe-browser__advanced .recipe-browser-control input { color: var(--ink); background-color: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 30px 10px 12px; min-height: 44px; min-width: 0; width: 100%; font-size: 13px; }
.recipe-browser__advanced .recipe-browser-control > span { color: var(--muted); font-size: 10px; }
.recipe-browser__caution { max-width: 76ch; margin: 14px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.recipe-browser--compact .recipe-browser__heading { align-items: center; gap: 12px; min-height: 30px; margin-bottom: 0; }
.recipe-browser--compact .recipe-browser__heading > p { margin: 0; color: var(--muted); font-size: 13px; }
.recipe-browser--compact .recipe-browser__reset { background: transparent; border: 0; color: var(--leaf); padding: 8px 0; min-height: 40px; }
.recipe-quick-filter:focus-visible,
.recipe-browser__advanced > summary:focus-visible,
.recipe-photo-note__contribute > summary:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }

/* Cards retain every action while secondary noise is reduced. */
.recipe-card__source > a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; margin-left: auto; color: inherit; }
.recipe-card .author-line { text-decoration: none; }
.recipe-card .author-line .avatar { width: 27px; height: 27px; flex-basis: 27px; }
.recipe-card .author-line b { font-size: 12px; font-weight: 600; }
.recipe-card--editorial .recipe-card__body > h3 { margin-top: 0; }
.recipe-card .recipe-card__body > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.6; }
.social-actions [data-social-count]:empty { display: none; }
.recipe-card .social-actions--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; background: transparent; border-top: 1px solid var(--line); }
.recipe-card .social-actions--compact .social-button { min-width: 44px; min-height: 44px; }
.recipe-card .social-actions--compact .social-views { margin-left: auto; font-size: 11px; padding-inline: 2px; }
.recipe-card .social-actions--compact .social-views__label { display: none; }

/* One generous feed, one useful context column, never three rivals. */
.timeline-layout.timeline-layout--focused { grid-template-columns: minmax(0, 720px) minmax(220px, 280px); gap: 36px; align-items: start; }
.discover-page--focused .discover-intro { padding-top: 34px; padding-bottom: 28px; }
.discover-page--focused .discover-intro h1 { margin: 8px 0 12px; }
.timeline-layout--focused .timeline-context { position: static; display: grid; gap: 22px; }
.timeline-layout--focused .timeline-stream > .timeline-categories { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; border-radius: 0; }
.timeline-layout--focused .timeline-categories .kicker { display: none; }
.timeline-layout--focused .timeline-categories button { border: 1px solid var(--line); border-radius: 999px; min-height: 40px; padding: 8px 12px; font-size: 12px; }
.timeline-layout--focused .timeline-categories button.is-active { background: var(--leaf); color: var(--paper); }
.timeline-layout--focused .timeline-feed-tabs { border: 0; box-shadow: none; background: transparent; padding: 0 0 12px; border-radius: 0; gap: 14px; }
.timeline-layout--focused .timeline-feed-tabs > div:first-child small { font-size: 12px; line-height: 1.5; }
.timeline-layout--focused .timeline-post__copy h2 { margin-top: 0; }
.timeline-context .timeline-personal { border: 0; box-shadow: none; border-radius: 0; background: transparent; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.timeline-context .timeline-creators,
.timeline-context .timeline-trending { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(40,57,43,.055); padding: 16px; }
.theme-dark .timeline-context .timeline-creators,
.theme-dark .timeline-context .timeline-trending { background: var(--surface); border-color: var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.timeline-context .timeline-personal--guest { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--quiet-surface); }
.timeline-context .timeline-creators > a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 7px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .18s ease; }
.timeline-context .timeline-creators > a:hover { background: var(--quiet-surface); }
.timeline-context .timeline-creators > a > .avatar { width: 36px; height: 36px; flex: 0 0 36px; aspect-ratio: 1; }
.timeline-context .timeline-creators__text { display: grid; gap: 3px; flex: 1 1 0; min-width: 0; }
.timeline-context .timeline-creators > a b { font-size: 13px; overflow-wrap: anywhere; }
.timeline-context .timeline-creators > a small { font-size: 11px; color: var(--muted); }
.timeline-context .timeline-creators > a > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.timeline-context .timeline-trending > a { grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 9px 7px; border-radius: 12px; }
.timeline-context .timeline-trending > a + a { border-top: 1px solid var(--line); }
.timeline-context .timeline-trending > a > img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.timeline-context .timeline-trending > a b { font-size: 12px; line-height: 1.35; }
.timeline-context .timeline-trending > a small { font-size: 10px; line-height: 1.4; }
.timeline-context .timeline-trending > a:hover { background: var(--quiet-surface); }
.timeline-weekly-details > summary { color: var(--muted); font-size: 12px; min-height: 44px; cursor: pointer; }
.timeline-weekly-details .weekly-leaderboard { margin-top: 12px; box-shadow: none; }

/* The photo disclosure stays visible; contribution details are secondary. */
.recipe-photo-note { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.recipe-photo-note__disclosure { margin: 10px 0; font-size: 12px; }
.recipe-photo-note__contribute { font-size: 12px; }
.recipe-photo-note__contribute[open] { flex-basis: 100%; }
.recipe-photo-note__contribute > summary { display: flex; align-items: center; gap: 7px; min-height: 42px; width: fit-content; cursor: pointer; color: var(--leaf); font-weight: 650; list-style: none; }
.recipe-photo-note__contribute > summary::-webkit-details-marker { display: none; }
.recipe-photo-note__contribute > summary svg { width: 15px; height: 15px; }
.recipe-photo-note__contribute .recipe-photo-note__invite { align-items: start; padding: 12px 0 0; border-top: 1px solid var(--line); }
.recipe-photo-note__contribute .recipe-photo-note__invite > p { margin: 0; font-size: 13px; line-height: 1.65; }

/* Only the dialog scrolls; the item grid no longer captures the wheel. */
.cosmetic-shop-modal .cosmetic-grid { max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cosmetic-shop-modal .cosmetic-shop__layout { align-items: start; gap: 24px; }
.cosmetic-shop-modal .cosmetic-preview { top: 12px; }
.cosmetic-shop-modal .cosmetic-card { border-radius: 14px; padding: 14px; gap: 14px; background: var(--paper); }
.cosmetic-shop-modal .cosmetic-card em { color: var(--leaf); }
.cosmetic-shop-modal .cosmetic-card.is-selected { box-shadow: 0 0 0 1px var(--leaf); border-color: var(--leaf); }
.cosmetic-shop-modal .cosmetic-card.is-equipped { outline: 2px solid var(--leaf); outline-offset: 2px; }
.cosmetic-shop-modal .cosmetic-shop__rarities { flex-wrap: wrap; overflow: visible; gap: 4px; }
.cosmetic-shop-modal .cosmetic-shop__rarities button { min-height: 40px; font-size: 12px; }
.cosmetic-art--avatar { border-radius: 50%; }
.cosmetic-art--rare > i,
.cosmetic-art--epic > i,
.cosmetic-art--legendary > i { inset: 9%; border: 1px solid currentColor; box-shadow: 0 0 0 5px #fff2, inset 0 0 0 4px #fff2; opacity: .45; }
.cosmetic-art--banner > i { inset: 10% 5%; border-radius: 8px; }
.cosmetic-art--banner svg { width: 30%; height: 78%; stroke-width: 3; }
.cosmetic-art--epic svg,
.cosmetic-art--legendary svg { stroke-width: 3; filter: drop-shadow(0 1px 0 #fff8) drop-shadow(0 5px 10px #0002); }
.cosmetic-art--legendary { color: var(--cosmetic-secondary); background-image: radial-gradient(ellipse at 25% 15%, #fff2, transparent 50%), linear-gradient(120deg, var(--cosmetic-primary), color-mix(in srgb, var(--cosmetic-primary) 75%, #101b17), var(--cosmetic-primary)); }

@media (max-width: 900px) {
  .recipes-hub .recipe-browser__advanced .recipe-browser__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-layout.timeline-layout--focused { grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; }
  .timeline-layout--focused .timeline-feed-tabs { align-items: flex-start; flex-direction: column; }
  .cosmetic-shop-modal .cosmetic-preview { position: static; }
}
@media (max-width: 760px) {
  .timeline-layout.timeline-layout--focused { display: flex; flex-direction: column; gap: 24px; }
  .timeline-layout--focused { align-items: stretch; width: 100%; max-width: 100%; }
  .timeline-layout--focused .timeline-context { align-self: stretch; box-sizing: border-box; width: 100%; max-width: none; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .timeline-context .timeline-personal { display: none; }
  .timeline-context .timeline-weekly-details { grid-column: 1 / -1; }
  .discover-page--focused .discover-intro > .button { width: auto; }
  .hs-hero { padding-top: 26px; gap: 22px; }
  .hs-hero h1 { font-size: 46px; margin: 12px 0 16px; }
  .hs-hero-copy > p:not(.kicker) { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
  .hs-quick-links { margin-top: 18px; }
}
@media (max-width: 600px) {
  /* Reach the question sooner without shrinking answers or hiding quest rules. */
  .learning-page.learning-studio { padding-top: 12px; }
  .learning-studio .ls-intro { padding: 0 0 14px; }
  .learning-studio .ls-intro h1 { font-size: 34px; margin: 6px 0 10px; }
  .learning-studio .ls-intro > p:not(.kicker) { font-size: 13px; line-height: 1.5; margin: 0 0 6px; }
  .learning-studio .ls-intro nav { gap: 6px 16px; margin-top: 6px; }
  .learning-studio .ls-intro nav a { min-height: 44px; font-size: 13px; }
  .learning-studio .ls-quiz { padding-top: 16px; gap: 12px; }
  .learning-studio .learning-count { gap: 4px 14px; }
  .learning-studio .ls-quiz-heading > small { font-size: 12px; line-height: 1.5; }
  .learning-studio .daily-quiz-quest { margin-top: 8px; padding: 8px 0 0; }
  .learning-studio .daily-quiz-quest p { margin: 3px 0; font-size: 12px; }
  .learning-studio .daily-quiz-quest small { line-height: 1.45; }
  .learning-studio .learning-quiz-controls { gap: 8px 16px; margin-bottom: 12px; }
  .learning-studio .learning-quiz-controls legend { margin-bottom: 3px; }
  .learning-studio .learning-quiz-controls button { min-height: 44px; padding: 8px 10px; }
  .learning-studio .learning-quiz-controls > p { font-size: 12px; line-height: 1.5; }
  .recipes-hub.recipe-browser-page { padding-top: 24px; }
  .recipes-hub .recipe-browser-page__intro { gap: 12px; margin-bottom: 18px; align-items: start; }
  .recipes-hub .recipe-browser-page__intro h1 { font-size: 35px; letter-spacing: -1px; }
  .recipes-hub .recipe-browser-page__intro p { font-size: 12px; }
  .recipes-hub .recipe-browser-page__intro > .button { min-height: 40px; padding: 8px 12px; font-size: 12px; width: fit-content; }
  .recipe-browser__primary { grid-template-columns: 1fr; gap: 10px; }
  .recipe-browser__primary > .recipe-browser-control { max-width: 100%; }
  .recipe-browser__primary select { min-height: 44px; }
  .recipe-browser__quick { gap: 6px; }
  .recipe-quick-filter { padding: 7px 11px; font-size: 12px; }
  .recipes-hub .recipe-browser--compact { gap: 8px; margin-bottom: 18px; }
  .recipe-browser__advanced > summary { min-height: 44px; }
  .recipe-browser--compact .recipe-browser__heading { min-height: 26px; }
  .recipe-browser--compact .recipe-browser__heading > p { font-size: 12px; }
  .recipe-browser__advanced .recipe-browser-control:last-child { grid-column: 1 / -1; }
  .recipe-card .social-actions--compact { flex-wrap: wrap; justify-content: space-between; }
  .timeline-layout--focused .timeline-categories { max-height: none; }
  .timeline-layout--focused .timeline-context { grid-template-columns: 1fr; }
  .recipe-photo-note { gap: 0 12px; }
  .recipe-photo-note__disclosure { font-size: 11px; }
  .cosmetic-shop-modal .cosmetic-card { padding: 11px; gap: 9px; }
  .cosmetic-shop-modal .cosmetic-grid { gap: 12px; }
  .cosmetic-shop-modal .cosmetic-preview { padding: 18px; }
  .cosmetic-shop-modal .cosmetic-shop__rarities button { padding: 8px 10px; }
}

/* styles/quality-workflows.css */
/* Small workflow refinements, sharing the existing Kulinara palette. */
.support-receipt { margin-block: 1.25rem; padding: 1.25rem; border: 1px solid var(--line, #cfd9cd); border-radius: 16px; background: var(--sage, #edf3e9); color: var(--ink, #253b32); }
.support-receipt:empty { display:none; }
.support-receipt h3 { font-family: inherit; font-size: 1.1rem; margin: 0 0 .5rem; }
.support-receipt p { margin: .5rem 0; overflow-wrap:anywhere; }
.support-receipt a { display: inline-block; padding-block: .6rem; text-decoration: underline; }
.support-receipt.is-error { border-color: #c66c50; }
.prerender-form-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.auth-optional { margin-block: 1rem; }
.auth-optional > summary { cursor:pointer; padding: .8rem 0; }
.auth-password-help { color: var(--muted, #69766b); font-size:.82rem; }
.support-campaign.support-campaign--pending { display:block; padding:24px 28px; max-width:1160px; margin-block:32px; }
.support-campaign--pending .support-campaign__copy h2 { font-size:clamp(24px,3vw,32px); }
.support-campaign--pending .support-campaign__transparency { margin-top:12px; }
.support-campaign--pending .support-campaign__amount { margin-top:20px; }
.footer-legal.footer-legal--grouped { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; align-items:start; padding-block:32px; }
.footer-legal--grouped section { display:flex; flex-direction:column; gap:9px; align-items:flex-start; min-width:0; }
.footer-legal--grouped h2 { color:var(--ink); font-family:inherit; font-size:.86rem; margin:0 0 7px; font-weight:700; }
.footer-legal--grouped a, .footer-legal--grouped button, .footer-legal--grouped small { text-align:left; font-size:.8rem; line-height:1.5; }
.footer-legal--grouped small { color:var(--muted); opacity:1; }
.footer-legal--grouped a,.footer-legal--grouped button { color:var(--muted); }
.site-footer__line { color:var(--muted); }
@media(max-width:650px) { .footer-legal.footer-legal--grouped { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
.cook-mode { width:min(960px, calc(100% - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:clamp(20px,4vw,40px); border:1px solid #cbd6c8; border-radius:24px; color:#29362d; background:#fbfaf4; overflow:auto; box-shadow:0 30px 90px #14251a50; }
.cook-mode::backdrop { background:#10251bd1; backdrop-filter:blur(6px); }
.cook-mode__header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:24px; border-bottom:1px solid #d4ddcf; }
.cook-mode__header h2 { font-size:clamp(24px,4vw,38px); line-height:1.12; margin:6px 0 12px; }
.cook-mode__header button { flex-shrink:0; min-width:44px; min-height:44px; font-size:28px; }
.cook-mode__layout { display:grid; grid-template-columns: minmax(190px, .7fr) minmax(0,1.3fr); gap:32px; padding-top:28px; }
.cook-mode__ingredients summary { cursor:pointer; padding:12px 0; font-weight:700; }
.cook-mode__ingredients summary span { font-weight:400; font-size:.8rem; }
.cook-mode__ingredients ul { list-style:none; padding:0; }
.cook-mode__ingredients label { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid #d4ddcf; cursor:pointer; }
.cook-mode__ingredients small { display:block; margin-top:4px; }
.cook-mode__ingredients input { width:20px; height:20px; accent-color:#315e49; }
.cook-mode__ingredients label:has(:checked) span { text-decoration:line-through; opacity:.65; }
.cook-mode__step progress { width:100%; height:5px; accent-color:#315e49; }
.cook-mode__instruction { font-size:clamp(20px,2.3vw,27px); line-height:1.65; white-space:pre-line; margin:28px 0; }
.cook-mode__explanation { margin: 0 0 24px; line-height:1.7; }
.cook-mode__explanation summary { cursor:pointer; text-decoration:underline; padding-block:8px; }
.cook-mode__navigation { display:flex; justify-content:space-between; gap:12px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.cook-mode__step > small { display:block; color:#617064; line-height:1.6; }
.recipe-component-help { margin-top:20px; font-size:.84rem; line-height:1.6; border-top:1px solid #cad6c6; padding-top:16px; }
.recipe-component-help a { text-decoration:underline; }
@media(max-width:650px) { .cook-mode__layout { display:block; padding-top:12px; } .cook-mode__ingredients { margin-bottom:24px; } .cook-mode { border-radius:18px; } }
@media(max-width:650px) {
  .cook-mode[open] { display:flex; flex-direction:column; width:calc(100% - 16px); max-width:none; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); padding:16px; overflow:hidden; }
  .cook-mode__header { flex-shrink:0; padding-bottom:12px; gap:12px; }
  .cook-mode__header h2 { font-size:24px; }
  .cook-mode__layout { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .cook-mode__navigation { flex-shrink:0; margin-top:0; padding-bottom:env(safe-area-inset-bottom, 0px); }
  .cook-mode__navigation .button { min-width:0; padding-inline:14px; font-size:14px; }
  .cook-mode__instruction { font-size:21px; margin-block:20px; }
}
.support-campaign--pending > .support-campaign__pending-summary { cursor:pointer; display:list-item; min-height:44px; align-content:center; color:var(--leaf); font-weight:650; }
.support-campaign__pending-summary span { display:inline; margin-left:12px; font-size:12px; color:var(--muted); font-weight:400; }
.support-campaign--pending:not([open]) { padding:8px 20px; background:transparent; border-color:var(--line); }
.support-campaign--pending[open] > summary { margin-bottom:18px; }
html.theme-dark .cook-mode { background:#192b20; color:#f4f2e9; border-color:#3f5544; }
html.theme-dark .cook-mode small { color:#bdcbbc; }
html.theme-dark .cook-mode__header, html.theme-dark .cook-mode__ingredients label { border-color:#3f5544; }
html.theme-dark .cook-mode__header button { color:#f4f2e9; }
html.theme-dark .support-receipt { background:#203a2c; color:#edf3e9; }

/* Crawlable pagination is also ordinary, keyboard-accessible navigation. */
.catalog-pagination,.catalog-categories { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:1.5rem 0; }
.catalog-pagination { justify-content:center; }
.catalog-pagination a,.catalog-pagination [aria-current] { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:.5rem .8rem; border:1px solid var(--line); border-radius:10px; text-decoration:none; }
.catalog-pagination [aria-current] { background:var(--leaf); color:var(--paper); }
.catalog-pagination a:hover,.catalog-pagination a:focus-visible { background:var(--sage); outline:2px solid var(--leaf); outline-offset:2px; }
.catalog-categories a { padding:.5rem .7rem; border:1px solid var(--line); border-radius:8px; }

.initial-load-notice { padding: .8rem 1.2rem; background: var(--cream, #f7f3e8); color: var(--ink, #26372d); border-bottom: 1px solid #c8d1c7; font-size: .9rem; }
.initial-load-notice a { font-weight: 700; text-decoration: underline; }
.site-header--refined .brand { min-width: max-content; }
/* Keep the wordmark clear of search on narrow screens. Points remain in More. */
@media (max-width: 380px) {
  .site-header--refined .header-actions .header-points { display: none !important; }
}
.timeline-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Keep the focus indicator on the visible control, not its transparent input. */
.ingredient-list input:focus-visible + .ingredient-check,
.cooked-again input:focus-visible + span,
.official-proposal-grid input:focus-visible + span,
.account-type-picker input:focus-visible + span,
.site-header--refined .header-points:focus-visible { outline:3px solid var(--leaf); outline-offset:3px; }

/* Secondary actions still need readable text; hierarchy comes from typography. */
.shopping-list__toolbar .text-button--muted { color:var(--muted); }
.shopping-list__toolbar .text-button--muted:hover { color:var(--leaf); }

/* styles/dark-mode.css */
/*
 * Final dark-mode contract.
 *
 * This file is deliberately loaded last. Component styles may describe their
 * light appearance locally; every dark surface that must win the cascade lives
 * here so new component work cannot accidentally reintroduce white panels.
 */

html.theme-dark {
  --surface-soft: #202d24;
  --dark-surface-raised: #202d24;
  --dark-surface-quiet: #18231c;
  --dark-border: #405244;
  --dark-text: #eef3e9;
  --dark-muted: #b8c4b6;
}

/* Shared refreshed components use the same dark surfaces as their surroundings. */
.theme-dark .social-actions.social-actions { background: transparent; border-color: var(--dark-border); box-shadow: none; }
.theme-dark .social-actions .social-button { background: transparent; border-color: transparent; color: var(--dark-muted); box-shadow: none; }
.theme-dark .social-actions .social-button:hover { background: var(--dark-surface-raised); color: var(--dark-text); }
.theme-dark .social-actions .social-button--save,
.theme-dark .social-actions .social-button--share { color: #c3dcc4; }
.theme-dark .social-actions .social-button--like { color: #f49c88; }
.theme-dark .social-actions .social-button--like.is-active { background: #432d29; color: #ffb7a5; }
.theme-dark .social-actions .social-button--save.is-active { background: #2b3c30; }
.theme-dark .social-actions .social-views { background: transparent; border: 0; color: var(--dark-muted); }
.theme-dark .recipe-card.social-card { background: var(--dark-surface-quiet); border-color: var(--dark-border); }
.theme-dark .recipe-card.social-card.recipe-card--editorial { border-color: var(--editorial-line); }
.theme-dark .recipe-card--editorial .recipe-card__source { color: var(--editorial-gold); background: #29291e; }
.theme-dark .recipes-hub .recipe-browser { background: transparent; border-color: var(--dark-border); }
.theme-dark .site-header--refined .header-create,
.theme-dark .site-header--refined .global-search button { background: #a0bf9a; color: #17241b; }
.theme-dark .achievement-grid .achievement-card { background: var(--dark-surface-quiet); border-color: var(--dark-border); }
.theme-dark .achievement-card .achievement-card__crest { color: #b9d6b7; background: var(--dark-surface-raised); }
.theme-dark .achievement-card .achievement-card__reward { background: transparent; color: var(--editorial-gold); border: 0; }
.theme-dark .cp-modal .cp-view-panel { background: transparent; border: 0; }
.theme-dark .cp-modal .cp-cost-card { background: var(--dark-surface-quiet); border-color: var(--dark-border); }
.theme-dark .cp-modal .cp-shop-teaser,
.theme-dark .cp-modal .cp-info-group { background: var(--dark-surface-raised); border-color: var(--dark-border); }

/* Shared controls and buttons */
.theme-dark .button--outline {
  background: #202d24;
  border-color: #526558;
  box-shadow: none;
  color: #eef3e9;
}
.theme-dark .button--outline:hover,
.theme-dark .button--outline:focus-visible {
  background: #2b3b30;
  border-color: #86a188;
  color: #fffdf5;
}
.theme-dark :where(input, textarea, select)::placeholder {
  color: #98a697;
  opacity: 1;
}
.theme-dark :where(input, textarea, select):disabled {
  background: #1a241d;
  color: #879486;
  opacity: 1;
}
.theme-dark .field select,
.theme-dark .recipe-browser-control select {
  background-color: #202c23;
  border-color: #405143;
  color: #edf2e9;
}
.theme-dark .field > span,
.theme-dark .ingredient-table__labels,
.theme-dark .step-row__fields label > span {
  color: #d8e1d5;
}

/* Home and global navigation */
.theme-dark .hero__plate {
  background: #28342b;
  border-color: #48574b;
  box-shadow: 0 24px 58px rgba(0, 0, 0, .34), 0 5px 12px rgba(0, 0, 0, .18);
}
.theme-dark .hero__plate--two { border-color: #28342b; }
.theme-dark .recipe-card__category {
  background: rgba(26, 36, 29, .94);
  color: #d5ead2;
}
.theme-dark .difficulty { background: #393321; color: #efd995; }
.theme-dark .difficulty--mittel { background: #29392d; color: #c4dec1; }
.theme-dark .difficulty--anspruchsvoll { background: #402b27; color: #f1b5a5; }
.theme-dark .header-help {
  background: #202d24;
  border-color: #405244;
  color: #d9ead6;
}
.theme-dark .header-help:hover,
.theme-dark .header-help:focus-visible,
.theme-dark .header-signout:hover,
.theme-dark .header-signout:focus-visible {
  background: #2a3a2f;
  border-color: #607562;
  color: #fffdf5;
}

/* Recipe pages */
.theme-dark .recipe-quick-report {
  background: #202d24;
  border-color: #526558;
  color: #d8ead5;
}
.theme-dark .recipe-quick-report:hover,
.theme-dark .recipe-quick-report:focus-visible {
  background: #2b3b30;
  border-color: #86a188;
  color: #fffdf5;
}
.theme-dark .recipe-image-fallback { color: #fffdf5; }
.theme-dark .nutrition-card__content > section,
.theme-dark .nutrition-card__sources {
  background: #1b2720;
  border-color: #3d4e41;
}
.theme-dark .nutrition-card__allergens li {
  background: #3a2925;
  border-color: #6c493f;
  color: #f1d6cf;
}
.theme-dark .nutrition-card footer,
.theme-dark .nutrition-card dl div,
.theme-dark .nutrition-card__sources ul { border-color: #3d4e41; }

/* Recipe creation and live nutrition */
.theme-dark .add-page__intro > p:not(.kicker),
.theme-dark .photo-post-create__intro > p:not(.kicker),
.theme-dark .official-submission-page > header > p:not(.kicker) {
  color: #bcc7b9;
}
.theme-dark .recipe-gamebar {
  background: #1d2a21;
  border-color: #3b4d3f;
  color: #b8c4b6;
}
.theme-dark .recipe-gamebar span {
  background: #26352b;
  border-color: #45594a;
  color: #c9d4c7;
}
.theme-dark .recipe-gamebar .is-ready {
  background: #2b4932;
  border-color: #5e7a61;
  color: #d3ebcf;
}
.theme-dark .recipe-gamebar b { color: #e8ce82; }
.theme-dark .tag-suggestions button {
  background: #26352b;
  border-color: #45594a;
  color: #c9dec6;
}
.theme-dark .tag-suggestions button:hover,
.theme-dark .tag-suggestions button:focus-visible {
  background: #42674a;
  border-color: #6f9473;
  color: #fffdf5;
}
.theme-dark .nutrition-live__empty small,
.theme-dark .nutrition-live__status small,
.theme-dark .nutrition-live__allergens > small,
.theme-dark .nutrition-live__no-values,
.theme-dark .nutrition-live footer {
  color: #b8c4b6;
}
.theme-dark .nutrition-live__badge,
.theme-dark .shopping-recipes > header > span {
  background: #2c4432;
  color: #d2e8cf;
}
.theme-dark .nutrition-live__allergens p span {
  background: #3a3022;
  border-color: #695b38;
  color: #f0d692;
}
.theme-dark .nutrition-live__warning { border-left-color: #d5ad4c; }
.theme-dark .nutrition-live__warning b { color: #f2dfaa; }
.theme-dark .nutrition-live__warning ul { color: #d7c99e; }

/* Knowledge and learning */
.theme-dark .knowledge-card__motif {
  background: color-mix(in srgb, var(--knowledge-accent, #8bb889) 28%, #202d24);
  color: color-mix(in srgb, var(--knowledge-accent, #8bb889) 58%, #e8f0e5);
}
.theme-dark .knowledge-detail__hero > aside,
.theme-dark .knowledge-practice,
.theme-dark .knowledge-related a {
  background: #202d24;
  border-color: #405244;
}
.theme-dark .knowledge-practice li span {
  background: #2b3b30;
  color: #d7ead3;
}
.theme-dark .knowledge-related a small,
.theme-dark .knowledge-card--lesson > a div > span {
  color: #a9cfaa;
}
.theme-dark .knowledge-detail__lead { color: #a9cfa7; }

/* Editorial company, press and partnership pages */
.theme-dark .public-info-layout article > section {
  background: #1a241d;
  border-color: #394b3d;
}
.theme-dark .public-info-layout article p,
.theme-dark .public-info-layout article li {
  color: #c3cec1;
}
.theme-dark .public-info-layout aside {
  background: #243b2c;
  border: 1px solid #45604b;
  color: #eef3e9;
}
.theme-dark .public-info-layout aside .kicker { color: #efd47f; }
.theme-dark .public-info-layout aside h2 { color: #f5f3ea; }
.theme-dark .public-info-layout aside p { color: #c5d1c2; }
.theme-dark .public-info-layout aside a { color: #e6f0e3; }

/* Community, comments and restaurant profiles */
.theme-dark .timeline-self-link:hover,
.theme-dark .timeline-personal > a:hover,
.theme-dark .connection-person:hover { background: #26352b; }
.theme-dark .timeline-post__context.is-followed { background: #26382b; color: #b9d8b7; }
.theme-dark .timeline-post__context.is-featured { background: #3c341f; color: #f0d686; }
.theme-dark .timeline-composer__add { background: #2f6b50; color: #fff; }
.theme-dark .comment p { color: #c6d1c4; }
.theme-dark .comment__meta em,
.theme-dark .comment-experience__ratings span {
  background: #29392e;
  color: #c9dec6;
}
.theme-dark .experience-summary span,
.theme-dark .restaurant-review-form,
.theme-dark .restaurant-review-list > article,
.theme-dark .restaurant-reviews,
.theme-dark .restaurant-empty {
  background: #1b2720;
  border-color: #3b4d3f;
}
.theme-dark .restaurant-review-note {
  background: #39321e;
  border-color: #695c31;
  color: #ead99f;
}
.theme-dark .restaurant-profile__actions a {
  background: #223128;
  border-color: #405244;
  color: #d3e6d0;
}

/* Profile, account and progress */
.theme-dark .contribution-progress {
  background: #202d24;
  border-color: #405244;
  color: #c1cbbf;
}
.theme-dark .achievement-card__crest {
  background: color-mix(in srgb, var(--achievement-tone) 35%, #202d24);
  border-color: color-mix(in srgb, var(--achievement-tone) 55%, #4a5b4d);
  color: #eef3e9;
}
.theme-dark .achievement-card__meter > span {
  background: color-mix(in srgb, var(--achievement-tone) 24%, #18231c);
}
.theme-dark .achievement-card__meter em {
  background: #3b321e;
  color: #efd58a;
}
.theme-dark .achievement-card__copy .kicker,
.theme-dark .creator-milestone .kicker {
  color: color-mix(in srgb, var(--achievement-tone, #eccd71) 55%, #e8f0e5);
}
.theme-dark .achievement-mini b {
  background: #1b2720;
  border-color: currentColor;
}
.theme-dark .profile-load-more,
.theme-dark .profile-display-name,
.theme-dark .my-kitchen-section--drafts {
  background: #1b2720;
  border-color: #3b4d3f;
}
.theme-dark .referral-panel--profile-end .referral-link .button {
  background: #2f6b50;
  border-color: #75a887;
  color: #fff;
}
.theme-dark .my-kitchen-empty > span,
.theme-dark .my-kitchen-tabs b {
  background: #2b3c30;
  color: #d6ead3;
}
.theme-dark .creator-choice--book .creator-choice__icon {
  background: #39382e;
  border-color: #5c5848;
  color: #ead695;
}
.theme-dark .creator-choice--recipe .creator-choice__icon {
  background: #2c4031;
  border-color: #526a56;
  color: #c7e0c3;
}
.theme-dark .creator-choice--book .kicker { color: #d6bf7e; }
.theme-dark .account-danger .kicker { color: #f0a091; }
.theme-dark .account-card--password .account-card__heading > span { background: #472d27; color: #f1b3a5; }
.theme-dark .account-card--display-name .account-card__heading > span,
.theme-dark .account-card--privacy .account-card__heading > span { background: #3a321e; color: #efd58a; }

/* Dialogs, consent and notifications */
.theme-dark .modal-backdrop { background: rgba(4, 9, 6, .72); }
.theme-dark .auth-modal,
.theme-dark .action-dialog,
.theme-dark .notifications-modal,
.theme-dark .connections-modal {
  background: #1a241d;
  border-color: #405244;
  color: #eef3e9;
}
.theme-dark .modal-close {
  color: #c7dec4;
}
.theme-dark .modal-close:hover,
.theme-dark .modal-close:focus-visible {
  background: #2a3a2f;
  color: #fffdf5;
}
.notification-item__actor {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.notification-item__actor:hover,
.notification-item__actor:focus-visible {
  color: var(--leaf);
  text-decoration: underline;
}
.theme-dark .notification-item__actor { color: #eef3e9; }
.theme-dark .notification-item__actor:hover,
.theme-dark .notification-item__actor:focus-visible { color: #b9dab6; }
.theme-dark .notification-item p { color: #c4cfc2; }
.theme-dark .notification-item p > small { color: #aebbad; }

.theme-dark .photo-comments-modal { background: #18231c; border-color: #405244; }
.theme-dark .photo-comments-modal > .modal-close { background: rgba(30,44,35,.92); }
.theme-dark .photo-comments-modal__header { background: linear-gradient(135deg,#203329,#342e22); border-color: #405244; }
.theme-dark .photo-comments-modal__header > p:last-child,
.theme-dark .photo-comment p { color: #c5d0c2; }
.theme-dark .photo-comment + .photo-comment { border-color: #35463a; }
.theme-dark .photo-comment-form,
.theme-dark .photo-comment-login { background: #1d2a21; border-color: #405244; }
.theme-dark .photo-comment-form textarea { background: #202d24; border-color: #4a5d4d; color: #eef3e9; }

/* Legal and support */
.theme-dark .legal-document mark {
  background: #493b1d;
  color: #f1dc96;
}
.theme-dark .legal-placeholder {
  background: #3b321d;
  border-color: #6c5a2f;
  color: #ead99f;
}
.theme-dark .help-faq__list details {
  background: #202d24;
  border-color: #405244;
}
.theme-dark .help-faq__list summary > span { color: #aebbad; }

/* Server-rendered catalog links must already match the saved theme before the app starts. */
.theme-dark .seo-catalog-prerender__grid a {
  background: #1a241d;
  border-color: #394b3d;
  color: var(--ink);
}

@media (max-width: 600px) {
  .notifications-modal__actions {
    align-items: stretch;
  }
  .notifications-modal__actions .button {
    margin-top: 0;
    min-height: 50px;
    width: 100%;
  }
  .notifications-modal__close { margin-top: 0; }
}

.theme-dark .recipe-draft-save,
.theme-dark .recipe-form .ingredient-row { border-color: var(--dark-border); }

/* Recipe writing surface */
.theme-dark .recipe-editor__toolbar,
.theme-dark .recipe-editor .form-footer { background: #202d24; border-color: var(--dark-border); }
.theme-dark .recipe-editor__nav,
.theme-dark .recipe-editor .step-row { background: #1d2821; border-color: var(--dark-border); }
.theme-dark .recipe-editor .form-section__title > span,
.theme-dark .recipe-editor__nav button:hover,
.theme-dark .recipe-editor .add-row-button { background: #2b3c2e; border-color: #49624b; }
.theme-dark .recipe-editor__status,
.theme-dark .recipe-editor__nav span,
.theme-dark .recipe-editor .recipe-disclosure > summary,
.theme-dark .recipe-editor .step-row__heading > b { color: #b7d5ad; }
.theme-dark .recipe-editor__status.has-changes { color: #edc984; }
.theme-dark .recipe-editor .step-tools .icon-button { border-color: var(--dark-border); color: #bbc9b7; }
.theme-dark .recipe-editor .icon-button:hover { background: #49352d; color: #f5ac96; }
.theme-dark .recipe-editor__nav button { color: var(--dark-text); }
.theme-dark .recipe-editor__finish-note > b { color: var(--dark-text); }
.theme-dark .recipe-editor input:focus,
.theme-dark .recipe-editor textarea:focus,
.theme-dark .recipe-editor select:focus { outline-color: #799675; }