/* ============================================================
   做菜工作台 · 视觉系统
   规则来源：landing-page-design（Part B 视觉系统）
   所有字号/间距/圆角/动效都从下面的 token 派生，不允许页面内另造数值。
   ============================================================ */

:root{
  /* 表面：全部平涂，不用背景渐变 */
  --bg:#F7F6F2;
  --surface:#FFFFFF;
  --surface-2:#F1EFE9;
  --surface-3:#E9E6DE;

  --ink:#111111;
  --ink-2:#5F5B54;
  --ink-3:#8C877D;

  --line:#E6E2D9;

  --accent:#C0392B;
  --accent-press:#A62F23;
  --accent-soft:#FBEEEA;
  --accent-line:#F2D4CD;

  --ok:#1F7A52;
  --ok-soft:#E8F2EC;
  --avoid:#6D3D8E;
  --danger-bg:#F6E3E0;
  --danger-ink:#8E2F26;
  --star:#B8860B;
  --warn-ink:#7A5A1C;
  --warn-bg:#FBF3E4;
  --warn-line:#EFDDBC;

  /* 间距 token */
  --s-0:0px; --s-25:2px; --s-50:4px; --s-75:8px; --s-100:12px;
  --s-200:16px; --s-300:24px; --s-400:32px; --s-500:40px; --s-600:48px;

  /* 字号 token */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
  --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;

  /* 圆角 token（Tailwind 半径） */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-3xl:24px; --r-full:999px;

  --shadow-card:0 1px 2px rgba(17,17,17,.04), 0 12px 28px -20px rgba(17,17,17,.18);
  --shadow-float:0 2px 6px rgba(17,17,17,.06), 0 16px 40px -20px rgba(17,17,17,.24);
  --shadow-press:0 1px 2px rgba(17,17,17,.08);

  --ease:cubic-bezier(.22,1,.36,1);
  --dur-layout:500ms;
  --dur-color:300ms;

  --safe-b:env(safe-area-inset-bottom,0px);
  --tabbar-h:64px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Segoe UI","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:24px;
  font-weight:400;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol{margin:0}
button,input,select,textarea{font-family:inherit;color:inherit}
input[type=checkbox]{accent-color:var(--accent)}

/* 可见焦点环：无障碍硬性要求 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-md)}

/* ============================================================
   命名文字样式（页面只用这些，不写裸字号）
   ============================================================ */
.heading-4{font-size:var(--fs-3xl);line-height:36px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.heading-5{font-size:var(--fs-2xl);line-height:32px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.heading-6{font-size:var(--fs-xl);line-height:28px;font-weight:600;text-wrap:balance}
.title-1{font-size:var(--fs-xl);line-height:28px;font-weight:500}
.title-2{font-size:var(--fs-lg);line-height:28px;font-weight:500}
.title-3{font-size:var(--fs-base);line-height:24px;font-weight:500}
.title-4{font-size:var(--fs-sm);line-height:20px;font-weight:500}
.body-1{font-size:var(--fs-base);line-height:24px;font-weight:600}
.body-2{font-size:var(--fs-base);line-height:24px;font-weight:500}
.body-3{font-size:var(--fs-base);line-height:24px;font-weight:400;text-wrap:pretty}
.body-4{font-size:var(--fs-sm);line-height:20px;font-weight:600}
.body-5{font-size:var(--fs-sm);line-height:20px;font-weight:500}
.body-6{font-size:var(--fs-sm);line-height:20px;font-weight:400;text-wrap:pretty}
.button-md{font-size:var(--fs-base);line-height:24px;font-weight:600}
.button-sm{font-size:var(--fs-sm);line-height:20px;font-weight:600}
.button-xsm{font-size:var(--fs-xs);line-height:16px;font-weight:600}
.caption-1{font-size:var(--fs-sm);line-height:20px;font-weight:500}
.caption-2{font-size:var(--fs-sm);line-height:20px;font-weight:400}
.caption-3{font-size:var(--fs-xs);line-height:16px;font-weight:600}
.caption-4{font-size:var(--fs-xs);line-height:16px;font-weight:500}
.caption-5{font-size:var(--fs-xs);line-height:16px;font-weight:400}

/* ============================================================
   骨架
   ============================================================ */
.app{max-width:560px;margin:0 auto;min-height:100%;position:relative;
  padding-bottom:calc(var(--tabbar-h) + var(--s-500) + var(--safe-b))}
.screen{display:none}
.screen.active{display:block;animation:screen-in var(--dur-layout) var(--ease)}
@keyframes screen-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   顶栏（半透明浮层，压低存在感）
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(247,246,242,.82);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  color:var(--ink);
  padding:var(--s-100) var(--s-200);
  display:flex;align-items:center;gap:var(--s-100);
  box-shadow:inset 0 -1px 0 var(--line);
}
.topbar .title{font-size:var(--fs-xl);line-height:28px;font-weight:600;flex:1;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .role-chip{
  background:var(--surface);border:none;color:var(--ink-2);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;
  padding:var(--s-75) var(--s-100);border-radius:var(--r-full);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:var(--shadow-press);
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease);
}
.topbar .role-chip:active{transform:scale(.98)}
.icon-btn{background:none;border:none;color:inherit;font-size:var(--fs-xl);line-height:1;
  cursor:pointer;padding:var(--s-75);border-radius:var(--r-lg);
  transition:background var(--dur-color) var(--ease),transform var(--dur-color) var(--ease)}
.icon-btn:active{transform:scale(.96);background:var(--surface-2)}

/* ============================================================
   搜索
   ============================================================ */
.searchbar{display:flex;gap:var(--s-75);padding:var(--s-100) var(--s-200) var(--s-75)}
.searchbar input{
  flex:1;border:none;border-radius:var(--r-full);
  padding:var(--s-100) var(--s-200);
  font-size:var(--fs-base);line-height:24px;
  background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-press);
  transition:box-shadow var(--dur-color) var(--ease)
}
.searchbar input::placeholder{color:var(--ink-3)}
.searchbar .go{
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-full);
  padding:0 var(--s-300);font-size:var(--fs-sm);line-height:20px;font-weight:600;
  cursor:pointer;transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease)
}
.searchbar .go:active{transform:scale(.98);background:var(--accent-press)}

