/* 生成页面共用的排版脚手架 —— 与组件一样，只允许用 token。
   这是「页面层」，只做容器/网格/间距；不定义任何新的设计值。 */

body {
  /* ★ 一屏固定 812（用户明确要求）。
     视口不够高时**页面本身**可滚（而不是把壳压矮）——
     壳是设计稿 1:1 的产物，压矮会破坏几何。
     壳内的 .mzh-home__scroll 仍只负责内容滚动，两者互不干扰：
     页面滚 = 整体上下移（视口不够时用），壳内滚 = 看 1050 高的内容。 */
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-viewport-height);
}

/* ★ 全局 button 重置 —— 缺了会静默出 `2px outset rgb(0,0,0)` 黑边。
   <button> 的 UA 默认样式带 border + background + font，且 **border 参与盒模型**
   （border-box 之外），会把设计稿的 102×110 撑成 106×114。
   「我的」页三个权益卡就中过这个招（肉眼可见的粗黑框 + 渐变底被挤没）。 */
button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* 手机框：宽度取自 token 的页面基准宽。

   ⚠️ 描边用 box-shadow 而不是 border：border 会占掉左右各 1px，
   内容区就变成 373 而不是 375，所有按 375 推导的尺寸（166 卡宽、196 banner…）
   会集体差 1px。用 box-shadow 画外圈，内容区严格 375。

   圆角 + overflow:hidden 是**原型外壳**：让页面像嵌在手机圆角屏幕里。
   真机上页面是全屏的、圆角由设备提供，所以这属"演示用"，不影响任何设计值
   （不会改变元素的量测位置，只裁四个角）。 */
.mzh-phone {
  width: var(--layout-page-width);
  margin: 0 auto;
  background: var(--color-bg-page);
  border-radius: var(--layout-screen-radius);
  overflow: hidden;
  box-shadow: 0 0 0 var(--border-width-default) var(--color-border-light);
  display: flex;
  flex-direction: column;
  /* 悬浮键以本容器为定位参照 */
  position: relative;
}

.mzh-phone__body {
  padding: 0 var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* 区块内的纵向节奏 */
.mzh-phone__stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ─────────── 首页（设计稿 1887:1170）的纵向节奏 ───────────
   全部由设计稿绝对坐标推导，改 token 即改版式。 */
/* 五入口沿用 SceneGrid 等分布局；旋转仅用于第四项防水图标。 */
.mzh-phone--home .mzh-scene-grid__item:nth-child(4) .mzh-scene-grid__icon {
  transform: var(--scene-grid-home-waterproof-transform);
}

.mzh-home__media-row {
  display: flex;
  align-items: flex-start;
  gap: var(--home-layout-media-gap);
  padding: 0 var(--home-layout-content-padding-x);
  margin-top: var(--home-layout-gap-master-to-media);
}

.mzh-home__section {
  display: flex;
  flex-direction: column;
  gap: var(--home-layout-card-gap);
  padding: 0 var(--home-layout-content-padding-x);
  margin-top: var(--home-layout-gap-media-to-cases);
}

/* 案例 2 列网格：卡宽取设计稿显式值 166（列间距 11 → 166×2+11=343）；
   行间距仍取设计稿的 12（设计稿 list 高 420 = 204+12+204）。 */
.mzh-home__grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--home-layout-grid-gap);
  row-gap: var(--home-layout-card-gap);
  width: 100%;
}

/* ─────────── 首页（设计稿 1887:1170，内容 1050 > 一屏 812）───────────
   用户要求：内容可滚动，底部标签栏固定不随滚动。

   实现：
   · 手机壳固定一屏高（--layout-viewport-height），overflow:hidden 不让内容外溢
   · 壳内多一个 .mzh-home__scroll 滚动容器，包住导航以下的所有内容
   · TabBar 区 position:absolute 钉在壳底
   · 滚动容器底部留出与 TabBar 等高的内边距，最后一条内容不会被盖住
   ⚠️ 不能用 position:fixed —— 那是相对**视口**，在多页并排预览时会跑到别的位置。 */
.mzh-phone--home {
  height: var(--layout-viewport-height);
  overflow: hidden;
  padding-bottom: 0;
}

.mzh-home__scroll {
  position: relative;
  flex: 1;
  min-height: 0;                 /* flex 子项默认 min-height:auto，不加则不滚动 */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 底部留白 = TabBar 区高度，让最后一条内容能滚到可见 */
  padding-bottom: var(--home-tabbar-reserved);
  scrollbar-width: none;          /* 隐藏滚动条，原型不需要 */
}

.mzh-home__scroll::-webkit-scrollbar {
  display: none;
}

/* TabBar 钉在壳底 */
.mzh-phone--home .mzh-home__tabbar-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top: 0;
  z-index: var(--home-tabbar-z);
  flex: none;
}

/* ★ 导航在滚动容器**内**（用户要求随内容一起滚走）。
   它不需要 z-index —— 主功能白卡的负 margin 上提能正常压住它的渐变，
   因为两者同属一个层叠上下文，不会被 overflow 裁掉。
   ⚠️ 但必须给 align-self:stretch —— 放进 flex 容器后导航变成 flex item，
   宽度会按内容塌成 0（实测 w=0 h=0，整页错位 -189）。 */
.mzh-phone--home .mzh-nav {
  position: relative;
  z-index: auto;
  align-self: stretch;
  flex: none;
}

/* TabBar 区 = 标签栏 + 下方 iOS Home Indicator 区。
   ⚠️ 设计稿实测：标签栏下方 1028..1050 是**白色**（不是页面灰），
   而标签栏自己的上圆角缺口处露出的是**页面灰** ——
   所以白底只能加在标签栏之后的那一段，不能给整个容器铺白。 */
.mzh-home__tabbar-area {
  margin-top: var(--home-layout-gap-cases-to-tabbar);
  display: flex;
  flex-direction: column;
}

.mzh-home__home-indicator {
  height: var(--layout-home-indicator);
  background: var(--color-bg-primary);
}

/* 产品教程页的安全区是 34（首页设计稿是 22）—— 两页各按自己的设计稿 */
.mzh-home__home-indicator--safe {
  height: var(--layout-safe-area-bottom);
}

/* ─────────── 产品教程页（设计稿 1861:9407）外壳 ───────────
   页面是固定 812 高：内容在内部滚动，TabBar 区固定在底部并压在内容之上
   （设计稿里内容到 794、TabBar 从 720 起，就是这种叠法）。 */
.mzh-phone--tutorial {
  height: var(--tutorial-page-height);
  overflow: clip;
}

