/* ═══════════════════════════════════════════════════
   今晚吃什么？ — 视觉系统
   移动优先；桌面端收成手机宽度的一道框

   设计原则
   1. 层次靠"光"建立：顶部受光（内高光）、底部投影，
      而不是所有卡片平铺同一个白。
   2. 颜色要克制：墨绿＝品牌与肯定，赭橙＝行动与热度，
      其余全是中性暖调，不抢戏。
   3. 字号拉开阶梯，标题收紧字距并压重，正文留呼吸。
   ═══════════════════════════════════════════════════ */

:root{
  /* ── 中性：暖米白。刻意比卡片暗一档，否则白卡片浮不出来 ── */
  --bg:       #EDE6D6;
  --bg-deep:  #E4DAC5;
  --bg-sink:  #D9CDB4;
  --card:     #FFFFFF;
  --card-2:   #FDFBF6;
  --ink:      #131D19;
  --ink-2:    #4A594F;
  --ink-3:    #86928A;
  --line:     #E0D7C5;
  --line-2:   #EFE9DC;

  /* ── 品牌：深一度的墨绿，沉稳 ── */
  --brand:    #0F5F46;
  --brand-2:  #1B7B5C;
  --brand-3:  #2E9A76;
  --brand-dk: #093C2D;
  --brand-lt: #E6F1EB;
  --brand-bd: #C6E0D4;

  /* ── 强调：赭橙，温润不刺眼。行动色，只给主按钮 ── */
  --hot:      #CE4E1B;
  --hot-2:    #E4703C;
  --hot-3:    #F08A57;
  --hot-dk:   #9E3A12;
  --hot-lt:   #FCECE2;
  --hot-bd:   #F2D2BE;

  /* ── 语义色 ── */
  --sea:      #12657E;  --sea-lt:  #E2EFF3;
  --veg:      #46762C;  --veg-lt:  #ECF3E5;
  --like:     #BE3767;  --like-lt: #FBE9F0;
  --warn-ink: #8A3510;  --warn-bd: #F0D2BF;

  /* ── 圆角 ── */
  --r-xl: 24px; --r-lg: 18px; --r-md: 13px; --r-sm: 9px; --r-pill: 999px;

  /* ── 高度：每一级都比上一级"浮"得更多 ── */
  --sh-1: 0 1px 2px rgba(19,29,25,.05);
  --sh-2: 0 1px 2px rgba(19,29,25,.045), 0 8px 20px -14px rgba(19,29,25,.28);
  --sh-3: 0 2px 4px rgba(19,29,25,.05), 0 16px 34px -18px rgba(19,29,25,.34);
  --sh-4: 0 3px 8px rgba(19,29,25,.05), 0 28px 56px -24px rgba(19,29,25,.42);
  /* 卡片顶缘的一道内高光：模拟光从上方打下来，这是"有厚度"的关键 */
  --edge: inset 0 1px 0 rgba(255,255,255,.92);

  --tab-h: 64px;
  --ease: cubic-bezier(.22,.9,.28,1);
  /* 极细的纸纹噪点。几乎看不见，但去掉了塑料感 */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.032'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;color:var(--ink);
  /* 顶部一片暖光往下衰减，页面因此有"从亮到暗"的呼吸，而不是一块平色。
     顶部亮色必须从 --card 一档出发，不能写死，否则会盖掉压深后的底色。 */
  background:
    radial-gradient(120% 46% at 50% -10%, rgba(255,253,248,.85) 0%, rgba(255,253,248,0) 58%),
    linear-gradient(176deg, #F4EDDF 0%, var(--bg) 34%, var(--bg-deep) 100%);
  background-attachment:fixed;
  font:15px/1.66 -apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC",
    "Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  font-feature-settings:"tnum" 0;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
}
/* 纸纹层：固定在最底下，不参与滚动 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);
}
body>*{position:relative;z-index:1}

button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:var(--brand);text-decoration:none}

/* 统一的键盘焦点环：只在键盘导航时出现，鼠标点击不打扰 */
:focus-visible{outline:2.5px solid var(--brand-3);outline-offset:2px;border-radius:6px}

/* ───── 顶栏 ───── */
.topbar{
  position:sticky;top:0;z-index:30;color:#fff;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(158deg,var(--brand-3) 0%,var(--brand-2) 34%,var(--brand) 68%,var(--brand-dk) 100%);
  padding:calc(env(safe-area-inset-top) + 15px) 16px 19px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 26px -16px rgba(9,60,45,.66);
}
.topbar-in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px}
.brand{flex:1;min-width:0;display:flex;align-items:center;gap:11px;color:#fff}
.brand:active{opacity:.86;transition:opacity .15s}
.logo-mark{width:40px;height:40px;flex:0 0 auto;filter:drop-shadow(0 3px 7px rgba(0,0,0,.26))}
.brand-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.logo{
  font-size:20.5px;font-weight:800;letter-spacing:-.5px;line-height:1.18;
  white-space:nowrap;color:#fff;   /* 顶栏深绿底，必须显式压过全局 a{color} */
  text-shadow:0 1px 2px rgba(0,0,0,.14);
}
.logo b{font-weight:400;opacity:.92}
.logo-sub{
  font-size:11.5px;color:rgba(255,255,255,.74);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px;
}
.who{
  flex:0 0 auto;max-width:112px;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.22);
  padding:8px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:background .18s,transform .12s;
}
.who:active{background:rgba(255,255,255,.26);transform:scale(.96)}

