:root {
  color-scheme: light;
  --paper-50: #fffdf7;
  --paper-100: #fff8e8;
  --paper-200: #f4e5c8;
  --paper-300: #e7cfab;
  --paper-400: #c8aa82;
  --paper-500: #9a7b58;
  --paper-600: #73583f;
  --paper-700: #543f31;
  --paper-800: #382b24;
  --tomato-50: #fff2ec;
  --tomato-100: #fddccf;
  --tomato-500: #d6543b;
  --tomato-600: #b83e2d;
  --tomato-700: #8e3025;
  --green-600: #347a55;
  --surface-canvas: var(--paper-100);
  --surface-raised: var(--paper-50);
  --surface-sunken: var(--paper-200);
  --text-primary: var(--paper-800);
  --text-secondary: var(--paper-600);
  --text-tertiary: var(--paper-500);
  --action-primary: var(--tomato-500);
  --action-primary-hover: var(--tomato-600);
  --action-primary-active: var(--tomato-700);
  --border-subtle: rgb(84 63 49 / 16%);
  --border-default: rgb(84 63 49 / 26%);
  --border-strong: var(--paper-700);
  --font-display: "LXGW WenKai Screen", "霞鹜文楷 屏幕阅读版", "STKaiti", serif;
  --font-body: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --shadow-rest: 0 2px 0 rgb(84 63 49 / 14%), 0 7px 16px rgb(84 63 49 / 10%);
  --shadow-raised: 0 3px 0 rgb(84 63 49 / 16%), 0 12px 24px rgb(84 63 49 / 13%);
  --shadow-overlay: 0 4px 0 rgb(84 63 49 / 14%), 0 18px 36px rgb(37 28 24 / 18%);
  --shadow-focus: 0 0 0 4px rgb(214 84 59 / 30%);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-sticky: 20;
  --z-backdrop: 30;
  --z-modal: 40;
  --z-toast: 120;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #ead9bc;
  scrollbar-width: none;
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar { display: none; }

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text-primary);
  background:
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    #ead9bc;
  font-family: var(--font-body);
}

button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .5rem;
  left: .75rem;
  transform: translateY(-160%);
  padding: .625rem .875rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
}
.skip-link:focus { transform: none; }

.app-shell {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin-inline: auto;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  background: var(--surface-canvas);
  box-shadow: 0 0 0 1px rgb(84 63 49 / 12%), 0 30px 80px rgb(84 63 49 / 18%);
}

body.is-setup-open { overflow: hidden; }

body:has(#recipeEditorPage.is-active) .bottom-nav,
body:has(#recipeDetailPage.is-active) .bottom-nav,
body:has(#menuPickerPage.is-active) .bottom-nav,
body:has(#smartRecommendationPage.is-active) .bottom-nav,
body:has(#smartRecommendationResultPage.is-active) .bottom-nav,
body:has(#fridgeAddPage.is-active) .bottom-nav,
body:has(#fridgeEditorPage.is-active) .bottom-nav,
body:has(#fridgeDetailPage.is-active) .bottom-nav,
body:has(#profileAccountPage.is-active) .bottom-nav,
body:has(#profileSpacePage.is-active) .bottom-nav,
body:has(#modelConfigPage.is-active) .bottom-nav {
  display: none;
}

.setup-flow {
  position: fixed;
  z-index: 60;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 50% -8%, rgb(255 253 247 / 96%) 0 150px, transparent 250px),
    radial-gradient(circle at 18% 18%, rgb(214 84 59 / 10%) 0 92px, transparent 190px),
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    #ead9bc;
}

.setup-flow[hidden],
.setup-page[hidden] { display: none !important; }

.setup-flow.is-register-sheet::before {
  content: "";
  position: fixed;
  z-index: 2;
  inset: 0;
  background: rgb(37 28 24 / 34%);
}

.setup-shell {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin-inline: auto;
  padding: max(1rem, env(safe-area-inset-top)) var(--space-5) max(1.25rem, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgb(255 253 247 / 80%), rgb(255 248 232 / 92%) 42%, rgb(244 229 200 / 76%)),
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
  box-shadow: 0 0 0 1px rgb(84 63 49 / 12%), 0 30px 80px rgb(84 63 49 / 18%);
}

.setup-brand {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding-top: clamp(.35rem, 2dvh, 1.5rem);
  text-align: center;
}

.setup-logo-card {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(88px, 26vw, 112px);
  aspect-ratio: 1;
  margin-bottom: .25rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: 32px;
  background: rgb(255 253 247 / 70%);
  box-shadow:
    0 2px 0 rgb(84 63 49 / 10%),
    0 18px 34px rgb(84 63 49 / 13%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
}

.setup-logo-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 25px;
  box-shadow: inset 0 0 0 1px rgb(84 63 49 / 8%);
  pointer-events: none;
}

.setup-logo-card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.setup-brand__name {
  margin: 0;
  color: var(--paper-800);
  font: 900 clamp(1.72rem, 7.4vw, 2.12rem)/1.08 var(--font-display);
  letter-spacing: -.035em;
  text-shadow: 0 1px 0 rgb(255 253 247 / 78%);
}

.setup-brand__line {
  max-width: 17rem;
  margin: 0;
  color: var(--paper-600);
  font: 500 .86rem/1.55 var(--font-body);
}

.setup-pages {
  min-height: auto;
  margin-top: clamp(1.15rem, 4dvh, 2rem);
}

.setup-page {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 0 0 1rem;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="login"] {
  opacity: .58;
  filter: blur(.3px);
  pointer-events: none;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] {
  position: fixed;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: min(100%, 430px);
  min-height: min(60dvh, 520px);
  max-height: min(78dvh, 680px);
  margin-inline: auto;
  padding: 2.05rem 1.125rem calc(1.125rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 2px solid var(--paper-700);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 98%), rgb(255 248 232 / 98%)),
    var(--paper-50);
  box-shadow: 0 -18px 38px rgb(37 28 24 / 20%);
  animation: register-sheet-in var(--duration-slow) var(--ease-out);
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"]::before {
  content: "";
  position: absolute;
  top: .75rem;
  left: 50%;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgb(84 63 49 / 18%);
  transform: translateX(-50%);
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"]::after {
  content: "";
  position: absolute;
  inset: 1.45rem .85rem .85rem;
  border: 1px dashed rgb(154 123 88 / 22%);
  border-radius: 24px 24px 0 0;
  pointer-events: none;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] .setup-card {
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] .setup-card::before {
  display: none;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] .setup-back {
  position: absolute;
  z-index: 2;
  top: 1.75rem;
  right: 1.125rem;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 999px;
  background: rgb(255 248 232 / 74%);
  color: transparent;
  box-shadow: 0 2px 0 rgb(84 63 49 / 8%);
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] .setup-back::before {
  content: "×";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--paper-800);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] .setup-summary {
  max-width: 16rem;
  margin-top: .35rem;
}

.setup-flow.is-register-sheet .setup-page[data-setup-page="register"] .setup-form {
  margin-top: 1.45rem;
  gap: 1.05rem;
}

.setup-card {
  position: relative;
  width: 100%;
  padding: 1.15rem;
  border: 2px solid rgb(84 63 49 / 72%);
  border-radius: 24px 18px 22px 18px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 96%), rgb(255 248 232 / 94%)),
    var(--paper-50);
  box-shadow:
    0 3px 0 rgb(84 63 49 / 16%),
    0 15px 30px rgb(84 63 49 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
}

.setup-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgb(154 123 88 / 20%);
  border-radius: 18px 13px 16px 13px;
  pointer-events: none;
}

.setup-kicker {
  margin: 0 0 .45rem;
  color: var(--tomato-700);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.35;
}

.setup-page h1,
.setup-page h2 {
  margin: 0;
  font: 700 clamp(1.75rem, 8vw, 2.2rem)/1.14 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.setup-page h2.setup-kicker {
  margin: 0 0 .35rem;
  color: var(--tomato-700);
  font-size: clamp(1.9rem, 8vw, 2.15rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  -webkit-text-stroke: .35px currentColor;
  paint-order: stroke fill;
}

.setup-summary {
  margin: 0;
  color: var(--text-secondary);
  font: 500 .92rem/1.6 var(--font-body);
  text-wrap: pretty;
}

.setup-page h1:focus,
.setup-page h2:focus { outline: none; }

.setup-form .button { width: 100%; }

.setup-restart { margin: .65rem auto 0; }

.register-avatar-picker {
  display: grid;
  gap: .42rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.register-avatar-picker legend {
  padding: 0;
  color: var(--paper-700);
  font-size: .8rem;
  font-weight: 700;
}

.register-avatar-picker__viewport {
  min-width: 0;
  margin-inline: -.2rem;
  padding: .2rem .2rem .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.register-avatar-picker__viewport::-webkit-scrollbar {
  display: none;
}

.register-avatar-picker__list {
  display: flex;
  gap: .65rem;
  width: max-content;
  min-width: 100%;
  padding-inline: .15rem;
}

.avatar-option {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--paper-50);
  box-shadow: 0 2px 0 rgb(84 63 49 / 12%), 0 5px 12px rgb(84 63 49 / 8%);
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.avatar-option img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 50%;
  object-fit: cover;
}

.avatar-option.is-selected,
.avatar-option[aria-selected="true"] {
  border-color: var(--tomato-500);
  box-shadow: 0 0 0 3px rgb(214 84 59 / 16%), 0 3px 0 rgb(84 63 49 / 14%), 0 7px 14px rgb(84 63 49 / 10%);
}

.avatar-option.is-selected::after,
.avatar-option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 13px;
  height: 13px;
  border: 2px solid var(--paper-50);
  border-radius: 50%;
  background: var(--tomato-500);
}

.avatar-option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), 0 3px 0 rgb(84 63 49 / 14%);
}

.avatar-option:active {
  transform: translateY(1px) scale(.99);
}

.register-avatar-picker > small {
  color: var(--text-tertiary);
  font-size: .7rem;
  line-height: 1.4;
}

.setup-text-link {
  display: block;
  align-self: center;
  width: max-content;
  min-height: 44px;
  padding: .45rem .75rem;
  border: 0;
  background: transparent;
  color: var(--tomato-700);
  font: 800 .9rem/1.35 var(--font-body);
  cursor: pointer;
}

.setup-text-link:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}

.setup-back {
  align-self: flex-start;
  min-width: 44px;
  min-height: 44px;
  margin: -.5rem 0 .75rem -.5rem;
  padding: .5rem;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.setup-form {
  display: grid;
  gap: .95rem;
  margin-top: 1.25rem;
}

.field { display: grid; gap: .4rem; }
.field label { color: var(--paper-700); font-size: .8rem; font-weight: 700; }
.field input {
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  border: 1px solid rgb(84 63 49 / 24%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 92%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.25;
  box-shadow: inset 0 1px 2px rgb(84 63 49 / 5%), 0 1px 0 rgb(255 255 255 / 80%);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.password-control { position: relative; }
.password-control input { padding-right: 3.25rem; }
.password-control input::-ms-reveal,
.password-control input::-ms-clear { display: none; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: .3rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--paper-600);
  cursor: pointer;
  transform: translateY(-50%);
}
.password-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.password-toggle[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  width: 1.45rem;
  border-top: 1.8px solid currentColor;
  transform: rotate(-45deg);
}
.password-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.field input:hover { border-color: rgb(84 63 49 / 42%); }
.field input:focus-visible {
  outline: none;
  border-color: rgb(84 63 49 / 52%);
  background: var(--paper-50);
  box-shadow: 0 0 0 3px rgb(84 63 49 / 9%);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.unit-input:has(input[aria-invalid="true"]) {
  border-color: var(--tomato-600);
  box-shadow: 0 0 0 4px rgb(214 84 59 / 16%);
}
.field label.is-required::before,
.recipe-dynamic-head .is-required::before {
  content: "*";
  margin-right: .22rem;
  color: var(--tomato-700);
  font-weight: 900;
}
.field small { color: var(--text-tertiary); font-size: .7rem; line-height: 1.4; }
.field-error { margin: 0; color: var(--tomato-700); font-size: .72rem; line-height: 1.4; }
.field-error:empty { display: none; }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--surface-raised);
  cursor: pointer;
  box-shadow: var(--shadow-rest);
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.scene-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #68411f;
  isolation: isolate;
}

.home-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #68411f;
  outline: 1px solid rgb(0 0 0 / 10%);
  outline-offset: -1px;
  -webkit-user-drag: none;
}

.scene-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(37 28 24 / 24%), transparent 18%, transparent 77%, rgb(37 28 24 / 46%));
}

.video-state {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  background: #b98248;
  color: var(--paper-50);
  font-size: .875rem;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.video-state.is-ready {
  opacity: 0;
  pointer-events: none;
}

.video-state.is-error {
  padding: 2rem;
  text-align: center;
  background: #68411f;
}

.loading-mark {
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgb(255 253 247 / 40%);
  border-top-color: var(--paper-50);
  border-radius: 50%;
  animation: rotate 800ms linear infinite;
}

.video-coordinate-layer {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 9 / 16;
  pointer-events: none;
  transform: translateX(-50%);
}

.menu-board {
  position: absolute;
  top: 18.6%;
  left: 70.9%;
  display: grid;
  align-content: start;
  width: 24.1%;
  height: 10%;
  min-width: 0;
  min-height: 44px;
  padding: .26rem .12rem .2rem;
  border: 0;
  border-radius: .35rem;
  background: transparent;
  color: #60432f;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: none;
  text-shadow: .3px .45px 0 rgb(255 248 220 / 36%);
  transform: perspective(300px) rotateY(-3deg) rotateZ(-2deg);
  transform-origin: center;
  transition:
    transform var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    text-shadow var(--duration-fast) var(--ease-out);
}

.menu-board__title {
  font: 700 clamp(.58rem, 2.35vw, .72rem)/1 var(--font-display);
  letter-spacing: .11em;
  transform: rotate(-.7deg);
}

.today-menu {
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.today-menu__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.today-menu__date {
  margin: 0 0 .15rem;
  color: var(--text-secondary);
  font-size: .75rem;
}

.today-menu h2 {
  margin: 0;
  font: 700 1.55rem/1.15 var(--font-display);
  letter-spacing: -.02em;
}

.today-menu__week-link {
  min-width: 72px;
  min-height: 44px;
  padding: .5rem .6rem;
  border: 0;
  background: transparent;
  color: var(--tomato-700);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.today-menu__list { border-block: 1px solid var(--border-default); }

.today-meal {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  border-bottom: 1px dashed rgb(84 63 49 / 22%);
}

.today-meal--button {
  width: 100%;
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.today-meal--button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.today-meal--button:active {
  transform: translateY(1px);
}

.today-meal:last-child { border-bottom: 0; }
.today-meal__label { color: var(--text-secondary); font-size: .78rem; }
.today-meal strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.today-meal__state { color: var(--green-600); font-size: .68rem; }
.today-meal__state.is-pending { color: var(--tomato-700); }
.today-meal__state.is-confirmed { color: var(--paper-500); }
.today-menu__action { width: 100%; margin-top: var(--space-5); }

.app-page[hidden] { display: none !important; }

.module-page {
  min-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
  padding: max(1.25rem, env(safe-area-inset-top)) var(--space-4) calc(6rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12% 4%, rgb(214 84 59 / 8%) 0 88px, transparent 180px),
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.module-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 2px solid rgb(84 63 49 / 68%);
  border-radius: 22px 18px 24px 18px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 96%), rgb(255 248 232 / 92%)),
    var(--paper-50);
  box-shadow: var(--shadow-rest);
}

.module-card h2 {
  margin: 0;
  font: 800 1.08rem/1.3 var(--font-body);
}

.module-card p {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.55;
}

.module-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .2rem .55rem;
  border: 1px solid rgb(214 84 59 / 22%);
  border-radius: 999px;
  background: var(--tomato-50);
  color: var(--tomato-700);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.module-list {
  margin-top: var(--space-4);
  border-block: 1px solid var(--border-default);
}

.module-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  border-bottom: 1px dashed rgb(84 63 49 / 22%);
}

.module-row:last-child { border-bottom: 0; }
.module-row span { color: var(--text-secondary); font-size: .78rem; }
.module-row strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }

.profile-page,
.secondary-page {
  background: var(--surface-canvas);
}

.profile-entry-list {
  display: grid;
  gap: .55rem;
  margin-top: var(--space-5);
}

.profile-entry {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 72px;
  padding: .65rem .35rem .65rem .2rem;
  border: 0;
  border-bottom: 1px dashed rgb(84 63 49 / 22%);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.profile-entry:last-child { border-bottom: 0; }
.profile-entry:active { transform: translateY(1px); }
.profile-entry:focus-visible {
  outline: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-focus);
}
.profile-entry__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: 14px 11px 14px 10px;
  background: var(--paper-50);
  color: var(--tomato-700);
}
.profile-entry__icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.profile-entry__copy { display: grid; gap: .2rem; min-width: 0; }
.profile-entry__copy strong { font-size: .98rem; line-height: 1.3; }
.profile-entry__copy small { overflow: hidden; color: var(--text-secondary); font-size: .74rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.profile-entry__chevron { color: var(--paper-500); font-size: 1.65rem; line-height: 1; transform: translateY(-1px); }

.secondary-page {
  padding: max(1rem, env(safe-area-inset-top)) var(--space-4) calc(6rem + env(safe-area-inset-bottom));
}

.secondary-page__header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 52px;
  margin-bottom: var(--space-5);
}

.secondary-page__header h1 {
  margin: 0;
  font: 700 1.45rem/1.2 var(--font-display);
  text-align: center;
}

.secondary-page__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.35rem;
  cursor: pointer;
}