.mzh-page-bg {
  --page-bg-image: var(--tutorial-page-bg-image);
  position: absolute;
  inset: 0;
  background-image: var(--page-bg-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: var(--tutorial-page-bg-z, 0);
}

.mzh-tutorial__scroll {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  /* 让页面内的 cqw（大标题的位置/字号）相对本页宽换算，而不是相对浏览器视口 */
  container-type: inline-size;
}

.mzh-tutorial__content {
  display: flex;
  flex-direction: column;
  gap: var(--tutorial-group-gap-y);
  /* 用 margin 而不是 padding：这样内容框本身就是设计稿里的 343 宽框（x=16） */
  margin: calc(var(--tutorial-content-top) - var(--tutorial-banner-h))
          var(--tutorial-content-pad-x) 0;
  /* 必须给出层叠上下文：banner 带 position:relative，按 CSS 绘制顺序
     「定位元素」会盖过「非定位块级元素」，不压住就会让 banner 渐隐区糊在白卡上。
     设计稿里白卡就是压在 banner 上的。 */
  position: relative;
  z-index: var(--tutorial-content-z);
}

.mzh-phone--tutorial .mzh-nav,
.mzh-phone--tutorial .mzh-home__tabbar-area {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: var(--tutorial-overlay-z, 10);
}

.mzh-phone--tutorial .mzh-nav {
  top: 0;
  pointer-events: none;
}

.mzh-phone--tutorial .mzh-home__tabbar-area {
  bottom: 0;
  margin-top: 0;
}

/* 弧形背景面板（旧版 P01 用；新版首页已不再使用，保留以免影响 P01） */
.mzh-phone__panel {
  position: relative;
  --panel-image: none;
  margin-top: calc(var(--banner-panel-raise) * -1);
  background-image:
    var(--panel-image),
    linear-gradient(180deg,
      var(--panel-image-bottom-color) 0,
      var(--color-bg-brand-extend) var(--panel-edge-fade),
      var(--color-bg-brand-extend) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto,
                   100% max(0px, calc(100% - var(--panel-image-height) + var(--panel-fill-overlap)));
  background-position: top left, bottom left;
  border-radius: var(--panel-radius);
  padding: var(--panel-padding-top) var(--panel-padding-x) var(--panel-padding-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}

.mzh-phone__panel .mzh-section-header__title {
  color: var(--color-text-inverse);
}

.mzh-phone__grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

/* ─────────── 免费预约页（设计稿 1868:11652）外壳 ───────────
   主视觉是 375×812 的整页背景层 + 压在上面的表单/按钮/规则；
   导航是毛玻璃固定层，TabBar 固定；内容在内部滚动。 */
.mzh-phone--booking {
  height: var(--booking-page-height);
  overflow: clip;
  /* 滚出主视觉后露出渐变末色，不让下面变白 */
  background: var(--color-bg-booking-page);
}

.mzh-booking__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.mzh-booking__scroll-inner {
  position: relative;
  /* 表单与按钮参与同一文档流，错误提示增高时一起向下排布。 */
  padding-top: var(--booking-card-y);
  /* 底部留出 TabBar 高度，保证规则文字能滚出来读完 */
  padding-bottom: var(--tab-bar-area-height);
}

.mzh-booking__scroll-inner .mzh-booking-form {
  position: relative;
  inset: auto;
  margin: 0 var(--booking-card-x) var(--spacing-lg);
}

.mzh-booking__cta {
  display: flex;
  margin: 0 var(--booking-btn-x);
  /* banner/主视觉是绝对定位层，静态元素会被它盖住 —— 必须显式抬起来 */
  position: relative;
  z-index: var(--booking-overlay-z);
}

/* 规则块由生成器放在流里，这里补上它与按钮之间的间距 */
.mzh-phone--booking mzh-rules {
  margin-top: var(--booking-rules-gap-y);
  position: relative;
  z-index: var(--booking-overlay-z);
}

.mzh-phone--booking .mzh-nav,
.mzh-phone--booking .mzh-home__tabbar-area {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: var(--booking-overlay-z);
}

.mzh-phone--booking .mzh-nav {
  top: 0;
}

.mzh-phone--booking .mzh-home__tabbar-area {
  bottom: 0;
  margin-top: 0;
}

/* ─────────── 我的页（设计稿 1871:16589）外壳 ─────────── */
.mzh-phone--mine {
  height: var(--mine-page-height);
  overflow: clip;
  background: var(--color-bg-mine-page);
}

.mzh-phone--mine .mzh-member-card,
.mzh-phone--mine .mzh-icon-menu,
.mzh-phone--mine .mzh-nav,
.mzh-phone--mine .mzh-home__tabbar-area {
  z-index: var(--booking-overlay-z);
}

.mzh-phone--mine .mzh-member-mall {
  position: absolute;
  z-index: var(--booking-overlay-z);
}

.mzh-phone--mine .mzh-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}
.mzh-phone--mine .mzh-nav__time { color:var(--color-action-on-primary); }
.mzh-phone--mine .mzh-nav__statusbar { left:var(--mine-nav-status-x); }
.mzh-phone--mine .mzh-nav__capsule { left:auto; right:var(--mine-nav-capsule-right); top:var(--mine-nav-capsule-top); }

.mzh-phone--mine .mzh-home__tabbar-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top: 0;
}

/* 头像与问候 */
.mzh-mine__avatar {
  position: absolute;
  left: var(--mine-avatar-x);
  top: var(--mine-avatar-y);
  width: var(--mine-avatar-size);
  height: var(--mine-avatar-size);
  display: block;
  z-index: var(--booking-overlay-z);
}

.mzh-mine__hello,
.mzh-mine__name {
  position: absolute;
  z-index: var(--booking-overlay-z);
  white-space: nowrap;
}

.mzh-mine__hello {
  left: var(--mine-hello-x);
  top: var(--mine-hello-y);
  font-size: var(--mine-hello-size);
  line-height: var(--mine-hello-size);
  font-weight: var(--mine-hello-weight);
  color: var(--color-text-inverse);
}

.mzh-mine__name {
  left: var(--mine-hello-x);
  top: var(--mine-name-y);
  font-size: var(--mine-name-size);
  line-height: var(--typography-display-line-height);
  font-weight: var(--typography-weight-semibold); /* hero */
  color: var(--color-text-inverse);
}
.mzh-mine__settings { position:absolute; left:var(--mine-settings-x); top:var(--mine-settings-y); width:var(--spacing-2xl); height:var(--spacing-2xl); z-index:var(--booking-overlay-z); }
.mzh-mine__settings img { display:block; transform:var(--mine-settings-rotation); }
.mzh-mine__orders { position:absolute; left:var(--mine-content-x); top:var(--mine-orders-y); width:var(--mine-func-w); height:var(--mine-orders-h); overflow:hidden; color:var(--color-action-on-primary); z-index:var(--booking-overlay-z); }
.mzh-mine__orders-title { position:absolute; top:var(--mine-orders-title-y); left:0; font-size:var(--typography-subtitle-font-size); line-height:var(--typography-subtitle-line-height); font-weight:var(--typography-weight-medium); }
.mzh-mine__orders-note { position:absolute; top:var(--mine-orders-note-y); left:var(--mine-orders-note-x); width:var(--mine-orders-note-w); display:flex; justify-content:space-between; align-items:center; opacity:var(--mine-points-opacity); font-size:var(--typography-caption-font-size); line-height:var(--typography-caption-line-height); white-space:nowrap; }
.mzh-mine__orders-track, .mzh-mine__orders-fill { position:absolute; left:0; top:var(--mine-orders-track-y); height:var(--mine-orders-track-h); border-radius:var(--radius-full); }
.mzh-mine__orders-track { width:100%; background:var(--mine-orders-track-bg); }
.mzh-mine__orders-fill { width:var(--mine-orders-fill-w); background:var(--color-bg-primary); }
.mzh-mine__orders-dots img { position:absolute; top:var(--mine-orders-dot-y); }
.mzh-mine__notice { width:var(--booking-dialog-w); max-width:calc(100% - var(--spacing-3xl)); padding:var(--spacing-xl); border:0; border-radius:var(--radius-xl); background:var(--color-bg-primary); color:var(--color-text-primary); }
.mzh-mine__notice::backdrop { background:var(--booking-dialog-scrim); }
.mzh-mine__notice p { font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); }
.mzh-mine__notice button { display:block; margin-left:auto; border:0; padding:var(--spacing-sm) var(--spacing-md); background:var(--color-bg-brand-alpha-10); color:var(--color-text-brand); border-radius:var(--radius-md); font:inherit; cursor:pointer; }

