/* ============================================================================
   heima 模板 · 用户中心「平台首页」（登录后状态）
   ----------------------------------------------------------------------------
   外壳（极光底 / 侧栏 / 顶栏 / 玻璃卡）全部沿用 home.css，本文件只补用户中心
   独有的东西：侧栏分组分隔线、顶栏用户胶囊、面包屑、上次登录条、余额卡、
   三步统计带、3×2 快捷入口、站点信息卡、密码安全须知卡。

   数值口径同参照站 xj.lltlmt.cn/s/user/ 的 computed style 实采：
     上次登录条 15.5/600 + 明细 15.5 · 余额 16/600 + 24/800 + 元 16/600
     统计带 标签 15/600 · 值 18/700 · 快捷入口 15.5/500 高 54 全药丸
     站点卡标题 17.5/700 · 安全卡 15.5/1.9 橙色加粗 #b45309
   ⚠ 卡片底色一律留在 home.css 的 rgba(255,255,255,.21)：这里只往
     background-image 上叠淡色渐变，写成不透明 background-color 玻璃就没了。
   ========================================================================== */

/* ── 侧栏分组 ────────────────────────────────────────────────────────────── */
/* 分组标题（导航/查询/商品/其他）按用户要求去掉，只留一条发丝线保持分组观感。
   标题原来每个约 33px，4 个共 130px，删掉后侧栏不再贴着底部溢出。 */
.hm-uc .hm-nav-sep {
  height: 0;
  margin: 9px 16px 11px;
  border-top: 1px solid rgba(112, 124, 145, .22);
}

/* 用户中心条目比首页多一倍，压到 46px 免得侧栏溢出要滚动 */
.hm-uc .hm-nav-item {
  height: 46px;
  margin-bottom: 4px;
}

.hm-uc .hm-nav-item--out:hover,
.hm-uc .hm-nav-item--out:focus {
  color: #c02b1d;
  background: rgba(255, 99, 71, .1);
}

.hm-uc .hm-nav-item--out:hover i,
.hm-uc .hm-nav-item--out:focus i {
  color: #c02b1d;
}

/* 顶栏用户胶囊（.hm-user-btn）的样式在 home.css —— 首页登录后用的是同一个 */

/* ── 面包屑 ──────────────────────────────────────────────────────────────── */
.hm-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 12px;
  color: #6e6e73;
  font-size: 13.5px;
}

.hm-crumb a {
  color: #6e6e73;
  text-decoration: none;
}

.hm-crumb i {
  color: #8a93a6;
  font-size: 12.5px;
}

.hm-crumb a:hover {
  color: var(--hm-blue-deep);
}

.hm-crumb-sep {
  color: #98a2b3;
}

/* ── 安全提示条（弱密码 / 未绑手机） ─────────────────────────────────────── */
.hm-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(180, 83, 9, .22);
  border-radius: 12px;
  background: rgba(255, 247, 232, .78);
  color: #8a4b08;
  font-size: 14.5px;
}

.hm-alert i {
  color: #d97706;
}

.hm-alert span {
  min-width: 0;
  flex: 1 1 auto;
}

.hm-alert a {
  flex: 0 0 auto;
  color: #b45309;
  font-weight: 600;
  text-decoration: underline;
}

.hm-alert--info {
  border-color: rgba(33, 104, 174, .2);
  background: rgba(234, 243, 255, .8);
  color: #1c4a7a;
}

.hm-alert--info i,
.hm-alert--info a {
  color: #1677cf;
}

/* ── 上次成功登录条 ──────────────────────────────────────────────────────── */
.hm-uc-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 9px 16px;
  border: 1px solid rgba(118, 133, 158, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 5px 16px -12px rgba(25, 45, 75, .42);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  backdrop-filter: saturate(1.7) blur(16px);
}

.hm-uc-strip-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(10, 132, 255, .12);
  color: #1677cf;
  font-size: 14px;
}

.hm-uc-strip-tx {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.hm-uc-strip-title {
  color: #222b38;
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
}

.hm-uc-strip-detail {
  color: #657083;
  font-size: 15.5px;
  overflow-wrap: anywhere;
}

/* 参考站是橙色药丸（btn-pill-tint-orange）：「不是本人？」属于提醒类动作，
   蓝底会和下面整页的蓝色按钮糊在一起 */
.hm-uc-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 149, 0, .14);
  color: #984200;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
}

.hm-uc-strip-link:hover,
.hm-uc-strip-link:focus {
  background: rgba(255, 149, 0, .24);
  color: #7a3500;
  text-decoration: none;
}

/* ── 主栅格 ──────────────────────────────────────────────────────────────── */
/* 版式照参考站 .hl-main：第一行 余额 | 站点信息，第二行 代理聊天室 | 密码安全须知，
   「新增功能」独占一行，经营概览再跨两列，站点公告在有内容时独占第三列（≥1600）或整行（<1600）。
   用 grid-template-areas 而不是靠 DOM 顺序：公告卡在 DOM 里排在最后（窄屏要落底），
   宽屏又要升到右上角，只有命名区域能一处说清。
   聊天室 / 新增功能是条件渲染的，模板会给栅格挂 has-chat / has-feat，
   下面用 :not() 把用不到的行整行删掉 —— 空轨道虽然高 0，但仍然吃掉一条 16px 的 gap。 */
.hm-uc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* 每张卡自己占一格（见下面 .hm-uc-col 的 display:contents）：
     同一行的两张卡共享行高，再各自 stretch ⇒ 底边严丝合缝。
     以前两列是 flex 竖排，两张卡各按自己内容长，永远差 6~10px 对不齐。 */
  grid-template-areas:
    "bal site"
    "chat sec"
    "feat feat"
    "biz biz";
  gap: 16px;
  align-items: start;
}

.hm-uc-grid.has-ann {
  grid-template-areas:
    "bal site"
    "chat sec"
    "feat feat"
    "biz biz"
    "ann ann";
}

/* 没开聊天室：密码安全须知回到独占整行（否则右边一张卡、左边空半格） */
.hm-uc-grid:not(.has-chat) {
  grid-template-areas:
    "bal site"
    "sec sec"
    "feat feat"
    "biz biz";
}

.hm-uc-grid:not(.has-chat).has-ann {
  grid-template-areas:
    "bal site"
    "sec sec"
    "feat feat"
    "biz biz"
    "ann ann";
}

/* 没有新增功能：那一行整行删掉 */
.hm-uc-grid:not(.has-feat) {
  grid-template-areas:
    "bal site"
    "chat sec"
    "biz biz";
}

.hm-uc-grid:not(.has-feat).has-ann {
  grid-template-areas:
    "bal site"
    "chat sec"
    "biz biz"
    "ann ann";
}

.hm-uc-grid:not(.has-chat):not(.has-feat) {
  grid-template-areas:
    "bal site"
    "sec sec"
    "biz biz";
}

.hm-uc-grid:not(.has-chat):not(.has-feat).has-ann {
  grid-template-areas:
    "bal site"
    "sec sec"
    "biz biz"
    "ann ann";
}

/* 两列的包裹层不参与布局，卡片直接落到栅格上（DOM 结构不动）。
   浏览器不认识 display:contents 时退回原来的两列 flex：只是两张卡不等高，不会散架。 */
.hm-uc-col {
  display: contents;
}

.hm-uc-bal {
  grid-area: bal;
}

.hm-uc-site {
  grid-area: site;
}

.hm-uc-chat {
  grid-area: chat;
}

.hm-uc-feat {
  grid-area: feat;
}

/* 两列并排的卡都撑满行高 ⇒ 同一行左右两张底边对齐（第一行 余额|站点，第二行 聊天室|安全须知）。
   新增功能独占一行，撑不撑一样，只保证不被内容撑出容器 */
.hm-uc-grid .hm-uc-bal,
.hm-uc-grid .hm-uc-site,
.hm-uc-grid .hm-uc-chat,
.hm-uc-grid .hm-uc-sec {
  align-self: stretch;
  min-width: 0;
}

.hm-uc-grid .hm-uc-feat {
  min-width: 0;
}

.hm-uc-sec {
  grid-area: sec;
}

/* 经营概览是我们比参考站多出来的一张卡，做成跨两列的全宽横条：
   放进左列会顶到 1000+ 高（余额卡 9 宫格 + 聊天室 + 概览），右列只剩 460，整页失衡 */
.hm-col-biz {
  grid-area: biz;
}

.hm-col-ann {
  grid-area: ann;
}

/* 三列只在够宽时才开：1440 下三列各 ~440 会让「站点信息」的行尾药丸换行 */
@media (min-width: 1600px) {
  .hm-uc-grid.has-ann {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .92fr);
    grid-template-areas:
      "bal site ann"
      "chat sec ann"
      "feat feat ann"
      "biz biz ann";
  }

  .hm-uc-grid:not(.has-chat).has-ann {
    grid-template-areas:
      "bal site ann"
      "sec sec ann"
      "feat feat ann"
      "biz biz ann";
  }

  .hm-uc-grid:not(.has-feat).has-ann {
    grid-template-areas:
      "bal site ann"
      "chat sec ann"
      "biz biz ann";
  }

  .hm-uc-grid:not(.has-chat):not(.has-feat).has-ann {
    grid-template-areas:
      "bal site ann"
      "sec sec ann"
      "biz biz ann";
  }
}

/* 卡片入场：--i 是序号（模板里写在 style 上），只做位移+淡入，别碰 backdrop-filter */
@keyframes hm-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hm-uc .hm-card {
  animation: hm-rise .34s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@media (prefers-reduced-motion: reduce) {
  .hm-uc .hm-card {
    animation: none;
  }
}

/* ── 余额卡 ──────────────────────────────────────────────────────────────── */
.hm-uc .hm-uc-bal {
  background-image: linear-gradient(150deg,
      rgba(150, 210, 255, .60) 0%,
      rgba(190, 224, 253, .38) 38%,
      rgba(226, 238, 252, .22) 68%,
      rgba(255, 255, 255, 0) 100%);
}

.hm-bal-top {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(120, 140, 170, .14);
}

.hm-bal-ava {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .55);
  color: #8d9bb0;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}

.hm-bal-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-bal-line {
  display: flex;
  align-items: baseline;
  justify-self: end;
  gap: 2px;
  color: var(--hm-ink);
}

.hm-bal-cap {
  font-size: 16px;
  font-weight: 600;
}

.hm-bal-num {
  padding: 0 2px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* 余额 ≥7 字符（≥1000.00）时 24px 会把「充值余额」挤到下一行，跟参考站一样降字号 */
.hm-bal-top.bal-long .hm-bal-num {
  font-size: 20px;
}

.hm-bal-yuan {
  font-size: 16px;
  font-weight: 600;
}

.hm-bal-acts {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.hm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 43px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--hm-ink);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 20px -10px rgba(31, 55, 96, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .16s ease, box-shadow .16s ease;
}

.hm-pill:hover,
.hm-pill:focus {
  color: var(--hm-ink);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(31, 55, 96, .34), inset 0 1px 0 rgba(255, 255, 255, .32);
}

.hm-pill-green {
  border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06)), rgba(52, 199, 89, .62);
}

.hm-pill-blue {
  border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06)), rgba(90, 170, 255, .72);
}

/* ── 用户名 / UID / 今日收益 ─────────────────────────────────────────────── */
.hm-stat3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(120, 140, 170, .14);
}

.hm-chip-st {
  padding: 8px 6px;
  border-radius: 12px;
  text-align: center;
}

.hm-st-lb {
  color: #46536b;
  font-size: 15px;
  font-weight: 600;
}

.hm-st-vl {
  margin-top: 2px;
  color: var(--hm-ink);
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ── 3×2 快捷入口 ────────────────────────────────────────────────────────── */
.hm-qgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 18px 18px;
}

.hm-qbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 10px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: #303746;
  font-size: 15.5px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 7px rgba(35, 55, 80, .08);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.hm-qbtn b {
  font-weight: 500;
}

.hm-qbtn:hover,
.hm-qbtn:focus {
  color: #303746;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(35, 55, 80, .34);
  filter: brightness(1.02);
}

/* 主按钮：白字要过 4.5:1，参照站的 rgba(10,132,255,.88) 只有 3.0:1，
   所以实心蓝压到 #0a6fe0→#0a5fd0（白字 ≈ 5.2:1）。 */
