:root {
  color-scheme: light;
  --ink: #26383b; /* 深墨绿正文 */
  --muted: #7c8383; /* 次要文字 */
  --green: #77a875; /* 主品牌绿 */
  --green-strong: #4b8e68; /* 选中与按压状态 */
  --green-soft: #edf5e9; /* 浅绿分区背景 */
  --cream: #fbfaf7; /* 页面暖白背景 */
  --surface: #ffffff; /* 内容表面 */
  --line: rgba(49, 66, 64, 0.12); /* 分隔线与边框 */
  --danger: #b24d49; /* 危险操作 */
  --space-1: 4px; /* 紧凑间距 */
  --space-2: 8px; /* 基础间距 */
  --space-3: 12px; /* 控件内间距 */
  --space-4: 16px; /* 分组间距 */
  --space-5: 24px; /* 页面间距 */
  --space-6: 32px; /* 大区块间距 */
  --radius-sm: 8px; /* 小元素 */
  --radius-md: 12px; /* 图标底与输入框 */
  --radius-lg: 16px; /* 卡片与分组 */
  --radius-xl: 24px; /* 大容器 */
  --radius-pill: 999px; /* 胶囊与头像 */
  --text-xs: 12px; /* 辅助说明 */
  --text-sm: 14px; /* 次要正文 */
  --text-base: 16px; /* 正文 */
  --text-lg: 20px; /* 小标题 */
  --text-xl: 24px; /* 区块标题 */
  --text-2xl: 32px; /* 页面标题 */
  --text-3xl: 40px; /* 强调数字 */
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--cream); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { transition: none !important; animation: none !important; }
body.is-navigating { overflow: hidden; }

.app-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
  background: var(--cream);
}

.with-bottom-nav { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

.home-page {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  overflow: hidden;
}

.home-header { margin: 0; min-height: 48px; display: flex; align-items: center; }

.eyebrow {
  margin: 0;
  color: var(--green-strong);
  font-size: clamp(18px, 5.2vw, var(--text-xl));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

h1 { margin: 0; color: var(--ink); letter-spacing: -0.04em; }
.home-header h1 { font-size: var(--text-2xl); line-height: 1.1; }
.home-subtitle { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }
.fridge-link, .seasoning-link { display: block; color: inherit; text-decoration: none; }

.fridge-link {
  width: 100%;
  max-width: 380px;
  height: auto;
  min-height: 0;
  aspect-ratio: 769 / 942;
  margin: 0 auto;
  place-self: center;
  border-radius: var(--radius-xl);
  outline-offset: var(--space-1);
  transition: transform 160ms ease, filter 160ms ease;
}

.fridge-stage { position: relative; width: 100%; height: 100%; aspect-ratio: 769 / 942; }
.fridge-art { display: block; width: 100%; height: 100%; object-fit: contain; }

.fridge-shelves {
  position: absolute;
  z-index: 2;
  top: 12.8%;
  left: 13.9%;
  width: 45.6%;
  height: 73.8%;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  overflow: hidden;
  border-radius: var(--radius-md);
  pointer-events: none;
}

.shelf-preview {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  align-items: center;
  padding: var(--space-1) 12%;
  background: var(--surface);
  border: 1px solid var(--line);
}

.shelf-preview + .shelf-preview { border-top: 1px solid var(--line); }
.shelf-preview img, .shelf-fallback { width: min(82%, 44px); max-height: 52px; justify-self: center; object-fit: contain; }
.shelf-fallback { font-size: 36px; line-height: 1; text-align: center; }
.shelf-quantity { justify-self: center; font-size: clamp(15px, 4.2vw, var(--text-lg)); white-space: nowrap; }
.shelf-preview.more { display: grid; grid-template-columns: 1fr; place-items: center; }
.more-dots { font-size: clamp(var(--text-xl), 6.5vw, var(--text-2xl)); font-weight: 700; letter-spacing: 0.12em; transform: translateX(0.08em); }

.seasoning-link {
  position: relative;
  width: auto;
  max-width: min(89%, 350px);
  height: clamp(76px, 13svh, 112px);
  aspect-ratio: 612 / 250;
  margin: calc(var(--space-1) * -1) auto 0;
  border-radius: var(--radius-lg);
  outline-offset: var(--space-1);
  transition: transform 160ms ease, filter 160ms ease;
}

.seasoning-art { display: block; width: 100%; height: 100%; object-fit: contain; }

.seasoning-label {
  position: absolute;
  left: 13%;
  right: 8%;
  bottom: 9%;
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  align-items: center;
  gap: var(--space-2);
  font-size: clamp(var(--text-sm), 4.1vw, 18px);
  font-weight: 700;
}
.seasoning-label [data-i18n="home.mySeasonings"] { min-width: 0; font-size: clamp(var(--text-xs), 3.4vw, var(--text-sm)); white-space: nowrap; }

.seasoning-glyph { width: 32px; height: 32px; display: grid; place-items: center; color: var(--green-strong); }

.seasoning-glyph svg {
  width: var(--text-xl);
  height: var(--text-xl);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chevron { justify-self: end; font-size: var(--text-2xl); font-weight: 400; line-height: 0.8; }

.recommend-button {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  min-height: clamp(56px, 7.5svh, 64px);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--green);
  font-size: clamp(17px, 4.8vw, var(--text-lg));
  font-weight: 700;
  cursor: pointer;
}

.recommend-button > span { position: relative; z-index: 1; }
.recommend-button > span[aria-hidden="true"] { font-size: var(--text-2xl); font-weight: 400; }
.recommend-button.is-preparing { cursor: wait; }
.recommend-button.is-preparing::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  left: 0;
  width: 112%;
  border-radius: 0 50% 50% 0;
  background: var(--green-strong);
  transform: translateX(-104%);
  animation: recommend-wave-fill 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.recommend-loading-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.recommend-loading-content svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cooking-icon-bob 560ms ease-in-out both;
}

.recommend-loading-dots { display: flex; align-items: center; gap: var(--space-1); }
.recommend-loading-dots i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; animation: recommend-dot-jump 480ms ease-in-out infinite alternate; }
.recommend-loading-dots i:nth-child(2) { animation-delay: 100ms; }
.recommend-loading-dots i:nth-child(3) { animation-delay: 200ms; }
.fridge-link:hover, .seasoning-link:hover { filter: brightness(0.98); }
.recommend-button:hover { background: var(--green-strong); }
.fridge-link:active, .seasoning-link:active, .recommend-button:active { transform: scale(0.99); }