.mzh-quote-type { position:fixed; margin:0; padding:0; border:0; max-width:none; max-height:none; overflow:hidden; border-radius:var(--radius-3xl); background:var(--booking-dialog-scrim); }
.mzh-quote-type::backdrop { background:transparent; }
.mzh-quote-type[open] { display:grid; place-items:center; }
.mzh-quote-type__panel { position:relative; width:var(--quote-type-width); height:var(--quote-type-height); overflow:hidden; }
.mzh-quote-type__header { position:absolute; left:var(--quote-type-header-x); top:var(--quote-type-header-y); width:var(--quote-type-header-width); height:var(--quote-type-header-height); border-radius:var(--radius-panel-detail); background-size:100% 100%; }
.mzh-quote-type__texture { position:absolute; left:var(--quote-type-texture-x); top:var(--quote-type-texture-y); mask-position:var(--quote-type-texture-mask-position); mask-size:var(--quote-type-texture-mask-size); mask-repeat:no-repeat; }
.mzh-quote-type__texture img { display:block; }
.mzh-quote-type h2 { position:absolute; left:var(--quote-type-title-x); top:var(--quote-type-title-y); transform:translateY(-50%); margin:0; color:var(--color-text-inverse); font-family:var(--typography-family-marketing); font-size:var(--typography-display-font-size); font-weight:var(--typography-weight-regular); line-height:var(--booking-title-lh); text-shadow:var(--booking-hero-shadow); white-space:nowrap; }
.mzh-quote-type__body { position:absolute; left:0; top:var(--quote-type-body-y); }
.mzh-quote-type__stars { position:absolute; left:var(--quote-type-stars-x); top:var(--quote-type-stars-y); width:var(--quote-type-stars-width); height:var(--quote-type-stars-height); }
.mzh-quote-type__options { position:absolute; left:var(--quote-type-options-x); top:var(--quote-type-options-y); display:flex; gap:var(--quote-type-options-gap); }
.mzh-quote-type__close { position:absolute; left:var(--quote-type-close-x); top:var(--quote-type-header-y); display:grid; place-items:center; width:var(--quote-type-close-size); height:var(--quote-type-close-size); padding:0; border:0; border-radius:0 var(--radius-panel-detail); background:var(--booking-row-text-ph); cursor:pointer; }
.mzh-quote-type__close:focus-visible { outline:var(--border-width-default) solid var(--color-text-inverse); outline-offset:var(--spacing-xs); }
.mzh-quote-type__option { display:flex; flex-direction:column; align-items:center; gap:var(--quote-type-label-gap); width:var(--quote-type-option-size); padding:0; border:0; background:none; color:var(--color-text-secondary); font:inherit; font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); cursor:pointer; }
.mzh-quote-type__art { position:relative; display:block; width:var(--quote-type-option-size); height:var(--quote-type-option-size); overflow:hidden; border-radius:var(--radius-md); background:var(--quote-type-image-bg); }
.mzh-quote-type__photo { position:absolute; left:0; top:0; display:block; width:var(--quote-type-option-size); height:var(--quote-type-option-size); object-fit:cover; opacity:var(--opacity-secondary); }
.mzh-quote-type__option:nth-child(2) .mzh-quote-type__photo { top:var(--quote-type-exterior-y); width:var(--quote-type-exterior-width); height:var(--quote-type-exterior-height); }
.mzh-quote-type__indicator { position:absolute; top:var(--quote-type-indicator-y); left:var(--quote-type-indicator-x); display:grid; place-items:center; width:var(--quote-type-indicator-size); height:var(--quote-type-indicator-size); border-radius:var(--radius-full); background:var(--booking-row-text-ph); }
.mzh-quote-type__option:first-child .mzh-quote-type__indicator { left:var(--quote-type-indicator-home-x); }
.mzh-quote-type__option[aria-pressed=true] { color:var(--color-text-brand); }
.mzh-quote-type__option[aria-pressed=true] .mzh-quote-type__photo { opacity:1; }
.mzh-quote-type__option[aria-pressed=true] .mzh-quote-type__indicator { background:var(--button-primary-bg-default); }
.mzh-quote-type__option:focus-visible { outline:var(--border-width-default) solid var(--color-text-brand); outline-offset:var(--spacing-xs); border-radius:var(--radius-md); }

/* ─────────── 服务案例页（设计稿 1861:9770）外壳 ─────────── */
.mzh-phone--case {
  height: var(--layout-viewport-height);
  /* ★ 壳固定一屏 + 壳内滚动（2026-09-30 用户要求「案例页可以滑动」）：
     第三行卡片 y626..830 超出 812 被裁掉 18px。改成壳内滚动容器。 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-page);
}

/* 案例列表的滚动容器：包住导航 + 分类 + 列表 */
.mzh-case-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mzh-case-scroll::-webkit-scrollbar {
  display: none;
}

/* ★ 底部留白（TabBar 58 + 系统区 34）。
   ⚠️ 本页所有内容层（bg/caseNav/caseList/nav）全是 position:absolute ——
   它们脱离正常流，容器里没有任何正常流子元素；手册「::after 留白」
   必须出现在内容**下方**才有效，直接 height:92 会贴在顶部 y0、完全无效。
   正确算法：把伪元素高度撑满「内容底 + TabBar 预留」——
   list-y 194 + list-h 636 = 内容底 830（第三行卡超出 812 的部分），
   + 92 预留 = 922 = scrollHeight。
   滚到底时卡6底 830 落在视口 y830−110 = 720 = TabBar 顶，恰好不被遮住。 */
.mzh-case-scroll::after {
  content: "";
  display: block;
  height: calc(var(--case-list-list-y) + var(--case-list-list-h) + var(--case-list-tabbar-reserved));
}

/* ★ 导航保持 absolute —— containing block 变为 .mzh-case-scroll（position:relative），
   仍锚在滚动容器顶部 y0，且 absolute 子级会随内容一起滚走（与首页「导航随内容滚」同模式）。
   状态栏与胶囊是它的绝对定位子级，相对它自己定位，不受影响。
   pointer-events:none —— 导航空白区不吞滚动手势（本页导航无按钮）。 */
.mzh-phone--case .mzh-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

.mzh-case__bg {
  position: absolute;
  inset: 0;
  width: var(--case-list-bg-w);
  height: var(--case-list-bg-h);
  display: block;
  z-index: 0;
}

/* ★ 层叠：滚动容器内的定位层（nav / caseNav / caseList）要高于背景图。
   tabbar-area 用壳级更高 z（home-tabbar-z），保证 TabBar 压在内容上。 */
.mzh-phone--case .mzh-case-nav,
.mzh-phone--case .mzh-case-list,
.mzh-phone--case .mzh-nav {
  z-index: var(--booking-overlay-z);
}

.mzh-phone--case .mzh-home__tabbar-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin-top: 0;
  z-index: var(--home-tabbar-z);
}

/* ─────────── 附近门店页（设计稿 1868:12000）外壳 ─────────── */
.mzh-phone--store {
  height: var(--layout-viewport-height);
  display: block;
  overflow: hidden;
  background: var(--color-bg-page);
}

.mzh-phone--store-detail {
  height: var(--layout-viewport-height);
  overflow: hidden;
  background: var(--color-bg-page);
}

.mzh-phone--messages { height: var(--layout-viewport-height); overflow-y: auto; scrollbar-width: none; }
.mzh-messages__bg { position: absolute; inset: 0; width: var(--layout-page-width); height: var(--layout-viewport-height); pointer-events: none; }
.mzh-messages__list { position: relative; display: flex; flex-direction: column; gap: var(--spacing-md); margin: var(--spacing-md) var(--spacing-lg) 0; padding-bottom: var(--spacing-lg); }

.mzh-store__bg {
  position: absolute;
  inset: 0;
  width: var(--store-bg-w);
  height: var(--store-bg-h);
  display: block;
  z-index: 0;
}

/* 顶部栏：绝对定位贴壳顶；pointer-events:none 不吃滚动手势
   （返回键在组件里自己声明 pointer-events:auto） */
.mzh-phone--store .mzh-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

/* 层叠：顶部栏 / 分类行 / 门店列表 都要高于背景图 */
.mzh-phone--store .mzh-nav,
.mzh-phone--store .mzh-case-nav,
.mzh-phone--store .mzh-store-list {
  z-index: var(--store-overlay-z);
}

/* 页面说明过去渲染在这里（.mzh-page-note），按用户要求已删除 ——
   同样的话现在只写在生成 HTML 的注释里，不占页面顶部。 */
