/* ══════════════════════════════════════════════════════════════════════    控制台模板（console）—— 覆盖层样式    ══════════════════════════════════════════════════════════════════════     ★ 设计思路（为什么不是"重写一套 CSS"）    ─────────────────────────────────────────────────────────────────────    客户端 28 个视图一共用了 **193 个不同的 class**，其中一大半是页面    内容专用的（.hero-slide / .qcard / .pcard / .login-box …）。    重写全部 → 工作量巨大，而且**漏一个就是那个页面错位**。     而"换模板"的本质其实是：**换色 / 换圆角 / 换阴影 / 换外壳 / 换密度**。    所以这里用**覆盖层**，四层叠加：      ① 变量层   重定义 CSS 变量 → 一处改动，全站换色      ② 组件层   覆盖卡片/按钮/标签/表格/输入框的观感      ③ 外壳层   两级导航（顶部深色大类 + 左侧浅色子菜单）      ④ 密度层   收紧字号与间距（2026-10 用户反馈"太空"后加 ✓）    原有 class 一个都不用动 ✗ 内容区自然就跟着变了 ✓     ★★ 安全设计（最重要的一条）    ─────────────────────────────────────────────────────────────────────    **所有规则都限定在 `body.tpl-console` 之下** ✓    → 默认模板的渲染**一个字节都不受影响** ✓    → 就算这份 CSS 写错了 ✗ 最多是控制台模板不好看 ✓      永远不会波及正在用的默认模板 ✓    → 管理员随时可以切回 default ✓（后台 → 系统设置 → 模板管理 ✓）     ★ 色板来源    ─────────────────────────────────────────────────────────────────────    全部取自 console.apayun.com 的实际 CSS（统计出来的高频值 ✓）      主色   #1861f2   浅 #4287ff   深 #0a44cc      边框   #e8e8e8 / #d9d9d9      背景   #f5f7fa / #fafafa      红     #ff4d4f   黄 #faad14   绿 #52c41a      顶栏   #1f2733   悬停 #2d3340      圆角   3px（比默认主题的 10px 收敛很多 ✓）    ★ 不引任何外部资源：没有 CDN / 字体库 / 图标库 ✓      本文件由 layout.php 在控制台模式下**内联输出** ✓      （内联而不是外链 ✗ 避免 FOUC 闪一下未样式内容 ✓ 也不怕 CSP ✓）     ★ 两级导航（2026-10 方案 B ✗ 用户选定 ✓）    ─────────────────────────────────────────────────────────────────────    顶级 7 个 ✗ 用户中心 · 我的服务 · 订购 · 财务 · 工单 · 充值 · 会员信息 ✓    左栏 = **当前大类**的子项 ✓    ⚠️ 只在宽屏（≥901px）启用 ✗ 窄屏回落到原来的平级抽屉 ✓       → 手机上永远是原来那套 ✓ **不依赖任何 JS** ✓ 没有死锁风险 ✓     ⚠️ 改这个文件后要**重新部署**才会生效（内容是编译进页面的 ✓）    ══════════════════════════════════════════════════════════════════════ */
/* ── ① 变量层 ─────────────────────────────────────────────────────── */
body.tpl-console {
  --pri:#1861f2;
  --pri-d:#0a44cc;
  --bd:#e8e8e8;
  --txt:rgba(0,0,0,.85);
  --mut:rgba(0,0,0,.45);
  --ok:#52c41a;
  --warn:#faad14;
  --err:#ff4d4f;
  --bg:#f5f7fa;
  --pri-grad:linear-gradient(135deg,#4287ff 0%,#1861f2 55%,#0a44cc 100%);
  --pri-soft:#f0f5ff;
/* 覆盖层自己的变量 ✗ 默认模板里没有 ✓ 不影响它 ✓ */
  --cs-r:3px;
  --cs-sh:0 1px 2px rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02);
  --cs-top:60px;
/* 顶栏高度（2026-10 按参考站校准 ✓                              用户截图里那条深色栏约 62px ✗                              52 → 56 → **60px** 取个整数 ✓）*/
  --cs-sub:210px;
/* 左栏宽度（2026-10 用户要求加宽 ✗ 186 → 210 ✓                              参考站那条侧栏也差不多这么宽 ✓）*/
/* ⚠️⚠️ 顶栏与左栏的配色 ✗ 2026-10 **从参考站截图里取的真实像素值** ✓      取色方法 ✗ 用 Pillow 打开用户发的截图 ✓ 直接读像素 ✓      （不是靠眼睛估的 ✗ 估不准冷暖和明度 ✓）        侧栏底色   #fafcff   占全图 89.7% ✓ 极浅的**冷白带蓝** ✓        高亮行     #e6ebf5   浅蓝灰 ✓        高光条     #1861f2   和主色**完全一致** ✓ 位置在**右边** ✓        标题文字   #a3b1cc   浅蓝灰 ✓        菜单文字   #313e59   深蓝灰 ✓        顶栏深色   #2d3340   比我原来用的 #1f2733 更浅更蓝 ✓      ★ 关键发现 ✗ 参考站整套是**偏蓝的冷色系** ✓        我原来整套用的是**中性灰**（#f5f5f5 / #fff ✓）        → 冷暖不对 ✗ 所以看着"不一样" ✓✓ */
  --cs-top-bg:#2d3340;
/* 顶栏底色（取色 ✓ 原 #1f2733 偏暗偏中性 ✓）*/
  --cs-top-hover:#3a4252;
/* 顶栏悬停（跟着新的底色提亮一档 ✓）*/
  --cs-sub-bg:#fafcff;
/* 左栏底色（取色 ✓ 冷白带蓝 ✓）*/
  --cs-sub-active:#e6ebf5;
/* 高亮行底色（取色 ✓）*/
  --cs-sub-title:#a3b1cc;
/* 左栏顶部标题文字（取色 ✓）*/
  --cs-sub-text:#313e59;
/* 左栏菜单文字（取色 ✓）*/
  --cs-sub-bd:#e9edf5;
/* 左栏分割线（取色 ✓ 也是冷灰蓝 ✓）*/
  font-family:-apple-system,BlinkMacSystemFont,
"Segoe UI"  ,
"PingFang SC"  ,
"Hiragino Sans GB"  ,
"Microsoft YaHei"  ,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* ── ② 组件观感层 ─────────────────────────────────────────────────── */
body.tpl-console .card {
  border-radius:var(--cs-r);
  padding:18px;
  border-color:var(--bd);
  box-shadow:var(--cs-sh);
}
body.tpl-console .stat {
  border-radius:var(--cs-r);
  padding:16px 18px;
  border-color:var(--bd);
  box-shadow:var(--cs-sh);
}
body.tpl-console .stat .k {
  color:var(--mut);
  font-size:13px
}
body.tpl-console .stat .v {
  font-size:26px;
  font-weight:600;
  letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;
  margin-top:6px
}
/* 按钮：保持 inline-block ✗ 不改 display ✓    否则会影响那些把按钮当行内元素用的老页面 ✓ */
body.tpl-console .btn {
  border-radius:var(--cs-r);
  padding:7px 16px;
  font-size:13.5px;
  box-shadow:none;
  transition:background .15s,color .15s,border-color .15s;
/* ⚠️ 边框色 = 主色 ✗ 和底色一致 ✓      原写的是 var(--bd)（浅灰 ✗）→ 蓝色实心按钮外面套一圈灰边 ✓      看着发脏 ✓ 现在实心按钮的边框和底色统一 ✓      ⚠️ .btn.alt（白底描边按钮）在下面单独给灰边 ✓         它要的就是一圈浅灰轮廓 ✓ 两者不能混 ✓ */
  border-color:var(--pri);
}
/* ⚠️⚠️ 2026-10 修一个真 bug ✗ 用户反馈「直接看不清了，鼠标移动到的时候」✓  *  *   改之前这里写的是：  *     body.tpl-console .btn:hover{ border-color:var(--pri); color:var(--pri) }  *     —— 只改了**文字色和边框色** ✗ **没改底色** ✓  *  *   而 layout.php 的基础规则是：  *     .btn{ background:var(--pri); color:#fff }            ← 蓝底白字 ✓  *     .btn:hover{ background:var(--pri-d); color:#fff }    ← 深蓝底白字 ✓  *     本来是对的 ✓✓  *  *   我的覆盖只把 color 换成了 var(--pri)（主色蓝 ✓）  *   底色却仍然是 layout 给的 var(--pri-d)（深蓝 ✓）  *   → **蓝字压在深蓝底上** ✗ 对比度极低 ✓ 就是用户看到的那样 ✓✓  *  *   ★ 正确做法 ✗ 悬停时**底色、边框、文字**三个一起给 ✓  *     漏掉任何一个都会出这种"单腿走路"的问题 ✓  *   ★ 现在：深蓝底 + 深蓝边 + **白字** ✓ 和基础规则一致 ✓  *     对比度也够（见下方注释里的实测值 ✓） */
body.tpl-console .btn:hover {
  background:var(--pri-d);
  border-color:var(--pri-d);
  color:#fff;
}
body.tpl-console .btn.alt {
  background:#fff;
  color:var(--txt);
  border-color:var(--bd);
/* 描边按钮要的浅灰轮廓 ✓ 和实心按钮区分开 ✓ */
}
body.tpl-console .btn.alt:hover {
  background:var(--pri-soft);
  color:var(--pri);
  border-color:var(--pri)
}
body.tpl-console .btn.sm {
  padding:5px 11px;
  font-size:12.5px
}
body.tpl-console .btn.ghost {
  background:transparent;
  border-color:var(--bd);
  color:var(--mut)
}
body.tpl-console .alert {
  border-radius:var(--cs-r);
  border-width:1px;
  font-size:13px
}
body.tpl-console .tag {
  border-radius:var(--cs-r);
  font-weight:500;
  padding:2px 8px
}
body.tpl-console input[type=text],body.tpl-console input[type=email], body.tpl-console input[type=password],body.tpl-console input[type=number], body.tpl-console input[type=tel],body.tpl-console select,body.tpl-console textarea {
  border-radius:var(--cs-r);
  border-color:#d9d9d9;
}
body.tpl-console input:focus,body.tpl-console select:focus,body.tpl-console textarea:focus {
  border-color:#4287ff;
  box-shadow:0 0 0 2px rgba(24,97,242,.09);
  outline:none;
}
body.tpl-console .field label {
  color:var(--txt);
  font-size:13px;
  font-weight:500
}
body.tpl-console table {
  font-size:13px
}
body.tpl-console thead th {
  background:#fafafa;
  font-weight:600;
  color:var(--txt);
  border-bottom:1px solid var(--bd);
  padding:11px 14px;
  text-align:left;
  white-space:nowrap;
}
body.tpl-console tbody td {
  padding:12px 14px;
  border-bottom:1px solid #f0f0f0
}
body.tpl-console tbody tr:hover {
  background:#f5f9ff
}
body.tpl-console tbody tr:last-child td {
  border-bottom:none
}
body.tpl-console code,body.tpl-console .mono {
  font-family:Consolas,
"Liberation Mono"  ,Menlo,Courier,monospace;
  font-size:12.5px;
}
/* 底栏：控制台模板下**不要** ✗ 2026-10 用户要求 ✓    ⚠️ 为什么只在这里藏 ✗ 不改 layout.php 把那段删掉 ✓      ① 用 CSS 藏 ✗ 默认模板仍然有底栏 ✓ 随时能改回来 ✓      ② 改 layout.php 属于动公共结构 ✗ 两种模板一起变 ✓ 风险更大 ✓    ⚠️ 原来那两条 .site-ft 规则（背景色 / 左边距）已经没意义了 ✗ 一并去掉 ✓ */
body.tpl-console .site-ft {
  display:none
}
/* ── ③ 外壳层 ─────────────────────────────────────────────────────── */
/* 默认（窄屏 / 手机）：**不用两级导航** ✗    回落到原来的平级抽屉 ✓ 所以手机上一定是能用的 ✓ */
body.tpl-console .cs-topnav, body.tpl-console .cs-subnav {
  display:none
}
@media (min-width:901px) {
/* ══ 顶栏 ✗ 深色横向"大类" ══ */
  body.tpl-console header.top {
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:var(--cs-top);
    background:var(--cs-top-bg);
    border-bottom:none;
    overflow:visible;
    z-index:60;
  }
/* ⚠️ 顶栏的 .wrap 不留左右内边距 ✗ 让品牌块**紧贴左边** ✓      （原来 padding:0 18px ✗ 品牌块会被推右 18px ✓ 对不齐 ✓）      ★ 内边距改由各块自己带 ✗ 品牌块和账号区各自留 ✓ */
  body.tpl-console header.top .wrap {
    display:flex;
    align-items:center;
    gap:0;
    max-width:none;
    height:var(--cs-top);
    min-height:0;
    padding:0;
  }
/* ⚠️ 品牌块**固定成左栏那么宽** ✗ 2026-10 用户要求对齐 ✓      ★ 这样顶栏第一个菜单项的左边缘 ✗        正好落在左栏的右边缘上 ✓ 和下面的内容区起点**一条竖线** ✓      ★ 参考站也是这个做法 ✗ 左上角那块和侧栏同宽 ✓      ★ box-sizing ✗ 不加的话 width 之外还要加上 padding ✗ 会宽出 18px ✓ */
  body.tpl-console header.top .brand {
    width:var(--cs-sub);
    box-sizing:border-box;
    flex:none;
    color:#fff;
    font-size:19px;
    font-weight:700;
    letter-spacing:.5px;
    white-space:nowrap;
    padding:0 18px;
    margin-right:0;
    border-bottom:none;
    border-right:1px solid rgba(255,255,255,.12);
/* ⚠️ 2026-10 用户要求**水平居中** ✓        ★ 原来只有 align-items:center ✗ 那是**垂直**居中 ✓          水平方向默认是 flex-start ✗ 文字贴左 ✓        ★ 加 justify-content:center ✗ 在 210px 里水平居中 ✓        ★ 左右内边距各 18px 是**对称**的 ✗          所以居中之后视觉上仍然落在正中间 ✓ 不会偏移 ✓          内边距保留着 ✗ 窄屏或品牌名变长时不会顶到边框 ✓ */
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--cs-top);
  }
/* ⚠️ 品牌前那个渐变色块 ✗ 2026-10 用户要求**去掉** ✓      原来用 ::before 画了个 22px 的蓝色方块 + 9px 间距 ✓      品牌区一共才 210px ✗ 被占掉 31px 后文字只能缩到 15px ✓      用户看下来觉得「看着那么小」✗ 所以：        去掉方块 ✗ 把省下的空间全部给字号 ✓      （保留这段说明 ✗ 免得以后有人又想加回去 ✓） */
/* ⚠️ 2026-10 **恢复** ✗✗ 用户选方案 C（风格统一 ✓）✓✓
 *  ★ 我一度删掉这条 ✗（为了「彻底合并」✓）
 *    现在恢复 ✗ 顶栏重新用 **7 个大类** ✓✓
 */
  body.tpl-console #topNav > a,   body.tpl-console #topNav > .dd,   body.tpl-console .cs-side-info {
    display:none
  }