.hm-qbtn-primary {
  border-color: rgba(10, 111, 224, .55);
  background: linear-gradient(180deg, #0a7ff5 0%, #0a5fd0 100%);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(10, 111, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.hm-qbtn-primary:hover,
.hm-qbtn-primary:focus {
  color: #fff;
}

.hm-qbtn-mint {
  border-color: rgba(38, 118, 72, .18);
  background: linear-gradient(180deg, rgba(240, 252, 245, .95), rgba(222, 247, 233, .9));
}

.hm-qbtn-cream {
  border-color: rgba(165, 100, 12, .18);
  background: linear-gradient(180deg, rgba(255, 250, 240, .95), rgba(255, 243, 224, .9));
}

.hm-qbtn-blue {
  border-color: rgba(33, 104, 174, .18);
  background: linear-gradient(180deg, rgba(242, 247, 255, .95), rgba(228, 240, 255, .9));
}

/* 角标（未读消息 / 工单回复）：接口返回前不占位 */
.hm-qbadge {
  position: absolute;
  top: 6px;
  right: 14px;
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff9500;
  color: #303746;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

.hm-qbadge.is-on {
  display: inline-block;
}

/* ── 我的站点信息 ────────────────────────────────────────────────────────── */
.hm-uc .hm-uc-site {
  background-image: linear-gradient(160deg,
      rgba(230, 220, 250, .70) 0%,
      rgba(224, 229, 252, .48) 46%,
      rgba(255, 255, 255, 0) 100%);
}

.hm-site-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 16px 12px;
  border-bottom: 1px solid rgba(120, 140, 170, .12);
  background: linear-gradient(100deg, rgba(255, 236, 244, .5) 0%, rgba(240, 236, 252, .55) 52%, rgba(236, 242, 255, .45) 100%);
  border-radius: 18px 18px 0 0;
}

.hm-site-head i {
  color: #2f6fb3;
  font-size: 15px;
}

.hm-site-head h4 {
  margin: 0;
  color: var(--hm-ink);
  font-size: 17.5px;
  font-weight: 700;
}

/* ── 站点信息卡：卡头 = 色带 + 图标片（照参考站 .card-h / .tile-md 的形状） ── */
.hm-uc-site .hm-site-head {
  justify-content: flex-start;
  gap: 10px;
  padding: 15px 16px 13px;
  /* 参考站每张卡卡头都是「颜色渐隐带 + 图标片」双识别，站点信息卡用蓝带 */
  background: linear-gradient(180deg, rgba(0, 122, 255, .13), rgba(0, 122, 255, 0));
}

.hm-hd-ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(0, 122, 255, .12);
  font-size: 15px;
}

/* ⚠ .hm-site-head i 是 (0,1,1)，不抬特异性图标会被染成 #2f6fb3（淡蓝底上更糊） */
.hm-site-head .hm-hd-ic i {
  color: var(--hm-blue-deep);
}

/* 店名/UID 已经下放到行里，卡头右侧只留运行状态 + 版本徽章 */
.hm-hd-run {
  margin-left: auto;
  font-size: 12.5px;
}

.hm-run {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0f7a3f;
  font-weight: 600;
}

.hm-run::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #12a150;
  box-shadow: 0 0 0 3px rgba(18, 161, 80, .16);
}

.hm-run.is-off {
  color: #c0392b;
}

.hm-run.is-off::before {
  background: #e0433a;
  box-shadow: 0 0 0 3px rgba(224, 67, 58, .16);
}

.hm-vtag {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* 白字压金色只有 2.7:1 ⇒ 改成金字底 + 深棕字 */
.hm-vtag--pro {
  background: linear-gradient(135deg, #ffd66b 0%, #f0a728 100%);
  color: #5a3200;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.hm-vtag--std {
  background: rgba(10, 132, 255, .14);
  color: var(--hm-blue-deep);
}

.hm-fz-strong {
  color: var(--hm-ink);
  font-weight: 700;
}

.hm-fz-date {
  color: var(--hm-ink);
  font-weight: 700;
}

.hm-fz-date.is-soon {
  color: #96600a;
}

.hm-fz-date.is-off {
  color: #c0392b;
}

/* ── 站点信息行：26px 图标片 + 文案 + 行尾药丸（参考站 .row-ios 的形状） ──── */
.hm-rw-ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(100, 116, 139, .12);
  color: #58657a;
  font-size: 13px;
}

/* 图标只用淡底 + 深色图标（参考站的 tile-* 就是这个配方），别做成实心块 */
.hm-rw-ic.is-blue {
  background: rgba(0, 122, 255, .10);
  color: #0a54c2;
}

.hm-rw-ic.is-purple {
  background: rgba(122, 90, 245, .12);
  color: #4e34c0;
}

.hm-rw-ic.is-orange {
  background: rgba(255, 149, 0, .13);
  color: #984200;
}

.hm-rw-ic.is-green {
  background: rgba(18, 161, 80, .12);
  color: #0b6b39;
}

/* is-slate 就是 .hm-rw-ic 的默认灰蓝，写出来是为了模板里读得懂 */
.hm-rw-ic.is-slate {
  background: rgba(100, 116, 139, .12);
  color: #58657a;
}

.hm-rw-tx {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hm-site-act.is-orange {
  background: rgba(255, 149, 0, .13);
  color: #984200;
}

.hm-site-act.is-orange:hover {
  background: rgba(255, 149, 0, .22);
  color: #7a3500;
}

/* ── 站点公告卡 ──────────────────────────────────────────────────────────── */
.hm-uc-ann {
  padding: 0 0 4px;
}

.hm-uc-ann .hm-sec-h {
  padding: 15px 18px 13px;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(0, 122, 255, .13), rgba(0, 122, 255, 0));
}

.hm-ann-b {
  padding: 6px 18px 16px;
  color: #333a45;
  font-size: 15px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* 公告内容是站长自己写的 HTML（前台模板也是原样输出），这里只把默认间距收一收 */
.hm-ann-b p {
  margin: 0 0 10px;
}

.hm-ann-b p:last-child {
  margin-bottom: 0;
}

.hm-ann-b a {
  color: #1677cf;
}

.hm-ann-b img {
  max-width: 100%;
  height: auto;
}

/* ── 已开通分站：经营概览（订单 / 收益两块 + 近 7 日柱图） ─────────────────
   原来是 6 张一模一样的白卡平铺：订单和收益混在一起，没有主次，右侧还空一大块。
   现在拆成「两块指标 + 一张柱图」：
     卡头（青带 + 口径说明 + 收支明细入口）
     订单 pane（蓝）｜收益 pane（绿）｜近 7 日柱图（更宽）
   每块里「今日」是主角（大字号 + 与昨日的环比小药丸），本月/累计做成两行小指标。
   柱图纯 CSS，不引 Chart.js：模板里没有图表库，为一个首页多拉 200KB 不值得。 */
.hm-uc-biz {
  margin-top: 0;
}

.hm-biz-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 12px;
  /* 参考站卡头统一「颜色渐隐带」，经营概览用青带（站点信息蓝 / 公告蓝 / 安全卡自带暖调） */
  background: linear-gradient(180deg, rgba(0, 150, 220, .12), rgba(0, 150, 220, 0));
}

.hm-biz-tt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hm-ink);
  font-size: 16.5px;
  font-weight: 700;
  white-space: nowrap;
}

.hm-biz-tt i {
  color: var(--hm-blue-deep);
  font-size: 15px;
}

/* 口径说明：靠右但要让位给「收支明细」，窄屏直接藏 */
.hm-biz-hint {
  margin-left: auto;
  color: var(--hm-ink-3);
  font-size: 12.5px;
  line-height: 18px;
  text-align: right;
}

.hm-biz-more {
  flex: 0 0 auto;
  color: var(--hm-blue-deep);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.hm-biz-more i {
  margin-left: 3px;
  font-size: 15px;
}

.hm-biz-more:hover,
.hm-biz-more:focus {
  color: #024a9e;
  text-decoration: none;
}

/* 1fr 1fr 1.25fr：柱图要 7 根柱子，给它多一点宽度；三列断点放 1181，
   1100 以下改「两块指标并排 + 柱图通栏」，再窄就全单列 */
.hm-biz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 12px;
  padding: 4px 16px 16px;
}

.hm-biz-pane {
  position: relative;
  overflow: hidden;
  padding: 12px 14px 13px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
}

/* 右上角淡色光晕：不加模糊，纯径向渐变，跟玻璃卡一致又不会被父级 backdrop-filter 压平 */
.hm-biz-pane::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 127, 245, .16), rgba(10, 127, 245, 0) 68%);
  pointer-events: none;
}

.hm-biz-pane--money::after {
  background: radial-gradient(circle, rgba(15, 157, 118, .16), rgba(15, 157, 118, 0) 68%);
}

.hm-biz-ph {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hm-biz-pic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(10, 127, 245, .18), rgba(10, 95, 208, .10));
  color: var(--hm-blue-deep);
  font-size: 12.5px;
}

.hm-biz-pane--money .hm-biz-pic {
  background: linear-gradient(180deg, rgba(15, 157, 118, .2), rgba(15, 157, 118, .1));
  color: #0b7a5b;
}