/* ============================================================
   通用卡片与排版
   ============================================================ */
.body{padding:var(--s-100) var(--s-200) 0}
.card{
  background:var(--surface);
  border-radius:var(--r-2xl);
  padding:var(--s-300) var(--s-200);
  margin-bottom:var(--s-100);
  box-shadow:var(--shadow-card);
  scroll-margin-top:72px;
  transition:transform var(--dur-layout) var(--ease)
}
.row{display:flex;align-items:center;gap:var(--s-75)}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.muted{color:var(--ink-2);font-size:var(--fs-sm);line-height:20px;font-weight:400;text-wrap:pretty}
.strong{font-size:var(--fs-sm);line-height:20px;font-weight:600}
.h2{font-size:var(--fs-xl);line-height:28px;font-weight:600;margin:0 0 var(--s-100);text-wrap:balance}
.section-label{
  font-size:var(--fs-xs);line-height:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:var(--s-300) var(--s-25) var(--s-75)
}

/* ============================================================
   标签 / 徽标
   ============================================================ */
.tag{
  display:inline-block;background:var(--surface-2);color:var(--ink-2);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;
  padding:var(--s-25) var(--s-75);border-radius:var(--r-lg);
  margin:var(--s-25) var(--s-50) var(--s-25) 0
}
.tag.brand{background:var(--accent-soft);color:var(--accent)}
.pill{
  display:inline-flex;align-items:center;gap:var(--s-50);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;color:var(--ink-2);
  background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s-25) var(--s-75)
}
.badge-home{
  display:inline-block;background:var(--ok-soft);color:var(--ok);
  font-size:var(--fs-xs);line-height:16px;font-weight:600;
  padding:var(--s-25) var(--s-75);border-radius:var(--r-lg);margin-left:var(--s-50)
}

/* ============================================================
   菜谱卡片
   ============================================================ */