.secondary-page__back:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.profile-panel {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.profile-action-stack {
  display: grid;
  gap: .65rem;
  margin-top: var(--space-5);
}

.profile-action-stack .button { width: 100%; }
.button--danger-quiet {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--status-error);
  font: 700 .9rem/1.2 var(--font-body);
  cursor: pointer;
}
.button--danger-quiet:disabled,
.profile-action-stack .button:disabled { cursor: not-allowed; opacity: .45; }

.profile-space-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.profile-section-label {
  display: block;
  margin-bottom: .3rem;
  color: var(--text-tertiary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.profile-space-heading h2 {
  margin: 0;
  font: 700 1.2rem/1.25 var(--font-display);
}

.profile-space-panel > p {
  margin: .65rem 0 0;
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.55;
}

.model-config-form { display: grid; gap: 0; }
.model-config-panel { padding: var(--space-4); }
.model-config-list { display: grid; gap: .9rem; margin-top: var(--space-5); }

.model-config-item {
  display: grid;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-100);
}

.model-config-item h3 { margin: 0; font-size: .96rem; }
.model-config-item p { margin: .25rem 0 0; color: var(--text-secondary); font-size: .72rem; line-height: 1.4; }
.model-config-item label { display: grid; gap: .3rem; color: var(--paper-700); font-size: .74rem; font-weight: 700; }
.model-config-item select {
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: 400 .88rem/1.25 var(--font-body);
}
.model-config-item select:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.model-config-actions { padding-bottom: env(safe-area-inset-bottom); }

.shopping-page {
  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}

.segmented-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  padding: .25rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-100);
}

.segmented-tabs--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-tab {
  min-width: 0;
  min-height: 44px;
  padding: .35rem .5rem;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: var(--text-secondary);
  font: 700 .78rem/1.2 var(--font-body);
  cursor: pointer;
}

.segmented-tab.is-active {
  background: var(--tomato-50);
  color: var(--tomato-700);
  box-shadow: inset 0 0 0 1px rgb(214 84 59 / 24%);
}

.shopping-tabs {
  margin-top: var(--space-4);
}

.shopping-update-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: var(--space-4);
  padding: .8rem .85rem;
  border: 2px solid rgb(214 84 59 / 34%);
  border-radius: 18px 15px 20px 15px;
  background:
    linear-gradient(180deg, rgb(255 242 236 / 94%), rgb(255 248 232 / 92%)),
    var(--tomato-50);
  box-shadow: 0 2px 0 rgb(84 63 49 / 12%), 0 8px 18px rgb(84 63 49 / 10%);
}

.shopping-update-card[hidden] {
  display: none !important;
}

.shopping-update-card strong {
  font-size: .9rem;
  font-weight: 900;
}

.shopping-update-card p {
  margin: .18rem 0 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.45;
}

.shopping-update-card .button {
  flex: 0 0 auto;
  min-width: 90px;
  min-height: 42px;
  border-radius: 12px;
  font-size: .78rem;
}

.shopping-servings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .75rem;
  padding: .8rem .85rem;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: 18px 15px 20px 15px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.shopping-servings-card[hidden] {
  display: none !important;
}

.shopping-servings-card strong {
  font-size: .9rem;
  font-weight: 900;
}

.shopping-servings-card p {
  margin: .18rem 0 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.45;
}

.shopping-servings-stepper {
  display: grid;
  grid-template-columns: 38px 48px 38px;
  align-items: center;
  overflow: hidden;
  min-height: 38px;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: 999px;
  background: rgb(255 248 232 / 72%);
}

.shopping-servings-stepper button {
  min-width: 38px;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--tomato-700);
  font-size: 1.12rem;
  font-weight: 900;
}

.shopping-servings-stepper button:disabled {
  color: var(--text-tertiary);
  opacity: .45;
}

.shopping-servings-stepper span {
  color: var(--text-primary);
  font-size: .98rem;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.shopping-summary {
  margin: .85rem .1rem .45rem;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.shopping-categories {
  display: grid;
  gap: .85rem;
  margin-top: .45rem;
}

.shopping-loading-shell {
  display: grid;
  min-height: calc(100dvh - 220px);
  place-items: center;
}

.shopping-loading {
  display: grid;
  justify-items: center;
  gap: .55rem;
  width: min(100%, 22rem);
  padding: 2rem 1.2rem;
  border: 2px solid rgb(84 63 49 / 34%);
  border-radius: 22px 18px 24px 18px;
  background:
    radial-gradient(circle at 22% 16%, rgb(255 248 232 / 88%), transparent 34%),
    var(--surface-raised);
  box-shadow: var(--shadow-rest);
  color: var(--text-primary);
  text-align: center;
}

.shopping-loading__mark {
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid rgb(214 84 59 / 18%);
  border-top-color: var(--tomato-500);
  border-radius: 999px;
  animation: smart-result-spin 780ms linear infinite;
}

.shopping-loading strong {
  font-size: .98rem;
  font-weight: 900;
}

.shopping-loading small {
  max-width: 14rem;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.55;
}

.shopping-category {
  overflow: hidden;
  border: 2px solid rgb(84 63 49 / 38%);
  border-radius: 20px 16px 22px 16px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 98%), rgb(255 248 232 / 94%)),
    var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.shopping-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: .65rem .85rem;
  border-bottom: 1px dashed rgb(84 63 49 / 18%);
}

.shopping-category__head strong {
  font-size: .92rem;
  font-weight: 900;
}

.shopping-category__head span {
  color: var(--text-secondary);
  font-size: .7rem;
}

.shopping-items {
  min-height: 10px;
}

.shopping-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  min-height: 58px;
  padding: .52rem .65rem;
  border-bottom: 1px solid rgb(84 63 49 / 10%);
  transition: background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.shopping-item:last-child {
  border-bottom: 0;
}

.shopping-check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgb(84 63 49 / 36%);
  border-radius: 999px;
  background: var(--paper-50);
  color: var(--tomato-700);
  font-weight: 900;
  cursor: pointer;
}

.shopping-item__copy {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.shopping-item__copy strong {
  overflow: hidden;
  font-size: .88rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-item__copy small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: .68rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shopping-source {
  padding: .12rem .38rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: 999px;
  background: rgb(244 229 200 / 48%);
  color: var(--text-secondary);
  font-size: .62rem;
  font-weight: 800;
}

.shopping-item__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .28rem;
  min-width: max-content;
}

.shopping-icon-button {
  min-width: 42px;
  min-height: 34px;
  padding: .18rem .35rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 10px;
  background: rgb(255 253 247 / 84%);
  color: var(--paper-700);
  font-size: .66rem;
  font-weight: 900;
  cursor: pointer;
}

.shopping-icon-button--danger {
  color: var(--tomato-700);
}

.shopping-item.is-checked {
  background: rgb(244 229 200 / 30%);
  color: var(--text-tertiary);
}

.shopping-item.is-checked .shopping-item__copy strong,
.shopping-item.is-checked .shopping-item__copy small {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.shopping-item.is-checked .shopping-check {
  border-color: rgb(52 122 85 / 30%);
  background: rgb(52 122 85 / 10%);
  color: var(--green-600);
}

.shopping-item-fields {
  display: grid;
  gap: .75rem;
}

.shopping-item-fields label {
  display: grid;
  gap: .35rem;
}

.shopping-item-fields label > span {
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 800;
}

.shopping-item-fields input,
.shopping-item-fields select {
  width: 100%;
  min-height: 46px;
  padding: .55rem .7rem;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font: 500 1rem/1.3 var(--font-body);
}

.shopping-item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.bottom-nav {
  position: fixed;
  z-index: var(--z-sticky);
  right: auto;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(calc(100% - 2rem), 390px);
  min-height: 68px;
  padding: .35rem .42rem;
  border: 1px solid rgb(84 63 49 / 10%);
  border-radius: 999px;
  background: rgb(255 253 247 / 78%);
  box-shadow:
    0 18px 42px rgb(84 63 49 / 18%),
    0 4px 14px rgb(84 63 49 / 8%),
    inset 0 1px 0 rgb(255 255 255 / 86%);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.nav-item {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .125rem;
  min-width: 44px;
  min-height: 54px;
  padding: .25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition:
    color 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.nav-item svg { width: 1.25rem; height: 1.25rem; }
.nav-item span { font-size: .625rem; }
.nav-item.is-active {
  background: rgb(84 63 49 / 8%);
  color: var(--tomato-700);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 78%),
    0 8px 18px rgb(84 63 49 / 8%);
}

.nav-item.is-switching {
  animation: nav-pop-lock 240ms cubic-bezier(.18, .9, .32, 1.18);
}

dialog {
  color: var(--text-primary);
  font-family: var(--font-body);
}

dialog::backdrop { background: rgb(37 28 24 / 48%); }

.sheet-dialog {
  width: min(calc(100% - 1rem), 414px);
  max-height: min(78dvh, 680px);
  margin: auto auto .5rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.sheet-dialog[open],
.choice-dialog[open] { animation: sheet-in var(--duration-slow) var(--ease-out); }

.sheet {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  max-height: min(78dvh, 680px);
}

.sheet-handle {
  width: 2.5rem;
  height: .3rem;
  margin: .5rem auto 0;
  border-radius: 999px;
  background: var(--paper-300);
}

.sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: .75rem var(--space-4) .625rem;
}

.sheet-header h2 {
  margin: 0;
  font: 700 1.45rem/1.15 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.sheet-header p:last-child {
  margin: .25rem 0 0;
  color: var(--text-secondary);
  font-size: .75rem;
  line-height: 1.45;
}

.icon-button { flex: 0 0 auto; box-shadow: none; }
.icon-button svg { width: 1.25rem; height: 1.25rem; }

.day-tabs {
  display: grid;
  grid-template-columns: repeat(7, 44px);
  justify-content: space-between;
  gap: 0;
  overflow-x: hidden;
  padding: .25rem .25rem .65rem;
  overscroll-behavior-inline: contain;
}

.day-tab {
  min-width: 44px;
  min-height: 48px;
  padding: .3rem .1rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.day-tab strong,
.day-tab small { display: block; }
.day-tab strong { font-size: .72rem; }
.day-tab small { margin-top: .1rem; font-size: .58rem; }
.day-tab[aria-selected="true"] {
  border-color: rgb(214 84 59 / 30%);
  background: var(--tomato-50);
  color: var(--tomato-700);
}

.day-viewport {
  min-height: 0;
  overflow-y: auto;
  padding: .15rem var(--space-4) var(--space-3);
  overscroll-behavior: contain;
}

.day-card {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--paper-100);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%);
}

.day-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: .55rem;
}
.day-card__head h3 { margin: 0; font: 700 1.2rem/1.2 var(--font-display); }
.day-card__head span { color: var(--text-secondary); font-size: .7rem; }

.meal-row {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  border-top: 1px dashed rgb(84 63 49 / 22%);
}

.meal-row--button {
  width: 100%;
  padding: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.meal-row--button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.meal-row--button:active {
  transform: translateY(1px);
}

.meal-row__label { color: var(--text-secondary); font-size: .75rem; }
.meal-row strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.meal-row__state { color: var(--green-600); font-size: .65rem; }
.meal-row__state.is-pending { color: var(--tomato-700); }
.meal-row__state.is-confirmed { color: var(--paper-500); }

.sheet-footer {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: .55rem;
  padding: .65rem var(--space-4) calc(.8rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
}

.button {
  min-height: 48px;
  padding: .625rem 1rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(84 63 49 / 13%);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}
.button--primary { background: var(--action-primary); color: var(--paper-50); }
.button--secondary { color: var(--tomato-700); }
.button--quiet {
  width: calc(100% - 2rem);
  margin: 0 1rem calc(1rem + env(safe-area-inset-bottom));
  border-color: var(--border-default);
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}

.choice-dialog {
  width: min(calc(100% - 1.5rem), 400px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.menu-recipe-dialog {
  width: min(calc(100% - 1.5rem), 390px);
}

.menu-recipe-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(72dvh, 520px);
}

.menu-recipe-list {
  display: grid;
  gap: .55rem;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-4);
  overscroll-behavior: contain;
}

.menu-recipe-option {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-height: 64px;
  padding: .65rem .7rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-50);
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
}

.menu-recipe-option:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.menu-recipe-option:active {
  transform: translateY(1px);
}

.menu-recipe-option__plate {
  display: block;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, rgb(255 255 255 / 76%) 0 16%, transparent 17%),
    radial-gradient(circle at 60% 64%, rgb(255 255 255 / 30%) 0 24%, transparent 25%),
    var(--dish-color, var(--tomato-500));
  box-shadow: inset 0 0 0 6px rgb(255 253 247 / 70%), 0 2px 0 rgb(84 63 49 / 12%);
}

.menu-recipe-option strong,
.menu-recipe-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-recipe-option strong {
  font-size: .92rem;
}

.menu-recipe-option small {
  margin-top: .18rem;
  color: var(--text-secondary);
  font-size: .7rem;
}

.account-dialog {
  width: min(calc(100% - 1rem), 414px);
  max-height: min(88dvh, 760px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.account-dialog[open] { animation: sheet-in var(--duration-slow) var(--ease-out); }

.account-panel {
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

.account-header {
  position: sticky;
  z-index: 2;
  top: 0;
  align-items: center;
  background: rgb(255 253 247 / 96%);
}

.account-card {
  margin: .5rem var(--space-4) 1rem;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--paper-100);
  box-shadow: var(--shadow-rest);
}

.account-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: .9rem;
  border-bottom: 1px dashed rgb(84 63 49 / 22%);
}

.account-dialog--scanner .account-card__title {
  display: none;
}

.account-dialog--scanner .space-view {
  padding-top: .25rem;
}

.account-dialog--scanner .scanner-note {
  margin-top: .2rem !important;
  color: var(--text-primary) !important;
  font-size: .95rem !important;
  font-weight: 700;
  text-align: center;
}

.account-card h3 { margin: 0; font: 700 1.25rem/1.2 var(--font-display); }

.space-role {
  padding: .25rem .5rem;
  border: 1px solid rgb(214 84 59 / 28%);
  border-radius: 999px;
  background: var(--tomato-50);
  color: var(--tomato-700);
  font-size: .7rem;
  font-weight: 700;
}

.space-view { padding-top: 1rem; }
.space-view[hidden] { display: none !important; }
.space-view > p { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.6; }
.space-actions { display: grid; gap: .65rem; margin-top: 1rem; }
.space-view.setup-form { margin-top: 0; }
.space-view .button--quiet { width: 100%; margin: 0; }

.scanner-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: .75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-700);
}

.scanner-frame::after {
  content: "";
  position: absolute;
  width: 54%;
  aspect-ratio: 1;
  border: 2px solid rgb(255 253 247 / 82%);
  border-radius: .6rem;
  box-shadow: 0 0 0 999px rgb(37 28 24 / 28%);
  pointer-events: none;
}

.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }
.scanner-placeholder { color: var(--paper-100); font-size: .78rem; }
.scanner-note { margin-top: .65rem !important; color: var(--text-tertiary) !important; font-size: .72rem !important; }
.scanner-dev-button {
  display: block;
  min-height: 2.75rem;
  width: 100%;
  margin-top: .75rem;
  border: 1px dashed rgb(84 63 49 / 30%);
  border-radius: var(--radius-md);
  background: rgb(255 248 232 / 68%);
  color: var(--text-secondary);
  font: 700 .86rem/1.2 var(--font-body);
}
.scanner-dev-button[hidden] { display: none !important; }

