/* ===========================================================
   三餐四季小帮手 · 设计系统 V6.0（暖色食欲系 A）
   保留「米白底 / 番茄红 / 奶黄」的中式温度，
   但把层级规则收紧：5 档字号、1 个强调色、状态色退为灰阶。
   =========================================================== */

:root {
  /* —— 底色层：暖米白。加深一档让白卡片能浮起来 —— */
  --bg: #F7F1E6;           /* 页面底 */
  --bg-warm: #EFE6D6;      /* 凹陷区/底部导航 */
  --surface: #FFFFFF;      /* 卡片 */
  --surface-2: #FEFAF3;    /* 卡片内的次级块 */
  --line: rgba(160, 138, 108, .16);   /* 卡片描边，替代阴影 */

  /* —— 唯一强调色：番茄红。只用于「需要你行动」和关键状态 —— */
  --brand: #E8452F;
  --brand-deep: #C6321F;
  --brand-soft: #FDEAE5;
  --brand-tint: #FFF5F2;

  /* —— 奶黄：只用于「轻松/次要」内容，如早餐 —— */
  --butter: #FBE39A;
  --butter-soft: #FEF8E7;
  --butter-deep: #EBD07A;

  /* —— 步骤圆点：用比主色更暗的砖红，避免和强调色混淆 —— */
  --accent: #C9502F;
  --accent-soft: #FBEDE6;

  /* ===========================================================
     字号阶梯：5 档（正文类）
     此前散落 22 种字号（9 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 /
     13.5 / 14 / 14.5 / 15 / 15.5 / 17 / 18 / 19 / 20 / 21 / 22 /
     25 / 26 / 27 / 30 / 34 / 42 / 46 / 54），半档跳来跳去没有层级。
     现在只允许用这 5 档 + 2 个展示专用档。
     =========================================================== */
  --fs-xs: 11px;     /* 角标、极次要说明 */
  --fs-sm: 13px;     /* 辅助信息、标签 */
  --fs-md: 15px;     /* 正文基准 */
  --fs-lg: 19px;     /* 分区标题、菜名 */
  --fs-xl: 26px;     /* 页面主标题 */
  --fs-emoji: 34px;  /* 食材图标 */
  --fs-hero: 46px;   /* 空态大图标 */

  /* —— 文字：四档灰阶拉开层次 —— */
  --ink: #241E19;          /* 标题 */
  --ink-2: #574E45;        /* 正文 */
  --ink-3: #8B8075;        /* 辅助说明 */
  --ink-4: #B3A99D;        /* 禁用/极次要 */

  /* —— 状态：全部退到中性，仅用深浅区分，红绿只留给安全相关 ——
     ok / warn / danger 在 A 方案里改为低饱和中性色，
     避免和番茄红抢注意力；但「孩子禁忌」仍保留红色警示 —— */
  --ok: #4A8A63;
  --ok-soft: #EDF5F0;
  --warn: #9A7B3F;
  --warn-soft: #FBF5E8;
  --danger: #D93B3B;
  --danger-soft: #FCEDED;
  --info: #6B7A88;
  --info-soft: #F0F2F4;

  /* —— 间距与圆角 —— */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 26px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 26px; --sp-7: 34px;

  /* —— 阴影：退为辅助，卡片主要靠描边分层 —— */
  --sh-1: 0 1px 2px rgba(80, 60, 40, .05);
  --sh-2: 0 2px 8px rgba(80, 60, 40, .07);
  --sh-3: 0 8px 26px rgba(80, 60, 40, .14);

  --nav-h: 62px;
  --maxw: 480px;

  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ===========================================================
     交互设计令牌（iOS 风格）
     此前按钮尺寸/圆角/动画时长散落各处，共出现 24 种按钮尺寸、
     高矮从 18px 到 42px 不等，点击区大面积低于 44px 触控标准。
     这里把「尺寸 + 圆角 + 缓动」收敛成一套命名令牌，
     后续新增控件只允许用这几个值，保证视觉与手感一致。
     =========================================================== */

  /* 触控高度：iOS 建议最小 44px */
  --tap-min: 44px;         /* 圆形图标键、图标按钮 */
  --tap-chip: 34px;        /* 标签类可点元素（视觉 24px + 透明内边距） */
  --tap-btn: 44px;         /* 主行动按钮 */
  --tap-sm: 36px;          /* 次要小按钮 */

  /* 圆角梯度 */
  --r-xs: 8px;
  --r-pill: 999px;

  /* 缓动曲线：iOS 的手感来自「快起步 + 缓收尾」 */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* 通用进场 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 轻微回弹（弹层） */
  --ease-inout: cubic-bezier(.4, 0, .2, 1);      /* 状态切换 */

  /* 时长阶梯 */
  --dur-1: .12s;   /* 按压反馈 */
  --dur-2: .22s;   /* 状态变化 */
  --dur-3: .32s;   /* 进场 / 退场 */
}

/* 触控反馈：所有可点元素统一（不改变布局尺寸，避免抖动） */
@media (hover: none) {
  .btn, .icon-btn, .chip, .pill, .who__b, .nav__item,
  .dish, .day, .ing--dish, .cand__i, .switch {
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-1) var(--ease-out),
                background-color var(--dur-2) var(--ease-inout),
                border-color var(--dur-2) var(--ease-inout),
                box-shadow var(--dur-2) var(--ease-inout),
                opacity var(--dur-2) var(--ease-inout);
  }
  /* 按下时轻微缩小，模拟 iOS 的物理反馈 */
  .btn:active, .icon-btn:active, .chip:active, .pill:active,
  .who__b:active, .dish:active, .day:active, .ing--dish:active,
  .cand__i:active, .switch:active {
    transform: scale(.955);
  }
  /* 导航项不做缩放（整块点击时缩放会晃），只压暗 */
  .nav__item:active { opacity: .55; }
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-warm);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: var(--fs-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body { overscroll-behavior-y: none; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: var(--brand); text-decoration: none; }

/* ===========================================================
   App 骨架
   =========================================================== */
.app {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 40px rgba(80, 60, 40, .08);
}

.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-5) 12px;
  background: rgba(251, 247, 240, .92);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(200, 180, 150, .28);
}
/* 顶栏标题用 fs-lg(19px) 而不是 fs-xl(26px)。
   26px 是页面级标题的字号，顶栏只是「你在哪个页面」的定位标识，
   不该抢走内容的注意力 —— 之前和日期数字同为 26px，层级完全没拉开，
   手机上看着两个同级元素在打架。 */
.appbar__title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.3px; }
.appbar__sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }
.appbar__spacer { flex: 1; }

.icon-btn { width: var(--tap-min); height: var(--tap-min); border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
  box-shadow: var(--sh-1); font-size: var(--fs-lg);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-inout) }


.view { padding: var(--sp-4) var(--sp-5) calc(var(--nav-h) + var(--safe-b) + 26px); }

/* ===========================================================
   底部导航
   =========================================================== */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: var(--maxw); margin: 0 auto;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  /* 底部三个：明天吃啥 / 本周菜单 / 食谱库。
     三个按钮平均分比四个宽，「明天吃啥」四个字才不会被挤到换行。 */
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(200, 180, 150, .3);
}
.nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--ink-4); font-size: var(--fs-xs); font-weight: 600;
  transition: color var(--dur-2) var(--ease-inout);
}
.nav__item .ic { font-size: var(--fs-xl); line-height: 1; transition: transform var(--dur-2) var(--ease-out); }
.nav__item.on { color: var(--brand); }
.nav__item.on .ic { transform: translateY(-2px) scale(1.08); }