/* ───── 视图 ───── */
.view{display:none;max-width:520px;margin:0 auto;padding:20px 16px 36px}
.view.is-active{display:block;animation:viewIn .26s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}}

.view-head{margin-bottom:16px}
.view-head h2{
  font-size:21px;font-weight:800;letter-spacing:-.6px;line-height:1.28;
  display:flex;align-items:baseline;gap:8px;
}
.view-head p{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.62}
.view-head p b{color:var(--ink-2);font-weight:700}

/* ───── 通用卡片面 ───── */
.panel{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-2),var(--edge);
}

/* ───── 首次设置 ───── */
.setup{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:22px 18px 20px;
  box-shadow:var(--sh-3),var(--edge);
}
.block{margin-bottom:24px}
.block:last-of-type{margin-bottom:0}
.lbl{
  display:flex;align-items:baseline;gap:8px;
  font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:11px;
  letter-spacing:1.4px;text-transform:none;
}
.lbl-sub{color:var(--ink-3);font-weight:400;letter-spacing:.2px;font-size:11.5px}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.55}

.stepper{
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(180deg,var(--bg-deep),var(--bg-sink));
  border-radius:var(--r-lg);padding:6px;
  box-shadow:inset 0 1px 3px rgba(19,29,25,.07);
}
.stp{
  width:58px;height:54px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#fff 0%,#FDFAF5 100%);
  color:var(--brand);
  font-size:29px;font-weight:400;line-height:1;
  box-shadow:var(--sh-1),inset 0 1px 0 #fff,0 1px 2px rgba(19,29,25,.06);
  display:flex;align-items:center;justify-content:center;
  transition:transform .13s var(--ease),box-shadow .13s;
}
.stp:active{transform:scale(.93);box-shadow:var(--sh-1);background:var(--bg-deep)}
.stp:disabled{color:var(--ink-3);opacity:.32;box-shadow:var(--sh-1)}
.stp-val{flex:1;text-align:center;display:flex;align-items:baseline;justify-content:center;gap:5px}
.stp-val b{font-size:34px;font-weight:800;letter-spacing:-1.8px;line-height:1;color:var(--ink)}
.stp-val small{font-size:13.5px;color:var(--ink-2);font-weight:600}

/* 换行而不是横向滚动：横向滚动在手机上没有任何提示，
   第 6 个「要快手」被裁在屏幕外，用户根本不会知道它存在 */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:1px 0 2px}
.chip{
  flex:0 0 auto;padding:10px 16px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--line);
  font-size:13px;color:var(--ink-2);font-weight:500;white-space:nowrap;
  box-shadow:var(--sh-1),var(--edge);
  transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s;
}
.chip:active{transform:scale(.95)}
.chip.is-on{
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  border-color:var(--brand-dk);color:#fff;font-weight:600;
  box-shadow:0 2px 8px -3px rgba(15,95,70,.5),inset 0 1px 0 rgba(255,255,255,.2);
}

