/* ============================================================
   独家御膳房 · F7 标准布局 + Konsta UI v5 液态玻璃视觉
   原则：布局完全交给 Framework7（navbar/tabs/tabbar 由它管），
        CSS 只做视觉覆盖（颜色/玻璃/圆角/动效），不写布局 hack。
   ============================================================ */

/* ---------- 0. 基础：高度链路（F7 依赖，#app 缺高度整页塌 0） ---------- */
html, body{ margin:0; padding:0; height:100%; overflow:hidden; }
#app{
  height:100%; position:relative;
  /* F7 官方涟漪动画的着色（按下时的水波） */
  --f7-touch-ripple-color:rgba(255,122,47,.18);
}
#app > .view{ height:100%; }
body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
              "Helvetica Neue", sans-serif;
  -webkit-font-smoothing:antialiased;
  /* ⭐ 御膳橙主题：主色从 iOS 蓝换成暖橙（变量名保留 k-blue，全站引用不动） */
  --k-blue:#ff7a2f; --k-green:#34c759; --k-orange:#ff9500; --k-red:#ff3b30;
  --f7-theme-color:#ff7a2f; --f7-theme-color-rgb:255,122,47;
  --cream:#fff9f2; --toast-warm:#7a4514;
  --k-gray:#8e8e93; --k-sep:rgba(60,60,67,.12);
  /* 液态玻璃材质 */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-blur:saturate(1.8) blur(24px);
  --glass-blur-strong:saturate(1.8) blur(40px);
  --glass-border:rgba(255,255,255,.45);
  --glass-shadow:0 8px 32px rgba(0,0,0,.12);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
input, textarea, select{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }

@keyframes titleFade{ from{ opacity:.2; transform:translateY(-3px);} to{ opacity:1; transform:none;} }

