/* ============================================================
   响应式层（兼容 Android 7 / WebView 52）
   WebView 52 不支持：CSS Grid(57+)、clamp()(79+)、flex gap(84+)
   这里统一用 flex + 百分比宽度 + 媒体查询实现，全部向下兼容。
   ============================================================ */

:root {
  --page-pad: 14px;
  --card-pad: 14px;
  --fs-xxl: 32px;
  --fs-xl: 23px;
  --fs-lg: 18px;
  --fs-md: 15px;
  --fs-sm: 12.5px;
  --fs-xs: 11px;
  --btn-h: 46px;
  --input-h: 50px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; }

@media (max-width: 339px) {
  :root { --page-pad: 12px; --card-pad: 12px; --fs-xxl: 28px; --fs-xl: 21px;
          --fs-lg: 16px; --fs-md: 14px; --fs-sm: 12px; --fs-xs: 10px;
          --btn-h: 42px; --input-h: 46px; }
}
@media (min-width: 400px) {
  :root { --page-pad: 18px; --card-pad: 16px; --fs-xxl: 38px; --fs-xl: 26px;
          --fs-lg: 19px; --fs-md: 16px; --fs-sm: 13px; --fs-xs: 11.5px;
          --btn-h: 50px; --input-h: 54px; --radius-lg: 20px; --radius-md: 14px; }
}

/* ---------- 把 grid 居中改成 flex 居中（WebView 52 无 grid） ---------- */

/* ============ 欢迎页 ============ */
.wc-page { padding: 0 var(--page-pad) 20px; }
.wc-head { padding-top: 18px; }
.wc-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
.wc-name { font-size: 15px; }
.wc-en { font-size: 7.5px; }
.wc-logout, .wc-update { height: 28px; font-size: var(--fs-xs); padding: 0 12px; }
.wc-update { margin-right: 6px; }
.wc-greet { padding: 30px 2px 22px; }
.wc-hi { font-size: 13px; }
.wc-user { font-size: 28px; }
.wc-meta { font-size: var(--fs-xs); }
.wc-item { padding: 15px var(--card-pad); border-radius: var(--radius-lg); margin-top: 10px; }
.wc-item:first-child { margin-top: 0; }
.wc-ic { width: 38px; height: 38px; border-radius: 11px; margin-right: 12px; }
.wc-ic .ic { width: 19px; height: 19px; }
.wc-txt { margin-right: 10px; }
.wc-txt b { font-size: 16px; }
.wc-txt small { font-size: 11.5px; }
.wc-arrow .ic { width: 16px; height: 16px; }

/* ============ 登录 ============ */
.login { padding: 0 var(--page-pad) 30px; }
.login-brand { padding-top: 60px; }
.login-logo { width: 44px; height: 44px; font-size: 19px; }
.login-brand h1 { font-size: 20px; }
.login-tag { margin-top: 20px; font-size: 13px; }
.login-card { padding: 22px var(--card-pad) 20px; border-radius: var(--radius-lg); }
.login-card h2 { font-size: var(--fs-lg); margin-bottom: 14px; }
.lf { margin-bottom: 12px; }
.lf input { height: var(--input-h); font-size: var(--fs-md); }
.login-card > button { height: var(--btn-h); font-size: var(--fs-md); }

/* ============ 话费账单 ============ */

/* ---- 费用表：flex + 固定列宽，兼容 WebView 52 ---- */

/* 更多服务 / 热门精选：flex 代替 grid */

/* 回顶按钮：滚动后才出现，不压内容 */

/* ============ 生成受理单 ============ */

/* ============ 管理 / 设备 ============ */

/* ============ 服务大厅：三列 flex wrap ============ */

/* ============ 受理单卡片 ============ */
.rc-head { padding: var(--card-pad); }
.rc-logo { width: 34px; height: 34px; margin-right: 10px; }
.rc-title { margin-right: 10px; }
.rc-title b { font-size: 15px; }
.rc-title small { font-size: 8px; }
.rc-row { font-size: var(--fs-sm); }
.rc-foot { font-size: var(--fs-xs); padding: 10px var(--card-pad); }
.rc-actions button + button { margin-left: 10px; }