/* ★★★ 2026-10 **恢复 `flex:0`** ✗✗ 用户选方案 C ✓✓
 *  ⚠️ 这是让 7 个大类**靠左**（紧贴品牌块 ✓）的关键 ✓✓
 *  ★ 原因 ✗ 旧 `<nav>` 即使内容被藏光 ✗
 *    盒子本身 `flex:1` 会**撑满** ✗ 把大类顶到右边 ✓✓
 *  ⚠️ 我一度改成 `flex:1`（彻底合并时 ✓）
 *    现在恢复 ✗✓
 */
  body.tpl-console #topNav {
    display:flex;
    align-items:center;
    gap:0;
    flex:0;
    min-width:0;
    padding:0;
    height:var(--cs-top);
    overflow-x:auto;
    overflow-y:hidden;
  }
/* ★★★ 2026-10 **藏掉新大类** ✗✗ 彻底合并 ✓✓
 *  ⚠️ 用户要求 ✗「宽屏也用旧 nav 那套（彻底合并）」✓✓
 *  ★ 这一条**已经并入上面那条规则**（L264 附近 ✓）
 *    写在这里会被后面的 `display:flex` 盖掉 ✓
 *    所以**不再重复定义** ✗ 只留这段说明 ✓✓
 */
/* 新的顶级导航 ✗ 横排 ✓      ⚠️ 2026-10 按参考站调过 ✗         · 每项**带图标**（图标由 layout.php 输出 ✓ 内联 SVG ✓）         · 左右内边距 15px → **22px**（参考站那项更宽 ✓）         · 悬停改成**实心灰块** ✗ 原来是很淡的白色叠层 ✓ 不明显 ✓         · 当前项仍是蓝底 ✗ 和参考站「应用」一致 ✓ */
/* ★★★ 2026-10 **取消隐藏** ✗✗ 用户选方案 C ✓✓
 *  ⚠️ 恢复成**显示** ✗ 顶栏重新用 7 个大类 ✓✓
 *  ★ 原来的 `display:flex` 声明**照旧** ✓✓
 */
  body.tpl-console .cs-topnav {
    display:flex;
    align-items:center;
    gap:0;
    height:var(--cs-top)
  }
/* ⚠️⚠️ 2026-10 **让大类靠左** ✗✗ 这一条是**必须的** ✓✓
 *
 *  ★ 为什么需要它 ✗
 *    `.wrap` 是 flex ✓ 里面的顺序是
 *      `[品牌块] [旧 nav] [新 .cs-topnav] [账号区]` ✓✓
 *    ⚠️ 旧 `<nav id="topNav">` 有 **`flex:1`** ✗
 *      它**撑满剩余宽度** ✓
 *      → 即使里面的菜单项被 CSS 藏光了 ✗
 *        那个 `<nav>` 盒子**照样占着位置** ✓✓
 *    → 新的 `.cs-topnav` 就被**挤到最右边** ✓
 *      （视觉上"大类跑右边去了"✓）✓✓
 *
 *  ★ 修法 ✗ `margin-right:auto` ✓
 *    意思是「我**右边**剩下的空间全部让出去」✓
 *    → 这一块紧贴**旧 nav 的左边缘** ✗
 *      而旧 nav 是**透明**的 ✓
 *    → 视觉上大类就**紧挨着品牌块** ✓✓
 *
 *  ⚠️ 和 `.who` 的 `margin-left:auto` **配对** ✗
 *    `.who` 那条把它自己推向**最右** ✓
 *    这一条把大类推向**最左** ✓
 *    ★ 两条一起 ✗ 才是「大类靠左、账号区靠右」✓✓
 *
 *  ★ 2026-10 教训 ✗✗
 *    我一度把这条**当成自己加的**删掉了 ✓
 *    结果大类跑到右边 ✓ 用户报「没恢复到原来靠左」✓✓
 *    ⚠️ 回滚 CSS 时**必须逐条确认原意** ✗
 *      不能凭"看起来像我加的"就删 ✓✓
 */
  body.tpl-console .cs-topnav {
    margin-right:auto;
  }
  body.tpl-console .cs-topnav > a {
    display:flex;
    align-items:center;
    gap:7px;
    flex:none;
    height:var(--cs-top);
    padding:0 22px;
    color:rgba(255,255,255,.72);
    font-size:13.5px;
    white-space:nowrap;
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:background .15s,color .15s;
  }
  body.tpl-console .cs-topnav > a svg {
    display:block;
    flex:none;
    opacity:.8
  }