.mzh-phone--points { height: var(--layout-viewport-height); overflow-y: auto; scrollbar-width: none; }
.mzh-points__bg { position: absolute; inset: 0; width: var(--layout-page-width); height: var(--layout-viewport-height); }
.mzh-points__summary { position: relative; height: var(--points-page-hero-h); flex: none; color: var(--color-action-on-primary); }
.mzh-points__summary > strong { position: absolute; left: var(--spacing-lg); top: var(--points-page-balance-y); font-size: var(--points-page-balance-size); line-height: var(--points-page-balance-line); font-weight: var(--typography-weight-semibold); /* hero */ }
.mzh-points__summary > span { position: absolute; left: var(--points-page-unit-x); top: var(--points-page-unit-y); font-size: var(--typography-caption-font-size); line-height: var(--typography-caption-line-height); }
.mzh-points__art { position: absolute; left: var(--points-page-art-x); top: var(--points-page-art-y); width: var(--points-page-art-crop); height: var(--points-page-art-crop); overflow: hidden; }
.mzh-points__art mzh-image { position: absolute; left: var(--points-page-art-offset); top: var(--points-page-art-offset-y); width: var(--points-page-art-size); height: var(--points-page-art-size); transform:var(--points-page-art-transform); }
.mzh-points__panel { position: relative; flex: none; min-height: var(--points-page-panel-h); background: var(--color-bg-primary); border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; padding: var(--points-page-list-top) var(--spacing-lg) var(--spacing-2xl); }
.mzh-points__list { display: flex; flex-direction: column; gap: var(--spacing-md); }
.mzh-points__panel .mzh-case-nav { top:var(--spacing-sm); }
.mzh-points__panel .mzh-case-nav__cats { width:var(--points-page-tabs-width); justify-content:center; gap:var(--points-page-tabs-gap); }
.mzh-points__panel .mzh-case-nav__cat { width:auto; padding:0 var(--case-list-catnav-pill-pad); }
.mzh-points__panel .mzh-case-nav__cat[aria-selected="true"]::after { left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); width:var(--spacing-2xl); }
.mzh-points__panel .mzh-case-nav__cat[aria-selected="true"] .mzh-case-nav__cat-label { opacity:1; }
.mzh-points__list > [hidden] { display:none; }


.mzh-points__art mzh-image { border-radius: 0; background: transparent; overflow: visible; }

/* 编辑个人信息：复用绿色背景、Nav、Avatar、FormRow 与 Divider。 */
.mzh-mine__avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); }
.mzh-phone--profile { height: var(--mine-page-height); }
.mzh-profile__card { position: absolute; left: var(--profile-page-card-x); top: var(--profile-page-card-y); width: var(--profile-page-card-w); height: var(--profile-page-card-h); }
.mzh-profile__panel { position: absolute; left: var(--profile-page-panel-x); top: var(--profile-page-panel-y); width: var(--profile-page-panel-w); height: var(--profile-page-panel-h); background: var(--color-bg-primary); border-radius: var(--radius-3xl) var(--radius-xs) var(--radius-3xl) var(--radius-xs); }
.mzh-profile__fields { position: absolute; top: var(--profile-page-fields-top); left: var(--spacing-lg); width: var(--profile-page-fields-w); display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-md) 0; }
.mzh-profile__avatar { position: absolute; left: var(--profile-page-avatar-x); top: 0; width: var(--profile-page-avatar-size); height: var(--profile-page-avatar-size); background: transparent; }
.mzh-profile__camera { position: absolute; left: var(--profile-page-camera-x); top: var(--profile-page-camera-y); }
.mzh-profile__feedback { position: absolute; top: var(--profile-page-card-h); left: var(--spacing-lg); width: var(--profile-page-fields-w); color: var(--color-text-primary); background: var(--color-bg-primary); padding: var(--spacing-sm); border-radius: var(--radius-md); font-size: var(--typography-body-font-size); line-height: var(--typography-body-line-height); }

.mzh-phone--warranty { height: var(--mine-page-height); }
.mzh-warranty__bg { position: absolute; left: 0; top: 0; }
.mzh-warranty__list { position: absolute; top: var(--warranty-page-list-top); left: var(--spacing-lg); width: var(--warranty-card-width); display: flex; flex-direction: column; gap: var(--warranty-page-list-gap); }

.mzh-phone--orders { height: var(--layout-page-height); }
.mzh-orders__bg { position: absolute; top: 0; left: 0; }
.mzh-orders__list { position: absolute; top: var(--orders-page-list-top); left: var(--spacing-lg); right: var(--spacing-lg); bottom: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: var(--spacing-md); padding-bottom: var(--spacing-lg); }
.mzh-phone--orders .mzh-nav__back { opacity:var(--store-title-opacity); }
.mzh-phone--orders .mzh-nav__title { color:var(--store-title-color); }
.mzh-phone--orders .mzh-case-nav__cats { width:calc(var(--case-list-nav-w) + var(--spacing-lg)); }
.mzh-phone--orders .mzh-case-nav__cat { width:auto; padding:0 var(--case-list-catnav-pill-pad); }
.mzh-phone--orders .mzh-case-nav__cat[aria-selected="true"]::after { left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); }
.mzh-phone--orders .mzh-case-nav__cat:first-child::after { width:var(--spacing-2xl); }
.mzh-phone--orders .mzh-case-nav__cat[aria-selected="true"] .mzh-case-nav__cat-label { opacity:1; }
.mzh-orders__list > [hidden] { display:none; }
.mzh-orders__dialog { width: var(--booking-dialog-w); max-width: calc(100% - var(--spacing-3xl)); border: 0; border-radius: var(--radius-lg); padding: var(--spacing-xl); color: var(--color-text-primary); background: var(--color-bg-primary); }
.mzh-orders__dialog h2 { margin: 0 0 var(--spacing-lg); font-size: var(--typography-title-font-size); }
.mzh-orders__dialog p { margin: 0 0 var(--spacing-lg); }
.mzh-orders__dialog label { display: block; }
.mzh-orders__dialog label[hidden] { display: none; }
.mzh-orders__dialog input { display: block; width: 100%; margin-top: var(--spacing-sm); padding: var(--spacing-sm); border: var(--border-width-default) solid var(--color-border-light); border-radius: var(--radius-md); font: inherit; }
.mzh-orders__dialog form > div { display: flex; justify-content: flex-end; gap: var(--spacing-xl); margin-top: var(--spacing-lg); }
.mzh-orders__dialog button { color: var(--color-text-brand); }
/* 订单详情与人员查询共用既有小程序壳。 */
.mzh-phone--order-detail,.mzh-phone--person-query { height:var(--layout-page-height); background:linear-gradient(to bottom,var(--order-detail-gradient-top),var(--button-secondary-bg-pressed) var(--order-detail-gradient-end-query)); }
.mzh-order-detail__scroll { position:absolute; top:var(--order-detail-nav-height); bottom:0; left:0; right:0; overflow-y:auto; scrollbar-width:none; }
.mzh-order-detail__scroll::-webkit-scrollbar { display:none; }
.mzh-order-detail__timeline { position:relative; display:flex; flex-direction:column; gap:var(--spacing-xl); margin:var(--spacing-lg) var(--spacing-lg); }
.mzh-order-detail__timeline::before { content:''; position:absolute; top:var(--order-detail-card-padding); bottom:var(--order-detail-card-padding); left:var(--order-detail-time-top); width:var(--order-detail-rail-width); border-left:var(--order-detail-rail-width) dashed var(--color-border-default); }
.mzh-order-step:nth-child(-n+3)::before { content:''; position:absolute; top:var(--order-detail-time-top); bottom:calc(0px - var(--spacing-xl) - var(--order-detail-time-top)); left:var(--order-detail-time-top); border-left:var(--order-detail-rail-width) solid var(--color-action-primary); }
.mzh-person-query__hero { position:absolute; top:var(--order-detail-query-hero-top); height:var(--order-detail-query-hero-height); width:var(--layout-page-width); overflow:hidden; }
.mzh-person-query__hero>img { position:absolute; width:var(--order-detail-query-hero-width); height:var(--order-detail-query-hero-image-height); left:var(--order-detail-query-hero-left); top:var(--order-detail-query-hero-image-top); max-width:none; }
.mzh-person-query__panel { position:absolute; top:var(--order-detail-query-panel-top); left:var(--spacing-lg); width:var(--order-detail-query-panel-width); height:var(--order-detail-query-panel-height); background:var(--color-bg-primary); border-radius:var(--radius-xl); padding:var(--spacing-xl); box-sizing:border-box; }
.mzh-person-query [role="tablist"] { display:flex; justify-content:center; gap:var(--order-detail-query-tabs-gap); margin-bottom:var(--spacing-xl); }
.mzh-person-query [role="tab"] { position:relative; width:var(--order-card-warranty-width); height:var(--order-detail-query-tabs-height); border:0; background:transparent; font:inherit; font-size:var(--typography-subtitle-font-size); font-weight:var(--typography-weight-medium); color:var(--color-text-primary); cursor:pointer; }
.mzh-person-query [role="tab"][aria-selected="true"] { color:var(--color-text-brand); }
.mzh-person-query [role="tab"][aria-selected="true"]::after { content:''; position:absolute; width:var(--order-detail-query-tabs-line-width); height:var(--order-detail-query-tabs-line-height); bottom:0; left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); background:var(--color-action-primary); border-radius:var(--radius-full); }
.mzh-person-query form { display:flex; flex-direction:column; gap:var(--order-detail-query-field-gap); }
.mzh-person-query label { display:flex; align-items:center; height:var(--order-detail-query-field-height); border:var(--border-width-default) solid var(--color-border-light); border-radius:var(--radius-md); padding:0 var(--order-detail-query-field-padding); gap:var(--order-detail-query-icon-gap); box-sizing:border-box; }
.mzh-person-query label>img { width:auto; height:var(--order-detail-query-field-icon-height); object-fit:contain; }
.mzh-person-query mzh-input { flex:1; min-width:0; }
.mzh-person-query .mzh-atom-input { border:0; border-radius:0; outline:none; box-shadow:none; padding:0; background:transparent; height:var(--order-detail-query-field-height); font:inherit; color:var(--color-text-primary); }
.mzh-person-query__submit { position:absolute; top:var(--order-detail-query-button-top); left:var(--spacing-lg); }
.mzh-person-query__feedback { position:absolute; top:calc(var(--order-detail-query-button-top) + var(--control-height-lg) + var(--spacing-lg)); left:var(--spacing-lg); right:var(--spacing-lg); margin:0; color:var(--color-text-tertiary); font-size:var(--typography-body-font-size); }
.mzh-order-detail__preview { max-width:var(--order-detail-query-panel-width); border:0; border-radius:var(--radius-xl); background:var(--color-bg-primary); padding:var(--spacing-lg); }
.mzh-order-detail__preview img { max-width:100%; }

