/* hidden 属性兜底：面板内任何带 display 的类都不许压过 hidden */
#pantry-panel [hidden],
#notepad-panel [hidden] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   食材库 —— 深紫夜空底上的暖色厨房全景。
   家具用透明插画（fridge / countertop / snack-cabinet），贴纸叠在隔板腔里。
   ───────────────────────────────────────────────────────────────────────────── */

.pantry-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-md);
  overflow-y: auto;
}

#pantry-view-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── 全景 ──
   左冰箱 / 右矮柜（台面+零食柜）两栏并排。三件插画各自用 aspect-ratio 锁定原图比例，
   高度交给宽度自然算出来，不被视口高度压缩（详见下方每个 zone 的原图像素值，
   舒薇裁过白边后三张图尺寸都变了，务必跟着改，别用旧的 1024×1536 之类的老比例）。
   两栏宽度比例按「冰箱高度 == 台面高度+间距+零食柜高度」反解、再对实测截图微调出来（9:8，
   纯数学解是 7:6，但两张图裁白边后画布里各自剩的透明留白不一样多，实测偏差要靠截图修），
   这样冰箱上缘对台面上缘、下缘对零食柜下缘，两栏视觉顶满对齐；
   margin 吃满面板左右留白做到贴边出血，画面能占的宽度用到最大。 */

.pantry-scene {
  position: relative;
  display: grid;
  grid-template-columns: 9fr 8fr;
  gap: 8px;
  align-items: start;
  margin: 0 -16px;
}