.hm-biz-pt {
  color: var(--hm-ink-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* 今日是主角：数字 27px，环比药丸跟在后面；wrap 保证 320px 下药丸掉到下一行也不挤 */
.hm-biz-hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 9px 0 0;
}

.hm-biz-hl {
  color: var(--hm-ink-3);
  font-size: 12.5px;
}

.hm-biz-hv {
  color: var(--hm-ink);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.hm-biz-hv i {
  margin-left: 2px;
  color: var(--hm-ink-3);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
}

.hm-biz-d {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(120, 140, 170, .14);
  color: #55617a;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hm-biz-d.is-up {
  background: rgba(22, 163, 74, .13);
  color: #127a3c;
}

.hm-biz-d.is-down {
  background: rgba(220, 68, 68, .12);
  color: #b02a2a;
}

.hm-biz-rows {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--hm-hair);
  list-style: none;
}

.hm-biz-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.hm-biz-rows li + li {
  margin-top: 6px;
}

.hm-biz-rows span {
  color: var(--hm-ink-3);
  font-size: 12.5px;
}

.hm-biz-rows b {
  color: var(--hm-ink);
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.hm-biz-rows b i {
  margin-left: 2px;
  color: var(--hm-ink-3);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
}

/* 柱图块：跟两块指标同一种底，标题挪到卡内左上（原来吊在右下像个尾巴） */
.hm-biz-chart {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 12px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
}

.hm-biz-ch {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.hm-biz-ct {
  color: var(--hm-ink-2);
  font-size: 13px;
  font-weight: 700;
}

.hm-biz-cs {
  color: var(--hm-ink-3);
  font-size: 12px;
  white-space: nowrap;
}

.hm-biz-cs b {
  color: var(--hm-ink);
  font-size: 13.5px;
}

.hm-bars {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 8px;
  height: 104px;
}

.hm-bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.hm-bar-v {
  color: #46536b;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.hm-bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 8px;
  background: rgba(10, 132, 255, .07);
  box-shadow: inset 0 -1px 0 rgba(10, 127, 245, .12);
  overflow: hidden;
}

.hm-bar-track i {
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #7fc0ff 0%, #2b8cf0 100%);
}

/* 今天那根换成琥珀色：一眼能找到「今天」，其他 6 天保持蓝，别让整块变彩虹 */
.hm-bar.is-today .hm-bar-track i {
  background: linear-gradient(180deg, #ffc457 0%, #f59a12 100%);
}

.hm-bar.is-today .hm-bar-v {
  color: #b06a00;
}

.hm-bar-d {
  color: var(--hm-ink-3);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.hm-bar.is-today .hm-bar-d {
  color: var(--hm-ink-2);
  font-weight: 700;
}

@media (max-width: 1180px) {
  .hm-biz-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hm-biz-chart {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .hm-biz-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 口径说明藏掉后「收支明细」要自己靠右，否则会紧贴标题留在左边 */
  .hm-biz-hint {
    display: none;
  }

  .hm-biz-more {
    margin-left: auto;
  }

  .hm-bars {
    height: 92px;
  }
}

.hm-site-body {
  padding: 16px;
}

.hm-site-empty {
  margin: 0 0 14px;
  color: #333a45;
  font-size: 15.5px;
}

.hm-btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  border: 1px solid rgba(10, 132, 255, .35);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f96ff 0%, #0a7aff 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(10, 132, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .16s ease;
}

.hm-btn-block:hover,
.hm-btn-block:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.hm-site-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  color: #333a45;
  font-size: 15px;
}

.hm-site-row + .hm-site-row {
  border-top: 1px solid rgba(120, 140, 170, .12);
}

.hm-site-row a {
  color: #1677cf;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hm-site-row em {
  color: var(--hm-ink-3);
  font-style: normal;
}

.hm-site-act {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10, 132, 255, .1);
  font-size: 13.5px;
  font-weight: 600;
}

.hm-site-act:hover {
  background: rgba(10, 132, 255, .18);
  text-decoration: none;
}

/* ── 我的域名：多域名 pill + 复制按钮（参考站 .domwrap / .dom-pill / .dom-copy） ── */
/* ①号 ②号 并成一列（参考站也没有「店铺②号」单独一行）。
   复制按钮必须真按钮：<a> 会被 .hm-site-row a 染蓝且不可键盘触发 */
.hm-row-dom {
  align-items: flex-start;
}

.hm-domwrap {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.hm-dom-lb {
  flex: 0 0 auto;
  color: #333a45;
}

.hm-domlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hm-dom-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hm-dom-pill {
  display: inline-block;
  max-width: 100%;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(10, 132, 255, .1);
  color: #0a54c2;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.hm-dom-pill:hover,
.hm-dom-pill:focus {
  background: rgba(10, 132, 255, .18);
  color: #08407f;
  text-decoration: none;
}

.hm-dom-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(10, 132, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  color: #0a54c2;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease;
}

.hm-dom-copy:hover {
  background: rgba(10, 132, 255, .16);
}

.hm-dom-copy:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 1px;
}

.hm-row-dom em {
  color: var(--hm-ink-3);
  font-style: normal;
}

/* 密价权益展开区（点「查看权益」才出） */
.hm-mjdetail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 10px 38px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  color: #3b4557;
  font-size: 14.5px;
  line-height: 1.7;
}

/* ⚠ 上面写了 display:flex，[hidden] 的 UA 默认 display:none 就被盖掉了
   —— 不给这一条，密价明细会一直摊在页面上 */
.hm-mjdetail[hidden] {
  display: none;
}

.hm-mjdetail b {
  color: var(--hm-ink);
  font-weight: 700;
}

/* 统计口径注脚（参考站 .rw-ownote） */
.hm-ownote {
  margin: 2px 0 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .45);
  color: #5b6474;
  font-size: 13.5px;
  line-height: 1.7;
}

.hm-ownote b {
  color: #3b4557;
}

/* ── 密码安全须知 ────────────────────────────────────────────────────────── */
/* 参照站这张卡不是纯玻璃，是暖调半透明（白→米黄→淡青），单独一套配方 */
.hm-uc .hm-uc-sec {
  padding: 16px 18px 6px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 16px;
  background-image: linear-gradient(108deg,
      rgba(255, 255, 255, .68) 0%,
      rgba(255, 247, 232, .58) 48%,
      rgba(211, 249, 251, .56) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 14px 32px -24px rgba(31, 71, 101, .55);
  -webkit-backdrop-filter: saturate(1.35) blur(10px);
  backdrop-filter: saturate(1.35) blur(10px);
}

.hm-sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hm-ink);
  font-size: 17.5px;
  font-weight: 700;
}

.hm-sec-h i {
  color: #e8a317;
}

.hm-sec-tip {
  padding: 12px 0;
  color: #536174;
  font-size: 15.5px;
  line-height: 1.9;
}

.hm-sec-tip + .hm-sec-tip {
  border-top: 1px solid rgba(120, 140, 170, .16);
}

.hm-sec-tip b {
  color: #b45309;
  font-weight: 700;
}

/* 安全退出：灰色系，别和主操作抢视线 */
.hm-qbtn-slate {
  border-color: rgba(100, 116, 139, .2);
  background: linear-gradient(180deg, rgba(246, 247, 250, .95), rgba(236, 239, 245, .9));
  color: #4a5568;
}

/* 卡头配色变体：密码卡橙带（提醒）、新增功能紫带（参考站 card-h-purple） */
.hm-sec-h--orange {
  margin: -16px -18px 4px;
  padding: 15px 18px 13px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(255, 149, 0, .14), rgba(255, 149, 0, 0));
}

.hm-sec-h--orange i {
  color: #c2410c;
}

.hm-sec-h--purple {
  padding: 15px 16px 13px;
  background: linear-gradient(180deg, rgba(122, 90, 245, .13), rgba(122, 90, 245, 0));
}

.hm-sec-h--purple i {
  color: #4e34c0;
}

/* ── 代理聊天室入口卡 ────────────────────────────────────────────────────── */
.hm-uc-chat {
  padding-bottom: 16px;
}

.hm-chat-head {
  justify-content: flex-start;
  gap: 10px;
  padding: 15px 16px 13px;
  background: linear-gradient(180deg, rgba(0, 150, 220, .12), rgba(0, 150, 220, 0));
}

.hm-chat-b {
  padding: 14px 16px 0;
}

.hm-chat-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .55);
}

.hm-chat-bub {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(0, 150, 220, .12);
  color: #0a6b96;
  font-size: 13px;
}

.hm-chat-note p {
  margin: 0;
  color: #3b4557;
  font-size: 14.5px;
  line-height: 1.8;
}

/* 聊天室按钮用青色实心，和页面其余蓝色按钮区分开 */
.hm-btn-chat {
  gap: 8px;
  margin-top: 12px;
  border-color: rgba(6, 123, 176, .5);
  background: linear-gradient(180deg, #0aa5e0 0%, #067bb0 100%);
  box-shadow: 0 8px 22px -10px rgba(6, 123, 176, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ── 在线客服入口卡（通栏，登录条下方）────────────────────────────────────
   走 .hm-card 的玻璃底；这一层只排横向结构。
   ⚠ .hm-card 已有 backdrop-filter，子元素别再挂（父级有 ⇒ 子级失效并渲成纯白）。 */
.hm-uc-kefu {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
}

.hm-kefu-uc-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(180deg, #3d9bff 0%, #007aff 100%);
  color: #fff;
  font-size: 19px;
  box-shadow: 0 8px 20px -10px rgba(0, 122, 255, .85);
}

.hm-kefu-uc-tx {
  flex: 1 1 auto;
  min-width: 0;
}

.hm-kefu-uc-tt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1c2530;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
}

.hm-kefu-uc-dot {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.hm-kefu-uc-desc {
  overflow: hidden;
  margin: 3px 0 0;
  color: #5a6472;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hm-kefu-uc-acts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 白字压 #007aff 只有 3.86:1，用深一档的 #0050c8（7.04:1） */
.hm-kefu-uc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #0050c8;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(0, 80, 200, .75);
}

.hm-kefu-uc-btn:hover,
.hm-kefu-uc-btn:focus {
  background: #0046b0;
  color: #fff;
}

.hm-kefu-uc-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(120, 140, 170, .3);
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  color: #0050c8;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.hm-kefu-uc-link:hover,
.hm-kefu-uc-link:focus {
  border-color: #8fbcf7;
  color: #0046b0;
  text-decoration: none;
}

.hm-kefu-uc-link em {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 575px) {
  .hm-uc-kefu {
    flex-wrap: wrap;
    gap: 10px;
    padding: 13px 14px;
  }

  .hm-kefu-uc-acts {
    width: 100%;
  }

  .hm-kefu-uc-btn,
  .hm-kefu-uc-link {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* ── 新增功能（后台可编辑，一行一条「标题|说明」） ────────────────────────── */
.hm-feat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 16px 18px;
}

/* 这张卡现在独占整行（聊天室和密码须知并排占掉了原来那一格），
   一条一行会拉成很宽的空条，宽屏改成自适应多列；条数少时也不会留大片空白 */
@media (min-width: 1101px) {
  .hm-uc-feat .hm-feat-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: stretch;
  }
}

.hm-feat {
  padding: 12px 14px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .55);
}

.hm-feat-t {
  margin-bottom: 5px;
  font-size: 15.5px;
  font-weight: 700;
}

.t-orange {
  color: #984200;
}

.t-blue {
  color: #0a54c2;
}

.t-purple {
  color: #4e34c0;
}

.t-teal {
  color: #0b6b6b;
}

.hm-feat-d {
  color: #4a5568;
  font-size: 14.5px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.hm-feat-d b,
.hm-feat-d strong {
  color: #b45309;
}

/* 站点公告「展开全部（N）」 */
.hm-ann-more {
  padding: 0 18px 16px;
}

.hm-ann-more[hidden] {
  display: none;
}

.hm-ann-more-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(10, 132, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #0a54c2;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}

.hm-ann-more-btn:hover {
  background: rgba(10, 132, 255, .14);
}

/* ── 每日公告弹窗 ────────────────────────────────────────────────────────── */
/* ⚠ 弹层内部不要再挂 backdrop-filter：父级已有 ⇒ 子级失效并渲成纯白 */
.hm-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* 同上：写了 display:flex 就必须自己兜住 [hidden] */
.hm-modal[hidden] {
  display: none;
}

.hm-modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 38, .42);
}

.hm-modal-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: min(76vh, 640px);
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 60px -20px rgba(20, 35, 60, .5);
  overflow: hidden;
}

.hm-modal-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(120, 140, 170, .14);
  background: linear-gradient(180deg, rgba(255, 149, 0, .12), rgba(255, 149, 0, 0));
}

.hm-modal-h h4 {
  margin: 0;
  color: var(--hm-ink);
  font-size: 17px;
  font-weight: 700;
}

.hm-modal-x {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6b7686;
  font-size: 15px;
  cursor: pointer;
}

.hm-modal-x:hover {
  background: rgba(100, 116, 139, .14);
}

.hm-modal-x:disabled {
  opacity: .4;
  cursor: default;
}

.hm-modal-b {
  padding: 16px;
  overflow: auto;
  color: #333a45;
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.hm-modal-b p {
  margin: 0 0 10px;
}

.hm-modal-b p:last-child {
  margin-bottom: 0;
}

.hm-modal-b a {
  color: #1677cf;
}

.hm-modal-b img {
  max-width: 100%;
  height: auto;
}

.hm-modal-f {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 16px;
}

.hm-modal-ok {
  height: 40px;
  padding: 0 22px;
  border: 1px solid rgba(10, 132, 255, .4);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f96ff 0%, #0a7aff 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.hm-modal-ok:disabled {
  border-color: rgba(100, 116, 139, .2);
  background: rgba(100, 116, 139, .16);
  color: #6b7686;
  cursor: default;
}

/* ── 轻提示（复制域名等） ────────────────────────────────────────────────── */
.hm-toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  z-index: 1300;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(32, 42, 58, .92);
  color: #fff;
  font-size: 14.5px;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.hm-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── 响应式 ──────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* ⚠ 选择器必须把上面所有 :not() 变体都列齐：它们的特异性比单个 .hm-uc-grid 高
     （0,3,0 vs 0,1,0），漏一个，窄屏就继续套用桌面端的两列模板——而且
     grid-template-areas 里写了几列，栅格就会硬开几列，grid-template-columns 只写 1 条也没用。 */
  .hm-uc-grid,
  .hm-uc-grid.has-ann,
  .hm-uc-grid:not(.has-chat),
  .hm-uc-grid:not(.has-feat),
  .hm-uc-grid:not(.has-chat).has-ann,
  .hm-uc-grid:not(.has-feat).has-ann,
  .hm-uc-grid:not(.has-chat):not(.has-feat),
  .hm-uc-grid:not(.has-chat):not(.has-feat).has-ann {
    grid-template-columns: minmax(0, 1fr);
    /* 单列不排区域，直接按 DOM 顺序落地（余额→聊天室→站点→新增功能→安全须知→概览→公告）。
       这样条件卡缺席时不会留下空轨道，也就不会多出 16px 空档。 */
    grid-template-areas: none;
  }

  .hm-uc-grid .hm-uc-bal,
  .hm-uc-grid .hm-uc-site,
  .hm-uc-grid .hm-uc-chat,
  .hm-uc-grid .hm-uc-feat,
  .hm-uc-grid .hm-uc-sec,
  .hm-uc-grid .hm-col-biz,
  .hm-uc-grid .hm-col-ann {
    grid-area: auto;
  }
}

@media (max-width: 991px) {
  .hm-uc {
    padding: 16px 16px 32px;
  }
}