/* 二维码点阵：flex wrap 代替 grid */
.qr-grid {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  width: 33px;
  padding: 3px;
  box-sizing: content-box;
}
.qr-grid i {
  display: block;
  width: 3px;
  height: 3px;
  margin: 0;
  background: #1a2b45;
}
.qr-grid i[style] { margin: 0; }

/* ============ 设备页 ============ */

/* ============ 超窄屏 ============ */
@media (max-width: 340px) {
  .wc-item { padding: 12px; }

}

/* ============================================================
   补充：WebView 52 不支持 flex 的 gap，用 margin 重建间距
   ============================================================ */

/* 行方向 */
.login-brand > * + * { margin-left: 12px; }

.wc-item > * + * { margin-left: 14px; }
.rc-head > * + * { margin-left: 10px; }
.mcard > * + * { margin-left: 12px; }

/* 列方向 */
.lf > * + * { margin-top: 8px; }

.wc-txt > * + * { margin-top: 4px; }
.mc-main > * + * { margin-top: 4px; }
.bill-main > * + * { margin-top: 4px; }
.oh-main > * + * { margin-top: 4px; }
.rc-sec > * + * { margin-top: 0; }
.form > * + * { margin-top: 12px; }

/* 图标 + 文字（更多服务、热门精选） */

/* 账单表格单元格间距 */

/* 列表行通用 */
.rows > * + * { margin-top: 0; }
.ranks > * + * { margin-top: 0; }

/* 顶栏按钮组 */

/* ============================================================
   顶部区域专项修复（导航栏 / 月份条 / 账户头卡）
   ============================================================ */

/* ---- 1) 导航栏：三段式布局，标题真居中 ---- */
/* 标题绝对居中，两侧按钮不推挤它 */

   /* 角标移出导航栏，避免挤压标题 */

/* ---- 2) 月份条：独立卡片，与账户卡分离 ---- */

/* ---- 3) 账户头卡：更舒展的纵向节奏 ---- */

/* ---- 4) 摘要区：与账户卡拉开层次 ---- */

/* 月份条：右侧渐隐，提示可横向滑动 */

/* ============================================================
   顶部留白专项：状态栏 → 导航栏 → 内容的垂直节奏
   WebView 52 不支持 env(safe-area-inset-*)，用固定留白兜底。
   节奏基准：状态栏下留 10px，导航栏内容区 44px，标题垂直居中。
   ============================================================ */
:root { --top-safe: 10px; }

/* ---------- 账单页导航栏 ---------- */

/* ---------- 受理单页 ---------- */

/* ---------- 受理单记录页 ---------- */
.oh-nav {
  height: auto;
  min-height: 56px;
  padding: 10px 12px 9px;
  box-sizing: border-box;
  border-bottom: 1px solid #eef1f7;
}

/* ---------- 管理页 ---------- */

/* ---------- 服务大厅 ---------- */

/* ---------- 网龄查询 ---------- */
.nq-nav {
  height: auto;
  min-height: 56px;
  padding: 10px 12px 9px;
  box-sizing: border-box;
}

/* ---------- 欢迎页：品牌区与问候语之间的呼吸 ---------- */
.wc-head { padding-top: calc(18px + var(--top-safe)); }
.wc-greet { padding-top: 26px; }

/* ---------- 登录页 ---------- */
.login-brand { padding-top: calc(56px + var(--top-safe)); }

/* 大屏再多给一点 */
@media (min-width: 400px) {

  .wc-head { padding-top: calc(22px + var(--top-safe)); }
}

/* 标题定位修正：只用 top:50% + translateY(-50%) 做垂直居中，
   不再同时设 bottom，避免与高度的负偏移冲突 */