.recipe{display:flex;gap:var(--s-100);align-items:flex-start;cursor:pointer}
.recipe .thumb{
  width:64px;height:64px;border-radius:var(--r-xl);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-3xl);
  background:var(--surface-2)
}
.recipe .meta{flex:1;min-width:0}
.recipe .nm{
  font-size:var(--fs-base);line-height:24px;font-weight:600;
  margin-bottom:var(--s-25);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.recipe .facts{font-size:var(--fs-xs);line-height:16px;color:var(--ink-3);margin:var(--s-50) 0}
.recipe .desc{
  font-size:var(--fs-xs);line-height:16px;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card:active{transform:scale(.985)}

/* ============================================================
   横向分段 Tab
   ============================================================ */
.tabs{display:flex;gap:var(--s-50);padding:var(--s-100) var(--s-200) 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;background:var(--surface);color:var(--ink-2);border:none;
  padding:var(--s-75) var(--s-200);border-radius:var(--r-full);
  font-size:var(--fs-sm);line-height:20px;font-weight:500;cursor:pointer;
  box-shadow:var(--shadow-press);
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease),color var(--dur-color) var(--ease)
}
.tab.on{background:var(--ink);color:#fff}
.tab:active{transform:scale(.97)}
.catbar{display:flex;gap:var(--s-50);padding:var(--s-75) var(--s-200) 0;overflow-x:auto;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.chip{
  flex:none;background:transparent;color:var(--ink-2);border:none;
  padding:var(--s-50) var(--s-75);border-radius:var(--r-full);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;cursor:pointer;
  transition:color var(--dur-color) var(--ease),background var(--dur-color) var(--ease),transform var(--dur-color) var(--ease)
}
.chip.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.chip:active{transform:scale(.97)}

/* ============================================================
   底部导航（悬浮胶囊 + 毛玻璃）
   ============================================================ */
.tabbar{
  position:fixed;left:var(--s-100);right:var(--s-100);
  bottom:calc(var(--s-100) + var(--safe-b));z-index:30;
  max-width:528px;margin:0 auto;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-radius:var(--r-full);
  box-shadow:var(--shadow-float);
  display:flex;padding:var(--s-50)
}
.tabbar a{
  flex:1;text-align:center;text-decoration:none;cursor:pointer;
  padding:var(--s-50) 0;border-radius:var(--r-full);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;color:var(--ink-2);
  transition:color var(--dur-color) var(--ease),background var(--dur-color) var(--ease),transform var(--dur-color) var(--ease)
}
.tabbar a .ic{display:block;font-size:var(--fs-xl);line-height:1.2;margin-bottom:var(--s-25)}
.tabbar a.on{color:var(--accent);background:var(--accent-soft)}
.tabbar a:active{transform:scale(.97)}

/* ============================================================
   按钮
   ============================================================ */
.btn{
  display:block;width:100%;border:none;border-radius:var(--r-xl);
  padding:var(--s-100);min-height:48px;
  background:var(--accent);color:#fff;
  font-size:var(--fs-base);line-height:24px;font-weight:600;
  cursor:pointer;text-align:center;
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease),opacity var(--dur-color) var(--ease)
}
.btn:active{transform:scale(.98);background:var(--accent-press)}
.btn.ghost{background:var(--surface);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.btn.ghost:active{background:var(--accent-soft)}
.btn.gray{background:var(--surface-2);color:var(--ink);box-shadow:none}
.btn.gray:active{background:var(--surface-3)}
.btn.sm{width:auto;display:inline-block;padding:var(--s-75) var(--s-200);min-height:0;
  font-size:var(--fs-sm);line-height:20px;border-radius:var(--r-lg)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:var(--s-100)}
.btn-row .btn{flex:1}

/* ============================================================
   详情页
   ============================================================ */
.detail-head{background:var(--surface);padding:var(--s-300) var(--s-200) var(--s-200)}
.detail-head .nm{
  font-size:var(--fs-2xl);line-height:32px;font-weight:600;
  letter-spacing:-.01em;margin-bottom:var(--s-75);text-wrap:balance
}
.ing-list{list-style:none;padding:0;margin:0}
.ing-list li{
  display:flex;justify-content:space-between;gap:var(--s-100);
  padding:var(--s-75) 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);line-height:20px
}
.ing-list li:last-child{border-bottom:none}
.ing-list .amt{color:var(--ink-2);font-size:var(--fs-xs);line-height:16px;white-space:nowrap}
.step-item{display:flex;gap:var(--s-100);margin-bottom:var(--s-200)}
.step-item:last-child{margin-bottom:0}
.step-no{
  flex:none;width:26px;height:26px;border-radius:var(--r-full);
  background:var(--accent-soft);color:var(--accent);
  font-size:var(--fs-xs);line-height:16px;font-weight:600;
  display:flex;align-items:center;justify-content:center
}
.step-body{flex:1;font-size:var(--fs-sm);line-height:20px;color:var(--ink);text-wrap:pretty}
.step-body .mins{color:var(--accent);font-size:var(--fs-xs);line-height:16px;font-weight:500;margin-left:var(--s-50);white-space:nowrap}
.tips{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--r-xl);padding:var(--s-100) var(--s-200);list-style:none}
.tips li{font-size:var(--fs-sm);line-height:20px;color:var(--warn-ink);margin:var(--s-50) 0;text-wrap:pretty}
.avoid{
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-xl);
  padding:var(--s-100) var(--s-200);font-size:var(--fs-sm);line-height:20px;color:var(--accent-press);
  margin-bottom:var(--s-100);text-wrap:pretty
}