/* ★ 菜单项之间的**竖分隔线** ✗ 2026-10 新增（按参考站 ✓）      ⚠️ 参考站每一项之间都有一条细竖线 ✗ 比底色略亮 ✓         没有它的话 ✗ 七项在深色栏上会显得很"散"✓ 边界不清 ✓      ★ 用 `a + a` ✗ 只给**第二个及以后**加左边框 ✓        第一项不加 ✗ 因为它的左边已经是品牌块的右边框了 ✓        → 这样竖线是**连续均匀**的 ✗ 不会在品牌块那里出现双线 ✓      ★ 颜色很淡（rgba(255,255,255,.1)✓）✗        在 #1f2733 上大约合成 #333a45 ✗ 和参考站那条接近 ✓      ★ 用 border-left 而不是 ::before ✗        项本身是满高的 flex ✗ 边框自动就是满高竖线 ✓ 不用算位置 ✓ */
  body.tpl-console .cs-topnav > a + a {
    border-left:1px solid rgba(255,255,255,.1);
  }
/* ★ 最后一项右边再补一条 ✗ 2026-10 用户要求 ✓      ⚠️ 为什么需要它 ✗        七项之间有了六条线 ✗ 但最后一项右边是空的 ✓        整组菜单看起来"没有收尾"✗ 像是被截断了 ✓      ⚠️ 和之前删掉的那条**不是一回事** ✗        之前那条是 `.who`（账号区）的左边框 ✓        它跟着内容位置跑 ✗ 窗口一窄就贴在会员信息后面 ✓ 那是 bug ✓        这一条是**菜单组自己的右边框** ✗ 固定在这一组的最右 ✓        和左边品牌块的边框对称 ✗ 整条顶栏被"框"起来 ✓      ★ 用 :last-child ✗ 只加一个元素 ✗ 不用改 HTML ✓        （空白文本节点不算 :last-child ✗ 只有那 7 个 a ✓）*/
  body.tpl-console .cs-topnav > a:last-child {
    border-right:1px solid rgba(255,255,255,.1);
  }
  body.tpl-console .cs-topnav > a:hover {
    color:#fff;
    background:var(--cs-top-hover);
    text-decoration:none;
  }
  /* ══════════ 系统版本 + 更新提示 胶囊（2026-10 用户要求）══════════
   *
   *   「在后台导航系统设置后面加上版本号和更新提示，可以用胶囊」
   *
   *  ★ 位置 ✗ 紧跟在最后一个导航项后面 ✓
   *    ⚠️ 所以它天然继承 `.cs-topnav > a` 的样式 ✗
   *      （高度 / 内边距 / 深色顶栏配色 ✓）
   *      ★ 还自动拿到 `a + a` 的**左边竖线** ✓
   *        以及因为成了 `:last-child` ✗ 拿走那条**右边框** ✓✓
   *        → 菜单组左右两侧仍然被框住 ✗ 观感不变 ✓✓
   *      ★ 所以这里只补"胶囊"本身 ✗ 不用重写导航项样式 ✓✓
   *
   *  ⚠️ 配色是在**深色顶栏**上（#1f2733 附近 ✓）
   *    所以版本胶囊用**半透明白底 + 白字** ✓
   *    有新版本的小标用**琥珀色**（#f59e0b ✓）✗ 最跳 ✓✓
   *    ★ 这和「余额徽标」那套是同一个思路 ✗
   *      深色底上要给浅色块才看得清 ✓✓
   */
  body.tpl-console .cs-topnav > a.cs-ver {
    font-size:12px;
    color:rgba(255,255,255,.72);
  }
  /* ⚠️ 2026-10 **没有 :hover** ✗✗ 用户要求 ✓
   *   `href` 已经去掉了 ✗ 它根本不可点 ✓
   *   ★ 留着 hover 变色会**误导** ✗ 鼠标移上去像能点 ✓✓
   *   ⚠️ 同时兜一条 `cursor:default` ✗
   *     万一浏览器对"无 href 的 a"仍给手型 ✓ 也压掉 ✓✓ */
  body.tpl-console .cs-topnav > a.cs-ver {
    cursor:default;
  }
  /* 版本号胶囊 ✗ 半透明白底 + 白字 ✓ */
  body.tpl-console .cs-topnav > a.cs-ver .cs-ver-v {
    display:inline-block;
    padding:2px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    font-size:11.5px;
    font-weight:600;
    line-height:1.5;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  /* 有新版本 ✗ 琥珀色小标 ✓ 只在真的有更新时出现 ✓✓ */
  body.tpl-console .cs-topnav > a.cs-ver .cs-ver-n {
    display:inline-block;
    margin-left:6px;
    padding:2px 8px;
    border-radius:999px;
    background:#f59e0b;
    color:#3a2a05;
    font-size:11px;
    font-weight:700;
    line-height:1.5;
    white-space:nowrap;
  }
  /* ⚠️ 2026-10 **胶囊只显示版本号，不绑定链接** ✗✗ 用户要求 ✓
   *
   *  ★ 我试过三版 ✗ 用户逐个否掉 ✓✓
   *    ① 带链接 + 胶囊亮 + 系统设置也亮
   *    ② 带链接 + 胶囊亮 + 系统设置灭
   *    ③ 带链接 + 不高亮
   *    →「胶囊只显示版本号，不绑定链接」✓✓
   *  ★ 结论 ✗ 只读的版本徽标 ✓
   *    不高亮 ✗ 不可点 ✗ 不抢「系统设置」的亮 ✓✓
   *
   *  ⚠️ markup 里现在**没有 `href`** ✗
   *    一个不带 href 的 `<a>` 在 HTML 里是**占位链接** ✓
   *    · 不可点 ✓ 不进 Tab 顺序 ✓ 鼠标不是手型 ✓✓
   *    · 但**仍然是 `a` 元素** ✗
   *      所以上面那套 `.cs-topnav > a` 样式（高度 / 内边距 /
   *      左竖线 ✓）**照旧生效** ✗ 一行 CSS 都不用补 ✓✓
   *  ⚠️ 换成 `<span>` 反而要重写那套样式 ✗ 不划算 ✓✓
   *
   *  ⚠️ `.cs-ver.on` 那条"当前页高亮"CSS **已删除** ✓
   *  ⚠️ `:hover` 也一并去掉 ✗ 它不可点 ✗ 变色会误导 ✓✓
   */
  body.tpl-console .cs-topnav > a:hover svg {
    opacity:1
  }
  body.tpl-console .cs-topnav > a.on {
    color:#fff;
    background:var(--pri);
    border-bottom-color:#4287ff;
  }
  body.tpl-console .cs-topnav > a.on svg {
    opacity:1
  }
/* ★ 余额徽标 ✗ 2026-10 修正（用户反馈「金额看不清」✓）      ⚠️ 原来的写法为什么看不清 ✗        `background:rgba(255,255,255,.16); color:#fff`        · 压在**深色顶栏**上 → 灰蓝底 + 白字 ✓ 勉强能看 ✓        · 但「充值」是**当前项**时底是 #1861f2 蓝 ✓          半透明白叠在蓝上变成**浅薄荷绿** ✗ 再配白字 = 几乎看不见 ✓✓      ★ 现在改成**实心白底 + 深色字** ✗        不管压在深灰还是蓝上 ✗ 对比度都足够 ✓✓        深色字用 #2d3340（就是顶栏底色 ✓）✗        和顶栏同一色系 ✗ 看着协调 ✓ 又足够深 ✓      ★ 字重加 600 ✗ 金额是数字 ✗ 加粗更好认 ✓ */
  body.tpl-console .cs-topnav .bal {
    background:#fff;
    color:#2d3340;
    font-weight:600;
    padding:2px 8px;
    border-radius:10px;
    font-size:11.5px;
    font-variant-numeric:tabular-nums;
  }
/* 账号区留在顶栏右侧 ✓      ⚠️ 右边距自己带 ✗ 因为 .wrap 的 padding 已经改成 0 了 ✓ */
  body.tpl-console .who {
    margin-left:auto;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:0 18px 0 15px;
    color:rgba(255,255,255,.6);
    font-size:12.5px;
    white-space:nowrap;
    flex:none;
  }
  body.tpl-console .who a {
    color:rgba(255,255,255,.8);
    text-decoration:none
  }
  /* ⚠️⚠️ 2026-10 **收窄这条选择器** ✗✗ 它是个地雷 ✓✓
   *
   *  ★ 原来写的是 `body.tpl-console .who a:hover { color:#fff }` ✓
   *    —— (0,3,2) ✗ 会命中 `.who` 里**所有** `<a>` ✓
   *  ★ 而 `.who-pill` 是**白底**的 ✗
   *    悬停时它自己的规则**只给了 background/border** ✓
   *    → 文字被这条染成白色 ✗ 白底白字 ✗ 完全看不见 ✓✓
   *    （用户报「鼠标移上去看不清」就是这里 ✓）
   *
   *  ★ 现在把**胶囊排除掉** ✗
   *    `:not(.who-pill)` ✗ 以后谁再往 `.who` 里塞浅底元素 ✓
   *    只要不是 `.who-pill` 也仍会中招 ✗
   *  ⚠️ 更稳的做法是**只给确定要白字的那个** ✗
   *    即 `.who a.who-out`（它在 L1146 已经有自己的 hover ✓）
   *    ★ 所以这条现在**实际上可以整条删掉** ✓
   *      但它还兜着"没有专门规则的 `.who` 链接" ✗ 留着 ✓
   *      收窄成 `:not(.who-pill)` 两头都占 ✓✓
   */
  body.tpl-console .who a:not(.who-pill):hover {
    color:#fff
  }
  body.tpl-console .burger {
    display:none
  }
/* ══ 左栏 ✗ 浅色"子菜单" ══ */
  body.tpl-console .cs-subnav {
    display:block;
    position:fixed;
    left:0;
    top:var(--cs-top);
    bottom:0;
    width:var(--cs-sub);
    background:var(--cs-sub-bg);
    border-right:1px solid var(--bd);
    overflow-y:auto;
    z-index:55;
  }
/* ⚠️ 左栏顶部那块大类标题 ✗ **已去掉** ✓ 2026-10 用户要求 ✓      原来这里是 20px 的大字「用户中心 / 我的服务 …」✓ 高约 83px ✓      用户要求去掉 ✗ 让左栏直接从菜单项开始 ✓ 更紧凑 ✓      ★ layout.php 里那段 HTML 也一起删了 ✗ 不是只藏起来 ✓        所以这里**不再需要任何样式** ✓ 保留这段说明免得被加回去 ✓ */
/* ⚠️⚠️ 2026-10 修 bug ✗「顶栏和左栏没有贴合，有空隙」✓
 *
 *   ★ 症状 ✗ 深色顶栏下面、第一个菜单项上面，有一条**浅色细缝** ✓
 *
 *   ★ 根因 ✗ 就是这一条里的 `padding-top:6px` ✓✓
 *     左栏 `.cs-subnav` 的 `top` 是 `var(--cs-top)`（60px ✓）
 *     和顶栏 `height:var(--cs-top)`（也是 60px ✓）**本来是对齐的** ✓
 *     但 `<nav>` 自己又往下顶了 6px ✗ 于是空出一条 ✓
 *
 *   ★ 为什么看着明显 ✗
 *     缝里露的是**左栏自己**的底色 `--cs-sub-bg: #fafcff`（冷白带蓝 ✓）
 *     紧挨着的第一项如果是 active ✗ 底色是 `#e6ebf5`（浅蓝灰 ✓）
 *     body 底色又是 `#f5f7fa`（更灰 ✓）
 *     三个极浅的颜色并排 ✗ 那条 6px 反而**特别显眼** ✓✓
 *
 *   ★ 修法 ✗ `padding:6px 0 14px` → `padding:0 0 14px` ✓
 *     第一项直接**贴着**顶栏下沿 ✓（这就是"贴合"✓）
 *     ⚠️ 底部 14px 留着 ✗ 那是滚动到底时的呼吸空间 ✓ 不影响顶部观感 ✓
 *
 *   ⚠️ 别再把它加回来 ✗
 *     如果哪天觉得"第一项太挤"✗ 要调的是**菜单项自己的**
 *     `padding:14px 16px`（见下面那条 ✓）✗ 不是这里 ✓✓
 *     这里一加就会重新出现缝隙 ✓
 */
  body.tpl-console .cs-subnav nav {
    display:block;
    padding:0 0 14px
  }
/* ⚠️ 菜单项 ✗ 2026-10 按取色值改 ✓      · 文字 #313e59（深蓝灰 ✓）原来是 rgba(0,0,0,.65) 约 #595959 ✗ 偏中性 ✓      · 高光条**从左边挪到右边** ✗ 参考站实测在 x=197~198（图宽 202 ✓）✓        → 所以用 border-right ✗ 不再用 border-left ✓      · 行高 14px 内边距 ✗ 一行约 48px ✓（上一轮按参考站定的 ✓）      ★ 这一条是给**平级菜单**用的（用户中心 / 我的服务 / 财务 … ✓）        产品订购那一节的**树形条目**走下面的 .cs-kid ✗ 另一套 ✓ */
  body.tpl-console .cs-subnav nav a {
    display:block;
    padding:14px 16px;
    font-size:13px;
    color:var(--cs-sub-text);
    text-decoration:none;
    border-right:2px solid transparent;
    transition:background .13s,color .13s;
  }
  body.tpl-console .cs-subnav nav a:hover {
    background:#eef2fa;
    color:var(--pri);
    text-decoration:none;
  }
/* ⚠️ 当前项 ✗ 2026-10 按取色值改 ✓      · 底色 **#e6ebf5** ✗ 原来是白色 #fff ✗ 完全不对 ✓        （参考站是"比底色略深的浅蓝灰"✗ 不是白 ✓）      · 高光条 **2px #1861f2 在右边** ✓ 和参考站一致 ✓      ★ 注意 ✗ 基础规则里已经把 border-left 去掉了 ✓        所以这里的 border-right 不会被旧规则干扰 ✓ */
  body.tpl-console .cs-subnav nav a.on {
    background:var(--cs-sub-active);
    color:var(--pri);
    font-weight:600;
    border-right-color:var(--pri);
  }
  /* ══════════════════════════════════════════════════════════════════
   *  ★★★ 2026-10 **子菜单分割线** ✗✗ 用户要求 ✓✓
   * ══════════════════════════════════════════════════════════════════
   *
   *    「左侧导航要做个**分割**，不能和魔方云共用功能」
   *
   *  ★ 用途 ✗ 左侧栏里把**两条产品线**分开 ✓✓
   *      资源被控
   *        ├─ 魔方云主控 / 魔方云套餐 / 批量导入 / 用量排行
   *        ├─── 轻舟主控 ──────   ← ★ 这一条 ✓
   *        └─ 轻舟主控 / 轻舟套餐 / 批量导入
   *
   *  ★ 由 `layout.php` 在**子项链接为空**时输出 ✓
   *    约定见那边子菜单渲染的注释 ✓✓
   *
   *  ⚠️ 为什么不做成纯横线 ✗
   *    纯横线在两段菜单之间会显得像"被截断了" ✓
   *    ★ 带一个**小标题** ✗ 一眼知道下面是另一个产品线 ✓✓
   *      而且标题语意就是「这部分属于谁」✓✓
   *
   *  ⚠️ 视觉层级 ✗ 要比普通菜单项**弱** ✓✓
   *    · 更小的字号（11px vs 13px ✓）
   *    · 更淡的颜色（大写字母间距拉开 ✓）
   *    · 上下各留一些空 ✗ 把两组"推开" ✓✓
   *    · 顶部一条细线 ✗ 强化"分界" ✓✓
   *
   *  ⚠️ `:first-child` 时**不要**顶部那条线 ✗
   *    否则菜单最上面会多一条莫名其妙的横线 ✓✓
   */
  body.tpl-console .cs-subnav nav .cs-sep {
    display:flex;
    align-items:center;
    gap:9px;
    padding:16px 16px 7px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.6px;
    color:#94a3b8;
    text-transform:none;
    user-select:none;
  }
  /* 标题**左边**的短横线 ✗ 比整行通栏线更轻 ✓✓ */
  body.tpl-console .cs-subnav nav .cs-sep::before {
    content:"";
    flex:none;
    width:14px;
    height:1px;
    background:#cbd5e1;
  }
  /* 标题**右边**拉到头的细线 ✗ 形成"分组开头"的观感 ✓✓ */
  body.tpl-console .cs-subnav nav .cs-sep::after {
    content:"";
    flex:1;
    height:1px;
    background:#e2e8f0;
  }
  body.tpl-console .cs-subnav nav .cs-sep span {
    flex:none;
    white-space:nowrap;
  }
/* ══════════ ★ 产品订购：左栏分组树 ✗ 2026-10 新增 ══════════    *    *   ★ 配色全部**从用户给的截图里取的真实像素值** ✓    *       一级分组的圆点  #ef4444（正红 ✓）    *       树当前项底色    #f0f5ff（很浅的蓝 ✓）    *       树当前项文字    #0a44cc（深蓝 ✓ 就是 --pri-d ✓）    *       树普通项文字    #4b5563（灰 ✓）    *       数量徽标底色    #f1f5f9 ✓    *    *   ⚠️⚠️ 树形条目的高光条在**左边** ✗ 和上面的平级菜单相反 ✓    *     参考站实测 ✗ 平级子菜单的高光条在 x=197~198（右边 ✓）    *                 分组树的高光条在 x=30~32（**左边** ✓）    *     两个是不同组件 ✗ 所以规则分开写 ✗ 不能复用 ✓    *    *   ⚠️ 每一项都是**两行** ✗ 名称+数量在第一行 ✓ 描述在第二行 ✓    *     这是用户明确要求的（选项 A ✓）    *     描述用单行省略号截断 ✗ 不然左栏会被撑得很难看 ✓    *     （PHP 那边也先截到 26 字 ✗ 双保险 ✓） */
/* 一级分组小标题（红点 + 名称 ✓） */
  body.tpl-console .cs-subnav .cs-grp {
    display:flex;
    align-items:center;
    gap:7px;
    padding:15px 16px 7px;
    font-size:12.5px;
    font-weight:600;
    color:#313e59;
    letter-spacing:.2px;
  }
  body.tpl-console .cs-subnav .cs-grp::before {
    content:
""    width:6px;
    height:6px;
    border-radius:50%;
    background:#ef4444;
    flex:none;
  }
/* 树形条目 ✗ 覆盖平级菜单那套 ✓（优先级更高 ✓ 见下方选择器层数 ✓） */
  body.tpl-console .cs-subnav nav a.cs-kid {
    display:block;
    padding:8px 14px 9px 18px;
    font-size:13px;
    color:#4b5563;
    text-decoration:none;
    border-right:0;
    border-left:3px solid transparent;
    transition:background .13s,color .13s;
  }
  body.tpl-console .cs-subnav nav a.cs-kid:hover {
    background:#f1f5f9;
    color:var(--pri-d);
    text-decoration:none;
  }
  body.tpl-console .cs-subnav nav a.cs-kid.on {
    background:#f0f5ff;
    color:var(--pri-d);
    font-weight:600;
    border-left-color:var(--pri);
  }
/* 第一行：名称 + 数量 */
  body.tpl-console .cs-subnav .cs-k {
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:space-between;
  }
  body.tpl-console .cs-subnav .cs-kn {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.tpl-console .cs-subnav .cs-n {
    flex:none;
    background:#f1f5f9;
    color:#4b5563;
    font-size:11px;
    font-weight:600;
    line-height:16px;
    padding:0 6px;
    border-radius:8px;
    font-variant-numeric:tabular-nums;
  }
  body.tpl-console .cs-subnav nav a.cs-kid.on .cs-n {
    background:#dbe6ff;
    color:var(--pri-d);
  }
/* 第二行：描述 */
  body.tpl-console .cs-subnav .cs-d {
    display:block;
    margin-top:3px;
    font-size:11.5px;
    font-weight:400;
    line-height:1.45;
    color:rgba(0,0,0,.4);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.tpl-console .cs-subnav nav a.on .cs-d {
    color:rgba(10,68,204,.55)
  }
/* ══ 内容区 ✗ 让出顶栏与左栏 ══ */
  body.tpl-console {
    padding-top:var(--cs-top)
  }
  /* ⚠️⚠️ 2026-10 修 bug ✗「登录框不居中」✓
   *
   *   这里原来有一条 ✗
   *     body.tpl-console main { margin-left:var(--cs-sub); padding-top:16px }
   *   —— **无条件**左移 210px ✓
   *
   *   但左栏（.cs-subnav）只在**客户页**才渲染 ✗
   *     if ($tplConsole && $isClient && !empty($__csNav))
   *   登录 / 注册 / 找回密码页的 $isClient 是 **false** ✗
   *   → 没有左栏 ✗ 内容却照样被推右 210px ✓✓
   *   → 登录框看着**偏右、不居中** ✓
   *
   *   ★ 已挪到 layout.php **输出左栏的那个 if 分支**里 ✗
   *     和 <aside class="cs-subnav"> 一起输出一条 <style> ✓
   *     → **有左栏才有左移** ✗ 两者永远同生同灭 ✓✓
   *     （不用给 body 加标记 ✗ 也不用担心 $__csNav 为空的边界 ✓）
   *
   *   ⚠️ 挪过去的那条自带 @media (min-width:901px) ✗
   *      窄屏时左栏是 display:none ✓ 让位也该跟着取消 ✓ */
/* ⚠️ .site-ft 在控制台模板下已整体 display:none ✗ 见上面的组件层 ✓      所以这里不再需要给它让左边距 ✓ */
/* ══════════ ★★★ 2026-10 **内容宽度对齐首页** ✗✗ 用户要求 ✓✓
 *
 *    「就是产品页的**宽度**没和首页一样宽」✓✓
 *
 *  ⚠️ 演变过程 ✗
 *    · 最初 1560px ✗ 用户说「内页两边太宽了」
 *    · 改成 **2000px**（铺满 1920 屏 ✓）✓✓
 *    · 要求**和首页一致** ✗ 先都改成 1180px ✓
 *    · ★ 最后定 **1280px** ✗
 *      「首页和产品页面宽度改成 1280px」✓✓
 *      ★ 首页 `landing.php` 的 `.wrap` **同步改了** ✓
 *        两处必须**永远一致** ✗ 改一个就改另一个 ✓✓
 *
 *  ★ 为什么两边写同一个数就一样宽 ✗
 *    `main` 已经被侧栏让出 210px ✗
 *      （`body.tpl-console main{margin-left:var(--cs-sub)}` ✓）
 *    所以 `.wrap` 的 max-width 就是**内容区**宽度 ✓✓
 *    → 和首页那个 `.wrap` 是**同一种语义** ✓
 *      两边写同一个数 ⇒ 视觉上一样宽 ✓✓
 *
 *  ⚠️ `wide` 那条（`body.tpl-console.wide` ✓）也要改 ✗✗
 *    订购页的 body 就是 `class="wide tpl-console"` ✓
 *    ★ 只改普通那条 ✗ 订购页**根本不受影响** ✓✓
 *    （这个坑很隐蔽 ✗ 两条都要动 ✓）
 *
 *  ⚠️ 副作用 ✗ 表格类页面（账单 / 工单 ✓）会**变窄** ✓✓
 *    这是"和首页统一"的必然代价 ✗ 可接受 ✓
 *    ★ 想反悔就把这两个值调回去 ✓✓ */
  body.tpl-console .wrap {
    max-width:2000px
  }
  body.tpl-console.wide .wrap {
    max-width:2000px
  }
}
/* 窄屏：只换配色 ✗ 结构完全不动 ✓ */
@media (max-width:900px) {
  body.tpl-console header.top {
    background:var(--cs-top-bg);
    border-bottom:none
  }
  body.tpl-console header.top .brand {
    color:#fff
  }
  body.tpl-console #topNav > a,   body.tpl-console #topNav .dd-toggle {
    color:rgba(255,255,255,.78)
  }
  /* ⚠️⚠️ 2026-10 修 bug ✗「WEB 端高亮看不清文字了」✓
   *
   *   ★ 症状 ✗ 窄屏抽屉里当前那一项是**浅底白字** ✓ 完全看不见 ✓
   *
   *   ★ 根因 ✗ **两个文件各给了一半** ✓✓
   *       layout.php L144 ✗ `header.top nav > a.on{background:#f8fbff}`
   *         —— 只给**底色**（浅蓝白 ✓）
   *       这里原来 ✗ `… #topNav > a.on{color:#fff}`
   *         —— 只给**文字色** ✓
   *       → 合起来 = #f8fbff 底 + 白字 ✗ 对比度约 **1.05** ✓✓
   *         比之前那个 `.btn:hover`(1.49) 还低 ✓
   *
   *   ★ 为什么宽屏没事 ✗
   *       宽屏用的是 `.cs-topnav > a.on` ✗ 蓝底 + 白字 ✓ 两样都给全了 ✓
   *       窄屏回落到 layout 的平级导航 ✗ 那套是按**浅色顶栏**写的 ✓
   *       控制台模板的顶栏是深色 ✗ 于是撞车 ✓✓
   *
   *   ★ 修法 ✗ 底色、文字色**一起给** ✗ 并且用和宽屏一样的主色 ✓
   *       蓝底 + 白字 ✓ 对比度 5.21 ✓ 合格 ✓
   *       `!important` 不用 ✗ 这里的选择器层数已经比 layout 那条高 ✓
   *         （body.tpl-console #topNav > a.on = 1 id + 2 class + 2 element ✓
   *            layout 的 header.top nav > a.on = 3 class + 3 element ✓）
   *
   *   ★ 教训（第三次踩同一类坑 ✗ 所以这次写死在这儿 ✓）
   *     **覆盖一个元素的配色时，background / border / color 必须一起给** ✓
   *     只给一两个 ✗ 剩下的会从"浅色主题"的基础规则继承过来 ✓✓ */
  body.tpl-console #topNav > a.on,   body.tpl-console #topNav .dd-toggle.on {
    background:var(--pri);
    color:#fff;
    font-weight:600
  }
  /* 子菜单里的当前项 ✗ 同样的坑 ✗ 一起给全 ✓ */
  body.tpl-console #topNav .dd-menu .ddi.on {
    background:var(--pri-soft);
    color:var(--pri-d);
    font-weight:600
  }