.mzh-phone--order-detail { background:linear-gradient(to bottom,var(--order-detail-gradient-top),var(--button-secondary-bg-pressed) var(--order-detail-gradient-end-completed)); }
.mzh-phone--order-detail:has([data-inactive="true"]) { background:linear-gradient(to bottom,var(--order-detail-gradient-top),var(--button-secondary-bg-pressed) var(--order-detail-gradient-end-active)); }

.mzh-person-query label:has(mzh-input[invalid]) { border-color: var(--color-border-error); }

.mzh-orders__dialog input::placeholder { color: var(--color-text-placeholder); opacity: 1; }

.mzh-phone--order-review { height:var(--layout-page-height); background:linear-gradient(to bottom,var(--order-detail-gradient-top),var(--color-bg-page) var(--order-detail-gradient-end-active)); }
.mzh-order-review__list { position:absolute; top:var(--order-review-top); left:var(--spacing-lg); width:var(--button-native-values-gradient48-width); display:flex; flex-direction:column; gap:var(--spacing-md); max-height:calc(var(--layout-page-height) - var(--order-review-top) - var(--order-review-feedback-bottom)); overflow:auto; scrollbar-width:none; }
.mzh-order-review__list>section { background:var(--color-bg-primary); border-radius:var(--radius-md); padding:var(--spacing-lg) var(--spacing-md); box-sizing:border-box; flex:none; }
.mzh-order-review__summary { height:var(--order-review-summary-height); position:relative; }
.mzh-order-review__summary::before { content:''; position:absolute; left:0; top:var(--order-detail-time-top); width:var(--spacing-xs); height:var(--order-card-accent-height); border-radius:var(--radius-full); background:var(--color-action-primary); }
.mzh-order-review h2 { margin:0 0 var(--spacing-lg); font-size:var(--typography-title-font-size); line-height:var(--typography-title-line-height); font-weight:var(--typography-weight-medium); }
.mzh-order-review dl { margin:0; display:flex; flex-direction:column; gap:var(--spacing-sm); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); }
.mzh-order-review dl>div { display:flex; gap:var(--spacing-md); }
.mzh-order-review dt { color:var(--color-text-quaternary); }
.mzh-order-review dd { margin:0; }
.mzh-order-review__list>.mzh-order-review__ratings { height:var(--order-review-rating-height); padding:var(--spacing-xl) var(--spacing-lg); border-radius:var(--radius-xl); display:flex; flex-direction:column; gap:var(--spacing-lg); }
.mzh-order-review__editor { height:var(--order-review-editor-height); }
.mzh-order-review textarea { display:block; width:100%; height:var(--order-review-textarea-height); resize:none; border:0; padding:0; background:transparent; outline:none; font:inherit; font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); color:var(--color-text-primary); }
.mzh-order-review textarea::placeholder { color:var(--color-text-placeholder); opacity:1; }
.mzh-order-review output { display:block; text-align:right; margin-top:var(--spacing-4xl); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); color:var(--color-action-disabled); }
.mzh-order-review__uploads { min-height:var(--order-review-upload-height); }
.mzh-order-review__uploads p { margin:0 0 var(--spacing-md); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); }
.mzh-order-review__photos { display:flex; flex-wrap:wrap; gap:var(--spacing-sm); }
.mzh-order-review__photo,.mzh-order-review__upload { position:relative; width:var(--order-review-photo-size); height:var(--order-review-photo-size); }
.mzh-order-review__photo>button,.mzh-order-review__upload { border:0; padding:0; background:transparent; cursor:pointer; }
.mzh-order-review__photo mzh-image { width:var(--order-review-photo-size); height:var(--order-review-photo-size); border-radius:var(--radius-lg); }
.mzh-order-review__photo mzh-icon-button { position:absolute; right:0; top:0; }
.mzh-order-review__photo .mzh-atom-icon-button { width:var(--order-review-close-size); height:var(--order-review-close-size); padding:0; }
.mzh-order-review__photo .mzh-atom-icon-button img { width:var(--order-review-close-size); height:var(--order-review-close-size); }
.mzh-order-review__submit { position:absolute; bottom:var(--order-review-submit-bottom); left:var(--spacing-lg); }
.mzh-order-review__feedback { position:absolute; bottom:var(--order-review-feedback-bottom); left:var(--spacing-lg); background:var(--color-bg-primary); color:var(--color-text-primary); font-size:var(--typography-caption-font-size); margin:0; }
.mzh-order-review__preview { border:0; border-radius:var(--radius-xl); max-width:var(--layout-page-width); padding:var(--spacing-lg); }
.mzh-order-review__preview img { display:block; max-width:100%; }

/* P19 我的合同：复用 ImageStrip，合同附件保持原设计尺寸。 */
.mzh-phone--contracts { height:var(--layout-page-height); background:linear-gradient(to bottom,var(--order-detail-gradient-top),var(--button-secondary-bg-pressed) var(--contracts-gradient-end)); }
.mzh-contracts { position:absolute; top:var(--contracts-list-top); left:var(--spacing-lg); right:var(--spacing-lg); bottom:0; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; gap:var(--spacing-lg); }
.mzh-phone--contracts .mzh-nav__back-icon { width:var(--store-back-icon-w); height:var(--store-back-icon-h); }
.mzh-phone--contracts .mzh-case-nav__cats { width:calc(var(--case-list-nav-w) + var(--spacing-lg)); }
.mzh-phone--contracts .mzh-case-nav__cat[aria-selected="true"]::after { left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); }
.mzh-phone--contracts .mzh-case-nav__cat[aria-selected="true"] .mzh-case-nav__cat-label { opacity:1; }