/* ============================================================
   顶部导航栏：按 Material Design 规范重排
   - 状态栏由 App 侧单独配色（白底深图标 / 深底浅图标）
   - 导航栏内容区 56px，图标触摸区 44px（贴近 48dp 规范）
   - 标题与图标垂直居中对齐，左右内容不挤压标题
   ============================================================ */

/* 其它页面的导航栏统一节奏 */

/* ============================================================
   顶部视觉重做：灰底画布 + 白色卡片
   之前全是白底白卡，层次消失。改为：
     画布 #f2f4f8 → 导航栏白条 → 灰色区域内的白色卡片
   蓝色账户卡改为带圆角和左右留白的独立卡片。
   ============================================================ */

/* --- 页面底色 --- */

/* --- 导航栏：白条，与灰底形成第一层对比 --- */

/* --- 月份条：灰底上的白卡，两端留出呼吸 --- */

   /* 灰色画布下不需要白色渐隐 */

/* --- 账户卡：独立圆角卡片，左右留白 --- */

/* --- 摘要卡：白色圆角卡片 --- */

/* --- 其余区块同样改为卡片 --- */

/* ============================================================
   Edge-to-edge 顶部适配
   App 的 WebView 现在铺满整个屏幕，状态栏是透明的。
   网页需要自己为状态栏留出高度，否则标题会被状态栏压住。
   WebView 52 不支持 env()，用固定 24px 兜底；支持的浏览器用 env()。
   ============================================================ */
:root { --status-bar: 24px; }
@supports (padding: env(safe-area-inset-top)) {
  :root { --status-bar: env(safe-area-inset-top, 24px); }
}

/* 账单页：导航栏顶部让出状态栏高度，背景与导航栏同色 */

/* 欢迎页：深色头部延伸到状态栏，形成完整的一块品牌色 */
.wc-page { padding-top: var(--status-bar); }

/* 登录页 */
.login { padding-top: var(--status-bar); }

/* 其它页面 */

/* 受理单 / 管理 / 服务大厅 / 网龄 的返回按钮垂直居中于内容区 */

/* 欢迎页顶部呼吸：品牌行与状态栏之间留出明确的间距 */
.wc-page { padding-top: calc(var(--status-bar) + 14px); }
.wc-head { padding-top: 6px; }
.wc-greet { padding-top: 22px; padding-bottom: 26px; }

/* 登录页同样处理 */
.login { padding-top: calc(var(--status-bar) + 8px); }
.login-brand { padding-top: 34px; }

/* 账单页导航栏：内容区高度固定 52px，状态栏在其上方 */

/* ============================================================
   字体系统
   统一字族、字号阶梯、行高与数字排版。
   中文优先使用系统黑体，数字使用等宽数字保证对齐。
   ============================================================ */

:root {
  /* 字族：中文黑体优先，英文与数字跟随系统 */
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
             "Noto Sans CJK SC", "Microsoft YaHei", "MiSans", sans-serif;

  /* 字号阶梯：1.2 倍节奏 */
  --t-display: 34px;   /* 金额主数字 */
  --t-h1:      20px;   /* 页面主标题 */
  --t-h2:      17px;   /* 区块标题 */
  --t-h3:      15px;   /* 卡片标题 */
  --t-body:    14px;   /* 正文 */
  --t-label:   12.5px; /* 标签、次要信息 */
  --t-caption: 11px;   /* 说明文字 */
  --t-micro:   10px;   /* 角标 */

  /* 字重 */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
}

body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}

/* 标题：字重加粗、字距收紧，标题才立得住 */
.bd-nav h1,
.od-nav h1,
.mg-nav h1,
.nq-nav h1,
.oh-nav h1 {
  font-family: var(--font-ui);
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: .02em;
}
.wc-name { font-weight: var(--w-semi); letter-spacing: .03em; }
.wc-user { font-family: var(--font-ui); font-weight: var(--w-bold); letter-spacing: -.01em; }
.wc-hi   { font-size: var(--t-label); letter-spacing: .04em; }