.pantry-fridge,
.pantry-cabinet {
  position: relative;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* 冰箱：整机插画，冷藏/冷冻是叠在插画内腔上的透明热区（inset 百分比量自原图像素，897×1303） */
.pantry-fridge {
  width: 100%;
  aspect-ratio: 897 / 1303;
  background: url(/icons/pantry-scene/fridge.png) center / contain no-repeat;
}

/* 矮柜：透明容器，上台面 / 下零食柜各自锁定自己插画的原图比例 */
.pantry-cabinet {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pantry-zone {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 24px 10px 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(120, 95, 70, 0.18);
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-zone:focus-visible {
  outline: 2px solid var(--accent-tint-30);
  outline-offset: 2px;
}

.pantry-zone:active {
  transform: scale(0.99);
}

/* 位置模式 zone：透明，让家具插画露出来（分类 .pantry-zone--cat 不动） */
.pantry-zone--chilled,
.pantry-zone--frozen,
.pantry-zone--room_temp,
.pantry-zone--snack {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

/* 冷藏内腔：叠在插画柜体的隔板区（原图像素量出，2 层玻璃层板） */
.pantry-fridge .pantry-zone--chilled {
  position: absolute;
  inset: 8% 35% 42% 16%;
}

/* 冷冻抽屉内腔：插画里拉开的抽屉口，比冷藏矮很多 */
.pantry-fridge .pantry-zone--frozen {
  position: absolute;
  inset: 63% 34% 22% 14%;
}

.pantry-cabinet .pantry-zone--room_temp {
  width: 100%;
  aspect-ratio: 1185 / 679;
  background: url(/icons/pantry-scene/countertop.png) center / contain no-repeat;
}

.pantry-cabinet .pantry-zone--snack {
  width: 100%;
  aspect-ratio: 1024 / 1079;
  background: url(/icons/pantry-scene/snack-cabinet.png) center / contain no-repeat;
}

.pantry-zone-label {
  position: absolute;
  top: 7px;
  left: 12px;
  z-index: 3;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #5c4030;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 248, 236, 0.55);
}

/* 冷冻抽屉偏蓝：深棕 + 浅奶油描边保证可读 */
.pantry-zone--frozen .pantry-zone-label {
  color: #4a3828;
  text-shadow: 0 1px 2px rgba(240, 248, 255, 0.7);
}

.pantry-zone--snack .pantry-zone-label {
  color: #5c4030;
  text-shadow: 0 1px 2px rgba(255, 248, 236, 0.55);
}

.pantry-shelf {
  position: absolute;
  inset: 26px 6px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* 冷藏 / 冷冻 / 零食柜：货架不再用 space-evenly 在「有几排」之间平均分——
   贴纸永远只装最靠前的几排（少量食材时只有 1 排），space-evenly 会把这唯一一排摆在
   等分带的中间，跟插画里实际画的层板线对不上（真机实测过，牛奶飘在两层玻璃层板正中间）。
   改成每排 position:absolute + bottom:百分比，直接钉在 sharp 量出来的层板「台面」高度上——
   贴纸 bottom 对齐层板顶面，看起来才是「放在架子上」而不是「悬在半空」。 */
.pantry-zone--chilled .pantry-shelf,
.pantry-zone--frozen .pantry-shelf,
.pantry-zone--snack .pantry-shelf {
  display: block;
}

/* 冷藏：zone 本身已经是内腔范围，货架填满整个内腔，3 排各钉在两层玻璃层板 + 底板高度上 */
.pantry-zone--chilled .pantry-shelf {
  inset: 0;
}

.pantry-zone--chilled .pantry-shelf-row:nth-child(1) { bottom: 64%; }
.pantry-zone--chilled .pantry-shelf-row:nth-child(2) { bottom: 33%; }
.pantry-zone--chilled .pantry-shelf-row:nth-child(3) { bottom: 4%; }

/* 冷冻抽屉：同理，zone 已经是抽屉口范围；2 排分别钉在「靠墙」和「靠拉手前沿」 */
.pantry-zone--frozen .pantry-shelf {
  inset: 0;
}

.pantry-zone--frozen .pantry-shelf-row:nth-child(1) { bottom: 75%; }
.pantry-zone--frozen .pantry-shelf-row:nth-child(2) { bottom: 25%; }

/* 台面：贴纸坐在梯形桌面靠前的一段（原图像素量出，避开左右斜边） */
.pantry-zone--room_temp .pantry-shelf {
  inset: 10% 15% 50% 15%;
  justify-content: flex-end;
}

/* 零食柜：对齐两层空架内壁，避开两侧柜门；2 排分别钉在中间层板 + 底板高度上 */
.pantry-zone--snack .pantry-shelf {
  inset: 13% 23% 20% 23%;
}

.pantry-zone--snack .pantry-shelf-row:nth-child(1) { bottom: 50%; }
.pantry-zone--snack .pantry-shelf-row:nth-child(2) { bottom: 5%; }

.pantry-zone--cat .pantry-shelf {
  justify-content: center;
}

.pantry-shelf-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 3px solid rgba(180, 140, 90, 0.35);
  padding-bottom: 2px;
  min-height: 28px;
}

.pantry-zone--chilled .pantry-shelf-row,
.pantry-zone--frozen .pantry-shelf-row,
.pantry-zone--snack .pantry-shelf-row {
  position: absolute;
  left: 6%;
  right: 6%;
}

/* 位置模式：插画已有层板，去掉 CSS 层板线；分类托盘原本也不画线 */
.pantry-zone--chilled .pantry-shelf-row,
.pantry-zone--frozen .pantry-shelf-row,
.pantry-zone--room_temp .pantry-shelf-row,
.pantry-zone--snack .pantry-shelf-row,
.pantry-zone--cat .pantry-shelf-row {
  border-bottom: none;
}

/* ── 贴纸 ── */

.pantry-sticker {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 -8px;
  flex-shrink: 0;
  z-index: 3;
  animation: pantryStickerIn 0.24s var(--ease-out) backwards;
  cursor: pointer;
}

.pantry-sticker--back {
  transform: translateY(-9px);
  z-index: 1;
}

.pantry-sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.pantry-sticker--expired img {
  filter: grayscale(1) opacity(0.55);
}

.pantry-sticker--peek {
  transform: scale(1.18);
  z-index: 99 !important;
  filter: brightness(1.1);
}

.pantry-sticker--back.pantry-sticker--peek {
  transform: translateY(-9px) scale(1.18);
}

.pantry-sticker--still {
  animation: none;
}

/* 头顶的小气泡：快到期是琥珀色，过期是红色 */
.pantry-sticker-bubble {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #2a1a0a;
  background: #f0b429;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: pantryBubblePop 1.8s var(--ease-out) infinite;
  pointer-events: none;
}

.pantry-sticker--expired .pantry-sticker-bubble {
  background: #e05252;
  color: #fff;
}

.pantry-more {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b5842;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(120, 95, 70, 0.28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.pantry-zone--snack .pantry-more {
  color: #5c4030;
  background: rgba(255, 252, 247, 0.82);
  border-color: rgba(120, 95, 70, 0.28);
}

.pantry-zone-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  color: rgba(107, 88, 66, 0.7);
  pointer-events: none;
}

.pantry-zone--snack .pantry-zone-empty {
  color: rgba(92, 64, 48, 0.72);
}

/* 贴纸点按预览气泡（挂在场景容器上） */
.pantry-peek {
  position: absolute;
  z-index: 120;
  min-width: 110px;
  max-width: 160px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 252, 247, 0.96);
  border: 1px solid rgba(120, 95, 70, 0.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  animation: pantryPeekIn 140ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.pantry-peek-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #3d2e1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-peek-meta {
  margin-top: 2px;
  font-size: 0.65rem;
  color: #7a6a58;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-peek-exp {
  margin-top: 2px;
  font-size: 0.65rem;
  color: #7a6a58;
}

.pantry-peek-exp .pantry-exp-soon {
  color: #c48a12;
}

.pantry-peek-exp .pantry-exp-expired {
  color: #c43c3c;
}

@keyframes pantryPeekIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── 区域详情 ── */

.pantry-zoom {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  animation: pantryZoomIn 0.22s var(--ease-out) both;
}

.pantry-zoom-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pantry-zoom-head h4 {
  flex: 1;
  font-family: 'Noto Serif SC', serif;
  font-size: var(--font-size-base);
  color: var(--text-accent);
}

.pantry-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pantry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px 10px;
  border-radius: 16px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
  text-align: center;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.pantry-card:active {
  transform: scale(0.98);
}

.pantry-card-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.pantry-card--expired {
  opacity: 0.72;
}

.pantry-card-name {
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-card-meta,
.pantry-card-exp {
  width: 100%;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-card-exp .pantry-exp-soon {
  color: #f0b429;
}

.pantry-card-exp .pantry-exp-expired {
  color: #e05252;
}

.pantry-card-actions {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}

.pantry-card-actions button {
  flex: 1;
  min-height: 32px;
  padding: 7px 0;
  font-size: 0.68rem;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-tint-15);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pantry-card-actions button:hover {
  color: var(--text-accent);
  border-color: var(--accent-tint-30);
}

.pantry-card-actions button[data-act="delete"] {
  color: #c44a4a;
}

/* 购物清单等仍用行布局 */
.pantry-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
}

.pantry-row img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.pantry-row--expired {
  opacity: 0.72;
}

.pantry-row-main {
  flex: 1;
  min-width: 0;
}

.pantry-row-name {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.pantry-row-meta {
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pantry-row-meta .pantry-exp-soon {
  color: #f0b429;
}

.pantry-row-meta .pantry-exp-expired {
  color: #e05252;
}

.pantry-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.pantry-row-actions button {
  padding: 4px 8px;
  font-size: 0.68rem;
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-tint-15);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pantry-row-actions button:hover {
  color: var(--text-accent);
  border-color: var(--accent-tint-30);
}

.pantry-empty {
  padding: 24px 0;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  grid-column: 1 / -1;
}

/* ── 抽屉表单 ── */

.pantry-drawer-mask {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(6, 5, 16, 0.55);
  backdrop-filter: blur(2px);
}

.pantry-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  max-height: 86%;
  overflow-y: auto;
  padding: 18px 18px calc(18px + var(--safe-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: #171432;
  border-top: 1px solid var(--border-tint-15);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  animation: pantryDrawerUp 0.24s var(--ease-out) both;
}

.pantry-drawer h4 {
  margin-bottom: 14px;
  font-family: 'Noto Serif SC', serif;
  font-size: var(--font-size-base);
  color: var(--text-accent);
}

.pantry-field {
  display: block;
  margin-bottom: 12px;
}

.pantry-field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.pantry-field--row {
  display: flex;
  gap: 10px;
}

.pantry-field--row label {
  flex: 1;
}

.pantry-field--row label span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.pantry-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pantry-seg button {
  padding: 6px 11px;
  font-size: 0.72rem;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.pantry-seg button.active {
  color: var(--text-accent);
  background: var(--accent-tint-15);
  border-color: var(--text-accent);
}

/* ── 位置 / 分类 滑块分段 ── */

.pantry-seg2 {
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 220px;
  height: 36px;
  margin: 0 auto 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
}

.pantry-seg2-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--accent-tint-15);
  border: 1px solid var(--text-accent);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.pantry-seg2.is-category .pantry-seg2-thumb {
  transform: translateX(100%);
}

.pantry-seg2 button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-seg2 button.active {
  color: var(--text-accent);
}

.pantry-seg2 button svg {
  width: 14px;
  height: 14px;
}

/* ── 分类全景 ── */

.pantry-category-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  overflow-y: auto;
  align-content: start;
}

.pantry-zone--cat {
  min-height: 118px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.pantry-zone--cat .pantry-zone-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.06em;
  color: #3d2e1f;
  pointer-events: none;
}

.pantry-zone--cat .pantry-zone-label svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.pantry-zone--cat .pantry-zone-count {
  margin-left: 2px;
  opacity: 0.72;
  font-family: inherit;
  letter-spacing: 0;
}

.pantry-zone--cat[data-group="leftovers"] {
  background: linear-gradient(165deg, rgba(210, 224, 214, 0.94), rgba(186, 206, 192, 0.85));
  border-color: rgba(100, 130, 110, 0.35);
}

.pantry-zone--cat[data-group="veg_fruit"] {
  background: linear-gradient(165deg, rgba(214, 236, 210, 0.94), rgba(190, 220, 186, 0.85));
  border-color: rgba(110, 160, 105, 0.35);
}

.pantry-zone--cat[data-group="meat_egg_dairy"] {
  background: linear-gradient(165deg, rgba(246, 214, 220, 0.94), rgba(232, 190, 200, 0.85));
  border-color: rgba(180, 110, 125, 0.35);
}

.pantry-zone--cat[data-group="staple"] {
  background: linear-gradient(165deg, rgba(242, 228, 196, 0.94), rgba(228, 208, 168, 0.85));
  border-color: rgba(170, 140, 80, 0.35);
}

.pantry-zone--cat[data-group="instant_food"] {
  background: linear-gradient(165deg, rgba(250, 220, 190, 0.94), rgba(236, 198, 160, 0.85));
  border-color: rgba(200, 140, 80, 0.35);
}

.pantry-zone--cat[data-group="seasoning"] {
  background: linear-gradient(165deg, rgba(232, 218, 204, 0.94), rgba(210, 190, 170, 0.85));
  border-color: rgba(150, 120, 90, 0.35);
}

.pantry-zone--cat[data-group="brew_drink"] {
  background: linear-gradient(165deg, rgba(246, 230, 198, 0.94), rgba(232, 210, 168, 0.85));
  border-color: rgba(180, 140, 70, 0.35);
}

.pantry-zone--cat[data-group="snack_sweet"] {
  background: linear-gradient(165deg, rgba(250, 220, 230, 0.94), rgba(236, 198, 214, 0.85));
  border-color: rgba(190, 120, 150, 0.35);
}

.pantry-zone--cat[data-group="other"] {
  background: linear-gradient(165deg, rgba(228, 228, 230, 0.94), rgba(208, 208, 212, 0.85));
  border-color: rgba(130, 130, 140, 0.35);
}

/* ── 厨具 ── */

.pantry-equipment {
  max-width: 640px;
  margin: 0 auto 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
}

.pantry-equipment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pantry-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  font-size: 0.72rem;
  border-radius: 999px;
  color: var(--text-primary);
  background: var(--accent-tint-15);
  border: 1px solid var(--border-tint-15);
}

.pantry-chip button {
  padding: 0 3px;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}

.pantry-chip button:hover {
  color: var(--text-accent);
}

.pantry-chip-empty {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* 常见厨具：点亮=家里有，灰着=没有 */
.pantry-eq-chip {
  padding: 5px 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-tint-15);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.pantry-eq-chip.active {
  color: var(--text-accent);
  background: var(--accent-tint-15);
  border-style: solid;
  border-color: var(--accent-tint-30);
}

.pantry-eq-hint {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.pantry-equipment-add {
  display: flex;
  gap: 8px;
}

.pantry-equipment-add input {
  flex: 1;
  min-width: 0;
}

/* ── 菜谱 ── */

.pantry-recipe-list,
.pantry-recipe-detail {
  max-width: 640px;
  margin: 0 auto;
}

.pantry-recipe-detail .pantry-zoom-head h4 {
  font-size: 1.1rem;
  text-align: center;
}

.pantry-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── 菜谱搜索 ── */

.pantry-recipe-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 10px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
}

.pantry-recipe-search svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.pantry-recipe-search input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 0;
}

.pantry-recipe-search input:focus {
  outline: none;
}

.pantry-zoom-head .btn-icon svg {
  width: 18px;
  height: 18px;
}

/* ── 食材反查菜谱 ── */

.pantry-uses {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -4px 0 8px;
  padding: 8px 12px;
  font-size: 0.74rem;
  color: var(--text-muted);
  border-radius: 0 0 12px 12px;
  background: var(--accent-tint-08, var(--glass-light));
  border: 1px solid var(--border-tint-15);
  border-top: none;
  animation: pantryZoomIn var(--transition-fast) ease-out;
}

.pantry-uses-label {
  flex-shrink: 0;
}

.pantry-uses-link {
  padding: 3px 10px;
  font-size: 0.72rem;
  color: var(--text-primary);
  border-radius: 999px;
  background: var(--accent-tint-15);
  border: 1px solid var(--border-tint-15);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.pantry-uses-link:hover {
  border-color: var(--accent-tint-30);
}

.pantry-recipe-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-recipe-card:hover {
  border-color: var(--accent-tint-30);
}

.pantry-recipe-card:active {
  transform: scale(0.98);
}

.pantry-recipe-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.pantry-recipe-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-recipe-card .pantry-row-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pantry-badge {
  flex-shrink: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 9px;
  font-size: 0.66rem;
  border-radius: 999px;
  border: 1px solid var(--border-tint-15);
  color: var(--text-muted);
}

.pantry-badge--ok {
  color: #7fc7a0;
  border-color: rgba(127, 199, 160, 0.4);
}

.pantry-badge--lack {
  color: #f0b429;
  border-color: rgba(240, 180, 41, 0.4);
}

.pantry-recipe-detail {
  animation: pantryZoomIn 0.22s var(--ease-out) both;
}

/* ── 菜谱纸面 ── */

.pantry-paper {
  padding: 18px 16px 20px 42px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid rgba(210, 195, 160, 0.3);
  background:
    linear-gradient(90deg, rgba(195, 170, 130, 0.28) 0px, rgba(195, 170, 130, 0.28) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 250, 240, 0.94) 0%, rgba(252, 246, 232, 0.92) 100%);
  background-position: 30px 0, 0 0, 0 0;
  background-size: 1px 100%, 200px 200px, 100% 100%;
  background-repeat: repeat-y, repeat, no-repeat;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  color: rgba(60, 50, 40, 0.88);
}

.pantry-paper .pantry-recipe-meta {
  margin: 0 0 16px;
  font-size: var(--font-size-sm);
  color: rgba(110, 95, 75, 0.8);
  line-height: 1.6;
}

.pantry-paper .pantry-paper-warn {
  color: #a84848;
}

.pantry-paper-section {
  margin-bottom: 22px;
}

.pantry-paper-section:last-child {
  margin-bottom: 0;
}

.pantry-paper-section h5 {
  margin-bottom: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #4a3b28;
}

.pantry-paper-empty,
.pantry-ing-pending {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: rgba(110, 95, 75, 0.8);
}

.pantry-paper .pantry-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.pantry-paper .pantry-steps li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: rgba(60, 50, 40, 0.88);
}

.pantry-paper .pantry-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  display: grid;
  place-items: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.7rem;
  color: #4a3b28;
  border: 1px solid rgba(110, 95, 75, 0.45);
  border-radius: 50%;
}

.pantry-ing-rows {
  display: flex;
  flex-direction: column;
}

.pantry-ing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 0;
  font-size: var(--font-size-sm);
  color: rgba(60, 50, 40, 0.88);
  border-bottom: 1px dashed rgba(180, 155, 120, 0.35);
}

.pantry-ing-row:last-child {
  border-bottom: none;
}

.pantry-ing-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

.pantry-ing-mark--ok {
  color: #3f7d52;
}

.pantry-ing-mark--lack {
  color: #a0741a;
}

.pantry-ing-name {
  flex: 1;
  min-width: 0;
}

.pantry-ing-amount {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: rgba(110, 95, 75, 0.8);
}

.pantry-ing-buy {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -8px -6px 0;
  padding: 0;
  color: rgba(110, 95, 75, 0.85);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-ing-buy:hover {
  color: #4a3b28;
}

.pantry-ing-buy:active {
  transform: scale(0.92);
}

.pantry-ing-buy svg {
  width: 15px;
  height: 15px;
}

/* 列表外仍可用的步骤条（纸面外兜底） */
.pantry-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.pantry-steps li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--text-primary);
}

.pantry-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  display: grid;
  place-items: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 0.7rem;
  color: var(--text-accent);
  border: 1px solid var(--accent-tint-30);
  border-radius: 50%;
}

/* ── 购物清单 ── */

.pantry-shopping {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}

.pantry-shop-hint {
  margin: 4px 0 8px;
  padding: 0 4px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.pantry-shop-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 4px 2px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.pantry-shop-group-head svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pantry-shopping-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--glass-light);
  border: 1px solid var(--border-tint-15);
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-shopping-row--bought {
  cursor: pointer;
}

.pantry-shopping-row--done {
  opacity: 0.4;
}

.pantry-shopping-row--done .pantry-row-name {
  text-decoration: line-through;
}

.pantry-check {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -6px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: transparent;
  font-size: 0;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-check::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--border-tint-15);
  background: transparent;
  transition: border-color var(--transition-fast), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.pantry-check:hover::before {
  border-color: var(--accent-tint-30);
}

.pantry-check:active {
  transform: scale(0.9);
}

.pantry-check--on {
  color: #fff;
  font-size: 13px;
  z-index: 0;
}

.pantry-check--on::before {
  background-color: #3f7d52;
  border-color: #3f7d52;
  z-index: -1;
}

.pantry-shopping-row .pantry-row-actions button {
  min-height: 44px;
  min-width: 44px;
  padding: 7px 10px;
  font-size: 0.68rem;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-tint-15);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pantry-shopping-row .pantry-row-actions button:hover {
  color: var(--text-accent);
  border-color: var(--accent-tint-30);
}

.pantry-shopping-row .pantry-row-actions button[data-shop-act="delete"] {
  color: #8b2e2e;
}

.pantry-shop-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.66rem;
  border-radius: 999px;
  color: var(--text-accent);
  background: var(--accent-tint-15);
  border: 1px solid var(--border-tint-15);
}

.pantry-empty--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pantry-empty--icon svg {
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── 动画 ── */

@keyframes pantryStickerIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pantryZoomIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pantryDrawerUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pantryBubblePop {
  0%, 70%, 100% { transform: scale(1); }
  80%           { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .pantry-sticker,
  .pantry-zoom,
  .pantry-drawer,
  .pantry-recipe-detail,
  .pantry-uses,
  .pantry-sticker-bubble,
  .pantry-peek {
    animation: none;
  }

  .pantry-zone,
  .pantry-card,
  .pantry-recipe-card,
  .pantry-uses-link,
  .pantry-eq-chip,
  .pantry-check,
  .pantry-shopping-row,
  .pantry-seg2-thumb,
  .pantry-seg2 button,
  .pantry-ing-buy {
    transition: none;
  }

  .pantry-recipe-card:active,
  .pantry-check:active,
  .pantry-ing-buy:active {
    transform: none;
  }
}