/* ===========================================================
   卡片 / 标题字体（复刻参考图的手写感标题）
   =========================================================== */
.card {
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.card--flat { box-shadow: var(--sh-1); border: 1px solid rgba(200,180,150,.22); }
.card--tight { padding: var(--sp-4); }

.brand-title {
  font-size: var(--fs-emoji); font-weight: 900; letter-spacing: -1px;
  color: var(--ink); line-height: 1.2;
}
.brand-title .hl { color: var(--brand); }
.brand-title .hl2 { color: var(--accent); }

.sec {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
}
.sec__t { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.3px; }
.sec__n {
  font-size: var(--fs-xs); font-weight: 800; color: #8A6D1E;
  background: var(--butter); padding: 3px 10px; border-radius: 20px;
}
.sec__sp { flex: 1; }

/* 参考图的「准备食材」「这样做」黄色手绘块 */
.hd {
  display: inline-block;
  background: var(--butter);
  color: #4A3A10;
  font-weight: 800; font-size: var(--fs-md);
  padding: 5px 16px;
  border-radius: 999px;
  position: relative;
  box-shadow: 0 2px 6px rgba(180, 150, 60, .18);
}

/* 步骤序号与时间轴样式见文件末尾「做法步骤：加时间轴」一节 */

/* ===========================================================
   菜品主视觉：渐变占位 + emoji（复刻参考图的白盘成品图）
   =========================================================== */
.photo {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sh-2);
}
.photo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.42), transparent 55%),
              radial-gradient(circle at 75% 85%, rgba(0,0,0,.10), transparent 60%);
}
.photo__e { font-size: var(--fs-hero); filter: drop-shadow(0 6px 12px rgba(0,0,0,.2)); z-index: 1; }
.photo--s { aspect-ratio: 1 / 1; }
.photo--m { aspect-ratio: 16 / 10; }
.photo--xs { aspect-ratio: 1 / 1; border-radius: var(--r-m); }
/* 列表缩略图：成品图是 16:11 横图，直接 cover 裁成方图会只剩中央一小块，
   这里改为完整显示（contain），宁可留白也要看得清是哪道菜 */
.photo--thumb { aspect-ratio: 1 / 1; border-radius: var(--r-m);
  box-shadow: none; background: var(--bg-warm); }
.photo--thumb img { object-fit: cover; object-position: 50% 42%; }
.photo--thumb .photo__e { font-size: var(--fs-xl); }
.photo__tag {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  background: rgba(255,255,255,.92); color: var(--ink);
  font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* ===========================================================
   标签 / 徽章
   =========================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--bg-warm); color: var(--ink-2); border: 1px solid rgba(200,180,150,.35);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-inout), border-color var(--dur-2) var(--ease-inout) }
.chip--brand { background: var(--brand-soft); color: var(--brand-deep); border-color: rgba(232,69,47,.2); }
.chip--ok    { background: var(--ok-soft);   color: var(--ok);        border-color: rgba(62,142,90,.2); }
.chip--warn  { background: var(--warn-soft); color: var(--warn);      border-color: rgba(217,131,36,.2); }
.chip--danger{ background: var(--danger-soft);color: var(--danger);    border-color: rgba(217,59,59,.2); }
.chip--butter{ background: var(--butter-soft);color:#8A6D1E;         border-color: rgba(240,201,99,.35); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.badge--pending { background: var(--warn-soft); color: var(--warn); }
.badge--confirm { background: var(--ok-soft);   color: var(--ok); }
.badge--adjust  { background: var(--info-soft); color: var(--info); }
.badge--plan    { background: var(--bg-warm);   color: var(--ink-3); }

/* ===========================================================
   按钮
   =========================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap-btn); padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-md); font-weight: 700; background: var(--brand); color: #fff;
  box-shadow: 0 4px 14px rgba(232, 69, 47, .3);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-inout), opacity var(--dur-2) var(--ease-inout) }
.btn:active { transform: scale(.955); box-shadow: 0 2px 8px rgba(232,69,47,.28); }
.btn[disabled] { opacity: .42; pointer-events: none; }
.btn--sm { min-height: var(--tap-sm); padding: 7px 14px; font-size: var(--fs-sm); }
.btn--ghost {
  background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1.5px rgba(200,180,150,.5);
}
.btn--butter { background: var(--butter); color: #4A3A10; box-shadow: 0 4px 14px rgba(200,170,70,.3); }
.btn--dark   { background: var(--ink); color: #fff; box-shadow: 0 4px 14px rgba(43,37,33,.26); }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; gap: var(--sp-2); }
.btn-row > .btn { flex: 1; }

/* ===========================================================
   列表项
   =========================================================== */
.row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(200,180,150,.22);
}
.row:last-child { border-bottom: none; }
.row__t { font-weight: 700; font-size: var(--fs-md); }
.row__s { font-size: var(--fs-sm); color: var(--ink-3); }
.row__sp { flex: 1; }

/* ===========================================================
   统计格
   =========================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.stat {
  background: var(--surface-2); border-radius: var(--r-m);
  padding: var(--sp-3); text-align: center;
  border: 1px solid rgba(200,180,150,.2);
}
.stat__v { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.5px; }
.stat__l { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }

/* ===========================================================
   表单
   =========================================================== */
.field { margin-bottom: var(--sp-4); }
.field__l { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.input, .select, .textarea { width: 100%; min-height: var(--tap-btn); padding: 11px 13px;
  background: var(--surface-2); border: 1.5px solid rgba(200,180,150,.35);
  border-radius: var(--r-m); outline: none; font-size: var(--fs-md); color: var(--ink);
  transition: border-color var(--dur-2) var(--ease-inout),
              box-shadow var(--dur-2) var(--ease-inout); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232, 69, 47, .1); }
.textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.switch { width: 51px; height: 31px; border-radius: var(--r-pill); background: var(--ink-4);
  position: relative; transition: background var(--dur-2) var(--ease-inout); flex: none }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18);
  transition: transform var(--dur-2) var(--ease-spring) }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(20px); }

/* ===========================================================
   弹层 / 提示
   =========================================================== */
.mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(43, 37, 33, .42);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: var(--sp-5);
  animation: fade .2s;
}
.sheet {
  width: 100%; max-width: 400px;
  max-height: 82vh; overflow: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  animation: pop .24s cubic-bezier(.2,1.2,.4,1);
}
.sheet__hd {
  position: sticky; top: 0; z-index: 2;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  background: var(--surface);
  font-size: var(--fs-lg); font-weight: 800;
  border-bottom: 1px solid rgba(200,180,150,.22);
}
.sheet__bd { padding: var(--sp-5); }
.sheet__ft { padding: 0 var(--sp-5) var(--sp-5); display: flex; gap: var(--sp-2); }
.sheet__ft .btn { flex: 1; }