.card-head h2,
.bd-pkg,
.bd-group,
.bd-tips h2,
.bd-more-head h2,

/* 金额：等宽数字，避免数字跳动；字距收紧让大数字更紧凑 */
.bd-amount,
.bd-phone-amount,
.tc-bill-amount-big,
.rc-row b,
.stat-value {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
  font-weight: var(--w-bold);
}

/* 表格：数字列右对齐、等宽，标签列略小 */

/* 正文与辅助文字 */

/* 卡片列表 */
.wc-txt b { font-size: var(--t-h2); font-weight: var(--w-semi); }
.wc-txt small { font-size: var(--t-label); line-height: 1.45; }

/* 表单 */

.form label { font-size: var(--t-label); }
.form input, .form select { font-size: var(--t-body); }

/* 按钮：字重略高于正文，点击目标更明确 */
.btn, .save, .mg-save, .od-actions button, .od-submit, .od-gen,

/* 状态标签 */

/* 月份条 */

/* 账户头 */

@media (max-width: 340px) {
  :root { --t-display: 30px; --t-h1: 19px; --t-h2: 16px; --t-h3: 14.5px; --t-body: 13.5px; }
}
@media (min-width: 400px) {
  :root { --t-display: 38px; --t-h1: 22px; --t-h2: 18px; --t-h3: 16px; --t-body: 15px; --t-label: 13px; }
}

/* ============================================================
   其余页面的字体统一
   覆盖受理单、管理/设备、服务大厅、网龄、受理单记录、弹层。
   沿用前面定义的 --font-ui 与字号阶梯。
   ============================================================ */

/* ---------- 生成受理单 ---------- */

/* ---------- 管理 / 设备 ---------- */

/* 设备页 */

/* ---------- 服务大厅 ---------- */