.join-preview { text-align: center; }
.join-preview h3 { margin: .2rem 0 .65rem; }
.join-preview p + p { margin-top: .55rem; }
.join-preview .button { width: 100%; margin-top: 1rem; }

.space-summary > h3 { font-size: 1.45rem; }
.space-summary > p { margin-top: .35rem; }
.qr-card {
  display: grid;
  justify-items: center;
  gap: .35rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-50);
}

.qr-card[hidden] { display: none !important; }
.qr-card canvas { display: block; width: min(100%, 232px); height: auto; image-rendering: pixelated; }

.recipe-editor {
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.recipe-method-dialog,
.recipe-cover-preview-dialog,
.recipe-delete-dialog {
  width: min(calc(100% - 2rem), 414px);
  margin: auto auto 1rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.recipe-method-dialog[open],
.recipe-cover-preview-dialog[open],
.recipe-delete-dialog[open] {
  animation: sheet-in var(--duration-slow) var(--ease-out);
}

.recipe-method-panel,
.recipe-cover-preview-panel {
  display: grid;
  gap: .9rem;
  padding-bottom: var(--space-4);
}

.recipe-delete-panel {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.recipe-delete-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
}

.recipe-delete-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--tomato-50);
  color: var(--tomato-700);
  font-size: 1.2rem;
  font-weight: 900;
}

.recipe-delete-head h2 {
  margin: 0;
  font: 900 1.2rem/1.25 var(--font-display);
  letter-spacing: -.02em;
}

.recipe-delete-head p {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .86rem;
  line-height: 1.55;
}

.recipe-delete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}

.recipe-delete-confirm {
  background: var(--tomato-600);
}

.recipe-method-list {
  display: grid;
  gap: .75rem;
  padding: 0 var(--space-4);
}

.recipe-editor-page {
  position: fixed;
  z-index: calc(var(--z-sticky) + 2);
  inset: 0;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin-inline: auto;
  overflow-y: auto;
  padding: max(1.15rem, env(safe-area-inset-top)) var(--space-4) calc(6.5rem + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgb(255 253 247 / 96%), rgb(255 248 232 / 96%)),
    var(--surface-canvas);
}

.recipe-editor--page {
  display: grid;
  gap: 1rem;
  max-height: none;
  overflow: visible;
}

.recipe-editor-page__header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  padding-bottom: .25rem;
}

.recipe-editor-page__header h2 {
  margin: 0;
  font: 900 1.55rem/1.18 var(--font-display);
  letter-spacing: -.02em;
}

.recipe-editor-page__header p {
  margin: .3rem 0 0;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.55;
}

.recipe-editor-page__back {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
}

.recipe-toolbar {
  display: grid;
  gap: .75rem;
  padding: 0 0 var(--space-4);
}

.recipe-search-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  width: 100%;
  padding: 0 .9rem 0 1rem;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 92%);
  color: var(--text-secondary);
  font-size: .86rem;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgb(84 63 49 / 5%);
  cursor: pointer;
}

.recipe-search-entry svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--tomato-700);
}

.recipe-floating-add {
  position: fixed;
  z-index: calc(var(--z-sticky) + 1);
  top: calc(100dvh - 13.5rem);
  right: max(.85rem, calc((100vw - 430px) / 2 + .85rem));
  display: inline-grid;
  place-items: center;
  width: 58px;
  min-height: 58px;
  padding: 0;
  border: 2px solid var(--tomato-700);
  border-radius: 999px;
  background: var(--tomato-500);
  color: var(--paper-50);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 3px 0 rgb(100 36 29 / 32%),
    0 14px 26px rgb(184 62 45 / 28%);
  transform: translateY(-50%);
  cursor: pointer;
}

.recipe-floating-add:active {
  transform: translateY(calc(-50% + 1px)) scale(.99);
}

.shopping-floating-add {
  top: calc(100dvh - 7.5rem);
}

#recipesPage.is-searching .recipe-floating-add,
#recipesPage.is-search-result .recipe-floating-add,
body:has(#recipeMethodDialog[open]) .recipe-floating-add,
body:has(#shoppingItemDialog[open]) .shopping-floating-add,
body:has(#shoppingDeleteDialog[open]) .shopping-floating-add,
body:has(#shoppingUpdateDialog[open]) .shopping-floating-add,
.recipe-floating-add[hidden] {
  display: none !important;
}

.recipe-search-page,
.recipe-search-result-bar {
  display: grid;
  gap: 1rem;
  padding-bottom: var(--space-4);
}

.recipe-toolbar[hidden],
.recipe-search-page[hidden],
.recipe-search-result-bar[hidden],
.recipe-list[hidden],
.recipe-menu__panel[hidden] {
  display: none !important;
}

.recipe-search-top,
.recipe-search-result-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
}

.recipe-search-back {
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.recipe-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center;
  gap: .45rem;
}

.recipe-search-form input {
  min-height: 46px;
  width: 100%;
  padding: 0 .9rem;
  border: 1px solid rgb(84 63 49 / 22%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 96%);
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgb(84 63 49 / 5%);
}

.recipe-search-form input:focus-visible {
  outline: none;
  border-color: rgb(214 84 59 / 52%);
  box-shadow: 0 0 0 3px rgb(214 84 59 / 14%);
}

.recipe-search-form button {
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--tomato-600);
  color: white;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgb(214 84 59 / 18%);
}

.recipe-recent {
  padding: 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--paper-100);
}

.recipe-recent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.recipe-recent__head h2 {
  margin: 0;
  font: 900 1rem/1.25 var(--font-body);
}

.recipe-recent__head button {
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.recipe-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.recipe-recent-list button {
  min-height: 38px;
  max-width: 100%;
  padding: 0 .75rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.recipe-recent-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: .82rem;
}

.recipe-list {
  display: grid;
  gap: .75rem;
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom));
}

.recipe-empty {
  padding: 1.25rem;
  border: 1px dashed rgb(84 63 49 / 26%);
  border-radius: var(--radius-lg);
  background: var(--paper-100);
  text-align: center;
}

.recipe-empty h3 {
  margin: 0;
  font: 800 1.2rem/1.25 var(--font-display);
}

.recipe-empty p {
  margin: .45rem 0 0;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.6;
}

.recipe-card {
  display: grid;
  gap: .8rem;
  padding: .95rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgb(255 253 247 / 96%), rgb(255 248 232 / 92%)),
    var(--paper-50);
  box-shadow: var(--shadow-rest);
}

.recipe-card.is-disabled {
  background: var(--paper-100);
  color: var(--text-secondary);
}

.recipe-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.recipe-card h3 {
  margin: 0;
  font: 800 1.08rem/1.25 var(--font-body);
}

.recipe-card__title-block {
  min-width: 0;
}

.recipe-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}

.recipe-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .18rem .5rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: 999px;
  background: var(--paper-100);
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 700;
}

.recipe-pill.is-enabled {
  border-color: rgb(52 122 85 / 24%);
  color: var(--green-600);
}

.recipe-pill.is-disabled {
  border-color: rgb(214 84 59 / 22%);
  color: var(--tomato-700);
}

.recipe-card__time {
  margin: 0;
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
}

.recipe-menu {
  position: relative;
  flex: 0 0 auto;
}

.recipe-more {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.recipe-more:hover,
.recipe-more:focus-visible {
  outline: none;
  background: rgb(84 63 49 / 7%);
}

.recipe-menu__panel {
  position: absolute;
  z-index: 12;
  top: calc(100% + .35rem);
  right: 0;
  display: grid;
  min-width: 116px;
  padding: .35rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.recipe-menu__panel button {
  min-height: 42px;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: var(--text-primary);
  font-size: .8rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.recipe-menu__panel button:hover,
.recipe-menu__panel button:focus-visible {
  outline: none;
  background: var(--tomato-50);
}

.recipe-menu__panel button[data-recipe-action="delete"],
.recipe-menu__panel button[data-recipe-detail-action="delete"],
.recipe-menu__panel button[data-food-action="delete"] {
  color: var(--tomato-700);
}

.recipe-form-body {
  display: grid;
  gap: 1rem;
  padding: .25rem var(--space-4) var(--space-4);
}

.recipe-editor--page .recipe-form-body {
  padding: 0;
}

.field select,
.field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid rgb(84 63 49 / 24%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 92%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  box-shadow: inset 0 1px 2px rgb(84 63 49 / 5%), 0 1px 0 rgb(255 255 255 / 80%);
}

.field select { min-height: 52px; }
.field textarea { resize: vertical; min-height: 92px; }

.recipe-meal-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  min-height: 52px;
}

.recipe-meal-time-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 52px;
  padding: .65rem .5rem;
  border: 1px solid rgb(84 63 49 / 24%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 92%);
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.recipe-meal-time-option:has(input:checked) {
  border-color: var(--tomato-500);
  background: var(--tomato-50);
  color: var(--tomato-700);
}

.recipe-meal-time-option input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--tomato-600);
}

.recipe-meal-times[aria-invalid="true"] .recipe-meal-time-option {
  border-color: var(--tomato-600);
}

.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: rgb(84 63 49 / 52%);
  background: var(--paper-50);
  box-shadow: 0 0 0 3px rgb(84 63 49 / 9%);
}

.field input[aria-invalid="true"]:focus-visible,
.field select[aria-invalid="true"]:focus-visible,
.field textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--tomato-600);
  box-shadow: 0 0 0 4px rgb(214 84 59 / 16%);
}

.recipe-switch {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: .75rem .9rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-100);
  color: var(--paper-700);
  font-size: .88rem;
  font-weight: 800;
}

.recipe-switch input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--tomato-600);
}

.recipe-progress {
  display: grid;
  gap: .6rem;
  padding: .15rem 0 .45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.recipe-progress__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.recipe-progress__copy span {
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 800;
}

.recipe-progress__copy strong {
  color: var(--tomato-700);
  font-size: .78rem;
  font-weight: 900;
}

.recipe-progress__track {
  height: .32rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(84 63 49 / 10%);
}

.recipe-progress__track span {
  display: block;
  inline-size: 50%;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tomato-500), var(--tomato-600));
  transition: inline-size var(--duration-normal) var(--ease-out);
}

.recipe-editor-step {
  display: grid;
  gap: .85rem;
}

.recipe-editor-step[hidden] {
  display: none !important;
}

.recipe-method-card {
  display: grid;
  gap: .3rem;
  min-height: 96px;
  padding: 1rem;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(255 253 247 / 98%), rgb(255 243 219 / 90%)),
    var(--surface-raised);
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
}

.recipe-method-card strong {
  font: 900 1.08rem/1.25 var(--font-body);
}

.recipe-method-card span {
  color: var(--text-secondary);
  font-size: .8rem;
  line-height: 1.55;
}

.recipe-method-card.is-disabled {
  cursor: not-allowed;
  opacity: .52;
  filter: grayscale(.2);
}

.recipe-cover-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  align-items: center;
}

.recipe-cover-actions .button {
  width: 100%;
  min-height: 48px;
  margin: 0;
}

.recipe-cover-actions:has(#regenerateRecipeCovers[hidden]) #generateRecipeCovers {
  grid-column: 1 / -1;
}

.recipe-cover-actions:has(#generateRecipeCovers[hidden]) #regenerateRecipeCovers {
  grid-column: 1 / -1;
}

.recipe-cover-grid {
  display: grid;
  gap: .65rem;
}

.recipe-cover-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-height: 88px;
  padding: .85rem;
  border: 1px dashed rgb(84 63 49 / 24%);
  border-radius: var(--radius-lg);
  background: rgb(255 248 232 / 70%);
  color: var(--text-secondary);
}

.recipe-cover-state > span {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 999px;
  border: 3px solid rgb(214 84 59 / 18%);
  border-top-color: var(--tomato-500);
  animation: recipe-cover-spin .82s linear infinite;
}

.recipe-cover-state strong {
  display: block;
  color: var(--text-primary);
  font-size: .95rem;
}

.recipe-cover-state p {
  margin: .14rem 0 0;
  font-size: .78rem;
  line-height: 1.55;
}

.recipe-cover-state--error > span {
  display: grid;
  place-items: center;
  border: 0;
  background: rgb(169 52 42 / 12%);
  animation: none;
}

.recipe-cover-state--error > span::before {
  content: "!";
  color: var(--status-error);
  font-weight: 900;
}

@keyframes recipe-cover-spin {
  to { transform: rotate(360deg); }
}

.recipe-cover-empty {
  display: none;
}

.recipe-cover-option {
  position: relative;
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-height: 104px;
  padding: .6rem;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
}

.recipe-cover-option.is-selected {
  border-color: rgb(214 84 59 / 74%);
  box-shadow: var(--shadow-rest), 0 0 0 4px rgb(214 84 59 / 10%);
}

.recipe-cover-preview {
  display: grid;
  place-items: end start;
  width: 5.75rem;
  height: 5.75rem;
  padding: .5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 72% 24%, var(--cover-glow, rgb(255 255 255 / 60%)) 0 18%, transparent 42%),
    linear-gradient(135deg, var(--cover-a, #f6c56e), var(--cover-b, #d65a3d));
  color: rgb(82 45 30 / 92%);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.25;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.recipe-cover-copy {
  display: grid;
  gap: .2rem;
}

.recipe-cover-copy strong {
  font: 900 .98rem/1.25 var(--font-body);
}

.recipe-cover-copy span {
  color: var(--text-secondary);
  font-size: .76rem;
  line-height: 1.5;
}

.recipe-detail-page {
  position: fixed;
  z-index: calc(var(--z-sticky) + 2);
  inset: 0;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin-inline: auto;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 1rem) 1rem 1.5rem;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 96%), rgb(255 248 232 / 96%)),
    var(--surface-canvas);
}