/* ---------- 1. 页面背景（渐变，玻璃才有东西可透） ---------- */
.page[data-name="home"] .page-content{
  background:
    radial-gradient(120% 55% at 85% -6%, rgba(255,149,0,.20), transparent 55%),
    radial-gradient(100% 50% at 0% 0%, rgba(255,122,47,.14), transparent 50%),
    radial-gradient(90% 50% at 100% 100%, rgba(255,183,77,.14), transparent 55%),
    radial-gradient(rgba(255,122,47,.055) 1.5px, transparent 1.6px) 0 0/26px 26px,
    radial-gradient(rgba(255,183,77,.05) 1.5px, transparent 1.6px) 13px 13px/26px 26px,
    linear-gradient(180deg,#fff9f2 0%, #ffeede 100%);
}

/* ---------- 2. Navbar（玻璃，F7 原生居中标题） ---------- */
.page[data-name="home"] .navbar{
  background:transparent;
}
.page[data-name="home"] .navbar::before,
.page[data-name="home"] .navbar::after{ display:none; }
.page[data-name="home"] .navbar-inner{
  background:linear-gradient(180deg, rgba(255,226,192,.96), rgba(255,211,163,.90));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:0 2px 14px rgba(255,140,60,.16);
}
/* 几何居中校正：F7 的 flex 三段在左右不对称时标题会偏，
   绝对定位强制居中（标准 navbar 结构下安全，tabShow 只改文本不动布局） */
.page[data-name="home"] .navbar-inner{ position:relative; }
/* ⚠️ F7 的 iOS navbar 会用【内联样式】给 .title 设 left/margin（JS 按左右按钮宽度算的），
   内联样式优先级高于普通 CSS —— 居中校正必须 !important 全家桶 */
.page[data-name="home"] .navbar-inner .title{
  position:absolute!important; left:50%!important; top:50%!important;
  right:auto!important; bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:auto!important; max-width:52%; text-align:center!important;
  font-size:17px!important; font-weight:600!important; letter-spacing:-.3px; color:#7a4514;
  margin:0!important; padding:0!important; line-height:1.2;
}
.page[data-name="home"] .navbar-inner .right{ position:absolute; right:8px; top:50%;
  transform:translateY(-50%); margin:0; }
/* titleFade 动画作用在内部 span 上避免与居中 transform 冲突 */
.page[data-name="home"] .navbar-inner .title.title-in{ animation:titleFade .2s ease; }
.page[data-name="home"] .navbar-inner .right .link .f7-icons{
  font-size:22px; color:var(--k-blue); opacity:.9;
}

/* ---------- 3. Tabbar（悬浮玻璃胶囊，Konsta 风格） ---------- */
.page[data-name="home"] .toolbar.tabbar{
  background:rgba(255,250,243,.92); box-shadow:0 -2px 16px rgba(255,140,60,.10); border-top:0;
  padding:0 10px calc(8px + constant(safe-area-inset-bottom));
  padding:0 10px calc(8px + env(safe-area-inset-bottom, 0px));
}
.page[data-name="home"] .toolbar.tabbar::before{ display:none; }
.tabbar .toolbar-inner{
  display:flex; height:auto; gap:4px; padding:5px;
  margin:0 auto; width:100%; box-sizing:border-box;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur-strong);
  backdrop-filter:var(--glass-blur-strong);
  border-radius:30px;
  border:.5px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
.tabbar .tab-link{
  flex:1 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:6px 2px 5px;
  color:var(--k-gray); font-size:10px; line-height:1;
  min-height:48px; border-radius:22px;
  transition:background .18s ease, color .18s ease;
}
.tabbar .tab-link .f7-icons{ font-size:26px; transition:transform .18s cubic-bezier(.34,1.56,.64,1); }
.tabbar .tab-link .tabbar-label{ font-size:10px; font-weight:500; }
.tabbar .tab-link.tab-link-active{ color:var(--k-blue); background:rgba(0,122,255,.12); }
.tabbar .tab-link.tab-link-active .f7-icons{
  color:var(--k-blue);
  animation:kpop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kpop{ 0%{transform:scale(.82)} 55%{transform:scale(1.18)} 100%{transform:scale(1)} }
.tabbar .tab-link:active{ transform:scale(.93); }
.tabbar .tab-link .badge{
  position:absolute; top:2px; left:calc(50% + 10px);
  min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  background:var(--k-red); color:#fff; font-size:11px; font-weight:600; line-height:17px;
  border:2px solid rgba(255,255,255,.9);
}

/* ---------- 4. 玻璃卡片（列表容器） ---------- */
.media-list{
  margin:10px 14px; border-radius:20px; overflow:hidden;
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important;
  backdrop-filter:var(--glass-blur)!important;
  border:.5px solid var(--glass-border);
  box-shadow:0 2px 16px rgba(0,0,0,.05);
}
.media-list ul{ background:transparent!important; }
.media-list li{ background:transparent!important; }
.media-list .item-title{ font-size:16px; font-weight:500; color:#1c1c1e; }
.media-list .item-subtitle{ font-size:13px; color:var(--k-gray); }
.media-list .item-after{ font-size:15px; color:var(--k-gray); }
.media-list .item-media img{ border-radius:14px; object-fit:cover; }
.media-list li:not(:last-child) .item-inner::after{ background:var(--k-sep); height:.5px; }
.list{ background:transparent; margin:0; }
.list .item-link:active{ background:rgba(0,122,255,.06); }
.block{
  margin:10px 14px; border-radius:20px; background:var(--glass-bg)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important; backdrop-filter:var(--glass-blur)!important;
  border:.5px solid var(--glass-border); overflow:hidden;
}
.block.block-strong-none{ background:transparent!important; backdrop-filter:none!important;
                          -webkit-backdrop-filter:none!important; border:0; box-shadow:none; }

/* ---------- 5. Chips（玻璃药丸） ---------- */
.chips-row{
  display:flex; gap:8px; padding:4px 2px;
  overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chips-row::-webkit-scrollbar{ display:none; }
.chips-row .chip{
  flex:0 0 auto; width:auto; margin:0; height:34px;
  display:inline-flex; align-items:center;
  border-radius:17px; overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-border);
  transition:all .18s ease;
}
.chips-row .chip-label{ font-size:14px; padding:0 13px; line-height:34px; color:#1c1c1e; font-weight:500; }
.chips-row .chip-media{ display:none; }
.chips-row .chip:active{ transform:scale(.95); }
.chips-row .chip.chip-active{
  background:var(--k-blue); border-color:transparent;
  box-shadow:0 4px 14px rgba(0,122,255,.35);
}
.chips-row .chip.chip-active .chip-label{ color:#fff; font-weight:600; }

/* ---------- 6. 按钮 ---------- */
.button{ --f7-theme-color:var(--k-blue); border-radius:14px; font-weight:600;
         transition:transform .12s ease, opacity .12s ease; }
.button:active{ transform:scale(.96); opacity:.85; }
.button.button-fill{ background:var(--k-blue); box-shadow:0 4px 14px rgba(0,122,255,.3); }
.button.button-round{ border-radius:999px; }
.addbtn{
  margin-top:8px; padding:6px 16px; border-radius:999px;
  background:var(--k-blue); color:#fff; font-size:14px; font-weight:600; border:0;
  display:inline-block; width:auto; min-height:32px; line-height:20px;
  box-shadow:0 3px 10px rgba(0,122,255,.28);
}
.addbtn:active{ transform:scale(.94); opacity:.8; }
.qty-ctl{
  display:inline-flex; align-items:center; margin-top:8px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-border);
  border-radius:999px; height:32px; overflow:hidden;
}
.qty-ctl .qbtn{ width:34px; height:32px; border:0; background:transparent;
                color:var(--k-blue); font-size:20px; line-height:1;
                display:flex; align-items:center; justify-content:center; }
.qty-ctl .qbtn:active{ background:rgba(0,122,255,.12); }
.qty-ctl span{ min-width:26px; text-align:center; font-size:15px; font-weight:600; color:#1c1c1e; }

/* ---------- 7. 购物车条 / 状态 / 统计 ---------- */
.kart{ margin:10px 14px; border-radius:20px;
       background:var(--glass-bg-strong)!important;
       -webkit-backdrop-filter:var(--glass-blur)!important; backdrop-filter:var(--glass-blur)!important;
       border:.5px solid var(--glass-border); box-shadow:var(--glass-shadow); }
.kart .card-content-padding{ padding:12px 14px; }
.kart b{ font-size:17px; font-weight:600; }
.kart .small-text{ font-size:13px; color:var(--k-gray); margin-top:2px; }
.st{ font-size:13px; } .st.pend{ color:var(--k-orange); } .st.done{ color:var(--k-blue); }
.st.rated i{ vertical-align:-2px; }
.fr-tag{ font-size:12px; padding:3px 10px; border-radius:999px; color:#fff; font-weight:600; }
.fr-tag.ok{ background:var(--k-green); } .fr-tag.soon{ background:var(--k-orange); } .fr-tag.exp{ background:var(--k-red); }
.no-items{ text-align:center; color:var(--k-gray); padding:60px 20px; }
.no-items p{ font-size:15px; margin:0; }
.stat-card{ padding:18px 0; }
.stat-card b{ font-size:28px; font-weight:700; letter-spacing:-.6px; }
.stat-card .small-text{ font-size:12px; color:var(--k-gray); margin-top:3px; }

/* ---------- 8. 小酥子（对话界面，参考主流 Agent 客户端） ---------- */
#tab-chat{ min-height:0; position:relative; }
.chatwrap-f7{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:14px 16px 126px;              /* 底部让开输入栏 */
}
.chatwrap-f7::-webkit-scrollbar{ display:none; }
#chatBody{
  display:flex; flex-direction:column; gap:14px;
  /* ⚠️ 兜底：F7 的 .messages/.messages-content 自带 background:#fff（iOS 主题变量），
     聊天区必须是透明的，否则会盖掉和其它 tab 一样的页面渐变底 */
  background:transparent;
}

/* ---- 空态：品牌 + 建议卡片 ---- */
.welcome{ padding:30px 2px 6px; text-align:center; animation:fadeUp .34s ease both; }
.welcome .brand{
  width:74px; height:74px; margin:0 auto 12px; border-radius:26px;
  display:flex; align-items:center; justify-content:center; font-size:38px;
  background:linear-gradient(150deg,#ffd7a3,#ff9f45);
  box-shadow:0 10px 26px rgba(255,150,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.welcome h2{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.3px; color:#6b3d12; }
.suggests{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.sug{
  display:flex; align-items:flex-start; gap:9px; width:100%; min-height:62px;
  padding:13px 12px; border-radius:18px; text-align:left;
  background:var(--glass-bg); border:.5px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  font-size:13.5px; line-height:1.4; color:#1c1c1e;
  transition:transform .14s ease, background .16s ease;
  animation:fadeUp .34s ease both; animation-delay:calc(var(--i, 0) * 34ms);
}
.sug:active{ transform:scale(.97); background:var(--glass-bg-strong); }
.sug .ic{ font-size:18px; line-height:1.25; flex:0 0 auto; }

/* ---- 消息 ---- */
.msg{ display:flex; align-items:flex-start; gap:8px; animation:fadeUp .26s ease both; }
.msg-me{ justify-content:flex-end; }
.msg .av{
  flex:0 0 auto; width:28px; height:28px; margin-top:2px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:linear-gradient(150deg,#ffd7a3,#ff9f45);
  box-shadow:0 3px 10px rgba(255,150,0,.22);
}
.bubble{
  max-width:78%; padding:11px 14px; border-radius:18px;
  font-size:15.5px; line-height:1.55; color:#1c1c1e; word-break:break-word;
  background:var(--glass-bg-strong); border:.5px solid var(--glass-border);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.msg-ai .bubble{ border-bottom-left-radius:6px; }
.msg-me .bubble{
  border-bottom-right-radius:6px; border-color:transparent;
  background:linear-gradient(135deg,#ffa04d,#ff7a2f); color:#fff;
  box-shadow:0 6px 18px rgba(255,122,47,.30);
}
.bubble b{ font-weight:600; }
.bubble .li{ display:block; }
/* 打字动画：三颗跳动圆点 */
.bubble.typing{ display:flex; gap:4px; padding:15px 16px; }
.bubble.typing i{
  width:6px; height:6px; border-radius:50%; background:#b9b9c0; display:block;
  animation:dotPulse 1.2s infinite ease-in-out;
}
.bubble.typing i:nth-child(2){ animation-delay:.15s; }
.bubble.typing i:nth-child(3){ animation-delay:.3s; }

/* ---- 工具结果卡 ---- */
.toolcard{
  max-width:78%; padding:11px 13px; border-radius:16px;
  background:rgba(52,199,89,.10); border:.5px solid rgba(52,199,89,.28);
}
.toolcard .tc-head{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:#1f9d4d; }
.toolcard .tc-ic{
  width:17px; height:17px; border-radius:50%; background:#34c759; color:#fff;
  font-size:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.toolcard .tc-body{ margin-top:5px; font-size:14px; line-height:1.5; color:#1c1c1e; }

/* ---- 输入栏：胶囊（内含麦克风）+ 独立发送键 ---- */
.chatbar{
  position:fixed; left:0; right:0; z-index:24;
  bottom:calc(52px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:9px; padding:8px 12px 6px;
  background:linear-gradient(180deg, rgba(255,249,242,0) 0%, rgba(255,249,242,.96) 40%);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.composer{ position:relative; flex:1 1 auto; min-width:0; }
.composer input{
  width:100%; height:42px; padding:0 14px 0 42px; border-radius:21px;
  border:.5px solid var(--glass-border); background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur-strong); backdrop-filter:var(--glass-blur-strong);
  font-size:16px; color:#1c1c1e; outline:none; box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.composer input::placeholder{ color:#a1a1a6; }
.chatbar .cbtn{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:.5px solid var(--glass-border); padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg-strong); color:var(--k-gray);
  transition:transform .12s ease, background .16s ease, color .16s ease;
}
.chatbar .cbtn .f7-icons{ font-size:20px; }
.chatbar .cbtn:active{ transform:scale(.92); }
.composer .mic{
  position:absolute; left:5px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; background:transparent; box-shadow:none;
}
.composer .mic.rec{ color:var(--k-red); background:rgba(255,59,48,.10); }
.chatbar .cbtn.send{ background:var(--k-blue); color:#fff; border-color:transparent;
  box-shadow:0 5px 14px rgba(10,124,255,.28); }
.chatbar .cbtn.send[disabled]{ background:rgba(118,118,128,.18); color:#fff; box-shadow:none; opacity:.85; }

/* ---- 动效 ---- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes dotPulse{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-4px); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .msg, .welcome, .sug{ animation:none; }
  .bubble.typing i{ animation:none; }
}

/* ---------- 9. 详情 Popup / 星级 / 表单 / 搜索 ---------- */
.dhero2{ width:100%; aspect-ratio:4/3; border-radius:0; overflow:hidden;
         background:linear-gradient(135deg,#fff3dd,#ffe1b3);
         display:flex; align-items:center; justify-content:center; font-size:76px; }
.dhero2 img{ width:100%; height:100%; object-fit:cover; }
.popup .navbar .title{ font-size:17px; font-weight:600; }
.popup .link{ color:var(--k-blue); }
.block-title{ font-size:20px; font-weight:700; letter-spacing:-.4px; margin:22px 0 8px; padding:0 16px; }
.rate-stars{ text-align:center; padding:10px 0 4px; }
.rate-stars i{ font-size:34px; color:#d1d1d6; padding:0 6px; transition:transform .12s ease; }
.rate-stars i.on{ color:var(--k-orange); }
.rate-stars i:active{ transform:scale(1.18); }
.list .item-input .item-label{ font-size:16px; color:#1c1c1e; }
.list .item-input input, .list .item-input select{ font-size:16px; color:var(--k-gray); text-align:right; }
.sheet-modal-inner{ padding:16px; }
.sheet-modal-inner .list{ border-radius:20px; overflow:hidden;
  background:var(--glass-bg-strong)!important; border:.5px solid var(--glass-border); margin:0 0 16px; }
/* 搜索框：结构样式统一在「13. 吸顶搜索条」用 F7 官方变量处理，
   这里不再对 .searchbar-inner 设底色/高度（旧写法会造成「白框套灰框」） */

/* ---------- 10. 段选器 ---------- */
.seg-block{ padding:0; background:transparent!important; border:0!important; box-shadow:none!important;
            -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
.seg-block .segmented{ border-radius:16px; overflow:hidden; padding:3px; gap:2px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-border); box-shadow:none; }
.seg-block .segment-button{
  border-radius:13px; font-size:13px; font-weight:500; height:32px; line-height:32px;
  color:#1c1c1e; background:transparent; border:0; transition:all .16s ease;
}
.seg-block .segment-button-active{
  background:#fff; color:var(--k-blue); font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.putin-block{ padding:10px 14px; }

/* swipeout 动作按钮 */
.swipeout-actions-right a{ display:flex; align-items:center; justify-content:center; padding:0 18px;
  color:#fff; font-size:13px; font-weight:600; text-decoration:none; }

/* ============ 13. 吸顶搜索条（统一用 F7 官方 searchbar，不再手写内部结构） ============ */
/* 说明：searchbar 在 page-content 里会命中 F7 官方规则
   `.page-content .searchbar:not(.searchbar-inline){ border-radius:var(--f7-searchbar-in-page-content-border-radius); … }`，
   而 iOS 主题下这两个圆角变量默认是 0（只有 md 主题是 24px）——
   这就是「白色方框套灰色方框、还没有圆角」的来源。
   正解：不再覆盖 .searchbar-inner / input 的结构样式，改成用 F7 官方变量统一调外观，
   视觉上只剩「一个输入框」，圆角、图标、清空按钮全部由框架负责。 */
.sticky-search{
  position:sticky; top:0; z-index:15;
  padding:8px 14px 6px;
  background:linear-gradient(180deg, rgba(255,249,242,.94) 60%, rgba(255,249,242,0));
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);

  --f7-searchbar-bg-color:transparent;
  --f7-searchbar-height:42px;
  --f7-searchbar-input-height:42px;
  --f7-searchbar-in-page-content-margin:0;
  --f7-searchbar-in-page-content-border-radius:14px;
  --f7-searchbar-in-page-content-input-border-radius:14px;
  --f7-searchbar-in-page-content-box-shadow:0 2px 12px rgba(0,0,0,.05);
  --f7-searchbar-input-bg-color:rgba(255,255,255,.86);
  --f7-searchbar-input-border-width:.5px;
  --f7-searchbar-input-border-color:rgba(0,0,0,.05);
  --f7-searchbar-input-text-color:#1c1c1e;
  --f7-searchbar-input-font-size:16px;
  --f7-searchbar-placeholder-color:#a1a1a6;
  --f7-searchbar-search-icon-color:#8e8e93;
  --f7-searchbar-input-clear-button-color:#8e8e93;
}
.sticky-search .searchbar{ margin:0; background:transparent; box-shadow:none; }
.sticky-search .searchbar:after{ display:none; }        /* 去掉原生 1px 下边线 */
.sticky-search .searchbar-inner{ padding:0; }            /* 原生左右 8px 内边距不需要 */
.sticky-search .searchbar-icon{ color:#8e8e93; }         /* 官方图标元素（framework7-core-icons 字体） */

/* ==================================================================
   16. 美团式点餐布局（tab2/3/4 统一）
   参考美团外卖：顶部搜索吸顶 + 左侧分类竖排(sticky) + 右侧纵向滚动联动
   ================================================================== */
/* ⭐ 高度链（缺任何一级，内部滚动就失效）：
   .page-content(flex列, overflow:hidden) → .tabs(flex:1,min-height:0) → .tab(flex:1) → .mt-layout(flex:1)
   滚动交给内部 .mt-main / .chatwrap-f7，页面级不再滚 */
.page[data-name="home"] .page-content{
  display:flex; flex-direction:column; overflow:hidden;
}
.page[data-name="home"] .page-content > .tabs{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}
.tab{ display:none; }
.tab.tab-active{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.tab > .sticky-search{ flex:0 0 auto; }
.mt-layout{
  display:flex; align-items:stretch; gap:0;
  flex:1 1 auto; min-height:0;      /* 吃满 tab 内剩余空间 */
}

/* ---- 左侧分类栏：整列固定，内部独立滚动 ---- */
.mt-side{
  flex:0 0 64px; width:64px; min-height:0;    /* 收窄：86 → 64，右侧内容更宽 */
  overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:8px 2px 96px 8px;                   /* 同 .mt-main：躲开底部浮条 */
}
.mt-side::-webkit-scrollbar{ display:none; }
.mt-side.dim .mcat{ opacity:.35; }        /* 搜索态：分类栏淡出 */
.mt-side.dim .mcat.on{ opacity:.5; }
.mt-side .mcat{
  display:flex; align-items:center; justify-content:center; gap:3px;
  width:100%; margin:0 0 4px; padding:9px 2px;
  border-radius:14px; background:transparent; border:0;
  font-size:12px; line-height:1.2; font-weight:500; color:#3c3c43;
  transition:all .16s ease;
  white-space:nowrap;                          /* 名字数字同一行，不换行 */
}
.mt-side .mcat.on{
  background:var(--k-blue); color:#fff; font-weight:600;
  box-shadow:0 4px 12px rgba(255,122,47,.32);
}
.mt-side .mcat .nm{
  min-width:0; overflow:hidden; text-overflow:ellipsis;   /* 超长名字省略号，不撑破 64px */
}
.mt-side .mcat .n{ font-size:10.5px; opacity:.65; font-weight:500; flex:0 0 auto; }
.mt-side .mcat.on .n{ opacity:.9; }

/* ---- 右侧主区：纵向滚动，各分类为 section ---- */
.mt-main{
  flex:1 1 auto; min-width:0; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  overscroll-behavior:contain;                /* 滚到头不带动外层 */
  /* ⭐ 底部留 96px：底部浮条是 fixed 的，不留白最后一条会被压住 */
  padding:8px 14px 96px 10px;
}
.mt-main::-webkit-scrollbar{ display:none; }
.mt-sec{ margin-bottom:18px; scroll-margin-top:8px; }
.mt-sec:last-child{ margin-bottom:6px; }
.mt-sechead{
  display:flex; align-items:baseline; gap:8px;
  padding:2px 2px 8px;
}
.mt-sechead b{ font-size:16px; font-weight:700; color:#8a4b1d; letter-spacing:-.2px; }
.mt-sechead span{ font-size:12px; color:var(--k-gray); }
.mt-sechead::after{ content:""; flex:1; height:.5px;
  background:linear-gradient(90deg, var(--k-sep), transparent); }

/* ---- 列表卡片（统一三页） ---- */
.mt-main .list{ margin:0; background:transparent; }
.mt-main .media-list{
  margin:0; border-radius:18px; overflow:hidden;
  background:var(--glass-bg)!important;
  -webkit-backdrop-filter:var(--glass-blur)!important; backdrop-filter:var(--glass-blur)!important;
  border:.5px solid var(--glass-border);
  box-shadow:0 2px 14px rgba(0,0,0,.045);
}
.mt-main .media-list ul{ background:transparent!important; }
.mt-main .media-list li{ background:transparent!important; }
.mt-main .item-media{
  position:relative; flex-shrink:0;
  background:linear-gradient(135deg, rgba(118,118,128,.13), rgba(118,118,128,.07));
  border-radius:12px; overflow:hidden;
}
.mt-main .item-media img{ border-radius:12px; object-fit:cover; display:block; }
.mt-main .item-media img.no-img{ opacity:0; }   /* 图挂了就露出灰底占位 */
.mt-main .item-title{ font-size:15.5px; font-weight:600; color:#1c1c1e; }
.mt-main .item-subtitle{ font-size:12.5px; color:var(--k-gray); }
.mt-main .item-after{ font-size:14px; color:var(--k-gray); font-weight:500; }
.mt-main .item-after.small{ font-size:12px; font-weight:400; color:#a1a1a6; }
.mt-empty{ text-align:center; color:var(--k-gray); font-size:13px; padding:26px 0; }

/* ---- 食材统计卡：横向三格（F7 bundle 里没有 grid，别用 .row/.col-33） ---- */
.frstat{ display:flex; gap:8px; padding:2px 2px 10px; }
.frstat-item{
  flex:1 1 0; min-width:0; text-align:center; padding:12px 6px 11px;
  border-radius:16px; background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-border);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.frstat-item b{ display:block; font-size:21px; font-weight:700; line-height:1.15; letter-spacing:-.4px; }
.frstat-item span{ display:block; margin-top:2px; font-size:11.5px; color:var(--k-gray); }
.frstat-item.ok b{ color:#34c759; }
.frstat-item.soon b{ color:#ff9500; }
.frstat-item.exp b{ color:#ff3b30; }
/* 记录页看板专用色（待上菜=御膳橙） */
.frstat-item.pend2 b{ color:#ff7a2f; }
/* ⭐ 看板三格可点击：果冻按压 + 提示箭头，傻瓜式「看得见可点」 */
.frstat .frstat-item{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
.frstat .frstat-item:active{ transform:scale(.92); }
.frstat .frstat-item::after{
  content:"›"; position:absolute; right:9px; top:50%; margin-top:-9px;
  font-size:15px; line-height:1; color:#d8b48a; font-weight:700;
}
.frstat .frstat-item{ position:relative; }
.frstat[data-sec] .frstat-item::after{ display:none; }   /* 占位规则，保持级联稳定 */

/* ---- 底部通栏操作条（购物车/统计/操作，位置与内容随 tab 变） ---- */
.mt-bar{
  position:fixed; left:0; right:0; z-index:26;
  bottom:calc(50px + env(safe-area-inset-bottom, 0px));
  margin:0 12px;
  padding:9px 12px; border-radius:20px;
  display:flex; align-items:center; gap:10px;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:var(--glass-blur-strong); backdrop-filter:var(--glass-blur-strong);
  border:.5px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.6);
}
.mt-bar:empty{ display:none; }
.mt-bar .cartbtn{
  flex:0 0 auto; position:relative;
  width:44px; height:44px; border-radius:50%; padding:0;
  background:rgba(118,118,128,.16); border:0; color:var(--k-gray);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s ease, background .18s ease;
}
.mt-bar .cartbtn:active{ transform:scale(.92); }
.mt-bar .cartbtn.on{ background:var(--k-blue); color:#fff; }
.mt-bar .cartbtn .f7-icons{ font-size:21px; }
.mt-bar .cartbtn .badge{
  position:absolute; top:-3px; right:-3px;
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--k-red); color:#fff; font-size:11px; font-weight:700; line-height:19px;
  border:2px solid #fff;
}
.mt-bar .sum{ flex:1 1 auto; min-width:0; }
.mt-bar .sum .t{ font-size:17px; font-weight:700; color:var(--k-red); letter-spacing:-.3px; }
.mt-bar .sum .t small{ font-size:12px; font-weight:500; color:var(--k-gray); margin-left:6px; }
.mt-bar .sum .d{ font-size:11.5px; color:var(--k-gray); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-bar .go{
  /* ⚠️ 同上：F7 的 button{width:100%} 会把「去下单」拉满、挤扁统计区 */
  width:auto; flex:0 0 auto; height:40px; padding:0 22px; border-radius:20px; border:0;
  background:linear-gradient(135deg,#ff9f0a,#ff6b00); color:#fff;
  font-size:15px; font-weight:700; letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(255,107,0,.36);
  transition:transform .12s ease, opacity .12s ease;
}
.mt-bar .go:active{ transform:scale(.95); opacity:.9; }
.mt-bar .go.ghost{ background:rgba(118,118,128,.16); color:var(--k-text,#1c1c1e);
  box-shadow:none; font-weight:600; }

/* 菜谱行的加减控件（统一） */
.mt-main .qty-ctl{
  display:inline-flex; align-items:center; margin-top:8px;
  background:rgba(118,118,128,.14); border-radius:999px; height:30px; overflow:hidden;
}
.mt-main .qty-ctl .qbtn{ width:32px; height:30px; border:0; background:transparent;
  color:var(--k-blue); font-size:19px; display:flex; align-items:center; justify-content:center; }
.mt-main .qty-ctl .qbtn:active{ background:rgba(0,122,255,.14); }
.mt-main .qty-ctl span{ min-width:24px; text-align:center; font-size:15px; font-weight:600; }
.mt-main .addbtn{
  /* ⚠️ F7 全局有 button{width:100%}，必须显式复位，否则按钮撑满整行 */
  width:auto; margin-top:8px; min-width:64px; height:30px; padding:0 14px; border-radius:999px;
  background:linear-gradient(135deg,#ff9f0a,#ff6b00); color:#fff;
  font-size:13px; font-weight:600; border:0; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 3px 9px rgba(255,107,0,.3);
}
.mt-main .addbtn:active{ transform:scale(.94); }
/* ==================================================================
   17. 食材配图 / 数量步进器 / 常用食材速选（sheet）
   ================================================================== */
/* 食材底片：没有照片时用 emoji 或首字，风格与圆角 12 一致 */
.ing-tile{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; background:linear-gradient(135deg, rgba(118,118,128,.12), rgba(118,118,128,.05));
  border:.5px solid var(--glass-border); overflow:hidden;
}
.mt-main .item-media img{ display:block; }

/* 数量步进器：只显示数字 */
.qty-ctl .qn{ min-width:30px; text-align:center; font-size:15px; font-weight:600; color:#1c1c1e; }

/* 记录行的配图 + 多菜角标 */
.mt-main .item-media.hasimg{ position:relative; }
.mt-main .item-media .imgn{
  position:absolute; right:-4px; bottom:-4px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:rgba(28,28,30,.78); color:#fff; font-size:10px; font-weight:700; line-height:18px;
  text-align:center; border:1.5px solid #fff;
}

/* 放入食材面板：常用食材速选网格 */
.ing-wrap{ padding:14px 15px calc(18px + env(safe-area-inset-bottom, 0px)); }
.ing-head{ display:flex; align-items:baseline; gap:8px; margin:2px 0 9px; }
.ing-head b{ font-size:15px; font-weight:700; color:#1c1c1e; }
.ing-head span{ font-size:11.5px; color:var(--k-gray); }
.ingpick{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  max-height:224px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px; scrollbar-width:none;
}
.ingpick::-webkit-scrollbar{ display:none; }
.ingcell{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:100%; padding:8px 2px 7px; border:0; border-radius:14px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:.5px solid var(--glass-border);
  transition:transform .12s ease, background .16s ease;
}
.ingcell:active{ transform:scale(.94); }
.ingcell .ic{ width:40px; height:40px; border-radius:11px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:23px; line-height:1; }
.ingcell .ic img{ width:40px; height:40px; display:block; }
.ingcell .nm{ font-size:11.5px; color:#1c1c1e; font-weight:500;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ingcell .dy{ font-size:10px; color:var(--k-gray); }
.ingcell.has{ background:rgba(52,199,89,.12); border-color:rgba(52,199,89,.35); }
.ingcell.has .dy::before{ content:"已在冰箱 · "; color:#34c759; }
.ing-fill{
  width:auto; margin:11px auto 0; display:block; height:34px; padding:0 16px;
  border-radius:17px; font-size:13px; font-weight:600;
  background:rgba(0,122,255,.12); color:var(--k-blue);
}
.ing-fill:active{ transform:scale(.96); }
.ing-form .item-title{ font-size:14px; color:#1c1c1e; }
/* 食材页：补齐常用食材引导卡 */
.fr-hint{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:10px;
  padding:12px 14px; border:0; border-radius:16px; text-align:left;
  background:linear-gradient(135deg, rgba(255,122,47,.14), rgba(255,122,47,.05));
  border:.5px solid rgba(255,122,47,.26);
}
.fr-hint b{ font-size:14px; color:var(--k-blue); font-weight:600; flex:0 0 auto; }
.fr-hint span{ flex:1 1 auto; font-size:11.5px; color:var(--k-gray); line-height:1.35; }
.fr-hint .f7-icons{ font-size:17px; color:var(--k-blue); }
.fr-hint:active{ transform:scale(.98); }
/* 行内主操作按钮的绿色变体（记录页「上菜」） */
.mt-main .addbtn.ok{ background:linear-gradient(135deg,#34c759,#28a745); box-shadow:0 3px 9px rgba(52,199,89,.3); }

/* ==================================================================
   19. 交互动效（F7 官方涟漪 + 切页入场）
   ================================================================== */
/* 切 tab 的入场过渡：只动 opacity。
   ⚠️ 不能用 transform —— 祖先一旦带 transform，内部 position:fixed 的
   底部操作条 / 聊天输入栏会改成以该元素为定位基准，位置会跑。 */
@keyframes tabIn{ from{ opacity:.4; } to{ opacity:1; } }
.tab.tab-in{ animation:tabIn .2s ease both; }

/* 行涟漪（F7 的 .ripple-wave 默认 z-index:-1，会被带背景的卡片盖住，
   这里给行一个定位上下文并把水波抬到可见层） */
.mt-main .item-content.ripple{ position:relative; overflow:hidden; }
.mt-main .item-content.ripple .ripple-wave{ z-index:0; }

/* 深色底按钮上用浅色涟漪，否则看不见 */
.mt-bar .go, .mt-bar .cartbtn.on, .chatbar .cbtn.send, .ingcell.has{
  --f7-touch-ripple-color:rgba(255,255,255,.35);
}

@media (prefers-reduced-motion: reduce){
  .tab.tab-in{ animation:none; }
}

/* ==================================================================
   20. 御膳房卡通主题（橙色 · 可爱 · 小女生向）
   ================================================================== */
/* 漫画感字体：圆润无衬线 + 轻微字距 */
body{
  font-family:"Yuanti SC", "YouYuan", "PingFang SC", -apple-system, "SF Pro Rounded", sans-serif;
}

/* 顶栏标题：戴个小帽子（🍊 图形帽）——卡通感点睛 */
.page[data-name="home"] .navbar-inner .title{
  background:radial-gradient(circle at 50% -220%, #ffd9a8 78%, transparent 79%);
  padding:14px 18px 8px!important;
}

/* 卡片：更大圆角 + 果冻按压 */
.mt-main .media-list{ border-radius:22px!important; }
.mt-main .item-content:active{ transform:scale(.985); transition:transform .12s ease; }

/* 分类小胶囊：圆滚滚 + 选中时小弹跳 */
.mt-side .mcat{ border-radius:16px; }
.mt-side .mcat.on{ animation:catPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes catPop{ 0%{ transform:scale(.9);} 60%{ transform:scale(1.06);} 100%{ transform:scale(1);} }

/* 欢迎品牌：橙子脸蛋（腮红+眨眼） */
.welcome .brand{
  position:relative;
  background:linear-gradient(150deg,#ffd98f,#ff9f45);
}
.welcome .brand::before, .welcome .brand::after{
  content:""; position:absolute; top:46px; width:9px; height:5px;
  border-radius:50%; background:rgba(255,255,255,.85);
  animation:blink 4s infinite;
}
.welcome .brand::before{ left:18px; }
.welcome .brand::after{ right:18px; animation-delay:.12s; }
@keyframes blink{ 0%,92%,100%{ transform:scaleY(1);} 95%{ transform:scaleY(.1);} }

/* 建议卡：糖果底色（4 色循环） */
.sug:nth-child(4n+1){ background:linear-gradient(135deg,#fff2e2,#ffe7cc); }
.sug:nth-child(4n+2){ background:linear-gradient(135deg,#ffeedd,#ffd9e0); }
.sug:nth-child(4n+3){ background:linear-gradient(135deg,#f0f7e8,#e2f2d5); }
.sug:nth-child(4n+4){ background:linear-gradient(135deg,#eaf3ff,#dbeaff); }

/* AI 气泡：暖白 + 微奶油描边 */
.msg-ai .bubble{
  background:rgba(255,252,246,.92);
  border:.5px solid rgba(255,190,120,.35);
}

/* 空态/提示加个小表情 */
.mt-empty::before{ content:"🍼 "; }
.frstat-item.ok b::after{ content:""; }

/* 底部操作条：奶油底 */
.mt-bar{
  background:rgba(255,251,244,.92);
  border:.5px solid rgba(255,190,120,.30);
}

/* 食材小图：白描边像贴纸 */
.mt-main .item-media img{ border:2px solid #fff; box-shadow:0 2px 8px rgba(255,140,60,.18); }

/* 统计卡数字色（沿用语义色）+ 卡底奶油 */
.frstat-item{ background:linear-gradient(180deg,#fffdf8,#fff4e4); }
.ingcell{ background:linear-gradient(180deg,#fffdf8,#fff3e6); }

/* 搜索框暖色 */
.sticky-search{
  --f7-searchbar-input-bg-color:rgba(255,255,255,.92);
  --f7-searchbar-search-icon-color:#e8975a;
  --f7-searchbar-placeholder-color:#d4a377;
}

/* 聊天发送键：橘子汽水 */
.chatbar .cbtn.send{ background:linear-gradient(135deg,#ffa04d,#ff7a2f); box-shadow:0 5px 14px rgba(255,122,47,.35); }

/* Toast 暖色（F7 默认黑，换奶油咖） */
.toast{ background:#7a4514; color:#ffe9cf; }
.toast .toast-text{ color:#ffe9cf; }

/* 深色按钮上的浅色涟漪（原有规则覆盖色已暖，这里保持） */

/* ============ 第 22 段：新增菜谱弹层（拍照/上传 + AI 预填） ============ */
.nd-photo{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:150px; margin:0 0 14px;
  border-radius:18px; border:1.5px dashed rgba(255,140,60,.45);
  background:linear-gradient(180deg,#fffdf8,#fff3e4);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
.nd-photo:active{ transform:scale(.97); }
.nd-photo .ph-ic{ font-size:34px; line-height:1; margin-bottom:6px; }
.nd-photo .ph-tx{ font-size:13.5px; color:#8a4b1d; font-weight:600; }
.nd-photo .ph-sub{ font-size:11.5px; color:#c99b6a; margin-top:3px; }
.nd-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nd-photo .ph-x{
  position:absolute; top:8px; right:8px; z-index:2;
  width:26px; height:26px; border-radius:13px; border:0;
  background:rgba(0,0,0,.45); color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.nd-photo .ph-aib{
  position:absolute; left:8px; bottom:8px; z-index:2;
  display:none; align-items:center; gap:5px;
  padding:4px 9px; border-radius:11px; border:0;
  background:rgba(255,122,47,.92); color:#fff; font-size:11.5px; font-weight:600;
}
.nd-photo.has-img .ph-aib{ display:flex; }
.nd-photo .ph-aib.scan{ animation:aiScan 1.1s ease-in-out infinite; }
@keyframes aiScan{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* AI 预填标记：字段右侧小徽标 */
.nd-aib{
  display:none; margin-left:6px; padding:1.5px 7px; border-radius:9px;
  background:rgba(255,122,47,.14); color:#ff7a2f; font-size:10px; font-weight:600;
  vertical-align:1px; white-space:nowrap;
}
.nd-aib.show{ display:inline-block; }

/* 表单列表小标题 */
.nd-form .item-title{ font-size:14px; }
.nd-form textarea{
  width:100%; min-height:64px; padding:8px 10px; font-size:14px; font-family:inherit;
  border-radius:10px; border:.5px solid rgba(0,0,0,.12); background:rgba(255,255,255,.92);
  resize:vertical; box-sizing:border-box;
}
.nd-cats{ display:flex; flex-wrap:wrap; gap:7px; padding:6px 0 2px; }
.nd-cat{
  padding:6px 13px; border-radius:14px; border:1px solid rgba(255,140,60,.35);
  background:#fffdf8; color:#8a4b1d; font-size:13px; cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.nd-cat:active{ transform:scale(.93); }
.nd-cat.on{ background:linear-gradient(135deg,#ffa04d,#ff7a2f); color:#fff; border-color:transparent; font-weight:600; }

/* 底部确认条 */
.nd-foot{ display:flex; gap:10px; margin-top:14px; }
.nd-foot .button{ flex:1; border-radius:14px; }