:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #17202f;
  background: #f3f5f7;
  font-size: 14px;
  font-synthesis: none;
  --bg: #f3f5f7;
  --panel: #fff;
  --sidebar: #fafbfc;
  --text: #17202f;
  --muted: #7b8798;
  --secondary: #556477;
  --border: #e4e8ee;
  --blue: #0077ff;
  --blue-soft: #e9f2ff;
  --hover: #f6f8fa;
  --green: #26a566;
  --red: #dc5059;
  --shadow: 0 2px 8px #172b4d05;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
strong, b, h1, h2, h3, h4 { font-weight: 600; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.svg-sprite { position: absolute; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.auth-screen { min-height: 100vh; display: grid; place-content: center; padding: 24px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; font-size: 23px; font-weight: 600; letter-spacing: -.9px; }
.brand-icon, .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; }
.auth-card { width: min(380px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 32px; box-shadow: 0 12px 38px #172b4d10; }
.auth-symbol { display: grid; width: 42px; height: 42px; margin-bottom: 20px; place-items: center; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.auth-symbol .icon { width: 22px; height: 22px; }
.auth-card h1 { font-size: 24px; letter-spacing: -.6px; }
.auth-card > p { margin: 8px 0 24px; color: var(--secondary); font-size: 13px; }
.auth-card form { display: grid; gap: 16px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 2px; }
.auth-error { border: 1px solid #f4dfe0; border-radius: 6px; background: #fff0f1; color: #d45660; padding: 10px 12px; font-size: 12px; line-height: 18px; }
.auth-caption { margin-top: 18px; color: #9aa4b1; font-size: 11px; text-align: center; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: 224px; flex-direction: column; border-right: 1px solid var(--border); background: var(--sidebar); }
.brand { display: flex; height: 73px; align-items: center; gap: 10px; padding: 0 22px; }
.brand strong { font-size: 23px; letter-spacing: -.9px; }
.sidebar-label { padding: 22px 24px 11px; color: #9aa3af; font-size: 10px; font-weight: 600; letter-spacing: 1.1px; }
.nav { padding: 0 12px; }
.nav-item { display: flex; width: 100%; min-height: 43px; align-items: center; gap: 12px; margin: 3px 0; border-radius: 7px; background: none; padding: 10px 12px; color: var(--secondary); font-size: 14px; text-align: left; }
.nav-item .icon { color: #7f8d9e; }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: #e2eeff; color: #0769d7; font-weight: 600; }
.nav-item.active .icon { color: var(--blue); }
.sidebar-bottom { margin-top: auto; padding: 18px 12px 0; }
.sidebar-version { display: flex; justify-content: space-between; margin: 14px -12px 0; border-top: 1px solid var(--border); padding: 15px 24px; color: #9aa4b1; font-size: 11px; }
.main { min-width: 0; margin-left: 224px; padding-bottom: 40px; }
.topbar { display: flex; min-height: 82px; align-items: center; gap: 18px; border-bottom: 1px solid var(--border); background: var(--panel); padding: 13px 28px; }
.topbar > div { min-width: 0; }
.topbar h2 { font-size: 27px; line-height: 1.25; letter-spacing: -.6px; }
.topbar p { margin-top: 5px; color: var(--secondary); font-size: 13px; }
.topbar > .primary-action { margin-left: auto; }
.mobile-menu { display: none !important; }
.view { display: none; padding: 28px; }
.view.active { display: block; }

label { display: grid; min-width: 0; gap: 7px; }
label > span, .switch-row > span, .component-choice > span { color: var(--secondary); font-size: 12px; }
input, select, textarea { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); padding: 9px 11px; font-size: 12px; }
input, select { min-height: 37px; }
textarea { resize: vertical; line-height: 18px; }
input:focus, select:focus, textarea:focus { border-color: #8cbcf5; box-shadow: 0 0 0 2px #0077ff14; outline: 0; }
.primary-action, .secondary-action, .danger-action { display: inline-flex; min-height: 35px; align-items: center; gap: 8px; justify-content: center; border-radius: 6px; padding: 8px 14px; font-size: 12px; font-weight: 500; }
.primary-action { background: var(--blue); color: #fff; }
.primary-action:hover { background: #006be6; }
.secondary-action { border: 1px solid var(--border); background: #fff; color: var(--secondary); }
.secondary-action:hover { background: var(--hover); }
.danger-action { background: #fff0f1; color: #d45660; }
.compact-action { min-height: 30px; padding: 6px 10px; }
.icon-button, .icon-action { display: inline-grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--secondary); padding: 0; }
.panel, .stat-card, .recipe-form, .catalog-form, .catalog-item, .recipe-card { border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: var(--shadow); }
.panel-heading { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--border); padding: 16px 20px; }
.panel-heading h3 { font-size: 16px; letter-spacing: -.2px; }
.panel-heading span { color: var(--muted); font-size: 11px; }
.empty-state { border: 1px dashed #cfd6df; border-radius: 9px; background: #fff; padding: 42px 24px; text-align: center; }
.empty-state strong { font-size: 16px; }
.empty-state p { margin: 8px auto 18px; color: var(--muted); font-size: 12px; }
.compact-empty { border: 0; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.stat-card { padding: 19px; }
.stat-card > span { display: block; margin-bottom: 9px; color: var(--secondary); font-size: 12px; }
.stat-card strong { display: block; font-size: 29px; line-height: 34px; letter-spacing: -.9px; }
.stat-card small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.stat-card.compact strong { font-size: 24px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.engagement-grid { margin-top: 18px; }
.type-bars, .latest-list { padding: 20px; }
.type-row { display: grid; grid-template-columns: 95px minmax(0, 1fr) 34px; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12px; }
.type-row:last-child { margin: 0; }
.type-track { height: 7px; overflow: hidden; border-radius: 9px; background: #eef1f4; }
.type-track span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.latest-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; border-top: 1px solid var(--border); padding: 10px 0; cursor: pointer; }
.latest-item:first-child { border-top: 0; padding-top: 0; }
.latest-thumb { display: grid; width: 44px; height: 44px; overflow: hidden; place-items: center; border-radius: 6px; background: #eef2f5; color: var(--muted); font-size: 9px; }
.latest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.latest-item strong, .latest-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-item small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.toolbar { display: flex; align-items: end; gap: 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 9px; background: #fff; padding: 16px; }
.toolbar label { width: 180px; }
.toolbar .search { flex: 1; width: auto; }
.table-panel { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { background: #fafbfd; color: #8a96a7; padding: 10px 16px; font-size: 10px; font-weight: 400; white-space: nowrap; }
.data-table td { border-top: 1px solid var(--border); padding: 13px 16px; font-size: 12px; vertical-align: middle; }
.data-table tbody tr:hover { background: #f6f8fa; }
.user-cell { display: grid; min-width: 180px; gap: 4px; }
.user-cell strong, .user-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-cell small { color: var(--muted); }
.status-chip, .pill { display: inline-flex; align-items: center; min-height: 26px; border-radius: 5px; background: #edf8f1; color: #29925c; padding: 5px 8px; font-size: 11px; font-weight: 400; white-space: nowrap; }
.status-chip.disabled, .status-chip.expired, .status-chip.cancelled, .pill.off { background: #f1f3f5; color: #7b8798; }
.status-chip.trial, .status-chip.past_due, .accent-pill { background: #fff8e9; color: #9a6b16; }
.status-chip.premium { background: var(--blue-soft); color: #0769d7; }

.recipe-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.recipe-tab { position: relative; min-height: 42px; background: none; padding: 9px 14px; color: var(--secondary); font-size: 13px; }
.recipe-tab:hover { color: var(--blue); }
.recipe-tab.active { color: #0769d7; font-weight: 600; }
.recipe-tab.active::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: var(--blue); content: ""; }
.recipes-grid { display: grid; gap: 12px; }
.recipe-card { display: grid; grid-template-columns: 146px minmax(0, 1fr); overflow: hidden; }
.recipe-image { display: grid; min-height: 176px; place-items: center; border-right: 1px solid var(--border); background: #f1f5f2; color: #8a96a7; font-size: 11px; }
.recipe-image img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card-body { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; padding: 16px 18px; }
.recipe-main { min-width: 0; }
.recipe-card-header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 12px; }
.recipe-card-header > div { min-width: 0; }
.recipe-card-header strong { display: block; overflow: hidden; color: var(--text); font-size: 16px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.recipe-card-header small { display: -webkit-box; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recipe-description { display: -webkit-box; overflow: hidden; margin-top: 6px; color: var(--secondary); font-size: 12px; line-height: 17px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.recipe-meta .pill { min-height: 24px; background: var(--blue-soft); color: #0769d7; }
.recipe-meta .accent-pill { background: #fff8e9; color: #9a6b16; }
.recipe-side { display: grid; min-width: 0; align-content: start; border-left: 1px solid var(--border); padding-left: 18px; }
.macro-caption { margin-bottom: 8px; color: var(--muted); font-size: 11px; text-align: center; }
.macro-grid, .total-macro-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.macro { min-width: 0; border-radius: 7px; background: #f5f7f9; padding: 10px 5px; text-align: center; }
.macro b, .macro span { display: block; }
.macro b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.macro span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.pagination { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 16px; border: 1px solid var(--border); border-radius: 9px; background: #fff; padding: 12px 16px; }
.page-size { width: 120px; }
.page-controls { display: flex; align-items: center; gap: 12px; color: var(--secondary); font-size: 12px; }

.recipe-form { overflow: hidden; }
.recipe-builder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); align-items: start; }
.form-block { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 20px 20px; }
.form-block:nth-child(2n) { border-right: 0; }
.block-heading { margin-bottom: 16px; }
.block-heading b { font-size: 16px; }
.recipe-hero-editor { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: start; gap: 18px; }
.image-field { min-width: 0; }
.image-preview { display: grid; width: 100%; aspect-ratio: 4/3; overflow: hidden; place-items: center; margin-top: 10px; border: 1px dashed #cfd6df; border-radius: 7px; background: #f7f9fb; color: var(--muted); font-size: 11px; text-align: center; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.full { grid-column: 1 / -1; }
.meal-type-field { grid-column: 1 / -1; min-width: 0; }
.meal-type-field > span { display: block; margin-bottom: 7px; color: var(--secondary); font-size: 12px; }
.meal-type-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.meal-type-options label { display: flex; min-width: 0; min-height: 37px; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 9px; color: var(--secondary); font-size: 12px; white-space: nowrap; }
.meal-type-options input { width: 14px; min-height: 14px; margin: 0; padding: 0; }
.switch-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.inline-switch { min-height: 37px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.switch { display: inline-flex; width: auto; min-width: 0; align-items: center; grid-template: none; gap: 8px; }
.switch input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.slider { position: relative; width: 35px; height: 20px; flex: 0 0 auto; border-radius: 20px; background: #d5dce6; }
.slider::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #172b4d2b; content: ""; transition: transform .15s ease; }
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider::after { transform: translateX(15px); }
.switch b { color: var(--secondary); font-size: 11px; font-weight: 400; }
.components-section, .steps-section { min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-heading > span, .section-heading h4 { color: var(--secondary); font-size: 12px; }
.component-picker { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: end; gap: 9px; }
.component-choice { min-width: 0; }
.component-choice > span { display: block; margin-bottom: 7px; }
.picker-button { width: 100%; overflow: hidden; justify-content: flex-start; text-overflow: ellipsis; white-space: nowrap; }
.picker-button span { overflow: hidden; text-overflow: ellipsis; }
.component-preview, .serving-summary { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; border: 1px solid var(--border); border-radius: 6px; background: #fafbfd; padding: 10px 12px; color: var(--muted); font-size: 11px; }
.preview-macros { display: flex; flex-wrap: wrap; gap: 10px; color: var(--secondary); }
.components-list, .steps-list { display: grid; gap: 8px; margin-top: 10px; }
.component-row { display: grid; grid-template-columns: minmax(0, 1fr) 125px 35px; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; }
.component-row strong, .component-row small { display: block; }
.component-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.quantity-cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.component-empty { margin: 0; font-size: 11px; }
.step-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 35px; align-items: start; gap: 8px; }
.step-number { display: grid; width: 28px; height: 28px; place-items: center; margin-top: 4px; border-radius: 5px; background: var(--blue-soft); color: #0769d7; font-size: 11px; }
.step-input { min-height: 56px; }
.publish-settings { display: grid; gap: 12px; }
.totals-block { border-right: 0; }
.form-actions { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); background: #fafbfd; padding: 14px 20px; }
.form-actions-group { display: flex; gap: 8px; margin-left: auto; }
.catalog-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: 16px; }
.catalog-form { display: grid; gap: 14px; padding: 18px; }
.nutrition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compact-switch { justify-content: flex-start; }
.catalog-list { display: grid; gap: 10px; }
.catalog-item { padding: 15px 16px; }
.catalog-item p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.catalog-nutrition { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.catalog-nutrition span { border-radius: 5px; background: #f5f7f9; padding: 5px 7px; color: var(--secondary); font-size: 10px; }
.catalog-actions { display: flex; gap: 8px; margin-top: 12px; }

.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; background: #15233866; }
.modal-backdrop { place-items: center; padding: 16px; }
.component-modal { display: flex; width: min(680px, 100%); max-height: min(720px, calc(100vh - 32px)); flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 12px 40px #172b4d24; }
.modal-heading, .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding: 18px 20px; }
.component-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 8px 16px 0; }
.component-tab { border-radius: 6px 6px 0 0; background: none; padding: 9px 12px; color: var(--secondary); font-size: 12px; }
.component-tab.active { background: var(--blue-soft); color: #0769d7; font-weight: 600; }
.component-search { padding: 14px 16px; }
.component-results { display: grid; gap: 7px; overflow-y: auto; padding: 0 16px 16px; }
.component-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--border); border-radius: 7px; background: #fff; padding: 11px 12px; text-align: left; }
.component-result:hover, .component-result.selected { border-color: #acd0fa; background: #f5f9ff; }
.component-result strong, .component-result small { display: block; }
.component-result small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.component-result b { color: #0769d7; font-size: 11px; }
.component-result-empty { padding: 30px; color: var(--muted); font-size: 12px; text-align: center; }
.user-drawer { position: absolute; inset: 0 0 0 auto; display: flex; width: min(720px, 100%); flex-direction: column; border-left: 1px solid var(--border); background: #fff; box-shadow: -14px 0 38px #172b4d18; }
.drawer-head p { margin-top: 6px; color: var(--muted); font-size: 12px; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--blue); font-size: 10px; }
.drawer-body { display: grid; gap: 16px; overflow-y: auto; padding: 20px 24px 32px; }
.drawer-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.drawer-metric, .drawer-section { border: 1px solid var(--border); border-radius: 9px; padding: 16px; }
.drawer-metric strong, .drawer-metric span { display: block; }
.drawer-metric strong { font-size: 20px; }
.drawer-metric span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.drawer-section, .drawer-section form { display: grid; gap: 14px; }
.drawer-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.activity-item:first-child { border-top: 0; padding-top: 0; }
.activity-item small { color: var(--muted); }
.admin-toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; max-width: min(420px, calc(100vw - 28px)); border: 1px solid #cfe9da; border-radius: 7px; background: #edf8f1; color: #29925c; padding: 12px 14px; box-shadow: 0 8px 24px #172b4d18; font-size: 12px; }
.admin-toast.error { border-color: #f4dfe0; background: #fff0f1; color: #d45660; }

@media (max-width: 1180px) {
  .recipe-card-body { grid-template-columns: minmax(0, 1fr); }
  .recipe-side { border-top: 1px solid var(--border); border-left: 0; padding-top: 14px; padding-left: 0; }
  .recipe-builder { grid-template-columns: 1fr; }
  .form-block { border-right: 0; }
  .recipe-hero-editor { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 35; border: 0; background: #15233866; }
  .main { margin-left: 0; }
  .mobile-menu { display: inline-grid !important; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .view { padding: 20px; }
  .topbar { padding: 13px 20px; }
  .topbar h2 { font-size: 23px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .recipe-card { grid-template-columns: 120px minmax(0, 1fr); }
  .recipe-image { min-height: 156px; }
}

@media (max-width: 640px) {
  .auth-card { padding: 24px; }
  .topbar { min-height: 72px; }
  .topbar p { display: none; }
  .topbar > .primary-action { padding: 8px 10px; }
  .view { padding: 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card strong { font-size: 24px; }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar .search { grid-column: 1 / -1; }
  .toolbar label { width: auto; }
  .recipe-tabs { overflow-x: auto; }
  .recipe-tab { flex: 0 0 auto; }
  .recipe-card { grid-template-columns: 1fr; }
  .recipe-image { height: 170px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .recipe-card-body { padding: 14px; }
  .recipe-card-header strong { white-space: normal; }
  .recipe-hero-editor { grid-template-columns: 1fr; }
  .image-field { max-width: 230px; }
  .form-grid, .meal-type-options { grid-template-columns: 1fr 1fr; }
  .component-picker { grid-template-columns: 1fr 100px; }
  .component-picker > button { grid-column: 1 / -1; }
  .component-row { grid-template-columns: minmax(0, 1fr) 110px 35px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .pagination { align-items: stretch; flex-direction: column; }
  .page-size { width: 100%; }
  .page-controls { justify-content: space-between; }
  .drawer-form-grid, .drawer-metrics { grid-template-columns: 1fr; }
  .drawer-body { padding: 16px; }
}