.recipe-detail {
  display: grid;
  gap: 1rem;
}

.recipe-detail__header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: .7rem;
  align-items: center;
}

.recipe-detail__header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font: 900 1.42rem/1.18 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-detail__cover {
  display: grid;
  place-items: end start;
  min-height: 180px;
  padding: 1.1rem;
  border: 2px solid var(--paper-700);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 72% 24%, var(--cover-glow, rgb(255 255 255 / 60%)) 0 18%, transparent 42%),
    linear-gradient(135deg, var(--cover-a, #f6c56e), var(--cover-b, #d65a3d));
  color: rgb(82 45 30 / 92%);
  box-shadow: var(--shadow-raised);
}

.recipe-detail__cover span {
  max-inline-size: 11rem;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
}

.recipe-detail__panel {
  padding: 1rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: var(--radius-lg);
  background: rgb(255 253 247 / 90%);
  box-shadow: var(--shadow-rest);
}

.recipe-detail__panel h3 {
  margin: 0 0 .7rem;
  color: var(--text-primary);
  font-size: 1.05rem;
}

.recipe-detail-scale {
  background:
    linear-gradient(180deg, rgb(255 248 232 / 96%), rgb(255 253 247 / 92%)),
    var(--surface-raised);
}

.recipe-detail-scale__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}

.recipe-detail-scale__head h3 {
  margin: 0;
}

.recipe-detail-scale__head span {
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.4;
  text-align: right;
}

.recipe-current-main-list {
  display: grid;
  gap: .55rem;
}

.recipe-current-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.8rem 2.7rem;
  align-items: center;
  gap: .55rem;
  min-height: 46px;
  padding: .45rem .55rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 74%);
}

.recipe-current-main span {
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-current-main input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: .7rem;
  background: var(--paper-50);
  color: var(--text-primary);
  font: 900 1rem/1 var(--font-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.recipe-current-main input:focus-visible {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.recipe-current-main input:disabled {
  opacity: .62;
}

.recipe-current-main strong {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding-inline: .15rem;
}

.recipe-detail__time,
.recipe-detail__intro,
.recipe-detail__note {
  margin: .75rem 0 0;
  color: var(--text-secondary);
  font-size: .85rem;
  line-height: 1.65;
}

.recipe-detail__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .85rem;
}

.recipe-detail__stats div {
  min-width: 0;
  padding: .7rem .5rem;
  border-radius: var(--radius-md);
  background: var(--paper-100);
  text-align: center;
}

.recipe-detail__stats span {
  display: block;
  color: var(--text-tertiary);
  font-size: .72rem;
}

.recipe-detail__stats strong {
  display: block;
  margin-top: .2rem;
  color: var(--text-primary);
  font-size: .8rem;
  line-height: 1.35;
}

.recipe-detail-tabs {
  margin-top: -.15rem;
}

.recipe-detail-tab-panel {
  display: grid;
  gap: 1rem;
}

.recipe-detail-tab-panel[hidden] {
  display: none;
}

.recipe-detail__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: .9rem;
  row-gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-detail__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: baseline;
  min-height: 34px;
  padding: .35rem 0;
  color: var(--text-primary);
  font-size: .92rem;
}

.recipe-detail__list li:nth-child(2n) {
  padding-left: .9rem;
  border-left: 1px solid rgb(84 63 49 / 12%);
}

.recipe-detail__list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-detail__list strong {
  color: var(--text-secondary);
  font-weight: 900;
  white-space: nowrap;
}

.recipe-detail__steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-detail-step {
  display: grid;
  gap: .6rem;
}

.recipe-detail-step__image {
  position: relative;
  min-height: 240px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0%) 0 52%, rgb(0 0 0 / 22%) 100%),
    var(--surface-sunken);
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow-rest);
}

.recipe-detail-step__image span,
.recipe-detail-step__copy > span {
  position: absolute;
  top: 1rem;
  left: 1rem;
  min-height: 2.2rem;
  padding: .35rem .7rem;
  border-radius: 12px;
  background: #ffd94e;
  color: #1f1c18;
  font-size: .95rem;
  font-weight: 900;
}

.recipe-detail-step__copy {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.recipe-detail-step__copy > span {
  position: static;
  justify-self: start;
  margin-bottom: .15rem;
}

.recipe-detail-step__copy p {
  margin: 0;
  color: var(--text-primary);
  font-size: .92rem;
  line-height: 1.7;
}

.recipe-detail__empty {
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text-secondary);
  box-shadow: var(--shadow-rest);
}

.recipe-cover-selected {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  min-height: 28px;
  padding: .35rem .62rem;
  border-radius: 999px;
  background: var(--tomato-600);
  color: var(--paper-50);
  font-size: .72rem;
  font-weight: 900;
}

.recipe-cover-large {
  display: grid;
  place-items: end start;
  min-height: min(62vw, 280px);
  margin: 0 var(--space-4);
  padding: 1.25rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 72% 24%, var(--cover-glow, rgb(255 255 255 / 60%)) 0 18%, transparent 42%),
    linear-gradient(135deg, var(--cover-a, #f6c56e), var(--cover-b, #d65a3d));
  color: rgb(82 45 30 / 92%);
  font-size: 1.15rem;
  font-weight: 900;
  box-shadow: var(--shadow-rest);
}

.recipe-number-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

.unit-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  border: 1px solid rgb(84 63 49 / 24%);
  border-radius: var(--radius-md);
  background: rgb(255 253 247 / 92%);
  box-shadow: inset 0 1px 2px rgb(84 63 49 / 5%), 0 1px 0 rgb(255 255 255 / 80%);
}

.unit-input input {
  min-height: 50px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.unit-input span {
  padding: 0 .85rem 0 .4rem;
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 900;
}

.recipe-dynamic-section {
  display: grid;
  gap: .65rem;
  padding: .8rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--paper-100);
}

.recipe-dynamic-section.is-invalid {
  border-color: var(--tomato-600);
  box-shadow: 0 0 0 4px rgb(214 84 59 / 14%);
}

.recipe-dynamic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.recipe-dynamic-head h3 {
  margin: 0;
  font: 900 1rem/1.25 var(--font-body);
}

.recipe-dynamic-hint {
  margin: -.25rem 0 0;
  color: var(--text-secondary);
  font-size: .75rem;
  line-height: 1.5;
}

.recipe-dynamic-head .button {
  min-height: 38px;
  width: auto;
  padding: 0 .75rem;
  border-radius: var(--radius-sm);
  font-size: .76rem;
}

.recipe-ingredient-list,
.recipe-step-list {
  display: grid;
  gap: .65rem;
}

.recipe-ingredient-row,
.recipe-step-row {
  display: grid;
  gap: .55rem;
  padding: .7rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.recipe-ingredient-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px;
  align-items: end;
}

.recipe-ingredient-row .field:first-child {
  grid-column: 1 / -1;
}

.recipe-ingredient-row .field,
.recipe-step-row .field { gap: .25rem; }

.recipe-ingredient-row input,
.recipe-ingredient-row select,
.recipe-step-row input[type="text"],
.recipe-step-row textarea {
  width: 100%;
  min-height: 42px;
  padding: .55rem .65rem;
  border: 1px solid rgb(84 63 49 / 20%);
  border-radius: var(--radius-sm);
  background: rgb(255 253 247 / 92%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .88rem;
}

.recipe-ingredient-row select {
  padding: .45rem .55rem;
}

.recipe-remove-row {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  border: 1px solid rgb(214 84 59 / 22%);
  border-radius: var(--radius-sm);
  background: var(--tomato-50);
  color: var(--tomato-700);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}

.recipe-step-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.recipe-step-row__head strong {
  font-size: .88rem;
}

.recipe-step-tools {
  display: flex;
  gap: .35rem;
}

.recipe-step-tools button {
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-weight: 900;
  cursor: pointer;
}

.recipe-step-row textarea {
  min-height: 78px;
  resize: vertical;
}

.recipe-step-upload {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: .65rem;
  min-height: 58px;
  padding: .55rem .65rem;
  border: 1px dashed rgb(84 63 49 / 22%);
  border-radius: var(--radius-md);
  background: rgb(255 248 232 / 58%);
  cursor: pointer;
}

.recipe-step-upload input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.recipe-step-upload span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--paper-200);
  color: var(--tomato-700);
  font-size: 1.2rem;
  font-weight: 900;
}

.recipe-step-upload strong {
  font-size: .84rem;
}

.recipe-step-upload small {
  color: var(--text-secondary);
  font-size: .72rem;
}

@media (min-width: 380px) {
  .recipe-number-grid { grid-template-columns: repeat(2, 1fr); }
}

.recipe-editor-footer {
  grid-template-columns: 1fr 1fr;
}

.recipe-editor-footer--page {
  position: fixed;
  right: max(0px, calc((100vw - 430px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 430px) / 2));
  z-index: calc(var(--z-sticky) + 3);
  margin: 0;
  padding: .75rem var(--space-4) calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(84 63 49 / 12%);
  background: rgb(255 253 247 / 92%);
  backdrop-filter: blur(10px);
}

.recipe-editor-footer .button:disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
}

.recipe-editor-footer #recipeEditorSave {
  grid-column: auto;
}

.choice-list {
  display: grid;
  gap: .65rem;
  padding: .25rem var(--space-4) var(--space-4);
}
.choice-card {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-height: 78px;
  padding: .7rem .8rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-rest);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}
.choice-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--paper-200);
}
.choice-card--primary .choice-icon { background: var(--action-primary); color: var(--paper-50); }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: 1rem; }
.choice-card small { margin-top: .2rem; color: var(--text-secondary); font-size: .7rem; line-height: 1.45; }

.menu-picker-page {
  position: relative;
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) 0 calc(5.75rem + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgb(255 237 202 / 13%), transparent 28%),
    radial-gradient(circle at 88% 20%, rgb(217 147 73 / 18%), transparent 24%),
    linear-gradient(180deg, #684228 0%, #5a3825 52%, #50311f 100%);
}

.menu-picker-head {
  height: 56px;
  padding: .15rem 1.1rem 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
  color: var(--paper-50);
}

.menu-picker-back {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: rgb(255 248 232 / 10%);
  color: var(--paper-50);
  font-size: 1.4rem;
  font-weight: 900;
}

.menu-picker-head h2 {
  margin: 0;
  color: var(--paper-50);
  font-size: 1.04rem;
  line-height: 1.18;
  font-weight: 900;
}

.menu-picker-head p {
  margin: .2rem 0 0;
  color: rgb(255 248 232 / 72%);
  font-size: .72rem;
  line-height: 1.35;
}

.menu-picker-count {
  padding-top: .2rem;
  color: var(--paper-50);
  font-size: .86rem;
  font-weight: 900;
  white-space: nowrap;
}

.menu-picker-book-wrap {
  position: relative;
  margin: .9rem 3.25rem 0 1.2rem;
  padding: .5rem .55rem .65rem .55rem;
  border-radius: 32px;
  background: linear-gradient(135deg, #e4a152, #c98238);
  box-shadow: 0 5px 0 rgb(53 31 20 / 40%);
}

.menu-picker-book {
  position: relative;
  height: min(70dvh, 592px);
  min-height: 520px;
  padding: .95rem .85rem 1rem;
  border: 4px solid #67452f;
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgb(103 69 47 / 7%) 0 13px, transparent 13px),
    linear-gradient(180deg, #fffdf6, #fff8e8);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 58%),
    inset 0 -18px 26px rgb(217 147 73 / 8%);
  transform-origin: 18% 50%;
}

.menu-picker-book::before {
  content: none;
}

.menu-picker-book::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  bottom: 1.65rem;
  width: 46px;
  height: 46px;
  border-bottom-right-radius: 17px;
  background: linear-gradient(135deg, transparent 0 49%, rgb(234 220 195 / 75%) 50%, #fffaf0 72%);
  opacity: .42;
  pointer-events: none;
}

.menu-picker-book.is-flipping {
  animation: menu-book-settle 360ms cubic-bezier(.2, .75, .18, 1);
}

.menu-picker-book-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: .8rem .72rem .9rem;
  display: flex;
  flex-direction: column;
  border: 2px solid #eadcc3;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 82%), rgb(255 248 232 / 54%)),
    repeating-linear-gradient(180deg, transparent 0 42px, rgb(231 207 171 / 15%) 43px 44px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 65%);
  overflow: hidden;
}

.menu-picker-book-content::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48px;
  height: 48px;
  border-bottom-right-radius: 18px;
  background: linear-gradient(135deg, transparent 0 49%, rgb(234 220 195 / 58%) 50%, #fffaf0 72%);
  opacity: .34;
  pointer-events: none;
}

.menu-picker-turn-sheen {
  position: absolute;
  z-index: 5;
  top: 5.15rem;
  bottom: 1.7rem;
  right: 1.55rem;
  width: 30px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgb(255 253 247 / 0), rgb(255 248 232 / 74%) 44%, rgb(154 123 88 / 18%) 100%);
  box-shadow: -7px 0 12px rgb(103 69 47 / 12%);
  opacity: 0;
  pointer-events: none;
  transform-origin: right center;
  transform: translateX(12px) scaleX(.7);
}

.menu-picker-book.is-flipping .menu-picker-turn-sheen {
  animation: menu-page-turn 360ms cubic-bezier(.2, .75, .18, 1);
}

.menu-picker-book.is-flipping .menu-picker-book-content {
  animation: menu-content-turn 360ms cubic-bezier(.2, .75, .18, 1);
}

.menu-picker-book.is-stpageflipping .menu-picker-book-content {
  visibility: hidden;
}

.menu-picker-flipbook {
  position: absolute;
  z-index: 8;
  inset: .95rem .85rem 1rem;
  transform: translateX(-.80rem);
  opacity: 0;
  pointer-events: none;
}

.menu-picker-flipbook * {
  pointer-events: none !important;
}

.menu-picker-flipbook.stf__parent {
  position: absolute !important;
  inset: .95rem .85rem 1rem !important;
  transform: translateX(-.80rem) !important;
}

.menu-picker-flipbook.is-active {
  opacity: 1;
}

.menu-picker-flip-page {
  width: 100%;
  height: 100%;
  background: transparent;
}

.menu-picker-flipbook .menu-picker-book-content {
  position: relative;
  width: 100%;
  height: 100%;
  visibility: visible;
}

.menu-picker-book.is-stpageflipping .menu-picker-flipbook .menu-picker-book-content {
  visibility: visible;
}

.menu-picker-flipbook .menu-picker-grid {
  overflow: hidden;
}

.menu-picker-days {
  position: relative;
  z-index: 2;
  flex: 0 0 40px;
  padding: 0 4px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 2px;
  border-radius: 18px;
  background: rgb(255 250 240 / 78%);
}

.menu-picker-day {
  min-width: 0;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #79563b;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.menu-picker-day.is-active {
  background: #c56f45;
  color: var(--paper-50);
  box-shadow: inset 0 -2px 0 rgb(84 48 30 / 18%);
}