.seg{
  display:flex;gap:4px;background:var(--bg-deep);padding:4px;
  border-radius:var(--r-md);box-shadow:inset 0 1px 3px rgba(19,29,25,.07);
}
.seg-btn{
  flex:1;padding:13px 4px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--ink-2);
  transition:background .18s,color .18s,box-shadow .18s;
}
.seg-btn.is-on{
  background:linear-gradient(180deg,#fff,var(--card-2));
  color:var(--brand);box-shadow:var(--sh-1),var(--edge);
}

/* 主 CTA：整页唯一的暖色大面积用色，必须压得住 */
.btn-roll{
  width:100%;margin-top:20px;padding:23px 20px 21px;
  border-radius:var(--r-xl);color:#fff;
  background:
    radial-gradient(120% 150% at 18% -20%, rgba(255,255,255,.3) 0%, transparent 58%),
    linear-gradient(142deg,var(--hot-3) 0%,var(--hot-2) 34%,var(--hot) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 3px 10px -3px rgba(206,78,27,.42),
    0 18px 34px -16px rgba(206,78,27,.56);
  transition:transform .14s var(--ease),box-shadow .14s;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn-roll::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.26) 50%,transparent 64%);
  transform:translateX(-100%);
}
.btn-roll:active{
  transform:scale(.978);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px -3px rgba(206,78,27,.5);
}
.btn-roll:active::after{transform:translateX(100%);transition:transform .55s var(--ease)}
.btn-roll-main{
  display:block;font-size:22px;font-weight:800;letter-spacing:1.2px;position:relative;
  text-shadow:0 1px 2px rgba(120,40,10,.24);
}
.btn-roll-sub{
  display:block;font-size:12.5px;opacity:.92;margin-top:5px;position:relative;
  letter-spacing:.3px;font-weight:500;
}

/* ───── 结果页 ───── */
.result{animation:viewIn .3s var(--ease)}
.draw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.draw-meta{font-size:13.5px;color:var(--ink-2);font-weight:500;letter-spacing:.1px}
.draw-meta b{color:var(--ink);font-weight:800}
.btn-mini{
  flex:0 0 auto;padding:9px 16px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--brand-bd);color:var(--brand);
  font-size:13px;font-weight:600;box-shadow:var(--sh-1),var(--edge);
  transition:background .16s,transform .12s;
}
.btn-mini:active{background:var(--brand-lt);transform:scale(.95)}