/* 浏览记录：共享导航与现有产品行、案例卡。 */
:is(.mzh-phone--history-products,.mzh-phone--history-cases) { height:var(--layout-page-height); background:var(--history-page-gradient); }
:is(.mzh-phone--history-products,.mzh-phone--history-cases) .mzh-nav__back-icon { width:var(--store-back-icon-w); height:var(--store-back-icon-h); }
:is(.mzh-phone--history-products,.mzh-phone--history-cases) .mzh-case-nav__cats { width:var(--history-page-nav-width); justify-content:center; gap:var(--history-page-nav-gap); }
:is(.mzh-phone--history-products,.mzh-phone--history-cases) .mzh-case-nav__cat { width:auto; padding:0 var(--case-list-catnav-pill-pad); }
:is(.mzh-phone--history-products,.mzh-phone--history-cases) .mzh-case-nav__cat[aria-selected="true"]::after { left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); }
:is(.mzh-phone--history-products,.mzh-phone--history-cases) .mzh-case-nav__cat[aria-selected="true"] .mzh-case-nav__cat-label { opacity:1; }
.mzh-phone--history-cases .mzh-case-nav__cat-label { opacity:1; }
.mzh-phone--history-cases .mzh-case-nav__cat:last-child::after { width:var(--spacing-2xl); left:calc(var(--case-detail-center) + var(--case-card-cover-half-pixel)); }
.mzh-history__products,.mzh-history__cases { position:absolute; top:var(--history-page-list-top); left:var(--spacing-lg); right:var(--spacing-lg); bottom:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; padding-bottom:var(--spacing-lg); }
.mzh-history__products .mzh-product-group { gap:0; }
.mzh-history__products .mzh-product-group__title { display:none; }
.mzh-history__products .mzh-product-group__thumb { position:relative; display:block; }
.mzh-history__products .mzh-product-group__thumb-img { --thumb-img-x:0px; --thumb-img-y:0px; position:absolute; left:var(--thumb-img-x); top:var(--thumb-img-y); }
.mzh-history__cases { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--spacing-md); align-content:start; }
.mzh-history__cases mzh-case-card { width:var(--case-list-card-w); height:var(--case-list-card-h); }
.mzh-history__cases .mzh-case-card__cover-img { position:relative; }
.mzh-contracts__preview { padding:var(--spacing-lg); max-width:var(--layout-page-width); border:0; border-radius:var(--radius-xl); background:var(--color-bg-primary); }
.mzh-contracts__preview img { display:block; max-width:100%; max-height:var(--layout-page-height); object-fit:contain; }
.mzh-contracts__preview button { float:right; padding:var(--spacing-sm) var(--spacing-md); border:0; border-radius:var(--radius-md); background:var(--button-secondary-bg-pressed); color:var(--color-text-primary); font:inherit; cursor:pointer; }

/* P20 沿用合同页壳与案例卡尺寸。 */
.mzh-phone--favorites { height:var(--layout-page-height); background:linear-gradient(to bottom,var(--order-detail-gradient-top),var(--button-secondary-bg-pressed) var(--contracts-gradient-end)); }
.mzh-favorites { position:absolute; top:var(--contracts-top); left:var(--spacing-lg); right:var(--spacing-lg); bottom:0; overflow-y:auto; display:grid; grid-template-columns:repeat(2,var(--case-list-card-w)); column-gap:var(--case-list-card-gap-x); row-gap:var(--case-list-card-gap-y); align-content:start; scrollbar-width:none; }
.mzh-favorites mzh-case-card { height:var(--case-list-card-h); box-sizing:border-box; }

/* P21 报价测算第一步：三步导航与产品单选。 */
.mzh-phone--quote { height:var(--layout-page-height); background:var(--button-secondary-bg-pressed); }
.mzh-quote__background { position:absolute; top:0; left:0; pointer-events:none; }
.mzh-quote { position:absolute; top:var(--quote-top); bottom:var(--quote-scroll-bottom); left:var(--spacing-lg); right:var(--spacing-lg); overflow-y:auto; scrollbar-width:none; padding-bottom:var(--spacing-lg); }
.mzh-quote__prompt { margin:0 0 var(--spacing-md); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); color:var(--color-text-secondary); }
.mzh-quote__products { display:grid; grid-template-columns:repeat(2,var(--case-list-card-w)); gap:var(--quote-grid-gap); }
.mzh-quote__next { position:absolute; left:var(--spacing-lg); right:var(--spacing-lg); bottom:var(--quote-footer-bottom); }
.mzh-quote__notice { max-width:var(--contracts-card-width); border:0; border-radius:var(--radius-xl); padding:var(--spacing-xl); background:var(--color-bg-primary); color:var(--color-text-primary); }
.mzh-phone--quote > mzh-nav { z-index:var(--tutorial-overlay-z); }
.mzh-quote__background { z-index:var(--tutorial-page-bg-z); }
.mzh-quote, .mzh-quote__next { z-index:var(--tutorial-content-z); }

/* P22/P23 复用报价壳、步骤与产品画面。 */
.mzh-quote__area { height:var(--quote-input-height); border-radius:var(--radius-md); background:var(--color-bg-primary); display:flex; align-items:center; padding:0 var(--spacing-lg); }
.mzh-quote__area > span { font-size:var(--typography-subtitle-font-size); line-height:var(--typography-subtitle-line-height); font-weight:var(--typography-weight-medium); color:var(--color-text-primary); }
.mzh-quote__error { color:var(--color-feedback-error); font-size:var(--typography-caption-font-size); line-height:var(--typography-caption-line-height); }
.mzh-quote__summary { display:flex; gap:var(--quote-summary-gap); }
.mzh-quote__summary .mzh-quote__product { width:var(--case-list-card-w); flex:none; }
.mzh-quote__area-card { position:relative; width:var(--case-list-card-w); height:var(--quote-product-height); background:var(--color-bg-primary); border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; }
.mzh-quote__area-card > span { position:absolute; top:var(--quote-area-label-top); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); color:var(--color-text-secondary); }
.mzh-quote__area-card strong { /* hero */ font-size:var(--typography-hero-font-size); line-height:var(--typography-hero-line-height); font-weight:var(--typography-weight-semibold); color:var(--color-text-primary); }
.mzh-quote__estimate { height:var(--quote-estimate-height); position:relative; margin-top:var(--quote-estimate-margin-top); color:var(--color-text-inverse); }
.mzh-quote__estimate-bg { position:absolute; top:var(--quote-estimate-bg-top); left:0; right:0; height:var(--quote-estimate-bg-height); background:var(--button-native-values-gradient48-background); border-radius:var(--quote-estimate-radius) var(--radius-sm) var(--quote-estimate-radius) var(--radius-sm); }
.mzh-quote__estimate > img { position:absolute; left:var(--quote-calculator-left); top:var(--quote-calculator-top); }
.mzh-quote__estimate > p { position:absolute; left:var(--quote-estimate-caption-left); top:var(--quote-estimate-caption-top); margin:0; font-size:var(--typography-caption-font-size); line-height:var(--typography-caption-line-height); opacity:var(--filter-tag-fg-opacity); }
.mzh-quote__estimate > strong { /* hero */ position:absolute; right:var(--quote-estimate-value-right); top:var(--quote-estimate-value-top); font-size:var(--typography-hero-font-size); line-height:var(--typography-hero-line-height); font-weight:var(--typography-weight-semibold); }
.mzh-quote__estimate > span { position:absolute; right:var(--quote-estimate-unit-right); top:var(--quote-estimate-unit-top); font-size:var(--typography-body-font-size); line-height:var(--typography-body-line-height); opacity:var(--filter-tag-fg-opacity); }
.mzh-quote__disclaimer { text-align:center; margin:var(--quote-disclaimer-margin) 0 0; font-size:var(--typography-caption-font-size); line-height:var(--typography-caption-line-height); color:var(--color-text-tertiary); }
.mzh-quote__demo { margin:var(--spacing-sm) 0; text-align:center; font-size:var(--typography-caption-font-size); color:var(--color-text-tertiary); }
.mzh-quote__actions { position:absolute; left:var(--spacing-lg); right:var(--spacing-lg); bottom:var(--quote-footer-bottom); display:flex; gap:var(--spacing-md); z-index:var(--tutorial-content-z); }
.mzh-quote__actions .mzh-quote__restart { --mzh-button-width:var(--quote-restart-width); width:var(--quote-restart-width); flex:none; }
.mzh-quote__actions .mzh-quote__contact { --mzh-button-width:var(--quote-contact-width); width:var(--quote-contact-width); flex:none; position:relative; background:transparent; }