/* ============================================================
   沉浸做菜
   ============================================================ */
.cook-mode{position:fixed;inset:0;z-index:50;background:var(--bg);
  display:none;flex-direction:column}
.cook-mode.on{display:flex}
.cook-top{
  padding:var(--s-200) var(--s-200) var(--s-100);flex:none;
  display:flex;align-items:center;gap:var(--s-100);
  background:var(--surface);box-shadow:inset 0 -1px 0 var(--line)
}
.cook-top b{font-size:var(--fs-base);line-height:24px;font-weight:600;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cook-exit{
  flex:none;border:none;background:var(--surface-2);color:var(--ink-2);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;
  padding:var(--s-75) var(--s-100);border-radius:var(--r-full);cursor:pointer;
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease)
}
.cook-exit:active{transform:scale(.97);background:var(--surface-3)}
.cook-progress{height:4px;background:var(--surface-3);flex:none}
.cook-progress i{display:block;height:100%;width:0;background:var(--accent);
  transition:width var(--dur-layout) var(--ease)}
.cook-body{flex:1;overflow:auto;padding:var(--s-500) var(--s-300);
  -webkit-overflow-scrolling:touch}
.cook-step-no{font-size:var(--fs-xs);line-height:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.cook-step-text{font-size:var(--fs-2xl);line-height:32px;font-weight:600;
  margin-top:var(--s-100);text-wrap:balance}
.cook-tip{margin-top:var(--s-200);background:var(--warn-bg);color:var(--warn-ink);
  font-size:var(--fs-sm);line-height:20px;padding:var(--s-100) var(--s-200);border-radius:var(--r-xl)}
.cook-foot{
  flex:none;padding:var(--s-100) var(--s-200) calc(var(--s-100) + var(--safe-b));
  display:flex;gap:var(--s-100);background:var(--surface);
  box-shadow:inset 0 1px 0 var(--line)
}
.cook-foot .btn{flex:1}
.cook-ings{font-size:var(--fs-sm);line-height:20px}
.cook-ings label{display:flex;gap:var(--s-75);align-items:center;
  padding:var(--s-75) 0;border-bottom:1px solid var(--line);cursor:pointer}
.cook-ings label:last-child{border-bottom:none}
.cook-ings .nm{flex:none;white-space:nowrap;font-weight:500}
.cook-ings .muted{flex:1 1 auto;min-width:0}
.cook-ings input{width:20px;height:20px;accent-color:var(--accent)}

/* ============================================================
   评分
   ============================================================ */
.stars{display:flex;gap:var(--s-75);margin:var(--s-50) 0 var(--s-200)}
.stars span{color:var(--surface-3);cursor:pointer;font-size:var(--fs-3xl);line-height:1;
  transition:transform var(--dur-color) var(--ease),color var(--dur-color) var(--ease)}
.stars span.on{color:var(--star)}
.stars span:active{transform:scale(1.12)}
textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-100) var(--s-200);font-size:var(--fs-sm);line-height:20px;
  min-height:72px;resize:vertical;background:var(--surface);color:var(--ink)
}
textarea::placeholder,input::placeholder{color:var(--ink-3)}