/* ===========================================================
   动画体系（参照 iOS 的运动语汇）
   原则：
   1. 只动 transform 和 opacity —— 触发重排的动画在低端机上会掉帧
   2. 进场快起步缓收尾（--ease-out），退场略快（速度感）
   3. 页面切换用「淡入 + 轻微上移」，不用横向滑动
      —— 底部导航是平级关系，横向滑动会误导用户以为是层级切换
   =========================================================== */
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

@keyframes pop {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 列表/区块进场 */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 页面级进场：比 rise 稍慢、位移更小，用于整个 view */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 详情页从右侧推入（层级下钻才配横向，符合 iOS 导航直觉） */
@keyframes pushIn {
  from { opacity: .4; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 轻提示：iOS 的从下往上浮起 */
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 16px) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* 页面切换动效 */
/* 页面切换：整个 view 淡入上移，下方区块再做细微 stagger */
.view { animation: pageIn var(--dur-3) var(--ease-out); }
.view > * { animation: rise var(--dur-3) var(--ease-out) backwards; }
.view > *:nth-child(1) { animation-delay: .03s }
.view > *:nth-child(2) { animation-delay: .07s }
.view > *:nth-child(3) { animation-delay: .11s }
.view > *:nth-child(4) { animation-delay: .14s }
.view > *:nth-child(5) { animation-delay: .17s }
.view > *:nth-child(n+6) { animation-delay: .2s }

/* 吐司 */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 22px);
  transform: translateX(-50%);
  z-index: 200;
  background: rgba(43, 37, 33, .94);
  color: #fff; font-size: var(--fs-md); font-weight: 600;
  padding: 11px 20px; border-radius: 999px;
  box-shadow: var(--sh-3);
  display: flex; align-items: center; gap: 7px;
  animation: toastIn var(--dur-3) var(--ease-out);
  max-width: 86vw; pointer-events: none;
}

/* 身份切换条 */
.who {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border-radius: 999px;
  padding: 4px; box-shadow: var(--sh-1);
}
.who__b { min-height: var(--tap-sm); padding: 6px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-inout), color var(--dur-2) var(--ease-inout) }
.who__b.on { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(232,69,47,.3); }

/* 进度条 */
.bar { height: 6px; border-radius: 999px; background: var(--bg-warm); overflow: hidden; }
.bar__f { height: 100%; border-radius: 999px; background: var(--brand); transition: width .4s var(--ease-out); }
.bar__f--warn { background: var(--warn); }
.bar__f--ok { background: var(--ok); }