.menu-picker-day:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.menu-picker-meals {
  position: relative;
  z-index: 2;
  flex: 0 0 37px;
  margin: .5rem 0 .55rem;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  border: 2px solid #eadcc3;
  border-radius: 14px;
  background: #fffaf1;
}

.menu-picker-meal {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8b6748;
  font-size: .8rem;
  font-weight: 900;
}

.menu-picker-meal.is-active {
  background: #ffe5d1;
  color: var(--tomato-600);
  box-shadow: inset 0 0 0 1px rgb(214 84 59 / 25%);
}

.menu-picker-search {
  position: relative;
  z-index: 2;
  flex: 0 0 40px;
  margin-bottom: .5rem;
  padding: 0 .75rem;
  display: flex;
  align-items: center;
  border: 2px solid #e5d5bd;
  border-radius: 13px;
  background: #fffdf7;
  color: #987250;
  font-size: .82rem;
  font-weight: 800;
}

.menu-picker-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #4a2d1c;
  font: inherit;
  font-size: 16px;
}

.menu-picker-search input::placeholder {
  color: #987250;
  opacity: .72;
}

.menu-picker-search:focus-within {
  border-color: rgb(214 84 59 / 54%);
  box-shadow: 0 0 0 3px rgb(214 84 59 / 14%);
}

.menu-picker-grid {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 104px);
  justify-content: space-between;
  align-content: start;
  gap: .62rem;
  padding: 0 4px .25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-picker-empty {
  grid-column: 1 / -1;
  min-height: 10rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: rgb(123 90 61 / 70%);
  text-align: center;
  font-size: .86rem;
  line-height: 1.6;
}

.menu-picker-dish {
  position: relative;
  min-width: 0;
  width: 104px;
  height: 114px;
  padding: 8px 7px 7px;
  border: 1.5px solid #dfd0b7;
  border-radius: 14px;
  background: #fff9ed;
  cursor: pointer;
  box-shadow: 0 2px 0 rgb(71 42 27 / 13%);
}

.menu-picker-dish.is-selected {
  border-color: #e59678;
  background: #fff7ec;
  box-shadow:
    inset 0 0 0 1px rgb(214 84 59 / 18%),
    0 2px 0 rgb(184 62 45 / 13%),
    0 7px 12px rgb(214 84 59 / 8%);
}

.menu-picker-dish.is-selected::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid #6a3d28;
  border-radius: 999px;
  background: var(--tomato-500);
  color: #fffdf7;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 0 rgb(71 42 27 / 16%);
}

.menu-picker-plate {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border: 1px solid rgb(103 69 47 / 10%);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 54% 54%, var(--dish-color, #df6b50) 0 18px, transparent 19px),
    radial-gradient(circle at 50% 58%, rgb(255 250 235 / 90%) 0 31px, rgb(226 192 126 / 80%) 32px 35px, transparent 36px),
    linear-gradient(90deg, #bfd8ad 0 52%, #ecd190 52% 100%);
  background-size: cover;
  background-position: center;
}

.menu-picker-dish strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #2f1d13;
  font-size: .8rem;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-picker-tabs {
  position: absolute;
  z-index: 4;
  right: -1.7rem;
  top: 10.3rem;
  display: grid;
  gap: .28rem;
}

.menu-picker-tab {
  position: relative;
  width: 34px;
  min-height: 58px;
  padding: .38rem 0;
  display: grid;
  place-items: center;
  border: 3px solid #72482d;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, #e5a557, #d99349);
  color: var(--paper-50);
  font-size: .75rem;
  font-weight: 1000;
  line-height: 1.12;
  text-orientation: upright;
  writing-mode: vertical-rl;
  box-shadow: 3px 3px 0 rgb(47 27 17 / 24%);
}

.menu-picker-tab.is-active {
  transform: translateX(3px);
  background: linear-gradient(180deg, #f0b464, #cf7d38);
}

.menu-picker-tab.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 9px;
  bottom: 9px;
  width: 10px;
  border-radius: 10px 0 0 10px;
  background: rgb(255 248 232 / 78%);
  box-shadow: inset 2px 0 0 rgb(103 69 47 / 18%);
}

.menu-picker-actions {
  position: fixed;
  right: max(1.5rem, calc((100vw - 430px) / 2 + 1.5rem));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  left: max(1.5rem, calc((100vw - 430px) / 2 + 1.5rem));
  z-index: calc(var(--z-sticky) + 4);
  display: grid;
  grid-template-columns: 1fr 1.33fr;
  gap: .75rem;
}

.menu-picker-actions .button {
  height: 48px;
  border-radius: 14px;
  font-size: 1.02rem;
  font-weight: 900;
}

.toast {
  position: fixed;
  z-index: 9999;
  right: 1rem;
  left: 1rem;
  top: calc(max(1rem, env(safe-area-inset-top)) + 3.5rem);
  max-width: 398px;
  margin-inline: auto;
  min-height: 44px;
  padding: .7rem .9rem;
  border: 1px solid rgb(255 253 247 / 16%);
  border-radius: .6rem;
  background: var(--paper-800);
  color: var(--paper-50);
  box-shadow: var(--shadow-overlay);
  font-size: .86rem;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-.75rem);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .menu-board:hover {
    color: var(--paper-900);
    text-shadow: 0 1px 0 rgb(255 253 247 / 80%);
  }
  .icon-button:hover,
  .button:hover,
  .choice-card:hover { background-color: var(--paper-200); }
  .nav-item:hover { background-color: rgb(84 63 49 / 6%); }
  .nav-item.is-active:hover { background-color: rgb(84 63 49 / 10%); }
  .setup-text-link:hover { color: var(--tomato-800); text-decoration: underline; text-underline-offset: 3px; }
  .button--primary:hover { background-color: var(--action-primary-hover); color: var(--paper-50); }
}

.icon-button:active,
.nav-item:active,
.button:active,
.choice-card:active,
.setup-text-link:active { transform: translateY(1px) scale(.99); }

.menu-board:active {
  transform: translateY(1px) perspective(300px) rotateY(-3deg) rotateZ(-2deg) scale(.99);
}

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes nav-pop-lock {
  0% {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  48% {
    transform: translateY(-3px) scale(1.07);
    filter: blur(.18px);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes register-sheet-in {
  from { opacity: 0; transform: translateY(2.25rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-book-settle {
  0% { transform: translateX(0) rotateZ(0deg); filter: brightness(1); }
  38% { transform: translateX(2px) rotateZ(-.18deg); filter: brightness(.99); }
  100% { transform: translateX(0) rotateZ(0deg); filter: brightness(1); }
}

@keyframes menu-content-turn {
  0% { transform: translateX(0); filter: brightness(1); }
  42% { transform: translateX(-3px); filter: brightness(.985); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes menu-page-turn {
  0% {
    opacity: 0;
    transform: translateX(18px) scaleX(.48);
  }
  28% {
    opacity: .72;
    transform: translateX(4px) scaleX(.86);
  }
  58% {
    opacity: .55;
    transform: translateX(-10px) scaleX(.64);
    box-shadow: -9px 0 14px rgb(103 69 47 / 14%);
  }
  100% {
    opacity: 0;
    transform: translateX(-24px) scaleX(.36);
  }
}

@media (max-width: 350px) {
  .today-menu { padding-inline: .75rem; }
  .sheet-footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .loading-mark { animation-duration: 800ms !important; animation-iteration-count: infinite !important; }
  .menu-board,
  .menu-board:hover,
  .menu-board:active { transform: perspective(300px) rotateY(-3deg) rotateZ(-2deg); }
  .menu-picker-book.is-flipping,
  .menu-picker-book.is-flipping .menu-picker-turn-sheen,
  .menu-picker-book.is-flipping .menu-picker-book-content { animation: none; }
}

.smart-recommendation-page,
.smart-result-page {
  min-height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) var(--space-4) calc(6.5rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12% 4%, rgb(214 84 59 / 8%) 0 88px, transparent 180px),
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.smart-recommendation-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-height: 48px;
}

.smart-recommendation-head h2 {
  margin: 0;
  font: 800 1.45rem/1.2 var(--font-display);
  letter-spacing: -.02em;
}

.smart-recommendation-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.45rem;
  font-weight: 900;
  cursor: pointer;
}

.smart-recommendation-body,
.smart-result-body {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.smart-scope-section,
.smart-rules-section {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 2px solid rgb(84 63 49 / 46%);
  border-radius: 22px 18px 24px 18px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 96%), rgb(255 248 232 / 92%)),
    var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.smart-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.smart-section-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.smart-section-head p {
  max-width: 17rem;
  margin: .25rem 0 0;
  color: var(--text-secondary);
  font-size: .73rem;
  line-height: 1.45;
}

.smart-scope-count {
  flex: 0 0 auto;
  color: var(--tomato-700);
  font-size: .76rem;
  font-weight: 900;
  white-space: nowrap;
}

.smart-scope-grid {
  display: grid;
  gap: .65rem;
}

.smart-scope-day {
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 14px;
  background: rgb(255 253 247 / 72%);
}

.smart-scope-day.is-disabled {
  opacity: .55;
}

.smart-scope-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding-inline: .15rem;
}

.smart-scope-day__head strong {
  font-size: .84rem;
  font-weight: 900;
}

.smart-scope-day__head small {
  color: var(--text-tertiary);
  font-size: .68rem;
}

.smart-scope-day__meals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.smart-scope-cell {
  display: grid;
  align-content: start;
  gap: .18rem;
  min-width: 0;
  min-height: 76px;
  padding: .55rem .45rem .5rem;
  border: 1px solid rgb(84 63 49 / 22%);
  border-radius: 12px;
  background: var(--surface-raised);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.smart-scope-cell.is-empty {
  background: rgb(255 242 236 / 66%);
}

.smart-scope-cell.is-selected {
  border-color: var(--tomato-500);
  background: var(--tomato-50);
  box-shadow: inset 0 0 0 1px rgb(214 84 59 / 18%);
}

.smart-scope-cell:disabled {
  cursor: not-allowed;
}

.smart-scope-cell__meal {
  color: var(--tomato-700);
  font-size: .68rem;
  font-weight: 900;
}

.smart-scope-cell strong {
  overflow: hidden;
  min-width: 0;
  font-size: .74rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-scope-cell small {
  color: var(--text-tertiary);
  font-size: .62rem;
}

.smart-rules-list {
  display: grid;
  gap: .65rem;
}

.smart-rule-card {
  padding: .7rem;
  border: 1px solid rgb(84 63 49 / 18%);
  border-radius: 14px;
  background: rgb(255 253 247 / 74%);
}

.smart-rule-card.is-disabled {
  opacity: .56;
}

.smart-rule-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}

.smart-rule-card__head strong {
  font-size: .86rem;
  font-weight: 900;
}

.smart-rule-card__head span {
  color: var(--text-tertiary);
  font-size: .66rem;
}

.smart-rule-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}

.smart-rule-field {
  display: grid;
  gap: .25rem;
  color: var(--text-secondary);
  font-size: .66rem;
  font-weight: 700;
}

.smart-rule-field input {
  width: 100%;
  min-height: 42px;
  padding: .35rem .25rem;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--surface-raised);
  color: var(--text-primary);
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
}

.smart-rule-field input:disabled {
  border-color: rgb(84 63 49 / 12%);
  background: rgb(244 229 200 / 44%);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.smart-rule-field input:focus-visible {
  outline: none;
  border-color: var(--tomato-500);
  box-shadow: var(--shadow-focus);
}

.smart-recommendation-actions {
  position: fixed;
  right: max(1rem, calc((100vw - 430px) / 2 + 1rem));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: max(1rem, calc((100vw - 430px) / 2 + 1rem));
  z-index: calc(var(--z-sticky) + 4);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: .65rem;
  width: min(calc(100% - 2rem), 398px);
  margin-inline: auto;
  padding: .45rem;
  border: 1px solid rgb(84 63 49 / 12%);
  border-radius: 18px;
  background: rgb(255 253 247 / 90%);
  box-shadow: var(--shadow-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.smart-recommendation-actions .button {
  min-height: 48px;
  border-radius: 13px;
  font-size: .95rem;
  font-weight: 900;
}

.smart-result-day-tabs {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  margin: -.15rem -.15rem .2rem;
  padding: .15rem .15rem .35rem;
  scrollbar-width: none;
}

.smart-result-day-tabs::-webkit-scrollbar {
  display: none;
}

.smart-result-day-tab {
  flex: 0 0 auto;
  min-width: 4.25rem;
  min-height: 48px;
  padding: .42rem .55rem;
  border: 1px solid rgb(84 63 49 / 22%);
  border-radius: 14px 12px 15px 12px;
  background: rgb(255 253 247 / 84%);
  color: var(--text-secondary);
  text-align: left;
  box-shadow: 0 1px 0 rgb(84 63 49 / 10%);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.smart-result-day-tab strong,
.smart-result-day-tab small {
  display: block;
}

.smart-result-day-tab strong {
  font-size: .78rem;
  font-weight: 900;
}

.smart-result-day-tab small {
  margin-top: .08rem;
  font-size: .62rem;
}

.smart-result-day-tab.is-active {
  border-color: var(--tomato-500);
  background: var(--tomato-50);
  color: var(--tomato-800);
  box-shadow: inset 0 0 0 1px rgb(214 84 59 / 14%), 0 2px 0 rgb(84 63 49 / 10%);
}

.smart-result-day-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .2rem .15rem .1rem;
  color: var(--text-secondary);
}

.smart-result-day-summary strong {
  color: var(--text-primary);
  font-size: .94rem;
  font-weight: 900;
}

.smart-result-day-summary span {
  font-size: .72rem;
}

.smart-result-group {
  display: grid;
  gap: .65rem;
  padding: .95rem;
  border: 2px solid rgb(84 63 49 / 42%);
  border-radius: 20px 16px 22px 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.smart-result-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.smart-result-group__head div {
  display: grid;
  gap: .18rem;
}

.smart-result-group__head strong {
  font-size: .92rem;
  font-weight: 900;
}

.smart-result-group__head small,
.smart-result-group__head > span {
  color: var(--text-secondary);
  font-size: .68rem;
}

.smart-result-rule-summary {
  flex: 0 0 auto;
  max-width: 9.5rem;
  color: var(--paper-700);
  font-size: .72rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.smart-result-dishes {
  display: grid;
  gap: .45rem;
}

.smart-result-loading-shell {
  display: grid;
  min-height: calc(100dvh - 220px);
  place-items: center;
}

.smart-result-loading {
  display: grid;
  justify-items: center;
  gap: .55rem;
  width: min(100%, 22rem);
  margin: 0 .25rem;
  padding: 2rem 1.2rem;
  border: 2px solid rgb(84 63 49 / 34%);
  border-radius: 22px 18px 24px 18px;
  background:
    radial-gradient(circle at 22% 16%, rgb(255 248 232 / 88%), transparent 34%),
    var(--surface-raised);
  box-shadow: var(--shadow-rest);
  color: var(--text-primary);
  text-align: center;
}

.smart-result-loading__mark {
  width: 2.4rem;
  height: 2.4rem;
  border: 3px solid rgb(214 84 59 / 18%);
  border-top-color: var(--tomato-500);
  border-radius: 999px;
  animation: smart-result-spin 780ms linear infinite;
}

.smart-result-loading strong {
  font-size: .98rem;
  font-weight: 900;
}

.smart-result-loading small {
  max-width: 13rem;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.55;
}

@keyframes smart-result-spin {
  to { transform: rotate(360deg); }
}

.smart-result-dish {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  min-height: 58px;
  padding: .45rem .5rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 12px;
  background: rgb(255 248 232 / 68%);
}

.smart-result-dish--missing {
  grid-template-columns: 42px minmax(0, 1fr);
  border-style: dashed;
  border-color: rgb(84 63 49 / 22%);
  background: rgb(244 229 200 / 42%);
  color: var(--text-secondary);
}

.smart-result-dish__art {
  display: block;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: 12px;
  background:
    radial-gradient(circle at 54% 54%, var(--dish-color, #df6b50) 0 9px, transparent 10px),
    radial-gradient(circle at 50% 58%, rgb(255 250 235 / 90%) 0 17px, rgb(226 192 126 / 80%) 18px 20px, transparent 21px),
    linear-gradient(90deg, #bfd8ad 0 52%, #ecd190 52% 100%);
}

.smart-result-dish__art--missing {
  background:
    linear-gradient(135deg, rgb(84 63 49 / 10%) 0 25%, transparent 25% 50%, rgb(84 63 49 / 10%) 50% 75%, transparent 75%),
    rgb(255 253 247 / 76%);
  background-size: 10px 10px;
}

.smart-result-dish__copy {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.smart-result-dish__copy small {
  color: var(--tomato-700);
  font-size: .64rem;
  font-weight: 800;
}

.smart-result-dish__copy strong {
  overflow: hidden;
  font-size: .84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-result-dish--missing .smart-result-dish__copy small {
  color: var(--text-tertiary);
}

.smart-result-dish--missing .smart-result-dish__copy strong {
  color: var(--text-secondary);
  font-weight: 800;
}

.smart-result-dish__replace {
  min-width: 58px;
  min-height: 40px;
  padding: .35rem .45rem;
  border: 1px solid rgb(214 84 59 / 30%);
  border-radius: 9px;
  background: var(--tomato-50);
  color: var(--tomato-700);
  font-size: .68rem;
  font-weight: 900;
  cursor: pointer;
}

.smart-result-warning {
  margin: 0;
  color: var(--amber-600, #9a641c);
  font-size: .7rem;
  line-height: 1.45;
}

.smart-result-warning p {
  margin: 0;
}

.smart-result-warning p + p {
  margin-top: .16rem;
}

.smart-result-warning--error {
  color: var(--tomato-700);
}

.smart-result-empty {
  padding: 2.5rem 1rem;
  color: var(--text-secondary);
  text-align: center;
  font-size: .88rem;
}

@media (max-width: 350px) {
  .smart-scope-day__meals,
  .smart-rule-controls { gap: .25rem; }
  .smart-scope-cell { padding-inline: .3rem; }
  .smart-scope-cell strong { font-size: .68rem; }
}

/* Fridge module */
.fridge-page {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
  padding: calc(env(safe-area-inset-top) + 1.05rem) 1.15rem calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 1.6rem) .95rem;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 4%, rgb(214 84 59 / 6%) 0 88px, transparent 180px),
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.fridge-add-page,
.fridge-editor-page,
.fridge-detail-page {
  padding: calc(env(safe-area-inset-top) + .8rem) 1rem calc(env(safe-area-inset-bottom) + 1rem);
}

.fridge-search,
.fridge-pantry-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.35rem;
  gap: .7rem;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  margin: 1rem 0 1.25rem .32rem;
}

.fridge-search {
  position: relative;
  z-index: 2;
  top: auto;
  margin-right: .55rem;
}

.fridge-pantry-search {
  grid-template-columns: minmax(0, 1fr) 4.35rem;
}

.fridge-search input,
.fridge-pantry-search input {
  min-width: 0;
  min-height: 3.2rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 1rem;
  padding: 0 1rem;
  background: rgb(255 253 247 / 94%);
  color: var(--text-primary);
  font: inherit;
  box-shadow: 0 5px 14px rgb(84 63 49 / 6%), inset 0 1px 0 rgb(255 255 255 / 72%);
}

.fridge-search button,
.fridge-pantry-search button {
  min-height: 3.2rem;
  border: 1px solid rgb(84 63 49 / 24%);
  border-radius: 1rem;
  background: var(--paper-50);
  color: var(--paper-700);
  font: inherit;
  font-weight: var(--weight-semibold);
  box-shadow: 0 5px 14px rgb(84 63 49 / 8%);
}

.fridge-search button svg {
  width: 1.2rem;
  height: 1.2rem;
}

.fridge-layout,
.fridge-pantry-shell {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
}

.fridge-content {
  display: grid;
  min-width: 0;
}

.fridge-pantry-shell {
  grid-template-columns: 4rem minmax(0, 1fr);
}

.fridge-tabs {
  position: sticky;
  top: calc(env(safe-area-inset-top) + .65rem);
  display: grid;
  gap: .45rem;
  max-height: calc(100dvh - 10rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 .5rem;
  margin: 0;
  scrollbar-width: none;
}

.fridge-tabs::-webkit-scrollbar { display: none; }

.fridge-tab {
  position: relative;
  width: 3.75rem;
  min-width: 0;
  min-height: 3.18rem;
  border: 1px solid rgb(84 63 49 / 13%);
  border-radius: 1rem .68rem .68rem 1rem;
  background: linear-gradient(180deg, rgb(255 253 247 / 88%), rgb(255 248 232 / 74%));
  color: var(--text-secondary);
  box-shadow: 0 3px 9px rgb(84 63 49 / 7%);
  font: inherit;
  text-align: center;
}

.fridge-tab span,
.fridge-tab small {
  display: block;
}

.fridge-tab span {
  font-size: .8rem;
  font-weight: var(--weight-semibold);
}

.fridge-tab small {
  margin-top: .08rem;
  color: inherit;
  opacity: .72;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
}

.fridge-tab.is-active {
  background: rgb(255 242 236 / 92%);
  color: var(--tomato-700);
  border-color: rgb(214 84 59 / 34%);
  box-shadow: inset 0 0 0 1px rgb(214 84 59 / 16%), 0 5px 12px rgb(84 63 49 / 7%);
}

.fridge-tab.is-active::before {
  content: "";
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  left: -.34rem;
  width: .18rem;
  border-radius: var(--radius-full);
  background: var(--tomato-500);
}

.fridge-list {
  display: grid;
  gap: .9rem;
  min-width: 0;
  padding-right: .35rem;
  overflow: hidden;
  box-sizing: border-box;
}

.fridge-swipe {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 1.18rem;
  background: var(--tomato-600);
  box-sizing: border-box;
}

.fridge-delete-swipe {
  position: absolute;
  inset: 0 0 0 auto;
  width: 4.4rem;
  border: 0;
  border-radius: 1.05rem;
  background: var(--tomato-600);
  color: var(--text-on-accent);
  font: inherit;
  font-weight: var(--weight-bold);
}

.fridge-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: .72rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 5.95rem;
  padding: .7rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 1.18rem;
  background: linear-gradient(180deg, rgb(255 253 247 / 98%), rgb(255 248 232 / 92%));
  color: var(--text-primary);
  box-shadow: 0 2px 0 rgb(84 63 49 / 7%), 0 10px 20px rgb(84 63 49 / 7%);
  text-align: left;
  font: inherit;
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  touch-action: pan-y;
}

.fridge-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fresh-left, 100%);
  min-width: 3rem;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(196 222 174 / 92%), rgb(232 244 219 / 74%));
  pointer-events: none;
  transition: width var(--duration-normal) var(--ease-out);
}

.status-soon.fridge-item::before,
.status-today.fridge-item::before {
  background: linear-gradient(90deg, rgb(245 202 126 / 94%), rgb(255 231 184 / 76%));
}

.status-expired.fridge-item::before {
  width: 100%;
  background: linear-gradient(90deg, rgb(238 174 158 / 96%), rgb(252 216 207 / 78%));
}

.fridge-swipe:has(.fridge-delete-swipe:focus-visible) .fridge-item,
.fridge-swipe.is-open .fridge-item {
  transform: translateX(-4.25rem);
}

@media (hover: none), (pointer: coarse) {
  .fridge-swipe:active .fridge-item {
    transform: translateX(-4.25rem);
  }
}

.fridge-food-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25rem;
  aspect-ratio: 1;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 38% 30%, rgb(255 255 255 / 72%), transparent 34%),
    linear-gradient(145deg, var(--food-color, #f8c58f), rgb(255 248 232 / 88%));
  color: rgb(84 63 49 / 76%);
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: var(--weight-bold);
  box-shadow: inset 0 -3px 5px rgb(84 63 49 / 8%), 0 7px 14px rgb(84 63 49 / 9%);
}

.fridge-food-art.is-generated {
  border-color: rgb(184 62 45 / 28%);
  background:
    radial-gradient(circle at 34% 26%, rgb(255 255 255 / 80%), transparent 30%),
    radial-gradient(circle at 68% 74%, rgb(255 238 197 / 78%), transparent 34%),
    linear-gradient(145deg, var(--food-color, #f8c58f), rgb(255 248 232 / 92%));
  box-shadow:
    inset 0 -4px 8px rgb(84 63 49 / 9%),
    0 8px 16px rgb(84 63 49 / 10%),
    0 0 0 3px rgb(184 62 45 / 7%);
}

.fridge-food-art.has-image {
  overflow: hidden;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fridge-food-art.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fridge-item__body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: .3rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 4rem;
  padding: .58rem .64rem;
  border-radius: .92rem;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
  align-self: center;
}

.fridge-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .36rem;
  min-width: 0;
}

.fridge-item__top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .96rem;
  line-height: 1.25;
}

.fridge-item__top em {
  flex: 0 0 auto;
  max-width: 4.85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: .66rem;
  font-style: normal;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-align: right;
}

.status-soon .fridge-item__top em,
.status-today .fridge-item__top em {
  color: var(--amber-600);
}

.status-expired .fridge-item__top em {
  color: var(--status-error);
}

.fridge-item__meta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: .74rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-detail__menu {
  justify-self: end;
}

.recipe-detail__more {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--paper-700);
  font-size: 1.1rem;
}

.recipe-detail__more:hover,
.recipe-detail__more:focus-visible,
.recipe-detail__more[aria-expanded="true"] {
  background: rgb(84 63 49 / 8%);
}

.recipe-detail__menu-panel {
  right: 0;
}

.fridge-floating-add {
  position: fixed;
  z-index: calc(var(--z-sticky) + 1);
  top: calc(100dvh - 13.5rem);
  right: max(.85rem, calc((100vw - 430px) / 2 + .85rem));
  display: inline-grid;
  place-items: center;
  width: 58px;
  min-height: 58px;
  padding: 0;
  border: 2px solid var(--tomato-700);
  border-radius: 999px;
  background: var(--tomato-500);
  color: var(--paper-50);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 0 rgb(100 36 29 / 32%), 0 14px 26px rgb(184 62 45 / 28%);
  transform: translateY(-50%);
}

.fridge-floating-add:active {
  transform: translateY(calc(-50% + 1px)) scale(.99);
}

.fridge-empty {
  display: grid;
  justify-items: center;
  gap: .5rem;
  min-height: 18rem;
  padding: 3rem 1rem;
  border: 2px dashed rgb(84 63 49 / 18%);
  border-radius: var(--radius-xl);
  background: rgb(255 253 247 / 58%);
  text-align: center;
}

.fridge-empty .fridge-food-art {
  width: 4rem;
}

.fridge-empty h3 {
  margin: .25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.fridge-empty p {
  max-width: 13rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.6;
}

.fridge-page-head {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
}

.fridge-page-head h2 {
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.38rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fridge-pantry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.fridge-pantry-card {
  display: grid;
  justify-items: center;
  gap: .4rem;
  min-height: 8.8rem;
  padding: .75rem .45rem;
  border: 2px solid var(--paper-700);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  color: var(--text-primary);
  box-shadow: var(--shadow-rest);
  font: inherit;
  text-align: center;
}

.fridge-pantry-card .fridge-food-art {
  width: 3.75rem;
}

.fridge-pantry-card strong {
  font-size: .95rem;
}

.fridge-pantry-card small {
  color: var(--text-secondary);
  font-size: .75rem;
}

.fridge-pantry-card--custom {
  border-style: dashed;
  background: rgb(255 248 232 / 72%);
}

.fridge-editor {
  min-height: 100%;
  padding-bottom: 6rem;
}

.fridge-editor .field {
  margin-bottom: .72rem;
}

.fridge-editor-hero,
.fridge-detail-card {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: .85rem;
  align-items: center;
  margin: 0 0 .9rem;
  padding: .8rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 1.2rem;
  background: var(--paper-50);
  box-shadow: 0 8px 20px rgb(84 63 49 / 7%);
  overflow: hidden;
}

.fridge-editor-hero .fridge-food-art,
.fridge-detail-art {
  width: 4rem;
}

.fridge-detail-art {
  flex: 0 0 4.25rem;
  width: 4.25rem;
}

.fridge-editor-hero strong,
.fridge-detail-card strong {
  display: block;
  margin-bottom: .2rem;
  font-size: 1.05rem;
}

.fridge-editor-hero small,
.fridge-detail-card small {
  color: var(--text-secondary);
  line-height: 1.5;
}

.fridge-image-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
  min-width: 0;
}

.fridge-image-actions .button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0 .72rem;
  border-radius: 999px;
  font-size: .78rem;
  white-space: nowrap;
}

.fridge-image-actions span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fridge-two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.fridge-detail-edit {
  min-height: 2.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  padding: 0 .8rem;
  background: var(--paper-50);
  color: var(--tomato-700);
  font: inherit;
  font-weight: var(--weight-semibold);
}

.fridge-detail-card {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-height: 6.8rem;
  padding: 1rem .95rem 1rem .85rem;
}

.fridge-detail-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: .42rem;
  flex: 1 1 auto;
  min-width: 0;
}

.fridge-detail-hero-copy strong {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.22rem;
  line-height: 1.25;
}

.fridge-detail-hero-copy small {
  color: var(--text-secondary);
  font-size: .9rem;
  line-height: 1.45;
  white-space: nowrap;
}

.fridge-detail-list {
  display: grid;
  gap: .55rem;
  margin: 0 0 .9rem;
  padding: .75rem .9rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 1rem;
  background: rgb(255 253 247 / 68%);
  box-shadow: 0 8px 20px rgb(84 63 49 / 7%);
}

.fridge-detail-list p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .5rem 0;
  border-bottom: 1px dashed rgb(84 63 49 / 14%);
}

.fridge-detail-list p:last-child {
  border-bottom: 0;
}

.fridge-detail-list span {
  color: var(--text-secondary);
}

.fridge-detail-list strong {
  max-width: 60%;
  text-align: right;
}

.fridge-detail-actions {
  display: grid;
  gap: .75rem;
}

.fridge-detail-actions .button,
.fridge-detail-delete {
  width: 100%;
  margin-inline: 0;
}

.fridge-editor .sheet-footer {
  left: max(1rem, calc((100vw - 430px) / 2 + 1rem));
  right: max(1rem, calc((100vw - 430px) / 2 + 1rem));
  width: auto;
  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom));
  border-top: 0;
  background: transparent;
  backdrop-filter: none;
}

/* My module · scheme A: warm amber identity card */
.profile-page--warm {
  position: relative;
  display: block;
  min-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
  padding: calc(env(safe-area-inset-top) + .85rem) 1.2rem calc(6.5rem + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.profile-hero-card {
  position: relative;
  display: grid;
  gap: .82rem;
  overflow: hidden;
  padding: 1rem;
  border: 2px solid #8e6320;
  border-radius: 26px;
  background: #f1b738;
  box-shadow: var(--shadow-raised);
}

.profile-hero-scan {
  position: absolute;
  top: .72rem;
  right: .72rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgb(142 99 32 / 34%);
  border-radius: 13px;
  background: rgb(255 249 236 / 82%);
  color: #6d401c;
  box-shadow: 0 2px 0 rgb(84 63 49 / 10%);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.profile-hero-scan:hover {
  background: #fffdf7;
}

.profile-hero-scan:active {
  transform: translateY(1px);
}

.profile-hero-scan:focus-visible,
.profile-logo-well--button:focus-visible {
  outline: 3px solid rgb(214 84 59 / 38%);
  outline-offset: 3px;
}

.profile-hero-scan svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.profile-hero-card::before,
.profile-hero-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border-radius: 50%;
}

.profile-hero-card::before {
  top: -2.6rem;
  right: -1rem;
  width: 8.2rem;
  height: 8.2rem;
  background: rgb(255 227 161 / 26%);
}

.profile-hero-card::after {
  right: 1.2rem;
  bottom: -2.8rem;
  width: 4.8rem;
  height: 4.8rem;
  background: rgb(217 139 39 / 16%);
}

.profile-hero-card__identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-right: 3.25rem;
}

.profile-logo-well {
  appearance: none;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  overflow: hidden;
  border: 2px solid rgb(142 99 32 / 44%);
  border-radius: 50%;
  background: var(--paper-50);
  box-shadow:
    0 2px 0 rgb(84 63 49 / 13%),
    0 7px 14px rgb(84 63 49 / 12%);
}

.profile-logo-well--button {
  padding: 0;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.profile-logo-well--button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 3px 0 rgb(84 63 49 / 13%),
    0 9px 16px rgb(84 63 49 / 14%);
}

.profile-logo-well img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-hero__copy {
  min-width: 0;
}

.profile-hero__copy h2 {
  overflow: hidden;
  margin: 0;
  color: #382b24;
  font: 800 1.42rem/1.24 var(--font-body);
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hero-card__divider {
  position: relative;
  z-index: 1;
  height: 1px;
  background: rgb(142 99 32 / 25%);
}

.profile-hero__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1.25fr .7fr;
  gap: .6rem;
}

.profile-hero__facts div {
  display: grid;
  gap: .18rem;
  min-width: 0;
}

.profile-hero__facts span {
  color: #654616;
  font-size: .66rem;
}

.profile-hero__facts strong {
  overflow: hidden;
  color: #382b24;
  font-size: .78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page--warm .profile-entry-list {
  display: grid;
  gap: .62rem;
  margin-top: .68rem;
}

.profile-page--warm .profile-entry {
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  min-height: 72px;
  padding: .68rem .7rem .68rem .55rem;
  border: 1px solid var(--border-default);
  border-radius: 18px 14px 18px 14px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.profile-page--warm .profile-entry:hover {
  background: #fffaf0;
}

.profile-page--warm .profile-entry:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgb(84 63 49 / 12%), 0 4px 10px rgb(84 63 49 / 7%);
}

.profile-page--warm .profile-entry__icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #f8dfd4;
  color: var(--tomato-700);
}

.profile-page--warm .profile-entry--space .profile-entry__icon {
  background: #e8e0c7;
  color: var(--paper-700);
}

.profile-page--warm .profile-entry--model .profile-entry__icon {
  background: #ead9bd;
  color: var(--paper-700);
}

.profile-page--warm .profile-entry--health .profile-entry__icon {
  background: #e4ead2;
  color: var(--green-600);
}

.profile-page--warm .profile-entry__copy strong {
  font-size: .98rem;
  font-weight: 800;
}

.profile-page--warm .profile-entry__copy small {
  font-size: .72rem;
}

.profile-page--warm .profile-entry__chevron {
  color: var(--tomato-700);
  font-size: 1.55rem;
}

.secondary-page.profile-account-page,
.secondary-page.profile-space-page,
.secondary-page.model-config-page,
.secondary-page.health-analysis-page {
  min-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
  padding: calc(env(safe-area-inset-top) + .85rem) 1.2rem calc(6.5rem + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.secondary-page__header--warm {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 60px;
  margin-bottom: 1rem;
}

.secondary-page__header--warm > div {
  min-width: 0;
  text-align: center;
}

.secondary-page__header--warm .profile-section-label {
  margin-bottom: .15rem;
  font-size: .64rem;
  letter-spacing: .1em;
}

.secondary-page__header--warm h1 {
  font-size: 1.45rem;
}

.secondary-page__stamp {
  justify-self: end;
  color: var(--paper-400);
  font: 700 .78rem/1 var(--font-body);
  letter-spacing: .1em;
}

.secondary-page__header--warm .secondary-page__back {
  justify-self: start;
  color: var(--paper-700);
}

.secondary-page__header--warm .secondary-page__back:active {
  transform: translateY(1px);
}

.secondary-page.profile-account-page .profile-panel,
.secondary-page.profile-space-page .profile-panel,
.secondary-page.model-config-page .profile-panel {
  border: 1px solid var(--border-default);
  border-radius: 20px 16px 22px 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.profile-account-panel {
  padding: 1rem;
}

.profile-account-list {
  display: grid;
  border-top: 1px dashed rgb(84 63 49 / 22%);
}

.profile-account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 68px;
  padding: .65rem 0;
  border: 0;
  border-bottom: 1px dashed rgb(84 63 49 / 22%);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);
}

.profile-account-row:last-child {
  border-bottom: 0;
}

.profile-account-row__label {
  color: var(--text-secondary);
  font-size: .88rem;
  font-weight: 600;
}

.profile-account-row__value {
  min-width: 0;
  max-width: 190px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: .92rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-account-row__value--avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: visible;
}

.profile-account-row__value--avatar img {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 50%;
  background: var(--paper-100);
  object-fit: cover;
  box-shadow: 0 2px 0 rgb(84 63 49 / 10%);
}

.profile-account-row__chevron {
  color: var(--paper-500);
  font-size: 1.55rem;
  line-height: 1;
  text-align: right;
}

.profile-account-row:hover {
  background: rgb(244 229 200 / 28%);
}

.profile-account-row:active {
  transform: translateY(1px);
}

.profile-account-row:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}

.profile-account-page .profile-action-stack,
.model-config-page .profile-action-stack {
  gap: .65rem;
  margin-top: 1rem;
}

.profile-account-page .profile-action-stack .button,
.model-config-page .profile-action-stack .button {
  min-height: 52px;
}

.profile-account-page .button--secondary,
.model-config-page .button--secondary {
  background: var(--surface-raised);
}

.profile-account-page .button--quiet,
.profile-account-page .button--quiet {
  border: 1px solid var(--border-default);
  background: #f6ead7;
  color: var(--text-primary);
}

.profile-account-page .button--danger-quiet {
  border: 1px solid rgb(184 62 45 / 32%);
  background: var(--surface-raised);
  color: var(--tomato-700);
}

.profile-edit-dialog {
  width: min(calc(100% - 1rem), 414px);
  max-height: min(88dvh, 680px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.profile-edit-dialog[open] {
  animation: sheet-in var(--duration-slow) var(--ease-out);
}

.profile-edit-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(88dvh, 680px);
  overflow: hidden;
  overscroll-behavior: contain;
}

.profile-edit-header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: rgb(255 253 247 / 96%);
}

.profile-edit-header p {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.45;
}

.profile-edit-fields {
  display: grid;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
}

.profile-edit-fields--avatar {
  gap: .65rem;
}

.profile-edit-label {
  margin: 0;
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 700;
}

.profile-edit-hint {
  color: var(--text-tertiary);
  font-size: .74rem;
}

.profile-edit-actions {
  position: static;
  z-index: 3;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  padding: .85rem 1rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  box-shadow: 0 -8px 18px rgb(84 63 49 / 10%);
}

.profile-edit-actions .button {
  width: 100%;
  margin: 0;
}

.profile-space-panel {
  display: grid;
  gap: .95rem;
  padding: 1rem;
}

.profile-space-heading h2 {
  font-size: 1.28rem;
}

.profile-space-empty {
  display: grid;
  gap: .9rem;
  padding: .95rem;
  border: 1px dashed #d7c1a3;
  border-radius: 16px 13px 17px 13px;
  background: #fffaf0;
}

.profile-space-empty p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.55;
}

.profile-space-empty .button {
  width: 100%;
  min-height: 54px;
  border-radius: 16px 13px 17px 13px;
}

.profile-space-summary {
  display: grid;
  gap: .85rem;
}

.profile-space-summary[hidden],
.profile-space-empty[hidden] {
  display: none !important;
}

.profile-space-members {
  display: grid;
  gap: .24rem;
  padding: .15rem .15rem 0;
}

.profile-space-members strong {
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 800;
}

.profile-space-qr-card {
  margin-top: 0;
}

.profile-space-status-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: .75rem;
  line-height: 1.5;
}

.model-config-panel {
  padding: 1rem;
}

.model-config-list {
  gap: .72rem;
  margin-top: 1rem;
}

.model-config-item {
  gap: .62rem;
  padding: .8rem;
  border: 1px solid #d9c5a7;
  border-radius: 16px 13px 17px 13px;
  background: #fffdf7;
  box-shadow: 0 2px 0 rgb(84 63 49 / 8%);
}

.model-config-item h3 {
  font-size: .92rem;
}

.model-config-item p {
  font-size: .68rem;
}

.model-config-item label {
  gap: .25rem;
  font-size: .69rem;
}

.model-config-item select {
  min-height: 42px;
  border-color: rgb(84 63 49 / 22%);
  border-radius: 10px;
  background: #fffaf0;
  font-size: .8rem;
}

.model-config-actions {
  margin-top: .9rem;
}

.model-config-actions .button {
  min-height: 54px;
}

.health-analysis-subtitle {
  overflow: hidden;
  margin: .18rem 0 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-goal-card,
.health-analysis-panel,
.health-score-card {
  border: 1px solid var(--border-default);
  border-radius: 18px 14px 20px 14px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.health-goal-card {
  display: grid;
  gap: .75rem;
  padding: .85rem;
}

.health-goal-card__head,
.health-analysis-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.health-goal-card__head h2,
.health-analysis-panel__head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: .98rem;
  line-height: 1.3;
}

.health-goal-card__head span,
.health-analysis-panel__head span {
  color: var(--text-tertiary);
  font-size: .68rem;
  line-height: 1.4;
  text-align: right;
}

.health-goal-tabs {
  gap: .35rem;
}

.health-goal-tabs .segmented-tab {
  min-width: 0;
  padding-inline: .45rem;
  white-space: normal;
}

.health-refresh-button {
  width: 100%;
  min-height: 46px;
  margin-top: .72rem;
  border-width: 2px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 90%), rgb(255 248 232 / 88%)),
    var(--surface-raised);
  color: var(--tomato-700);
  font-weight: 800;
}

.health-analysis-content {
  display: grid;
  gap: .72rem;
  margin-top: .72rem;
}

.health-macro-card {
  position: relative;
  overflow: hidden;
  padding: .95rem;
  border: 2px solid var(--border-strong);
  border-radius: 20px 15px 22px 15px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 92%), rgb(255 248 232 / 86%)),
    var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.health-macro-card::before {
  position: absolute;
  inset: .55rem .65rem auto;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, rgb(84 63 49 / 30%) 0 7px, transparent 7px 13px);
  content: "";
  pointer-events: none;
}

.health-macro-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.4rem;
}

.health-macro-card__top h2 {
  margin: .5rem 0 0;
  color: var(--text-primary);
  font-size: 1.08rem;
  line-height: 1.2;
}

.health-macro-card__top strong {
  color: var(--tomato-600);
  font-size: 2rem;
  line-height: 1;
  font-family: var(--font-display);
}

.health-macro-card__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  margin-top: .35rem;
}

.health-macro-ring {
  display: grid;
  place-items: center;
  width: 6.7rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface-raised) 0 48%, transparent 49%),
    conic-gradient(
      #d9b870 0deg var(--macro-carbs, 0deg),
      var(--tomato-500) var(--macro-carbs, 0deg) var(--macro-protein, 0deg),
      #8f7660 var(--macro-protein, 0deg) var(--macro-fat, 0deg),
      rgb(231 207 171 / 38%) var(--macro-fat, 0deg) 360deg
    );
  box-shadow: inset 0 0 0 1px rgb(84 63 49 / 10%);
}

.health-macro-ring span {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.health-macro-list {
  display: grid;
  gap: .58rem;
  margin: 0;
}

.health-macro-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
}

.health-macro-list dt {
  display: flex;
  align-items: center;
  gap: .42rem;
  min-width: 0;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.35;
}

.health-macro-list i {
  width: .85rem;
  height: .85rem;
  border-radius: .22rem;
  flex: 0 0 auto;
}

.health-macro-list i.is-carbs { background: #d9b870; }
.health-macro-list i.is-protein { background: var(--tomato-500); }
.health-macro-list i.is-fat { background: #8f7660; }

.health-macro-list dd {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin: 0;
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.health-macro-list dd span {
  display: block;
  min-width: 2.5rem;
  color: var(--text-secondary);
  text-align: right;
}

.health-macro-card > p {
  position: relative;
  z-index: 1;
  margin: .8rem 0 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.5;
}

.health-dietitian-card {
  display: grid;
  gap: .82rem;
  margin-top: .6rem;
  padding: .95rem;
  border: 2px solid var(--border-strong);
  border-radius: 21px 16px 23px 16px;
  background:
    linear-gradient(180deg, rgb(255 253 247 / 92%), rgb(255 248 232 / 88%)),
    var(--surface-raised);
  box-shadow: var(--shadow-rest);
}

.health-dietitian-title {
  display: flex;
  align-items: center;
  gap: .52rem;
  min-height: 2rem;
  padding-bottom: .58rem;
  border-bottom: 1px dashed rgb(84 63 49 / 24%);
}

.health-dietitian-title span {
  width: .46rem;
  height: .46rem;
  border: 2px solid var(--tomato-600);
  border-radius: 50%;
  background: var(--tomato-100);
}

.health-dietitian-title h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
}

.health-dietitian-body {
  display: grid;
  gap: 1rem;
}

.health-ai-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-height: 2.25rem;
  padding: .44rem .6rem;
  border: 1px solid rgb(84 63 49 / 14%);
  border-radius: 12px 9px 13px 9px;
  background: #fffaf0;
  color: var(--text-secondary);
}

.health-ai-status span {
  position: relative;
  min-width: 0;
  padding-left: .72rem;
  overflow: hidden;
  color: var(--text-primary);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.health-ai-status span::before {
  position: absolute;
  top: .48em;
  left: 0;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--tomato-500);
  content: "";
}

.health-ai-status small {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: .66rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.health-ai-status.is-analyzing span::before {
  background: var(--amber-600);
}

.health-ai-status.is-ready span::before,
.health-ai-status.is-local span::before {
  background: var(--green-600);
}

.health-ai-status.is-failed span::before {
  background: var(--red-600);
}

.health-dietitian-body section {
  display: grid;
  gap: .35rem;
}

.health-dietitian-body h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: .95rem;
  line-height: 1.4;
}

.health-dietitian-body p {
  margin: 0;
  color: var(--text-primary);
  font-size: .84rem;
  line-height: 1.8;
}

.health-score-card {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .9rem;
  background:
    linear-gradient(135deg, rgb(232 244 219 / 82%), rgb(255 253 247 / 92%)),
    var(--surface-raised);
}

.health-score-card div {
  display: grid;
  place-items: center;
  gap: .16rem;
  min-height: 5.1rem;
  border: 1px solid rgb(52 122 85 / 18%);
  border-radius: 17px 13px 18px 13px;
  background: rgb(255 253 247 / 76%);
}

.health-score-card span {
  color: var(--green-600);
  font-size: .68rem;
  font-weight: 800;
}

.health-score-card strong {
  color: var(--text-primary);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.health-score-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.55;
}

.health-analysis-panel {
  display: grid;
  gap: .72rem;
  padding: .85rem;
}

.health-structure-grid,
.health-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .48rem;
}