/* Referral source 1877:19942 / 1877:20144 */
.mzh-phone--referral{background:var(--referral-value-1)}.mzh-phone--referral-share{background:linear-gradient(180deg,var(--referral-value-2) 0%,var(--referral-value-3) var(--referral-share-gradient-stop))}
.mzh-phone--referral .mzh-nav{z-index:3;color:var(--referral-value-4)}.mzh-phone--referral .mzh-nav__title,.mzh-phone--referral .mzh-nav__time{color:var(--referral-value-4)}.mzh-phone--referral .mzh-nav__back img{filter:brightness(0) invert(1)}
.mzh-referral__hero{position:absolute;top:0;left:0;width:var(--referral-value-5);height:var(--referral-value-6);overflow:hidden}.mzh-referral__hero>img{position:absolute;width:var(--referral-value-7);height:var(--referral-value-8);max-width:none;left:var(--referral-value-9);top:var(--referral-value-10);object-fit:cover}.mzh-referral__hero>span{position:absolute;inset:0;background:linear-gradient(180deg,var(--referral-value-11),transparent var(--referral-value-12))}
.mzh-referral__background{position:absolute;left:0;top:var(--referral-value-13);width:var(--referral-value-5);height:var(--referral-value-14)}.mzh-referral__content{position:absolute;top:var(--referral-value-15);left:var(--referral-value-16);width:var(--referral-value-17);display:flex;flex-direction:column;gap:var(--referral-value-16)}
.mzh-referral__person,.mzh-referral__form{box-sizing:border-box;padding:var(--referral-value-16);border-radius:var(--referral-value-16);box-shadow:0 var(--referral-value-18) var(--referral-value-19) var(--referral-value-20)}.mzh-referral__person{display:flex;gap:var(--referral-value-18);align-items:center;background:linear-gradient(0deg,var(--referral-value-21),var(--referral-value-22));height:var(--referral-value-23)}.mzh-referral__person mzh-avatar,.mzh-referral__person img{width:var(--referral-value-24);height:var(--referral-value-24)}.mzh-referral__person strong,.mzh-referral__form>strong{font-size:var(--referral-value-16);line-height:var(--referral-value-25);font-weight:var(--typography-weight-medium)}.mzh-referral__person p{margin:var(--referral-value-26) 0 0;font-size:var(--referral-value-27);line-height:var(--referral-value-28);color:var(--color-text-tertiary)}
.mzh-referral__form{height:var(--referral-value-29);background:var(--color-bg-primary);display:flex;flex-direction:column;gap:var(--referral-value-19)}.mzh-referral__form>strong{text-align:center;margin-bottom:var(--referral-value-30);white-space:nowrap}.mzh-referral__form label{box-sizing:border-box;display:flex;align-items:center;gap:var(--referral-value-18);height:var(--referral-value-31);flex-shrink:0;padding:0 var(--referral-value-32);border:var(--referral-value-33) solid var(--color-border-light);border-radius:var(--referral-value-18)}.mzh-referral__form mzh-icon,.mzh-referral__form mzh-icon img{width:var(--referral-value-25);height:var(--referral-value-25);flex-shrink:0}.mzh-referral__form mzh-input{flex:1;min-width:0;border:0}.mzh-referral__form input,.mzh-referral__form select,.mzh-referral__form .mzh-picker-trigger{border:0!important;outline:none!important;box-shadow:none!important;background:transparent;color:var(--color-text-primary);font-family:inherit;font-size:var(--referral-value-34);line-height:var(--referral-value-35);width:100%;padding:0}.mzh-referral__form input::placeholder{color:var(--color-action-disabled)}.mzh-referral__form select,.mzh-referral__form .mzh-picker-trigger{appearance:none;flex:1}.mzh-referral__form label>img{width:var(--referral-value-36);height:var(--referral-value-25)}
.mzh-referral__actions{position:absolute;top:var(--referral-value-37);left:var(--referral-value-16);display:flex;gap:var(--referral-value-27)}.mzh-referral__actions mzh-button{box-sizing:border-box;width:var(--referral-value-38);height:var(--referral-value-39);min-height:var(--referral-value-39);font-size:var(--referral-value-16);border-radius:var(--referral-value-27)}.mzh-referral__actions [data-generate]{position:relative;width:var(--referral-value-40);color:var(--color-text-brand);background:none;border:0;box-shadow:none}.mzh-referral__actions [data-generate]>img{position:absolute;width:var(--referral-value-41);height:var(--referral-value-42);left:var(--referral-value-43);top:var(--referral-value-44);max-width:none;z-index:-1}.mzh-referral__actions [data-generate]{isolation:isolate}
.mzh-referral__poster{position:absolute;left:var(--referral-value-45);top:var(--referral-value-46);width:var(--referral-value-47);height:var(--referral-value-48)}.mzh-referral__notice{position:absolute;top:var(--referral-value-55);left:var(--referral-value-16);right:var(--referral-value-16);text-align:center;font-size:var(--referral-value-27);color:var(--color-text-primary);background:var(--color-bg-primary);border-radius:var(--referral-value-18);padding:var(--referral-value-18);z-index:5}

.mzh-phone--referral,.mzh-phone--referral-share{height:var(--layout-page-height);flex-shrink:0}

/* Property activity 1877:20828 */
.mzh-phone--property{height:var(--property-value-1);overflow-y:auto;scrollbar-width:none}.mzh-phone--property::-webkit-scrollbar{display:none}.mzh-phone--property .mzh-nav{flex-shrink:0;z-index:3}.mzh-phone--property .mzh-nav__title,.mzh-phone--property .mzh-nav__time{color:var(--color-action-on-primary)}.mzh-phone--property .mzh-nav__back img{filter:brightness(0) invert(1)}
.mzh-property__surface{position:absolute;left:0;top:0;width:var(--property-value-2);height:var(--property-value-3);overflow:hidden;background:var(--color-bg-page)}.mzh-property__surface .mzh-referral__hero>img{left:0;top:var(--property-value-4);width:var(--property-value-2);height:var(--property-value-5)}.mzh-property__background{position:absolute;left:0;top:var(--property-value-6);width:var(--property-value-2);height:var(--property-value-7)}.mzh-property__content{position:absolute;left:var(--property-value-8);top:var(--property-value-9);width:var(--property-value-10);display:flex;flex-direction:column;align-items:center;gap:var(--property-value-11)}.mzh-property__heading{width:var(--property-value-12);height:var(--property-value-13);flex-shrink:0}.mzh-property__business{box-sizing:border-box;width:var(--property-value-10);height:var(--property-value-14);padding:var(--property-value-8);border-radius:var(--property-value-8);background:linear-gradient(0deg,var(--property-value-15),var(--property-value-16));box-shadow:0 var(--property-value-17) var(--property-value-18) var(--property-value-19)}.mzh-property__business>strong{font-size:var(--property-value-8);line-height:var(--property-value-20);font-weight:var(--typography-weight-medium);color:var(--color-text-brand)}.mzh-property__business>div{display:flex;gap:var(--property-value-11);margin-top:var(--property-value-18)}.mzh-property__mall{position:relative;display:flex;align-items:center;box-sizing:border-box;width:var(--property-value-21);height:var(--property-value-22);flex-shrink:0;border-radius:var(--property-value-8);padding:0 var(--property-value-23);gap:var(--property-value-8);background:linear-gradient(var(--property-mall-gradient-angle),var(--property-value-15),var(--property-value-16));box-shadow:0 var(--property-value-17) var(--property-value-18) var(--property-value-19);color:var(--color-text-brand);font-size:var(--property-value-8);line-height:var(--property-value-20);font-weight:var(--typography-weight-medium)}.mzh-property__mall>mzh-icon:first-child,.mzh-property__mall>mzh-icon:first-child img{width:var(--property-value-24);height:var(--property-value-24)}.mzh-property__mall>mzh-icon:last-child{position:absolute;left:var(--property-value-25);top:var(--property-value-26)}.mzh-property__mall>mzh-icon:last-child,.mzh-property__mall>mzh-icon:last-child img{width:var(--property-value-20);height:var(--property-value-20)}.mzh-property__generate{width:var(--property-value-10);box-sizing:border-box}.mzh-property__rules{width:var(--property-value-10);margin-top:var(--property-value-27);color:var(--color-action-on-primary);display:flex;flex-direction:column;gap:var(--property-value-28)}.mzh-property__rules p{margin:0;font-size:var(--property-value-29);line-height:var(--property-value-30)}.mzh-property__rules p+p{font-size:var(--property-value-11);line-height:var(--property-value-27);opacity:.8}