.warn{
  background:linear-gradient(180deg,var(--hot-lt),#FDE7DA);
  border:1px solid var(--warn-bd);border-radius:var(--r-md);
  color:var(--warn-ink);padding:12px 15px;font-size:12.5px;line-height:1.65;
  margin-bottom:15px;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* 配比调节器 */
.mix{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:16px 16px 15px;margin-bottom:16px;
  box-shadow:var(--sh-3),var(--edge);
}
.mix-head{
  font-size:13.5px;font-weight:800;margin-bottom:13px;letter-spacing:.2px;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;
}
.mix-tip{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.mix-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;transition:opacity .15s}
.mix-grid.is-busy{opacity:.4;pointer-events:none}
.mx{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:var(--bg);border:1px solid transparent;
  border-radius:var(--r-md);padding:8px 9px 8px 14px;transition:all .2s var(--ease);
}
.mx.is-on{background:var(--brand-lt);border-color:var(--brand-bd);box-shadow:inset 0 1px 3px rgba(15,95,70,.09)}
.mx-l{font-size:13.5px;color:var(--ink-2);font-weight:500}
.mx.is-on .mx-l{color:var(--brand-dk);font-weight:800}
.mx-c{display:flex;align-items:center;gap:2px}
.mx-c button{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(180deg,#fff,var(--card-2));
  color:var(--brand);font-size:19px;font-weight:400;line-height:1;
  box-shadow:var(--sh-1),var(--edge);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s var(--ease),background .16s;
}
.mx-c button:active{transform:scale(.86);background:var(--brand-lt)}
.mx-c b{min-width:22px;text-align:center;font-size:15.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.mix-foot{
  display:flex;align-items:center;justify-content:space-between;margin-top:13px;
  padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-2);
}
.mix-foot b{color:var(--brand);font-size:16px;font-weight:800}
.mix-reset{font-size:12.5px;color:var(--ink-3);font-weight:500;padding:4px 2px}
.mix-reset:active{color:var(--ink-2)}

/* 盲选锚点 */
.anchors{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:7px;margin-bottom:15px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.anchors::-webkit-scrollbar{display:none}
.anchor{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 15px 8px 11px;font-size:13px;font-weight:600;
  box-shadow:var(--sh-1),var(--edge);white-space:nowrap;
}
.anchor em{font-style:normal;color:var(--ink-3);font-size:11.5px;font-weight:400}
.anchor b{color:var(--brand);font-weight:800;font-size:12.5px}
.anchor .anchor-miss{color:var(--ink-3);font-weight:400}
.dot{width:7px;height:7px;border-radius:50%;background:var(--hot-2);flex:0 0 auto;box-shadow:0 0 0 3px rgba(228,112,60,.16)}

/* 菜品卡 */
.dishes{display:flex;flex-direction:column;gap:12px}
.dish{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--sh-2),var(--edge);
  transition:box-shadow .2s,transform .2s var(--ease);
}
.dish:active{box-shadow:var(--sh-1)}
.dish-top{display:flex;gap:12px;padding:16px 15px 13px;align-items:flex-start}
.idx{
  flex:0 0 auto;width:27px;height:27px;border-radius:10px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px -2px rgba(15,95,70,.46),inset 0 1px 0 rgba(255,255,255,.22);
  font-variant-numeric:tabular-nums;
}
.dish-main{flex:1;min-width:0}
.dish-name{
  font-size:17.5px;font-weight:700;letter-spacing:-.35px;line-height:1.38;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.tag{
  font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;
  letter-spacing:.2px;white-space:nowrap;line-height:1.45;
}
.t-course{background:var(--bg-deep);color:#6B5B45}
.t-meat{background:var(--hot-lt);color:var(--hot-dk)}
.t-veg{background:var(--veg-lt);color:var(--veg)}
.t-sea{background:var(--sea-lt);color:var(--sea)}
.t-wz{background:var(--sea-lt);color:var(--sea)}
.t-sp1{background:#FCF0D5;color:#8A5C08}
.t-sp2{background:#FBE2D9;color:#A93015}
.t-like{background:var(--like-lt);color:var(--like)}
.t-no{background:#FBE2D9;color:#A93015}
.ing{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.6}
.ing b{color:var(--ink);font-weight:700}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.t-min{font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.btn-swap{
  font-size:12.5px;font-weight:700;color:var(--brand);
  background:linear-gradient(180deg,#fff,var(--brand-lt));
  border:1px solid var(--brand-bd);
  padding:8px 14px;border-radius:var(--r-pill);
  white-space:nowrap;min-height:34px;
  box-shadow:var(--sh-1),var(--edge);
  transition:transform .12s,background .16s;
}
.btn-swap:active{transform:scale(.93);background:var(--brand-lt)}
.btn-swap:disabled{opacity:.45}
.dish-go{
  width:100%;padding:13px;border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--card-2),var(--bg));
  font-size:13px;font-weight:600;color:var(--ink-2);
  transition:background .18s,color .18s;
}
.dish-go:active{background:var(--bg-deep);color:var(--brand)}

/* 购物清单 */
.card{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  margin-top:16px;overflow:hidden;box-shadow:var(--sh-2),var(--edge);
}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:17px 16px 12px}
.card-head h2{font-size:16.5px;font-weight:800;letter-spacing:-.3px}
.badge{
  font-size:11.5px;font-weight:700;color:var(--brand-dk);
  background:linear-gradient(180deg,#fff,var(--brand-lt));
  border:1px solid var(--brand-bd);
  padding:5px 11px;border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
}
.shop{padding:0 16px 14px}
.shop-cat{
  font-size:10.5px;font-weight:800;color:var(--ink-3);
  letter-spacing:1.6px;margin:14px 0 3px;
}
.shop-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line-2);
}
.shop-item:last-child{border-bottom:0}
.shop-name{font-size:14.5px;font-weight:600;line-height:1.45}
.shop-name small{font-size:11.5px;color:var(--ink-3);margin-left:8px;font-weight:400}
.shop-form{
  flex:0 0 auto;font-size:11px;color:var(--ink-3);
  background:var(--bg);border-radius:6px;padding:4px 10px;white-space:nowrap;
}
.block-btn{width:100%;margin-top:16px}

/* ───── 列表页 ───── */
.search{
  width:100%;padding:14px 16px;margin-bottom:13px;
  background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-md);
  font-size:14.5px;outline:none;
  box-shadow:var(--sh-1),var(--edge);
  transition:border-color .18s,box-shadow .18s;
}
.search:focus{border-color:var(--brand-bd);box-shadow:0 0 0 3.5px rgba(46,154,118,.13),var(--sh-1)}
.search::placeholder{color:var(--ink-3)}
.list{display:flex;flex-direction:column;gap:9px}
.row{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 15px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--sh-1),var(--edge);
  transition:transform .14s var(--ease),box-shadow .2s;
}
.row:active{transform:scale(.988);box-shadow:var(--sh-2)}
.row-main{flex:1;min-width:0}
.row-name{
  font-size:15px;font-weight:700;line-height:1.42;letter-spacing:-.15px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.row-sub{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.row-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.mt{
  font-size:10.5px;padding:3px 8px;border-radius:6px;font-weight:500;
  background:var(--bg-deep);color:var(--ink-2);
}
.mt.wz{background:var(--sea-lt);color:var(--sea)}
.mt.hot{background:var(--hot-lt);color:var(--hot-dk)}
.pfbtns{display:flex;gap:7px;flex:0 0 auto}
.pfb{
  width:38px;height:38px;border-radius:12px;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);color:var(--ink-3);line-height:1;
  box-shadow:inset 0 1px 2px rgba(19,29,25,.05);
  transition:background .18s,color .18s,transform .12s var(--ease);
}
.pfb:active{transform:scale(.86)}
.pfb.on{background:linear-gradient(180deg,#fff,var(--like-lt));color:var(--like);box-shadow:inset 0 0 0 1px rgba(190,55,103,.2)}
.pfb.no{background:linear-gradient(180deg,#fff,#FBE2D9);color:#A93015;box-shadow:inset 0 0 0 1px rgba(169,48,21,.16)}
.empty{text-align:center;padding:52px 20px;color:var(--ink-3);font-size:14px;line-height:1.85}

/* ───── 偏好 ───── */
.pref-group{margin-bottom:22px}
.pref-group h3{
  font-size:13.5px;font-weight:800;color:var(--ink-2);margin-bottom:11px;
  display:flex;align-items:center;gap:8px;letter-spacing:.2px;
}
.pref-group h3 .n{
  font-size:11.5px;font-weight:700;color:var(--ink-3);
  background:var(--bg-deep);padding:3px 10px;border-radius:var(--r-pill);
}
.pref-list{display:flex;flex-wrap:wrap;gap:8px}
.pref-pill{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 8px 7px 15px;font-size:13.5px;font-weight:600;
  box-shadow:var(--sh-1),var(--edge);
}
.pref-pill.like{background:linear-gradient(180deg,#fff,var(--like-lt));border-color:#F4CFDE;color:#8E1D45}
.pref-pill.dislike{background:linear-gradient(180deg,#fff,#FBE6DC);border-color:var(--hot-bd);color:#8E2E12}
.pref-pill button{
  width:25px;height:25px;border-radius:50%;background:rgba(0,0,0,.07);
  color:inherit;font-size:14px;line-height:1;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s,transform .12s;
}
.pref-pill button:active{background:rgba(0,0,0,.15);transform:scale(.86)}

.auth-cta{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:30px 24px;text-align:center;box-shadow:var(--sh-2),var(--edge);
}
.auth-cta p{font-size:13.5px;color:var(--ink-2);margin-bottom:20px;line-height:1.85}
.auth-cta p b{color:var(--ink);font-weight:800}

.linkish{
  width:100%;padding:16px;border-radius:var(--r-lg);color:#fff;font-size:15px;font-weight:700;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  box-shadow:0 2px 10px -3px rgba(15,95,70,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .13s;
}
.linkish:active{transform:scale(.98)}
.btn-ghost{
  width:100%;margin-top:11px;padding:15px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#fff,var(--card-2));border:1px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--sh-1),var(--edge);
  transition:background .16s;
}
.btn-ghost:active{background:var(--bg-deep)}
.btn-solid{
  width:100%;padding:16px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;
  font-size:15px;font-weight:700;
  box-shadow:0 2px 10px -3px rgba(15,95,70,.5),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .13s;
}
.btn-solid:active{transform:scale(.98)}

/* ───── 底部导航 ───── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  max-width:520px;margin:0 auto;display:flex;
  background:rgba(252,249,243,.9);
  backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 22px -14px rgba(19,29,25,.26);
}
.tab{
  flex:1;height:var(--tab-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.2px;
  transition:color .2s;
}
.tab svg{
  width:23px;height:23px;display:block;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .24s var(--ease);
}
.tab.is-on{color:var(--brand);font-weight:800}
.tab.is-on svg{transform:translateY(-1.5px) scale(1.07);stroke-width:2}

/* ───── 弹层 ───── */
.mask{
  position:fixed;inset:0;z-index:50;
  background:rgba(19,29,25,.46);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}}
.sheet{
  width:100%;max-width:520px;max-height:88vh;
  background:linear-gradient(180deg,#FDFBF7 0%,var(--bg) 26%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  display:flex;flex-direction:column;
  animation:slideUp .32s var(--ease);
  box-shadow:0 -10px 44px -14px rgba(0,0,0,.36);
}
@keyframes slideUp{from{transform:translateY(100%)}}
.grip{
  width:40px;height:4.5px;border-radius:3px;background:var(--line);
  margin:11px auto 4px;flex:0 0 auto;
}
.sheet-body{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:10px 20px calc(30px + env(safe-area-inset-bottom));
  /* 原生滚动条在弹层里又粗又灰，很像没做完。收细并染成主色 */
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.sheet-body::-webkit-scrollbar{width:6px}
.sheet-body::-webkit-scrollbar-track{background:transparent}
.sheet-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.sheet-title{font-size:24px;font-weight:800;letter-spacing:-.7px;margin-bottom:12px;line-height:1.22}
.sheet-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.blk{margin-bottom:20px}
.blk-t{
  font-size:10.5px;font-weight:800;color:var(--ink-3);
  letter-spacing:1.6px;margin-bottom:10px;
}
.pill{
  display:inline-block;background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--line);
  border-radius:9px;padding:6px 12px;font-size:13px;margin:0 6px 7px 0;
  box-shadow:var(--sh-1),var(--edge);
}
.pill.main{
  background:linear-gradient(180deg,#fff,var(--brand-lt));
  border-color:var(--brand-bd);color:var(--brand-dk);font-weight:700;
}
.pill.pan{background:var(--bg-deep);color:var(--ink-2);border-color:transparent;box-shadow:none}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{position:relative;padding:0 0 16px 36px;counter-increment:s;font-size:14.5px;line-height:1.7}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#fff;font-size:11.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px -2px rgba(15,95,70,.46),inset 0 1px 0 rgba(255,255,255,.22);
}
.steps li::after{content:'';position:absolute;left:11.5px;top:30px;bottom:6px;width:1.5px;background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.tipbox{
  background:linear-gradient(180deg,#FDF6E7,#FAF0D9);
  border:1px solid #EFE0C2;border-radius:var(--r-md);
  padding:14px 16px;font-size:13.5px;line-height:1.78;color:#65501F;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.pref-bar{display:flex;gap:9px;margin-bottom:18px}
.pref-bar button{
  flex:1;padding:13px;border-radius:var(--r-md);
  font-size:14.5px;font-weight:700;background:var(--bg-deep);color:var(--ink-2);
  box-shadow:inset 0 1px 2px rgba(19,29,25,.05);
  transition:background .18s,color .18s,transform .12s;
}
.pref-bar button:active{transform:scale(.97)}
.pref-bar button.on-like{background:linear-gradient(180deg,#fff,var(--like-lt));color:var(--like);box-shadow:inset 0 0 0 1px rgba(190,55,103,.22)}
.pref-bar button.on-dislike{background:linear-gradient(180deg,#fff,#FBE2D9);color:#A93015;box-shadow:inset 0 0 0 1px rgba(169,48,21,.18)}
.src{
  font-size:11px;color:var(--ink-3);text-align:center;padding-top:14px;
  border-top:1px solid var(--line);margin-top:8px;line-height:1.6;
}

/* ───── 登录 ───── */
.auth-tabs{display:flex;gap:4px;background:var(--bg-deep);padding:4px;border-radius:var(--r-md);margin-bottom:18px;box-shadow:inset 0 1px 3px rgba(19,29,25,.07)}
.auth-tab{flex:1;padding:12px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:background .18s,color .18s}
.auth-tab.is-on{background:linear-gradient(180deg,#fff,var(--card-2));color:var(--brand);box-shadow:var(--sh-1),var(--edge)}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{
  padding:15px 16px;
  background:linear-gradient(180deg,#fff,var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-md);
  font-size:15.5px;outline:none;box-shadow:var(--sh-1),var(--edge);
  transition:border-color .18s,box-shadow .18s;
}
.auth-form input:focus{border-color:var(--brand-bd);box-shadow:0 0 0 3.5px rgba(46,154,118,.13),var(--sh-1)}
.auth-err{color:#A93015;font-size:12.5px;line-height:1.55;font-weight:500}
.auth-note{font-size:12px;color:var(--ink-3);text-align:center;margin-top:15px}

/* ───── Toast ───── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 20px);
  transform:translateX(-50%);z-index:60;
  background:rgba(19,29,25,.95);color:#fff;
  padding:12px 22px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;
  max-width:84vw;text-align:center;line-height:1.5;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  animation:toastIn .26s var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}}

/* ───── 报错 + 管理 ───── */
/* 徽标压在图标右上角，不占导航高度。
   .tab 是 column 布局，多插一个元素会把文字挤下去，所以用绝对定位。 */
.tab{position:relative}
.tab-badge{
  position:absolute;top:7px;left:calc(50% + 7px);
  min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--hot);color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}

/* 详情页里的「有问题？报错」——刻意做得很轻，
   免得像广告；真出错的菜才需要它 */
.src-report{
  margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);
}
.linkish{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:12.5px;color:var(--ink-3);font-family:inherit;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.linkish:active{color:var(--hot)}

/* 报错卡：待处理的加重边框，处理过的退成灰调 */
.rep{
  background:linear-gradient(180deg,var(--card) 0%,var(--card-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 15px;margin-bottom:10px;
  box-shadow:var(--sh-1),var(--edge);
}
.rep.is-open{border-left:3.5px solid var(--hot);padding-left:12.5px}
.rep.is-done{opacity:.72}
.rep-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.rep-name{font-size:15px;font-weight:700;letter-spacing:-.15px}
.rep-why{
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;
  background:var(--hot-lt);color:var(--hot-dk);
}
.rep.is-done .rep-why{background:var(--brand-lt);color:var(--brand)}
.rep-detail{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.rep-meta{font-size:11px;color:var(--ink-3);margin-top:9px;line-height:1.6}
.rep-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

/* 表单：报错和改菜共用一套，14 个字段要能一直往下滚 */
.frm{display:flex;flex-direction:column;gap:13px}
.frm-lbl{
  font-size:10.5px;font-weight:800;color:var(--ink-3);
  letter-spacing:1.4px;margin-bottom:7px;display:block;
}
.frm-in,.frm-ta{
  width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--card);color:var(--ink);
  font-size:14.5px;font-family:inherit;outline:none;line-height:1.65;
  transition:border-color .18s,box-shadow .18s;
}
.frm-ta{resize:vertical;min-height:76px}
.frm-in:focus,.frm-ta:focus{border-color:var(--brand-bd);box-shadow:0 0 0 3.5px rgba(46,154,118,.13)}
.frm-hint{font-size:11.5px;color:var(--ink-3);margin-top:6px;line-height:1.6}
/* 改过的字段标一下，省得不知道哪几项是历史遗留 */
.frm-row.is-diff .frm-lbl{color:var(--hot-dk)}
.frm-diff{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  background:var(--hot-lt);color:var(--hot-dk);
  font-size:9.5px;font-weight:800;letter-spacing:.5px;vertical-align:1px;
}
.frm-acts{display:flex;gap:9px;margin-top:6px;flex-wrap:wrap}
.frm-acts .btn-solid{flex:1;min-width:130px}
.btn-warn{
  padding:13px 18px;border-radius:12px;border:1px solid var(--warn-bd);
  background:var(--card);color:var(--warn-ink);
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:transform .13s;
}
.btn-warn:active{transform:scale(.98)}
.frm-base{
  font-size:12px;color:var(--ink-3);line-height:1.75;
  background:var(--bg-deep);border-radius:var(--r-md);
  padding:11px 13px;margin-bottom:4px;
}

/* ───── 桌面预览 ───── */
@media(min-width:560px){
  body{
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    box-shadow:0 0 70px -24px rgba(19,29,25,.2);
  }
  .topbar{
    max-width:520px;margin:0 auto;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
  }
  .tabbar{border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .mask{align-items:center;padding:20px}
  .sheet{
    border-radius:var(--r-xl);max-height:84vh;
    border:1px solid var(--line);box-shadow:var(--sh-4);
  }
}

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