.health-structure-item,
.health-nutrition-grid div {
  min-width: 0;
  padding: .62rem .65rem;
  border: 1px solid rgb(84 63 49 / 12%);
  border-radius: 12px 10px 13px 10px;
  background: #fffaf0;
}

.health-structure-item span,
.health-nutrition-grid span {
  display: block;
  color: var(--text-secondary);
  font-size: .68rem;
  line-height: 1.35;
}

.health-structure-item strong,
.health-nutrition-grid strong {
  display: block;
  overflow: hidden;
  margin-top: .16rem;
  color: var(--text-primary);
  font-size: .9rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.health-structure-item.is-good strong {
  color: var(--green-600);
}

.health-structure-item.is-warn strong {
  color: var(--amber-600);
}

.health-analysis-note,
.health-ai-placeholder {
  margin: 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.5;
}

.health-advice-list {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.health-advice-list li {
  position: relative;
  padding: .58rem .64rem .58rem 1.65rem;
  border: 1px solid rgb(84 63 49 / 12%);
  border-radius: 12px 10px 13px 10px;
  background: #fffaf0;
  color: var(--text-primary);
  font-size: .76rem;
  line-height: 1.5;
}

.health-advice-list li::before {
  position: absolute;
  top: .72rem;
  left: .7rem;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--tomato-500);
  content: "";
}

@media (max-width: 360px) {
  .profile-page--warm,
  .secondary-page.profile-account-page,
  .secondary-page.profile-space-page,
  .secondary-page.model-config-page,
  .secondary-page.health-analysis-page {
    padding-inline: 1rem;
  }

  .profile-hero-card__identity {
    gap: .7rem;
  }

  .profile-logo-well {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .profile-hero__copy h2 {
    font-size: 1.28rem;
  }

  .profile-hero__facts {
    gap: .35rem;
  }
}

body:has(#foodLibraryPage.is-active) .bottom-nav,
body:has(#healthAnalysisPage.is-active) .bottom-nav {
  display: none;
}

.food-library-page {
  min-height: calc(100dvh - 68px - env(safe-area-inset-bottom));
  padding: calc(env(safe-area-inset-top) + .85rem) 1rem calc(6.5rem + env(safe-area-inset-bottom));
  background:
    repeating-linear-gradient(0deg, rgb(84 63 49 / 2%) 0 1px, transparent 1px 5px),
    var(--surface-canvas);
}

.food-library-page__header {
  margin-bottom: .85rem;
}

.food-library-page__header > div {
  min-width: 0;
}

.food-library-page__scope {
  overflow: hidden;
  margin: .22rem 0 0;
  color: var(--text-secondary);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-library-toolbar {
  display: grid;
  gap: .75rem;
}

.food-library-tabs {
  gap: .35rem;
}

.food-library-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

.food-library-tab.is-active {
  color: var(--tomato-700);
}

.food-library-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  gap: .55rem;
  margin: 0;
}

.food-library-search input {
  min-width: 0;
  min-height: 48px;
  padding: 0 .9rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
}

.food-library-search button {
  display: grid;
  place-items: center;
  min-height: 48px;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--paper-50);
  color: var(--paper-700);
}

.food-library-search button svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.food-library-summary {
  min-height: 1.25rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: .74rem;
  line-height: 1.45;
}

.food-library-list {
  display: grid;
  gap: .65rem;
  margin-top: .8rem;
}

.food-library-item {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: .72rem;
  align-items: center;
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--border-default);
  border-radius: 16px 13px 17px 13px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-rest);
  cursor: pointer;
  transition: transform var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.food-library-item.is-disabled {
  opacity: .58;
}

.food-library-item:active {
  transform: translateY(1px);
}

.food-library-item:focus-visible {
  outline: none;
  border-color: rgb(214 84 59 / 48%);
  box-shadow: var(--shadow-focus);
}

.food-library-art {
  display: grid;
  place-items: center;
  width: 3.4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 13px 10px 13px 10px;
  background: var(--paper-200);
  color: var(--paper-700);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.food-library-art.has-image {
  border-color: transparent;
  background: transparent;
}

.food-library-art img,
.food-library-art__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.food-library-art img {
  visibility: hidden;
}

.food-library-art img.is-loaded {
  visibility: visible;
}

.food-library-art__fallback {
  display: grid;
  place-items: center;
}

.food-library-art--generated {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 24%, var(--food-image-glow, rgb(255 255 255 / 68%)) 0 18%, transparent 42%),
    linear-gradient(135deg, var(--food-image-a, #f3c66e), var(--food-image-b, #d76445));
  color: rgb(82 45 30 / 92%);
}

.food-library-art--generated::before {
  content: "";
  position: absolute;
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: rgb(255 253 247 / 42%);
  box-shadow: 0 2px 0 rgb(84 63 49 / 12%);
}

.food-library-art__generated-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgb(255 253 247 / 72%);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
}

.food-library-item__body {
  display: grid;
  gap: .22rem;
  min-width: 0;
}

.food-library-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .45rem;
  min-width: 0;
}

.food-library-item__top h3 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  font-size: .96rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-library-item__scope {
  flex: 0 0 auto;
  color: var(--paper-500);
  font-size: .66rem;
  font-weight: 700;
}

.food-library-item__body p {
  overflow: hidden;
  margin: 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-library-item__nutrition {
  color: var(--green-600);
  font-size: .7rem;
  line-height: 1.35;
}

.food-library-item__nutrition.is-missing {
  color: var(--amber-600);
}

.food-library-item__menu {
  position: relative;
  align-self: start;
  cursor: default;
}

.food-library-item__more {
  min-width: 34px;
  min-height: 34px;
  color: var(--paper-700);
}

.food-library-item__menu-panel {
  top: calc(100% + .25rem);
  min-width: 108px;
}

.food-library-detail-dialog {
  width: min(calc(100% - 1rem), 414px);
  max-height: min(86dvh, 640px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
}

.food-library-detail-dialog[open] {
  animation: sheet-in var(--duration-slow) var(--ease-out);
}

.food-library-detail-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(86dvh, 640px);
  overflow: hidden;
}

.food-library-detail-header {
  position: sticky;
  z-index: 2;
  top: 0;
  background: rgb(255 253 247 / 96%);
}

.food-library-detail-header p {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .76rem;
  line-height: 1.45;
}

.food-library-detail-content {
  display: grid;
  gap: .85rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .95rem;
}

.food-library-detail-hero {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: .85rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 18px 14px 20px 14px;
  background: #fffaf0;
  box-shadow: 0 8px 20px rgb(84 63 49 / 7%);
}

.food-library-detail-hero .food-library-art {
  width: 4.5rem;
  border-radius: 16px 12px 16px 12px;
}

.food-library-detail-hero h3 {
  overflow: hidden;
  margin: 0;
  color: var(--text-primary);
  font-size: 1.22rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-library-detail-hero p {
  margin: .35rem 0 0;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.45;
}

.food-library-detail-section {
  display: grid;
  gap: .7rem;
  padding: .85rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 16px 13px 17px 13px;
  background: rgb(255 253 247 / 70%);
}

.food-library-detail-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.food-library-detail-section__head h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: .98rem;
  line-height: 1.3;
}

.food-library-detail-section__head span {
  color: var(--text-tertiary);
  font-size: .72rem;
}

.food-library-detail-nutrition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
}

.food-library-detail-nutrition div {
  min-width: 0;
  padding: .62rem .65rem;
  border: 1px solid rgb(84 63 49 / 12%);
  border-radius: 12px 10px 12px 10px;
  background: var(--paper-50);
}

.food-library-detail-nutrition dt {
  color: var(--text-secondary);
  font-size: .7rem;
  line-height: 1.35;
}

.food-library-detail-nutrition dd {
  margin: .16rem 0 0;
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.food-library-detail-nutrition dd.is-missing {
  color: var(--amber-600);
  font-size: .82rem;
  font-weight: 700;
}

.food-library-detail-source {
  display: grid;
  gap: .25rem;
  padding: .75rem .85rem;
  border: 1px dashed rgb(84 63 49 / 18%);
  border-radius: 14px 11px 14px 11px;
  background: rgb(244 229 200 / 42%);
}

.food-library-detail-source span {
  color: var(--text-tertiary);
  font-size: .7rem;
}

.food-library-detail-source strong {
  color: var(--text-secondary);
  font-size: .76rem;
  line-height: 1.45;
  font-weight: 600;
}

.food-library-empty {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 3rem 1rem;
  border: 1px dashed rgb(84 63 49 / 24%);
  border-radius: var(--radius-lg);
  background: rgb(255 253 247 / 62%);
  text-align: center;
}

.food-library-empty__mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: 50%;
  background: var(--paper-200);
  color: var(--paper-700);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}

.food-library-empty h2 {
  margin: .2rem 0 0;
  font: 800 1.2rem/1.3 var(--font-display);
}

.food-library-empty p {
  max-width: 16rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: .78rem;
  line-height: 1.55;
}

.food-library-floating-add {
  top: auto;
  right: max(.85rem, calc((100vw - 430px) / 2 + .85rem));
  bottom: calc(5.9rem + env(safe-area-inset-bottom));
}

.food-library-editor-dialog {
  max-height: min(90dvh, 700px);
}

.food-library-nutrition-field {
  display: grid;
  gap: .55rem;
}

.food-library-nutrition-field__head {
  display: grid;
  gap: .2rem;
}

.food-library-nutrition-field__head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: .82rem;
  line-height: 1.35;
}

.food-library-nutrition-field__head p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.45;
}

.food-library-nutrition-grid {
  gap: .55rem .65rem;
}

.food-library-image-field {
  display: grid;
  gap: .55rem;
}

.food-library-image-field__head {
  display: grid;
  gap: .55rem;
}

.food-library-image-field__head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: .82rem;
  line-height: 1.35;
}

.food-library-image-field__head p,
.food-library-image-status {
  margin: .22rem 0 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.45;
}

.food-library-image-field__head .button {
  width: 100%;
  min-height: 44px;
  margin: 0;
}

.food-library-image-status {
  min-height: 1.05rem;
  margin: 0;
}

.food-library-image-grid {
  display: grid;
  gap: .45rem;
}

.food-library-image-state {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-height: 70px;
  padding: .65rem;
  border: 1px dashed rgb(84 63 49 / 24%);
  border-radius: var(--radius-md);
  background: rgb(255 248 232 / 70%);
}

.food-library-image-state > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid rgb(214 84 59 / 18%);
  border-top-color: var(--tomato-500);
  border-radius: 50%;
  animation: recipe-cover-spin .82s linear infinite;
}

.food-library-image-state strong {
  display: block;
  color: var(--text-primary);
  font-size: .82rem;
}

.food-library-image-state p {
  margin: .12rem 0 0;
  color: var(--text-secondary);
  font-size: .7rem;
  line-height: 1.45;
}

.food-library-image-state--error > span {
  border: 0;
  background: rgb(169 52 42 / 12%);
  color: var(--status-error);
  font-weight: 900;
  animation: none;
}

.food-library-image-option {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: .45rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--paper-50);
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
}

.food-library-image-option.is-selected {
  border-color: rgb(214 84 59 / 74%);
  box-shadow: var(--shadow-rest), 0 0 0 3px rgb(214 84 59 / 10%);
}

.food-library-image-option__preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 72% 24%, var(--food-image-glow, rgb(255 255 255 / 68%)) 0 18%, transparent 42%),
    linear-gradient(135deg, var(--food-image-a, #f3c66e), var(--food-image-b, #d76445));
  color: rgb(82 45 30 / 92%);
}

.food-library-image-option__preview::before {
  content: "";
  position: absolute;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  background: rgb(255 253 247 / 42%);
  box-shadow: 0 2px 0 rgb(84 63 49 / 12%);
}

.food-library-image-option__preview span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgb(255 253 247 / 78%);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
}

.food-library-image-option__copy {
  display: grid;
  gap: .18rem;
  min-width: 0;
}

.food-library-image-option__copy strong {
  overflow: hidden;
  font-size: .8rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.food-library-image-option__copy small {
  color: var(--text-secondary);
  font-size: .68rem;
  line-height: 1.4;
}

.food-library-image-option__selected {
  position: absolute;
  top: .35rem;
  right: .45rem;
  color: var(--tomato-700);
  font-size: .65rem;
  font-weight: 800;
}

.fridge-pantry-loading {
  display: grid;
  place-items: center;
  min-height: 7rem;
  border: 1px dashed rgb(84 63 49 / 24%);
  border-radius: var(--radius-lg);
  background: rgb(255 253 247 / 62%);
  color: var(--text-secondary);
  font-size: .82rem;
}

.recipe-ingredient-name-field {
  position: relative;
}

.food-match-list {
  display: grid;
  gap: .35rem;
  margin-top: .35rem;
}

.food-match-options {
  display: grid;
  gap: .3rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid rgb(84 63 49 / 16%);
  border-radius: var(--radius-sm);
  background: var(--paper-50);
}

.food-match-option {
  display: grid;
  gap: .12rem;
  min-height: 44px;
  padding: .45rem .5rem;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.food-match-option:active,
.food-match-option:focus-visible {
  background: var(--tomato-50);
}

.food-match-option strong {
  font-size: .78rem;
}

.food-match-option span,
.food-match-empty {
  color: var(--text-secondary);
  font-size: .68rem;
  line-height: 1.4;
}

.food-match-empty {
  margin: .15rem 0 0;
}

.recipe-ingredient-link-status {
  display: block;
  margin-top: .28rem;
  color: var(--text-tertiary);
  font-size: .68rem;
  line-height: 1.4;
}

.recipe-nutrition-panel {
  display: grid;
  gap: .8rem;
}

.recipe-nutrition-state {
  padding: .7rem .75rem;
  border: 1px dashed rgb(154 100 28 / 30%);
  border-radius: var(--radius-md);
  background: rgb(255 248 232 / 78%);
}

.recipe-nutrition-state.is-partial {
  border-color: rgb(52 122 85 / 26%);
  background: rgb(232 244 219 / 60%);
}

.recipe-nutrition-state strong {
  display: block;
  color: var(--amber-600);
  font-size: .84rem;
}

.recipe-nutrition-state.is-partial strong {
  color: var(--green-600);
}

.recipe-nutrition-state p {
  margin: .25rem 0 0;
  color: var(--text-secondary);
  font-size: .72rem;
  line-height: 1.5;
}

.recipe-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.recipe-nutrition-grid > div {
  display: grid;
  gap: .16rem;
  padding: .55rem .6rem;
  border: 1px solid rgb(84 63 49 / 12%);
  border-radius: var(--radius-sm);
  background: rgb(255 253 247 / 76%);
}

.recipe-nutrition-grid span {
  color: var(--text-secondary);
  font-size: .68rem;
}

.recipe-nutrition-grid strong {
  color: var(--text-primary);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.fridge-food-art__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgb(84 63 49 / 76%);
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: var(--weight-bold);
}