@media (max-width: 767px) {
  .hm-uc-strip {
    flex-wrap: wrap;
  }

  .hm-uc-strip-link {
    margin-left: 42px;
  }

  .hm-bal-top {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px 12px;
  }

  .hm-bal-ava {
    width: 54px;
    height: 54px;
  }

  .hm-bal-num {
    font-size: 22px;
  }

  .hm-pill {
    height: 40px;
    padding: 0 14px;
    font-size: 15px;
  }
}

@media (max-width: 575px) {
  .hm-qgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 14px 16px;
  }

  .hm-stat3 {
    padding: 8px 12px;
  }

  .hm-st-vl {
    font-size: 16px;
  }

  /* 窄屏提示条改两行栅格：图标+文字一行，链接独占下一行右对齐 */
  .hm-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 10px;
  }

  .hm-alert a {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .hm-bal-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-bal-ava {
    grid-row: auto;
    justify-self: start;
  }

  .hm-bal-line,
  .hm-bal-acts {
    justify-self: start;
  }

  .hm-uc-strip-link {
    margin-left: 0;
  }
}

/* ============================================================================
   其它用户页（自助下单 / 订单查询 / 收支明细 / 系统设置 / 消息通知 …）
   ----------------------------------------------------------------------------
   这些页面的 HTML 一行不改（.panel / .form-control / .table / .btn / .alert…），
   只在这一层把 vendor 皮肤换成和平台首页同一套玻璃。作用域 body.hm-ucpage。
   口径同参照站 xj.lltlmt.cn/s/user/list.php 的 computed style：
     panel 18px + rgba(255,255,255,.21) + 1px rgba(255,255,255,.42)
     panel-heading 15/600 高 50 + rgba(255,255,255,.16)
     form-control 14.5 高 34 r12 + rgba(255,255,255,.55)
     btn 药丸 14/500；table 行高 45；分页 r12
   ⚠ 面板里不要再挂 backdrop-filter：父级有 blur 时子级会被压成纯白。
   ⚠ 原生 .btn-primary 的 #007aff 白字只有约 4.0:1，这里和首页一样压深到 #0a5fd0。
   ========================================================================== */

/* ── 侧栏：系统设置可折叠 ─────────────────────────────────────────────────── */
.hm-nav-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.hm-nav-chev {
  margin-left: auto;
  width: auto !important;
  font-size: 13px !important;
  transition: transform .2s ease;
}

.hm-nav-set.is-open .hm-nav-chev {
  transform: rotate(180deg);
}

.hm-nav-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}

.hm-nav-set.is-open .hm-nav-sub {
  max-height: 260px;
}

.hm-nav-sub-item {
  display: block;
  margin: 2px 4px 2px 46px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--hm-ink-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.hm-nav-sub-item:hover,
.hm-nav-sub-item:focus {
  color: var(--hm-ink);
  background: rgba(255, 255, 255, .6);
  text-decoration: none;
}

.hm-nav-sub-item.is-active {
  color: #0050c8;
  font-weight: 600;
  background: rgba(10, 132, 255, .1);
}

/* ── 主区容器 ────────────────────────────────────────────────────────────── */
.hm-ucpage .hm-page {
  padding: 14px 14px 40px;
}

.hm-ucpage .hm-page-body {
  width: 100%;
}

/* vendor 的底色层全部让位给极光底 */
.hm-ucpage .bg-light,
.hm-ucpage .bg-white,
.hm-ucpage .lter,
.hm-ucpage .dker,
.hm-ucpage .b-b,
.hm-ucpage .b-t,
.hm-ucpage .wrapper,
.hm-ucpage .wrapper-sm,
.hm-ucpage .wrapper-md,
.hm-ucpage .app-content,
.hm-ucpage .app-content-body {
  background: transparent !important;
  background-color: transparent !important;
}

.hm-ucpage .hm-page-body > .wrapper {
  padding: 0 !important;
}

/* ── 卡片 ────────────────────────────────────────────────────────────────── */
.hm-ucpage .panel,
.hm-ucpage .panel-default,
.hm-ucpage .well,
.hm-ucpage .list-group,
.hm-ucpage .thumbnail {
  background-color: rgba(255, 255, 255, .21) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 34px -12px rgba(31, 55, 96, .28), 0 2px 8px -4px rgba(31, 55, 96, .18), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: saturate(1.85) blur(20px);
  backdrop-filter: saturate(1.85) blur(20px);
  margin-bottom: 16px;
}

.hm-ucpage .panel-heading,
.hm-ucpage .panel > .panel-heading,
.hm-ucpage .panel-heading.font-bold,
.hm-ucpage .panel > .panel-heading[style] {
  padding: 15px 16px !important;
  background: rgba(255, 255, 255, .16) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hm-hair) !important;
  border-radius: 17px 17px 0 0 !important;
  color: var(--hm-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* 页头里常带内联白字/渐变标题，统一转深色；badge/label 不动
   ⚠ 按钮和按钮里面的图标/文字也必须排除：本规则是 0,2,1 + !important，
     `.hm-ucpage .btn-info`（0,2,0）压不过它，会把「充值」的**白字压成墨色**。 */
.hm-ucpage .panel-heading *:not(.badge):not(.label):not(.btn):not(.btn *) {
  color: var(--hm-ink) !important;
  text-shadow: none !important;
  background-image: none !important;
}

/* 页头右上角的按钮（shop.php「余额 + 充值」这类）
   ⚠ 本皮肤的 .btn 是 36px 高胶囊，而 .panel-heading 的内容盒只有一行 21px：
     inline-block 的按钮会往下溢出、底边压到 tab 条上，看着就像「按钮掉下来了」。
     让页头变成两头对齐的横排（仅当页头里真有 .pull-right > .btn）即可垂直居中。 */
.hm-ucpage .panel > .panel-heading:has(> .pull-right > .btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hm-ucpage .panel > .panel-heading > .pull-right {
  float: none !important;
  margin: 0 !important;
}

/* message.php 页头：「消息列表」是内联 span，后面跟一个 &nbsp; 再跟「全部已读」按钮。
   基线对齐下 36px 胶囊会被顶起来，水平也只隔 4px —— 看着就是「按钮错位」。
   整行改 flex 垂直居中；按钮按 btn-xs 的语义缩回小号
   （本皮肤 `.hm-ucpage .btn` 是 0,2,0，会把 vendor `.btn-xs` 的 12px/1.5 覆盖成大胶囊）。 */
.hm-ucpage .panel > .panel-heading:has(#allread) > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hm-ucpage #allread {
  /* inline-flex 居中：靠 line-height 在这颗小胶囊里会偏 3px（行盒比内容盒高） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  line-height: 1;
  padding: 6px 12px;
}

.hm-ucpage .panel-body,
.hm-ucpage .panel-footer {
  background: transparent !important;
  color: var(--hm-ink);
}

.hm-ucpage .panel-body {
  padding: 16px 18px;
}

.hm-ucpage .panel-footer {
  border-top: 1px solid var(--hm-hair) !important;
}

.hm-ucpage .panel-title {
  font-size: 15px;
  font-weight: 600;
}

.hm-ucpage .list-group-item {
  background: transparent !important;
  border-color: var(--hm-hair) !important;
  color: var(--hm-ink);
}

.hm-ucpage .well {
  padding: 14px 16px !important;
  font-size: 14.5px;
  color: var(--hm-ink-2);
}

/* ── 表单 ────────────────────────────────────────────────────────────────── */
.hm-ucpage .form-control {
  height: 34px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, .55) !important;
  border: 1px solid rgba(120, 140, 170, .18) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(31, 55, 96, .05) !important;
  color: var(--hm-ink) !important;
  font-size: 14.5px;
}

.hm-ucpage textarea.form-control {
  height: auto;
  min-height: 84px;
}

.hm-ucpage .form-control:focus {
  border-color: rgba(10, 132, 255, .55) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .18) !important;
}

.hm-ucpage .form-control[disabled],
.hm-ucpage .form-control[readonly] {
  background: rgba(255, 255, 255, .35) !important;
  color: var(--hm-ink-2) !important;
}

.hm-ucpage .input-group-addon {
  background: rgba(255, 255, 255, .45) !important;
  border: 1px solid rgba(120, 140, 170, .18) !important;
  border-radius: 12px !important;
  color: var(--hm-ink-2) !important;
  font-size: 14px;
}

.hm-ucpage select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'><path d='M6 3 L9.5 6.6 H2.5 Z M6 13 L2.5 9.4 H9.5 Z' fill='%238a93a6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}

/* ── 按钮 ────────────────────────────────────────────────────────────────── */
.hm-ucpage .btn {
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 500;
  /* ⚠ vendor 给 .btn 的 line-height 是 34px，而按钮是 border-box 的固定 36px 高
     （内容盒 36-14-2=20px）⇒ 34px 的行盒塞不进去，字被顶到按钮下半截（实测偏 +6.5px）。
     把行高收回内容盒高度，文字才真正居中（实测偏 -0.5px，肉眼即正）。 */
  line-height: 20px;
  transition: filter .18s ease, box-shadow .18s ease;
}

.hm-ucpage .btn:hover,
.hm-ucpage .btn:focus {
  transform: none;
}

/* ⚠ vendor 的小按钮（订单表里的「详细 / 修改」、各种行内操作）是 .btn-xs。
   home.css 的 `.hm-home .btn-xs` 给死了 height:24px（0,2,0），而上面
   `.hm-ucpage .btn` 同是 0,2,0 但后加载，把 padding 撑成 7px 16px、行高 20px
   ⇒ 34px 的内容塞进 24px 的盒子：文字被裁掉半截、整体往下沉（就是「详细按钮错位」）。
   这里用 (0,3,0) 一次性把小号胶囊收拢。 */
.hm-ucpage .btn.btn-xs {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 22px;
}

.hm-ucpage .btn-primary {
  background: linear-gradient(180deg, #0a7ff5 0%, #0a5fd0 100%) !important;
  border-color: rgba(10, 111, 224, .55) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -12px rgba(10, 111, 224, .8), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.hm-ucpage .btn-default {
  background: rgba(255, 255, 255, .6) !important;
  border-color: rgba(255, 255, 255, .7) !important;
  color: var(--hm-ink) !important;
}

.hm-ucpage .btn-success {
  background: #14833b !important;
  border-color: #106b30 !important;
  color: #fff !important;
}

.hm-ucpage .btn-info {
  background: #0a6fc2 !important;
  border-color: #095f9f !important;
  color: #fff !important;
}

.hm-ucpage .btn-warning {
  background: #b26a00 !important;
  border-color: #975a00 !important;
  color: #fff !important;
}

.hm-ucpage .btn-danger {
  background: #c8342b !important;
  border-color: #ad2c24 !important;
  color: #fff !important;
}

.hm-ucpage .btn-link {
  color: #0050c8 !important;
  padding: 0;
  border-radius: 0 !important;
}

.hm-ucpage .btn-block {
  width: 100%;
}

/* ── 表格 ────────────────────────────────────────────────────────────────── */
.hm-ucpage .table {
  margin-bottom: 0;
  background: transparent !important;
  color: var(--hm-ink);
}

.hm-ucpage .table > thead > tr > th {
  padding: 12px 10px;
  background: transparent !important;
  border-bottom: 1px solid var(--hm-hair) !important;
  color: var(--hm-ink-2) !important;
  font-size: 14px;
  font-weight: 600;
}

.hm-ucpage .table > tbody > tr > td {
  padding: 12px 10px;
  background: transparent !important;
  border-top: 1px solid rgba(120, 140, 170, .12) !important;
  color: var(--hm-ink);
  font-size: 14px;
}

.hm-ucpage .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, .16) !important;
}

.hm-ucpage .table-hover > tbody > tr:hover,
.hm-ucpage .table-hover > tbody > tr:hover > td {
  background: rgba(120, 140, 170, .08) !important;
}

/* ── 分页 ────────────────────────────────────────────────────────────────── */
.hm-ucpage .pagination {
  margin: 14px 0 0;
}

.hm-ucpage .pagination > li > a,
.hm-ucpage .pagination > li > span {
  margin: 0 3px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .42) !important;
  border: 1px solid rgba(120, 140, 170, .18) !important;
  border-radius: 12px !important;
  color: var(--hm-ink-2) !important;
  font-size: 14px;
}

.hm-ucpage .pagination > .active > a,
.hm-ucpage .pagination > .active > span {
  background: linear-gradient(180deg, #0a7ff5 0%, #0a5fd0 100%) !important;
  border-color: rgba(10, 111, 224, .55) !important;
  color: #fff !important;
}

.hm-ucpage .pagination > .disabled > a,
.hm-ucpage .pagination > .disabled > span {
  color: var(--hm-ink-3) !important;
  background: rgba(255, 255, 255, .28) !important;
}

/* ── 提示条 ──────────────────────────────────────────────────────────────── */
.hm-ucpage .alert {
  border: 1px solid rgba(255, 255, 255, .5) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .42) !important;
  color: var(--hm-ink) !important;
  font-size: 14.5px;
}