/* ============================================================
   表单
   ============================================================ */
.field{margin-bottom:var(--s-200)}
.field label{display:block;font-size:var(--fs-xs);line-height:16px;font-weight:500;
  color:var(--ink-2);margin-bottom:var(--s-50)}
.field input,.field select{
  width:100%;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s-100) var(--s-200);font-size:var(--fs-sm);line-height:20px;
  background:var(--surface);color:var(--ink);
  transition:border-color var(--dur-color) var(--ease),box-shadow var(--dur-color) var(--ease)
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--accent-line);
  box-shadow:0 0 0 3px rgba(192,57,43,.10)
}

/* 食材标签输入：输入后回车/逗号/顿号/空格即成标签，可单独删除 */
.pantry-wrap{
  display:flex;flex-wrap:wrap;gap:var(--s-50);align-items:center;
  padding:var(--s-75);min-height:48px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  cursor:text;
  transition:border-color var(--dur-color) var(--ease),box-shadow var(--dur-color) var(--ease)
}
.pantry-wrap:focus-within{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px rgba(192,57,43,.10)
}
.pantry-chip{
  display:inline-flex;align-items:center;gap:var(--s-50);
  background:var(--accent-soft);color:var(--accent);
  font-size:var(--fs-xs);line-height:16px;font-weight:500;
  padding:var(--s-50) var(--s-75);border-radius:var(--r-lg);
}
.pantry-chip-x{
  background:none;border:none;color:var(--accent);cursor:pointer;
  font-size:var(--fs-sm);line-height:16px;padding:0;margin-left:var(--s-25);
}
.pantry-input{
  flex:1;min-width:120px;border:none;outline:none;background:transparent;
  font-size:var(--fs-sm);line-height:20px;color:var(--ink);padding:0;
}
.pantry-input::placeholder{color:var(--ink-3)}
.chip{
  display:inline-block;border:none;background:var(--surface);color:var(--ink);
  border-radius:var(--r-full);padding:var(--s-75) var(--s-200);
  font-size:var(--fs-sm);line-height:20px;font-weight:500;
  cursor:pointer;margin:0 var(--s-50) var(--s-75) 0;
  box-shadow:var(--shadow-press);
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease),color var(--dur-color) var(--ease)
}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.chip.avoid{border:none}
.chip.avoid.on{background:#6D3D8E;color:#fff}

/* ============================================================
   角色
   ============================================================ */
.role-item{display:flex;align-items:center;gap:var(--s-100);
  padding:var(--s-100) 0;border-bottom:1px solid var(--line)}
.role-item:last-child{border-bottom:none}
.role-item .av{
  width:40px;height:40px;border-radius:var(--r-full);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xl);flex:none
}
.role-item.sel{background:var(--accent-soft);border-radius:var(--r-lg);padding:var(--s-100);border-bottom:none}

/* ============================================================
   空态 / 加载
   ============================================================ */
.empty{
  text-align:center;color:var(--ink-2);padding:var(--s-600) var(--s-300);
  font-size:var(--fs-sm);line-height:20px
}
.empty .big{font-size:var(--fs-3xl);line-height:1;margin-bottom:var(--s-100)}
.skeleton{
  background:var(--surface-2);border-radius:var(--r-2xl);height:88px;
  margin-bottom:var(--s-100);animation:pulse 1.4s var(--ease) infinite
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.95}}
.loading{display:flex;gap:var(--s-100);align-items:center;justify-content:center;
  color:var(--ink-2);padding:var(--s-300);font-size:var(--fs-sm);line-height:20px}