/* ---------- 网龄查询 ---------- */
.nq-nav h1 { font-size: var(--t-h2); font-weight: var(--w-semi); }
.nq-head h2 { font-size: var(--t-h3); font-weight: var(--w-semi); }
.nq-share { font-size: var(--t-label); font-weight: var(--w-medium); }
.nq-row { font-size: var(--t-label); }
.nq-link { font-size: var(--t-label); font-weight: var(--w-medium); }
.nq-age {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: var(--w-bold);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.nq-onnet { font-size: var(--t-label); }

/* ---------- 受理单记录 ---------- */
.oh-nav h1 { font-size: var(--t-h2); font-weight: var(--w-semi); }
.oh-summary { font-size: var(--t-label); }
.oh-summary b { font-size: var(--t-h3); font-weight: var(--w-bold); }
.oh-main b { font-size: var(--t-h3); font-weight: var(--w-semi); }
.oh-main small { font-size: var(--t-label); line-height: 1.45; }
.oh-tag { font-size: var(--t-micro); font-weight: var(--w-medium); }
.oh-side b { font-size: var(--t-h3); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.oh-side small { font-size: var(--t-micro); }

/* ---------- 受理单卡片 ---------- */
.rc-title b { font-size: var(--t-h2); font-weight: var(--w-bold); letter-spacing: .02em; }
.rc-title small { font-size: 8.5px; font-weight: var(--w-medium); letter-spacing: .12em; }
.rc-no { font-size: var(--t-label); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rc-sec-title { font-size: var(--t-caption); font-weight: var(--w-semi); }
.rc-row { font-size: var(--t-label); }
.rc-row b { font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.rc-foot { font-size: var(--t-micro); }
.rc-tip { font-size: var(--t-micro); }

/* ---------- 登录页 ---------- */
.login-brand h1 { font-size: var(--t-h1); font-weight: var(--w-bold); letter-spacing: .03em; }
.login-brand p { font-size: 8.5px; font-weight: var(--w-medium); letter-spacing: .16em; }
.login-tag { font-size: var(--t-label); letter-spacing: .04em; }
.login-card h2 { font-size: var(--t-h1); font-weight: var(--w-bold); }
.lf span { font-size: var(--t-label); font-weight: var(--w-medium); }
.lf input { font-size: var(--t-h3); }
.login-card > button { font-size: var(--t-h3); font-weight: var(--w-semi); letter-spacing: .28em; }
.login-msg { font-size: var(--t-label); }
.login-foot { font-size: var(--t-micro); }

/* ---------- 欢迎页 ---------- */
.wc-name { font-size: var(--t-h3); font-weight: var(--w-semi); letter-spacing: .03em; }
.wc-en { font-size: 7.5px; font-weight: var(--w-medium); letter-spacing: .18em; }
.wc-logout, .wc-update { font-size: var(--t-label); font-weight: var(--w-medium); }
.wc-hi { font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: .06em; }
.wc-user { font-size: 28px; font-weight: var(--w-bold); letter-spacing: -.01em; }
.wc-meta { font-size: var(--t-caption); }
.wc-txt b { font-size: var(--t-h2); font-weight: var(--w-semi); }
.wc-txt small { font-size: var(--t-label); line-height: 1.45; }
.wc-foot { font-size: var(--t-micro); letter-spacing: .06em; }

/* ---------- 弹层与提示 ---------- */
.sheet-head h3 { font-size: var(--t-h2); font-weight: var(--w-semi); }
.sheet-text { font-size: var(--t-body); line-height: 1.7; }
.toast { font-size: var(--t-body); font-weight: var(--w-medium); }

/* ---------- 发票与升级 ---------- */
.inv-no { font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.inv-row { font-size: var(--t-label); }
.inv-row b { font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.inv-row.total b { font-size: var(--t-h1); font-weight: var(--w-bold); }
.inv-tip { font-size: var(--t-micro); }
.up-row { font-size: var(--t-label); }
.up-row b { font-size: var(--t-h3); font-weight: var(--w-bold); }
.up-notes { font-size: var(--t-body); line-height: 1.7; }
.up-new, .up-latest { font-size: var(--t-label); font-weight: var(--w-medium); }

/* ============================================================
   其余页面字体统一（沿用 --font-ui 与字号阶梯）
   ============================================================ */

/* ---------- 生成受理单 ---------- */

/* ---------- 管理 / 设备 ---------- */

/* 设备页 */

/* ---------- 服务大厅 ---------- */

/* ---------- 网龄查询 ---------- */
.nq-nav h1 { font-size: var(--t-h2); font-weight: var(--w-semi); }
.nq-head h2 { font-size: var(--t-h3); font-weight: var(--w-semi); }
.nq-share { font-size: var(--t-label); font-weight: var(--w-medium); }
.nq-row { font-size: var(--t-label); }
.nq-link { font-size: var(--t-label); font-weight: var(--w-medium); }
.nq-age { font-size: 30px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.nq-onnet { font-size: var(--t-label); }

/* ---------- 受理单记录 ---------- */
.oh-nav h1 { font-size: var(--t-h2); font-weight: var(--w-semi); }
.oh-summary { font-size: var(--t-label); }
.oh-summary b { font-size: var(--t-h3); font-weight: var(--w-bold); }
.oh-main b { font-size: var(--t-h3); font-weight: var(--w-semi); }
.oh-main small { font-size: var(--t-label); line-height: 1.45; }
.oh-tag { font-size: var(--t-micro); font-weight: var(--w-medium); }
.oh-side b { font-size: var(--t-h3); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.oh-side small { font-size: var(--t-micro); }

/* ---------- 受理单卡片 ---------- */
.rc-title b { font-size: var(--t-h2); font-weight: var(--w-bold); letter-spacing: .02em; }
.rc-title small { font-size: 8.5px; font-weight: var(--w-medium); letter-spacing: .12em; }
.rc-no { font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.rc-sec-title { font-size: var(--t-caption); font-weight: var(--w-semi); }
.rc-row { font-size: var(--t-label); }
.rc-row b { font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.rc-foot, .rc-tip { font-size: var(--t-micro); }

/* ---------- 登录页 ---------- */
.login-brand h1 { font-size: var(--t-h1); font-weight: var(--w-bold); letter-spacing: .03em; }
.login-brand p { font-size: 8.5px; font-weight: var(--w-medium); letter-spacing: .16em; }
.login-tag { font-size: var(--t-label); letter-spacing: .04em; }
.login-card h2 { font-size: var(--t-h1); font-weight: var(--w-bold); }
.lf span { font-size: var(--t-label); font-weight: var(--w-medium); }
.lf input { font-size: var(--t-h3); }
.login-card > button { font-size: var(--t-h3); font-weight: var(--w-semi); letter-spacing: .28em; }
.login-msg { font-size: var(--t-label); }
.login-foot { font-size: var(--t-micro); }

/* ---------- 欢迎页 ---------- */
.wc-name { font-size: var(--t-h3); font-weight: var(--w-semi); letter-spacing: .03em; }
.wc-en { font-size: 7.5px; font-weight: var(--w-medium); letter-spacing: .18em; }
.wc-logout, .wc-update { font-size: var(--t-label); font-weight: var(--w-medium); }
.wc-hi { font-size: var(--t-label); letter-spacing: .06em; }
.wc-user { font-size: 28px; font-weight: var(--w-bold); letter-spacing: -.01em; }
.wc-meta { font-size: var(--t-caption); }
.wc-txt b { font-size: var(--t-h2); font-weight: var(--w-semi); }
.wc-txt small { font-size: var(--t-label); line-height: 1.45; }
.wc-foot { font-size: var(--t-micro); letter-spacing: .06em; }

/* ---------- 弹层 / 提示 / 发票 / 升级 ---------- */
.sheet-head h3 { font-size: var(--t-h2); font-weight: var(--w-semi); }
.sheet-text { font-size: var(--t-body); line-height: 1.7; }
.toast { font-size: var(--t-body); font-weight: var(--w-medium); }
.inv-no { font-size: var(--t-label); font-variant-numeric: tabular-nums; }
.inv-row { font-size: var(--t-label); }
.inv-row b { font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.inv-row.total b { font-size: var(--t-h1); font-weight: var(--w-bold); }
.inv-tip { font-size: var(--t-micro); }
.up-row { font-size: var(--t-label); }
.up-row b { font-size: var(--t-h3); font-weight: var(--w-bold); }
.up-notes { font-size: var(--t-body); line-height: 1.7; }
.up-new, .up-latest { font-size: var(--t-label); font-weight: var(--w-medium); }

/* ---------- 管理页：单 tab（App 内）占满整行；右上角按钮不换行 ---------- */

/* ---------- 服务大厅：标题组在整页居中（右侧补等宽占位，抵消返回键） ---------- */

/* ---------- 欢迎页：主入口卡 + 常用功能 ---------- */
.wc-list { margin-top: 4px; }
.wc-hero { padding: 16px var(--card-pad) 14px; border-radius: var(--radius-lg); }
.wc-hero-title { margin-top: 14px; font-size: var(--t-h1); font-weight: var(--w-bold); }
.wc-hero-cap { margin-top: 14px; }
.wc-hero-amount { font-size: 30px; font-weight: var(--w-bold); }
.wc-hero-desc { font-size: var(--t-label); }
.wc-hero-label { font-size: var(--t-micro); }
.wc-hero-go { height: 28px; font-size: var(--t-label); font-weight: var(--w-medium); }
.wc-sec { font-size: var(--t-label); font-weight: var(--w-medium); }
.wc-item { margin-top: 8px; }
.wc-item:first-of-type { margin-top: 0; }

/* ---------- 服务大厅：三个 tab 不换行 ---------- */

/* ---------- 账单管理：按账户聚合 ---------- */

/* ---------- 号码校验（网页后台） ---------- */