.cinematic-iris { position: fixed; z-index: 30; inset: 0; color: var(--green-strong); pointer-events: none; }
.cinematic-iris svg { display: block; width: 100%; height: 100%; }
.cinematic-iris-ring { stroke: var(--green-soft); stroke-width: 8; vector-effect: non-scaling-stroke; }
body.is-navigating { overflow: hidden; }

@keyframes recommend-wave-fill { 0% { transform: translateX(-104%); } 65% { transform: translateX(-12%); } 100% { transform: translateX(0); } }
@keyframes cooking-icon-bob { 0% { opacity: 0; transform: translateY(8px) rotate(-6deg); } 45% { opacity: 1; transform: translateY(-3px) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes recommend-dot-jump { from { opacity: 0.5; transform: translateY(3px); } to { opacity: 1; transform: translateY(-4px); } }

.items-page { padding-inline: var(--space-4); }

.items-header {
  height: 64px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  margin-bottom: var(--space-3);
}

.items-header h1 { justify-self: center; font-size: var(--text-xl); }
.items-header:has(.receipt-header-actions) { grid-template-columns: 48px 1fr 96px; }
.receipt-header-actions { display: flex; align-items: center; }
.receipt-header-actions .add-button svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.receipt-page .detail-header h1 { text-align: center; }
.receipt-video { display: block; width: 100%; aspect-ratio: 3 / 4; margin-top: var(--space-4); object-fit: cover; background: var(--ink); border-radius: var(--radius-lg); }
.receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.receipt-privacy { margin-top: var(--space-4); color: var(--muted); font-size: var(--text-xs); line-height: 1.6; }
.receipt-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.receipt-card { grid-template-columns: 72px 1fr; min-height: 110px; text-align: left; }
.receipt-card-detail { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; white-space: normal; }
.unknown-section { margin-top: var(--space-5); }
.unknown-section h2 { font-size: var(--text-lg); }
.receipt-unknown-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.receipt-unknown-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.receipt-unknown-row span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.receipt-unknown-row button { min-height: 36px; padding-inline: var(--space-3); white-space: nowrap; }

.back-button, .add-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  font-size: var(--text-2xl);
  line-height: 1;
  cursor: pointer;
}

.add-button { font-size: var(--text-2xl); }
.back-button:hover, .add-button:hover { background: var(--green-soft); }
.back-button svg, .add-button svg { width: var(--text-xl); height: var(--text-xl); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.segmented-control button {
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  background: transparent;
  font-size: var(--text-base);
  cursor: pointer;
}

.segmented-control button[aria-selected="true"] { color: var(--surface); background: var(--green-strong); font-weight: 700; }

.inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); }

.inventory-card {
  width: 100%;
  min-width: 0;
  min-height: 120px;
  display: grid;
  grid-template-columns: minmax(64px, 44%) 1fr;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.inventory-card:hover, .inventory-card:focus-visible { border-color: var(--green); outline: none; background: var(--green-soft); }

.inventory-card img, .card-fallback { width: min(100%, 80px); height: 80px; justify-self: center; object-fit: contain; }
.card-fallback { display: grid; place-items: center; font-size: 52px; }
.inventory-copy { min-width: 0; }
.inventory-name { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; overflow-wrap: anywhere; }
.inventory-quantity { margin: 0; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.inventory-info { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--muted); background: var(--green-soft); font-size: var(--text-xs); line-height: 1.5; }
.empty-state { grid-column: 1 / -1; margin-top: var(--space-6); padding: var(--space-6) var(--space-5); text-align: center; color: var(--muted); }
.empty-state span { display: block; margin-bottom: var(--space-3); color: var(--green-strong); }
.empty-state span svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.page-title-header { margin: var(--space-2) 0 var(--space-5); }
.page-title-header h1 { font-size: var(--text-2xl); line-height: 1.1; }
.me-page { padding-top: max(var(--space-6), env(safe-area-inset-top)); }

.profile-card {
  position: relative;
  display: grid;
  grid-template-areas: "avatar" "copy";
  justify-items: center;
  gap: var(--space-3);
  padding: 0 0 var(--space-5);
  background: transparent;
  text-align: center;
}

.profile-avatar {
  grid-area: avatar;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--green);
  font-size: var(--text-2xl);
  font-weight: 700;
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-copy { grid-area: copy; min-width: 0; }
.profile-avatar, .profile-copy { cursor: pointer; }
.profile-avatar:focus-visible { outline: 2px solid var(--green-strong); outline-offset: var(--space-1); }
.profile-copy h2 { margin: 0 0 var(--space-1); font-size: var(--text-xl); font-weight: 700; overflow-wrap: anywhere; }
.profile-copy p { margin: 0; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }

.profile-edit-button {
  position: absolute;
  top: 0;
  right: 48px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--green-strong);
  background: var(--surface);
  cursor: pointer;
}

.profile-settings-button { right: 0; }

.profile-edit-button svg, .menu-icon svg {
  width: var(--text-lg);
  height: var(--text-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.points-card {
  min-height: 144px;
  margin-top: 0;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--green-soft);
}

.section-kicker { margin: 0 0 var(--space-1); color: var(--green-strong); font-size: var(--text-xs); font-weight: 600; }
.points-value { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.points-value strong { font-size: var(--text-3xl); line-height: 1; font-weight: 700; }
.points-value span { font-size: var(--text-sm); }
.points-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-xs); }

.checkin-button {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--green);
  font-weight: 700;
  cursor: pointer;
}

.checkin-button:hover { background: var(--green-strong); }
.checkin-button:disabled { color: var(--green-strong); background: var(--surface); border: 1px solid var(--green); cursor: default; }

.me-menu { margin-top: var(--space-4); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }

.me-menu-item {
  width: 100%;
  min-height: 80px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.me-menu-item + .me-menu-item { border-top: 1px solid var(--line); }
.me-menu-item:hover { background: var(--cream); }
.menu-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--green-strong); background: var(--green-soft); }
.favorite-icon { line-height: 1; }
.me-menu-item strong, .me-menu-item small { display: block; }
.me-menu-item strong { margin-bottom: var(--space-1); font-size: var(--text-base); font-weight: 600; }
.me-menu-item small { color: var(--muted); font-size: var(--text-xs); }