.spin{width:16px;height:16px;border:2px solid var(--surface-3);border-top-color:var(--accent);
  border-radius:var(--r-full);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--s-400) + var(--safe-b));
  transform:translateX(-50%) translateY(12px);
  background:rgba(17,17,17,.92);color:#fff;
  padding:var(--s-100) var(--s-300);border-radius:var(--r-full);
  font-size:var(--fs-sm);line-height:20px;
  opacity:0;pointer-events:none;z-index:99;max-width:80%;text-align:center;
  transition:opacity var(--dur-color) var(--ease),transform var(--dur-color) var(--ease)
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   吃饭计划
   ============================================================ */
.seg{display:flex;background:var(--surface-2);border-radius:var(--r-xl);padding:var(--s-25);gap:var(--s-25)}
.seg button{
  flex:1;border:none;background:transparent;border-radius:var(--r-lg);
  padding:var(--s-75) var(--s-25);font-size:var(--fs-sm);line-height:20px;font-weight:500;
  color:var(--ink-2);cursor:pointer;
  transition:background var(--dur-color) var(--ease),color var(--dur-color) var(--ease),transform var(--dur-color) var(--ease)
}
.seg button:active{transform:scale(.98)}
.seg button.on{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:var(--shadow-press)}
.seg.small button{padding:var(--s-50) var(--s-25)}

.stepper{display:flex;align-items:center;gap:var(--s-75);background:var(--surface-2);
  border-radius:var(--r-full);padding:var(--s-25)}
.stepper button{
  width:32px;height:32px;border-radius:var(--r-full);border:none;
  background:var(--surface);color:var(--accent);
  font-size:var(--fs-lg);line-height:1;font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-press);
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease)
}
.stepper button:active{transform:scale(.94);background:var(--surface-3)}
.stepper b{min-width:20px;text-align:center;font-size:var(--fs-base);line-height:24px}

.meal-reason{margin:var(--s-100) 0 var(--s-50);background:var(--warn-bg);
  border:1px solid var(--warn-line);border-radius:var(--r-xl);
  padding:var(--s-75) var(--s-100);font-size:var(--fs-xs);line-height:16px;color:var(--warn-ink)}
.meal-list{margin-top:var(--s-75)}
.meal-dish{display:flex;align-items:center;gap:var(--s-100);
  padding:var(--s-100) 0;border-bottom:1px solid var(--line);cursor:pointer}
.meal-dish:last-child{border-bottom:none}
.meal-emoji{
  width:40px;height:40px;border-radius:var(--r-lg);background:var(--surface-2);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl)
}
.add-meal{margin-top:var(--s-100);padding-top:var(--s-100);border-top:1px solid var(--line)}
.add-meal .chip small{margin-left:var(--s-50);font-size:var(--fs-xs);opacity:.7}

/* 一周计划 */
.day-card{
  background:var(--surface);border-radius:var(--r-2xl);
  padding:var(--s-100) var(--s-200) var(--s-50);
  margin-bottom:var(--s-100);box-shadow:var(--shadow-card)
}
.day-card.today{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.day-head{display:flex;align-items:baseline;gap:var(--s-75);
  padding-bottom:var(--s-50);margin-bottom:var(--s-25)}
.day-head b{font-size:var(--fs-sm);line-height:20px;font-weight:600}
.meal-row{display:flex;align-items:flex-start;gap:var(--s-75);padding:var(--s-50) 0}
.meal-tag{
  flex:none;width:24px;height:24px;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink-2);
  font-size:var(--fs-xs);line-height:16px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:var(--s-25)
}
.meal-dishes{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:var(--s-50)}
.plan-cell{
  display:inline-flex;align-items:center;gap:var(--s-25);
  border-radius:var(--r-lg);padding:var(--s-50) var(--s-75);
  font-size:var(--fs-xs);line-height:16px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);cursor:pointer
}
.plan-cell.none{background:transparent;box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink-3);font-weight:400;padding:var(--s-50) var(--s-75)}
.plan-cell.add{background:transparent;box-shadow:inset 0 0 0 1px var(--accent-line);
  color:var(--accent);font-weight:600;white-space:nowrap}
.plan-cell.multi{display:flex;flex-wrap:wrap;gap:var(--s-50);background:transparent;padding:0}
.dish-in-cell{
  display:inline-flex;align-items:center;gap:var(--s-25);
  padding:var(--s-50) var(--s-75);border-radius:var(--r-lg);
  background:var(--accent-soft);font-size:var(--fs-xs);line-height:16px;font-weight:600;
  color:var(--accent);cursor:pointer;max-width:100%
}
.cell-x{
  width:16px;height:16px;line-height:14px;text-align:center;
  background:var(--accent);color:#fff;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-style:normal;flex:none
}

/* ============================================================
   采购清单
   ============================================================ */
.shop-item{display:flex;align-items:center;gap:var(--s-100);
  padding:var(--s-75) 0;border-bottom:1px solid var(--line)}
.shop-item:last-child{border-bottom:none}
.shop-item input{width:20px;height:20px;accent-color:var(--accent)}
.shop-item.done .nm{text-decoration:line-through;color:var(--ink-3)}

/* ============================================================
   弹窗（底部浮层）
   ============================================================ */
.modal-root{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(17,17,17,.40);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
.modal-root.on{display:flex;align-items:flex-end;justify-content:center}
.modal{
  background:var(--surface);width:100%;max-width:560px;
  border-radius:var(--r-3xl) var(--r-3xl) 0 0;
  padding:var(--s-300) var(--s-200) calc(var(--s-400) + var(--safe-b));
  max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:sheet-in var(--dur-layout) var(--ease);position:relative;z-index:2
}
@keyframes sheet-in{from{opacity:.6;transform:translateY(32px)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 var(--s-100);font-size:var(--fs-xl);line-height:28px;font-weight:600}
.modal .btn{min-height:48px;margin-bottom:var(--s-75)}
.modal .btn-row{margin-top:var(--s-50)}

/* ============================================================
   管理后台
   ============================================================ */
.admin-acts{display:flex;flex-wrap:wrap;gap:var(--s-50);margin-top:var(--s-100)}
.admin-acts .mini{
  font-size:var(--fs-xs);line-height:16px;font-weight:500;color:var(--accent);
  border:none;border-radius:var(--r-lg);padding:var(--s-50) var(--s-100);
  cursor:pointer;background:var(--accent-soft);
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease)
}
.admin-acts .mini:active{transform:scale(.97);background:var(--accent-line)}
.admin-acts .mini.danger{color:#8E2F26;background:#F6E3E0}

.data-tbl{border-collapse:collapse;font-size:var(--fs-xs);line-height:16px;width:100%}
.data-tbl th{
  background:var(--surface-2);color:var(--ink-2);text-align:left;
  padding:var(--s-50) var(--s-75);white-space:nowrap;position:sticky;top:0;font-weight:600
}
.data-tbl td{border-bottom:1px solid var(--line);padding:var(--s-50) var(--s-75);
  white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.data-tbl tbody tr:nth-child(even){background:var(--bg)}

/* ============================================================
   最近做过
   ============================================================ */
.recent-row{display:flex;gap:var(--s-75);overflow-x:auto;padding:var(--s-50) var(--s-200) var(--s-75);scrollbar-width:none}
.recent-row::-webkit-scrollbar{display:none}
.recent-item{
  flex:none;width:96px;background:var(--surface);border-radius:var(--r-xl);
  padding:var(--s-100) var(--s-75);text-align:center;
  box-shadow:var(--shadow-press);cursor:pointer;
  transition:transform var(--dur-color) var(--ease)
}
.recent-item:active{transform:scale(.97)}
.recent-item .e{font-size:var(--fs-2xl);line-height:1}
.recent-item .n{
  font-size:var(--fs-xs);line-height:16px;font-weight:600;margin-top:var(--s-50);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.recent-item .c{font-size:var(--fs-xs);line-height:16px;color:var(--ok);margin-top:var(--s-25)}
.recent-label{font-size:var(--fs-xs);line-height:16px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-75) var(--s-200) 0}

/* ============================================================
   登录页（唯一的"落地"屏：一句主张 + 一个主操作）
   ============================================================ */
.auth{padding:var(--s-600) var(--s-300) var(--s-400);text-align:center}
.auth-logo{font-size:var(--fs-3xl);line-height:1}
.auth-title{
  font-size:var(--fs-3xl);line-height:36px;font-weight:600;letter-spacing:-.01em;
  margin:var(--s-100) 0 var(--s-50);text-wrap:balance
}
.auth-sub{
  font-size:var(--fs-sm);line-height:20px;color:var(--ink-2);
  max-width:680px;margin:0 auto var(--s-400);text-wrap:pretty
}
.auth-form{text-align:left;max-width:340px;margin:0 auto}
.auth-note{text-align:center;margin-top:var(--s-200);font-size:var(--fs-sm);line-height:20px;color:var(--ink-2)}

/* ============================================================
   参考视频浮层（App 内播放，关闭自动弹打卡）
   ============================================================ */
.video-layer{
  position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.82)
}
.video-layer.on{display:flex}
.video-mask{position:absolute;inset:0}
.video-box{
  position:relative;z-index:2;width:100%;max-width:560px;
  background:#000;border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:var(--shadow-float)
}
.video-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-100) var(--s-200);background:var(--surface)
}
.video-head b{font-size:var(--fs-sm);line-height:20px;font-weight:600}
.video-close{
  border:none;background:var(--surface-2);color:var(--ink-2);
  width:32px;height:32px;border-radius:var(--r-full);cursor:pointer;
  font-size:var(--fs-base);line-height:1;
  transition:transform var(--dur-color) var(--ease),background var(--dur-color) var(--ease)
}
.video-close:active{transform:scale(.92);background:var(--surface-3)}
.video-box iframe{width:100%;height:56vh;min-height:320px;display:block;border:none;background:#000}

/* 视频列表 */
.video-list{display:flex;flex-direction:column;gap:var(--s-100);margin-bottom:var(--s-100)}
.video-item{
  display:flex;gap:var(--s-100);align-items:center;
  padding:var(--s-100);border-radius:var(--r-xl);background:var(--surface-2)
}
.vi-pic{
  flex:none;width:72px;height:48px;border-radius:var(--r-lg);
  background-color:var(--surface-3);background-size:cover;background-position:center
}
.vi-meta{flex:1;min-width:0}
.vi-title{
  font-size:var(--fs-sm);line-height:20px;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.vi-sub{font-size:var(--fs-xs);line-height:16px;color:var(--ink-3);margin-top:var(--s-25)}
.vi-actions{flex:none;display:flex;flex-direction:column;gap:var(--s-50)}
.vi-actions .btn{min-height:0;padding:var(--s-50) var(--s-100);margin-bottom:0}


/* ============================================================
   跳到主要内容（键盘可达）
   ============================================================ */
.skip{
  position:absolute;left:var(--s-200);top:calc(-1 * var(--s-600));
  background:var(--ink);color:#fff;padding:var(--s-75) var(--s-200);
  border-radius:var(--r-lg);font-size:var(--fs-sm);line-height:20px;
  text-decoration:none;z-index:100;
  transition:transform var(--dur-color) var(--ease)
}
.skip:focus{transform:translateY(calc(var(--s-600) + var(--s-200)))}

/* ============================================================
   减弱动效
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important
  }
}

/* ============================================================
   390px 窄屏兜底
   ============================================================ */
@media (max-width:390px){
  .body{padding-left:var(--s-100);padding-right:var(--s-100)}
  .recipe .thumb{width:56px;height:56px;font-size:var(--fs-2xl)}
  .tabbar{left:var(--s-75);right:var(--s-75)}
  .cook-body{padding:var(--s-400) var(--s-200)}
}

/* —— 「库里没有的菜」建议（配一餐 / 排一周） —— */
.extra-box{margin-top:var(--s-100);padding-top:var(--s-100);border-top:1px dashed var(--line)}
.extra-row{display:flex;align-items:center;gap:var(--s-100);padding:var(--s-75) 0;
  border-bottom:1px solid var(--line)}
.extra-row:last-child{border-bottom:none}
.extra-row .btn.sm{flex:none}
.import-body{max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s-100)}