/* ==========================================================================
   手机端号段模块样式（/m/hao-*、/m/n/*、/m/g-*）
   --------------------------------------------------------------------------
   仅服务本模块新增的 4 个页型。类名统一 mh- 前缀，与旧 m-resource/index.css
   完全隔离，不覆盖任何既有选择器。
   配色走 theme.css 的 --brand（科技蓝），与 PC 号段页、PC 分享组件同一套色系。
   ========================================================================== */

.mh-hd{
  position:sticky;
  top:0;
  z-index:200;
  display:flex;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 12px;
  background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
  color:#fff;
  box-shadow:0 2px 12px rgba(26,108,255,.22);
}
.mh-hd-b{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff;
  flex:0 0 auto;
}
.mh-hd-b:active{background:rgba(255,255,255,.16)}
.mh-hd-t{
  flex:1;
  min-width:0;
  font-size:16px;
  font-weight:500;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mh-hd-r{
  flex:0 0 auto;
  padding:0 10px;
  height:32px;
  line-height:32px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:13px;
}

.mh-body{
  padding:12px 12px 96px;
  background:#F6F8FC;
  min-height:100vh;
}

/* ---------- 头部信息块 ---------- */
.mh-hero{
  background:#fff;
  border-radius:14px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-hero-n{font-size:18px;font-weight:500;color:#0F172A;line-height:1.35}
/* 语义化 H1（2026-09-16）：上面两个标题此前是 <div>，全站手机端页型 H1 数量为 0。
   换成 <h1> 后视觉必须与原来完全一致 —— 故把浏览器默认的 margin / 粗体清掉。 */
h1.mh-hero-n,h1.mh-numhero-num{margin:0;font-weight:500}
.mh-hero-s{margin-top:6px;font-size:13px;color:#64748B}
.mh-hero-s b{color:#1A6CFF;font-weight:500}
/* 城市×规律页（2026-09-16）：hero 内的独有说明段落（含本市实测数字，用于页面差异化） */
.mh-hero-d{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#94A3B8}

/* ---------- 号头筛选 ---------- */
.mh-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.mh-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #E6EBF2;
  color:#475569;
  font-size:13px;
  line-height:1;
}
.mh-chip i{
  font-style:normal;
  font-size:11px;
  color:#94A3B8;
}
.mh-chip.on{
  background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 4px 14px rgba(26,108,255,.28);
}
.mh-chip.on i{color:rgba(255,255,255,.75)}

/* ---------- 号码列表 ---------- */
.mh-list{
  list-style:none;
  margin:0 0 12px;
  padding:0;
}
.mh-item{
  background:#fff;
  border-radius:14px;
  margin-bottom:8px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-item > a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  color:inherit;
}
.mh-item:active{background:#F8FAFF}
.mh-item-l{flex:1;min-width:0}
.mh-num{
  font-size:19px;
  font-weight:500;
  color:#0F172A;
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mh-meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:12px;
  color:#94A3B8;
}
.mh-meta span{
  padding:1px 7px;
  border-radius:6px;
  background:#F1F5F9;
  line-height:1.6;
}
.mh-meta .mh-hl{background:#EAF3FF;color:#1A6CFF}
.mh-item-r{flex:0 0 auto;text-align:right}
.mh-price{
  font-size:17px;
  font-weight:500;
  color:#E24B4A;
  white-space:nowrap;
}
.mh-go{
  margin-top:6px;
  font-size:12px;
  color:#1A6CFF;
}

/* ---------- 号码详情头 ---------- */
.mh-numhero{
  background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
  border-radius:14px;
  padding:22px 16px;
  margin-bottom:12px;
  text-align:center;
  color:#fff;
  box-shadow:0 8px 24px rgba(26,108,255,.22);
}
.mh-numhero-num{
  font-size:26px;
  font-weight:500;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mh-numhero-tags{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  font-size:12px;
}
.mh-numhero-tags > span{
  padding:3px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  line-height:1.5;
}
.mh-numhero-tags .mh-hl{background:rgba(255,255,255,.92);color:#1A6CFF}
.mh-badge{display:inline-flex;align-items:center;gap:5px}
.mh-badge i{
  width:6px;height:6px;border-radius:50%;
  background:var(--c,#94A3B8);
}

/* ---------- 报价卡 ---------- */
.mh-pricecard{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:14px;
  padding:16px;
  margin-bottom:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-pricecard-l{flex:1;min-width:0}
.mh-pricecard-t{font-size:13px;color:#94A3B8}
.mh-pricecard-p{
  margin-top:4px;
  font-size:24px;
  font-weight:500;
  color:#E24B4A;
}
.mh-pricecard-r{
  flex:0 0 auto;
  height:42px;
  padding:0 20px;
  line-height:42px;
  border-radius:999px;
  background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
  color:#fff;
  font-size:14px;
  box-shadow:0 6px 18px rgba(26,108,255,.28);
}
.mh-nosale{
  background:#FFFBEB;
  border:1px solid #FDE68A;
  color:#92400E;
  border-radius:12px;
  padding:12px 14px;
  font-size:13px;
  margin-bottom:12px;
}

/* ---------- 信息列表 ---------- */
.mh-sec{
  margin:18px 4px 8px;
  font-size:15px;
  font-weight:500;
  color:#0F172A;
}
.mh-info{
  background:#fff;
  border-radius:14px;
  padding:4px 16px;
  margin:0;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-info > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #F1F5F9;
}
.mh-info > div:last-child{border-bottom:0}
.mh-info dt{font-size:13px;color:#94A3B8;margin:0}
.mh-info dd{
  margin:0;
  font-size:14px;
  color:#0F172A;
  font-weight:500;
  text-align:right;
}

.mh-text{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.75;
  color:#475569;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-tip{
  margin:10px 4px 0;
  font-size:12px;
  line-height:1.7;
  color:#94A3B8;
}
.mh-tip b{color:#475569}

/* ---------- 其它 ---------- */
.mh-empty{
  background:#fff;
  border-radius:14px;
  padding:36px 16px;
  text-align:center;
  color:#94A3B8;
  font-size:14px;
}
.mh-empty p{margin:0 0 12px}
.mh-empty-a{
  display:inline-block;
  height:36px;
  padding:0 18px;
  line-height:36px;
  border-radius:999px;
  background:#EAF3FF;
  color:#1A6CFF;
  font-size:13px;
}
.mh-more{
  display:block;
  text-align:center;
  padding:14px;
  border-radius:14px;
  background:#fff;
  color:#1A6CFF;
  font-size:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-foot{
  margin-top:24px;
  text-align:center;
  font-size:12px;
  color:#94A3B8;
  line-height:1.8;
}
.mh-foot p{margin:0}
.mh-foot-sub{font-size:11px;color:#CBD5E1}

/* ==========================================================================
   号码详情页加厚（2026-09-16）：估值卡 / 频次条 / 折叠块 / 相关入口
   --------------------------------------------------------------------------
   与既有 mh-* 同一套色板与圆角，不覆盖任何已有选择器。
   位置：必须放在 .mh-chip 之后 —— .mh-chip-off 要覆盖 .mh-chip 的底色。
   ========================================================================== */

/* ---------- 估值卡头部（价格 + 等级并排） ---------- */
.mh-valhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-valhead-l{min-width:0}
.mh-valhead-l span{display:block;font-size:12px;color:#94A3B8}
.mh-valhead-l b{
  display:block;
  margin-top:2px;
  font-size:24px;
  font-weight:600;
  letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
}
.mh-valhead-g{
  flex:0 0 auto;
  padding:3px 10px;
  border-radius:999px;
  background:#F1F5F9;
  font-size:12px;
  font-weight:500;
}

/* ---------- 通用白卡（承载频次条等自绘内容） ---------- */
.mh-card{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-bars-cap{
  font-size:12.5px;
  color:#94A3B8;
  margin-bottom:10px;
}

/* ---------- 数字频次条（0~9 逐位统计；移动端窄，故把说明收进右列） ---------- */
.mh-bars{display:block}
.mh-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.mh-bar:last-child{margin-bottom:0}
.mh-bar-d{
  flex:0 0 16px;
  font-size:13px;
  color:#475569;
  font-variant-numeric:tabular-nums;
}
.mh-bar-t{
  flex:1;
  height:9px;
  border-radius:5px;
  background:#EEF2F7;
  overflow:hidden;
}
.mh-bar-t i{
  display:block;
  height:100%;
  border-radius:5px;
  background:#1D4ED8;
  opacity:.75;
}
.mh-bar-n{
  flex:0 0 42px;
  text-align:right;
  font-size:11.5px;
  color:#94A3B8;
  font-variant-numeric:tabular-nums;
}

/* ---------- 折叠块（长文默认收起，避免首屏被挤走） ---------- */
.mh-fold{
  margin-top:12px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
}
.mh-fold > summary{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:14px 40px 14px 16px;
  font-size:14.5px;
  font-weight:500;
  color:#0F172A;
}
.mh-fold > summary::-webkit-details-marker{display:none}
/* 自绘箭头：不用字符，避免不同机型字形差异 */
.mh-fold > summary::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-5px;
  border-right:1.6px solid #94A3B8;
  border-bottom:1.6px solid #94A3B8;
  transform:rotate(45deg);
  transition:transform .2s;
}
.mh-fold[open] > summary::after{
  margin-top:-1px;
  transform:rotate(-135deg);
}
.mh-fold[open] > summary{border-bottom:1px solid #F1F5F9}
.mh-fold-in{padding:4px 16px 16px}
/* 折叠区内的 .mh-info 与卡片已在白底上，去掉重复的卡片投影与圆角 */
.mh-fold-in .mh-info{box-shadow:none;padding:0}
.mh-fold-in .mh-card{box-shadow:none;padding:0;margin-top:12px}
.mh-fold-in > p{
  margin:10px 0 0;
  font-size:13.5px;
  line-height:1.8;
  color:#475569;
}
.mh-fold-in .mh-tip{margin-top:10px}

/* ---------- 组合归类 chips：非「组合一~八」的中宫项灰显 ---------- */
.mh-chip-off{
  background:#F8FAFC;
  border-color:#E9EEF5;
  color:#B6C2D2;
}


/* ---------- 立即预约按钮（2026-09-17：号码详情页 → 商城下单页） ---------- */
.mh-bookbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 12px;
  padding:14px 16px;
  background:#ff581c;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(255,88,28,.22);
}
.mh-bookbtn b{font-size:16px;font-weight:500;color:#fff}
.mh-bookbtn span{font-size:12px;color:rgba(255,255,255,.86)}
.mh-bookbtn:active{opacity:.88}

/* ---------- 套餐详情（desc 纯文本，可能含 < > 强调括号，视图已 Html::encode） ---------- */
.mh-plan{
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  margin-top:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.mh-plan b{display:block;font-size:13px;font-weight:400;color:#94A3B8;margin-bottom:6px}
.mh-plan p{margin:0;font-size:13.5px;line-height:1.8;color:#334155}

/* ==========================================================================
   号段导航页（/m/haoma.html）专用 —— 2026-09-17 新增
   --------------------------------------------------------------------------
   为什么单独用移动端模板：该页此前直接复用 PC /haoma.html，在 414px 视口下
   PC 的 6 张大卡 + 498 条出链挤成一条长缝，其中「提示」段更被压成竖排单字。
   本页把「按城市浏览」由平铺 328 链改为按省折叠（details），首屏只展开前 3 省。
   ========================================================================== */

/* ---------- 号段 / 号码查询表单 ---------- */
.mh-form{
  display:flex;
  align-items:center;
  gap:8px;
}
.mh-form input{
  flex:1;
  min-width:0;
  height:40px;
  padding:0 14px;
  border:1px solid #E6EBF2;
  border-radius:10px;
  background:#F8FAFC;
  font-size:14px;
  color:#0F172A;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.mh-form input::placeholder{color:#B6C2D2}
.mh-form input:focus{
  border-color:#1A6CFF;
  background:#fff;
  box-shadow:0 0 0 3px rgba(26,108,255,.12);
}
.mh-form button{
  flex:0 0 auto;
  height:40px;
  padding:0 18px;
  border:none;
  border-radius:10px;
  background:linear-gradient(135deg,#1A6CFF 0%,#4C8DFF 100%);
  color:#fff;
  font-size:14px;
  font-weight:500;
  -webkit-appearance:none;
  appearance:none;
}
.mh-form button:active{opacity:.86}

/* ---------- 省份折叠组（按城市选号） ---------- */
.mh-cityg{
  margin-bottom:10px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
}
.mh-cityg>summary{
  display:flex;
  align-items:center;
  padding:13px 16px;
  cursor:pointer;
  list-style:none;
  font-size:15px;
  color:#0F172A;
}
.mh-cityg>summary::-webkit-details-marker{display:none}
.mh-cityg>summary:active{background:#F8FAFC}
.mh-cityg-n{
  flex:1;
  min-width:0;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mh-cityg-c{
  flex:0 0 auto;
  margin-right:8px;
  font-size:12px;
  font-weight:400;
  color:#94A3B8;
}
/* 折叠箭头：闭合指向右、展开指向下 */
.mh-cityg>summary::after{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-top:-3px;
  border-right:1.5px solid #94A3B8;
  border-bottom:1.5px solid #94A3B8;
  transform:rotate(45deg);
  transition:transform .18s;
}
.mh-cityg[open]>summary::after{
  margin-top:2px;
  transform:rotate(-135deg);
}
.mh-cityg>.mh-chips{
  padding:0 16px 16px;
  margin-bottom:0;
}

/* ==========================================================================
   可见 FAQ 区块（号码详情页）—— 2026-09-17 新增
   --------------------------------------------------------------------------
   为什么必须有这一块：Google 对 FAQPage 结构化数据的硬要求是
   「问答内容必须对用户可见」。只把问答写进 JSON-LD、页面上看不到，
   属标记作弊，会被判违规 —— 比不加更糟。
   本页初版正是如此（4 条问答 0 条可见），故补可见区块，
   并与 JSON-LD 共用同一个 $__faq 数组，保证两边永不漂移。
   折叠交互沿用同页 .mh-cityg 的箭头语言，保持视觉一致。
   ========================================================================== */
.mh-faq{
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  overflow:hidden;
}
.mh-faq-i{border-bottom:1px solid #F1F5F9}
.mh-faq-i:last-child{border-bottom:none}
.mh-faq-i>summary{
  display:flex;
  align-items:center;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  font-size:14px;
  font-weight:500;
  color:#0F172A;
  line-height:1.5;
}
.mh-faq-i>summary::-webkit-details-marker{display:none}
.mh-faq-i>summary:active{background:#F8FAFC}
.mh-faq-i>summary::after{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-left:auto;
  margin-top:-3px;
  border-right:1.5px solid #94A3B8;
  border-bottom:1.5px solid #94A3B8;
  transform:rotate(45deg);
  transition:transform .18s;
}
.mh-faq-i[open]>summary::after{
  margin-top:2px;
  transform:rotate(-135deg);
}
.mh-faq-i>p{
  margin:0;
  padding:0 16px 14px;
  font-size:13px;
  line-height:1.75;
  color:#64748B;
}