.hm-ucpage .alert-info {
  background: rgba(230, 241, 255, .62) !important;
  border-color: rgba(120, 140, 170, .18) !important;
  color: #23405f !important;
}

.hm-ucpage .alert-success {
  background: rgba(230, 248, 238, .7) !important;
  border-color: rgba(38, 118, 72, .18) !important;
  color: #1c5136 !important;
}

.hm-ucpage .alert-warning {
  background: rgba(255, 245, 226, .75) !important;
  border-color: rgba(165, 100, 12, .2) !important;
  color: #7a4a00 !important;
}

.hm-ucpage .alert-danger {
  background: rgba(255, 235, 233, .75) !important;
  border-color: rgba(180, 45, 35, .2) !important;
  color: #8a1f18 !important;
}

/* ── 弹层 / 下拉 / 标签页 ────────────────────────────────────────────────── */
.hm-ucpage .modal-content {
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 60px -24px rgba(31, 55, 96, .4);
}

.hm-ucpage .modal-header,
.hm-ucpage .modal-footer {
  border-color: var(--hm-hair);
}

.hm-ucpage .nav-tabs {
  border-bottom: 1px solid var(--hm-hair);
}

.hm-ucpage .nav-tabs > li > a {
  border: 0 !important;
  border-radius: 12px 12px 0 0;
  color: var(--hm-ink-2);
  font-size: 14.5px;
}

.hm-ucpage .nav-tabs > li.active > a,
.hm-ucpage .nav-tabs > li.active > a:hover,
.hm-ucpage .nav-tabs > li.active > a:focus {
  background: rgba(255, 255, 255, .6) !important;
  color: var(--hm-ink) !important;
}

.hm-ucpage .label-default {
  background: rgba(120, 140, 170, .3) !important;
}

/* ── cmui 的 .block 卡片 ────────────────────────────────────────────────────
   uset.php（用户资料设置 / 网站信息设置 / Logo）与 tixian.php、app.php 用的是
   cmui 的 .block + .block-title，不是 bootstrap 的 .panel；新外壳不再加载
   assets/cmui/css/main.css（主题里那套紫头蓝渐变会和玻璃打架），所以这里
   按 .panel 的同一口径补一张玻璃卡。 */
.hm-ucpage .block {
  padding: 0 !important;
  margin: 0 0 16px !important;
  background-color: rgba(255, 255, 255, .21) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 34px -12px rgba(31, 55, 96, .28), 0 2px 8px -4px rgba(31, 55, 96, .18), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: saturate(1.85) blur(20px);
  backdrop-filter: saturate(1.85) blur(20px);
}

.hm-ucpage .block > .block-title {
  margin: 0 !important;
  padding: 15px 16px !important;
  background: rgba(255, 255, 255, .16) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hm-hair) !important;
  border-radius: 17px 17px 0 0 !important;
}

.hm-ucpage .block > .block-title h1,
.hm-ucpage .block > .block-title h2,
.hm-ucpage .block > .block-title h3,
.hm-ucpage .block > .block-title .panel-title {
  margin: 0 !important;
  color: var(--hm-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-shadow: none !important;
}

.hm-ucpage .block > .block-title,
.hm-ucpage .block > .block-title *:not(.btn):not(.label):not(.badge) {
  color: var(--hm-ink) !important;
}

/* 内容原来靠 .block 自带的内距，现在内距交给内容层，卡片才能做通栏页头 */
.hm-ucpage .block > div:not(.block-title) {
  padding: 16px 18px;
}

.hm-ucpage .block > .nav-tabs {
  margin: 12px 16px 0;
  border-bottom: 1px solid var(--hm-hair);
}

.hm-ucpage .block > .nav-tabs + .tab-content {
  padding: 16px 18px 18px;
}

/* ── 用户资料设置（user/uset.php?mod=user）──────────────────────────────────
   原来是「一串 form-group + <br>」：字段宽窄不一（QQ/手机号通栏、提现账号只有 200px），
   没有分区，整页只有一张玻璃卡，层次看不出来。
   现在把表单拆成「联系方式 / 提现收款 / 账号安全」三块白卡：
     玻璃大卡(.block) → 白卡(.hm-set-sec) → 行(.hm-row) → 控件(.form-control)
   每层只差一级明度 + 一层发丝边；子卡**不挂 backdrop-filter**（父级已有，嵌套会被压成纯白）。 */
.hm-ucpage .hm-set {
  padding: 2px 0 0;
}

/* 控件撑满 .hm-ctl 那一列。
   home.css 里有 `.hm-home .form-control { width: auto }`（首页搜索框要按内容收缩），
   可 input/textarea 是替换元素 —— width:auto 不会像普通块级元素那样吃满父宽，
   而是退回「按 size/cols 算出来的固有宽度」，于是同一个 .hm-ctl（428px）里的输入框
   只有 ~187px、右边留一大片空白，长值还被截断。
   这里只在设置表单里覆盖：权重 (0,3,0) 与 home.css 打平，但 user.css 后加载，后到者胜。 */
.hm-ucpage .hm-set .form-control {
  width: 100%;
}

.hm-ucpage .hm-set-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.hm-ucpage .hm-set-sec {
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 8px 20px -18px rgba(31, 55, 96, .55), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.hm-ucpage .hm-set-sec--wide {
  grid-column: 1 / -1;
}

.hm-ucpage .hm-set-hd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 0 0 11px;
  border-bottom: 1px dashed var(--hm-hair);
}

.hm-ucpage .hm-set-ico {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(10, 127, 245, .16), rgba(10, 95, 208, .10));
  color: var(--hm-blue-deep);
}

.hm-ucpage .hm-set-hd-txt h4 {
  margin: 0;
  color: var(--hm-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 20px;
}

.hm-ucpage .hm-set-hd-txt p {
  margin: 2px 0 0;
  color: var(--hm-ink-3);
  font-size: 12px;
  line-height: 1.5;
}

.hm-ucpage .hm-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.hm-ucpage .hm-row + .hm-row {
  margin-top: 12px;
}

.hm-ucpage .hm-lb {
  margin: 0;
  color: var(--hm-ink-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 34px;
  text-align: left;
  white-space: nowrap;
}

.hm-ucpage .hm-tip {
  margin: 6px 0 0;
  color: var(--hm-ink-3);
  font-size: 12px;
  line-height: 1.5;
}

.hm-ucpage .hm-set-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--hm-hair);
}

.hm-ucpage .hm-set-foot-tip {
  margin: 0;
  color: var(--hm-ink-3);
  font-size: 12.5px;
}

/* 网站信息设置（uset.php?mod=site）底部的实用工具条：
   原来是一行「｜」分隔的裸链接，和内距/玻璃卡不搭，改成药丸小按钮 */
.hm-ucpage .hm-set-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--hm-hair);
  color: var(--hm-ink-3);
  font-size: 12.5px;
}

.hm-ucpage .hm-set-tools-t {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  color: var(--hm-ink-2);
  font-weight: 600;
}

.hm-ucpage .hm-set-tools a {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--hm-hair);
  border-radius: var(--hm-pill);
  background: rgba(255, 255, 255, .55);
  color: var(--hm-blue-deep);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

.hm-ucpage .hm-set-tools a:hover,
.hm-ucpage .hm-set-tools a:focus {
  background: #fff;
  border-color: rgba(10, 127, 245, .32);
  color: var(--hm-blue-deep);
  text-decoration: none;
}

/* 微信提现：收款二维码上传（提现账号那一行会被 JS 换掉） */
.hm-ucpage .hm-qr {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.hm-ucpage .hm-qr-box {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed rgba(10, 127, 245, .38);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
}

.hm-ucpage .hm-qr-box img {
  display: block;
  width: 100%;
  height: 100%;
  /* 二维码是方块图：contain 保证不裁角，留白也不变形 */
  object-fit: contain;
}

.hm-ucpage .hm-qr-empty {
  color: var(--hm-ink-3);
  font-size: 12px;
}

.hm-ucpage .hm-qr-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.hm-ucpage .hm-qr-side .hm-tip {
  margin: 0;
  max-width: 320px;
}

/* 列方向 flex 会把 <a class="btn"> 拉满整行，按钮只该占自己的宽度 */
.hm-ucpage .hm-qr-side > .btn {
  align-self: flex-start;
}

@media (max-width: 1180px) {
  .hm-ucpage .hm-set-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .hm-ucpage .hm-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .hm-ucpage .hm-lb {
    line-height: 1.5;
  }

  .hm-ucpage .hm-set-foot {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── 无侧栏页（user/head2.php：在线开通分站 / 注册成功 / 备用登录）─────────
   这些页没有 .hm-side / .hm-main，自己带一列内容，所以只给极光底 + 居中列；
   卡片、表单、按钮仍走上面 .hm-ucpage 那一套。 */
.hm-plain {
  padding: 36px 16px 48px;
}

.hm-plain-wrap {
  position: relative;
  /* ⚠ 这里绝不能加 z-index：一加就成了栈上下文，页内 Bootstrap 弹层（z-index 1050）
     会被困在它下面，而 .modal-backdrop（1040，挂在 body 上）反而盖住弹层 ⇒ 整个弹层发灰。
     极光底是 z-index:0 的 fixed 元素、本节点在后，什么都不写照样在它上面。 */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* 页面自带 col-lg-4 / center-block 之类的外层栅格，在居中列里会被挤成 240px，
   统一摊平到列宽（否则开通分站表单只剩一条） */
.hm-plain .hm-plain-wrap > [class*="col-"] {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* regsite.php 自带一张整屏背景图，会盖住极光底 */
.hm-plain .cmds-bg {
  display: none !important;
}

/* 页头那张 jpg 渐变横幅换成同款玻璃，白字跟着转深色 */
.hm-plain .widget-content {
  background-image: none !important;
  background-color: rgba(255, 255, 255, .21) !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 34px -12px rgba(31, 55, 96, .28), inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: saturate(1.85) blur(20px);
  backdrop-filter: saturate(1.85) blur(20px);
}

.hm-plain .widget-content h4,
.hm-plain .widget-content p {
  color: var(--hm-ink) !important;
}

/* ── 在线开通分站（user/regsite.php）─────────────────────────────────────────
   结构照参照站 xw11.lltlmt.cn/s/user/regsite.php，配色/质感走本模板：
     卡宽 448 · 圆角 20 · 深蓝渐变封面（#0e78ea→#0a5dc2→#063f8f）+ 点阵纹 + 3px 白环头像
     横幅上的字一律白/近白 —— 浅蓝底配的青色光是压不住 4.5:1 的，别往浅色改
     两个 46px 入口（左侧图标 + 右侧箭头）
     版本选择 = 两张卡片（原生 select 视觉隐藏，regsite.js 仍从它取 kind）
     表单行 = 84px 淡蓝标签 + 47px 输入，行内圆角 13
     二级域名 = 前缀 + «.» + 后缀下拉，挤在同一行
     CTA 蓝渐变 50px
   卡片仍走本模板的玻璃配方（白 21% + blur），不改成实心白。 */
.hm-fz {
  max-width: 448px;
  margin: 0 auto;
}

.hm-fz-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .21);
  box-shadow: 0 20px 56px -26px rgba(31, 55, 96, .48), 0 4px 12px -8px rgba(31, 55, 96, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: saturate(1.85) blur(20px);
  backdrop-filter: saturate(1.85) blur(20px);
}

/* 封面区：深蓝渐变（白字才够对比，浅蓝底的青光是压不住 4.5:1 的）
   点阵纹走 ::before —— 子元素都显式抬到 z-index:1，别让纹路盖在头像和标题上 */
.hm-fz-hero {
  position: relative;
  padding: 34px 22px 26px;
  text-align: center;
  background-color: #0a5dc2;
  background-image: radial-gradient(58% 52% at 8% -6%, rgba(92, 205, 222, .32) 0%, rgba(92, 205, 222, 0) 68%),
    radial-gradient(70% 60% at 100% 108%, rgba(2, 34, 92, .5) 0%, rgba(2, 34, 92, 0) 66%),
    linear-gradient(135deg, #0e78ea 0%, #0a5dc2 58%, #063f8f 100%);
  background-repeat: no-repeat;
}

.hm-fz-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .55) .7px, transparent .7px);
  background-size: 13px 13px;
  opacity: .16;
  pointer-events: none;
}

.hm-fz-ava,
.hm-fz-title,
.hm-fz-sub {
  position: relative;
  z-index: 1;
}

.hm-fz-ava {
  display: inline-block;
  width: 72px;
  height: 72px;
  border: 3px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px -8px rgba(2, 20, 54, .55), 0 0 0 7px rgba(255, 255, 255, .12);
  object-fit: cover;
}

.hm-fz-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.3px;
}

.hm-fz-title i {
  font-size: 17px;
  opacity: .82;
}

.hm-fz-sub {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: 12.5px;
  letter-spacing: .3px;
}

/* ⚠ 别在这颗药丸上加 backdrop-filter：.hm-fz-card 已经有一层，嵌套会被扁平化 */
.hm-fz-back {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--hm-pill);
  background: rgba(4, 26, 66, .22);
  color: #fff;
  font-size: 12.5px;
  text-decoration: none;
}

