/* ==========================================================================
   小吃培训网 手机端样式（浅色主题，主色 #ff5400 橙 + #008fd7 蓝）
   ========================================================================== */
:root {
  --pri: #ff5400;
  --pri-dark: #e64a00;
  --blue: #008fd7;
  --ink: #1f2329;
  --ink-2: #4a5159;
  --ink-3: #8a939c;
  --line: #eceef1;
  --bg: #f4f5f7;
  --card: #ffffff;
  --radius: 10px;
  --tab-h: 52px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: #e9ebee;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; font-weight: normal; }
input, select, textarea, button { font-family: inherit; font-size: 14px; }

/* 容器：max-width 640 居中 */
.m-wrap {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: calc(var(--tab-h) + 14px);
  overflow-x: hidden;
}
.m-wrap.has-leadbar { padding-bottom: calc(var(--tab-h) + 64px + 14px); }
body.is-home .m-wrap { padding-bottom: calc(var(--tab-h) + 60px + env(safe-area-inset-bottom, 0px)); }

/* ===================== 顶部 header（白底，原型头部样式） ===================== */
.m-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.m-header-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; }
.m-hb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-logo { display: flex; align-items: center; gap: 6px; flex: none; color: var(--pri); font-size: 17px; font-weight: 700; min-width: 0; }
.m-logo img { height: 26px; width: auto; }
.m-logo-ico { height: 28px !important; width: 28px !important; flex: none; }
.m-logo-txt { font-size: 17px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-city-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: var(--pri);
  background: #fff4ec;
  border: 0;
  border-radius: 16px;
  padding: 4px 10px;
  white-space: nowrap;
}
.m-city-btn .arr { font-size: 10px; transform: scale(.9); }
.m-city-btn .ic { font-size: 12px; }
/* 右上角三杠汉堡按钮（白底头部上确保清晰可见：浅灰药丸底 + 近黑三杠） */
.m-menu-btn { flex: none; width: 36px; height: 36px; margin-left: auto; border: 0; background: #f0f1f3; background: rgba(0,0,0,.05); border-radius: 9px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 9px; cursor: pointer; }
.m-menu-btn span { display: block; width: 18px; height: 3px; border-radius: 2px; background: #ff5400; background: var(--pri); }
.m-menu-btn:active { background: rgba(0,0,0,.1); }
.m-menu-btn:active span { background: #ff5400; background: var(--pri); }

/* 三杠汉堡菜单（右侧抽屉，原型红底标题栏） */
.m-menu-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .22s; }
.m-menu-mask.open { opacity: 1; visibility: visible; }
.m-menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 80%; max-width: 320px;
  background: #fff; z-index: 91; transform: translateX(100%); transition: transform .26s ease;
  display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0, 0, 0, .16);
}
.m-menu-panel.open { transform: translateX(0); }
.m-menu-top { position: relative; background: linear-gradient(135deg, #ff7a2e, var(--pri)); color: #fff; padding: 30px 18px 18px; }
.m-menu-brand { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.m-menu-sub { font-size: 12px; opacity: .9; margin-top: 6px; }
.m-menu-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; background: rgba(255, 255, 255, .18); color: #fff; font-size: 22px; line-height: 1; border-radius: 50%; }
.m-menu-list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m-menu-list li { border-bottom: 1px solid #f3f4f6; }
.m-menu-list a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--ink-2); font-size: 16px; }
.m-menu-list a:active { background: #fff4ec; color: var(--pri); }
.m-menu-list .mi { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.m-menu-list .mi svg { width: 22px; height: 22px; }
.m-menu-list a:active .mi { color: var(--pri); }

/* 搜索（灰色药丸，原型样式） */
.m-search { position: relative; display: flex; align-items: center; background: #ededed; border-radius: 20px; padding: 0 5px 0 14px; height: 36px; margin: 8px 10px 0; }
.m-search .m-search-ic { color: #9aa1a8; display: flex; align-items: center; flex: none; }
.m-search input[type="text"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; height: 100%; font-size: 14px; color: var(--ink); }
.m-search input::placeholder { color: #b3bac2; }
.m-search .m-search-btn { border: 0; background: var(--pri); color: #fff; height: 28px; padding: 0 14px; border-radius: 15px; font-size: 13px; flex: none; }
.m-search .m-search-btn:active { background: var(--pri-dark); }

/* 面包式导航栏（横向滚动） */
.m-navbar { display: flex; align-items: stretch; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-top: 1px solid #f1f2f4; }
.m-navbar::-webkit-scrollbar { display: none; }
.m-navbar a {
  flex: 0 0 auto;
  position: relative;
  padding: 10px 13px;
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1;
}
.m-navbar a.on { color: var(--pri); font-weight: 700; }
.m-navbar a.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; border-radius: 2px; background: var(--pri); }

/* 城市下拉面板 */
.m-city-panel {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .14);
  padding: 12px;
  z-index: 60;
}
.m-city-panel.open { display: block; }
.m-city-panel h4 { font-size: 13px; color: var(--ink-3); margin: 4px 0 8px; }
.m-city-list { display: flex; flex-wrap: wrap; gap: 8px; }
.m-city-list a {
  padding: 5px 12px;
  border-radius: 16px;
  background: #f3f5f7;
  color: var(--ink-2);
  font-size: 13px;
}
.m-city-list a.on { background: var(--pri); color: #fff; }

/* ===================== 通用区块 ===================== */
.m-sec { background: #fff; margin: 10px; border-radius: var(--radius); padding: 12px; box-shadow: 0 1px 3px rgba(16, 24, 40, .04); }
.m-sec.flush { padding: 12px 0; }
.m-sec-hd { display: flex; align-items: center; margin-bottom: 10px; }
.m-sec-hd h3 { font-size: 16px; font-weight: 700; color: var(--ink); position: relative; padding-left: 10px; }
.m-sec-hd h3::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--pri); }
.m-sec-hd .more { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.m-sec-sub { font-size: 12px; color: var(--ink-3); margin: -6px 0 10px 10px; }

/* ===================== 分类九宫格 ===================== */
.m-grid { display: flex; flex-wrap: wrap; }
.m-grid-item { width: 25%; padding: 8px 4px; text-align: center; }
.m-grid-item .ico {
  width: 46px; height: 46px; margin: 0 auto 6px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ffa13c, var(--pri));
}
.m-grid-item:nth-child(2n) .ico { background: linear-gradient(135deg, #4fb6e6, var(--blue)); }
.m-grid-item .txt { font-size: 12px; color: var(--ink-2); }

/* ===================== 列表卡片（左图右文） ===================== */
.m-list { display: flex; flex-direction: column; gap: 10px; }
.m-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
  transition: transform .12s;
}
.m-item:active { transform: scale(.99); }
.m-item-thumb { width: 112px; height: 82px; flex: none; border-radius: 8px; overflow: hidden; background: #eef1f5; }
.m-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-item-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-item-title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.m-item-desc { font-size: 12px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-item-meta { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); padding-top: 6px; }
.m-item-meta .price { color: var(--pri); font-weight: 700; font-size: 14px; }
.m-item-meta .tag { background: #fff4ec; color: var(--pri); border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.m-item-meta .blue { color: var(--blue); }

/* 学校列表专用 */
.m-sch-item .m-item-thumb { width: 96px; height: 96px; }
.m-sch-item .m-item-title { -webkit-line-clamp: 2; }
.m-sch-item .m-sch-line { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.m-sch-item .m-item-meta { padding-top: 4px; }

/* 加盟卡片：竖版大图 */
.m-brand-item { display: flex; gap: 10px; padding: 10px; background: #fff; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .04); }
.m-brand-item .m-item-thumb { width: 96px; height: 96px; }
.m-brand-item .m-item-title { -webkit-line-clamp: 2; }
.m-brand-item .m-brand-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 三列网格（菜谱等） */
.m-cards3 { display: flex; flex-wrap: wrap; gap: 10px; }
.m-cards3 .m-card3 { width: calc((100% - 20px) / 3); background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, .05); }
.m-cards3 .m-card3 img { width: 100%; height: 92px; object-fit: cover; }
.m-cards3 .m-card3 .t { font-size: 13px; padding: 6px 6px 2px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.m-cards3 .m-card3 .m { font-size: 11px; color: var(--ink-3); padding: 0 6px 8px; }

/* 两列网格（品牌） */
.m-cards2 { display: flex; flex-wrap: wrap; gap: 10px; }
.m-cards2 .m-card2 { width: calc((100% - 10px) / 2); background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, .05); }
.m-cards2 .m-card2 img { width: 100%; height: 104px; object-fit: cover; }
.m-cards2 .m-card2 .t { font-size: 13px; font-weight: 600; padding: 7px 8px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-cards2 .m-card2 .m { font-size: 12px; color: var(--ink-3); padding: 0 8px 8px; }

/* 新闻列表 */
.m-news-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.m-news-item:last-child { border-bottom: 0; }
.m-news-item .m-news-bd { flex: 1; min-width: 0; }
.m-news-item .t { font-size: 15px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-news-item .d { font-size: 12px; color: var(--ink-3); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-news-item .m-news-thumb { width: 104px; height: 72px; flex: none; border-radius: 8px; overflow: hidden; background: #eef1f5; }
.m-news-item .m-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-news-item .m-news-meta { font-size: 12px; color: #b3bac2; margin-top: 6px; }
.m-news-rank { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 4px; background: #dfe3e9; color: #fff; font-size: 11px; margin-right: 6px; vertical-align: middle; }
.m-news-rank.hot { background: var(--pri); }

/* ===================== 筛选条 ===================== */
.m-filter { background: #fff; margin: 10px; border-radius: var(--radius); padding: 8px 10px; }
.m-filter-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px 0; }
.m-filter-row::-webkit-scrollbar { display: none; }
.m-filter-row .lb { flex: none; font-size: 12px; color: var(--ink-3); }
.m-chip { flex: none; font-size: 13px; color: var(--ink-2); background: #f3f5f7; border-radius: 15px; padding: 4px 12px; white-space: nowrap; }
.m-chip.on { background: var(--pri); color: #fff; }
.m-filter .m-filter-result { font-size: 12px; color: var(--ink-3); padding: 2px 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.m-filter .m-filter-result b { color: var(--pri); }

/* ===================== 分页 ===================== */
.m-pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 16px 10px 4px; }
.m-pager a, .m-pager span {
  min-width: 38px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ink-2); border-radius: 8px; font-size: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
}
.m-pager a.cur { background: var(--pri); color: #fff; }
.m-pager span.dis { color: #c4cbd2; background: #f3f5f7; }
.m-pager .pg-info { font-size: 12px; color: var(--ink-3); width: 100%; text-align: center; }

/* ===================== 详情页 ===================== */
.m-detail { padding: 0 0 4px; }
.m-dt-card { background: #fff; margin: 10px; border-radius: var(--radius); padding: 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .04); }
.m-dt-title { font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.m-dt-sub { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.m-dt-price { color: var(--pri); font-size: 20px; font-weight: 700; }
.m-dt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-dt-tags span { font-size: 12px; color: var(--pri); background: #fff4ec; border-radius: 4px; padding: 2px 8px; }
.m-dt-tags span.b { color: var(--blue); background: #eaf6fd; }
.m-dt-cover { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; background: #eef1f5; }
.m-dt-cover-gallery .m-dt-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.m-dt-cover-gallery .m-dt-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 6px; border: 1px solid #e6e9ee; flex: 0 0 auto; }
.m-dt-cover-gallery .m-dt-thumbs img:first-child { border-color: #db4339; }
.m-info-list { }
.m-info-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.m-info-row:last-child { border-bottom: 0; }
.m-info-row .k { width: 76px; flex: none; color: var(--ink-3); }
.m-info-row .v { flex: 1; color: var(--ink-2); word-break: break-all; }
.m-info-row .v b { color: var(--pri); }

.m-article { font-size: 15px; line-height: 1.85; color: #2b3138; word-break: break-word; }
.m-article p { margin: 0 0 12px; }
.m-article img { height: auto; margin: 8px 0; border-radius: 6px; }
.m-article h2, .m-article h3 { font-weight: 700; margin: 16px 0 8px; font-size: 16px; }
.m-article a { color: var(--blue); }

/* 步骤 */
.m-steps { counter-reset: st; }
.m-step { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.m-step:last-child { border-bottom: 0; }
.m-step .no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pri); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.m-step .tx { flex: 1; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.m-step .tx img { margin-top: 6px; border-radius: 6px; }

/* 食材明细 */
.m-ingredients { display: flex; flex-wrap: wrap; gap: 8px; }
.m-ingredients span { font-size: 13px; color: var(--ink-2); background: #f3f5f7; border-radius: 6px; padding: 4px 10px; }

/* 空状态 */
.m-empty { text-align: center; padding: 50px 20px; color: var(--ink-3); }
.m-empty .ic { font-size: 40px; margin-bottom: 10px; color: #d7dce1; }
.m-empty p { font-size: 14px; }

/* ===================== 表单页 ===================== */
.m-form-card { background: #fff; margin: 10px; border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 3px rgba(16, 24, 40, .04); }
.m-form-card h2 { font-size: 18px; font-weight: 700; }
.m-form-card .sub { font-size: 13px; color: var(--ink-3); margin: 6px 0 14px; }
.m-field { margin-bottom: 12px; }
.m-field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.m-field input[type="text"], .m-field input[type="tel"], .m-field input[type="password"], .m-field select, .m-field textarea {
  width: 100%; border: 1px solid var(--line); background: #fafbfc; border-radius: 8px; padding: 11px 12px; outline: 0; color: var(--ink);
}
.m-field input:focus, .m-field select:focus, .m-field textarea:focus { border-color: var(--pri); background: #fff; }
.m-field textarea { min-height: 84px; resize: vertical; }
.m-btn {
  display: block; width: 100%; border: 0; border-radius: 24px; height: 46px;
  background: linear-gradient(135deg, #ff7a2e, var(--pri)); color: #fff; font-size: 16px; font-weight: 600;
  box-shadow: 0 6px 14px rgba(255, 84, 0, .28);
}
.m-btn:active { transform: translateY(1px); }
.m-btn.blue { background: linear-gradient(135deg, #37aee6, var(--blue)); box-shadow: 0 6px 14px rgba(0, 143, 215, .25); }
.m-btn.ghost { background: #fff; color: var(--pri); border: 1px solid var(--pri); box-shadow: none; }
.m-form-tip { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 10px; }
.m-msg { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.m-msg.err { background: #fdecec; color: #d93025; }
.m-msg.ok { background: #e9f7ee; color: #17843b; }

.m-feature-grid { display: flex; flex-wrap: wrap; }
.m-feature-grid .f { width: 50%; padding: 8px; }
.m-feature-grid .f .t { font-size: 14px; font-weight: 600; color: var(--pri); }
.m-feature-grid .f .d { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.m-stats { display: flex; text-align: center; padding: 8px 0; }
.m-stats .s { flex: 1; }
.m-stats .s b { display: block; font-size: 20px; color: var(--pri); font-weight: 700; }
.m-stats .s span { font-size: 12px; color: var(--ink-3); }

/* ===================== 底部 Tab bar ===================== */
.m-tabbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100%; max-width: 640px;
  height: var(--tab-h);
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 80;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.m-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-3); font-size: 11px; }
.m-tabbar a .ic { display: flex; align-items: center; justify-content: center; }
.m-tabbar a .ic svg { width: 22px; height: 22px; display: block; }
.m-tabbar a.on { color: var(--pri); }

/* ===================== 底部留资条 ===================== */
.m-leadbar {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 640px;
  height: 62px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  z-index: 79;
  box-shadow: 0 -2px 10px rgba(16, 24, 40, .06);
}
.m-leadbar .lb-txt { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.m-leadbar .lb-txt b { display: block; font-size: 15px; color: var(--pri); }
.m-leadbar .lb-btn {
  flex: none;
  height: 40px; padding: 0 18px; border: 0; border-radius: 20px;
  background: #ff7a2e; background: linear-gradient(135deg, #ff7a2e, var(--pri)); color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: 0 5px 12px rgba(255, 84, 0, .3);
}
.m-leadbar .lb-tel {
  flex: none; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 0 14px; border: 1px solid #008fd7; border-radius: 20px;
  color: #008fd7; color: var(--blue); font-size: 14px; font-weight: 600; text-decoration: none; background: #fff;
}
.m-leadbar .lb-tel:active { background: #eaf6fd; }
.m-leadbar .lb-tel .ic { display: inline-block; font-size: 15px; line-height: 1; }

/* ===================== 悬浮工具 ===================== */
.m-float {
  position: fixed;
  right: 8px;
  bottom: calc(var(--tab-h) + 104px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.m-float a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 10px rgba(16, 24, 40, .16);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 10px; line-height: 1.1;
}
.m-float a .ic { font-size: 15px; }
.m-float a.primary { background: var(--pri); color: #fff; }
.m-float a.blue { background: var(--blue); color: #fff; }

/* 悬浮咨询胶囊（图4：免费咨询 + 电话咨询，固定右下角常驻） */
.m-consult { position: fixed; left: 0; right: 0; bottom: calc(var(--tab-h, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 84; display: flex; flex-direction: row; }
.m-consult a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 0; color: #fff; font-size: 15px; font-weight: 700; box-shadow: none; }
.m-consult a + a { border-left: 1px solid rgba(255,255,255,.28); }
.m-consult a .ic { display: flex; }
.m-consult a .ic svg { width: 18px; height: 18px; }
.m-consult .c-free { background: linear-gradient(135deg, #ff7a2e, var(--pri)); }
.m-consult .c-tel { background: var(--blue); }
.m-consult a:active { transform: translateY(1px); }

/* ===================== 弹层留资 ===================== */
.m-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 200; display: none; }
.m-mask.open { display: block; }
.m-dialog {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88%; max-width: 480px; background: #fff; border-radius: 14px; z-index: 201;
  padding: 20px 16px 16px; display: none;
}
.m-dialog.open { display: block; }
.m-dialog h3 { font-size: 18px; font-weight: 700; text-align: center; }
.m-dialog .sub { font-size: 12px; color: var(--ink-3); text-align: center; margin: 6px 0 14px; }
.m-dialog .close { position: absolute; right: 10px; top: 8px; width: 30px; height: 30px; border: 0; background: transparent; font-size: 22px; color: #b3bac2; line-height: 1; }
.m-lead-ctx { background: #fff4ec; color: #ff5400; color: var(--pri); font-size: 13px; font-weight: 600; line-height: 1.45; padding: 9px 10px; border-radius: 8px; margin: 0 0 12px; word-break: break-all; }
.m-lead-ctx[hidden] { display: none; }

/* Toast */
.m-toast {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 14px;
  padding: 10px 18px; border-radius: 8px; z-index: 300; opacity: 0; pointer-events: none;
  transition: opacity .2s; max-width: 80%; text-align: center;
}
.m-toast.show { opacity: 1; }

/* ===================== 面包屑 ===================== */
.m-crumb { font-size: 12px; color: var(--ink-3); padding: 10px 12px 0; }
.m-crumb a { color: var(--ink-3); }

/* ===================== 页脚 ===================== */
.m-footer { background: #fff; margin-top: 12px; padding: 18px 14px 22px; text-align: center; color: var(--ink-3); font-size: 12px; line-height: 1.8; }
.m-footer .f-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-bottom: 10px; }
.m-footer .f-links a { color: var(--ink-2); }
.m-footer .f-tel { color: var(--pri); font-size: 16px; font-weight: 700; }

/* 登录/注册切换 */
.m-tabs { display: flex; margin-bottom: 16px; }
.m-tabs a { flex: 1; text-align: center; padding: 10px 0; font-size: 15px; color: var(--ink-3); border-bottom: 2px solid var(--line); }
.m-tabs a.on { color: var(--pri); border-bottom-color: var(--pri); font-weight: 600; }

/* 工具类 */
.mt6 { margin-top: 6px; } .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; }
.mb10 { margin-bottom: 10px; }
.tc { text-align: center; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 手机首页：双图 Banner + 8 导航图标 + 创业头条（对应手机原型首页头部样式） ===== */
/* 首页 Banner 轮播：自动切换 + 指示点 + 滑动（原型两图默认；后台 m_index_two 可配） */
.m-banner{position:relative;margin:10px;border-radius:var(--radius);overflow:hidden;background:#eee;-webkit-tap-highlight-color:transparent}
.m-banner-track{display:flex;transition:transform .45s ease}
.m-banner .mb-slide{flex:0 0 100%;min-width:0;display:block;position:relative;padding-bottom:53.33%;height:0;overflow:hidden}
.m-banner .mb-slide img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.m-banner-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:2;pointer-events:none}
.m-banner-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);transition:all .2s;pointer-events:auto}
.m-banner-dots i.on{background:#fff;width:16px;border-radius:4px}

/* 8 个导航图标 */
.m-nav8{display:flex;flex-wrap:wrap;background:#fff;margin:10px;border-radius:var(--radius);padding:12px 0;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-nav8 li{width:25%;list-style:none}
.m-nav8 a{display:flex;flex-direction:column;align-items:center;padding:6px 2px;color:var(--ink-2);text-decoration:none}
.m-nav8 .mn8-ico{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#fff4ec;border-radius:50%;color:var(--pri);transition:background .15s}
.m-nav8 .mn8-ico svg{width:22px;height:22px;display:block}
.m-nav8 em{font-style:normal;margin-top:6px;font-size:12px;line-height:1.2}
.m-nav8 a:active .mn8-ico{background:var(--pri)}
.m-nav8 a:active .mn8-ico svg{color:#fff}

/* 创业头条：标签 + 横向无缝滚动（美食热点 cat=5） */
.m-toutiao{display:flex;align-items:center;background:#fff;margin:10px;border-radius:var(--radius);padding:0 10px;height:42px;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-toutiao .mt-label{flex:0 0 auto;background:var(--pri);color:#fff;font-size:13px;font-weight:700;padding:4px 10px;border-radius:4px;margin-right:10px}
.m-toutiao .mt-roll{flex:1 1 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.m-toutiao .mt-list{display:flex;white-space:nowrap;width:max-content;animation:mt-scroll 30s linear infinite}
.m-toutiao:active .mt-list{animation-play-state:paused}
.m-toutiao .mt-list li{margin-right:34px;list-style:none}
.m-toutiao .mt-list a{color:var(--ink-2);font-size:13px;text-decoration:none;display:inline-flex;align-items:center}
.m-toutiao .mt-list a:active{color:var(--pri)}
.m-toutiao .mt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pri);margin-right:6px;flex:0 0 auto}
.m-toutiao .mt-more{flex:0 0 auto;color:var(--pri);font-size:12px;text-decoration:none;margin-left:8px}
@keyframes mt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 精选项目：9 图后台可配，横向 3 张一组，左右箭头翻页（scroll-snap） */
.m-feat-btns{margin-left:auto;display:flex;gap:6px}
.m-feat-btns button{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:50%;color:var(--ink-2);font-size:18px;line-height:1;flex:none;display:flex;align-items:center;justify-content:center}
.m-feat-btns button:active{background:var(--pri);color:#fff;border-color:var(--pri)}
.m-feature-scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:none;margin-top:2px}
.m-feature-scroll::-webkit-scrollbar{display:none}
.m-feature-grid{display:flex;flex-wrap:nowrap;gap:8px}
.mf-cell{position:relative;flex:0 0 calc((100% - 16px) / 3);scroll-snap-align:start;border-radius:8px;overflow:hidden;background:#eef1f5;aspect-ratio:1 / 1}
.mf-cell img{width:100%;height:100%;object-fit:cover;display:block}
.mf-cell .mf-t{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;font-size:12px;line-height:1.3;padding:14px 6px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 培训项目 / 餐饮加盟 顶部搜索（红放大镜） */
.m-ht-search{flex:none;width:34px;height:34px;margin-left:auto;border:0;background:transparent;color:var(--pri);display:flex;align-items:center;justify-content:center;cursor:pointer}
.m-ht-search svg{width:20px;height:20px}
.m-ht-search-row{display:none;padding:8px 10px;background:#fff;border-top:1px solid var(--line)}
.m-ht-search-row.on{display:block}
.m-ht-search-form{display:flex;gap:8px}
.m-ht-search-form input{flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:17px;padding:0 14px;font-size:14px;outline:0;color:var(--ink)}
.m-ht-search-form .m-ht-search-go{border:0;background:var(--pri);color:#fff;border-radius:17px;padding:0 16px;font-size:14px;flex:none}

/* 餐饮加盟品牌卡片（图1：封面 + 名称 + 介绍 + 门店/行业 + 查看更多/立即咨询） */
.m-brand-cards{display:flex;flex-direction:column;gap:10px}
.m-brand-card{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
.m-brand-card .mbc-cover{width:92px;height:92px;flex:none;border-radius:8px;overflow:hidden;background:#eef1f5}
.m-brand-card .mbc-cover img{width:100%;height:100%;object-fit:cover}
.m-brand-card .mbc-bd{flex:1;min-width:0;display:flex;flex-direction:column}
.m-brand-card .mbc-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-brand-card .mbc-intro{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-brand-card .mbc-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:6px}
.m-brand-card .mbc-meta span{background:#f6f7f9;border-radius:4px;padding:2px 7px}
.m-brand-card .mbc-btns{display:flex;gap:8px;margin-top:auto;padding-top:8px}
.m-brand-card .mbc-more{flex:1;text-align:center;border:1px solid var(--pri);color:var(--pri);border-radius:15px;font-size:13px;padding:6px 0}
.m-brand-card .mbc-more:active{background:#fff4ec}
.m-brand-card .mbc-consult{flex:1;border:0;background:var(--pri);color:#fff;border-radius:15px;font-size:13px;padding:6px 0}
.m-brand-card .mbc-consult:active{background:var(--pri-dark)}
.m-sec-morebtn{display:block;text-align:center;margin-top:12px;color:var(--ink-2);font-size:13px;background:#f6f7f9;border-radius:18px;padding:9px 0}

/* 首页菜谱推荐（图2：分类 Tab + 三列两行 6 卡 + 点击学习） */
.m-rc-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:10px}
.m-rc-tabs::-webkit-scrollbar{display:none}
.m-rc-tab{flex:0 0 auto;border:0;background:transparent;padding:7px 8px;font-size:13px;color:var(--ink-2);position:relative;white-space:nowrap;cursor:pointer}
.m-rc-tab.on{color:var(--pri);font-weight:700}
.m-rc-tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--pri);border-radius:2px}
.m-rc-panel{display:none}
.m-rc-panel.on{display:block}
.m-cards3 .m-card3{position:relative}
.m-card3-learn{display:block;text-align:center;margin:0 6px 8px;background:var(--pri);color:#fff;font-size:12px;border-radius:14px;padding:4px 0}
.m-card3-learn:active{background:var(--pri-dark)}

/* 首页餐饮新闻（图3：分类 Tab + 左文右图 3 条 + 查看更多胶囊） */
.m-nh-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:10px}
.m-nh-tabs::-webkit-scrollbar{display:none}
.m-nh-tab{flex:0 0 auto;border:0;background:transparent;padding:8px 9px;font-size:14px;color:var(--ink-2);position:relative;white-space:nowrap;cursor:pointer}
.m-nh-tab.on{color:var(--pri);font-weight:700}
.m-nh-tab.on::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;background:var(--pri);border-radius:2px}
.m-nh-panel{display:none}
.m-nh-panel.on{display:block}
.m-nh-list{display:flex;flex-direction:column}
.m-nh-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.m-nh-item:last-child{border-bottom:0}
.m-nh-item .m-nh-bd{flex:1;min-width:0;display:flex;flex-direction:column}
.m-nh-item .t{font-size:15px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.m-nh-item .d{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-nh-item .m{font-size:12px;color:#b3bac2;margin-top:6px}
.m-nh-item .m-nh-thumb{width:104px;height:72px;flex:none;border-radius:8px;overflow:hidden;background:#eef1f5}
.m-nh-item .m-nh-thumb img{width:100%;height:100%;object-fit:cover}
.m-nh-more{display:block;text-align:center;margin-top:12px;color:#fff;background:var(--pri);font-size:13px;border-radius:18px;padding:9px 0}
.m-nh-more:active{background:var(--pri-dark)}

/* 培训项目 / 餐饮加盟 切换标签 */
.m-home-tabs{margin:10px}
.m-ht-head{display:flex;background:#fff;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-ht-tab{flex:1;border:0;background:#f6f7f9;color:var(--ink-2);font-size:16px;font-weight:700;padding:13px 0;position:relative;cursor:pointer}
.m-ht-tab.on{background:var(--pri);color:#fff}
.m-ht-panel{display:none;background:#fff;border-radius:0 0 var(--radius) var(--radius);padding:10px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-ht-panel.on{display:block}
.m-ht-cat{margin:0 0 10px;padding:12px;box-shadow:none;border:1px solid var(--line)}
.m-ht-cat:last-child{margin-bottom:0}
.m-subs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.m-subs a{font-size:12px;color:var(--ink-2);background:#f3f5f7;border-radius:14px;padding:4px 11px;white-space:nowrap}
.m-subs a:active{background:var(--pri);color:#fff}
.m-tcards{display:flex;flex-wrap:wrap;gap:8px}
.m-tcard{width:calc((100% - 16px) / 3);display:flex;flex-direction:column;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.m-tcard-link{display:block;color:inherit;text-decoration:none}
.m-tcard-link img{width:100%;height:84px;object-fit:cover;display:block}
.m-tcard-link .m{display:block;font-size:12px;font-weight:700;color:#ff5400;color:var(--pri);padding:5px 6px 3px}
.m-tcard-foot{display:flex;align-items:center;gap:6px;padding:2px 6px 8px}
.m-tcard-foot .ft-l{flex:1;min-width:0}
.m-tcard-foot .nm{display:block;font-size:12px;line-height:1.3;color:#1f2329;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-tcard-foot .en{display:block;font-size:11px;color:#8a939c;color:var(--ink-3);margin-top:2px}
.m-tcard-btn{flex:none;align-self:center;width:44px;border:1px solid #e6e6e6;background:#fff;color:#e4393c;font-size:12px;line-height:1.2;padding:5px 0;border-radius:5px;font-weight:600}
.m-tcard-btn:active{background:#fff4f4;border-color:#e4393c}

/* 首页底部通栏广告位（后台 Banner 位置 m_home_bottom 可配，缺图用渐变兜底） */
.m-home-bottom{display:block;margin:10px;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-home-bottom img{width:100%;height:auto;display:block}
.m-home-bottom-def{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px;padding:0 16px;min-height:58px;border-radius:var(--radius);background:linear-gradient(90deg,#d6246e,#7b2ff7);color:#fff;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.m-home-bottom-def .t{font-size:15px;font-weight:700;line-height:1.3}
.m-home-bottom-def .t b{font-weight:800}
.m-home-bottom-def .go{flex:none;background:#ffd400;color:#222;font-size:14px;font-weight:700;padding:7px 18px;border-radius:20px}
.m-fcat-list{display:flex;flex-direction:column}
.m-fcat-row{display:flex;align-items:center;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px}
.m-fcat-row:last-child{border-bottom:0}
.m-fcat-row .nm{flex:1;font-weight:600}
.m-fcat-row .ct{color:var(--ink-3);font-size:12px;margin-right:8px}
.m-fcat-row .ar{color:var(--ink-3);font-size:16px}
.m-fcat-row:active{color:var(--pri)}

/* 新闻页：热点新闻 / 最新发布 + 4 类别标签切换 */
.m-news-cats{display:flex;overflow-x:auto;scrollbar-width:none;gap:0;background:#fff;margin:10px 10px 0;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-news-cats::-webkit-scrollbar{display:none}
.m-nc-tab{flex:0 0 auto;border:0;background:transparent;padding:13px 14px;font-size:15px;color:var(--ink-2);position:relative;white-space:nowrap;cursor:pointer}
.m-nc-tab.on{color:var(--pri);font-weight:700}
.m-nc-tab.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--pri);border-radius:2px}
.m-nc-panel{display:none;background:#fff;border-radius:0 0 var(--radius) var(--radius);padding:10px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.m-nc-panel.on{display:block}

/* 需求八-4：未认领机构「电话报名」按钮 + 已认证/平台统一咨询标签 */
.m-phone-enroll{display:inline-block;padding:5px 16px;background:linear-gradient(135deg,#ff7a2e,var(--pri));color:#fff;border-radius:18px;font-weight:700;font-size:14px;line-height:1.4;box-shadow:0 2px 6px rgba(255,84,0,.28)}
.m-phone-enroll:active{transform:translateY(1px)}
.m-unified-phone{color:#008fd7;font-weight:700;font-size:15px}
.m-claimed-tag{display:inline-block;margin-left:6px;padding:1px 7px;font-size:11px;line-height:1.6;color:#1a9e57;border:1px solid #1a9e57;border-radius:9px;vertical-align:middle;font-style:normal}
.m-claimed-tag.m-unified-tag{color:#e8930c;border-color:#e8930c}