.mzh-property__mall>mzh-icon:first-child{position:relative}.mzh-property__mall>mzh-icon:first-child img{position:absolute;width:var(--property-mall-icon-width);height:var(--property-mall-icon-height);left:var(--property-mall-icon-x);top:0}

.mzh-phone--referral-share > mzh-share-sheet{position:absolute;top:var(--referral-value-49);left:0}

/* 附近门店：2170:4444 默认列表 / 2172:11549 展开地图。 */
.mzh-phone--store { background-image:var(--store-map-background); }
.mzh-store-map { position:absolute; inset:0; overflow:hidden; height:var(--store-map-map-crop-height); }
.mzh-store-map__image { display:block; width:var(--layout-page-width); height:var(--store-map-map-height); max-width:none; mask-image:var(--store-map-mask); mask-size:var(--layout-page-width) var(--store-map-map-crop-height); mask-repeat:no-repeat; }
.mzh-store-map__pin { position:absolute; }
.mzh-store-sheet { position:absolute; top:var(--store-map-sheet-top); left:0; right:0; bottom:0; z-index:var(--store-overlay-z); display:flex; flex-direction:column; gap:var(--spacing-sm); background:var(--color-bg-primary); border-radius:var(--radius-panel-detail) var(--radius-panel-detail) 0 0; box-shadow:var(--store-map-sheet-shadow); transition:top 0.28s ease; }
.mzh-store-sheet__handle { position:absolute; bottom:100%; left:0; right:0; margin:auto; width:var(--store-map-handle-width); height:var(--store-map-handle-size); display:flex; align-items:center; justify-content:center; touch-action:none; }
.mzh-store-sheet__handle span { position:absolute; bottom:var(--spacing-sm); width:var(--store-map-handle-bar-width); height:var(--store-map-handle-bar-height); border-radius:var(--radius-xs); background:var(--booking-row-text-ph); }
.mzh-store-sheet__handle img { display:none; }
.mzh-store-sheet .mzh-case-nav { position:relative; top:auto; flex:none; }
.mzh-store-sheet .mzh-case-nav__cats { gap:0; justify-content:space-between; cursor:auto; }
.mzh-store-sheet .mzh-case-nav__cat { width:auto; padding:0 var(--spacing-stack-tight); font-weight:var(--typography-weight-regular); }
.mzh-store-sheet .mzh-case-nav__cat[aria-selected="true"] { font-weight:var(--typography-weight-medium); }
.mzh-store-sheet .mzh-case-nav__cat[aria-selected="true"]::after { left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); width:var(--store-map-active-line-width); }
.mzh-store-sheet .mzh-case-nav__cat[aria-selected="true"] .mzh-case-nav__cat-label { opacity:1; }
.mzh-store-sheet__filters { display:flex; gap:var(--spacing-sm); flex:none; padding:0 var(--spacing-lg); }
.mzh-store-sheet__filters button,.mzh-store-sheet__dropdown { height:var(--store-map-filter-height); display:flex; align-items:center; justify-content:center; padding:0 var(--spacing-md); border-radius:var(--radius-sm); background:var(--button-secondary-bg-pressed); color:var(--color-text-tertiary); font-size:var(--typography-caption-font-size); line-height:var(--typography-caption-line-height); white-space:nowrap; }
.mzh-store-sheet__dropdown { position:relative; width:var(--store-map-filter-dropdown-width); padding:0 var(--spacing-xs); }
.mzh-store-sheet__dropdown select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.mzh-store-sheet__filters [data-store-radius] { width:var(--store-map-filter-radius-width); }
.mzh-store-sheet__filters button[aria-pressed="true"] { color:var(--color-text-brand); background:var(--filter-tag-bg-active); box-shadow:inset 0 0 0 var(--case-card-cover-half-pixel) var(--filter-tag-border-active); }
.mzh-store-sheet__scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-lg); }
.mzh-store-sheet__scroll::-webkit-scrollbar { display:none; }
.mzh-store-sheet .mzh-store-list { position:relative; left:0; top:0; height:auto; gap:0; }
.mzh-store-sheet .mzh-store-card { position:relative; }
.mzh-store-sheet .mzh-store-card:nth-child(even) { margin-bottom:var(--spacing-md); }
.mzh-store-sheet .mzh-store-card:nth-child(odd)::after { content:''; position:absolute; left:var(--spacing-md); right:var(--spacing-md); bottom:0; height:var(--border-width-default); background-image:var(--store-map-divider); pointer-events:none; }
.mzh-phone--store[data-map-expanded="true"] .mzh-store-map { height:var(--store-map-mask-height); }
.mzh-phone--store[data-map-expanded="true"] .mzh-store-map__image { mask-image:var(--store-map-expanded-mask); mask-size:var(--layout-page-width) var(--store-map-mask-height); }
.mzh-phone--store[data-map-expanded="true"] .mzh-store-sheet { top:var(--store-map-sheet-map-top); }
.mzh-phone--store[data-map-expanded="true"] .mzh-store-sheet__handle { margin-bottom:var(--spacing-sm); }
.mzh-phone--store[data-map-expanded="true"] .mzh-store-sheet__handle span { display:none; }
.mzh-phone--store[data-map-expanded="true"] .mzh-store-sheet__handle img { display:block; }
@media (prefers-reduced-motion:reduce) { .mzh-store-sheet { transition:none; } }

.mzh-store-sheet__dropdown .mzh-picker-trigger { position:absolute; inset:0; display:block; width:100%; padding:0 var(--spacing-2xl) 0 var(--spacing-xs); color:inherit; background:transparent; text-align:left; overflow:hidden; text-overflow:ellipsis; }
.mzh-store-sheet__dropdown img { margin-left:auto; pointer-events:none; }

/* 消息中心 1.2：顶部三类通知导航，列表由正常文档流落到 y152。 */
.mzh-messages__tabs { position:relative; height:var(--store-nav-row-h); flex:none; }
.mzh-messages__tabs .mzh-case-nav { position:relative; top:0; }
.mzh-messages__tabs .mzh-case-nav__cats { gap:0; justify-content:space-between; cursor:auto; }
.mzh-messages__tabs .mzh-case-nav__cat { width:auto; padding:0 var(--spacing-stack-tight); font-weight:var(--typography-weight-regular); }
.mzh-messages__tabs .mzh-case-nav__cat[aria-selected="true"] { font-weight:var(--typography-weight-medium); }
.mzh-messages__tabs .mzh-case-nav__cat[aria-selected="true"] .mzh-case-nav__cat-label { opacity:1; }
.mzh-messages__tabs .mzh-case-nav__cat[aria-selected="true"]::after { left:var(--case-detail-center); transform:translateX(var(--case-detail-neg-half)); width:var(--notification-card-tab-underline-width); }

/* 教程长列表末项可以完整滚到固定导航上方。 */
.mzh-tutorial__scroll { padding-bottom:var(--tutorial-tabbar-area-h); scrollbar-width:none; }
.mzh-tutorial__scroll::-webkit-scrollbar { display:none; }