.hm-fz-back:hover,
.hm-fz-back:focus {
  background: rgba(4, 26, 66, .36);
  color: #fff;
  text-decoration: none;
}

.hm-fz-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 22px 0;
}

.hm-fz-act {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(10, 132, 255, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .62);
  color: var(--hm-blue-deep);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.hm-fz-act > i:first-child {
  font-size: 14px;
  opacity: .9;
}

.hm-fz-act-ar {
  margin-left: auto;
  font-size: 15px;
  opacity: .42;
}

.hm-fz-act:hover,
.hm-fz-act:focus {
  background: rgba(255, 255, 255, .9);
  color: var(--hm-blue-deep);
  box-shadow: 0 8px 18px -12px rgba(31, 55, 96, .6);
  text-decoration: none;
  transform: translateY(-1px);
}

.hm-fz-form {
  padding: 18px 22px 0;
}

/* 版本选择：两张卡片。原生 select[name=kind] 只做取值用，视觉隐藏但仍在 DOM 里 */
.hm-fz-field {
  margin-bottom: 16px;
}

.hm-fz-field-lb {
  display: block;
  margin: 0 0 8px 2px;
  color: var(--hm-ink-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
}

.hm-fz-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hm-fz-plan {
  display: block;
  width: 100%;
  padding: 12px 14px 13px;
  border: 1.5px solid rgba(120, 140, 170, .22);
  border-radius: 14px;
  background-color: rgba(255, 255, 255, .72);
  background-image: none;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.hm-fz-plan-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--hm-ink);
  font-size: 14px;
  font-weight: 600;
}

.hm-fz-plan-ck {
  display: none;
  color: var(--hm-blue);
  font-size: 14px;
}

.hm-fz-plan-px {
  display: block;
  margin-top: 4px;
  color: var(--hm-blue-deep);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.15;
}

.hm-fz-plan-px em {
  margin-right: 1px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.hm-fz-plan-desc {
  display: block;
  margin-top: 2px;
  color: var(--hm-ink-2);
  font-size: 12px;
}

.hm-fz-plan.is-on {
  border-color: var(--hm-blue);
  background-color: rgba(10, 132, 255, .09);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .13);
}

.hm-fz-plan.is-on .hm-fz-plan-ck {
  display: inline-block;
}

.hm-fz-kindsel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

/* 已登录时的说明条（账号/密码/QQ 三行在这时不渲染） */
.hm-fz-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 22px 0;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(0, 122, 255, .1);
  color: var(--hm-blue-deep);
  font-size: 13px;
  line-height: 1.6;
}

.hm-fz-note i {
  margin-top: 2px;
  font-size: 14px;
}

.hm-fz-note b {
  font-weight: 600;
}

.hm-fz-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 13px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 16px -12px rgba(31, 55, 96, .45), inset 0 0 0 1px rgba(255, 255, 255, .75);
  transition: box-shadow .18s ease;
}

.hm-fz-row:focus-within {
  box-shadow: 0 0 0 2px rgba(10, 132, 255, .3), 0 6px 18px -12px rgba(31, 55, 96, .5);
}

.hm-fz-lb {
  display: flex;
  align-items: center;
  justify-content: center;
  /* bootstrap 给 label 挂了 margin-bottom:5px —— 不清掉灰底就比右侧输入框矮 5px */
  margin: 0;
  padding: 0 8px;
  background: rgba(10, 132, 255, .07);
  color: var(--hm-blue-deep);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.hm-fz-in {
  width: 100%;
  height: 47px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--hm-ink);
  font-size: 15px;
  box-shadow: none;
}

.hm-fz-in:focus {
  outline: 0;
  box-shadow: none;
}

.hm-fz-in::placeholder {
  color: #a0a7b4;
}

select.hm-fz-in {
  padding: 0 10px;
  cursor: pointer;
  -webkit-appearance: menulist;
  appearance: menulist;
}

/* 二级域名：前缀 + 「.」+ 域名后缀，挤在一行里，读起来就是一个完整域名 */
.hm-fz-dom {
  display: flex;
  align-items: center;
  min-width: 0;
}

.hm-fz-dom-in {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 2px;
}

.hm-fz-dom-dot {
  flex: 0 0 auto;
  color: #a8b0bd;
  font-size: 15px;
  line-height: 1;
}

.hm-fz-dom-sel {
  flex: 0 0 auto;
  width: auto;
  max-width: 150px;
  padding: 0 8px 0 4px;
  font-size: 14px;
}

.hm-fz-row--hide {
  display: none;
}

/* 提示语 + 右侧实时域名预览 */
.hm-fz-domainbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -8px 0 14px;
}

.hm-fz-hint {
  margin: 0;
  padding: 0 2px;
  color: var(--hm-ink-2);
  font-size: 12.5px;
  line-height: 1.6;
}

.hm-fz-pv {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 62%;
  padding: 4px 10px;
  border-radius: var(--hm-pill);
  background: rgba(10, 132, 255, .12);
  color: var(--hm-blue-deep);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 作者样式里的 display 会盖掉 [hidden] 的 UA 规则，得手动补回来 */
.hm-fz-pv[hidden] {
  display: none;
}

.hm-fz-submit {
  width: 100%;
  height: 50px;
  margin: 2px 0 0;
  border: 0;
  border-radius: 13px;
  background-color: #0a5dc2;
  background-image: linear-gradient(135deg, #0e86f5 0%, #0a5dc2 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.16px;
  cursor: pointer;
  box-shadow: 0 14px 28px -14px rgba(10, 93, 194, .95), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: box-shadow .18s ease, transform .18s ease, filter .18s ease;
}

.hm-fz-submit:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.hm-fz-submit:active {
  filter: none;
  transform: translateY(0);
}

.hm-fz-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 22px;
}

/* flex:1 1 0 —— 游客态两个按钮等宽，登录态只剩一个时自然撑满整行 */
.hm-fz-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.hm-fz-btn--soft {
  background: rgba(10, 132, 255, .12);
  color: var(--hm-blue-deep);
}

.hm-fz-btn--soft:hover,
.hm-fz-btn--soft:focus {
  background: rgba(10, 132, 255, .2);
  color: var(--hm-blue-deep);
  text-decoration: none;
}

.hm-fz-btn--solid {
  background: var(--hm-blue);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(0, 122, 255, .9);
}

.hm-fz-btn--solid:hover,
.hm-fz-btn--solid:focus {
  background: var(--hm-blue-deep);
  color: #fff;
  text-decoration: none;
}

/* 弹层内容（外观沿用 .modal-content 那套玻璃白）
   ⚠ 这两层是压在页面上方的，.92 的白会把下面的横幅/表单透出来，看清字都费劲 ⇒ 单独提到 .985 */
.hm-plain .hm-fz-modal .modal-content {
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 16px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 30px 70px -26px rgba(20, 35, 60, .5);
}

.hm-fz-modal .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(120, 140, 170, .16);
}

/* 两列对比表撑不满 bootstrap 默认的 600，收到 540 读起来更紧凑 */
@media (min-width: 768px) {
  .hm-fz-modal .modal-dialog {
    width: 540px;
  }
}

/* 站里的 .modal-backdrop 被 vendor 改成 rgba(0,0,0,.075)（几乎不压暗），弹层飘在半透明页面上分不清层级 */
.hm-plain .modal-backdrop.in {
  background-color: #0f1a2b;
  opacity: .42;
}

.hm-fz-modal .modal-title {
  font-size: 17px;
  letter-spacing: -.2px;
}

.hm-fz-modal .modal-body {
  max-height: 64vh;
  padding: 6px 20px 20px;
  overflow: auto;
}