/* ⚠️ 窄屏下也是同一套逻辑 ✗ 平级导航里的余额徽标 ✓      同样改成实心白底 + 深色字 ✗ 和宽屏保持一致 ✓      （窄屏这个徽标在 #topNav 的平级项里 ✗ 不在 .cs-topnav 里 ✓        所以选择器不一样 ✗ 但配色必须一致 ✓）*/
  body.tpl-console #topNav .bal {
    background:#fff;
    color:#2d3340;
    font-weight:600;
    padding:2px 8px;
    border-radius:10px;
    font-size:11.5px;
    margin-left:5px;
    font-variant-numeric:tabular-nums
  }
  body.tpl-console .who {
    color:rgba(255,255,255,.6)
  }
  body.tpl-console .who a {
    color:rgba(255,255,255,.78)
  }
/* ⚠️⚠️ 2026-10 修 bug ✗ 窄屏汉堡按钮在控制台模板下**整个白框、图标看不见** ✓
 *
 *   症状（用户截图 ✓）：窄屏时顶栏右侧出现一个**白色圆角方块** ✗ 里面空的 ✓
 *
 *   根因 ✗ 和之前那个 `.btn:hover` 是**同一类错误** ✓
 *     基础规则（layout.php L111 ✓）：
 *       .burger{ background:#fff; color:var(--txt) }    ← 白底 + 深色图标 ✓
 *     我这里原来只写：
 *       border-color:…; color:#fff                       ← 只改了**边框和文字色** ✓
 *     底色**没动** ✗ 还是白的 ✓
 *     → 白图标压在白底上 ✗ 对比度 1.0 ✓✓ 完全看不见 ✓
 *
 *   ★ 教训（第二次踩同一个坑 ✗ 所以这次记下来 ✓）
 *     **覆盖一个元素的配色时，background / border / color 必须一起给** ✓
 *     只给其中一两个 ✗ 剩下的会从基础规则继承过来 ✓
 *     而基础规则是按"浅色主题"写的 ✗ 在深色顶栏上就会撞车 ✓✓
 *
 *   ★ 修法 ✗ 控制台模板的顶栏是深色（--cs-top-bg:#2d3340 ✓）
 *     → 汉堡按钮改成**透明底 + 白色图标** ✓ 让深色顶栏透上来 ✓
 *     悬停时给一层半透明白 ✗ 图标保持白色 ✓ 对比度 7+ ✓ */
  body.tpl-console .burger {
    background:transparent;
    border-color:rgba(255,255,255,.28);
    color:#fff;
  }
  body.tpl-console .burger:hover {
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.42);
    color:#fff;
  }
}
/* ── ④ 密度层 ─────────────────────────────────────────────────────    2026-10 用户反馈"还是太空"后加的 ✓    对比参考站才发现 ✗ 差距不在配色也不在宽度 ✗ 在**信息密度** ✓      · 它正文 13px 左右（我们 14px ✓）      · 它表格行 44~48px（我们约 60px ✓）      · 它卡片内边距 12~14px（我们 16~20px ✓）      · 它统计数字 20px 左右（我们 24px ✓）    → 同样内容它的纵向占用约为我们的 70% ✓    下面每一条都**对照 layout.php 的现有定义逐个改** ✓ 不是拍脑袋 ✓    ⚠️ 只收紧间距与字号 ✗ 不动颜色与结构 ✓ 收过头了删一条就回去了 ✓ */
body.tpl-console {
  font-size:13.5px
}
body.tpl-console .card {
  padding:14px 16px;
  margin-bottom:12px
}
body.tpl-console .card h1 {
  font-size:19px;
  margin:0 0 5px
}
body.tpl-console .card h2 {
  font-size:15px;
  margin:0 0 10px
}
body.tpl-console .card h3 {
  font-size:14px;
  margin:0 0 8px
}
body.tpl-console .grid {
  gap:12px
}
body.tpl-console .stat {
  padding:12px 14px
}
body.tpl-console .stat .k {
  font-size:12px;
  margin-bottom:3px
}
body.tpl-console .stat .v {
  font-size:20px;
  font-weight:600;
  line-height:1.35
}
body.tpl-console a.stat .go {
  margin-top:3px
}
body.tpl-console table {
  font-size:12.5px
}
/* ★★★ 2026-10 **控制台模板下所有表格铺满** ✗✗ 用户报「宽度没适应」✓✓
 *
 *  ★ 症状 ✗
 *    `资源被控 → 魔方云主控` 那两页 ✗
 *    表格只占左边约 820px ✗ 右边一大片空白 ✓✓
 *
 *  ★ 根因 ✗ 页面里有一批**裸 `<table>`** ✗
 *    ```html
 *    <div class="card">
 *      <div style="overflow-x:auto">
 *        <table>                    ← 没有 class ✗ 也没有 style ✓
 *    ```
 *    ⚠️ 我上次修「表格竖排」时 ✗
 *      改的是 `<table class="tbl" style="…">` 这种**带 class 的** ✓
 *      → **裸 table 一个都没改到** ✓✓
 *    ★ 而 `layout.php` 的 `.card table{display:block;width:100%}`
 *      ⚠️ 在控制台模板下被 `console.css` 的表格样式**部分覆盖** ✓
 *      → 宽度约束**丢了** ✗ 表格只按内容排 ✓✓
 *
 *  ★ 修法 ✗ 在**这里**加一条 ✓
 *    比逐个页面去补 `style` 可靠得多 ✗
 *      · 一处规则管**所有**表格 ✓
 *      · 以后新页面写裸 `<table>` 也自动铺满 ✓✓
 *    ⚠️ 为什么用 `width:100%` 而不是 `max-content` ✗
 *      `max-content` = 按内容宽度 ✗ **不铺满** ✓（就是这次的毛病 ✓）
 *      `100%`       = **撑满容器** ✗ 这才是要的 ✓✓
 *    ⚠️ 为什么带 `display:table` ✗
 *      `layout.php` 把 `.card table` 改成了 `display:block` ✓
 *      那是为了"列多时横向滚动" ✗ 但它会**破坏列对齐** ✓✓
 *      控制台模板下改回真正的表格 ✗ 列宽声明才生效 ✓✓
 *
 *  ⚠️ 只作用于 `body.tpl-console` ✗
 *    默认模板**一个字都没改** ✓✓
 *  ⚠️ 和页面上已有的行内 `width:100%;min-width:Npx` **不冲突** ✓
 *    行内优先级更高 ✗ 那些页面仍然保留自己的 `min-width` ✓✓
 */