.menu-count {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--green-strong);
  background: var(--green-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.menu-chevron { color: var(--muted); font-size: var(--text-xl); }
.future-badge { padding: 0; color: var(--muted); background: transparent; font-size: var(--text-xs); white-space: nowrap; }
.account-actions { margin-top: var(--space-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.account-actions button {
  min-height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}

.account-actions button:hover { background: var(--cream); }
.account-actions .danger-action { color: var(--danger); }
.account-delete-dialog { width: min(calc(100% - 32px), 440px); padding: var(--space-5); border: 0; border-radius: var(--radius-xl); color: var(--ink); background: var(--surface); }
.account-delete-dialog::backdrop { background: rgb(20 31 27 / 45%); }
.account-delete-dialog form { display: grid; gap: var(--space-3); }
.account-delete-dialog h2, .account-delete-dialog p { margin: 0; }
.account-delete-dialog p { color: var(--muted); line-height: 1.6; }
.account-delete-dialog input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.account-delete-dialog .account-delete-error { color: var(--danger); }
.account-delete-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.account-delete-actions button { min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.account-delete-actions .danger-action { color: var(--danger); border-color: var(--danger); }

.detail-page { padding-top: max(var(--space-4), env(safe-area-inset-top)); }
.detail-header { min-height: 48px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: var(--space-3); }
.detail-header h1 { font-size: var(--text-xl); line-height: 1.2; text-align: center; letter-spacing: -0.02em; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--surface); }
.icon-button svg { width: var(--text-xl); height: var(--text-xl); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-spacer { width: 40px; height: 40px; }
.settings-form { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.avatar-editor { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) 0; }
.avatar-editor p { margin: 0; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.avatar-upload-preview { position: relative; overflow: hidden; border: 0; cursor: pointer; }
.avatar-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.text-action { padding: var(--space-2) var(--space-4); border: 0; color: var(--green-strong); background: transparent; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.form-row { display: grid; gap: var(--space-2); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.form-row input, .form-row textarea, .form-row select, .setting-row select { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); outline: none; color: var(--ink); background: var(--surface); font-size: var(--text-base); font-weight: 400; }
.form-row input { min-height: 48px; }
.form-row textarea { resize: vertical; line-height: 1.5; }
.form-row small { color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus, .setting-row select:focus { border-color: var(--green-strong); }
.readonly-row input { color: var(--muted); background: var(--green-soft); }
.form-status { min-height: 20px; margin: 0; color: var(--danger); font-size: var(--text-sm); }
.primary-form-button { min-height: 52px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-pill); color: var(--surface); background: var(--green); font-weight: 700; cursor: pointer; }
.primary-form-button:hover { background: var(--green-strong); }
.primary-form-button:disabled { opacity: 0.65; cursor: wait; }
.secondary-form-button { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--surface); font-weight: 600; cursor: pointer; }
.secondary-form-button:disabled { color: var(--muted); cursor: default; }

.result-dialog {
  max-height: calc(100svh - max(var(--space-5), env(safe-area-inset-top)));
  overflow: auto;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--cream);
}

.result-dialog::backdrop { background: rgba(36, 51, 52, 0.36); }
.item-preview { min-height: 96px; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.item-preview-icon { width: 72px; height: 72px; display: grid; place-items: center; }
.item-preview-icon img { width: 100%; height: 100%; object-fit: contain; }
.item-preview-icon .card-fallback { width: 72px; height: 72px; }
.item-preview-icon.empty { border-radius: var(--radius-pill); color: var(--green-strong); background: var(--green-soft); }
.item-preview-icon.empty svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.item-preview strong, .item-preview small { display: block; }
.item-preview strong { font-size: var(--text-lg); }
.item-preview small { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.result-dialog { width: min(calc(100% - 48px), 360px); margin: auto; padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); text-align: center; }
.result-icon { width: 64px; height: 64px; margin: 0 auto var(--space-3); display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--green-strong); background: var(--green-soft); }
.result-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.result-dialog h2 { margin: 0; font-size: var(--text-xl); }
.result-reward { display: block; margin-top: var(--space-2); color: var(--green-strong); font-size: var(--text-2xl); }
.result-dialog p { margin: var(--space-2) 0 var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.result-dialog .primary-form-button { width: 100%; }

.avatar-workspace { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.cropper-stage { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink); }
.avatar-crop-host .cropt-container { padding: var(--space-3) 0 1px; color: var(--surface); }
.avatar-crop-host .cr-boundary { width: min(320px, 100%); max-width: 100%; border-radius: var(--radius-lg); }
.avatar-crop-host .cr-slider-wrap { width: min(320px, calc(100% - 20px)); max-width: calc(100% - 20px); margin: var(--space-3) auto; }
.avatar-crop-host .cr-slider { accent-color: var(--green); }
.cropper-empty { min-height: 320px; display: grid; place-content: center; justify-items: center; padding: var(--space-5); color: var(--surface); text-align: center; }
.cropper-empty svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cropper-empty p { max-width: 240px; margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.avatar-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.avatar-page .primary-form-button { width: 100%; }

.add-item-page { padding-inline: var(--space-4); }
.add-item-page #itemForm { display: grid; gap: var(--space-5); }
.item-editor-header { grid-template-columns: 40px minmax(0, 1fr) auto; }
.item-editor-header h1 { padding-left: var(--space-2); }
.header-actions { display: flex; gap: var(--space-2); }
.save-icon-button { color: var(--surface); border-color: var(--green); background: var(--green); }
.save-icon-button:hover { background: var(--green-strong); }
.item-editor-fields { display: grid; gap: var(--space-4); }
.search-input-wrap { position: relative; }
.search-input-wrap svg { position: absolute; left: var(--space-4); top: 50%; width: var(--text-lg); height: var(--text-lg); transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-input-wrap input { padding-left: 48px; }
.item-search-results { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.item-search-result { width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.item-search-result + .item-search-result { border-top: 1px solid var(--line); }
.item-search-result:hover, .item-search-result:focus-visible { background: var(--green-soft); outline: none; }
.item-search-result img, .item-search-result .card-fallback { width: 40px; height: 40px; object-fit: contain; font-size: var(--text-xl); }
.item-search-result strong, .item-search-result small { display: block; }
.item-search-result strong { font-size: var(--text-sm); font-weight: 600; }
.item-search-result small { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.item-search-result svg { width: var(--text-lg); height: var(--text-lg); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.item-search-empty { margin: 0; padding: var(--space-4); color: var(--muted); font-size: var(--text-sm); font-weight: 400; text-align: center; }
.choice-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.choice-divider::before, .choice-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.choice-divider span { white-space: nowrap; }
.form-row select:disabled, .form-row input:disabled { color: var(--muted); background: var(--green-soft); }

.info-dialog {
  width: min(calc(100% - 48px), 400px);
  max-height: calc(100svh - 48px);
  padding: var(--space-5);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: var(--surface);
}
.info-dialog::backdrop { background: rgba(36, 51, 52, 0.36); }
.info-dialog form { display: grid; gap: var(--space-4); }
.info-dialog h2 { margin: 0; font-size: var(--text-xl); }
.info-dialog > p { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.dialog-actions { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.info-dialog form .dialog-actions { margin-top: 0; }
.stacked-actions { grid-template-columns: 1fr; }
.danger-text { color: var(--danger); }

.inventory-detail-sheet {
  width: min(100%, 480px);
  max-width: 480px;
  max-height: min(82svh, 720px);
  margin: auto auto 0;
  padding: var(--space-3) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom));
  overflow: auto;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--ink);
  background: var(--surface);
  transition: transform 180ms ease-out;
}

.inventory-detail-sheet::backdrop { background: rgba(36, 51, 52, 0.36); }
.inventory-detail-sheet.is-dragging { transition: none; user-select: none; }
.sheet-grabber { width: 64px; height: 24px; margin: 0 auto; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet-grabber::before { content: ""; width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--line); }
.inventory-detail-sheet.is-dragging .sheet-grabber { cursor: grabbing; }
.inventory-detail-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.inventory-detail-hero { min-height: 144px; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--space-5); padding: var(--space-3) 0 var(--space-5); }
.inventory-detail-icon { width: 112px; height: 112px; display: grid; place-items: center; }
.inventory-detail-icon img, .inventory-detail-icon .card-fallback { width: 112px; height: 112px; object-fit: contain; }
.inventory-detail-icon .card-fallback { font-size: 64px; }
.inventory-detail-heading { min-width: 0; }
.inventory-detail-heading h2 { margin: 0; font-size: var(--text-xl); font-weight: 700; overflow-wrap: anywhere; }
.inventory-detail-heading p { margin: var(--space-2) 0 0; color: var(--green-strong); font-size: var(--text-lg); font-weight: 600; }
.inventory-detail-list { margin: 0; }
.inventory-detail-list > div { min-height: 48px; padding: var(--space-3) 0; display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); align-items: start; gap: var(--space-4); border-top: 1px solid var(--line); }
.inventory-detail-list dt { color: var(--muted); font-size: var(--text-sm); }
.inventory-detail-list dd { margin: 0; font-size: var(--text-sm); font-weight: 500; text-align: right; overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 370px) {
  .form-row-pair { grid-template-columns: 1fr; }
  .item-editor-header { gap: var(--space-2); }
  .header-actions { gap: var(--space-1); }
}
.settings-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.setting-row { min-height: 72px; padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.setting-row + .setting-row { border-top: 1px solid var(--line); }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { font-size: var(--text-base); font-weight: 600; }
.setting-row small { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.setting-row select { width: auto; min-width: 112px; }
.switch-input { width: 44px; height: 24px; accent-color: var(--green-strong); cursor: pointer; }
.account-bindings { margin-top: var(--space-6); }
.section-heading { margin-bottom: var(--space-3); }
.section-heading h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.section-heading p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }
.binding-list { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.binding-row { min-height: 72px; padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.binding-row + .binding-row { border-top: 1px solid var(--line); }
.binding-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--green-strong); background: var(--green-soft); }
.binding-icon svg { width: var(--text-xl); height: var(--text-xl); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.binding-copy { min-width: 0; }
.binding-copy strong, .binding-copy small { display: block; }
.binding-copy strong { font-size: var(--text-sm); font-weight: 600; }
.binding-copy small { margin-top: var(--space-1); overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.binding-action { min-width: 56px; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--surface); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }

.search-page { padding-inline: var(--space-4); }
.search-header { padding: var(--space-2) 0 var(--space-5); }
.search-header .eyebrow { font-size: var(--text-sm); letter-spacing: 0.02em; }
.search-header h1 { margin-top: var(--space-2); font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.02em; }
.search-header > p:last-child { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.recipe-search-form { position: relative; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.search-picker-label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.search-picker-wrap { position: relative; }
.search-picker-wrap > svg { position: absolute; left: var(--space-4); top: 50%; width: var(--text-lg); height: var(--text-lg); transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.search-picker-wrap input { width: 100%; height: 48px; padding: 0 var(--space-4) 0 48px; border: 1px solid var(--line); border-radius: var(--radius-md); outline: none; color: var(--ink); background: var(--cream); font-size: var(--text-base); }
.search-picker-wrap input:focus { border-color: var(--green-strong); background: var(--surface); }
.search-picker-results { position: absolute; z-index: 4; left: var(--space-4); right: var(--space-4); margin-top: var(--space-2); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.search-picker-option { width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--space-3); border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.search-picker-option + .search-picker-option { border-top: 1px solid var(--line); }
.search-picker-option:hover, .search-picker-option:focus-visible { outline: none; background: var(--green-soft); }
.search-picker-option img, .search-picker-option .card-fallback { width: 40px; height: 40px; object-fit: contain; font-size: var(--text-xl); }
.search-picker-option strong, .search-picker-option small { display: block; }
.search-picker-option strong { font-size: var(--text-sm); font-weight: 600; text-transform: capitalize; }
.search-picker-option small { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.search-picker-empty { margin: 0; padding: var(--space-4); color: var(--muted); font-size: var(--text-sm); text-align: center; }
.search-selected-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.search-selected-tags:empty { display: none; }
.search-selected-tags.collapsed .search-ingredient-tag:nth-child(n+7) { display: none; }
.search-ingredient-tag { min-height: 32px; padding: 0 var(--space-1) 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--green); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--green-soft); font-size: var(--text-sm); font-weight: 600; text-transform: capitalize; }
.search-ingredient-tag.seasoning { border-color: var(--line); color: var(--ink); background: var(--cream); }
.search-ingredient-tag.readonly { padding-right: var(--space-3); }
.search-ingredient-tag button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pill); color: currentColor; background: transparent; cursor: pointer; }
.search-ingredient-tag button:hover, .search-ingredient-tag button:focus-visible { outline: none; background: var(--surface); }
.search-ingredient-tag svg { width: var(--text-base); height: var(--text-base); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-tag-toggle { margin-top: var(--space-2); padding: var(--space-1) 0; border: 0; color: var(--green-strong); background: transparent; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.recipe-search-form.fridge-mode .search-picker-label,
.recipe-search-form.fridge-mode .search-picker-wrap,
.recipe-search-form.fridge-mode .search-picker-results,
.recipe-search-form.fridge-mode .search-selection-hint,
.recipe-search-form.fridge-mode .search-submit-button { display: none; }
.recipe-search-form.fridge-mode .search-selected-tags { margin-top: 0; }
.search-selection-hint { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.search-submit-button { width: 100%; min-height: 48px; margin-top: var(--space-4); display: flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-radius: var(--radius-pill); color: var(--surface); background: var(--green); font-size: var(--text-base); font-weight: 700; cursor: pointer; }
.search-submit-button:hover { background: var(--green-strong); }
.search-submit-button:disabled { opacity: 0.65; cursor: wait; }
.search-submit-button svg { width: var(--text-lg); height: var(--text-lg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-status { min-height: 20px; margin: var(--space-2) 0 0; color: var(--danger); font-size: var(--text-xs); text-align: center; }
.search-empty-intro { min-height: 240px; display: grid; place-content: center; justify-items: center; padding: var(--space-6) var(--space-5); text-align: center; }
.search-empty-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--green-strong); background: var(--green-soft); }
.search-empty-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.search-empty-intro h2 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-lg); }
.search-empty-intro p { max-width: 280px; margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.search-results-section { scroll-margin-top: var(--space-4); padding-top: var(--space-6); }
.search-results-heading { margin-bottom: var(--space-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.search-results-heading h2 { margin: 0; font-size: var(--text-lg); }
.search-results-heading span { color: var(--muted); font-size: var(--text-xs); }
.recipe-waterfall { column-count: 2; column-gap: var(--space-3); }
.recipe-result-card { margin: 0 0 var(--space-3); display: inline-block; width: 100%; overflow: hidden; break-inside: avoid; border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; background: var(--surface); text-decoration: none; }
.recipe-result-card:focus-visible { outline: 2px solid var(--green-strong); outline-offset: var(--space-1); }
.recipe-card-visual { min-height: 116px; padding: var(--space-3); display: flex; align-items: center; justify-content: center; gap: 0; background: var(--green-soft); }
.recipe-card-1 .recipe-card-visual { min-height: 144px; }
.recipe-card-2 .recipe-card-visual { min-height: 128px; }
.recipe-card-visual img { width: min(62%, 88px); height: 88px; object-fit: contain; }
.recipe-card-visual img + img { width: min(46%, 64px); height: 64px; margin-left: calc(var(--space-4) * -1); }
.recipe-card-visual img:nth-child(3) { margin-top: var(--space-5); }
.recipe-placeholder-icon { width: 48px; height: 48px; color: var(--green-strong); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.recipe-card-body { padding: var(--space-3); }
.recipe-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); color: var(--muted); font-size: 10px; }
.recipe-card-body h3 { margin: var(--space-2) 0 0; font-size: var(--text-base); line-height: 1.35; }
.recipe-card-body > p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.recipe-result-card.is-private { position: relative; overflow: hidden; }
.private-recipe-ribbon { position: absolute; z-index: 2; top: 18px; left: -38px; width: 132px; padding: 6px 0; color: #fff; background: #8f5ab8; box-shadow: 0 2px 5px rgb(54 31 70 / 30%); font-size: 10px; font-weight: 800; text-align: center; transform: rotate(-45deg); }
.recipe-match-evidence { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.recipe-match-evidence p { margin: 0; font-size: 10px; line-height: 1.5; }
.recipe-match-evidence p + p { margin-top: var(--space-1); }
.recipe-match-evidence strong { display: block; color: var(--green-strong); font-weight: 600; }
.recipe-match-evidence span { color: var(--muted); }
.recipe-results-empty { column-span: all; margin: 0; padding: var(--space-6) var(--space-4); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: var(--text-sm); text-align: center; }

.recipe-detail-page { padding-top: max(var(--space-4), env(safe-area-inset-top)); padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
.recipe-detail-hero { position: relative; }
.recipe-detail-actions { position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4); right: var(--space-4); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.recipe-action-button { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); background: var(--surface); cursor: pointer; pointer-events: auto; }
.recipe-action-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recipe-action-button.active { color: var(--surface); border-color: var(--green); background: var(--green); }
.recipe-action-button.active svg { fill: currentColor; }
.recipe-action-button:disabled { opacity: 0.6; cursor: wait; }
.recipe-action-button.is-celebrating svg { animation: favorite-heart-pop 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.recipe-action-button.is-celebrating::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--green); border-radius: var(--radius-pill); opacity: 0; animation: favorite-ring 480ms ease-out both; }
@keyframes favorite-heart-pop { 0%, 100% { transform: scale(1); } 35% { transform: scale(0.72) rotate(-8deg); } 68% { transform: scale(1.24) rotate(5deg); } }
@keyframes favorite-ring { 0% { opacity: 0.7; transform: scale(0.62); } 100% { opacity: 0; transform: scale(1.28); } }
.recipe-hero-visual { min-height: 248px; padding: var(--space-6); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-xl); background: var(--green-soft); }
.recipe-hero-visual > img:not(.recipe-main-image) { width: min(42%, 120px); height: 136px; object-fit: contain; }
.recipe-hero-visual > img:not(.recipe-main-image) + img { width: min(32%, 88px); height: 96px; margin-left: calc(var(--space-5) * -1); }
.recipe-hero-visual > img:nth-child(3) { margin-top: var(--space-6); }
.recipe-hero-visual > img:nth-child(4) { margin-top: calc(var(--space-5) * -1); }
.recipe-main-image { width: calc(100% + 64px); height: 312px; margin: calc(var(--space-6) * -1); object-fit: cover; }
.recipe-detail-intro { padding: var(--space-5) 0 var(--space-6); }
.recipe-detail-intro h1 { font-size: var(--text-2xl); line-height: 1.2; }
.recipe-detail-intro > p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.recipe-author { margin-top: var(--space-4); min-height: 56px; padding: var(--space-2) var(--space-3); display: flex; align-items: center; gap: var(--space-3); color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.recipe-author[hidden] { display: none; }
.recipe-author[aria-disabled="true"] { cursor: default; }
.recipe-author-avatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.recipe-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.recipe-author > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.recipe-author small { color: var(--muted); font-size: var(--text-xs); }
.recipe-author strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-author > svg { width: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.recipe-author[aria-disabled="true"] > svg { display: none; }
.public-user-page { padding-top: max(var(--space-4), env(safe-area-inset-top)); padding-bottom: max(var(--space-7), env(safe-area-inset-bottom)); }
.public-user-hero { margin-top: var(--space-4); padding: var(--space-5); display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.public-user-avatar { width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-size: var(--text-xl); font-weight: 700; }
.public-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.public-user-hero h1 { margin-top: var(--space-1); }
.public-user-hero div:last-child > p:last-child { margin-top: var(--space-2); color: var(--muted); line-height: 1.6; }
.public-user-recipes { margin-top: var(--space-6); }
.public-recipe-list { display: grid; gap: var(--space-3); }
.public-recipe-card { padding: var(--space-4); color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.public-recipe-card p { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.recipe-detail-meta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recipe-detail-meta span { min-height: 28px; padding: var(--space-1) var(--space-3); display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); background: var(--surface); font-size: var(--text-xs); }
.recipe-detail-status { color: var(--danger) !important; }
.recipe-detail-section + .recipe-detail-section { margin-top: var(--space-6); }
.recipe-section-heading { margin-bottom: var(--space-3); }
.recipe-section-heading h2 { margin: 0; font-size: var(--text-xl); }
.recipe-section-heading p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); }
.recipe-ingredient-card { padding: var(--space-4); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.recipe-ingredient-card + .recipe-ingredient-card { margin-top: var(--space-3); }
.recipe-card-toggle { width: 100%; min-height: 32px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border: 0; color: var(--ink); background: transparent; font-size: var(--text-base); font-weight: 700; text-align: left; cursor: pointer; }
.recipe-card-toggle svg { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease; }
.recipe-card-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.recipe-ingredient-list { margin-top: var(--space-4); display: grid; }
.recipe-ingredient-requirement { min-width: 0; padding: var(--space-4) 0; }
.recipe-ingredient-requirement:first-child { padding-top: 0; }
.recipe-ingredient-requirement:last-child { padding-bottom: 0; }
.recipe-ingredient-requirement + .recipe-ingredient-requirement { border-top: 1px solid var(--line); }
.recipe-ingredient-choices { min-width: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.recipe-ingredient-choice { width: 80px; margin: 0; flex: 0 0 auto; text-align: center; }
.recipe-ingredient-choice.substitute-choice { width: 64px; padding-top: var(--space-2); }
.recipe-ingredient-circle { position: relative; width: 76px; height: 76px; margin: 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--cream); }
.substitute-choice .recipe-ingredient-circle { width: 56px; height: 56px; background: var(--green-soft); }
.recipe-ingredient-circle img, .recipe-ingredient-circle .card-fallback { width: 72%; height: 72%; object-fit: contain; font-size: var(--text-xl); }
.recipe-ingredient-circle.is-missing::after { content: ""; position: absolute; inset: 0; background: rgba(82, 88, 88, 0.46); }
.recipe-ingredient-choice figcaption { margin-top: var(--space-2); }
.recipe-ingredient-choice figcaption strong, .recipe-ingredient-choice figcaption small { display: block; overflow-wrap: anywhere; }
.recipe-ingredient-choice figcaption strong { font-size: var(--text-xs); font-weight: 600; line-height: 1.35; }
.recipe-ingredient-choice figcaption small { margin-top: var(--space-1); color: var(--muted); font-size: 10px; line-height: 1.35; }
.recipe-substitute-region { min-width: 0; }
.recipe-substitute-label { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.recipe-substitute-list { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.recipe-none-choice { width: 56px; height: 56px; display: grid; place-items: center; border: 1px dashed var(--muted); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--text-xs); }
.recipe-group-empty { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.recipe-steps { margin: 0; padding: 0; display: grid; gap: var(--space-3); list-style: none; counter-reset: recipe-step; }
.recipe-steps > li { counter-increment: recipe-step; padding: var(--space-4); display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.recipe-steps > li::before { content: counter(recipe-step); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--surface); background: var(--green); font-size: var(--text-sm); font-weight: 700; }
.recipe-steps p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: 1.7; }
.recipe-step-image { grid-column: 2; width: 100%; aspect-ratio: 16 / 9; margin-top: var(--space-2); overflow: hidden; border-radius: var(--radius-md); background: var(--green-soft); }
.recipe-step-image img { width: 100%; height: 100%; object-fit: cover; }
.recipe-steps-empty::before { display: none !important; }
.recipe-steps-empty { display: block !important; color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 370px) {
  .recipe-detail-page { padding-inline: var(--space-4); }
  .recipe-hero-visual { min-height: 224px; }
  .recipe-detail-intro h1 { font-size: var(--text-xl); }
}

.auth-page { padding-top: max(var(--space-4), env(safe-area-inset-top)); }

.auth-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-back-button, .auth-brand-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--green-strong);
}

.auth-back-button { border: 1px solid var(--line); background: var(--surface); }
.auth-brand-icon { background: var(--green-soft); }
.auth-back-button svg, .auth-brand-icon svg, .auth-option-button svg, .auth-social-row svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.auth-intro { margin: var(--space-6) 0 var(--space-5); }
.auth-kicker { margin: 0 0 var(--space-2); color: var(--green-strong); font-size: var(--text-sm); font-weight: 700; }
.auth-intro h1 { font-size: var(--text-2xl); line-height: 1.2; }
.auth-intro > p:last-child { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }

.auth-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.auth-mode-switch button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--muted);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
}

.auth-mode-switch button[aria-selected="true"] { color: var(--surface); background: var(--green-strong); }
.auth-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.auth-field { display: grid; gap: var(--space-2); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.auth-field small { margin-left: var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: 400; }

.auth-field input {
  width: 100%;
  height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--ink);
  background: var(--surface);
  font-size: var(--text-base);
}

.auth-field input:focus { border-color: var(--green-strong); }
.auth-field input::placeholder { color: var(--muted); }
.auth-form-message { min-height: 20px; margin: calc(var(--space-2) * -1) 0 0; color: var(--danger); font-size: var(--text-sm); }

.auth-submit-button {
  min-height: 52px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: var(--green);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
}

.auth-submit-button:hover { background: var(--green-strong); }
.auth-submit-button:disabled { opacity: 0.65; cursor: wait; }
.auth-alternatives { margin-top: var(--space-6); }

.auth-divider {
  margin: 0 0 var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
}

.auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: var(--line); }

.auth-option-button {
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.auth-option-button small { color: var(--muted); font-size: var(--text-xs); }
.auth-social-row { display: grid; gap: var(--space-2); }
.auth-code-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.auth-code-button {
  min-width: 104px;
  border: 1px solid var(--green);
  border-radius: var(--radius-md);
  color: var(--green-strong);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.auth-code-button:disabled { color: var(--muted); border-color: var(--line); cursor: wait; }

.auth-legal { margin: var(--space-5) 0 0; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.profile-card.is-login-entry .profile-avatar, .profile-card.is-login-entry .profile-copy { cursor: pointer; }
.profile-card.is-login-entry .profile-copy h2 { color: var(--green-strong); }

.bottom-nav {
  position: fixed;
  z-index: 9;
  left: 50%;
  bottom: 0;
  width: min(100%, 480px);
  min-height: 76px;
  padding: var(--space-2) var(--space-4) max(var(--space-2), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -8px 24px rgba(38, 56, 59, 0.06);
  transform: translateX(-50%);
}

.bottom-nav-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border-radius: var(--radius-lg);
  color: var(--muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
}

.bottom-nav-item svg {
  width: 24px;
  height: 24px;
  padding: var(--space-1);
  box-sizing: content-box;
  border-radius: var(--radius-pill);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav-item.active { color: var(--green-strong); font-weight: 600; }
.bottom-nav-item.active svg { background: var(--green-soft); stroke-width: 2; }

.toast {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(var(--space-6), env(safe-area-inset-bottom));
  max-width: calc(100% - 48px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--surface);
  background: rgba(36, 51, 52, 0.92);
  box-shadow: 0 12px 32px rgba(21, 29, 28, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: var(--text-sm);
  text-align: center;
}

.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  body { padding: var(--space-6) 0; }
  .app-shell { width: min(calc(100% - 48px), 720px); min-height: calc(100vh - 64px); border-radius: var(--radius-xl); }
  .home-page { height: calc(100vh - 64px); height: calc(100svh - 64px); min-height: 0; }
  .bottom-nav { bottom: 32px; width: min(calc(100% - 48px), 720px); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recipe-waterfall { column-count: 3; }
  .inventory-detail-sheet { width: min(calc(100% - 48px), 640px); max-width: 640px; }
}

@media (min-width: 900px) {
  .app-shell { width: min(calc(100% - 64px), 920px); }
  .bottom-nav { width: min(calc(100% - 64px), 920px); min-height: 88px; }
  .bottom-nav-item { font-size: var(--text-sm); }
  .bottom-nav-item svg { width: 28px; height: 28px; }
  .home-page { padding-inline: 40px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .fridge-link { max-width: 520px; }
  .seasoning-link { width: 100%; max-width: 460px; height: auto; }
  .recommend-button { max-width: 460px; min-height: 72px; font-size: var(--text-xl); }
  .recipe-waterfall { column-count: 3; column-gap: var(--space-4); }
}

@media (min-width: 700px) and (orientation: landscape) {
  .home-page {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: var(--space-6);
  }
  .home-header { grid-column: 1 / -1; }
  .fridge-link { grid-column: 1; grid-row: 2 / 4; align-self: center; }
  .seasoning-link { grid-column: 2; grid-row: 2; align-self: end; width: min(100%, 350px); max-width: none; }
  .recommend-button { grid-column: 2; grid-row: 3; width: 100%; max-width: 380px; }
}

@media (max-height: 700px) {
  .home-page { padding-top: max(var(--space-2), env(safe-area-inset-top)); }
  .home-header { min-height: 40px; }
  .eyebrow { font-size: clamp(17px, 4.8vw, var(--text-lg)); }
  .seasoning-label { font-size: clamp(13px, 3.8vw, var(--text-base)); }
  .recommend-button { font-size: clamp(var(--text-base), 4.5vw, 19px); }
  .fridge-link { max-width: min(100%, 280px); }
}

@media (min-width: 500px) and (max-height: 760px) {
  .fridge-link { max-width: 320px; }
}

@media (max-width: 370px) {
  .app-shell { padding-inline: var(--space-4); }
  .items-page { padding-inline: var(--space-3); }
  .inventory-grid { gap: var(--space-2); }
  .inventory-card { padding-inline: var(--space-2); }
}

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

.recipe-management-page, .recipe-editor-page { padding-bottom: max(var(--space-8), env(safe-area-inset-bottom)); }
.simple-header { min-height: 64px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--space-3); }
.simple-header h1 { font-size: var(--text-xl); }
.simple-header .section-kicker { margin: 0 0 2px; }
.circle-back, .header-action { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--surface); }
.circle-back svg, .header-action svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-status { margin: var(--space-6) 0; color: var(--muted); text-align: center; }
.managed-recipe-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.managed-recipe-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.recipe-help-dialog { width: min(calc(100% - 32px), 460px); padding: 0; border: 0; border-radius: var(--radius-xl); color: var(--ink); background: var(--surface); }
.recipe-help-dialog::backdrop { background: rgb(20 31 27 / 42%); }
.recipe-help-dialog form { padding: var(--space-5); }
.recipe-help-dialog form, .following-dialog form { position: relative; padding-top: 68px; }
.recipe-help-close { position: absolute; top: var(--space-4); left: var(--space-4); }
.recipe-help-dialog h2, .following-dialog h2 { margin: 0; }
.recipe-help-dialog dl { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.recipe-help-dialog dt { margin-top: var(--space-2); font-weight: 700; }
.recipe-help-dialog dd { margin: 0; color: var(--muted); line-height: 1.65; }
.author-follow-button { min-height: 38px; margin-top: var(--space-3); padding: 0 var(--space-5); border: 1px solid var(--primary); border-radius: var(--radius-pill); color: var(--primary); background: var(--surface); font-weight: 700; }
.public-user-stats, .profile-social-stats { display: flex; gap: var(--space-5); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.profile-social-stats { justify-content: center; padding: var(--space-3); }
.profile-social-stats button, .profile-social-stats > span { display: grid; justify-items: center; gap: 2px; border: 0; color: inherit; background: transparent; }
.profile-social-stats strong { color: var(--ink); font-size: var(--text-lg); }
.system-fridge-icon { width: 42px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.following-dialog { width: min(calc(100% - 32px), 420px); border: 0; border-radius: var(--radius-xl); }
.following-user-row { display: block; padding: var(--space-3); color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.author-follow-button.is-unavailable { border-color: var(--line); color: var(--muted); background: var(--surface-muted, #f1f1ee); }
.favorites-tools { margin: var(--space-4) 0; display: grid; gap: var(--space-3); }
.favorites-tools input { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.favorite-tag-filters, .favorite-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.favorite-tag-filters button, .favorite-tag { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); background: var(--surface); font-size: var(--text-xs); }
.favorite-tag-filters > button.active, .favorite-filter-group > button.active { color: #fff; border-color: #2f7050; background: #2f7050; font-weight: 700; }
.favorite-filter-group { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: var(--radius-pill); }
.favorite-filter-group > button { border-radius: 0; }
.favorite-filter-group > .favorite-filter-delete { padding-inline: 8px; border-left: 0; color: var(--danger); font-weight: 700; }
.favorite-filter-group > .favorite-filter-delete:focus-visible, .favorite-tag-filters button:focus-visible { outline: 2px solid var(--green-strong); outline-offset: 2px; }
.favorite-entry { display: grid; gap: var(--space-2); min-width: 0; }
.favorite-tag-panel { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.favorite-tags { min-height: 24px; }
.favorite-tag-editor { margin-top: var(--space-2); display: flex; gap: var(--space-2); align-items: start; }
.favorite-tag-input-wrap { position: relative; flex: 1; min-width: 0; }
.favorite-tag-editor input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.favorite-tag-editor > button { min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--green-strong); background: var(--surface); white-space: nowrap; }
.favorite-tag-suggestions:not([hidden]) { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; display: grid; max-height: 180px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
.favorite-tag-suggestions button { width: 100%; padding: var(--space-2) var(--space-3); border: 0; color: var(--ink); background: transparent; text-align: left; }
.favorite-tag-suggestions button:hover, .favorite-tag-suggestions button:focus-visible { background: var(--green-soft); }
.simple-header { grid-template-columns: 44px 1fr auto; }
.managed-recipe-copy { display: block; color: inherit; text-decoration: none; }
.managed-recipe-copy h2 { margin: 0; font-size: var(--text-lg); }
.managed-recipe-copy p { margin: var(--space-2) 0; color: var(--muted); font-size: var(--text-sm); }
.managed-recipe-copy small { color: var(--green-strong); font-weight: 600; }
.managed-recipe-copy .managed-recipe-reason { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); color: var(--muted); background: var(--green-soft); line-height: 1.55; }
.managed-recipe-reason strong { color: var(--ink); font-weight: 600; }
.managed-recipe-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.managed-recipe-actions button { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--surface); cursor: pointer; }
.managed-recipe-actions button.danger-action { color: var(--danger); }
.recipe-editor-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.recipe-editor-form > label, .editor-number-grid label { display: grid; gap: var(--space-2); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.recipe-editor-form > label > small, .recipe-image-field > small { color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.field-counter { justify-self: end; }
.recipe-editor-form input, .recipe-editor-form textarea, .recipe-editor-form select { width: 100%; min-height: 48px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--surface); font: inherit; }
.recipe-editor-form textarea { resize: vertical; }
.form-error { min-height: 20px; margin: 0; color: var(--danger); font-size: var(--text-sm); }
.editor-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.editor-section { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.editor-section h2 { font-size: var(--text-lg); }
.editor-section > div:first-child p { margin: var(--space-1) 0 var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.editor-rows { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.ingredient-editor-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(64px, .7fr) minmax(64px, 1fr) 36px; gap: var(--space-2); align-items: center; }
.editor-ingredient-picker { position: relative; min-width: 0; }
.editor-ingredient-picker .search-picker-wrap input { padding: 0 var(--space-4); background: var(--cream); }
.editor-picker-results { left: 0; right: 0; max-height: 280px; overflow-y: auto; }
.ingredient-editor-row .row-remove { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--danger); background: var(--surface); font-size: 22px; }
.inline-check { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.inline-check input { width: 18px; min-height: 18px; }
.editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; }
.recipe-image-field { display: grid; gap: var(--space-2); color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.recipe-image-upload { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: var(--space-2); overflow: hidden; border: 1px dashed var(--green); border-radius: var(--radius-xl); color: var(--green-strong); background-color: var(--green-soft); cursor: pointer; background-position: center; background-size: cover; background-repeat: no-repeat; }
.recipe-image-upload svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recipe-image-upload.has-file, .recipe-image-upload.has-image { border-style: solid; }
.recipe-image-upload.has-image { color: var(--surface); text-shadow: 0 1px 2px rgba(0,0,0,.65); }
.step-editor-rows { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.step-editor-row { padding: var(--space-3); display: grid; gap: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); }
.step-editor-head { display: flex; align-items: center; justify-content: space-between; }
.step-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--surface); background: var(--green); }
.step-image-upload { min-height: 40px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--green-strong); background: var(--surface); font-size: var(--text-xs); cursor: pointer; }
.step-image-preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); cursor: pointer; }
.image-edit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.image-edit-actions button { min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--green-strong); background: var(--surface); font-weight: 600; cursor: pointer; }
.image-edit-actions button.danger-action { color: var(--danger); }
.image-edit-actions button:disabled { color: var(--muted); cursor: default; opacity: .55; }
.image-crop-dialog { width: min(calc(100% - 24px), 520px); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface); }
.image-crop-dialog::backdrop { background: rgba(36, 51, 52, .72); }
.crop-dialog-card { padding: var(--space-5); display: grid; gap: var(--space-4); }
.crop-dialog-card h2, .crop-dialog-card p { margin: 0; }
.crop-dialog-card p { color: var(--muted); font-size: var(--text-sm); }
.recipe-crop-stage { width: 100%; overflow: hidden; border-radius: var(--radius-lg); background: var(--ink); }
.recipe-crop-stage .cropt-container { padding: var(--space-3) 0 1px; color: var(--surface); }
.recipe-crop-stage .cr-boundary { max-width: 100%; border-radius: var(--radius-lg); }
.recipe-crop-stage .cr-slider-wrap { max-width: calc(100% - 20px); margin: var(--space-3) auto; }
.recipe-crop-stage .cr-slider { accent-color: var(--green); }
.crop-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.me-menu-item { text-decoration: none; }
@media (max-width: 390px) { .editor-number-grid { grid-template-columns: 1fr; } .ingredient-editor-row { grid-template-columns: 1fr 72px 72px 36px; } }

.receipt-edit-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
.receipt-edit-header h2 { text-align: center; }
.receipt-delete-button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); color: var(--danger); background: transparent; cursor: pointer; }
.receipt-delete-button:hover, .receipt-delete-button:focus-visible { background: var(--green-soft); }
.receipt-delete-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.receipt-match-picker input { padding-left: var(--space-4); }
.receipt-match-results { left: 0; right: 0; max-height: 220px; overflow-y: auto; }
.receipt-match-results .search-picker-option { grid-template-columns: minmax(0, 1fr); }
.receipt-unit-picker { position: relative; }
.receipt-unit-picker > button { width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: var(--cream); text-align: left; cursor: pointer; }
.receipt-unit-picker > button::after { content: '⌃'; float: right; color: var(--muted); }
.receipt-unit-options { position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(100% + 4px); max-height: min(220px, 35svh); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 8px 24px rgba(36, 51, 52, .12); }
.receipt-unit-options button { display: block; width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 0; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.receipt-unit-options button:hover, .receipt-unit-options button:focus-visible { background: var(--green-soft); }