.hm-fz-acc-i {
  margin-bottom: 9px;
  padding: 0 14px;
  border: 1px solid rgba(120, 140, 170, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
}

.hm-fz-acc-i summary {
  position: relative;
  padding: 12px 22px 12px 0;
  color: var(--hm-ink);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.hm-fz-acc-i summary::-webkit-details-marker {
  display: none;
}

.hm-fz-acc-i summary::after {
  content: "+";
  position: absolute;
  top: 9px;
  right: 0;
  color: var(--hm-ink-3);
  font-size: 17px;
  font-weight: 400;
}

.hm-fz-acc-i[open] summary::after {
  content: "\2013";
}

.hm-fz-acc-i p {
  margin: 0;
  padding: 0 0 13px;
  color: var(--hm-ink-2);
  font-size: 13.5px;
  line-height: 1.75;
}

.hm-fz-price-row {
  display: flex;
  gap: 10px;
  margin: 2px 0 12px;
}

.hm-fz-price-row span {
  flex: 1;
  padding: 9px 12px;
  border-radius: 11px;
  background: rgba(10, 132, 255, .1);
  /* 品牌蓝 #007aff 当 13px 文字只有 3.5:1 ⇒ 这里必须用 deep */
  color: var(--hm-blue-deep);
  font-size: 13px;
  text-align: center;
}

.hm-fz-price-row b {
  font-size: 15.5px;
  font-weight: 700;
}

.hm-fz-tb {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

.hm-fz-tb th,
.hm-fz-tb td {
  padding: 11px 8px;
  border-bottom: 1px solid rgba(120, 140, 170, .14);
  text-align: center;
}

.hm-fz-tb th:first-child,
.hm-fz-tb td:first-child {
  padding-left: 12px;
  text-align: left;
}

.hm-fz-tb thead th {
  background: rgba(240, 240, 243, .7);
  color: var(--hm-ink-2);
  font-size: 13px;
  font-weight: 600;
}

.hm-fz-tb tbody tr:last-child td {
  border-bottom: 0;
}

.hm-fz-yes {
  color: #1a9c57;
}

.hm-fz-no {
  color: #c3c9d4;
}

@media (max-width: 479px) {
  .hm-plain {
    padding: 18px 10px 30px;
  }

  .hm-fz-acts,
  .hm-fz-form,
  .hm-fz-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hm-fz-row {
    grid-template-columns: 74px 1fr;
  }

  .hm-fz-dom-sel {
    max-width: 118px;
    padding-left: 2px;
    font-size: 13px;
  }

  .hm-fz-plan {
    padding: 11px 11px 12px;
  }

  .hm-fz-plan-px {
    font-size: 21px;
  }

  /* 经营概览：375px 下三列已经叠成单列（见 720 断点），这里只收字号和内距，
     让 7 根柱子在 ~300px 里还看得清，别把「今日 0 单」的环比药丸挤成两行 */
  .hm-biz-body {
    padding: 4px 12px 14px;
    gap: 10px;
  }

  .hm-biz-pane,
  .hm-biz-chart {
    padding: 11px 12px 12px;
  }

  .hm-biz-hv {
    font-size: 24px;
  }

  .hm-bars {
    gap: 5px;
    height: 78px;
  }

  .hm-bar-d {
    font-size: 10.5px;
  }

  /* 站点信息行：326px 可用宽下，地址 + 行尾药丸会把域名断成「…heima.te / st」，
     连同字号和药丸内距一起收一点就刚好放得下 */
  .hm-site-row {
    gap: 8px;
    font-size: 13.5px;
  }

  .hm-site-act {
    padding: 4px 10px;
    font-size: 12.5px;
  }
}

/* ── 窄屏 ────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .hm-ucpage .hm-page {
    padding: 12px 10px 32px;
  }

  .hm-ucpage .panel-body {
    padding: 12px 12px;
  }

  .hm-ucpage .table > thead > tr > th,
  .hm-ucpage .table > tbody > tr > td {
    padding: 10px 8px;
    font-size: 13.5px;
  }
}


/* ── 嵌入模式 ────────────────────────────────────────────────────────────────
 * 被用户中心外壳的 iframe 以 ?__embed=1 加载（点左侧菜单只换右侧内容）：
 * 侧栏、顶栏、遮罩都由外壳负责，这里只留内容区，样式只有一份。
 */
html.qy-embed .hm-side,
html.qy-embed .hm-side-mask,
html.qy-embed .hm-top {
  display: none !important;
}

/* 内页万一靠 JS 跳到了不带 __embed 的地址，气泡会跟着进来一个，一并藏掉 */
html.qy-embed .hm-kefu {
  display: none !important;
}

html.qy-embed .hm-main {
  margin-left: 0 !important;
}

/* ── 外壳里的右侧内容区（user-spa.js 建） ────────────────────────────────── */
.qy-uc-spa {
  position: relative;
  z-index: 1;
}

.qy-uc-spa > iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
}

/* 换页后原来的整页内容让位给 iframe（不删节点：返回时还要用） */
body.qy-uc-spa-on .hm-main > .hm-page,
body.qy-uc-spa-on .hm-main > .hm-content {
  display: none !important;
}

/* ── 自助更换域名（平铺版式） ────────────────────────────────────────────────
 * 原来是 col-lg-6 窄栏 + 三条 input-group 竖着叠，字段被挤成一列。
 * 这里改成一张通栏玻璃卡：当前域名两块瓷砖平铺在上，新域名三个格子平铺在一行。
 * ⚠ 子元素一律不挂 backdrop-filter（父级 .hm-card 已有 ⇒ 子级会被扁平化渲成纯白）。
 */
.hm-cu .hm-cu-card {
  /* 铺满整个内容列（初版限 1080 居中，用户要铺满） */
  width: 100%;
  max-width: none;
  margin: 0;
}

.hm-cu .hm-cu-card > .hm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hm-cu-balance {
  font-size: 13px;
  color: rgba(31, 55, 96, .62);
  white-space: nowrap;
}

.hm-cu-balance b {
  font-size: 15.5px;
  font-weight: 700;
  color: #0050c8;
}

.hm-cu .hm-cu-card > .hm-card-body {
  padding: 20px 22px 22px;
}

.hm-cu-sec + .hm-cu-sec {
  margin-top: 20px;
}

.hm-cu-sec-h {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(31, 55, 96, .66);
}

/* ── 当前域名：两块瓷砖 ─────────────────────────────────────────────────── */
.hm-cu-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.hm-cu-tile {
  position: relative;
  display: block;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

.hm-cu-tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hm-cu-tile-in {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  background: rgba(255, 255, 255, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.hm-cu-tile:hover .hm-cu-tile-in {
  background: rgba(255, 255, 255, .48);
}

.hm-cu-tile input:checked + .hm-cu-tile-in {
  border-color: rgba(0, 122, 255, .55);
  background: rgba(0, 122, 255, .10);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.hm-cu-tile input:focus + .hm-cu-tile-in {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.hm-cu-tile-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(31, 55, 96, .6);
}

.hm-cu-tag {
  padding: 1px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  line-height: 18px;
  color: #0050c8;
  background: rgba(10, 132, 255, .14);
}

.hm-cu-tile-v {
  font-size: 15px;
  font-weight: 600;
  color: var(--hm-ink, #1c2b4a);
  word-break: break-all;
}

.hm-cu-tile.is-off {
  cursor: default;
}

.hm-cu-tile.is-off .hm-cu-tile-in {
  border-style: dashed;
  background: rgba(255, 255, 255, .2);
}

.hm-cu-tile.is-off .hm-cu-tile-v {
  font-weight: 500;
  color: rgba(31, 55, 96, .45);
}

/* ── 新域名：三个格子平铺 ───────────────────────────────────────────────── */
.hm-cu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .62fr);
  gap: 12px;
}

.hm-cu-field {
  display: block;
  min-width: 0;
  margin: 0;
  font-weight: normal;
}

.hm-cu-lb {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: rgba(31, 55, 96, .6);
}

.hm-cu-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 2px rgba(31, 55, 96, .06);
  font-size: 14px;
  color: var(--hm-ink, #1c2b4a);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.hm-cu-input:focus {
  border-color: rgba(0, 122, 255, .55);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .14);
}

select.hm-cu-input {
  padding-right: 34px;
  cursor: pointer;
}

.hm-cu-money {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  background: rgba(255, 255, 255, .38);
}

.hm-cu-money b {
  font-size: 16.5px;
  font-weight: 700;
  color: #0050c8;
}

.hm-cu-money em {
  font-style: normal;
  font-size: 12.5px;
  color: rgba(31, 55, 96, .6);
}

/* ── 预览条 ─────────────────────────────────────────────────────────────── */
.hm-cu-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(120, 140, 170, .38);
  border-radius: 12px;
  background: rgba(255, 255, 255, .3);
}

.hm-cu-pv-k {
  font-size: 12.5px;
  color: rgba(31, 55, 96, .6);
}

.hm-cu-preview code,
.hm-cu-preview #hmCuPreview {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #0050c8;
}

.hm-cu-pv-tip {
  margin-left: auto;
  font-size: 12px;
  color: rgba(31, 55, 96, .55);
}

/* ── 底部：提示 + 按钮 ──────────────────────────────────────────────────── */
.hm-cu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hm-hair, rgba(120, 140, 170, .18));
}

.hm-cu-note {
  font-size: 12.5px;
  color: rgba(31, 55, 96, .6);
}

.hm-cu-note i {
  margin-right: 4px;
  color: rgba(31, 55, 96, .45);
}

.hm-cu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 26px;
  border: 1px solid rgba(0, 90, 200, .45);
  border-radius: 12px;
  background: #007aff;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(0, 80, 200, .85);
  transition: background-color .18s, transform .12s, box-shadow .18s;
}

.hm-cu-btn:hover,
.hm-cu-btn:focus {
  background: #0069d9;
  color: #fff;
}

.hm-cu-btn:active {
  transform: translateY(1px);
}

@media (max-width: 991px) {
  .hm-cu-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-cu-pv-tip {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hm-cu-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .hm-cu-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .hm-cu-btn {
    justify-content: center;
  }
}

/* ── 更换域名：补边（白描边在浅底上量不出对比度，未绑定那块几乎看不见） ───────── */
.hm-cu-tile-in {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 0 0 1px rgba(120, 140, 170, .08);
}

.hm-cu-tile.is-off .hm-cu-tile-in {
  border: 1px dashed rgba(120, 140, 170, .34);
  background: rgba(255, 255, 255, .2);
  box-shadow: none;
}

/* 390 这种窄屏标题和余额挤一行会顶到边 */
.hm-cu .hm-cu-card > .hm-card-head {
  flex-wrap: wrap;
}

/* 铺满后「更换费用」那格会被拉得很空，宽屏给它一个上限（窄屏仍是整格） */
@media (min-width: 992px) {
  .hm-cu-money {
    max-width: 240px;
  }
}

/* ── 分站首页模板自选（user/uset.php?mod=site）───────────────────────────────
   原来是一个 <select>，列的是纯英文目录名，代理根本看不出模板长什么样。
   改成带缩略图的瓷砖墙：点一下选中（蓝描边 + 右上勾），选了没存会出黄字提示。
   缩略图优先走 assets/template/heima/img/tpl/<name>.jpg（预裁 16:10、几十 KB），
   没有预裁图的模板由 PHP 回落到 template/<name>/preview.*（有的上 MB）。
   ⚠ 子元素一律不挂 backdrop-filter：外层 .block 已有，嵌套会被扁平化渲成纯白。
   ⚠ 白描边在浅色卡上看不见，未绑定/未选中的边一律用 rgba(120,140,170,…) 发丝边。 */
.hm-ucpage .hm-tpl {
  margin: 2px 0 14px;
}

.hm-ucpage .hm-tpl-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 10px;
}

.hm-ucpage .hm-tpl-cur {
  color: var(--hm-ink-3);
  font-size: 12px;
}

.hm-ucpage .hm-tpl-cur b {
  color: var(--hm-blue-deep);
  font-weight: 600;
}

.hm-ucpage .hm-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}