body.tpl-console table {
  display:table;
  width:100%
}
body.tpl-console th,body.tpl-console td {
  padding:8px 12px
}
/* ★★★ 2026-10 **表头居中的兜底规则** ✗✗ 用户反馈「操作这个字没有居中」✓✓
 *
 *  ★ 症状 ✗
 *    页面里已经写了 `<th style="width:330px;text-align:center">操作</th>`
 *    ⚠️ 但渲染出来**还是左对齐** ✓✓
 *    （按钮那边也一样 ✗ `justify-content:center` 加了没效果 ✓）
 *
 *  ★ 按理不该这样 ✗
 *    **行内样式**的优先级只低于 `!important` ✓
 *    上面那条 `body.tpl-console thead th{text-align:left}`（L137 ✓）
 *    **没有** `!important` ✗ 按规则**赢不了行内** ✓✓
 *    ⚠️ 但实测就是没生效 ✗ 我查不出为什么 ✓
 *    （和之前余额徽标那个 `cur-cny` 是同一类现象 ✓✓）
 *
 *  ★ 这次**不猜了** ✗ 直接给一条**兜底规则** ✓✓
 *    选择器用 `th[style*="text-align:center"]` ✗
 *    → **只命中那些自己声明了居中的表头** ✓
 *    → 没声明的（ID / 状态 / 到期 …）**完全不受影响** ✓✓
 *    ★ 这是一种"**把行内意图提升为规则**"的写法 ✓
 *      好处 ✗ 不用去动十几个页面文件 ✓ 一处生效 ✓✓
 *      代价 ✗ 选择器字符串匹配 `style` 属性 ✗ 有点脆弱 ✓
 *        （但页面的 `style` 是我们自己写的 ✗ 不会变 ✓）
 *
 *  ⚠️ 配套 ✗ 那些页面的 `<th>` 上**必须保留**
 *    `text-align:center` ✗ 不然这条匹配不到 ✓✓
 */