/* 空状态 */
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--ink-3); }
.empty__e { font-size: var(--fs-hero); margin-bottom: var(--sp-2); }
.empty__t { font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.empty__s { font-size: var(--fs-sm); line-height: 1.7; }

/* 提示条 */
.note {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-m);
  font-size: var(--fs-sm); line-height: 1.6;
}
.note--warn { background: var(--warn-soft); color: #8A5A15; }
.note--info { background: var(--info-soft); color: #2C5C7D; }
.note--brand{ background: var(--brand-tint); color: var(--brand-deep); }
.note--ok   { background: var(--ok-soft); color: #2C6444; }

/* 周菜单横向滚动 */
.scroller { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 2px var(--sp-5); }
.scroller::-webkit-scrollbar { display: none; }
.day { background: var(--surface);
  border-radius: var(--r-s); text-align: center; box-shadow: var(--sh-1);
  min-width: 0; overflow: hidden;
  border: 1.5px solid transparent;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-inout), border-color var(--dur-2) var(--ease-inout) }
.day.on { border-color: var(--brand); background: var(--brand-tint); }
/* 字号在文件末尾「日期格状态」那节统一定义（fs-sm / fs-xl），此处只管颜色 */
.day__w { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.day__d { font-weight: 800; letter-spacing: -.3px; }
.day.on .day__d { color: var(--brand); }

/* 菜品格 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* 只有一道菜时占满整行 —— 两列布局里孤零零一张卡看起来像加载失败 */
.grid2--1 { grid-template-columns: 1fr; }
.dish {
  background: var(--surface); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--sh-2);
  text-align: left; transition: transform var(--dur-1) var(--ease-out);
}
.dish:active { transform: scale(.975); }
.dish__bd { padding: 10px 12px 12px; }
.dish__n { font-weight: 800; font-size: var(--fs-md); letter-spacing: -.2px; }
.dish__m { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.dish__f {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}

/* 购菜项 */
.buy {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(200,180,150,.22);
}
.buy:last-child { border-bottom: none; }
.check {
  flex: none; width: 24px; height: 24px; margin-top: 2px;
  border-radius: 8px; border: 2px solid var(--ink-4);
  display: grid; place-items: center;
  font-size: var(--fs-md); color: transparent;
  transition: opacity .18s var(--ease-inout);
}
.check.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.buy.done .buy__n { text-decoration: line-through; color: var(--ink-4); }
.buy__n { font-weight: 700; font-size: var(--fs-md); }
.buy__q { font-size: var(--fs-sm); color: var(--ink-3); }
.buy__p { font-weight: 700; font-size: var(--fs-md); color: var(--brand); }
.buy__from { font-size: var(--fs-xs); color: var(--ink-4); }

/* 计时器 */
.timer {
  text-align: center; padding: var(--sp-5);
  background: var(--surface); border-radius: var(--r-l);
  box-shadow: var(--sh-2);
}
.timer__v {
  font-size: var(--fs-hero); font-weight: 900; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

/* 食材小碟（复刻参考图的白色小碗） */
.dish-ing { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ing {
  flex: 1 1 30%; min-width: 68px;
  background: var(--surface); border-radius: var(--r-m);
  padding: 9px 6px; text-align: center;
  box-shadow: var(--sh-1);
  border: 1px solid rgba(200,180,150,.2);
}
.ing__e { font-size: var(--fs-xl); }
.ing__n { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
.ing__q { font-size: var(--fs-xs); color: var(--ink-3); }

/* 家庭成员卡 */
.member {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-m);
  background: var(--surface-2);
  border: 1px solid rgba(200,180,150,.2);
}

/* 时间轴 */
.tl { position: relative; padding-left: 26px; }
.tl::before {
  content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--butter); border-radius: 2px;
}
.tl__i { position: relative; padding: 7px 0; }
.tl__i::before {
  content: ''; position: absolute; left: -22px; top: 13px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.tl__t { font-size: var(--fs-sm); font-weight: 800; color: var(--brand); }
.tl__d { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.6; }

/* 打印/详情大图 */
.hero { position: relative; border-radius: var(--r-l); overflow: hidden;
  margin: 0 0 var(--sp-4); box-shadow: var(--sh-2); }
.hero .photo { border-radius: 0; aspect-ratio: 16 / 11; }

.back { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink-2); margin: -6px 0 var(--sp-2) -8px;
  min-height: var(--tap-min); padding: 0 8px; border-radius: var(--r-m) }

.divider { height: 1px; background: rgba(200,180,150,.25); margin: var(--sp-4) 0; }

.kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--fs-md); }
.kv__k { color: var(--ink-3); }
.kv__v { font-weight: 700; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ===========================================================
   今日首页 · 极简版
   原则：一屏内看完今天吃什么。照片最大，文字最少。
   时间与花销不在首页出现（已在菜品详情页和管理页）
   =========================================================== */

.view--today { padding-top: 0; }

/* —— 顶部日期条 —— */
.hero-today {
  background: linear-gradient(155deg, #FFF4E4 0%, #FDE7DF 100%);
  padding: 20px 20px 22px;
  border-radius: 0 0 26px 26px;
  margin: 0 0 4px;
}
.hero-today__top { display: flex; align-items: flex-start; gap: 12px; }
.hero-today__date { font-size: var(--fs-sm); color: #A5793A; font-weight: 700; }
.hero-today__t {
  font-size: var(--fs-emoji); font-weight: 900; letter-spacing: -1.2px;
  color: var(--ink); line-height: 1.15; margin-top: 2px;
}

/* —— 确认条：只在需要爸爸操作时出现 —— */
.confirm-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--warn-soft); color: #8A5A15;
  border-radius: 14px; padding: 11px 14px; margin-bottom: 16px;
}
.confirm-bar--info { background: var(--info-soft); color: #2C5C7D; }
.confirm-bar__tx { flex: 1; font-size: var(--fs-sm); font-weight: 700; }

/* —— 一餐 = 一块，标题在最上，卡片在下 —— */
.meal { margin-bottom: 22px; }
.meal__hd {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 10px; padding: 0 2px;
}
.meal__tag {
  flex: none;
  background: var(--ink); color: #fff;
  font-size: var(--fs-sm); font-weight: 800;
  padding: 4px 13px; border-radius: 999px;
  letter-spacing: .5px;
}
.meal__names {
  font-size: var(--fs-md); font-weight: 800; color: var(--ink);
  letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.meal__grid--1 { grid-template-columns: 1fr; }

/* —— 早餐建议：不摆大图（早餐没成品图），用轻量条目呈现 —— */
.meal--bf { background: linear-gradient(150deg, #FFFBF2 0%, #FFF4E0 100%);
  border-radius: var(--r-l); padding: 13px var(--sp-4) 15px;
  box-shadow: var(--sh-1); border: 1px solid rgba(240,201,99,.3); }
.meal--bf .meal__hd { margin-bottom: 9px; }
.meal__tag--bf { background: var(--butter); color: #6B5313; }
.meal__hint { font-size: var(--fs-xs); color: #A5793A; font-weight: 600; }

.bf-list { display: flex; flex-direction: column; gap: 6px; }
.bf-item { display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.72); border-radius: 12px; padding: 9px 12px; }
.bf-item__n { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 700;
  color: var(--ink-2); line-height: 1.45; }
.bf-item__t { flex: none; font-size: var(--fs-xs); font-weight: 700; color: #A5793A;
  background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 20px; }

/* —— 菜品卡：照片占主导 —— */
.dish {
  background: var(--surface);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(64,48,36,.10);
  text-align: left;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-inout);
}
.dish:active { transform: scale(.975); box-shadow: 0 1px 6px rgba(64,48,36,.14); }
.dish__pic { position: relative; }
/* 菜名 + 食材悬浮在图上（原来在图下方各占一行，四张卡要滚两屏）。
   靠底部渐变遮罩保证文字可读 —— 不加遮罩的话浅色菜图上白字会看不清。 */
.dish__ov {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 11px 10px;
  background: linear-gradient(to top,
    rgba(0,0,0,.74) 0%, rgba(0,0,0,.55) 46%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.dish__ov .dish__n {
  font-size: var(--fs-md); font-weight: 800; letter-spacing: -.3px;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dish__ov .dish__m {
  font-size: var(--fs-xs); color: rgba(255,255,255,.86); margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dish__like {
  position: absolute; top: 8px; right: 8px;
  font-size: var(--fs-lg);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
/* ov 的定位容器：菜名+食材叠在图上时，相对卡片定位。 */
.dish__ovw { position: relative; }

/* 汤卡不再例外 —— 之前担心「图只占 46%，悬浮文字会挤」，
   但改成整宽大图后不存在这个问题了，四类卡片视觉统一更好：
   同一个位置、同一种遮罩、同一套字号，不用记住「汤是不一样的」。 */
/* 汤卡整宽大图。原来 16/10 偏矮，汤碗里那点内容会被裁掉太多 */
.dish--soup .dish__pic { aspect-ratio: 16 / 9; }

/* —— 换菜按钮：仅爸爸 + 未确认时出现，压在图右上角 —— */
.dish--swappable { cursor: pointer; }
/* 收藏星标在左，换菜在右，避免叠在一起 */
.dish__like { left: 8px; right: auto; }

/* —— 换菜候选面板 —— */
.cand { display: flex; flex-direction: column; gap: 8px; }
.cand__i { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; background: var(--surface-2); text-align: left;
  border: 1.5px solid rgba(200,180,150,.26); border-radius: var(--r-m);
  transition: border-color var(--dur-2) var(--ease-inout), transform var(--dur-1) var(--ease-out); }
.cand__i:active { transform: scale(.985); border-color: var(--brand); }
.cand__tx { flex: 1; min-width: 0; }
.cand__n { font-size: var(--fs-md); font-weight: 800; color: var(--ink); }
.cand__m { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand__r { flex: none; text-align: right; }
.cand__t { display: block; font-size: var(--fs-sm); font-weight: 800; color: var(--accent); }
.cand__c { display: block; font-size: var(--fs-xs); color: var(--ink-4); margin-top: 1px; }

/* —— 菜品图：真实照片铺满裁切——
   1/1 → 4/3：正方形太矮了，菜图裁掉太多看不出是什么菜。
   4/3 在 350px 宽下是 262px 高，够看清单主体，又不至于把页面撑太长。 */
.photo--dish { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
.photo--real { background: var(--bg-warm); }
.photo--real img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 图片加载失败时露出占位底色，不出现破图 */
.photo--fail { background: var(--bg-warm); }
.photo--dish::after { content: none; }


/* —— 详情页大图 —— */
.hero .photo--real { border-radius: 0; }
.hero .photo--real img { aspect-ratio: 16 / 11; }

/* ===========================================================
   菜谱详情页 V5.1
   标题区承载分类/辣度/适宜性/耗时/厨具/看火强度，
   取代原先的「这道菜有多费事」与「时令提醒」两张卡片。
   =========================================================== */
.rhead { margin-bottom: var(--sp-2); }
.rhead__name { font-size: var(--fs-emoji); font-weight: 900; letter-spacing: -1px;
  color: var(--ink); line-height: 1.2; margin: 0 0 10px; }
.rhead__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rhead__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px;
  padding-top: 11px; border-top: 1px dashed rgba(200,180,150,.45); }
.meta { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.meta i { font-style: normal; font-size: var(--fs-sm); }
.meta--ok { color: var(--ok); }
.meta--warn { color: var(--warn); }

/* —— 核心食材：大卡片、图片占比更高 ——
   主料数量按 1~5 浮动，用 auto-fit + 最小宽度自适应列数，
   避免只有 1-2 个主料的菜在固定三列网格里留大片空白 */
.dish-ing--main { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.ing {
  background: var(--surface-2); border-radius: var(--r-m);
  padding: 12px 6px 11px; text-align: center;
  border: 1px solid rgba(200,180,150,.22);
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dish-ing--main .ing__e { font-size: var(--fs-emoji); line-height: 1.1; margin-bottom: 3px; }
.ing__n { font-size: var(--fs-sm); font-weight: 800; color: var(--ink); }
.ing__q { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }

/* —— 菜谱库：真图卡片，菜名压在图下方的渐变遮罩上 —— */
.dish-ing--lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ing--dish { position: relative; padding: 0; overflow: hidden;
  aspect-ratio: 1 / 1; border: 0; box-shadow: none; display: block; }
.ing--dish .photo { width: 100%; height: 100%; border-radius: var(--r-m);
  aspect-ratio: 1 / 1; }
.ing--dish .photo::after { background: linear-gradient(to top,
  rgba(20,14,8,.78) 0%, rgba(20,14,8,.34) 38%, transparent 62%); }
.ing--dish .photo__e { font-size: var(--fs-emoji); }
.ing--dish .photo__e + .ing__n { display: none; }
.ing--dish .ing__n--over, .ing--dish .ing__q--over {
  position: absolute; left: 0; right: 0; z-index: 2; }
.ing--dish .ing__n--over { bottom: 20px; padding: 0 8px; font-size: var(--fs-sm);
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ing--dish .ing__q--over { bottom: 6px; padding: 0 8px; font-size: var(--fs-xs);
  color: rgba(255,255,255,.82); }

/* —— "还需要"调料行 —— */
.ing-rest { display: flex; gap: 9px; align-items: flex-start; }
.ing-rest__k { flex: none; font-size: var(--fs-xs); font-weight: 800; color: #8A6D1E;
  background: var(--butter-soft); border: 1px solid rgba(240,201,99,.4);
  padding: 3px 9px; border-radius: 20px; }
.ing-rest__v { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; }

/* ===========================================================
   家庭投票列表
   =========================================================== */
.hint { font-size: var(--fs-xs); color: var(--ink-4); margin: -6px 0 10px; }

.vote { display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid rgba(200,180,150,.22); }
.vote:last-of-type { border-bottom: none; }
.vote .photo--thumb { width: 52px; height: 52px; min-width: 52px; }

.vote__info { flex: 1; min-width: 0; text-align: left; background: none;
  border: 0; padding: 0; cursor: pointer; }
.vote__info .row__t { font-size: var(--fs-md); }
.vote__tally { font-size: var(--fs-xs); color: var(--ink-4); margin-top: 3px; font-weight: 700; }

.vote__acts { display: flex; gap: 5px; flex: none; }
/* 胶囊按钮：比 36px 圆钮更省空间，激活态明确可见 */
.pill { width: var(--tap-sm); height: var(--tap-sm); border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-md); background: var(--surface-2);
  border: 1px solid rgba(200,180,150,.3);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-inout), border-color var(--dur-2) var(--ease-inout) }

.pill.on { background: var(--brand-soft); border-color: rgba(232,69,47,.35);
  box-shadow: 0 0 0 2px rgba(232,69,47,.12); }


/* ===========================================================
   详情页：层级下钻才用横向推入（iOS 导航惯例）。
   与底部 tab 的平级切换区分开，避免手势语义混淆。
   =========================================================== */
.view--push { animation: pushIn var(--dur-3) var(--ease-out); }
.view--push > * { animation: none; }

/* 菜品大图加载完成后的轻微缩放回落，给一点"落位"感 */
.photo--real img { animation: none; }
@keyframes imgIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}
.photo--real img { animation: imgIn var(--dur-3) var(--ease-out) both; }

button.chip { min-height: var(--tap-chip); }

/* ===========================================================
   线性 SVG 图标（替代功能 emoji）
   统一 1.7px 描边 / 圆头圆角 / currentColor，激活态填充。
   =========================================================== */
.ic-svg { display: block; flex: none; }
.ic-svg--on { stroke-width: 1.2; }

/* 底部导航：图标 + 文字，激活时图标填充并上浮 */
.nav__item .ic { display: grid; place-items: center; height: 24px; }
.nav__item.on .ic { color: var(--brand); }

/* 图标按钮：描边与背景对比更清晰 */
.icon-btn { color: var(--ink-2); }
.icon-btn:active { color: var(--ink); }

/* 换菜角标：现在是图标，不再需要文字宽度 */
.dish__swap .ic-svg { opacity: .82; }
/* 激活态：只加粗描边，不填充（填充会糊掉线条细节） */
.ic-svg--on { stroke-width: 2.1; }
/* 导航图标略放大，找回 emoji 的视觉重量 */
.nav__item .ic { height: 26px; }
.nav__item .ic-svg { width: 24px; height: 24px; }

/* ===========================================================
   今日页 V6：层级收敛
   ------------------------------------------------------------
   此前结构：hero 大色块 → 早餐独立卡 → 确认条大卡 → 午/晚餐 → 汤 → 买菜入口
   5 个圆角块 + 2 个色块全部同级，菜品图被淹没。
   现在：标题退为一行文字 → 早餐退为一行 → 确认压缩为细条 → 菜品图当主角。
   =========================================================== */

.today-top { display: flex; align-items: flex-start; gap: 12px;
  padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.today-top__d { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.today-top__t { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -1px;
  color: var(--ink); line-height: 1.15; margin-top: 2px; }


/* 确认条：压缩成细条，不再抢菜品图的视线 */
.today-cta { display: flex; align-items: center; gap: 10px;
  margin: 0 var(--sp-5) var(--sp-4); padding: 8px 8px 8px 14px;
  background: var(--brand-tint); border-radius: var(--r-pill);
  border: 1px solid rgba(232,69,47,.2); }
.today-cta__tx { flex: 1; font-size: var(--fs-sm); font-weight: 700; color: var(--brand-deep); }
.today-cta--info { background: var(--info-soft); border-color: rgba(107,122,136,.22); }
.today-cta--info .today-cta__tx { color: var(--info); }

/* 餐次标题：右侧补总耗时 */
.meal__sp { flex: 1; }
.meal__time { flex: none; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-3); background: var(--bg-warm);
  padding: 2px 9px; border-radius: var(--r-pill); }

/* 买菜入口图标换成线性 SVG */
  color: var(--brand); flex: none; }

/* 孩子适宜度：菜名下方一行小字 */
.dish__kid { margin-top: 5px; font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px; }
.dish__kid--ok { color: var(--ok); }
.dish__kid--adjust { color: var(--warn); }
.dish__kid--no { color: var(--danger); }

/* —— 菜谱库置顶区：最近做过 / 孩子爱吃 —— */
.lib-top { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.lib-top__t { font-size: var(--fs-xs); font-weight: 800; color: var(--ink-3);
  margin-bottom: 6px; letter-spacing: .3px; }
.lib-top__row { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-chip { display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; min-height: var(--tap-chip);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700;
  color: var(--ink-2); transition: transform var(--dur-1) var(--ease-out),
    border-color var(--dur-2) var(--ease-inout), background var(--dur-2) var(--ease-inout); }
.lib-chip:active { transform: scale(.95); }
.lib-chip__e { font-size: var(--fs-md); }

/* ===========================================================
   做法步骤：加时间轴
   做饭时最想知道的是「现在该做什么、还要多久」，
   原先只有序号没有时间，等于让人自己心算。
   =========================================================== */
.step { display: flex; gap: var(--sp-3); align-items: stretch; padding: 0; }
.step__rail { flex: none; width: 28px; display: flex; flex-direction: column;
  align-items: center; }
.step__n { flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 800;
  box-shadow: 0 2px 6px rgba(201, 80, 47, .28); }
/* 两个序号之间连一条竖线，形成时间轴 */
.step:not(:last-child) .step__rail::after {
  content: ''; flex: 1; width: 2px; margin: 4px 0;
  background: rgba(200, 180, 150, .3); border-radius: 2px; }
.step__bd { flex: 1; min-width: 0; padding-bottom: var(--sp-4); }
.step__tx { font-size: var(--fs-md); line-height: 1.65; color: var(--ink-2); }
.step__t { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-4); font-weight: 600; }

/* 孩子适宜度：压到图上的低饱和小角标，不与菜名争视觉 */
.dish__kid { position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 800;
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.dish__kid--ok { color: var(--ok); }
.dish__kid--adjust { color: var(--warn); }
.dish__kid--no { color: var(--danger); }
/* 收藏星标挪到右上，和换菜按钮（右侧）分开 */
.dish__like { top: 8px; left: 34px; right: auto; }

/* 早餐换行显示，不再截断 */
.today-bf { align-items: flex-start; }
.today-bf__v { white-space: normal; line-height: 1.55; }
.today-bf__k, .today-bf__m { margin-top: 1px; }

/* ===========================================================
   买菜页空态：给"下一步该做什么"，而不是一片空白
   =========================================================== */
.shop-guide { display: flex; gap: var(--sp-3); align-items: flex-start; }
.shop-guide__n { flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--butter-soft); color: var(--butter-deep); }
.shop-guide__t { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.shop-guide__d { margin-top: 5px; font-size: var(--fs-sm); line-height: 1.65;
  color: var(--ink-2); }

.shop-next__k { font-size: var(--fs-xs); font-weight: 800; color: var(--ok); }
.shop-next__m { margin-top: 4px; font-size: var(--fs-md); color: var(--ink-2); line-height: 1.5; }
.shop-next__a { display: flex; gap: var(--sp-2); margin-top: 12px; }
.shop-next__a .btn { flex: 1; }

/* ===========================================================
   详情页头部：两行紧凑排布
   原先是「四连标签 + 四行元信息」= 七八个色块挤在一起，
   现在合成两行文字，只给真正需要注意的那一项上色。
   =========================================================== */
.rhead__row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-2); }
.rhead__row + .rhead__row { margin-top: 7px; }
.rhead__cat { font-weight: 700; color: var(--ink); }
.rhead__dot { color: var(--ink-4); }
.rhead__row--dim { font-size: var(--fs-xs); color: var(--ink-3); }
.rhead__ic { display: inline-flex; align-items: center; gap: 4px; }
.rhead__ic .ic-svg { opacity: .7; }
.rhead__ic.is-ok { color: var(--ok); }
.rhead__ic.is-warn { color: var(--warn); }
/* 行内 chip 缩小一号，避免和标题抢 */
.rhead__row .chip { padding: 2px 8px; }

/* ===========================================================
   周菜单：日期条 + 内容滑动过渡
   =========================================================== */

/* 状态改为圆点，不再在窄格里挤三个字 */
.day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.day.on .day__dot { transform: scale(1.25); }
.day.is-today .day__w { color: var(--brand); font-weight: 800; }

/* 图例：把状态含义放在日期条下方，避免每个格子重复写文字 */

/* 内容切换：横向滑入，方向由 --slide-dir 决定。
   不要用 animation-play-state 手动控制 —— 时序不可靠，
   偶尔会停在 opacity:0 上，页面看起来整片空白。
   直接让动画自动播，render 时元素是新建的，天然会重播一次。 */
.week-body { animation: weekSlide var(--dur-3) var(--ease-out) both; }
@keyframes weekSlide {
  from { opacity: 0; transform: translateX(calc(18px * var(--slide-dir, 1))); }
  to   { opacity: 1; transform: translateX(0); }
}


/* 没有菜单的日期：淡显但仍可点（点了能当场排） */
.day.is-empty { opacity: .5; }
.day.is-empty .day__dot[data-s="none"] { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-4); }

/* 图例里的圆点继承 date 格的样式，这里只固定尺寸与不参与选中放大 */

/* 日期格下的状态图标：待审核=换的箭头，已确认=对勾 */

/* 图例：图标 + 文字对齐，字体略小但可读 */

/* 旧的圆点状态样式不再使用 */

/* 收藏星标：没角标时占左上，有辣度角标时往右让 */
.dish__like { top: 7px; }
.dish__pic:has(.dish__heat) .dish__like { left: 40px; }

/* ===========================================================
   早餐区块：标签与午晚餐完全一致（黑底白字），内部列推荐
   =========================================================== */
.meal--bf { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 13px var(--sp-4) 15px;
  box-shadow: var(--sh-2); }
.meal--bf .meal__hd { margin-bottom: 10px; }
.meal--bf .meal__tag { background: var(--ink); }

/* 推荐条目：推荐一 / 推荐二 */
.bf-rec { display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0; border-top: 1px solid var(--line); }
.bf-rec:first-of-type { border-top: 0; }
.bf-rec__k { flex: none; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-3); }
.bf-rec__v { flex: 1; min-width: 0; font-size: var(--fs-md);
  font-weight: 700; color: var(--ink-2); }
/* 换一份：与菜图上的换菜角标同一套视觉语言，
   位置放右上角而不是 inline —— 早餐卡是横向布局，挤进正文会挤掉功效那行 */
.bf-rec__swap { flex: none; align-self: center; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--sh-1);
  color: var(--ink-3); cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out); }
.bf-rec__swap:active { transform: scale(.9); color: var(--brand); }

/* 换早餐弹窗的选项列表 */
.bf-swap { margin-top: var(--sp-3); max-height: 52vh; overflow-y: auto; }
.bf-swap__i { display: block; width: 100%; text-align: left;
  padding: 11px var(--sp-4); margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); transition: background var(--dur-1); }
.bf-swap__i:active { background: var(--surface-2); }
.bf-swap__n { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.bf-swap__m { display: flex; align-items: center; gap: 7px; margin-top: 4px;
  flex-wrap: wrap; }
.bf-swap__f { font-size: var(--fs-xs); color: var(--ink-4); }
.bf-swap__t { font-size: var(--fs-xs); color: var(--ink-4); margin-left: auto; }
.bf-rec__t { flex: none; font-size: var(--fs-xs); color: var(--ink-4); font-weight: 700; }

/* 辣度角标：一个「辣」字。
   与「换」按钮同样的视觉规格（白底圆角小标 + 轻投影），
   不分辣的程度，不画辣椒 emoji（跨平台字形差异大）。 */
.dish__heat { position: absolute; top: 7px; left: 8px; z-index: 3;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 800; line-height: 1;
  color: var(--brand-deep);
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,.14); }

/* ===========================================================
   小角标统一规格
   ------------------------------------------------------------
   「辣」（菜品左上）与「换」（菜品右上）、「待审核/已确认」（日期格下方）
   三种角标此前各写一套：底色一个白、一个米色；尺寸 18/22/26px 不一。
   抽成一套 token，尺寸只留 22px 圆标一种，字号描边统一。
   =========================================================== */
.badge-mini { position: absolute; z-index: 3;
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  transition: transform var(--dur-1) var(--ease-out); }
.badge-mini:active { transform: scale(.9); }
.badge-mini--txt { font-size: var(--fs-xs); font-weight: 800; line-height: 1; }

/* 菜品卡：左上「辣」，右上「换」 */
.dish__heat { top: 7px; left: 7px; color: var(--brand-deep); }
/* 换菜是常用操作，22px 的视觉尺寸下可点区要扩到 34px（用透明扩展，不改视觉大小） */
.dish__swap { top: 7px; right: 7px; color: var(--ink-2); cursor: pointer;
  min-width: 22px; height: 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.14), 0 0 0 6px rgba(255,255,255,0); }
.dish__swap::before { content: ''; position: absolute; inset: -6px; }
.dish__swap .ic-svg { opacity: .85; }
/* 有辣角标时，收藏星标右移让位 */
.dish__pic:has(.dish__heat) .dish__like { left: 34px; }

/* 日期格下的状态角标：不悬浮在图上，用浅底描边以示不同层级 */


/* ===========================================================
   换菜弹窗：复用菜谱库的卡片网格，改两列
   ------------------------------------------------------------
   原来是 44px 小缩略图的列表，一屏只看得到 6-7 道，选菜效率低。
   改成和大图卡一致的双列网格，一屏能看 12 道，且图能认出是哪道菜。
   =========================================================== */
.swap-tip { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: var(--sp-4); }
.swap-tip__k { flex: none; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-3); }
.swap-tip__v { font-size: var(--fs-md); font-weight: 800; color: var(--ink);
  text-decoration: line-through; text-decoration-color: var(--ink-4); }
.swap-tip__n { font-size: var(--fs-xs); color: var(--ink-3); margin-left: auto; }

.swap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.swap-c { display: block; text-align: left; background: none; padding: 0;
  border-radius: var(--r-m); overflow: hidden;
  transition: transform var(--dur-1) var(--ease-out); }
.swap-c:active { transform: scale(.97); }
.swap-c__pic { position: relative; border-radius: var(--r-m); overflow: hidden; }
.swap-c__pic .photo { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-m); }

.swap-c__n { margin-top: 7px; font-size: var(--fs-sm); font-weight: 800;
  color: var(--ink); letter-spacing: -.2px; }
.swap-c__m { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-c__f { display: flex; gap: 8px; margin-top: 4px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-4); }

/* ===========================================================
   日期格：状态只用颜色区分，不再挂任何角标
   ------------------------------------------------------------
   待审核 = 白底（默认态）
   已确认 = 绿色底，日期数字也转绿
   选中那天 = 番茄红描边 + 浅红底（压过状态色，表示"你正在看这天"）
   腾出来的空间给字号：星期用 fs-sm，日期数字用 fs-xl。
   =========================================================== */
/* —— 日期格状态 —— */
.day { padding: 8px 1px 10px; }
.day__w { font-size: 11px; font-weight: 700; letter-spacing: -.2px; }
.day__d { font-size: 19px; font-weight: 900; letter-spacing: -.5px; margin-top: 1px; }

.day--wait { background: var(--surface); }
.day--ok { background: var(--ok-soft); border-color: rgba(62,142,90,.2); }
.day--ok .day__d { color: var(--ok); }
.day--ok .day__w { color: var(--ok); opacity: .85; }

.day.on { border-color: var(--brand); background: var(--brand-tint); }
.day.on .day__d, .day.on .day__w { color: var(--brand); }

/* ===========================================================
   节假日：格子染上节日色，一眼能和普通周末分开。
   调休上班日反过来用冷色 + 虚线边 —— 它长得像假期却是工作日，
   不做视觉区分的话，当天推荐了炖肉就白炖了。

   放在 .day--ok 之后：已确认的节日格要同时表达两件事
   （这天是节日 + 这天已确认），节日色不能被确认色盖掉。
   选中态优先级最高 —— 选中的那天是什么颜色不重要，重要的是看得见。
   =========================================================== */
.day--holiday.day--wait, .day--holiday:not(.on) {
  background: #FFF3E2; border-color: rgba(200,120,40,.28); }
.day--holiday .day__w { color: #B4610F; font-weight: 800; }
.day--holiday .day__d { color: #8A4A08; }
/* 已确认的节日格：保留节日底色，只把数字换成确认绿 */
.day--holiday.day--ok .day__d { color: var(--ok); }
.day--holiday.day--ok .day__w { color: #B4610F; opacity: 1; }

/* 「调休上班」4 个字在 36px 宽的格子里必然截断。
   改成两行显示，「上班」第二行用更小的字号，
   完整可读又不会撑破格子。 */
.day--makeup { background: var(--surface-2); border-style: dashed; border-color: rgba(120,130,150,.45); }
.day--makeup .day__w { color: var(--ink-4); font-weight: 700; font-size: 10px;
  line-height: 1.2; letter-spacing: -.4px; }
.day--makeup .day__d { color: var(--ink-3); }
.day--makeup.day--ok .day__d { color: var(--ok); }

/* 选中态盖过节日色 */
.day--holiday.on, .day--makeup.on { background: var(--brand-tint); border-style: solid; }
.day--holiday.on .day__w, .day--holiday.on .day__d,
.day--makeup.on .day__w, .day--makeup.on .day__d { color: var(--brand); }

/* —— 换菜弹窗：分类过滤 chips + 分批提示 —— */
.swap-cats { display: flex; gap: 6px; overflow-x: auto; margin-bottom: var(--sp-4);
  padding-bottom: 2px; scrollbar-width: none; }
.swap-cats::-webkit-scrollbar { display: none; }
.swap-cat { flex: none; padding: 6px 13px; min-height: var(--tap-sm);
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700;
  background: var(--surface-2); color: var(--ink-3);
  border: 1px solid var(--line); white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out),
              background-color var(--dur-2) var(--ease-inout),
              color var(--dur-2) var(--ease-inout); }
.swap-cat:active { transform: scale(.95); }
.swap-cat.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 卡片只留图 + 菜名，省出高度 */
.swap-c__n { margin-top: 6px; font-size: var(--fs-sm); font-weight: 800;
  color: var(--ink); letter-spacing: -.2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em; }

.swap-more { text-align: center; padding: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-xs); color: var(--ink-4); }
.swap-empty { text-align: center; padding: var(--sp-6) 0;
  font-size: var(--fs-sm); color: var(--ink-3); }

/* 候选池说明：告诉用户「库里共 95 道，这里只有 69 道」，
   并列出少的那些是什么 —— 不说的话会被理解成「没加载完」。
   用中性灰阶，不用警告色：这是正常规则，不是错误。 */
.swap-note { margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); }
.swap-note__t { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; }
.swap-note__b { font-size: var(--fs-xs); color: var(--ink-4); margin-top: 3px; line-height: 1.55; }

/* ===========================================================
   今日页：减一道开关 + 底部动作条
   =========================================================== */
/* 餐次右上角的开关：「晚上少吃点」「没时间做汤」 */
.meal__tog {
  flex: none; margin-left: auto;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3);
  transition: background var(--dur-1), color var(--dur-1);
}
.meal__tog:active { background: var(--line); }
.meal__tog.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 「已去掉…点这里加回来」/「没时间做汤」——比按钮轻，占位小 */
.meal__drop {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: -4px; padding: 11px var(--sp-4);
  border: 1px dashed var(--line); border-radius: var(--r-m);
  background: transparent; color: var(--ink-4);
  font-size: var(--fs-xs); text-align: left;
}
.meal__drop:active { background: var(--surface-2); }
.meal__drop__ic { flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); }

/* 底部两个并排动作：确认 / 分享 */
.today-actions {
  display: flex; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-2);
}
.today-actions .btn { flex: 1; justify-content: center; }
.today-done { text-align: center; font-size: var(--fs-xs); color: var(--ink-4);
  padding-bottom: var(--sp-2); }

/* 选哪一道去掉 */
.pick2 { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.pick2__i { flex: 1; padding: var(--sp-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-m); text-align: left; }
.pick2__i:active { background: var(--surface-2); }
.pick2__n { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-top: 6px; }
.pick2__m { font-size: var(--fs-xs); color: var(--ink-4); margin-top: 2px; }


/* ===========================================================
   食谱库：tab + facet
   ------------------------------------------------------------
   原来「做法」和「主料」两组 chip 叠着铺，占掉半屏还互相干扰
   （两个条件同时收窄很容易筛出空列表）。
   改成一次只呈现一个维度：tab 选维度，facet 选具体项。

   tab 用分段控件而不是下划线 tab —— 一共只有三个，
   并排等宽更省高度，切换时也不会「点了没反应」的感觉。
   =========================================================== */
.lib-tabs {
  display: flex; gap: 3px; margin-top: var(--sp-3);
  background: var(--surface-2); border-radius: var(--r-m); padding: 3px;
}
.lib-tab {
  flex: 1; padding: 8px 4px; border-radius: 9px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3);
  transition: background var(--dur-1), color var(--dur-1);
}
.lib-tab.on { background: var(--surface); color: var(--brand); box-shadow: var(--sh-1); }
.lib-tab:active { transform: scale(.98); }

/* facet 标签栏：数量排在名字后面，横向滚动不换行 */
.lib-facet {
  display: flex; gap: 6px; margin-top: var(--sp-3);
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.lib-facet::-webkit-scrollbar { display: none; }
.lib-facet .chip { flex: none; }
.lib-facet .chip i { font-style: normal; opacity: .55; margin-left: 3px; font-size: 11px; }

/* 结果计数 + 孩子适宜开关 */
.lib-bar { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-3); }
.lib-bar__n { flex: 1; font-size: var(--fs-xs); color: var(--ink-4); }

/* ===========================================================
   分享今日菜单
   =========================================================== */

.share-load { padding: var(--sp-6) 0; text-align: center;
  font-size: var(--fs-sm); color: var(--ink-4); }

/* 图片要「看起来可长按」：不加 user-select:none，
   否则 iOS 长按会选中文字而不是弹出保存菜单 */
.share-pv { text-align: center; }
.share-pv__i { width: 100%; height: auto; display: block;
  border-radius: var(--r-s); box-shadow: var(--sh-2);
  -webkit-touch-callout: default; }
.swap-cats { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
.swap-cats::-webkit-scrollbar { display: none; }

/* 菜名压在图上（参考菜谱库的卡片做法），不再占用图下空间 */
.swap-c { position: relative; }
.swap-c__pic { position: relative; border-radius: var(--r-m); overflow: hidden; }
.swap-c__pic .photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-m); }
.swap-c__n { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: 18px 10px 9px; text-align: left;
  font-size: var(--fs-sm); font-weight: 800; line-height: 1.3; color: #fff;
  letter-spacing: -.2px;
  background: linear-gradient(to top, rgba(28,20,14,.82) 0%, rgba(28,20,14,.5) 45%, rgba(28,20,14,0) 100%); }

/* ===========================================================
   换菜弹窗：筛选标签计数 + 超时标注
   =========================================================== */
/* 标签后面的数字：这个条件下有几道菜可选。
   没有数字的时候，「砂锅焗煲」看着像空的，其实有 9 道。 */
.swap-cat { display: inline-flex; align-items: center; gap: 5px; }
.swap-cat i { font-style: normal; font-size: 10px; font-weight: 800; line-height: 1;
  padding: 3px 5px; border-radius: 999px;
  background: var(--line); color: var(--ink-4); }
.swap-cat.on i { background: rgba(255,255,255,.24); color: rgba(255,255,255,.92); }

/* 超时的菜：整体压暗一点，图上标「慢 X 分」
   角标避开右上角的辣标和换菜按钮，压在菜名上方 */
.swap-c--slow { opacity: .72; }
.swap-c--slow:active { opacity: 1; }
.swap-c__slow { position: absolute; top: 6px; left: 6px; z-index: 3;
  padding: 3px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; line-height: 1.3; white-space: nowrap;
  color: #6B3E16; background: rgba(255,236,205,.94);
  box-shadow: 0 1px 4px rgba(0,0,0,.14); }

/* ===========================================================
   换菜二次确认
   =========================================================== */
.cfm__row { display: flex; align-items: center; gap: 10px; }
.cfm__side { flex: 1; min-width: 0; text-align: center; }
.cfm__cap { font-size: var(--fs-xs); font-weight: 800; color: var(--ink-3); margin-bottom: 7px; }
.cfm__cap--new { color: var(--brand); }
.cfm__pic { border-radius: var(--r-m); overflow: hidden; opacity: .55; }
.cfm__pic .photo { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-m); }
.cfm__n { margin-top: 7px; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-3);
  text-decoration: line-through; text-decoration-color: var(--ink-4); }