.hm-ucpage .hm-tpl-tile {
  position: relative;
  display: block;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

.hm-ucpage .hm-tpl-tile input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hm-ucpage .hm-tpl-in {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 徽标换行（heima 有两个）会把那一块顶高，撑满整行让同一行的卡片底边对齐 */
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(120, 140, 170, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.hm-ucpage .hm-tpl-tile:hover .hm-tpl-in {
  border-color: rgba(0, 122, 255, .34);
  background: rgba(255, 255, 255, .62);
}

.hm-ucpage .hm-tpl-tile input:checked + .hm-tpl-in {
  border-color: rgba(0, 122, 255, .6);
  background: rgba(0, 122, 255, .08);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.hm-ucpage .hm-tpl-tile input:focus-visible + .hm-tpl-in {
  box-shadow: 0 0 0 3px rgba(0, 122, 255, .24), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.hm-ucpage .hm-tpl-tile input:checked + .hm-tpl-in::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #007aff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 4px 10px -4px rgba(0, 80, 200, .9);
}

.hm-ucpage .hm-tpl-shot {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, #eef4fb, #dfe9f6);
}

.hm-ucpage .hm-tpl-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hm-ucpage .hm-tpl-shot--auto {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 93, 184, .5);
  background: linear-gradient(160deg, #eaf2fd, #d7e6f8);
}

.hm-ucpage .hm-tpl-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px 9px;
}

.hm-ucpage .hm-tpl-meta b {
  color: var(--hm-ink);
  font-size: 12.5px;
  font-weight: 600;
  word-break: break-all;
}

.hm-ucpage .hm-tpl-flag {
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(10, 132, 255, .14);
  color: #0050c8;
  font-size: 10.5px;
  font-style: normal;
  line-height: 17px;
}

.hm-ucpage .hm-tpl-flag--main {
  background: rgba(255, 190, 60, .24);
  color: #8a5a00;
}

.hm-ucpage .hm-tpl-dirty {
  color: #b25b00;
}

.hm-ucpage .hm-tpl-dirty[hidden] {
  display: none;
}

/* 主站关闭「分站可更换模板」时的只读说明（虚线边、不用纯白描边） */
.hm-ucpage .hm-tpl-lock {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(120, 140, 170, .34);
  border-radius: 12px;
  background: rgba(255, 255, 255, .28);
  color: var(--hm-ink-3);
  font-size: 12.5px;
  line-height: 1.65;
}

.hm-ucpage .hm-tpl-lock i {
  margin-top: 3px;
  color: rgba(31, 55, 96, .45);
}

.hm-ucpage .hm-tpl-lock b {
  color: var(--hm-ink-2);
  font-weight: 600;
}

@media (max-width: 991px) {
  .hm-ucpage .hm-tpl-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* 手机：auto-fill 在 236px 的卡片宽度下只排得下 1 列，20 个模板要滚十几屏。
   窄屏直接锁成 2 列（每块 ~112px），缩略图仍能认出是哪套。 */
@media (max-width: 575px) {
  .hm-ucpage .hm-tpl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hm-ucpage .hm-tpl-meta {
    padding: 7px 8px 8px;
  }

  .hm-ucpage .hm-tpl-meta b {
    font-size: 12px;
  }
}

/* ── 用户列表（user/userlist.php）─────────────────────────────────────────
   对齐后台「代理管理 → 用户列表」的版式：卡片标题 + 统计条 + 行内搜索 + 表格
   + 空态 + 分页。表格/表单/按钮/分页的皮肤上面已经有了，这里只补三件：
   ① 统计条与工具条的间距  ② 搜索框吃满剩余宽度  ③ 0 行时的空态。
   父级 .block 已有 backdrop-filter，子元素一律不再挂（嵌套会被压成纯白）。 */
.hm-ucpage .hm-ul > .alert {
  margin: 0 0 12px !important;
}

/* 行内搜索：输入框 flex 吃满，按钮按内容宽度停在右边（和后台同一条基线）
   ⚠ .hm-home .form-control 是 width:auto（首页搜索框按内容收缩），
     替换元素 width:auto 会退回固有宽度 ⇒ 这里必须显式 100%（0,3,0 压得住 0,2,0）。 */
.hm-ucpage .hm-ul-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

/* 基准宽度按 140 起（不是 240）：窄屏 390 时卡片内容区只有 ~272px，
   240 + 10 + 62 会溢出而把「搜索」挤到第二行；140 起就还能同排，输入框自己撑满。 */
.hm-ucpage .hm-ul-tool .form-control {
  flex: 1 1 140px;
  width: 100%;
  min-width: 0;
}

/* 按钮默认 36px（padding 7 + 行高 20 + 边框），输入框是 34px ⇒ 同一行差 2px。
   收成与 .form-control 同高（和后台 .input-group-btn > .btn 的做法一致）。 */
.hm-ucpage .hm-ul-tool .btn {
  flex: 0 0 auto;
  margin: 0;
  height: 34px;
  padding: 0 16px;
  line-height: 32px;
}

/* 空态：后台列表由 heima-skin.js 注入，前台用户中心不加载那支 JS，服务端直接出。
   13px 文字落在玻璃上 --hm-ink-3(#8a93a6) 只有约 3:1，正文改用 --hm-ink-2。 */
.hm-ucpage .hm-ul-empty-row > td {
  padding: 44px 12px !important;
}

.hm-ucpage .hm-ul-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--hm-ink-2);
  font-size: 13px;
}

.hm-ucpage .hm-ul-empty > i {
  font-size: 18px;
  opacity: .85;
  color: var(--hm-ink-3);
}

/* 窄屏：6 列在手机上只能横向滚（.table-responsive 兜着），别把表头压成一字一行 */
@media (max-width: 575px) {
  .hm-ucpage .hm-ul-table > thead > tr > th,
  .hm-ucpage .hm-ul-table > tbody > tr > td {
    white-space: nowrap;
  }
}

/* ═══ 商品价格管理 /user/shoplist.php ═════════════════════════════════════
   版式与 userlist.php 同一套：玻璃卡 + 说明条 + 工具行 + 表格 + 服务端空态 + 表下分页。
   卡片内距由 .block > div:not(.block-title) 统一给（16px 18px），这里不再重复。 */
.hm-ucpage .hm-sl > .alert {
  margin: 0 0 12px !important;
}

/* 工具行：分类下拉 + 两个动作按钮 + 商品计数。390 下允许换行（统计文案最长）。 */
.hm-ucpage .hm-sl-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.hm-ucpage .hm-sl-count {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--hm-ink-2);
  font-size: 13px;
  line-height: 20px;
}

.hm-ucpage .hm-sl-count b {
  color: var(--hm-ink);
  font-weight: 600;
}

/* 下拉别写死宽度：分类名长短差很多，给它一个可伸缩的区间就行 */
.hm-ucpage .hm-sl-tool .form-control {
  flex: 0 1 200px;
  width: auto;
  min-width: 132px;
}

/* 与 .form-control 同高（34px），否则按钮 36 会比下拉高 2px */
.hm-ucpage .hm-sl-tool .btn {
  flex: 0 0 auto;
  margin: 0;
  height: 34px;
  padding: 0 16px;
  line-height: 32px;
}

.hm-ucpage .hm-sl-tool .btn > i {
  margin-right: 5px;
}

/* ── 价格列 ── */
/* ⚠ 基础色在 .hm-ucpage .table > tbody > tr > td 上（0,1,3），
   这里必须带上 .hm-sl-table 和 td 才压得住，别只写 .hm-sl-sale。 */
.hm-ucpage .hm-sl-table > tbody > tr > td.hm-sl-cost {
  color: var(--hm-ink-2);
}

.hm-ucpage .hm-sl-table > tbody > tr > td.hm-sl-sub {
  color: #6f42c1;
}

.hm-ucpage .hm-sl-table > tbody > tr > td.hm-sl-sale {
  color: #d0342c;
  font-weight: 600;
}

.hm-ucpage .hm-sl-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hm-ucpage .hm-sl-cur {
  margin-right: 1px;
  font-size: 11px;
  opacity: .7;
}

.hm-ucpage .hm-sl-name {
  word-break: break-word;
}

.hm-ucpage .hm-sl-thnum,
.hm-ucpage .hm-sl-thstate,
.hm-ucpage .hm-sl-thop {
  white-space: nowrap;
}

/* ── 修改价格（?my=edit）：两列栅格，商品名占整行 ── */
.hm-ucpage .hm-sl-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  max-width: 720px;
}

.hm-ucpage .hm-sl-field {
  min-width: 0;
}

.hm-ucpage .hm-sl-field.is-full,
.hm-ucpage .hm-sl-actions {
  grid-column: 1 / -1;
}

/* ⚠ home.css 里有 `.hm-home .form-control { width:auto }`（同优先级、后加载），
   不补这一条输入框只有 ~187px 的默认宽度，两列栅格里会缩成一小截。 */
.hm-ucpage .hm-sl-field > .form-control {
  width: 100%;
}

/* 上架/下架只有两个选项，撑满半列太宽 */
.hm-ucpage .hm-sl-field > select.form-control {
  max-width: 200px;
}

.hm-ucpage .hm-sl-field > label {
  display: block;
  margin: 0 0 6px;
  color: var(--hm-ink-2);
  font-size: 13px;
  font-weight: 500;
}

.hm-ucpage .hm-sl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

@media (max-width: 575px) {
  .hm-ucpage .hm-sl-form {
    grid-template-columns: 1fr;
  }

  .hm-ucpage .hm-sl-tool .form-control {
    flex: 1 1 100%;
  }

  /* 窄屏表格只能横向滚（.table-responsive 兜着），别让表头压成一字一行 */
  .hm-ucpage .hm-sl-table > thead > tr > th,
  .hm-ucpage .hm-sl-table > tbody > tr > td {
    white-space: nowrap;
  }
}

/* ═══ 分站列表 /user/sitelist.php ═════════════════════════════════════════
   列表外壳直接复用 .hm-ul-*（卡片/说明条/工具行/空态）与 .hm-ul-table，
   表单页复用 .hm-sl-form 两列栅格；这里只补分站页面独有的三件：
   ① 「前缀 + 后缀」同排的域名输入  ② 单元格第二行（站点QQ / 到期 / 额外域名）
   ③ 工具行右侧的「添加分站」。 */
.hm-ucpage .hm-sl-domain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
}

/* ⚠ 这两个输入框不是 .hm-sl-field 的直接子元素，吃不到上面那条 width:100%；
   .hm-home .form-control{width:auto} 会把它压成固有宽度，必须显式重写。 */
.hm-ucpage .hm-sl-domain .form-control {
  flex: 1 1 180px;
  width: auto;
  min-width: 0;
}

.hm-ucpage .hm-sl-domain select.form-control {
  flex: 0 0 auto;
  max-width: 190px;
}

.hm-ucpage .hm-st-note {
  display: block;
  margin-top: 6px;
  color: var(--hm-ink-2);
  font-size: 12px;
  line-height: 18px;
}

/* 两行单元格：上下对齐更整齐，第二行用次级文字色（13px 落在玻璃上要够对比度） */
.hm-ucpage .hm-st-table > tbody > tr > td {
  vertical-align: top;
}

.hm-ucpage .hm-st-sub {
  display: block;
  margin-top: 2px;
  color: var(--hm-ink-2);
  font-size: 12px;
  line-height: 18px;
}

/* 到期时间那行是 span.hm-st-sub.hm-st-warn，规则必须落在 span 上：
   写成 td.hm-st-warn 只会命中外层单元格，内层 .hm-st-sub 的 color 仍然会赢 */
.hm-ucpage .hm-st-sub.hm-st-warn {
  color: #d0342c;
}

.hm-ucpage .hm-st-money {
  color: var(--hm-ink);
  font-variant-numeric: tabular-nums;
}

.hm-ucpage .hm-st-acts {
  white-space: nowrap;
}

.hm-ucpage .hm-st-acts .btn + .btn {
  margin-left: 6px;
}

/* 工具行里「添加分站」靠右（输入框 flex:1 已经吃掉剩余空间，这里只是兜底） */
.hm-ucpage .hm-ul-tool .hm-st-add {
  margin-left: auto;
}

@media (max-width: 575px) {
  .hm-ucpage .hm-ul-tool .hm-st-add {
    margin-left: 0;
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ── showmsg() 结果卡：保存成功 / 失败之后的整页提示 ────────────────────────
   showmsg()（includes/function.php）输出的是 bootstrap 面板：
     <div class="panel panel-success hm-showmsg">
       <div class="panel-heading">提示信息</div>
       <div class="panel-body">修改保存成功！<hr><a>« 返回上一页</a></div></div>
   之前它按普通卡片铺满整行（实测 1150×165），顶着「提示信息」这种废话标题、
   底下吊一个裸链接 —— 保存完页面看着像坏了。这里做成居中的结果卡：
   状态色细条 + 圆形状态图标 + 胶囊返回按钮。
   ⚠ 只认 .hm-ucpage 作用域，后台 appui / 未登录的整页提示都不受影响。 */

.hm-ucpage .panel.hm-showmsg {
  position: relative;
  max-width: 520px;
  margin: 48px auto !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: 22px !important;
  background-color: rgba(255, 255, 255, .88) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82)) !important;
  box-shadow: 0 28px 64px -34px rgba(31, 55, 96, .55), 0 2px 10px -6px rgba(31, 55, 96, .22), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
  text-align: center;
}

/* 顶部状态色条 */
.hm-ucpage .panel.hm-showmsg::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, #0a84ff, #0060df);
}

.hm-ucpage .hm-showmsg.panel-success::before { background: linear-gradient(90deg, #34d399, #059669); }
.hm-ucpage .hm-showmsg.panel-warning::before { background: linear-gradient(90deg, #fbbf24, #d97706); }
.hm-ucpage .hm-showmsg.panel-danger::before  { background: linear-gradient(90deg, #fb7185, #e11d48); }

/* 「提示信息」这句标题没有任何信息量，直接去掉，正文自己就是标题 */
.hm-ucpage .hm-showmsg .panel-heading { display: none !important; }

.hm-ucpage .hm-showmsg .panel-body {
  padding: 38px 30px 28px;
  color: var(--hm-ink);
  font-size: 16px;
  line-height: 1.75;
}

/* 状态图标：纯 CSS 圆片 + 字符，不依赖 bootstrap 的图标字体 */
.hm-ucpage .hm-showmsg .panel-body::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 14px 28px -14px rgba(5, 150, 105, .75);
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
}

.hm-ucpage .hm-showmsg.panel-info .panel-body::before {
  content: 'i';
  background: linear-gradient(135deg, #409cff, #0060df);
  box-shadow: 0 14px 28px -14px rgba(0, 96, 223, .7);
}

.hm-ucpage .hm-showmsg.panel-warning .panel-body::before {
  content: '!';
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 14px 28px -14px rgba(217, 119, 6, .7);
}

.hm-ucpage .hm-showmsg.panel-danger .panel-body::before {
  content: '×';
  background: linear-gradient(135deg, #fb7185, #e11d48);
  box-shadow: 0 14px 28px -14px rgba(225, 29, 72, .7);
}

.hm-ucpage .hm-showmsg .panel-body hr {
  margin: 22px auto 0;
  border: 0;
  border-top: 1px solid var(--hm-hair);
}

/* 正文里可能自带链接（「点我充值」这类），保持普通链接样式 */
.hm-ucpage .hm-showmsg .panel-body a {
  color: var(--hm-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 返回按钮：showmsg 输出的是「<< 返回上一页」纯文本链接。
   字号归零后换成胶囊按钮（DOM 里的文字照旧存在，读屏不受影响）。 */
.hm-ucpage .hm-showmsg .panel-body > a:last-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 152px;
  height: 42px;
  margin-top: 22px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0a84ff, #0060df);
  box-shadow: 0 12px 26px -14px rgba(0, 96, 223, .8);
  color: #fff !important;
  font-size: 0;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.hm-ucpage .hm-showmsg .panel-body > a:last-of-type::before {
  content: '←';
  font-size: 15px;
}

.hm-ucpage .hm-showmsg .panel-body > a:last-of-type::after {
  content: '返回上一页';
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.hm-ucpage .hm-showmsg .panel-body > a:last-of-type:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -14px rgba(0, 96, 223, .9);
}

@media (max-width: 560px) {
  .hm-ucpage .panel.hm-showmsg {
    margin: 26px 12px !important;
  }

  .hm-ucpage .hm-showmsg .panel-body {
    padding: 32px 20px 24px;
    font-size: 15px;
  }

  .hm-ucpage .hm-showmsg .panel-body::before {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}