body.tpl-console thead th[style*="text-align:center"] {
  text-align:center !important
}
/* ⚠️⚠️⚠️ 2026-10 **不要统一"操作"列的对齐** ✗✗ 用户明确要求 ✓✓
 *
 *  ★ 用户原话 ✗
 *    「没法，每个页面要求不一样，所以**不能统一**」✓✓
 *
 *  ★ 现状（**故意不一致** ✗ 不是 bug ✓✓）
 *    ┌──────────────┬──────────┬────────────┐
 *    │ 页面          │ 表头      │ 单元格内容  │
 *    ├──────────────┼──────────┼────────────┤
 *    │ 交易流水      │ 居中 ✓   │ **居中** ✓ │
 *    │ 实名记录      │ 居中 ✓   │ **靠左** ✓ │
 *    │ 用户列表      │ 居中 ✓   │ 靠左 ✓     │
 *    │ 魔方云套餐    │ 居中 ✓   │ 靠左 ✓     │
 *    │ 商品管理 等   │ 居中 ✓   │ 靠左 ✓     │
 *    └──────────────┴──────────┴────────────┘
 *
 *  ★ 怎么实现的 ✗ **各页面自己写** ✓✓
 *    · 表头 ✗ 一律 `text-align:center`（上面那条兜底规则管 ✓）
 *    · 内容居中 ✗ 该页的 `<td>` 上写 `text-align:center`
 *      例 ✗ `admin_invoices.php` 的
 *        `<td style="white-space:nowrap;text-align:center">` ✓✓
 *    · 内容靠左 ✗ **什么都不写** ✓（默认就是左 ✓）
 *
 *  ⚠️⚠️ 为什么**不能**在这里加一条全局规则 ✗
 *    比如 `body.tpl-console td:last-child{text-align:center}` ✓
 *    ★ 那会把**所有**页面的操作列一起改掉 ✗
 *      而用户明确说过 ✗ 每个页面要求不一样 ✓✓
 *    ⚠️ 而且 `td:last-child` 会误伤**没有操作列**的表 ✓
 *      （比如详情页的键值表 `.kv` ✗ 最后一格也会被居中 ✓✓）
 *
 *  ★ 所以 ✗ 想改某个页面的对齐 ✗
 *    **只改那个页面的文件** ✓ 不要动这里 ✓✓
 */
body.tpl-console .kv th,body.tpl-console .kv td {
  padding:6px 0
}
body.tpl-console .quicklinks {
  gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}
body.tpl-console .quicklinks a {
  padding:10px 12px;
  border-radius:var(--cs-r);
  font-size:13px
}
body.tpl-console .field {
  margin-bottom:11px
}
body.tpl-console .field label {
  font-size:12.5px;
  margin-bottom:4px
}
body.tpl-console input[type=text],body.tpl-console input[type=email], body.tpl-console input[type=password],body.tpl-console input[type=number], body.tpl-console input[type=tel],body.tpl-console select,body.tpl-console textarea {
  height:32px;
  padding:0 10px;
  font-size:13px;
}
body.tpl-console textarea {
  height:auto;
  padding:7px 10px
}
body.tpl-console .btn {
  padding:6px 14px;
  font-size:13px
}
body.tpl-console .btn.sm {
  padding:4px 10px;
  font-size:12px
}
body.tpl-console .tag {
  padding:1px 7px;
  font-size:11.5px;
  border-radius:var(--cs-r)
}
body.tpl-console .alert {
  padding:9px 12px;
  font-size:12.5px;
  margin-bottom:11px
}
body.tpl-console .muted {
  font-size:12px
}
/* ⚠️⚠️ 2026-10 修 bug ✗「登录框不居中」✓
 *
 *   这里原来有一条 ✗
 *     body.tpl-console main { margin-left:var(--cs-sub); padding-top:16px }
 *   —— **无条件**左移 210px ✓
 *
 *   但左栏（.cs-subnav）只在**客户页**才渲染 ✗
 *     `if ($tplConsole && $isClient && !empty($__csNav))`
 *   登录 / 注册 / 找回密码页的 $isClient 是 **false** ✗
 *   → 没有左栏 ✗ 内容却照样被推右 210px ✓✓
 *   → 登录框看着**偏右、不居中** ✓
 *
 *   ★ 已挪到 layout.php **输出左栏的那个 if 分支**里 ✗
 *     和 <aside> 一起输出一条 <style> ✓
 *     → **有左栏才有左移** ✗ 两者永远同生同灭 ✓✓
 *     （不加 body class ✗ 也不用担心 $__csNav 为空的边界 ✓）
 *
 *   ⚠️ 那条 <style> 里带着 @media (min-width:901px) ✗
 *      窄屏时左栏是 display:none ✓ 让位也该跟着取消 ✓ */
/* ⚠️ 2026-10 补回 ✗ 我之前用行替换时**误删了这条** ✓
   它只管"页面底部留白"✗ 和左边距无关 ✓
   误删的原因是正则写了 `^body.tpl-console main`（行首无缩进 ✓）
   结果先匹配到了这条**顶格**的 ✗ 而真正要删的那条在 @media 里、有缩进 ✓
   → 教训 ✗ 定位 CSS 规则**不能只靠行首锚点** ✗ 要连缩进一起看 ✓ */
body.tpl-console main { padding-bottom:30px }
body.tpl-console .pgrid {
  gap:12px
}
body.tpl-console .pcard {
  border-radius:var(--cs-r)
}
/* ══════════════════════════════════════════════════════════════════════    ⑤ 订购页：顶部筛选条    ══════════════════════════════════════════════════════════════════════     ★ 2026-10 新增 ✗ 用户要求 ✗      把订购页原来那个**左侧竖向分组导航**（.catnav ✓）      改成**内容区顶部的两行筛选条** ✓        产品分类   [云服务器 >] [物理机 >]        云服务器   [香港优化] [香港精品] [美国精品] …      （参考站的形态 ✗ 用户给的截图 ✓）     ⚠️ 这套样式只在**控制台模板**下有效 ✗      而且**元素本身也只在控制台模板下输出** ✓      （由 app/views/order.php 里的 $__cv 控制 ✓        默认模板走原来那套 .catnav ✗ 一个字节都没变 ✓）     ⚠️ 数据零查询 ✗      $nav（两级 ✓）· $gid（当前 ✓）· 每个二级自带 n（产品数 ✓）      全部是 order.php 早就查好的 ✓     ⚠️ 胶囊形状 ✗ 高 30px / 圆角 15px（正好半高 ✓ 所以是完整胶囊）      一级选中 = 蓝底白字 ✓ 二级选中 = 白底蓝字蓝边 ✓      （和参考站一致 ✗ 一级是实心蓝 ✗ 二级是描边蓝 ✓） */
body.tpl-console .cs-filter {
  background:#fff;
  border:1px solid var(--bd);
  border-radius:var(--cs-r);
  margin-bottom:14px;
  overflow:hidden;
}
body.tpl-console .cs-frow {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px 16px;
  flex-wrap:wrap;
}
body.tpl-console .cs-frow + .cs-frow {
  border-top:1px solid #f0f0f0
}
/* 行首标签 ✗ flex:none 让它按内容占宽 ✓    （一级分组名可能很长 ✗ 比如「香港云机|Cloud Server」✓      所以不设 max-width ✗ 让它自然撑开 ✓ 后面的胶囊会换行 ✓）*/
body.tpl-console .cs-flabel {
  flex:none;
  padding-top:7px;
  font-size:12.5px;
  color:rgba(0,0,0,.45);
  white-space:nowrap;
}
body.tpl-console .cs-fpills {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
  flex:1;
}
body.tpl-console .cs-fpill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 13px;
  border-radius:15px;
  border:1px solid var(--bd);
  background:#fff;
  font-size:13px;
  color:#313e59;
  text-decoration:none;
  transition:background .13s,color .13s,border-color .13s;
}
body.tpl-console .cs-fpill:hover {
  border-color:var(--pri);
  color:var(--pri);
  text-decoration:none;
}
body.tpl-console .cs-fico {
  display:inline-flex;
  flex:none;
  opacity:.7
}
body.tpl-console .cs-farrow {
  font-size:16px;
  line-height:1;
  opacity:.85
}
/* 一级选中 ✗ 实心蓝胶囊 ✓ */
body.tpl-console .cs-fpill.top.on {
  background:var(--pri);
  border-color:var(--pri);
  color:#fff;
}
body.tpl-console .cs-fpill.top.on .cs-fico {
  opacity:1
}
/* 二级选中 ✗ 描边蓝胶囊 ✓ */
body.tpl-console .cs-fpill.sub.on {
  border-color:var(--pri);
  color:var(--pri);
  font-weight:600;
}
body.tpl-console .cs-fn {
  background:#f1f5f9;
  color:#4b5563;
  font-size:11px;
  font-weight:600;
  line-height:16px;
  padding:0 6px;
  border-radius:8px;
  font-variant-numeric:tabular-nums;
}
body.tpl-console .cs-fpill.sub.on .cs-fn {
  background:#e8f0ff;
  color:var(--pri)
}
/* ⚠️ 控制台模板下左侧导航不输出了 ✗ .shop 要压成单列 ✓    原来它是「左导航 + 右内容」的两列布局 ✓    .catmain 上可能有 margin-left / width ✗ 一起清掉 ✓    默认模板不带 .cs-shop-flat 这个类 ✗ 所以完全不受影响 ✓ */
body.tpl-console .shop.cs-shop-flat {
  display:block
}
body.tpl-console .shop.cs-shop-flat .catmain {
  margin-left:0;
  width:auto;
  max-width:none;
  flex:none;
}
/* ══════════════════════════════════════════════════════════════════════    分组描述提示条（替代 .panelhead 的标题）    ══════════════════════════════════════════════════════════════════════     ★ 2026-10 用户要求：「标题不显示，描述做高亮整条显示」     ★ 配色**从用户给的参考站截图里取的真实像素值** ✓        条底色  #e6efff   占那张图 14%，95% 的行完全一致，极准        文字色  #144097   深蓝        条高    约 46px     ★ 为什么它比原来的 .panelhead 好      原来那段是「香港企业款 · 5 个产品」+ 下面一行小灰字描述。      而"哪个分组、几个产品"**顶部筛选条已经说了两遍**：        第一行胶囊 = 一级分组名        第二行胶囊 = 二级分组名 + 数量      再顶一个标题就是第三遍重复，纯占地方。      而**描述**（"高性能CPU平台，大陆精品带宽最低10M起"）      是筛选条里没地方放的信息 —— 客户就是靠它判断这一款适合干什么。      → 所以：标题删掉，把描述做成一条整宽的高亮提示 ✓     ⚠️ 只在控制台模板下输出（见 app/views/order.php 的 $__cv 分支）✓      默认模板继续用 .panelhead ✗ 一点没变 ✓ */
body.tpl-console .cs-note {
  display:flex;
  align-items:flex-start;
  gap:9px;
  background:#e6efff;
  color:#144097;
  padding:12px 16px;
  border-radius:var(--cs-r);
  font-size:12.5px;
  line-height:1.65;
  margin:0 0 14px;
}
/* 图标不参与换行 ✗ 也不被压扁 ✓ 顶部对齐让第一行文字和它齐平 ✓ */
body.tpl-console .cs-note > svg {
  flex:none;
  margin-top:2px;
  opacity:.9
}
body.tpl-console .cs-note > span {
  min-width:0
}
/* ══════════════════════════════════════════════════════════════════════    顶栏账号区：姓名胶囊    ══════════════════════════════════════════════════════════════════════     ★ 2026-10 用户要求：「这个用户名是否做个像这样的好看点」      指旁边那个余额白胶囊 ✓ 并且明确「**只做姓名**」✓      → 胶囊**只包住姓名** ✗ 「退出」保持普通文字链接 ✓     ★ 之前长什么样      两段裸文字「吴昕  退出」直接挂在深色顶栏上 ✗      旁边紧挨着一个精修过的实心白胶囊（余额）✗ 落差很明显 ✓     ★ 现在的层次        余额徽标    实心白底 + 深字      ← 最跳，是"钱"，应该最醒目        姓名胶囊    半透明白底 + 白字    ← 弱一档，是"身份"        退出链接    普通白字（更淡）      ← 再弱一档，是"动作"      三档递减 ✗ 一眼能分清主次 ✓✓     ⚠️ 选择器为什么写成 `a.who-out` 而不是 `!important`      上面有一条 `body.tpl-console .who a{color:…}`（L317 / L462 ✓）      它是 (0,2,3) ✗ 比单写 `.who-out` (0,2,1) 高 ✓      所以要多带一个类压住它 ✗ `a.who-out` = (0,3,2) ✓      用 !important 也能赢 ✗ 但那是把优先级问题藏起来 ✓ 以后更难改 ✓     ⚠️ 只在控制台模板下生效 ✗      默认模板的 .who 样式在 layout.php 里 ✗ 一个字没动 ✓ */
body.tpl-console .who {
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
/* 姓名胶囊（只包姓名 + 小头像 ✓ 退出在外面 ✓） */
/* ★★★ 2026-10 **改成实心白底 + 深字** ✗✗ 用户要求 ✓✓
 *
 *  ★ 用户原话 ✗
 *    「超级管理员这个还是做个**白色胶囊**把」✓✓
 *
 *  ★ 改之前 ✗
 *    `background:rgba(255,255,255,.09)` ✗ 很淡的一层白 ✓
 *    `color:rgba(255,255,255,.92)`      ✗ 白字 ✓
 *    ⚠️ 在深色顶栏上 ✗ 对比度很低 ✓
 *      和旁边那个**实心白**的余额徽标一比 ✗ 像没做完 ✓✓
 *
 *  ★ 现在 ✗ 和余额徽标**同一套配色** ✓✓
 *    `background:#fff` ✗ 实心白 ✓
 *    `color:#2d3340`   ✗ 深色字（就是顶栏底色 ✗ 同色系 ✓）
 *  ★ 头像图标也跟着改成深色 ✗ 不然白底上看不见 ✓✓
 *
 *  ⚠️⚠️ 这条**同时作用于两个身份** ✗
 *    · 管理员（后台）✗ 超级管理员（管理员）✓
 *    · 客户（前台）  ✗ 袁富强 ✓✓
 *    ★ 是**故意的** ✗ 两处长得一样才统一 ✓
 *      用户说的"白色胶囊"就是这个意思 ✓✓
 *
 *  ⚠️ `border` 去掉 ✗ 实心白不需要描边 ✓
 *    hover 用**略灰的白** ✗ 不能再用"提亮"（已经是纯白了 ✓）✓✓
 */
body.tpl-console .who .who-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #fff;
  border-radius:999px;
  padding:5px 13px;
  color:#2d3340;
  font-size:12.5px;
  transition:background .15s,border-color .15s;
}
body.tpl-console .who .who-pill:hover {
  /* ⚠️ 底色从 `#eef2f7` 改成 `#e2e8f0` ✗
   *   前者和纯白只差一点点 ✗ 悬停几乎没有反馈 ✓✓ */
  background:#e2e8f0;
  border-color:#e2e8f0;
  /* ⚠️⚠️ 2026-10 **必须显式给 color** ✗✗ 用户报「鼠标移上去看不清」✓✓
   *
   *  ★ 根因 ✗ 文件**上面**（L352 ✓）有一条 ✗
   *      body.tpl-console .who a:hover { color:#fff }
   *    ★ 而且这里原来**只给了 background / border-color** ✓
   *      → 悬停时底色变浅灰 `#eef2f7` ✗ 文字却继承成**白色** ✓
   *      → 白字压浅灰底 ✗ **对比度约 1.1** ✗ 完全看不见 ✓✓
   *
   *  ⚠️⚠️ 这是**第三次**踩同一类坑了 ✗✗
   *    · `.btn:hover`                （白底白字 ✓）
   *    · `.burger`（窄屏汉堡 ✓）      （白底白图标 ✓）
   *    · `.who-pill:hover`           （这一次 ✓）
   *  ★ 纪律 ✗ **覆盖一个元素的配色时 ✗
   *    background / border-color / color 必须一起给** ✓✓
   *    只给一两个 ✗ 剩下的会从"深色顶栏"那条基础规则继承过来 ✓
   *    而现在是**浅底** ✗ 于是撞车 ✓✓
   *
   *  ★ 顺便把悬停底色调深一点 ✗ `#e2e8f0` ✓
   *    原来的 `#eef2f7` 和纯白只差一点点 ✗ hover 反馈太弱 ✓✓
   */
  color:#2d3340;
}
/* 小头像 ✗ 不参与换行 ✓ 也别抢视线 ✓
 *
 *  ⚠️ 2026-10 补 `a:hover` 一起给 ✗ 见上面 `.who-pill:hover` 的说明 ✓✓
 *    ★ 它是 `<span>` ✗ 有自己的 color 声明 ✓
 *      所以 `a:hover` 那条**盖不到它** ✓ 本来就没事 ✓✓
 *    但颜色和胶囊文字保持一致 ✗ 免得以后改一处漏一处 ✓
 */
body.tpl-console .who .who-av {
  display:inline-flex;
  flex:none;
  align-items:center;
  color:rgba(45,51,64,.55);
}
/* ⚠️ 悬停时头像也跟着加深 ✗ 和文字同步 ✓✓ */
body.tpl-console .who .who-pill:hover .who-av {
  color:rgba(45,51,64,.8);
}
/* 名字太长就省略 ✗ 不能把顶栏挤爆 ✓ */
body.tpl-console .who .who-nm {
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:500;
}
/* 「退出」✗ 普通文字链接 ✓ 比姓名胶囊淡一档 ✓ */
body.tpl-console .who a.who-out {
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:12.5px;
  transition:color .15s;
}
body.tpl-console .who a.who-out:hover {
  color:#fff;
  text-decoration:none;
}
/* ══════════ ★★ 顶栏余额徽标带人民币 ✗ 2026-10 新增 ══════════
 *
 *  ★ 用户指着顶栏那个 `$5.51美元` 徽标问「这里呢」✓
 *    → 也要在美元下面显示人民币 ✓✓
 *
 *  ⚠️ 徽标是**白底 + 深色字**（#2d3340 ✓）
 *    所以 RMB 那行不能用白色 ✗ 要用**深色的半透明** ✓✓
 *    （我第一版照"深色顶栏"的思路写了白色 ✗ 那是错的 ✓
 *      白底上写白字 = 看不见 ✓✓）
 *
 *  ⚠️ `line-height:1.18` ✗ 徽标 padding 上下一共才 4px ✓
 *    默认 1.6 下两行约 37px ✗ 会把 60px 顶栏挤变形 ✓✓
 *
 *  ⚠️ RMB 字号 9.5px ✗ 徽标主体才 11.5px ✓
 *    同字号会和美元**抢注意力** ✗ 这行只是辅助 ✓✓ */
/* ★★ 2026-10 二次修改 ✗ 徽标里的金额改成**并排一行** ✓
 *
 *  ★ 用户原话 ✗「这样很难看，把换算金额放到后面，并排」✓✓
 *    第一版做成上下两行 ✗ 徽标被撑成方块 ✓ 在深色顶栏上很突兀 ✓
 *
 *  ⚠️ `.amt-usd` / `.amt-cny` 基础是 **block** ✗
 *    那是"RMB 显示在美元下方"的实现 ✓
 *    这里必须**覆盖成 inline** ✗ 否则还是两行 ✓✓
 *
 *  ⚠️ 只作用于**徽标内部** ✗
 *    表格 / 卡片 / 余额大字仍然是上下两行 ✓✓
 *
 *  ⚠️ 徽标是**白底深字** ✗ 所以人民币用深色半透明 ✓
 *    不是白色 ✓（白底白字看不见 ✓ 这个坑我上一轮踩过 ✓） */
body.tpl-console .cs-topnav .bal .cur-usd,
body.tpl-console .cs-topnav .bal .cur-cny,
body.tpl-console #topNav .bal .cur-usd,
body.tpl-console #topNav .bal .cur-cny{display:inline}
body.tpl-console .cs-topnav .bal .cur-cny,
body.tpl-console #topNav .bal .cur-cny{
  margin-left:4px;font-weight:500;color:rgba(45,51,64,.62)}
/* ⚠️⚠️ 2026-10 **这一块回到了原样** ✗✗ 记一笔 ✓✓
 *
 *  ★ 我在这里折腾了**好几轮** ✗ 每次都没解决 ✓
 *    ① 先限定 `.cs-topnav .bal .cur-cny` ✗ 用户说宽屏没有 ✓
 *    ② 加 `!important` ✗ 用户说**连窄屏也没了** ✓✓
 *    ③ 改成万能选择器 `body.tpl-console .bal .cur-cny`
 *       ✗ 用户说「WEB 端都不显示了」✓✓
 *    ★ 最后**全部回滚** ✗ 就是上面那两行 ✓✓
 *
 *  ★★ 结论 ✗✗
 *    **窄屏（汉堡菜单）本来就是正常的** ✓
 *    用户给我看的第一张截图里
 *      `充值 $9.51美元 ≈ ¥64.67` ✗ **两个都在** ✓✓
 *    ⚠️ 而**宽屏**下只有美元 ✗
 *    ★ 这是**两套不同的 DOM** ✗ 不是一条 CSS 能兼顾的 ✓✓
 *
 *  ★★★ 教训 ✗✗
 *    我在**没看到真实浏览器计算样式**的情况下
 *    连续猜了三轮 ✗ 一次都没猜对 ✓
 *    还**把本来好的那一边弄坏了** ✓✓
 *    → 正确的做法 ✗ **先让用户在 F12 里把
 *      computed style 和 offsetWidth 发过来** ✓
 *      再动手 ✓✓
 *
 *  ⚠️ 想彻底解决宽屏那个 ✗ 必须先搞清楚 ✗
 *    · 宽屏时 `.cs-topnav .bal` 里的 `cur-cny` 到底
 *      `display` 是什么 ✗ `offsetWidth` 是多少 ✓✓
 *    · 光看源码**推不出来** ✗ 因为两边 DOM 不同 ✓✓
 */