.cfm__n--new { color: var(--ink); text-decoration: none; }
.cfm__arrow { flex: none; color: var(--brand); display: grid; place-items: center; }
.cfm__meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-top: var(--sp-4); }

/* —— 换菜弹窗：换角标回到右上角，菜名居中 —— */
.swap-c__go { position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink-2);
  box-shadow: 0 1px 4px rgba(0,0,0,.16); backdrop-filter: blur(6px); }
.swap-c__go .ic-svg { opacity: .85; }

/* 菜名居中（原来靠左） */
.swap-c__n { text-align: center; padding: 20px 8px 10px; }


/* ===========================================================
   早餐条目：菜名 + 功效（原来右侧是分钟数）
   功效比「几分钟」更有决策价值 —— 看到「补钙养胃」就知道该喝
   牛奶还是吃豆花，而「3 分钟」不改变任何选择。
   =========================================================== */
.bf-rec__bd { flex: 1; min-width: 0; }
.bf-rec__f { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-4);
  font-weight: 600; letter-spacing: .2px;
  display: flex; align-items: center; gap: 4px; }
/* 功效前加一个小圆点，视觉上从属于菜名 */
.bf-rec__f::before { content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-4); flex: none; opacity: .7; }
/* 原 .bf-rec__t（分钟数）不再使用 */
.bf-rec__t { display: none; }

/* ===========================================================
   换菜弹窗：双维筛选（做法 × 主料）
   ------------------------------------------------------------
   两行标签，第一行「做法」、第二行「主料」，
   各自独立筛选（与的关系）。标签按当前候选动态生成，
   不会出现「选了这个做法但主料维度是空的」的情况。
   =========================================================== */
.swap-filter { display: flex; flex-direction: column; gap: 9px; margin-bottom: var(--sp-4); }
.swap-filter__row { display: flex; align-items: flex-start; gap: 9px; }
.swap-filter__lb { flex: none; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-4); padding-top: 7px; letter-spacing: .5px; }
.swap-filter__tags { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }