/* ==========================================================================
   澎启｜AI米家全屋智能规划平台 —— 用户端（C 端）样式
   手机优先；桌面端居中成 520px 单列，模拟手机阅读宽度。
   只服务 mall.html / 各类 C 端弹层，不参与员工端与后台。

   【配色铁律（第 106 项）】这里**只允许出现 var(--mm-*) 颜色**，一个硬编码色值都不留。
   原因：后台可以换配色（mall_settings key='theme'），JS 会用 mallApplyTheme() 覆盖
   --mm-brand / --mm-brand-d / --mm-brand-s / --mm-price / --mm-grad… 一整套变量。
   只要这里还留着写死的 #0e7490，换色就会「换一半」——最典型的就是主色变了、
   焦点环和标签底色还是旧的青色。
   语义色（成功绿 / 危险红 / 金）不随主色走，但同样走变量，便于统一调。
   ========================================================================== */
:root {
  /* —— 中性色 —— */
  --mm-bg:        #f4f5f7;
  --mm-card:      #ffffff;
  --mm-soft:      #f6f7f9;
  --mm-line:      #e9ecef;
  --mm-ink:       #1c1f23;
  --mm-ink2:      #5f6670;
  --mm-ink3:      #9aa1ab;

  /* —— 品牌色：默认小米橙。JS 启动后会用后台配置覆盖以下全部 —— */
  --mm-brand:     #ff6900;
  --mm-brand-d:   #b84b00;
  --mm-brand-dd:  #8f3a00;
  --mm-brand-l:   #ff8f33;
  --mm-brand-s:   #fff1e6;
  --mm-brand-s2:  #ffe4cc;
  --mm-brand-line:#ffd0ad;
  --mm-brand-rgb: 255,105,0;
  --mm-on-brand:  #ffffff;      /* 主色块上的文字色（浅色主色会被算成深色） */
  --mm-on-soft:   rgba(255,255,255,.16);
  --mm-on-soft2:  rgba(255,255,255,.26);
  --mm-on-line:   rgba(255,255,255,.32);
  --mm-accent:    #ff8f1f;
  --mm-accent-s:  #fff4e8;
  --mm-price:     #ff4d1a;      /* 价格 / 让利 / 促销 */
  --mm-price-s:   #ffece6;
  --mm-price-line:#ffc9b8;
  --mm-grad:        linear-gradient(90deg, #ff6900 0%, #d95800 100%);
  --mm-grad-soft:   linear-gradient(160deg, #fff3ea 0%, #fff9f5 55%, #fff 100%);
  --mm-grad-card:   linear-gradient(135deg, #fff1e6 0%, #fff8f2 100%);

  /* —— 语义色（不随主色变） —— */
  --mm-green:      #12855a;
  --mm-green-s:    #ecf7f1;
  --mm-green-line: #cbe9d9;
  --mm-danger:     #c0392b;
  --mm-danger-s:   #fdeceb;
  --mm-danger-line:#f7cdca;
  --mm-gold:       #b45309;
  --mm-gold-s:     #fff7ed;
  --mm-gold-line:  #fce0bd;

  --mm-radius:    14px;
  --mm-radius-s:  11px;
  --mm-shadow:    0 2px 12px rgba(16,32,48,.07);
  --mm-shadow-2:  0 8px 26px rgba(16,32,48,.13);
  --mm-maxw:      520px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--mm-bg); color: var(--mm-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--mm-brand); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 600; }

/* ===== 布局 ===== */
/* 第 109 项：.mm-top 只管「背景 + 吸顶 + 页面级宽度」，行内布局交给 .mm-top-in。
   这样 PC 版只需把 .mm-top 的 max-width 放开成通栏，手机端一个像素都不动。 */
.mm-top {
  position: sticky; top: 0; z-index: 30;
  max-width: var(--mm-maxw); margin: 0 auto;
  background: var(--mm-brand); color: var(--mm-on-brand);
}
.mm-top-in {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
/* PC 专属：手机端不占位、不可点 */
.mm-topnav { display: none; }
.mm-topsearch { display: none; }
.mm-brand { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.mm-brand-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: var(--mm-on-soft); border: 1px solid var(--mm-on-line);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.mm-brand-text { min-width: 0; display: flex; flex-direction: column; }
.mm-brand-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-brand-text span { font-size: 11.5px; opacity: .82; letter-spacing: .04em; }
.mm-top-btn {
  flex: none; font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  background: var(--mm-on-soft); border: 1px solid var(--mm-on-line); color: var(--mm-on-brand);
}
/* 第 122 项：已登录时右上角变成「我的名字」——反白成白底主色字，比访客态更显眼。
   **必须限宽 + 省略号**：顶栏是 flex 行，名字一长（有人填公司名当称呼）会把 logo 挤变形。 */
.mm-top-btn.mm-top-user {
  max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--mm-on-brand); color: var(--mm-brand); font-weight: 600;
}
.mm-view {
  max-width: var(--mm-maxw); margin: 0 auto; background: var(--mm-bg);
  padding: 12px 12px 84px; min-height: 60vh;
}
.mm-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: var(--mm-maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--mm-line);
  padding: 5px 0 calc(5px + env(safe-area-inset-bottom));
}
.mm-tabs button {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 11.5px; color: var(--mm-ink3); padding: 4px 0;
}
.mm-tabs button i { font-style: normal; font-size: 17px; line-height: 1.1; }
.mm-tabs button.on { color: var(--mm-brand); font-weight: 600; }
@media (min-width: 560px) {
  .mm-top, .mm-tabs { box-shadow: var(--mm-shadow); }
  .mm-view { box-shadow: 0 0 0 1px var(--mm-line); }
}

/* ===== 通用块 ===== */
.mm-sec { margin: 14px 0 0; }
.mm-sec-hd { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 8px; }
.mm-sec-hd h3 { font-size: 15px; }
.mm-sec-hd .more { margin-left: auto; font-size: 12.5px; color: var(--mm-ink3); }
.mm-card { background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 14px; }
.mm-card + .mm-card { margin-top: 10px; }
.mm-muted { color: var(--mm-ink2); font-size: 13px; }
.mm-dim { color: var(--mm-ink3); font-size: 12.5px; }
.mm-center { text-align: center; }
.mm-empty { text-align: center; padding: 44px 20px; color: var(--mm-ink3); font-size: 13px; }
.mm-empty .big { font-size: 30px; opacity: .5; margin-bottom: 8px; }
.mm-loading { text-align: center; padding: 36px; color: var(--mm-ink3); font-size: 13px; }
.mm-row { display: flex; align-items: center; gap: 8px; }
.mm-row.wrap { flex-wrap: wrap; }
.mm-spacer { flex: 1; }
.mm-hr { height: 1px; background: var(--mm-line); margin: 12px 0; border: 0; }

/* ===== 按钮 ===== */
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--mm-radius-s); font-size: 14px; font-weight: 600;
  background: var(--mm-brand); color: var(--mm-on-brand);
}
.mm-btn:disabled { opacity: .55; }
.mm-btn.ghost { background: #fff; color: var(--mm-brand); border: 1px solid var(--mm-brand); }
.mm-btn.plain { background: var(--mm-soft); color: var(--mm-ink2); border: 1px solid var(--mm-line); font-weight: 500; }
.mm-btn.gold { background: var(--mm-gold); color: #fff; }
.mm-btn.sm { padding: 7px 12px; font-size: 13px; }
.mm-btn.block { display: flex; width: 100%; }
.mm-btn-row { display: flex; gap: 10px; margin-top: 12px; }
.mm-btn-row .mm-btn { flex: 1; }

/* ===== 首页 ===== */
.mm-hero {
  background: var(--mm-grad); color: var(--mm-on-brand); border-radius: var(--mm-radius);
  padding: 18px 16px 16px; margin: 0 0 12px;
}
/* 第 109 项：PC 上 hero 要左右两栏，所以左侧文案有独立容器（手机端是普通块，零影响） */
.mm-hero-l { min-width: 0; }
/* PC 专属的 hero 行动按钮：手机端 hero 下面紧接金刚区与 9.9 推广位，
   再塞两个大按钮会把首屏挤没 —— 手机端的行动按钮仍在页面底部那张卡里 */
.mm-hero-cta { display: none; }
.mm-hero h1 { font-size: 21px; letter-spacing: .3px; }
.mm-hero .sl { display: inline-block; margin: 8px 0 10px; padding: 3px 11px; border-radius: 999px;
  background: var(--mm-on-soft); border: 1px solid var(--mm-on-line); font-size: 12.5px; letter-spacing: .12em; }
.mm-hero p { margin: 0; font-size: 13px; line-height: 1.8; opacity: .9; }
.mm-vals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mm-vals span { font-size: 12px; padding: 3px 10px; border-radius: 7px; background: var(--mm-on-soft); }
.mm-entries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mm-entry {
  background: #fff; border: 1px solid var(--mm-line); border-radius: 12px;
  padding: 13px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.mm-entry i { font-style: normal; font-size: 20px; color: var(--mm-brand); }
.mm-entry span { font-size: 12px; color: var(--mm-ink2); font-weight: 500; }
.mm-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-trust div { background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-s); padding: 11px 6px; text-align: center; }
.mm-trust b { display: block; font-size: 17px; color: var(--mm-brand); }
.mm-trust span { font-size: 11.5px; color: var(--mm-ink3); }

/* ==========================================================================
   首页 · 小米商城式布局（第 106 项）
   骨架：搜索条 → 金刚区 → 促销位 → 套餐楼层 → 一对一定制 → 好物 → 案例 → 指南
   ========================================================================== */
.mm-searchbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.mm-searchbar .box {
  flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
  background: #fff; border: 1px solid var(--mm-line); border-radius: 999px; padding: 8px 14px;
}
.mm-searchbar .box i { font-style: normal; color: var(--mm-ink3); font-size: 14px; flex: none; }
.mm-searchbar .box input { flex: 1; min-width: 0; border: 0; outline: none; background: none; }
.mm-searchbar .go {
  flex: none; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--mm-brand); color: var(--mm-on-brand);
}

/* 楼层标题：左侧一根主色短竖条 + 标题，比纯文字更像商城 */
.mm-floor-hd { display: flex; align-items: center; gap: 8px; margin: 18px 2px 9px; }
.mm-floor-hd::before { content: ''; width: 3px; height: 15px; border-radius: 99px; background: var(--mm-brand); flex: none; }
.mm-floor-hd h3 { font-size: 15.5px; }
.mm-floor-hd .sub { font-size: 12px; color: var(--mm-ink3); }
.mm-floor-hd .more { margin-left: auto; font-size: 12.5px; color: var(--mm-ink3); }

/* 金刚区（快捷入口，可放 4 / 5 个） */
.mm-kingkong { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: #fff;
  border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 12px 6px; }
.mm-kk { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; }
.mm-kk i {
  width: 42px; height: 42px; border-radius: 14px; font-style: normal; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--mm-brand-s); color: var(--mm-brand);
}
.mm-kk span { font-size: 11.5px; color: var(--mm-ink2); font-weight: 500; }
.mm-kk.a2 i { background: var(--mm-accent-s); color: var(--mm-accent); }
.mm-kk.a3 i { background: var(--mm-green-s); color: var(--mm-green); }
.mm-kk.a4 i { background: var(--mm-gold-s); color: var(--mm-gold); }

/* 通用横滑容器（套餐 / 好物 / 案例都用它，滚动条隐藏） */
.mm-hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.mm-hscroll::-webkit-scrollbar { display: none; }

/* 套餐横滑卡 */
.mm-pkg-card {
  flex: none; width: 208px; background: #fff; border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius); overflow: hidden; display: flex; flex-direction: column;
  text-align: left;
}
.mm-pkg-card.on { border-color: var(--mm-brand); box-shadow: 0 0 0 2px var(--mm-brand-s); }
.mm-pkg-hd { padding: 12px 13px 10px; background: var(--mm-grad-card); position: relative; }
.mm-pkg-hd .rec {
  position: absolute; top: 0; right: 0; font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--mm-price); padding: 2px 9px; border-radius: 0 var(--mm-radius) 0 10px;
}
.mm-pkg-hd b { display: block; font-size: 15px; }
.mm-pkg-hd .tg { display: block; font-size: 11.5px; color: var(--mm-ink2); margin-top: 3px; line-height: 1.5;
  height: 34px; overflow: hidden; }
.mm-pkg-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.mm-pkg-badges span { font-size: 10px; padding: 1px 6px; border-radius: 5px;
  background: var(--mm-brand-s); color: var(--mm-brand); border: 1px solid var(--mm-brand-line); }
.mm-pkg-bd { padding: 11px 13px 13px; display: flex; flex-direction: column; flex: 1; }
.mm-pkg-price { display: flex; align-items: baseline; gap: 6px; }
.mm-pkg-price em { font-style: normal; font-size: 21px; font-weight: 700; color: var(--mm-price); line-height: 1.1; }
.mm-pkg-price s { font-size: 11.5px; color: var(--mm-ink3); }
.mm-pkg-save { font-size: 11.5px; color: var(--mm-price); margin-top: 4px; }
.mm-pkg-save b { font-weight: 700; }
.mm-pkg-scope { font-size: 11.5px; color: var(--mm-ink3); margin-top: 3px; }
.mm-pkg-hl { list-style: none; margin: 9px 0 0; padding: 0; }
.mm-pkg-hl li { position: relative; font-size: 12px; color: var(--mm-ink2); line-height: 1.6;
  padding: 2px 0 2px 13px; }
.mm-pkg-hl li::before { content: '·'; position: absolute; left: 2px; font-weight: 700; color: var(--mm-brand); }
.mm-pkg-go { margin-top: auto; padding-top: 10px; }
.mm-pkg-go .mm-btn { width: 100%; padding: 9px 12px; font-size: 13.5px; }

/* 套餐竖排卡（完整列表 / 后台预览） */
.mm-pkg-grid { display: flex; flex-direction: column; gap: 10px; }
.mm-pkg-grid .mm-pkg-card { width: auto; }

/* 一对一定制设计卡（横跨整行，比套餐更"重"） */
.mm-custom-card {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: var(--mm-grad-soft); border: 1px solid var(--mm-brand-line);
  border-radius: var(--mm-radius); padding: 14px 15px;
}
.mm-custom-card i {
  flex: none; width: 46px; height: 46px; border-radius: 15px; font-style: normal; font-size: 22px;
  background: var(--mm-brand); color: var(--mm-on-brand);
  display: flex; align-items: center; justify-content: center;
}
.mm-custom-card .bd { flex: 1; min-width: 0; }
.mm-custom-card .bd b { display: block; font-size: 15px; }
.mm-custom-card .bd span { display: block; font-size: 12px; color: var(--mm-ink2); margin-top: 3px; line-height: 1.55; }
.mm-custom-card .go { flex: none; font-size: 12.5px; font-weight: 600; color: var(--mm-brand); white-space: nowrap; }

/* 套餐详情（弹层里的清单） */
.mm-pkg-detail .mm-pkg-scope-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm-pkg-detail .mm-pkg-scope-row span { font-size: 11.5px; padding: 2px 9px; border-radius: 6px;
  background: var(--mm-soft); border: 1px solid var(--mm-line); color: var(--mm-ink2); }

/* ==========================================================================
   配置单可编辑（第 106 项）：行内改数量 / 删行 / 加设备 / 恢复套餐清单
   ========================================================================== */
.mm-qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--mm-line);
  border-radius: 9px; overflow: hidden; background: #fff; }
.mm-qty button { width: 26px; height: 26px; font-size: 15px; line-height: 1; color: var(--mm-brand);
  display: flex; align-items: center; justify-content: center; }
.mm-qty button:disabled { color: var(--mm-ink3); opacity: .5; }
.mm-qty input { width: 40px; height: 26px; border: 0; border-left: 1px solid var(--mm-line);
  border-right: 1px solid var(--mm-line); text-align: center; outline: none; background: #fff; }
.mm-qty input::-webkit-outer-spin-button, .mm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-edit-del { font-size: 12px; color: var(--mm-danger); padding: 4px 6px; border-radius: 7px; }
.mm-edit-del:hover { background: var(--mm-danger-s); }
.mm-edit-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mm-edit-tools .mm-btn { flex: 1; min-width: 132px; }
.mm-tj-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm-tj {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--mm-soft);
  border: 1px solid var(--mm-line); color: var(--mm-ink2);
}
.mm-tj:hover { border-color: var(--mm-brand); color: var(--mm-brand); background: var(--mm-brand-s); }
/* 第 114 项：原先是行内 style="margin-bottom:12px"（为了让 PC 版能在外层 grid 里
   去掉它才搬到 CSS；手机端间距一字不变，仍是 12px） */
.mm-summary { background: var(--mm-grad-soft); border: 1px solid var(--mm-brand-line); margin-bottom: 12px; }
.mm-summary .mm-price-big { color: var(--mm-price); }

/* ===== 商品 ===== */
.mm-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 8px; }
.mm-filters::-webkit-scrollbar { display: none; }
.mm-chip {
  flex: none; font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--mm-line); color: var(--mm-ink2); white-space: nowrap;
}
.mm-chip.on { background: var(--mm-brand-s); border-color: var(--mm-brand-line); color: var(--mm-brand); font-weight: 600; }
.mm-search { display: flex; gap: 8px; margin-bottom: 8px; }
.mm-search input { flex: 1; }
.mm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-pcard { background: #fff; border: 1px solid var(--mm-line); border-radius: 12px; overflow: hidden; }
.mm-pcard .ph { height: 122px; background: var(--mm-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mm-pcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.mm-pcard .ph .noimg { font-size: 22px; color: var(--mm-ink3); }
.mm-pcard .bd { padding: 9px 10px 11px; }
.mm-pcard .nm { font-size: 13px; font-weight: 600; line-height: 1.4; height: 36px; overflow: hidden; }
.mm-pcard .pr { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.mm-pcard .pr b { color: var(--mm-price); font-size: 16px; }
.mm-pcard .pr s { color: var(--mm-ink3); font-size: 11.5px; }
.mm-pcard .tg { font-size: 11px; color: var(--mm-ink3); margin-top: 3px; }
.mm-tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 5px; background: var(--mm-soft); color: var(--mm-ink2); border: 1px solid var(--mm-line); }
.mm-tag.hot { background: var(--mm-danger-s); color: var(--mm-danger); border-color: var(--mm-danger-line); }
.mm-tag.vip { background: var(--mm-gold-s); color: var(--mm-gold); border-color: var(--mm-gold-line); }
.mm-tag.ok { background: var(--mm-green-s); color: var(--mm-green); border-color: var(--mm-green-line); }
.mm-price-big { color: var(--mm-price); font-size: 22px; font-weight: 700; }

/* ===== 案例 ===== */
.mm-ccard { background: #fff; border: 1px solid var(--mm-line); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.mm-ccard .ph { height: 165px; background: var(--mm-soft); overflow: hidden; }
.mm-ccard .ph img { width: 100%; height: 100%; object-fit: cover; }
.mm-ccard .bd { padding: 11px 12px 13px; }
.mm-ccard h4 { font-size: 14.5px; margin-bottom: 5px; }
.mm-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 12.5px; color: var(--mm-ink2); }

/* ===== 我的 ===== */
.mm-vip {
  border-radius: var(--mm-radius); padding: 16px; color: #fff;
  background: linear-gradient(135deg, #2b3a4a, #16212b);
}
.mm-vip.lv1 { background: var(--mm-grad); }
.mm-vip.lv2 { background: linear-gradient(135deg, #b45309, #8a4a08); }
.mm-vip.lv3 { background: linear-gradient(135deg, #7c2d12, #4a1a0a); }
.mm-vip .lv { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.mm-vip .exp { font-size: 12.5px; opacity: .85; margin-top: 5px; }
.mm-vip .pk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.mm-vip .pk span { font-size: 11.5px; padding: 2px 9px; border-radius: 6px; background: rgba(255,255,255,.16); }
.mm-me-hd { display: flex; align-items: center; gap: 12px; }
.mm-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--mm-brand-s); color: var(--mm-brand);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex: none; }
/* 第 116 项：我的专属服务顾问卡片（后台「指派顾问」后前台才出现） */
.mm-advisor .mm-adv-hd { display: flex; align-items: center; gap: 8px; }
.mm-advisor .mm-adv-bd { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mm-adv-av {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--mm-brand-s); color: var(--mm-brand);
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
}
.mm-advisor .mm-adv-bd b { font-size: 15px; }
.mm-advisor .mm-adv-tip { margin: 12px 0 0; line-height: 1.8; }
/* 咨询弹层里的一行顾问提示（第 116 项） */
.mm-adv-inline {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
  background: var(--mm-brand-s); color: var(--mm-ink2); font-size: 13px; line-height: 1.6;
}
.mm-adv-inline b { color: var(--mm-ink); }
.mm-adv-inline a { color: var(--mm-brand); }
.mm-menu { background: #fff; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); overflow: hidden; }
.mm-menu button, .mm-menu a {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 13px 14px; border-bottom: 1px solid var(--mm-line); background: none; color: inherit;
  font-size: 14px; text-decoration: none;
}
.mm-menu > *:last-child { border-bottom: 0; }
.mm-menu .ico { width: 22px; text-align: center; font-style: normal; color: var(--mm-brand); }
.mm-menu .arw { margin-left: auto; color: var(--mm-ink3); font-size: 12px; }

/* ===== 表单 ===== */
.mm-field { margin-bottom: 11px; }
.mm-field > label { display: block; font-size: 12.5px; color: var(--mm-ink2); margin-bottom: 5px; font-weight: 500; }
.mm-field .hint { font-size: 11.5px; color: var(--mm-ink3); margin-top: 4px; }
.mm-inp {
  width: 100%; padding: 10px 12px; border: 1px solid var(--mm-line); border-radius: 10px;
  background: #fff; outline: none;
}
/* 焦点环颜色跟着主色走：写死 rgba(14,116,144,…) 会让换色后的输入框「露馅」 */
.mm-inp:focus { border-color: var(--mm-brand); box-shadow: 0 0 0 3px rgba(var(--mm-brand-rgb), .12); }
/* 第 117 项：只读展示块（长得像输入框但不能敲，用于展示资料档带过来的地址） */
.mm-inp.mm-static { background: var(--mm-soft, #f7f7f5); color: var(--mm-ink); cursor: default; }
/* 第 117 项：第三步清单视图切换 tab；第 121 项改成「配置单 / 预估」两个 */
.mm-doctabs { display: flex; gap: 8px; margin: 0 0 10px; }
.mm-doctab { flex: 1; padding: 9px 6px; border: 1px solid var(--mm-line); border-radius: 10px;
  background: #fff; color: var(--mm-ink2); font-size: 13px; font-weight: 500; cursor: pointer; }
.mm-doctab.on { background: var(--mm-brand); border-color: var(--mm-brand); color: var(--mm-on-brand, #fff); font-weight: 600; }
/* 正式文档视图（配置单 / 预估）：白纸感、只读版式，照员工系统那两张单子 */
.mm-doc { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: #fff; padding: 14px; }
.mm-doc-hd { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--mm-ink); }
.mm-doc-hd b { font-size: 15px; }
.mm-doc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 2px; font-size: 12px; color: var(--mm-ink2); }
/* 单据抬头信息格（客户 / 服务号码 / 项目地址 / 日期）—— 照员工端单子的两列式 */
.mm-doc-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 10px 0 4px; }
.mm-doc-info > div { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px;
  border-bottom: 1px dashed var(--mm-line); padding: 5px 0; min-width: 0; }
.mm-doc-info > div.wide { grid-column: 1 / -1; }
.mm-doc-info span { flex: none; color: var(--mm-ink3); }
.mm-doc-info b { font-weight: 600; color: var(--mm-ink); overflow-wrap: anywhere; }
/* .mm-tbl 基类给所有格子上了 nowrap（商城那种窄表用）；**单据表必须能折行** ——
   配置单 12 列全 nowrap 的话 min-content 有 1134px，PC 通栏（可用 1074）会被裁掉 60px。
   表头 / 序号 / 价格列仍保持 nowrap（短，折行反而难看）。 */
.mm-tbl.mm-doc-tbl th, .mm-tbl.mm-doc-tbl td { padding: 7px 8px; font-size: 12.5px;
  white-space: normal; overflow-wrap: anywhere; }
/* 必须**双类**写：`.mm-tbl td{white-space:nowrap}` 在文件后面（第 501 行），
   同权重靠后赢，单类选择器会被它盖掉。 */
.mm-tbl.mm-doc-tbl th { white-space: nowrap; }
.mm-tbl.mm-doc-tbl .mm-td-no, .mm-tbl.mm-doc-tbl .mm-td-p, .mm-tbl.mm-doc-tbl .mm-qty { white-space: nowrap; }
.mm-doc-tbl .mm-grp td { background: var(--mm-soft); }
/* 第 121 项：十类分组的表头行 + 每类小计行（配置单）；四组分组行也复用 .mm-cat */
.mm-doc-tbl .mm-cat td { background: var(--mm-soft); font-size: 13px; }
.mm-doc-tbl .mm-cat b { font-weight: 700; }
.mm-doc-tbl .mm-cat .mm-dim { margin-left: 8px; font-weight: 400; }
.mm-doc-tbl .mm-cat-sub td { background: #fff; color: var(--mm-ink2); font-size: 12px;
  border-top: 1px dashed var(--mm-line); }
.mm-doc-tbl .mm-cat-sub td:first-child { text-align: right; }
.mm-td-no { width: 34px; text-align: center; color: var(--mm-ink3); }
.mm-td-nm { min-width: 116px; }
.mm-td-p { text-align: right; white-space: nowrap; }
.mm-td-amt { font-weight: 600; }
.mm-cfg-tbl { min-width: 820px; }
.mm-est-tbl { min-width: 640px; }
.mm-doc-stats { display: flex; gap: 8px; margin-top: 12px; }
.mm-doc-stats > div { flex: 1; border: 1px solid var(--mm-line); border-radius: 10px; padding: 9px 6px; text-align: center; }
.mm-doc-stats b { display: block; font-size: 15px; }
.mm-doc-stats .mm-dim { font-size: 11px; }
.mm-doc-total { display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding: 11px 12px; border-radius: 10px; background: var(--mm-soft); }
.mm-doc-total b { font-size: 17px; color: var(--mm-brand); }
/* 直供价合计（会员可见，不参与计价）与备注 */
.mm-doc-sub { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding: 0 12px; font-size: 12.5px; }
.mm-doc-sub b { color: var(--mm-ink); }
.mm-doc-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--mm-line);
  font-size: 11.5px; line-height: 1.9; color: var(--mm-ink2); }
/* 预估单尾部的「米家全屋智能 12 大场景功能」 */
.mm-doc-feats { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--mm-ink); }
.mm-doc-feats > b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.mm-doc-feats > div { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.8; padding: 3px 0;
  color: var(--mm-ink2); }
.mm-doc-feats em { flex: none; width: 62px; font-style: normal; font-weight: 600; color: var(--mm-ink); }
/* 第 121 项：会员中心里「自己那一档」是不可点的状态条 —— 不再是灰按钮 */
.mm-lv-own { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--mm-soft); border: 1px dashed var(--mm-line); font-size: 13px; }
.mm-lv-own b { color: var(--mm-brand); }
.mm-lv-own span { color: var(--mm-ink3); font-size: 12px; }
textarea.mm-inp { min-height: 78px; resize: vertical; }
.mm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mm-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* 第 110 项：省 / 市 / 区三级下拉。窄屏竖排一列（「（先选省份）」这类提示词较长，
   挤三列会被截断），≥560px 再横排三列 */
.mm-area3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .mm-area3 { grid-template-columns: repeat(3, 1fr); } }
.mm-reg-sec { padding-top: 4px; border-top: 1px dashed var(--mm-line); margin-top: 4px; }
.mm-code-row { display: flex; gap: 8px; }
.mm-code-row .mm-inp { flex: 1; }
.mm-code-row .mm-btn { flex: none; white-space: nowrap; }
.mm-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-pick {
  font-size: 13px; padding: 8px 13px; border-radius: 10px;
  background: #fff; border: 1px solid var(--mm-line); color: var(--mm-ink2);
}
.mm-pick.on { background: var(--mm-brand-s); border-color: var(--mm-brand); color: var(--mm-brand); font-weight: 600; }
/* 四档装修阶段：窄屏排 2×2，宽屏一行四个，避免「已入住」被挤到孤行 */
.mm-picks-4 .mm-pick { flex: 1 1 calc(50% - 4px); text-align: center; }
@media (min-width: 560px) { .mm-picks-4 .mm-pick { flex: 1 1 calc(25% - 6px); } }
.mm-msg { font-size: 12.5px; padding: 8px 11px; border-radius: 9px; margin-bottom: 10px; }
.mm-msg.err { background: var(--mm-danger-s); color: #a8332f; border: 1px solid var(--mm-danger-line); }
.mm-msg.ok { background: var(--mm-green-s); color: #0f6b47; border: 1px solid var(--mm-green-line); }

/* ===== 规划向导 ===== */
.mm-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.mm-steps div { flex: 1; height: 4px; border-radius: 99px; background: var(--mm-line); }
.mm-steps div.on { background: var(--mm-brand); }
.mm-plan-step-hd { font-size: 12.5px; color: var(--mm-ink3); margin-bottom: 4px; }
.mm-plan-step-hd b { color: var(--mm-brand); font-size: 13px; }

/* ===== 列表 / 订单 ===== */
.mm-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--mm-line); }
.mm-item:last-child { border-bottom: 0; }
.mm-item .ph { width: 58px; height: 58px; border-radius: 9px; background: var(--mm-soft); overflow: hidden; flex: none; }
.mm-item .ph img { width: 100%; height: 100%; object-fit: cover; }
.mm-item .bd { flex: 1; min-width: 0; }
.mm-item .bd .nm { font-size: 13.5px; font-weight: 600; }
.mm-item .bd .sub { font-size: 12px; color: var(--mm-ink3); margin-top: 2px; }
.mm-item .rt { text-align: right; flex: none; font-size: 13px; }
.mm-ord-hd { display: flex; align-items: center; font-size: 12.5px; color: var(--mm-ink3); }
.mm-ord-hd .st { margin-left: auto; font-weight: 600; }
.st.unpaid { color: var(--mm-price); } .st.paid { color: var(--mm-gold); }
.st.done { color: var(--mm-green); } .st.canceled { color: var(--mm-ink3); }

/* ===== 表格（明细展示用，窄屏可横滑） ===== */
.mm-tblwrap { overflow-x: auto; border: 1px solid var(--mm-line); border-radius: var(--mm-radius-s); background: #fff; }
.mm-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
.mm-tbl th, .mm-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--mm-line); text-align: left; white-space: nowrap; }
.mm-tbl th { background: var(--mm-soft); color: var(--mm-ink2); font-weight: 600; font-size: 12px; }
.mm-tbl tbody tr:last-child td { border-bottom: 0; }

/* ===== 弹层 ===== */
.mm-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.mm-mask { position: absolute; inset: 0; background: rgba(12,24,34,.45); }
.mm-sheet {
  position: relative; width: 100%; max-width: var(--mm-maxw);
  background: #fff; border-radius: 18px 18px 0 0; max-height: 88vh; overflow-y: auto;
  animation: mmUp .18s ease-out;
}
@keyframes mmUp { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.mm-sheet-hd { position: sticky; top: 0; background: #fff; display: flex; align-items: center;
  padding: 13px 15px; border-bottom: 1px solid var(--mm-line); z-index: 2; }
.mm-sheet-hd b { font-size: 15px; }
.mm-sheet-hd .x { margin-left: auto; font-size: 20px; color: var(--mm-ink3); line-height: 1; }
.mm-sheet-bd { padding: 15px; }
.mm-sheet-ft { padding: 12px 15px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mm-line);
  display: flex; gap: 10px; position: sticky; bottom: 0; background: #fff; }
.mm-sheet-ft .mm-btn { flex: 1; }
@media (max-width: 400px) { .mm-sheet-ft { flex-direction: column; } }

/* ===== 购物车条 ===== */
.mm-cartbar {
  position: fixed; left: 0; right: 0; bottom: 62px; z-index: 35;
  max-width: var(--mm-maxw); margin: 0 auto; padding: 0 12px;
}
.mm-cartbar .in {
  display: flex; align-items: center; gap: 10px; background: var(--mm-ink); color: #fff;
  border-radius: 12px; padding: 10px 13px; box-shadow: var(--mm-shadow);
}

/* ===== 轻提示 ===== */
.mm-toast {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%); z-index: 200;
  background: rgba(18,26,34,.92); color: #fff; font-size: 13.5px; padding: 10px 16px;
  border-radius: 10px; max-width: 76vw; text-align: center;
}

/* ==========================================================================
   登录 / 注册门（第 105 项）：宽屏双栏「左权益 / 右登录」，窄屏上下堆叠。
   窄屏先给权益、再给表单 —— 权益是钩子，表单是动作，顺序不能反。
   ========================================================================== */
.mm-auth {
  position: fixed; inset: 0; z-index: 100; display: flex;
  background: rgba(12,24,34,.55); overflow-y: auto; padding: 22px 14px;
}
.mm-auth-box {
  margin: auto; width: 100%; max-width: 940px; background: #fff; border-radius: 18px;
  overflow: hidden; box-shadow: 0 18px 60px rgba(8,20,30,.35);
  display: grid; grid-template-columns: minmax(0, 1fr) 392px;
}
.mm-auth-promo {
  background: var(--mm-grad-soft);
  padding: 24px 26px; border-right: 1px solid var(--mm-line);
}
.mm-auth-main { position: relative; padding: 24px 22px 22px; }
.mm-auth-x {
  position: absolute; top: 9px; right: 11px; z-index: 2;
  font-size: 22px; line-height: 1; color: var(--mm-ink3); padding: 4px 7px; border-radius: 8px;
}
.mm-auth-x:hover { background: var(--mm-soft); }
.mm-auth-brand { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; }
.mm-auth-logo {
  width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--mm-brand); color: var(--mm-on-brand);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.mm-auth-brand-t { min-width: 0; display: flex; flex-direction: column; }
.mm-auth-brand-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-auth-brand-t span { font-size: 11.5px; color: var(--mm-ink3); letter-spacing: .04em; }
/* 第 115 项：注册门的「注册 / 登录」切换。
   做成下划线式 tab 而不是两个按钮块 —— 否则它会和下面那个大 CTA 抢视线，
   一屏里出现三个「按钮」，用户不知道该点哪个才安全。 */
.mm-auth-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--mm-line); margin: 0 0 10px; }
.mm-auth-tab {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0 2px 9px;
  font-size: 15px; font-family: inherit; font-weight: 500; color: var(--mm-ink3);
  cursor: pointer; position: relative;
}
.mm-auth-tab.on { color: var(--mm-ink); font-weight: 700; }
.mm-auth-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--mm-brand); border-radius: 2px;
}
/* 「怎么称呼你」这块只在注册 tab 出现：切到登录时由 JS 切 display，不重建 DOM */
.mm-reg-only { padding-top: 2px; }
.mm-auth-p { font-size: 12.5px; color: var(--mm-ink3); margin: 5px 0 14px; }
.mm-auth-cta {
  padding: 12px 16px; font-size: 14.5px;
  background: var(--mm-grad);
  box-shadow: 0 6px 16px rgba(var(--mm-brand-rgb), .26);
}

/* ===== 会员推广文案块（注册门左栏 / 权益弹层共用同一份渲染） ===== */
.mm-promo-in { min-width: 0; }
.mm-promo-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 11px; border-radius: 999px;
  background: linear-gradient(90deg, var(--mm-price), var(--mm-gold)); color: #fff;
}
.mm-promo-h { font-size: 19px; line-height: 1.45; margin: 10px 0 0; color: var(--mm-ink); }
.mm-promo-sub { font-size: 13px; color: var(--mm-ink2); margin: 7px 0 0; }
.mm-promo-list { list-style: none; margin: 14px 0 0; padding: 0; }
.mm-promo-list li { display: flex; gap: 10px; padding: 9px 0; }
.mm-promo-list li i {
  flex: none; width: 30px; height: 30px; border-radius: 9px; font-style: normal; font-size: 15px;
  background: var(--mm-brand-s); color: var(--mm-brand);
  display: flex; align-items: center; justify-content: center;
}
.mm-promo-list li div { min-width: 0; }
.mm-promo-list li b { display: block; font-size: 13.5px; line-height: 1.5; }
.mm-promo-list li span { display: block; font-size: 12px; color: var(--mm-ink3); line-height: 1.65; margin-top: 2px; }
.mm-promo-div {
  display: flex; align-items: center; gap: 10px; margin: 15px 0 3px;
  font-size: 12.5px; font-weight: 600; color: var(--mm-gold);
}
.mm-promo-div::before, .mm-promo-div::after { content: ''; flex: 1; height: 1px; background: var(--mm-line); }
.mm-promo-plus { list-style: none; margin: 7px 0 0; padding: 0; }
.mm-promo-plus li { position: relative; font-size: 12.5px; color: var(--mm-ink2); padding: 4px 0 4px 15px; }
.mm-promo-plus li::before { content: '·'; position: absolute; left: 3px; font-weight: 700; color: var(--mm-gold); }
.mm-promo-note { font-size: 11.5px; color: var(--mm-ink3); line-height: 1.75; margin: 14px 0 0; }

/* ===== 限时 9.9 推广位（首页 / 会员页头） ===== */
.mm-99 {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 12px;
  background: var(--mm-grad-card);
  border: 1px solid var(--mm-gold-line); border-radius: var(--mm-radius); padding: 13px 14px;
}
.mm-99-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm-99-badge {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, var(--mm-price), var(--mm-gold)); color: #fff;
}
.mm-99-t { font-size: 13.5px; line-height: 1.45; margin-top: 7px; }
.mm-99-sub { font-size: 12px; color: var(--mm-ink2); margin-top: 4px; }
.mm-99-tips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mm-99-tips span { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--mm-gold-line); color: var(--mm-gold); }
.mm-99-r { flex: none; text-align: center; }
.mm-99-r em { display: block; font-style: normal; font-size: 23px; font-weight: 700; color: var(--mm-price); line-height: 1.1; }
.mm-99-r span { display: block; font-size: 11px; color: var(--mm-ink3); }
.mm-99-r i { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--mm-brand); margin-top: 6px; white-space: nowrap; }
.mm-vip-hd {
  background: var(--mm-grad-card);
  border: 1px solid var(--mm-gold-line); border-radius: var(--mm-radius); padding: 15px;
}
.mm-vip-hd > b { display: block; font-size: 15px; margin-top: 9px; }
.mm-vip-hd > span { display: block; font-size: 12.5px; color: var(--mm-ink2); margin-top: 4px; }

/* ==========================================================================
   米家生态能力徽标（第 107 项）
   · 三个图标色是**第三方品牌标识色**（澎湃智联的蓝 / 米家的绿 / 超级小爱的彩），
     刻意**不跟 --mm-brand 走** —— 换配色时徽标必须保持原色，这是识别性的一部分。
     所以这一小段是全站唯一允许出现非变量颜色（除 #fff 外）的地方。
   · .on-brand 用在主色底上（首页 hero），底变半透明白、文字转 on-brand；
     .mini 用在窄条里，只留图标 + 主文案，省高度。
   ========================================================================== */
.mm-eco { margin: 12px 0 0; }
.mm-eco-hd { font-size: 12px; font-weight: 600; color: var(--mm-ink2); margin: 0 2px 7px; }
.mm-eco-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mm-eco-b {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  background: #fff; border: 1px solid var(--mm-line); border-radius: 10px; padding: 8px;
}
.mm-eco-i { flex: none; width: 22px; height: 22px; display: block; }
.mm-eco-i svg, .mm-eco-i img { display: block; width: 100%; height: 100%; }
.mm-eco-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.22; }
.mm-eco-t em { font-style: normal; font-size: 10px; color: var(--mm-ink3); }
.mm-eco-t b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-eco-note { font-size: 11.5px; color: var(--mm-ink3); line-height: 1.75; margin: 9px 2px 0; }

/* 主色底上的变体（首页 hero） */
.mm-eco.on-brand .mm-eco-hd { color: var(--mm-on-brand); opacity: .9; }
.mm-eco.on-brand .mm-eco-b { background: var(--mm-on-soft); border-color: var(--mm-on-line); }
.mm-eco.on-brand .mm-eco-t em, .mm-eco.on-brand .mm-eco-t b { color: var(--mm-on-brand); }
.mm-eco.on-brand .mm-eco-t em { opacity: .75; }
.mm-eco.on-brand .mm-eco-note { color: var(--mm-on-brand); opacity: .82; }
.mm-eco.on-brand .mm-logo b { color: var(--mm-on-brand); }

/* 窄条变体 */
.mm-eco.mini { margin-top: 9px; }
.mm-eco.mini .mm-eco-b { padding: 6px 7px; gap: 5px; border-radius: 9px; }
.mm-eco.mini .mm-eco-i { width: 18px; height: 18px; }
.mm-eco.mini .mm-eco-t em { display: none; }
.mm-eco.mini .mm-eco-t b { font-size: 11px; }

/* 小米 / 米家 logo 并排 */
.mm-logos { display: flex; gap: 14px; margin: 11px 2px 0; }
.mm-logo { display: flex; align-items: center; gap: 6px; }
.mm-logo svg { display: block; }
.mm-logo b { font-size: 12px; font-weight: 600; color: var(--mm-ink2); letter-spacing: .06em; }

@media (max-width: 900px) {
  .mm-auth { padding: 0; background: var(--mm-bg); }
  .mm-auth-box {
    grid-template-columns: 1fr; max-width: var(--mm-maxw);
    border-radius: 0; min-height: 100%; box-shadow: none;
    /* 不加这句：min-height:100% 会让两行「等分」剩余高度 → 权益区和表单之间出现一大块空白 */
    align-content: start;
  }
  .mm-auth-promo { padding: 20px 16px 18px; border-right: 0; border-bottom: 1px solid var(--mm-line); }
  .mm-auth-main { padding: 16px 16px calc(26px + env(safe-area-inset-bottom)); }
  .mm-promo-h { font-size: 17.5px; }
  .mm-promo-list li { padding: 7px 0; }
}
@media (max-width: 430px) {
  /* 三枚徽标横排在窄屏会把「小米澎湃智联」挤到省略号 → 改成竖排（图标在上、文字在下） */
  .mm-eco-b { flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 6px; }
  .mm-eco-i { width: 20px; height: 20px; }
  .mm-eco-t b { font-size: 10.5px; }
  .mm-eco-row { gap: 5px; }
  .mm-eco.on-brand .mm-eco-t em { display: none; }
}
@media (max-width: 400px) {
  .mm-promo-list li span { display: none; }   /* 小屏只留标题，省一屏滚动 */
  .mm-pkg-card { width: 186px; }
  .mm-kingkong { grid-template-columns: repeat(4, 1fr); }
  .mm-kk i { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
}

/* ==========================================================================
   第 109 项 · PC 版（≥1024px）—— 同址自适应，URL 不变
   --------------------------------------------------------------------------
   手机端（<1024px）一个像素都不动；宽屏走下面这套「小米商城式」布局：
     通栏顶栏（logo + 横向菜单 + 搜索 + 咨询）→ hero（左文案 / 右生态徽标）
     → 金刚区 4 张横排卡 → 楼层多列网格
   底部 5 个 tab 在 PC 上隐藏（顶部菜单替代）；弹层从「底部抽屉」改成「居中对话框」。
   颜色纪律不变：这里只允许 var(--mm-*)，顶栏上的白色一律走 --mm-on-soft / --mm-on-line。
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --mm-maxw: 1200px; }

  /* —— 顶栏：通栏（手机端仍是 520px 居中，不改）—— */
  .mm-top { max-width: none; margin: 0; box-shadow: var(--mm-shadow); }
  .mm-top-in { max-width: var(--mm-maxw); margin: 0 auto; height: 64px; padding: 0 24px; gap: 18px; }
  .mm-brand { flex: none; }
  .mm-brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
  .mm-brand-text b { font-size: 15px; }
  .mm-brand-text span { font-size: 12px; }

  .mm-topnav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
  .mm-topnav button { padding: 8px 13px; border-radius: 9px; font-size: 14px; color: var(--mm-on-brand);
    opacity: .88; white-space: nowrap; }
  .mm-topnav button:hover { background: var(--mm-on-soft); opacity: 1; }
  .mm-topnav button.on { background: var(--mm-on-soft2); opacity: 1; font-weight: 600; }

  /* 搜索框用 flex:0 1 280px 而不是 flex:1 ——
     `flex:1` 等于 `flex-basis:0`，收缩权重按 basis 加权 → 它的权重是 0，
     于是 1024 这种窄笔记本上全部收缩量都压给菜单，最后把「免费咨询」挤出右边界 4px。
     给一个真实 basis（280）它才会一起参与收缩；min-width 是它缩不下去的下限。 */
  .mm-topsearch {
    display: flex; align-items: center; gap: 6px; flex: 0 1 280px; min-width: 148px; margin-left: auto;
    background: var(--mm-on-soft); border: 1px solid var(--mm-on-line);
    border-radius: 999px; padding: 7px 8px 7px 15px;
  }
  .mm-topsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none;
    color: var(--mm-on-brand); font-size: 13px; }
  .mm-topsearch input::placeholder { color: var(--mm-on-brand); opacity: .66; }
  .mm-topsearch button { flex: none; width: 28px; height: 28px; border-radius: 999px; font-size: 14px;
    color: var(--mm-on-brand); background: var(--mm-on-soft2);
    display: flex; align-items: center; justify-content: center; }
  .mm-topsearch button:hover { background: var(--mm-on-line); }
  .mm-top-btn { flex: none; padding: 8px 18px; font-size: 13.5px; }
  .mm-top-btn.mm-top-user { max-width: 190px; }

  /* 底部 tab 让位给顶部菜单；购物车条也不用再给它留 62px */
  .mm-tabs { display: none; }
  .mm-cartbar { max-width: 560px; bottom: 22px; }

  /* —— 主栏 —— */
  .mm-view { padding: 22px 24px 52px; }

  /* —— 首页：搜索条已并入顶栏 —— */
  .mm-searchbar { display: none; }

  /* —— hero：左文案 / 右生态徽标 —— */
  .mm-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 44px;
    align-items: center; padding: 36px 40px 34px; border-radius: 18px; margin-bottom: 18px; }
  .mm-hero h1 { font-size: 30px; letter-spacing: .4px; }
  .mm-hero .sl { margin: 11px 0 13px; font-size: 13px; padding: 4px 13px; }
  .mm-hero p { font-size: 14px; line-height: 1.9; max-width: 620px; }
  .mm-hero .mm-vals { gap: 8px; margin-top: 14px; }
  .mm-hero .mm-vals span { font-size: 12.5px; padding: 4px 12px; }
  .mm-hero-cta { display: flex; gap: 12px; margin-top: 22px; }
  /* 主按钮必须反白：默认的 .mm-btn 是「品牌色底」，压在同样是品牌色的 hero 上等于看不见 */
  .mm-hero-cta .mm-btn { padding: 12px 26px; font-size: 15px; background: var(--mm-card); color: var(--mm-brand); }
  .mm-hero-cta .mm-btn.ghost { background: var(--mm-on-soft); color: var(--mm-on-brand);
    border-color: var(--mm-on-line); }
  /* 徽标在 hero 右栏改竖排大号（右栏够宽，横排反而零碎）。
     全部带 .mm-hero 前缀是为了压过 .mm-eco.mini 那组同特异性的规则 */
  .mm-hero .mm-eco { margin: 0; }
  .mm-hero .mm-eco .mm-eco-row { grid-template-columns: 1fr; gap: 9px; }
  .mm-hero .mm-eco .mm-eco-b { padding: 11px 13px; }
  .mm-hero .mm-eco .mm-eco-i { width: 26px; height: 26px; }
  .mm-hero .mm-eco .mm-eco-t em { display: block; font-size: 11px; }
  .mm-hero .mm-eco .mm-eco-t b { font-size: 13.5px; }
  .mm-hero .mm-eco .mm-logo svg { width: 26px; height: 26px; }
  .mm-hero .mm-eco .mm-logo b { font-size: 13px; }

  /* —— 金刚区：4 张横排卡 —— */
  .mm-kingkong { gap: 14px; padding: 16px; margin-bottom: 18px; border-radius: 16px; }
  .mm-kk { flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 13px 16px; border-radius: 12px; background: var(--mm-soft); }
  .mm-kk:hover { background: var(--mm-brand-s); }
  .mm-kk i { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; }
  .mm-kk span { font-size: 14px; font-weight: 600; }

  /* —— 楼层标题 —— */
  .mm-floor-hd { margin: 28px 0 13px; gap: 10px; }
  .mm-floor-hd::before { width: 4px; height: 19px; }
  .mm-floor-hd h3 { font-size: 19px; }
  .mm-floor-hd .sub { font-size: 13px; }
  .mm-floor-hd .more { font-size: 13.5px; }

  /* —— 套餐楼层：横滑 → 3 列网格 —— */
  .mm-hscroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    overflow: visible; margin: 0; padding: 0; }
  .mm-hscroll .mm-pkg-card { width: auto; }
  .mm-hscroll .mm-pkg-hd .tg { height: auto; min-height: 34px; }
  .mm-pkg-hd { padding: 15px 16px 12px; }
  .mm-pkg-hd b { font-size: 16px; }
  .mm-pkg-bd { padding: 13px 16px 16px; }
  .mm-pkg-price em { font-size: 23px; }
  .mm-pkg-hl li { font-size: 12.5px; }

  /* —— 一对一定制 / 9.9 推广位 —— */
  .mm-custom-card { padding: 20px 24px; border-radius: 16px; }
  .mm-custom-card i { width: 54px; height: 54px; border-radius: 17px; font-size: 25px; }
  .mm-custom-card .bd b { font-size: 16.5px; }
  .mm-custom-card .bd span { font-size: 13px; }
  .mm-custom-card .go { font-size: 14px; }
  .mm-99 { padding: 20px 24px; margin-bottom: 18px; border-radius: 16px; }
  .mm-99-t { font-size: 16.5px; }
  .mm-99-sub { font-size: 13px; }
  .mm-99-tips span { font-size: 11.5px; padding: 3px 9px; }
  .mm-99-r em { font-size: 30px; }
  .mm-99-r span { font-size: 12px; }
  .mm-99-r i { font-size: 13.5px; }

  /* —— 好物 / 案例：多列网格 —— */
  .mm-grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .mm-pcard { border-radius: 14px; }
  .mm-pcard .ph { height: 172px; }
  .mm-pcard .nm { font-size: 14px; height: auto; min-height: 40px; }
  .mm-pcard .pr b { font-size: 18px; }
  .mm-casegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mm-casegrid .mm-ccard { margin-bottom: 0; border-radius: 14px; }
  .mm-casegrid .mm-ccard .ph { height: 196px; }
  .mm-casegrid .mm-ccard h4 { font-size: 15.5px; }

  /* —— 服务保障 / 通用块 —— */
  .mm-sec { margin-top: 28px; }
  .mm-card { padding: 20px 22px; border-radius: 16px; }
  .mm-trust { gap: 16px; }
  .mm-trust div { padding: 22px 10px; border-radius: 16px; }
  .mm-trust b { font-size: 26px; }
  .mm-trust span { font-size: 12.5px; }
  .mm-menu { border-radius: 16px; }
  .mm-menu button, .mm-menu a { padding: 15px 18px; font-size: 14.5px; }

  /* —— 首期只做到首页，但首页的出口页不能一进去就崩 ——
     套餐列表是首页第一屏「全部 ›」和金刚区「方案套餐」的去处，
     在 1200 宽下单列铺开会让一张卡横跨整屏。这里是「一列 CSS 就能救」的兜底，
     不等于完整的 PC 化（其余 tab 的细化留到下一批）。 */
  .mm-pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .mm-pkg-grid .mm-pkg-card { width: auto; }
  .mm-empty { padding: 84px 20px; }

  /* —— 弹层：底部抽屉 → 居中对话框 —— */
  .mm-modal { align-items: center; padding: 44px 20px; }
  .mm-sheet { max-width: 720px; border-radius: 18px; max-height: 84vh; animation: mmIn .18s ease-out; }
  .mm-sheet-bd { padding: 20px 22px; }
  .mm-sheet-ft { padding: 14px 22px; }
}
@keyframes mmIn { from { transform: translateY(10px) scale(.99); opacity: .6; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   右侧固定咨询小菜单（第 110 项）
   手机端只露图标（点击面积 ≥44px），PC 端展开成带文字的一列。
   菜单里的条形目由 mall.js 的 mmPaintSide() 按后台配置生成 ——
   留空的客服电话 / 客服微信前端就不渲染，不留「点进去是空的」这种坑。
   ========================================================================== */
.mm-side {
  position: fixed; right: 10px; bottom: 84px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
}
.mm-side-i {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--mm-line); color: var(--mm-ink2);
  box-shadow: 0 4px 14px rgba(12, 24, 34, .10);
}
.mm-side-i i { font-size: 16px; font-style: normal; line-height: 1; }
.mm-side-i span { display: none; }
.mm-side-i:active { background: var(--mm-soft); }

/* 咨询页 / 客服弹层里的联系方式块 */
.mm-svc-list { padding: 4px 0; }
.mm-svc-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--mm-line); }
.mm-svc-row:last-child { border-bottom: 0; }
.mm-svc-row i { font-style: normal; font-size: 17px; width: 22px; text-align: center; color: var(--mm-brand); }
.mm-svc-row .bd { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mm-svc-row .bd span { font-size: 11.5px; color: var(--mm-ink3); }
.mm-svc-row .bd b { font-size: 15px; letter-spacing: .02em; }
.mm-svc-card { padding: 13px 14px; }
.mm-svc-k { font-size: 11.5px; color: var(--mm-ink3); margin-bottom: 4px; }
.mm-svc-v { display: flex; align-items: center; gap: 10px; }
.mm-svc-v b { font-size: 17px; letter-spacing: .02em; }
.mm-svc-qr { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.mm-svc-qr img { width: 168px; height: 168px; object-fit: contain; border-radius: 12px; background: var(--mm-soft); }
.mm-svc-qr span { font-size: 12.5px; color: var(--mm-ink3); }
.mm-page-hd { padding: 4px 2px 2px; }
.mm-page-hd h2 { font-size: 20px; margin: 0 0 6px; }
.mm-page-hd .mm-muted { margin: 0; line-height: 1.65; }

/* 产品清单未解锁（第 110 项）：预估费用免费、逐行清单要会员 */
.mm-lock { padding: 20px 18px; text-align: center; }
.mm-lock-i {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 14px;
  background: var(--mm-brand-s); color: var(--mm-brand);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.mm-lock > b { display: block; font-size: 15.5px; margin-bottom: 6px; }
.mm-lock > .mm-dim { line-height: 1.7; }

@media (min-width: 1024px) {
  .mm-side { right: 24px; bottom: auto; top: 50%; transform: translateY(-50%); gap: 10px; }
  .mm-side-i { width: 84px; height: auto; padding: 11px 6px 10px; border-radius: 16px; gap: 5px; }
  .mm-side-i i { font-size: 19px; }
  .mm-side-i span { display: block; font-size: 11.5px; line-height: 1.25; text-align: center; }
  .mm-side-i:hover { border-color: var(--mm-brand); color: var(--mm-brand); background: var(--mm-brand-s); }
}

/* ==========================================================================
   第 110 项：产品清单图文 + hover 放大 + 会员双价
   ========================================================================== */
.mm-tbl-pz { min-width: 560px; }
.mm-tbl-pz th { white-space: nowrap; }
.mm-td-pz { width: 46px; }
/* 缩略图：固定尺寸 + contain，避免不同比例的图把行高撑得七零八落 */
.mm-pz {
  position: relative; display: inline-block; width: 36px; height: 36px; line-height: 0;
  border-radius: 8px; overflow: hidden; background: var(--mm-soft);
  border: 1px solid var(--mm-line);
}
.mm-pz-i { width: 100%; height: 100%; object-fit: contain; display: block; }
.mm-pz-no {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--mm-ink2); opacity: .45; font-size: 15px;
}
.mm-pz[data-mm-zoom], .mm-pname[data-mm-zoom] { cursor: zoom-in; }
/* hover 放大：position:fixed → 不受 .mm-tblwrap 的 overflow-x 裁剪，
   也不需要 JS 跟着指针算坐标（一个固定落点更稳、更不会被移动端误触）。 */
.mm-pz-big {
  display: block; position: fixed; right: 22px; bottom: 108px;
  width: 240px; height: 240px; object-fit: contain; padding: 10px;
  background: #fff; border: 1px solid var(--mm-line); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
  opacity: 0; visibility: hidden; transition: opacity .14s ease; z-index: 60; pointer-events: none;
}
.mm-tbl-pz tbody tr:hover .mm-pz-big { opacity: 1; visibility: visible; }
.mm-pname { border-bottom: 1px dashed transparent; }
.mm-pname[data-mm-zoom]:hover { border-bottom-color: var(--mm-brand); color: var(--mm-brand); }
/* 类型分组行：占满整行、不吃 hover 放大 */
.mm-grp td {
  background: var(--mm-soft); padding: 7px 10px !important;
  border-bottom: 1px solid var(--mm-line) !important; white-space: nowrap;
}
.mm-grp b { font-size: 12.5px; }
.mm-grp .mm-dim { margin-left: 8px; font-size: 11.5px; }
/* 直供价（仅付费会员渲染出来）。
   第 121 项起它在配置单里是**一列**（`.mm-doc-tbl td.mm-dir`），
   类名保留是为了截图套件与回归还能数到「直供价」这个钩子。 */
.mm-dir {
  margin-top: 2px; font-size: 11px; font-weight: 600;
  color: var(--mm-price, #ff4d1a); opacity: .92;
}
.mm-doc-tbl td.mm-dir { margin: 0; padding: 7px 8px; text-align: right; font-size: 12px; white-space: nowrap; }
.mm-pzlegend {
  margin-top: 8px; font-size: 11.5px; line-height: 1.7; color: var(--mm-ink2);
}
.mm-pzlegend .mm-dim { display: block; opacity: .85; }
/* 点图放大的弹层内容 */
.mm-zoomwrap { text-align: center; }
.mm-zoomwrap img {
  max-width: 100%; max-height: 60vh; object-fit: contain;
  border-radius: 12px; background: var(--mm-soft);
}

/* ==========================================================================
   第 112 项 · 商城页（小米商城式：左菜单 / 右大广告 / 按类型分楼层）
   --------------------------------------------------------------------------
   手机端形态：搜索排序条 → 分类横滑条 → 轮播 → 一排大广告（3 张小图）→ 分类楼层
   PC 端形态在同一份 DOM 上换出来（见本文件末尾的 @media min-width:1024px）：
   左菜单 216 + 轮播弹性 + 右列小广告 268，菜单项鼠标移上去弹出该分类的商品面板。
   颜色仍然只走 var(--mm-*)。
   ========================================================================== */
.mm-shopbar { margin-bottom: 10px; }
.mm-sortbar { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0; }
.mm-sortbar::-webkit-scrollbar { display: none; }

/* —— 分类菜单（手机端 = 横向滚动条）—— */
.mm-catnav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; }
.mm-catnav::-webkit-scrollbar { display: none; }
.mm-cnav-i {
  position: relative; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--mm-line);
  background: #fff; color: var(--mm-ink); font-size: 13px; white-space: nowrap;
}
.mm-cnav-i i { font-style: normal; color: var(--mm-brand); font-size: 13px; }
.mm-cnav-i em { font-style: normal; font-size: 11px; color: var(--mm-ink3); }
.mm-cnav-i b { display: none; }
.mm-cnav-i.on { background: var(--mm-brand); border-color: var(--mm-brand); color: #fff; }
.mm-cnav-i.on i, .mm-cnav-i.on em { color: #fff; opacity: .9; }
.mm-cnav-pop { display: none; }   /* 悬停面板是 PC 专属，手机端不渲染出来 */

/* —— 轮播 —— */
/* 底用主题浅渐变：产品图多是白底方图，纯白背景会显得整块没内容 */
.mm-bn { position: relative; border-radius: 16px; overflow: hidden; background: var(--mm-grad-soft); border: 1px solid var(--mm-line); }
.mm-bn-track { display: flex; height: 156px; overflow-x: auto; scroll-snap-type: x mandatory; }
.mm-bn-track::-webkit-scrollbar { display: none; }
.mm-bn-i {
  flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center;
  gap: 10px; padding: 0 16px; text-align: left; background: none;
}
.mm-bn-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mm-bn-tx b {
  font-size: 15px; line-height: 1.35; color: var(--mm-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-bn-tx span { font-size: 11.5px; color: var(--mm-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-bn-tx em { font-style: normal; font-size: 19px; font-weight: 700; color: var(--mm-price); }
.mm-bn-tx em i { font-style: normal; font-size: 11px; font-weight: 500; margin-left: 2px; }
.mm-bn-ph { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px 0; }
.mm-bn-ph img { width: 100%; max-height: 122px; object-fit: contain; }
.mm-bn-ph .noimg { font-size: 30px; color: var(--mm-ink3); }
.mm-bn-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.mm-bn-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--mm-ink3); opacity: .35; }
.mm-bn-dot.on { width: 16px; opacity: 1; background: var(--mm-brand); }

/* —— 广告位：手机端只有下方那一排（右列小卡是 PC 专属）—— */
.mm-adside { display: none; }
.mm-adrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.mm-adcard {
  display: flex; flex-direction: column; text-align: left; overflow: hidden;
  background: #fff; border: 1px solid var(--mm-line); border-radius: 12px;
}
.mm-adcard .ph { height: 78px; display: flex; align-items: center; justify-content: center; background: var(--mm-grad-soft); }
.mm-adcard .ph img { width: 100%; height: 100%; object-fit: contain; }
.mm-adcard .ph .noimg { font-size: 20px; color: var(--mm-ink3); }
.mm-adcard .bd { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mm-adcard .bd b { font-size: 12px; line-height: 1.35; color: var(--mm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-adcard .bd span { display: none; }
.mm-adcard .bd em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mm-price); }
.mm-adcard .bd em i { font-style: normal; font-size: 10px; font-weight: 500; margin-left: 1px; }

/* —— 楼层 / 筛选头 —— */
.mm-shopmain { margin-top: 4px; }
.mm-floor { margin-top: 14px; }
.mm-floor .mm-floor-hd { margin-top: 0; }
.mm-shophd { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.mm-shophd h2 { font-size: 17px; margin: 0; }
.mm-shophd .mm-dim { font-size: 12px; }
/* 楼层里商品不足 4 件时的补位卡：虚线 + 品牌浅底，一眼看出是「出口」不是商品 */
.mm-morecard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 176px; padding: 12px; text-align: center;
  border: 1px dashed var(--mm-brand-line); border-radius: 12px; background: var(--mm-brand-s);
  color: var(--mm-brand);
}
.mm-morecard i { font-style: normal; font-size: 24px; line-height: 1; opacity: .75; }
.mm-morecard b { font-size: 13px; }
.mm-morecard span { font-size: 11.5px; opacity: .85; }

@media (min-width: 1024px) {
  /* 顶栏已经有搜索，商城页自己那条工具条（搜索 + 排序 chip）整条让位给左侧菜单 */
  .mm-shopbar { display: none; }

  /* 三栏首屏：左菜单 216 / 中轮播弹性 / 右列小广告 268 */
  .mm-shoptop {
    display: grid; grid-template-columns: 216px minmax(0, 1fr) 268px;
    grid-template-rows: 372px; gap: 14px; margin-bottom: 16px;
  }

  /* 左菜单：竖列 + 悬停弹出该分类的商品面板 */
  .mm-catnav {
    display: flex; flex-direction: column; gap: 1px; overflow: visible; align-self: start;
    padding: 8px; background: #fff; border: 1px solid var(--mm-line); border-radius: 16px;
  }
  .mm-cnav-i {
    height: 33px; padding: 0 12px; gap: 8px; border: 0; border-radius: 10px;
    background: none; font-size: 13.5px;
  }
  .mm-cnav-i.on { background: var(--mm-brand-s); color: var(--mm-brand); font-weight: 600; }
  .mm-cnav-i.on i, .mm-cnav-i.on em { color: var(--mm-brand); opacity: .85; }
  .mm-cnav-i b { display: block; margin-left: auto; color: var(--mm-ink3); font-weight: 400; }
  .mm-cnav-i:hover { background: var(--mm-brand-s); }
  /* 悬停面板：不占布局、从菜单右侧伸出来压住轮播 */
  .mm-catnav .mm-cnav-i:hover .mm-cnav-pop { display: block; }
  .mm-cnav-pop {
    display: none; position: absolute; left: calc(100% + 12px); top: -9px; width: 604px;
    padding: 16px 18px 18px; background: #fff; border: 1px solid var(--mm-line);
    border-radius: 16px; box-shadow: 0 20px 50px rgba(12, 24, 34, .14); z-index: 45; text-align: left;
  }
  .mm-cnav-pop-hd {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 11px; margin-bottom: 12px; border-bottom: 1px solid var(--mm-line);
  }
  .mm-cnav-pop-hd b { font-size: 15px; color: var(--mm-ink); }
  .mm-cnav-pop-hd i { font-style: normal; font-size: 12px; color: var(--mm-ink3); font-weight: 400; }
  .mm-cnav-pop-hd u { text-decoration: none; font-size: 12.5px; color: var(--mm-brand); cursor: pointer; }
  .mm-cnav-pop-bd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .mm-cnav-t { display: flex; flex-direction: column; gap: 3px; padding: 7px; border-radius: 11px; cursor: pointer; min-width: 0; }
  .mm-cnav-t:hover { background: var(--mm-soft); }
  .mm-cnav-t .ph { height: 66px; display: flex; align-items: center; justify-content: center; }
  .mm-cnav-t .ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .mm-cnav-t .ph .noimg { color: var(--mm-ink3); font-style: normal; }
  .mm-cnav-t b { font-size: 12px; font-weight: 500; color: var(--mm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-cnav-t em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--mm-price); }

  /* 轮播 */
  .mm-bn-track { height: 100%; }
  .mm-bn-i { grid-template-columns: minmax(0, 1fr) 42%; padding: 0 34px; gap: 20px; }
  .mm-bn-tx b { font-size: 24px; -webkit-line-clamp: 3; }
  .mm-bn-tx span { font-size: 13.5px; }
  .mm-bn-tx em { font-size: 26px; }
  .mm-bn-ph img { max-height: 268px; }
  .mm-bn-dots { bottom: 15px; justify-content: flex-start; padding-left: 34px; }
  .mm-bn-dot { width: 8px; height: 8px; }
  .mm-bn-dot.on { width: 22px; }

  /* 右列小广告（PC 专属位：手机端整块 display:none） */
  .mm-adside { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
  .mm-adside .mm-adcard { flex-direction: row; align-items: center; gap: 10px; padding-right: 12px; }
  .mm-adside .mm-adcard .ph { flex: 0 0 44%; height: 100%; }
  .mm-adside .mm-adcard .bd { padding: 10px 0; gap: 4px; }
  .mm-adside .mm-adcard .bd b {
    font-size: 13.5px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .mm-adside .mm-adcard .bd span { display: block; font-size: 11.5px; color: var(--mm-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-adside .mm-adcard .bd em { font-size: 16px; }

  /* 下方一排大广告 */
  .mm-adrow { gap: 14px; margin-top: 0; }
  .mm-adcard { transition: box-shadow .16s ease, transform .16s ease; }
  .mm-adcard:hover { box-shadow: 0 12px 30px rgba(12, 24, 34, .12); transform: translateY(-2px); }
  .mm-adcard.big .ph { height: 132px; }
  .mm-adcard.big .bd { padding: 12px 14px 14px; gap: 4px; }
  .mm-adcard.big .bd b { font-size: 15px; white-space: normal; }
  .mm-adcard.big .bd span { display: block; font-size: 12.5px; color: var(--mm-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-adcard.big .bd em { font-size: 18px; }

  /* 楼层间距：PC 上楼层多，留够呼吸感 */
  .mm-floor { margin-top: 30px; }
  .mm-shophd { margin: 4px 0 16px; }
  .mm-shophd h2 { font-size: 20px; }
}

/* ==========================================================================
   第 114 项 · PC 版续做：自助规划 / 案例 / 我的
   --------------------------------------------------------------------------
   与第 109 项同一套纪律：**同一份 DOM，只靠 CSS 换形态**，改动全部关在
   @media (min-width:1024px) 里 —— 手机端一行不受影响。
   为此在 mall.js 里加了 8 个**纯选择器钩子**（手机端没有任何样式）：
     .mm-planform  规划前两步的表单卡          .mm-planres  规划第 3 步结果的外层
     .mm-fld-wide  该字段在 PC 上占满两列      .mm-lists    产品清单块（原来没有外层容器）
     .mm-scene     钱大概花在哪（PC 上搬右栏）  .mm-guide    布线避坑指南
     .mm-casedetail / .mm-gallery              .mm-me / .mm-me-guest
   这一节**故意放在文件末尾**：同特异性下后者胜 —— 所以它能直接覆盖第 109 项里
   `.mm-casegrid` 那组「一列 CSS 兜底」的 3 列值，而不用回去改旧段落。
   颜色纪律不变：这里只允许 var(--mm-*)。
   ========================================================================== */
@media (min-width: 1024px) {

  /* ---------------- 自助规划 · 前两步表单：单列 → 两栏 ---------------- */
  /* `grid-auto-flow: dense` 是关键：DOM 里「建筑面积」排在「几室/几厅/几卫」之后，
     不开 dense 它就落到第三行、第一行右边空一块；开了 dense 会回填到「城市」旁边，
     得到 城市|建筑面积 / 房型 / 装修阶段 / 按钮 这四行。
     代价是 Tab 顺序与视觉顺序在这一处不完全一致（4 个字段的表单，可接受）。 */
  .mm-planform {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px; grid-auto-flow: row dense; align-items: start;
  }
  .mm-planform > .mm-steps,
  .mm-planform > .mm-plan-step-hd,
  .mm-planform > .mm-three,
  .mm-planform > .mm-fld-wide,
  .mm-planform > .mm-btn-row { grid-column: 1 / -1; }

  .mm-planform > .mm-steps { margin-bottom: 22px; }
  .mm-planform > .mm-steps div { height: 5px; }
  .mm-planform > .mm-plan-step-hd { font-size: 14px; margin-bottom: 18px; }
  .mm-planform > .mm-plan-step-hd b { font-size: 15.5px; }
  .mm-planform .mm-field > label { font-size: 13.5px; margin-bottom: 7px; }
  .mm-planform .mm-inp { padding: 12px 14px; font-size: 14.5px; border-radius: 12px; }
  .mm-planform .mm-pick { font-size: 13.5px; padding: 9px 18px; }
  .mm-planform .mm-field .hint { font-size: 12.5px; margin-top: 7px; }
  /* 按钮行：`.mm-btn-row .mm-btn{flex:1}` 会让每个按钮各占 555px（像两条横幅），
     改成「定宽 + 左对齐」 */
  .mm-planform > .mm-btn-row { margin-top: 22px; }
  .mm-planform > .mm-btn-row .mm-btn { flex: 0 0 auto; min-width: 176px; padding: 12px 26px; font-size: 15px; }

  /* ---------------- 自助规划 · 第 3 步结果：单列长页 → 左主体 / 右小计 ---------------- */
  .mm-planres {
    display: grid; grid-template-columns: minmax(0, 1fr) 356px;
    gap: 18px 22px; align-items: start;
  }
  .mm-planres > * { margin-top: 0; }
  .mm-planres > .mm-plan-step-hd,
  .mm-planres > .mm-lists,
  .mm-planres > .mm-sec,
  .mm-planres > .mm-btn-row,
  .mm-planres > .mm-btn.block { grid-column: 1 / -1; }
  /* 唯一占单列的是「钱大概花在哪」：它自己进右栏，预估费用卡留在左栏 */
  .mm-planres > .mm-sec.mm-scene { grid-column: auto; }
  .mm-planres > .mm-summary { margin-bottom: 0; }
  .mm-planres .mm-summary { padding: 18px 20px; }
  .mm-planres .mm-price-big { font-size: 28px; }
  .mm-planres .mm-tbl { font-size: 13px; }
  .mm-planres .mm-tbl th, .mm-planres .mm-tbl td { padding: 10px 12px; }
  .mm-planres .mm-pz { width: 42px; height: 42px; }
  /* hover 放大预览：从右下角往左挪 132px —— 否则会压住右侧那条竖着的咨询小菜单
     （小菜单在 right:24 / top:50%，两者水平区间原本是叠着的） */
  .mm-planres .mm-pz-big { width: 264px; height: 264px; right: 132px; bottom: 44px; }
  .mm-planres > .mm-btn-row .mm-btn { flex: 0 0 auto; min-width: 168px; }
  .mm-planres > .mm-btn.block { margin-top: 0 !important; }
  /* 未解锁清单里的两个 CTA：整条 1106px 的橙色横条太重，收成定宽居中 */
  .mm-planres .mm-lock .mm-btn.block { max-width: 340px; margin-left: auto; margin-right: auto; }

  /* ---------------- 案例列表 ---------------- */
  /* 手机端的横滑筛选条在 PC 上不再滚动：换行铺开，鼠标点得中 */
  .mm-filters { flex-wrap: wrap; overflow: visible; gap: 9px; padding: 0 0 16px; }
  .mm-chip { font-size: 13.5px; padding: 8px 17px; }
  .mm-chip:hover { border-color: var(--mm-brand-line); color: var(--mm-brand); background: var(--mm-brand-s); }
  /* 4 列（覆盖第 109 项那组 3 列兜底）：8 条案例正好铺满两行，不留半行空位 */
  .mm-casegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .mm-casegrid .mm-ccard { border-radius: 14px; transition: box-shadow .16s ease, transform .16s ease; }
  .mm-casegrid .mm-ccard:hover { box-shadow: 0 12px 30px rgba(12, 24, 34, .12); transform: translateY(-2px); }
  .mm-casegrid .mm-ccard .ph { height: 176px; }
  .mm-casegrid .mm-ccard .bd { padding: 13px 14px 15px; }
  .mm-casegrid .mm-ccard h4 { font-size: 15px; }
  .mm-casegrid .mm-meta { font-size: 12px; gap: 4px 10px; }

  /* ---------------- 案例详情 ---------------- */
  /* 长文 + 图廊通栏 1200 太宽，限宽居中 */
  .mm-casedetail { max-width: 1020px; margin: 0 auto; }
  .mm-casedetail .mm-sec { margin-top: 22px; }
  .mm-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* 图廊的圆角 / 下边距原本写在行内 style 上，只能 !important 覆盖 */
  .mm-gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: 12px !important; margin-bottom: 0 !important; }
  .mm-casedetail .mm-tbl { font-size: 13px; }
  .mm-casedetail .mm-tbl th, .mm-casedetail .mm-tbl td { padding: 10px 12px; }
  /* 「同款复刻到我的方案」：整条 1020px 太长，收成定宽 */
  .mm-casedetail .mm-btn.block { display: inline-flex; width: auto; min-width: 260px; max-width: 360px; }

  /* ---------------- 我的 ---------------- */
  /* 会员卡：上下堆叠 → 左信息 / 右按钮（否则 1176 宽的一条橙带太浪费） */
  .mm-me .mm-vip {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 30px; padding: 26px 30px; border-radius: 16px;
  }
  .mm-me .mm-vip .lv, .mm-me .mm-vip .exp, .mm-me .mm-vip .pk { grid-column: 1; }
  .mm-me .mm-vip .lv { font-size: 22px; }
  .mm-me .mm-vip .exp { font-size: 13px; margin-top: 8px; }
  .mm-me .mm-vip .pk { margin-top: 15px; gap: 8px; }
  .mm-me .mm-vip .pk span { font-size: 12px; padding: 4px 12px; border-radius: 8px; }
  .mm-me .mm-vip > .mm-btn {
    grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end;
    min-width: 186px; margin-top: 0 !important;
  }
  /* 功能菜单：纵向列表 → 每行 4 个方形磁贴（图标在上文字在下，去掉右侧箭头） */
  .mm-me .mm-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mm-me .mm-menu button, .mm-me .mm-menu a {
    flex-direction: column; justify-content: center; gap: 10px;
    padding: 22px 10px; font-size: 13px; text-align: center;
    border-bottom: 0; border-right: 1px solid var(--mm-line);
  }
  .mm-me .mm-menu > *:nth-child(4n), .mm-me .mm-menu > *:last-child { border-right: 0; }
  .mm-me .mm-menu button:hover { background: var(--mm-soft); }
  .mm-me .mm-menu .ico { width: auto; font-size: 22px; }
  .mm-me .mm-menu .arw { display: none; }
  .mm-me > .mm-sec { margin-top: 20px; }
  /* 退出登录：整条横幅 → 定宽按钮 */
  .mm-me .mm-sec > .mm-btn.block { display: inline-flex; width: auto; min-width: 176px; }
  /* 未登录态：整页收成 640 居中一列（窄卡片配满宽磁贴会一宽一窄，很别扭） */
  .mm-me-guest { max-width: 640px; margin: 0 auto; }
  .mm-me-guest .mm-card.mm-center { padding: 34px 32px !important; }
}

/* ============================================================
   第 120 项：后台「页面装修」的预览态样式（只在 mall.html?edit=1 生效）
   普通访客身上一个属性都不会多带，这些规则也全都不会命中 ——
   装修态的视觉噪声不能影响到线上。
   ============================================================ */
.mm-edtip {
  position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 999;
  background: rgba(17, 24, 39, .92); color: #fff; font-size: 12.5px; line-height: 1.5;
  padding: 7px 14px; border-radius: 999px; max-width: 86%; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); pointer-events: none;
}
/* 可编辑位：默认一圈极淡的虚线（看得见但不抢戏），悬停时加底色 + 更清晰的框 */
.mm-editing [data-mm-edit] {
  outline: 1px dashed rgba(255, 103, 0, .45); outline-offset: 2px; cursor: text;
  border-radius: 3px;
}
.mm-editing [data-mm-edit]:hover {
  outline: 2px dashed var(--mm-brand, #ff6700); outline-offset: 2px;
  background: rgba(255, 103, 0, .09);
}
.mm-editing [data-mm-ekind="img"] {
  cursor: pointer; outline: 2px dashed rgba(255, 103, 0, .55); outline-offset: -2px;
  position: relative;
}
.mm-editing [data-mm-ekind="img"]:hover {
  outline: 2px solid var(--mm-brand, #ff6700);
  box-shadow: 0 0 0 3px rgba(255, 103, 0, .18);
}
/* 换图角标：只在悬停时出现，避免预览被一堆小标签糊住 */
.mm-editing [data-mm-ekind="img"]:hover::after {
  content: '✎ 换图'; position: absolute; right: 4px; bottom: 4px; z-index: 3;
  background: var(--mm-brand, #ff6700); color: #fff; font-size: 11px;
  padding: 3px 8px; border-radius: 999px; pointer-events: none;
}
.mm-ed-now {
  outline: 2px solid var(--mm-brand, #ff6700) !important;
  background: rgba(255, 255, 255, .96); color: #111;
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
}
@keyframes mmEdFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 103, 0, 0); }
  30% { box-shadow: 0 0 0 6px rgba(255, 103, 0, .35); }
}
.mm-ed-flash { animation: mmEdFlash 1.4s ease-out; }
/* 首页顶部大图（可选位）：没传图时装修态给一块「点这里上传」的虚框，线上什么都不显示 */
.mm-hero-img { margin: 10px 0 0; border-radius: var(--mm-rad, 12px); overflow: hidden; line-height: 0; }
.mm-hero-img img { width: 100%; display: block; }
.mm-hero-img.empty {
  line-height: 1.6; border: 1px dashed var(--mm-line, #e5e7eb);
  background: var(--mm-soft, #f7f8fa); color: var(--mm-dim, #9ca3af);
  font-size: 13px; text-align: center; padding: 26px 12px;
}

/* ==========================================================================
   第 128 项：首页页脚的内部入口（员工通道 / 运营管理）
   —— 刻意做得不起眼：11px 灰字、无按钮样式、无下划线，鼠标悬停才提亮。
      装修模式（后台 iframe 预览）里 JS 直接不渲染这块。
   ========================================================================== */
.mm-staff {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 26px 0 4px; padding-bottom: 4px;
  font-size: 11px; letter-spacing: .4px;
  color: var(--mm-dim, #9ca3af);
}
.mm-staff a {
  color: inherit; text-decoration: none; cursor: pointer;
  padding: 2px 1px; border-radius: 4px;
  opacity: .62; transition: opacity .15s, color .15s;
}
.mm-staff a:hover, .mm-staff a:active { opacity: 1; color: var(--mm-brand, #ff6900); }
.mm-staff i { font-style: normal; opacity: .35; }
/* 手机端底部有固定 tab 栏，多留一点空隙免得贴着 */
@media (max-width: 1023px) {
  .mm-staff { margin: 18px 0 10px; }
}

/* ==========================================================================
   第 195 项：手机端适配（mall.html 只引本文件，所以这套规则不能写在 styles.css）
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 1023px) {
  /* iOS：控件字号 < 16px 时聚焦会自动把整页放大，而且不缩回来 —— 搜个东西整页就错位了 */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px; }
  /* 数量加减框是定高 26px 的小控件，跟着放大字号就得把格子一起放宽，否则数字被切 */
  .mm-qty input { width: 46px; height: 30px; }
  .mm-qty button { width: 32px; height: 30px; }
  /* 横向滑动的商品条：惯性滚动 + 不让整页跟着跑 */
  .mm-tabs, .mm-scroll, .mm-tblwrap, .mm-cnav { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* 商品图懒加载后先占住位，避免加载完成时页面跳动 */
  .mm-pcard .ph, .mm-ccard .ph { overflow: hidden; }
}