/* ============================================================================
   会员中心换肤覆盖层（baiduvps）· 第一批：骨架
   由 includes/head.tpl 在**所有样式之后**加载，是整页最后一个 <link>。

   ── 为什么是覆盖层，不是就地改 ────────────────────────────────────────
   会员中心的颜色分散在四份 CSS 里，没有一份能安全地直接改：

     bootstrap.min.css   紫 #6064ff  26 条规则   ← default 主题，5 个主题共用
     app.min.css         紫 #6064ff  70 条规则   ← 同上
     global.css          绿 #3fbf70 等            ← 同上
     register.css        蓝 #0080ff/#0060ff 系   ← 名字骗人，其实是会员中心换肤层，
                                                    baiduvps 私有，但改它会同时动到
                                                    注册/找回密码页（那两页已单独换过）

   所以统一在本文件里收口。改这里 = 只改会员中心。

   ── 特异度约定 ──────────────────────────────────────────────────────
   本文件排在最后，同特异度靠顺序取胜，**默认不写 !important**。
   只有上游那条本身带 !important 时才跟着带，并在该行注明。

   变量来自 /themes/_shared/design-token.css（head.tpl 上一行已引入）。
   fallback 是防它没加载上，别删。
   ========================================================================= */


/* ══ 1 · 顶栏 ═══════════════════════════════════════════════════════════
   原 linear-gradient(270deg, #0080ff, #005aff)。
   橙是「花钱」和「当前位置」的颜色，顶栏是全屏最大的一块色面，刷橙会把
   余额、续费按钮、待支付标记全压掉。走深墨蓝，同时和官网导航连成一条。 */
/* ── 2026-08-20 调整：原来是 #1A2740 → #101A2E，两端 ΔL 只有 0.006，
   看上去就是一整块接近纯黑的色，压得太重。现在拉开跨度，从 logo 侧的深处
   向右逐渐提亮，一条横贯全宽的光；仍然是墨蓝，没有引入新色相。

   ⚠ 两端颜色**必须走 --nav-bg-1/2 这两个 token**，不能写死：
   它们是后台「主题外观 → 配色」的两个输入框（插件把值写进 design-token.css
   末尾的 BH-THEME-VARS 块），写死了后台就调不动。
   官网导航 `web/.../header.css:473` 读的是同一对变量，方向也一致
   （它写 `270deg, nav-bg-2, nav-bg-1`，等价于这里的 `90deg, nav-bg-1, nav-bg-2`
   —— 都是 nav-bg-1 在左、nav-bg-2 在右），所以后台改一次两端同时变。 */
#page-topbar {
	background-image: linear-gradient(90deg, var(--nav-bg-1, #131E33) 0%, var(--nav-bg-2, #2F4A76) 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(17, 24, 35, .18);
}

/* logo 区改成透明，让顶栏那条渐变**从 logo 一直连到最右侧**。
   原来它是单独一块 --nav-bg-1 实色，和右边的渐变起点同色所以看不出接缝，
   但也因此 logo 那一段是平的、渐变实际上从按钮区才开始。
   上游 register.css 那条带 !important，所以这里也得带。 */
.navbar-brand-box {
	background: transparent !important;
}

/* ⚠ 底色钉成深蓝之后，logo 的明暗必须跟着钉死。
   header.tpl 里有两个 logo：.logo-dark 用 $site.minilogo（深字版），
   .logo-light 用 $site.logo（白字版），由 body[data-sidebar] 切换显示。
   而上面那条背景是**无条件**的 —— data-sidebar 一旦不是 dark（厂商的主题
   设置面板能改），就会变成「深字 logo 摆在深蓝底上」，字直接糊掉。
   既然底色不再跟着 data-sidebar 走，logo 也不能跟着走。 */
.navbar-brand-box .logo-dark {
	display: none !important;
}

.navbar-brand-box .logo-light {
	display: inline-block !important;
}


/* ══ 2 · 侧边栏 ═════════════════════════════════════════════════════════
   原来选中项是整条实心蓝底反白字（#0080ff）。13 个一级项 + 二级展开的长
   列表里太重，视线被钉死在选中行。改成浅橙底 + 橙字 + 左侧 3px 竖条。

   竖条用 inset box-shadow 而不是 border-left —— border 会改盒模型，
   让所有菜单项的文字横向跳 3px。 */
body[data-sidebar="dark"] .mm-active .active {
	color: var(--brand-700, #B84508) !important;   /* 上游带 !important */
	background: var(--brand-50, #FFF4ED);
	box-shadow: inset 3px 0 0 var(--brand-500, #F2610C);
}

/* 一级项展开态：原 #0060ff 蓝字 + #eff2f7 灰底 */
body[data-sidebar="dark"] .mm-active > a {
	color: var(--brand-700, #B84508) !important;   /* 上游带 !important */
}
/* ⚠ `.mm-active .active i` 这条不能少 —— 少了它，**没有二级菜单的一级项**
   （用户中心 / 订购产品 / 阿里轻量 / 运维在线 / 推介计划 / 域名账户 /
   域名管理 / CF优选IP / 容灾切换，共 9 个）选中时图标会保持纯白，
   在浅橙底上完全看不见。

   原因：有二级菜单时，选中的一级 <a> 只是 `.mm-active > a`；
   没有二级菜单时，那个 <a> **同时**是 `.mm-active > a` 和 `.active`，
   于是 register.css 里这两条都命中：

       body[data-sidebar="dark"] .mm-active > a i      { color:#fff !important }
       body[data-sidebar="dark"] .mm-active .active i  { color:#fff !important }

   特异度都是 (0,3,2) 且都带 !important —— 同分时**后出现的赢**，
   而 .active i 那条在 register.css 里排在后面。只覆盖前一条压不住它。

   排查过程留个记录：手动遍历 document.styleSheets 找匹配规则**没抓到这两条**，
   一度以为白色是继承来的。最后是用 CDP 的 CSS.getMatchedStylesForNode
   才拿到引擎真正匹配的规则列表。查层叠冲突要用 CDP，别信手写的 CSSOM 遍历。 */
body[data-sidebar="dark"] .mm-active > a i,
body[data-sidebar="dark"] .mm-active > i,
body[data-sidebar="dark"] .mm-active .active i,
body[data-sidebar="dark"] .mm-active {
	color: var(--brand-700, #B84508) !important;   /* 上游带 !important */
}

/* hover 态：原 #0060ff */
body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover {
	color: var(--brand-600, #D9520A);
}

/* app.min.css 那套 .mm-active 紫（#6064ff），选择器要一一对上才压得住 */
.mm-active,
.mm-active > a,
.mm-active > a i,
.mm-active > i,
.mm-active .active,
.mm-active .active i {
	color: var(--brand-700, #B84508);
}


/* ══ 3 · 主按钮 ═════════════════════════════════════════════════════════
   .btn-primary  原 bg #0069ff / border #006aff（register.css）
   .btn-success  原 #34c38f（bootstrap）—— 实测 20 处全是主操作按钮
                 （提交工单 / 续费 / 订购流量包 / 申请发票 / 添加更多），
                 没有一处当「成功」语义用，所以并进主按钮。 */
.btn-primary,
.btn-success {
	background-color: var(--brand-600, #D9520A);
	border-color: var(--brand-600, #D9520A);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
	background-color: var(--brand-700, #B84508);
	border-color: var(--brand-700, #B84508);
	color: #fff;
}
/* bootstrap 的 focus 蓝光环 */
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-success:focus,
.btn-success.focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show > .btn-success.dropdown-toggle:focus {
	box-shadow: 0 0 0 .15rem var(--brand-100, #FFE3D0);
}
.btn-primary.disabled, .btn-primary:disabled,
.btn-success.disabled, .btn-success:disabled {
	background-color: var(--brand-600, #D9520A);
	border-color: var(--brand-600, #D9520A);
}

/* 描边按钮 */
.btn-outline-primary {
	color: var(--brand-600, #D9520A);
	border-color: var(--brand-600, #D9520A);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
	background-color: var(--brand-600, #D9520A);
	border-color: var(--brand-600, #D9520A);
	color: #fff;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color: var(--brand-600, #D9520A);
}


/* ══ 4 · 链接 ═══════════════════════════════════════════════════════════
   链接不跟着刷橙 —— 表格里每行都有「查看」，全刷橙会连成一片橙点，
   反而看不见真正要点的东西。链接走科技蓝，和橙拉开色相，各管各的。

   a{} 原来在 register.css 是 #0060ff，在 bootstrap 是 #6064ff。 */
a {
	color: var(--tech-500, #1A7FE0);
}
a:hover,
a:focus {
	color: var(--tech-600, #1268C3);
}
.text-primary {
	color: var(--tech-500, #1A7FE0) !important;   /* 上游 bootstrap 那条带 !important */
}
a.text-primary:hover,
a.text-primary:focus {
	color: var(--tech-600, #1268C3) !important;
}
.btn-link {
	color: var(--tech-500, #1A7FE0);
}
.btn-link:hover {
	color: var(--tech-600, #1268C3);
}

/* ⚠ 顶栏的链接兜底，只能写这一条，且必须用**子**选择器。

   踩过的坑：先写成 `#page-topbar a { color: inherit }`，想让顶栏不受上面 a{}
   影响。结果 (1,0,1) 的特异度反而把上游给白字的规则盖掉了，inherit 拿到 body
   的 --ink-2 深灰 —— 顶栏换深墨蓝后「帮助/工单/消息/费用」直接隐形。

   「帮助/工单/消息/费用」在 `.d-flex > div.dropdown > a`，上游有更高特异度的
   白字规则罩着，a{} 的 (0,0,1) 压不到，不用管。
   只有「总览」是 `.d-flex > a` 裸链接，会被 a{} 刷成科技蓝，同一排两种颜色。

   而顶栏里还嵌着**白底**的搜索下拉（.header-search-droplist），它在
   `.dropdown-menu` 更深处 —— 所以这里必须用 `>` 逐级限死，用后代选择器
   会把白底上的文字一起刷白。 */
#page-topbar .navbar-header > .d-flex > a {
	color: #fff;
}
#page-topbar .navbar-header > .d-flex > a:hover,
#page-topbar .navbar-header > .d-flex > a:focus {
	color: rgba(255, 255, 255, .78);
}


/* ══ 5 · 分页 ═══════════════════════════════════════════════════════════
   当前页原来是紫 #6064ff（bootstrap），和顶栏蓝、按钮蓝三色打架。 */
.page-item.active .page-link {
	background-color: var(--brand-600, #D9520A);
	border-color: var(--brand-600, #D9520A);
	color: #fff;
}
.page-link {
	color: var(--ink-2, #333F4E);
}
.page-link:hover {
	color: var(--brand-600, #D9520A);
}
.page-link:focus {
	box-shadow: 0 0 0 .15rem var(--brand-100, #FFE3D0);
}


/* ============================================================================
   第二批：组件
   第一批（顶栏 / 侧边栏 / 主按钮 / 链接 / 分页）上线验证通过后追加。
   ========================================================================= */


/* ══ 6 · tab ═══════════════════════════════════════════════════════════
   服务详情页那 14 个模块 tab（图表 / 网络 / 硬盘 / 快照 …）走的是这套，
   原来选中色和下划线都是紫 #6064ff。 */
.nav-tabs-custom .nav-item .nav-link.active,
.nav-tabs-custom .nav-link.active,
.nav-tabs-custom .nav-link:hover {
	color: var(--brand-600, #D9520A);
}
.nav-tabs-custom .nav-item .nav-link::after,
.nav-tabs-custom .nav-link::after {
	background: var(--brand-500, #F2610C);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--brand-600, #D9520A);
}


/* ══ 7 · 表单控件 ═══════════════════════════════════════════════════════
   复选框 / 单选 / 开关 / 滑块的选中态，原来全是紫 #6064ff。
   账单页表格每行左边都有一个，一列扫下来很显眼。 */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-checkbox-primary .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio-primary .custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--brand-600, #D9520A);
	background-color: var(--brand-600, #D9520A);
}
.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 .15rem var(--brand-100, #FFE3D0);
}
.custom-radio-outline.custom-radio-primary .custom-control-input:checked ~ .custom-control-label::after {
	color: var(--brand-600, #D9520A);
}
.custom-range::-webkit-slider-thumb { background-color: var(--brand-600, #D9520A); }
.custom-range::-moz-range-thumb     { background-color: var(--brand-600, #D9520A); }
.custom-range::-ms-thumb            { background-color: var(--brand-600, #D9520A); }

/* 输入框聚焦：原来是紫/蓝光环 */
.form-control:focus {
	border-color: var(--brand-500, #F2610C);
	box-shadow: 0 0 0 .15rem var(--brand-100, #FFE3D0);
}


/* ══ 8 · 进度条 / 头像占位 / 主色底 ═════════════════════════════════════ */
.progress-bar { background-color: var(--brand-600, #D9520A); }
.avatar-title  { background-color: var(--brand-600, #D9520A); }
.bg-primary    { background-color: var(--brand-600, #D9520A) !important; }  /* 上游带 !important */
.border-primary{ border-color:     var(--brand-600, #D9520A) !important; }
.badge-primary { background-color: var(--brand-600, #D9520A); }
.list-group-item.active {
	background-color: var(--brand-600, #D9520A);
	border-color: var(--brand-600, #D9520A);
}
.card-radio-input:checked + .card-radio { border-color: var(--brand-500, #F2610C); }


/* ══ 9 · 状态徽章：实心块 → 浅底深字 ════════════════════════════════════
   原来一律是 5px 10px 的实心色块反白字，一列全绿时噪点很高。
   改成语义三档浅底，同一列扫下来只有异常项跳出来。

   顺带修掉几个真实的可读性问题（换肤前就有，实测 WCAG 对比度）：
     .status-refunded  白字 / #999999  = 2.85   ← 远低于 4.5
     .status-cancelled 白字 / #959799  = 2.9
     工单「关闭」      白字 / #888888  = 3.54
   改成浅底深字后全部到 7 以上。 */
.status-active,
.status-paid,
.status-success,
.status-issue_active {
	color: var(--ok-500, #15A34A);
	background-color: var(--ok-50, #E9F7EF);
	border-color: var(--ok-50, #E9F7EF);
}
.status-unpaid,
.status-pending,
.status-verifiy_active,
.status-overdue_active {          /* SSL 即将过期，原来是紫的，语义上属警告 */
	color: var(--warn-500, #D9880F);
	background-color: var(--warn-50, #FDF3E2);
	border-color: var(--warn-50, #FDF3E2);
}
.status-suspended {
	color: var(--bad-500, #D92D20);
	background-color: var(--bad-50, #FDECEA);
	border-color: var(--bad-50, #FDECEA);
}
.status-refunded,
.status-cancelled,
.status-deleted {
	color: var(--ink-3, #5E6B7C);
	background-color: var(--surface-sunk, #EFF2F7);
	border-color: var(--surface-sunk, #EFF2F7);
}


/* ══ 10 · register.css 里的私有组件 ═════════════════════════════════════ */

/* 顶栏搜索框：原 #015afd 底 + #3a8dff 边，在深墨蓝顶栏上是一块突兀的亮蓝。

   ⚠ 底色必须**不透明**，不能用 rgba 白。
   顶栏里其实叠着**两个** .zdy-ss，位置完全重合（都是 [914,19,250,32]）：
       .zdy-ss              placeholder「搜索」          ← 收起态看到的
       .zdy-ss.zdy-tcss     placeholder「输入您想要搜索的关键词」 ← 展开时盖上来
   厂商原来给的实心 #015afd 正好把下面那个盖死，所以看不出来。
   我第一版改成 rgba(255,255,255,.14)，下面那行字直接透上来 ——
   用户报的「搜索点开有重影」就是这个，「搜」和「输」叠成一个怪字。

   #313E56 = 深墨蓝顶栏叠一档提亮后的等效实心值。
   实测 placeholder 在它上面 5.2、输入文字 10.6，都够。 */
.zdy-ss {
	background: #313E56;
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff !important;
}
.zdy-ss::placeholder { color: rgba(255, 255, 255, .62); }
.form-control.zdy-ss:focus {
	background-color: #3A4A66;
	border-color: rgba(255, 255, 255, .4);
	box-shadow: none;
	color: #fff;
}

/* 顶栏各个下拉（搜索 / 帮助 / 工单 / 消息 / 费用）展开时，触发块会高亮。
   原来是 #609dff 亮蓝，在深墨蓝顶栏上是一整块 256x70 的亮斑，很割裂。

   ⚠ 这条只在 .dropdown.show 时生效 —— 属于**交互态**，
   默认状态的色值扫描抓不到它，是点开搜索框才发现的。 */
.navbar-header .dropdown.show .header-item {
	background-color: rgba(255, 255, 255, .08);
}

/* 首页「个人认证 / 设置密保 / 绑定手机 / 绑定邮箱」四个链接，原 #00b98c 青绿 */
.zduserlj a.zdcg { color: var(--ok-500, #15A34A); }

/* 头像占位圆：原 #0066fe */
.user-center_header,
.zdusertx .user-center_header { background-color: var(--brand-600, #D9520A); }

/* 代办事项格子 / 已开通产品格子的 hover：原 #0066ff */
.zddbsx a:hover {
	background: var(--brand-50, #FFF4ED);
	border: 1px solid var(--brand-500, #F2610C);
	color: var(--brand-700, #B84508);
}
.user-center_product_grid .user-center_product:hover {
	background: var(--brand-50, #FFF4ED);
	border: 1px solid var(--brand-500, #F2610C);
}

/* 顶栏搜索下拉：一堆 #0080ff 的 hover 态。
   ⚠ 这里是**白底**弹层，不能刷成顶栏那套深色。 */
.header-search-droplist > ul > li > a.hover,
.header-search-droplist > ul > li > a.hover span,
.header-search-droplist > ul > li:hover .text,
.header-search-droplist > ul > li:hover .text > span,
.header-search-droplist > ul > li:hover .text > span span,
.header-search-droplist > ul > li:hover .text span,
.header-search-droplist > ul > li:hover a,
.header-search-droplist > ul > li:hover a span,
.header-search-droplist .search-block.hover,
.header-search-droplist .search-block.hover a.hover,
.header-search-droplist .search-block:hover,
.header-search-droplist a.hover,
.header-search-droplist a:hover,
.header-search-droplist .search-block.hover a.hover span,
.header-search-droplist .search-block.hover span,
.header-search-droplist .search-block:hover span,
.header-search-droplist a.hover span,
.header-search-droplist a:hover span {
	color: var(--brand-600, #D9520A);
}
.header-search-droplist > ul > li:hover .tag-product,
.header-search-droplist .search-block .search-tag .tag-console:hover {
	color: var(--brand-600, #D9520A);
	border-color: var(--brand-500, #F2610C);
}
.header-search-droplist .search-block.hover,
.header-search-droplist .search-block:hover,
.header-search-droplist a.hover,
.header-search-droplist a:hover {
	border-color: var(--brand-500, #F2610C);
}


/* ══ 11 · 顺手修掉的可读性问题 ══════════════════════════════════════════
   都不是这次换肤引入的，是实测 WCAG 对比度时暴露出来的既有问题。 */

/* #999 灰：服务详情的「系统盘 / 带宽 / 备注信息」标签、安全页说明文字。
   在 #F8F8FB 底上只有 2.69，远低于 4.5。--ink-3 能到 5.1。 */
.text-gray { color: var(--ink-3, #5E6B7C); }

/* 服务详情的登录密码和价格，原 #5f88fe 在浅底上只有 3.08。
   密码是要照着敲的，这个必须清楚。 */
.btnCopyPwd,
.text-black.btnCopyPwd { color: var(--ink-1, #111823); }

/* 余额数字原 #f60 只有 2.94。--brand-600 是 4.05，仍不满 AA，
   但它是全站色板（官网也在用），不在这里单独动。至少比 #f60 好。 */
.zdye span:nth-child(2),
.zdxy span:nth-child(2) { color: var(--brand-600, #D9520A); }


/* ============================================================================
   第三批：对比度收尾
   上线后跑 WCAG 扫描发现的，其中 §12 是**我自己第二批引入的**。
   ========================================================================= */


/* ══ 12 · 徽章文字必须用「更深的语义色」，不能直接用 --ok/warn/bad-500 ══════

   ⚠ 这是我第二批做错的地方，记下来别再犯：
   把状态徽章从「实心块反白字」改成「浅底深字」时，我直接拿 --ok-500 当文字色、
   --ok-50 当底色。实测结果：

       --ok-500  #15A34A / --ok-50  #E9F7EF = 2.99   ✗（比改之前的实心块还差）
       --warn-500 #D9880F / --warn-50 #FDF3E2 = 2.55  ✗
       --bad-500  #D92D20 / --bad-50  #FDECEA = 4.22  ✗

   原因：那三个 -500 是设计给**实心块底色**和**图标**用的，够亮才压得住白字；
   当浅底上的文字色时亮度反而不够。浅底深字要另配一档更深的。

   不动全局 token（官网也在用 --ok-500），只在本文件里加一组 --sk-* 局部变量。 */
:root {
	--sk-ok-ink:   #0F7A37;   /* 在 --ok-50   上 4.93 ✓ */
	--sk-warn-ink: #9A6108;   /* 在 --warn-50 上 4.67 ✓ */
	--sk-bad-ink:  #B02318;   /* 在 --bad-50  上 5.92 ✓ */
}

.status-active,
.status-paid,
.status-success,
.status-issue_active {
	color: var(--sk-ok-ink, #0F7A37);
}
.status-unpaid,
.status-pending,
.status-verifiy_active,
.status-overdue_active {
	color: var(--sk-warn-ink, #9A6108);
}
.status-suspended {
	color: var(--sk-bad-ink, #B02318);
}

/* bootstrap 那套 badge-* 也一起统一，否则同一页会并存两种徽章样式：
   我改过的 status-*（浅底深字）和没改的 badge-success（实心绿块 2.25）。 */
.badge-success,
.badge-soft-success {
	color: var(--sk-ok-ink, #0F7A37);
	background-color: var(--ok-50, #E9F7EF);
}
.badge-warning,
.badge-soft-warning {
	color: var(--sk-warn-ink, #9A6108);
	background-color: var(--warn-50, #FDF3E2);
}
.badge-danger,
.badge-soft-danger {
	color: var(--sk-bad-ink, #B02318);
	background-color: var(--bad-50, #FDECEA);
}
.badge-secondary {
	color: var(--ink-3, #5E6B7C);
	background-color: var(--surface-sunk, #EFF2F7);
}


/* ══ 13 · 首页「代办事项」的五个数字 ═════════════════════════════════════
   原来是 .text-warning 的 #f1b44c，白底上只有 **1.85** —— 25px 的大字
   也需要 3.0，等于基本看不清。这是换肤前就有的问题。

   不动 .text-warning 本身（它在别处是真的警告语义），只锚定代办事项那个容器
   .zddbsx。这五个数字是「待你处理的事」，橙色（4.07，大字达标）也更对。 */
.zddbsx .text-warning {
	/* bootstrap 的 .text-* 工具类**全部自带 !important**（.text-warning /
	   .text-primary / .text-muted / .text-success 都是），不带就压不住 —— 我第一次
	   漏了，部署完扫描发现这条根本没生效，还是 1.85。 */
	color: var(--brand-600, #D9520A) !important;
}


/* ══ 14 · 分页的禁用箭头 ════════════════════════════════════════════════
   «  » 在第一页/最后一页是 #ced4da，白底上 1.49，基本消失。
   禁用态本来就不受 WCAG 约束，但 1.49 太过了，提到 --ink-4（2.86）。 */
.page-item.disabled .page-link {
	color: var(--ink-4, #8D9AAB);
}


/* ══ 15 · 安全中心的说明文字 ════════════════════════════════════════════
   global.css 的 .security-item-desc 是 #999，白底上 2.85。
   整页全是这种说明文字（「安全性高的密码可以使帐号更安全…」），换 --ink-3 到 5.1。 */
.security-item-desc {
	color: var(--ink-3, #5E6B7C);
}


/* ══ 16 · 两种绿的统一 ══════════════════════════════════════════════════
   交互态扫描发现：厂商绿 #34c38f 还留在 .text-success 和 .bg-success 上，
   和 §12 新定的 --sk-ok-ink / --ok-500 是两个不同的绿，同一页会并存。

   .text-success 顺带修对比度：#34c38f 在白底只有 2.3。
   .text-* 是 bootstrap 工具类，全部自带 !important（见 §13 那条教训）。 */
.text-success {
	color: var(--sk-ok-ink, #0F7A37) !important;
}
.bg-success {
	background-color: var(--ok-500, #15A34A) !important;   /* 上游带 !important */
}


/* ══ 17 · 顶栏购物车数量角标 ════════════════════════════════════════════
   厂商把它用 HTML 注释包起来了（header.tpl），但变量本身一直是好的 ——
   注释里实测能渲染出正确数字，和官网 .gwcsl 的数完全一致（两边都读
   cart_session 表）。放开注释即可，不用另接数据源。

   ⚠ 没沿用厂商写的 .badge-danger：§12 已经把它改成「浅红底 + 深红字」，
   在深墨蓝顶栏上会是一块浅粉斑，而且和官网那个实心红圆点对不上。
   官网 .gwcsl 是 #e41e2c 实心红白字，这里照抄它的形状和配色。

   尺寸抄的是官网修过的版本：min-width + height 固定 16px、border-radius 999px。
   厂商原来写 padding + border-radius:50%，盒子不是正方形，50% 画出来是椭圆；
   固定高度后 1 位数是正圆、2 位以上是药丸。 */
/* ⚠ 定位上下文是外层的 div.dropdown（101px 宽，把图标和「购物车」三个字一起
   包住），不是 .noti-icon 那个 button（它是 position:static）。所以 right:0
   落在「购物车」文字的右上角，而不是图标上。

   这是**对的**，别去"修"。官网 .gwcsl 也是定位在 .header-shopping-cart 右上角、
   压在「购物车」文字上的。我一度以为角标该贴图标，给 button 加了 relative 把它
   拽到图标右上角，结果反而和官网不一致了 —— 用户要的就是「跟首页一样」。
   改这里之前先去看一眼官网长什么样。 */
.noti-icon .badge.bv-cart-count {
	position: absolute;
	top: 12px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: #e41e2c;   /* 和官网 .gwcsl 同色，两边必须一致 */
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
}


/* ══ 18 · .text-danger 被厂商写成了浅蓝 ══════════════════════════════════
   register.css:161 里是：

       .text-danger { color: #bbd5ff !important; }

   danger 是 bootstrap 的语义类（危险 / 错误）。实测全站 18 处 + proxmoxlxc
   插件 6 处，用的**全是真·错误语义**：「删除」链接、bxs-error-circle 错误图标、
   「未支付」标题、「加载失败: xxx」、端口映射的失败态。没有一处需要浅蓝。

   而 #bbd5ff 在白底上对比度只有 1.5 —— 等于客户根本看不见错误提示。
   换成语义红（对白底 4.83，达 AA）。上游带 !important，这里跟着带。 */
.text-danger {
	color: var(--bad-500, #D92D20) !important;
}


/* ══ 19 · 到期剩余天数徽章 ═══════════════════════════════════════════════
   走查稿第 6 条：资源列表原来只写一个日期（「2026-09-12」），客户得自己
   数还剩几天。模板里已加 .bv-due，30 天内才渲染，分三档：

       > 30 天   不渲染          —— 平时列表干干净净，不制造噪音
       7~30 天   .bv-due-warn    浅黄底 + 深黄字
       0~7 天    .bv-due-hot     浅红底 + 深红字
       已过期    .bv-due-over    同上再加粗

   文字色用 §12 那组 --sk-*-ink（比 -500 更深一档）。原因见 §12 的说明：
   -500 是给实心块和图标用的，直接放在 -50 浅底上只有 2.5~4.2，不达 AA。

   ⚠ 没做走查稿里提的「续费卡剩余天数进度条」。进度条要有分母 —— 也就是
   本计费周期的起点。host 表里只有 regdate（首次订购）和 nextduedate，
   续费不会改 regdate，所以一个续过 3 次的年付产品会被算成「已用 75%」，
   其实它刚续完。靠 billingcycle 反推周期长度能对上标准周期，但遇到
   自定义周期、赠送时长、跨周期升级就会给出错的比例。
   一个算错的进度条比没有进度条更糟，所以只做天数。 */
.bv-due {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;   /* 数字等宽，多行并排时不会跳 */
}

.bv-due-warn {
	background: var(--warn-50, #FDF3E2);
	color: var(--sk-warn-ink, #9A6108);
}

.bv-due-hot,
.bv-due-over {
	background: var(--bad-50, #FDECEA);
	color: var(--sk-bad-ink, #B02318);
}

.bv-due-over {
	font-weight: 600;
}

/* ══ 20 · 侧边栏 / 内容区 / 卡片 三层分不开 ════════════════════════════
   实测三层的颜色：

       侧边栏      #FFFFFF
       内容区背景  #F8F8FB   ← 跟白只差 7 个色阶
       内容区卡片  #FFFFFF   ← 跟侧边栏同色

   而侧边栏 border-right 是 0，阴影是 rgba(18,38,63,.03) 12px 24px ——
   0.03 的透明度在白底上根本看不见。结果整个左半屏糊成一片白，
   只有顶栏那条深蓝孤零零压在上面，头重脚轻。

   两处最小改动把层次拉开，不动 body 背景（那会牵动所有页面）：
   1. 侧边栏给一条 1px 右框 —— 划清"导航区 / 工作区"的界
   2. 卡片给一条极淡的边 —— 让白卡片能从 #F8F8FB 的底上浮起来 */
.vertical-menu {
	border-right: 1px solid var(--line, #E2E7EF);
}

/* 卡片浮起来。上游 .card 只有 box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.03)，
   同样是 0.03，等于没有。 */
.main-content .card {
	border: 1px solid var(--line, #E2E7EF);
	box-shadow: 0 1px 2px rgba(18, 38, 63, .04);
}


/* ══ 21 · 首页「消费信息」：恒 100% 的余额环 → 近 30 天消费折线 ═══════════
   原来那个环画的是 余额 ÷（余额 + 未支付）。未支付通常是 0，分母就等于分子，
   环恒为满圈；环心写的又是「当前余额 6372.00元」——和左边「财务信息」卡
   同一个数字。一整张卡的视觉面积换来一次重复，还占着首屏。

   换成折线之后卡片标题「消费信息」才名副其实，而且这是本页别处没有的信息。
   数据由 app/zdsju.php 的 bv_spend_trend() 出，模板走 data-* 属性传给 JS
   （<script> 里插 {$var} 会被 htmlspecialchars 打断，见 clientarea.tpl 里的注释）。 */
.bv-trend-tag {
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 400;
	color: var(--ink-3, #5E6B7C);
	background: var(--bg-2, #F4F6FA);
	vertical-align: 2px;
}

.bv-trend-chart-wrap {
	flex: 1 1 auto;
	min-width: 0;          /* flex 子项默认 min-width:auto，不置 0 的话
	                          echarts 撑出来的宽度会把右栏挤没 */
}

/* echarts 必须拿到确定的像素高度才画得出来。
   ⚠ 原本这个 div 挂着 bootstrap 的 .w-100 .h-100，而 .h-100 是
     `height:100% !important` —— 桌面靠父级撑到 231px 看着正常，
     手机上父级高度是 auto，图表直接塌成 0×0（canvas 在、画布没有高度）。
     已把那两个工具类从模板里去掉，尺寸只在这里定。 */
#balanceCharts {
	width: 100%;
	height: 190px;
}

.bv-trend-side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 132px;
	padding-left: 12px;
	border-left: 1px solid var(--line, #E2E7EF);
}

.bv-trend-item + .bv-trend-item {
	margin-top: 14px;
}

.bv-trend-label {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	color: var(--ink-3, #5E6B7C);
}

.bv-trend-num {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-1, #1F2937);
	text-decoration: none;
}

.bv-trend-num:hover,
.bv-trend-num:focus {
	color: var(--skin-accent, #D9520A);
	text-decoration: none;
}

@media (max-width: 767px) {
	/* 上游 register.css:1208 在手机上把整张卡 display:none 掉了。
	   那时候它只是个恒 100% 的余额环，藏了不亏；现在装的是近 30 天消费折线，
	   手机上同样有用，所以放出来 —— 改成「图在上、三个数字横排在下」。
	   ⚠ 上游那条是 .xfxx{display:none}（0,1,0），同分靠顺序赢不了媒体查询内的先后，
	     本文件确实排在 register.css 之后，但为了不依赖加载顺序这里带 !important。 */
	.xfxx {
		display: block !important;
	}
	.xfxx .h100p {
		flex-direction: column;
	}
	.bv-trend-chart-wrap {
		width: 100%;
	}
	#balanceCharts {
		height: 160px;
	}
	.bv-trend-side {
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 0 0;
		margin-top: 8px;
		border-left: 0;
		border-top: 1px solid var(--line, #E2E7EF);
	}
	.bv-trend-item + .bv-trend-item {
		margin-top: 0;
	}
}


/* ══ 22 · 首页「代办事项」：图标 + 语义色 ════════════════════════════════
   这五格原本是五个裸数字，一律 .text-warning。两个问题：
   · 「0 待处理工单」是**好**状态，被刷成警示色，扫一眼像有事要办；
   · 没有图标，五格长得一模一样，只能逐个读文字才知道是什么。

   现在：数字默认中性墨色，只有 >0 才由模板挂 .bv-todo-alert 转警示色。
   ⚠ 第 13 节那条 .zddbsx .text-warning 已经失效（模板里不再有 text-warning），
     留着是为了万一模板回滚，不是死代码。 */
.bv-todo a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	transition: border-color .15s ease, background-color .15s ease;
}

.bv-todo-ico {
	font-size: 18px;
	line-height: 1;
	/* 原来用 --ink-4，白底只有 2.86。图标不承载语义（文字标签才是），
	   但 --ink-4 在 token 注释里本就标着「占位」，换 --ink-3（5.42）更稳，
	   而且 18px 图标配 26px 近黑数字，层级依然分得开。 */
	color: var(--ink-3, #5E6B7C);
	transition: color .15s ease;
}

.bv-todo-num {
	font-size: 26px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--ink-1, #1F2937);
}

/* 有待办才上警示色。--brand-600 白底 4.05，26px 大字按 3.0 判定达标。 */
.bv-todo a.bv-todo-alert .bv-todo-num,
.bv-todo a.bv-todo-alert .bv-todo-ico {
	color: var(--brand-600, #D9520A);
}

.bv-todo a:hover .bv-todo-ico {
	color: var(--skin-accent, #D9520A);
}

@media (max-width: 767px) {
	.bv-todo-num {
		font-size: 18px;
	}
	.bv-todo-ico {
		font-size: 15px;
	}
}


/* ══ 23 · 面板标题：图标 + 名称 + 右侧附注 ═════════════════════════════════

   参考供应商站（znetyun）的做法：卡片标题左边挂一枚圆角色块图标，右边放
   一条次要信息（总数 / 查看更多）。目前只用在「资源列表」和「公告通知」
   这两张并排的卡上——它们是这一屏里唯二的「列表型」面板，加个图标能让
   眼睛一眼分开左右两栏；上面那几张是数字卡，不需要再加。

   色块底 + 深色图标而不是实心色块反白，理由同 §12：浅底深字更好控对比度，
   也不会在一屏里堆出四五块高饱和色。 */
.bv-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bv-panel-name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bv-panel-ico {
	width: 28px;
	height: 28px;
	border-radius: var(--r-ctl, 8px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	flex: none;
}

/* 资源列表＝科技蓝（和图表、链接同源），公告＝品牌橙（要抓一点注意力）。
   两枚图标都是「浅底 + 同色系深字」，不引入新色。 */
.bv-panel-ico--tech {
	background-color: var(--tech-50, #EAF3FE);
	color: var(--tech-600, #1268C3);      /* 实测 4.94 ✓ */
}
/* ⚠ 这里必须用 -700 不能用 -600：--brand-600 在 --brand-50 上实测只有 3.67。
   和 §12 记的是同一件事——橙/绿这类暖色的 -500/-600 是给「实心底压白字」
   配的，当浅底上的前景色时亮度不够。--brand-700 是 4.99 ✓。 */
.bv-panel-ico--brand {
	background-color: var(--brand-50, #FFF4ED);
	color: var(--brand-700, #B84508);
}
.bv-panel-ico--ok {
	background-color: var(--ok-50, #E9F7EF);
	color: var(--sk-ok-ink, #0F7A37);    /* 4.93 ✓，同 §12 */
}
.bv-panel-ico--warn {
	background-color: var(--warn-50, #FDF3E2);
	color: var(--sk-warn-ink, #9A6108);  /* 4.67 ✓ */
}

/* 标题右侧的附注：12px 常规字重，不跟 h4 一起加粗。 */
.bv-panel-extra {
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-3, #5E6B7C);
	flex: none;
	white-space: nowrap;
}

a.bv-panel-more {
	color: var(--ink-3, #5E6B7C);
	transition: color .15s ease;
}
a.bv-panel-more:hover,
a.bv-panel-more:focus {
	color: var(--skin-accent, #D9520A);
}


/* ══ 24 · 资源列表 ════════════════════════════════════════════════════════

   两个真实缺陷，不只是样式：

   1. 上游 `#sourceListBox .table-footer{display:none}` 把翻页也一起藏了。
      这台账号有 9 台机器、每页 5 条，第二页客户根本点不到。
      现在只在 Total > Limit 时（模板里判断）放出 .pagination；
      「每页 N 条」那个 select 保持隐藏——不做下拉。
   2. `.user-center_calc{height:308px}` 是死高度，5 行表格 + 表头 + 标题
      已经装不下，最后一行被卡片裁掉。改成 min-height，让它按内容长，
      再用 height:100% 让并排的公告卡跟着等高。 */
.user-center_calc {
	height: 100%;
	min-height: 308px;
}

/* 放出翻页。上游那条是 `#sourceListBox .table-footer`（0,1,1 + id），
   所以这里也得带上 #sourceListBox 才压得过去。 */
#sourceListBox .table-footer.bv-res-pager {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
/* 「共 N 条 / 每页 N 条」整块留在隐藏状态：总数已经在标题右边了，
   下拉是用户明确不要的。 */
#sourceListBox .table-footer .table-pageinfo {
	display: none;
}
#sourceListBox .pagination {
	margin-bottom: 0;
}

/* 状态从「一律绿点」换成真实状态徽章后，把徽章压窄一点，
   免得 25% 宽的第一列被一颗胶囊撑开。 */
.bv-res-status {
	padding: 3px 10px;
	font-weight: 400;
}


/* ══ 25 · 公告通知：日期让位给标题 ════════════════════════════════════════

   原来 `日期(110px) + 标题(剩下)`，在 col-xl-4 的窄栏里标题只剩 ~250px，
   六条全被 ellipsis 砍掉后半句。换成 `圆点 + 标题(flex:1) + 日期(靠右)`，
   日期去掉时分再省 40px，标题可用宽度从 250px 涨到 ~300px。 */
.bv-notice-item {
	border-bottom: 1px dashed var(--line, #E2E7EF);
}
.bv-notice-item:last-child {
	border-bottom: 0;
}

.bv-notice-link {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	min-width: 0;
}

.bv-notice-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--ink-4, #8D9AAB);
	flex: none;
	transition: background-color .15s ease;
}
.bv-notice-link:hover .bv-notice-dot {
	background-color: var(--skin-accent, #D9520A);
}

.bv-notice-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 日期是次要信息，12px + --ink-3（白底 5.42 ✓）。
   tabular-nums 让六行的日期竖着对齐。 */
.bv-notice-date {
	flex: none;
	font-size: 12px;
	color: var(--ink-3, #5E6B7C);
	font-variant-numeric: tabular-nums;
}

.bv-notice-empty {
	list-style: none;
}

/* 手机上标题会被日期挤得更窄，直接把日期收掉——移动端点进去就能看到时间。 */
@media (max-width: 575px) {
	.bv-notice-date {
		display: none;
	}
}


/* ══ 26 · 已开通产品：链接条 → 数据概览卡 ═════════════════════════════════

   参考供应商站的「数据概览」：名称在上、数量放大、右侧一枚配色图标。
   原来是「[图标] 云上服务器 (2)」这样一行细长链接，数量藏在括号里。

   ⚠ 网格用**固定列数**而不是 auto-fit：
   auto-fit 会把最后一行的卡片拉伸铺满，客户有 5 个分组时第二行那 1 张会变成
   整行宽，和第一行完全对不齐。固定列数则每张卡永远一样宽，空位就让它空着。 */
.bv-ov-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 1199px) { .bv-ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .bv-ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 400px)  { .bv-ov-grid { grid-template-columns: 1fr; } }

.bv-ov-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--line, #E2E7EF);
	border-radius: var(--r-card, 12px);
	background-color: var(--surface, #FFFFFF);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bv-ov-item:hover {
	border-color: var(--line-strong, #CFD7E3);
	box-shadow: var(--sh-1, 0 1px 3px rgba(17,24,35,.06));
	transform: translateY(-1px);
}

.bv-ov-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bv-ov-title {
	font-size: 13px;
	color: var(--ink-3, #5E6B7C);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bv-ov-num {
	font-size: 26px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--ink-1, #111823);
	font-variant-numeric: tabular-nums;
}

.bv-ov-stat {
	font-size: 12px;
	color: var(--ink-3, #5E6B7C);
}

/* 图标块的底色/字色按分组语义走，四档都是配过对比度的组合（同 §23）。
   注意用的是 -700/-ink 档而不是 -500/-600，理由同 §12。 */
.bv-ov-ico {
	width: 42px;
	height: 42px;
	border-radius: var(--r-ctl, 8px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	flex: none;
}
.bv-ov--tech  .bv-ov-ico { background-color: var(--tech-50,  #EAF3FE); color: var(--tech-600, #1268C3); }
.bv-ov--brand .bv-ov-ico { background-color: var(--brand-50, #FFF4ED); color: var(--brand-700, #B84508); }
.bv-ov--ok    .bv-ov-ico { background-color: var(--ok-50,    #E9F7EF); color: var(--sk-ok-ink, #0F7A37); }
.bv-ov--warn  .bv-ov-ico { background-color: var(--warn-50,  #FDF3E2); color: var(--sk-warn-ink, #9A6108); }
.bv-ov--ink   .bv-ov-ico { background-color: var(--surface-sunk, #EFF2F7); color: var(--ink-2, #333F4E); }


/* ══ 27 · 合作计划 ════════════════════════════════════════════════════════

   四个等宽入口。前两个是真链接，后两个没有落地页，做成不可点的静态块：
   降低透明度不够——那只是「看起来禁用」，鼠标还是手型、还能 tab 到。
   这里干脆用 <div> 而不是 <a>，从结构上就点不了。 */
.bv-plan-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 991px) { .bv-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .bv-plan-grid { grid-template-columns: 1fr; } }

.bv-plan-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line, #E2E7EF);
	border-radius: var(--r-card, 12px);
	background-color: var(--surface, #FFFFFF);
	transition: border-color .15s ease, box-shadow .15s ease;
}
a.bv-plan-item:hover {
	border-color: var(--line-strong, #CFD7E3);
	box-shadow: var(--sh-1, 0 1px 3px rgba(17,24,35,.06));
}
a.bv-plan-item:hover .bv-plan-arrow {
	color: var(--skin-accent, #D9520A);
	transform: translateX(2px);
}

.bv-plan-ico {
	width: 34px;
	height: 34px;
	border-radius: var(--r-ctl, 8px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	flex: none;
}
.bv-plan-ico--tech  { background-color: var(--tech-50,  #EAF3FE); color: var(--tech-600, #1268C3); }
.bv-plan-ico--ok    { background-color: var(--ok-50,    #E9F7EF); color: var(--sk-ok-ink, #0F7A37); }
.bv-plan-ico--warn  { background-color: var(--warn-50,  #FDF3E2); color: var(--sk-warn-ink, #9A6108); }
.bv-plan-ico--brand { background-color: var(--brand-50, #FFF4ED); color: var(--brand-700, #B84508); }

.bv-plan-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	color: var(--ink-1, #111823);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bv-plan-arrow {
	font-size: 18px;
	/* 不用 --ink-4：白底只有 2.86。同 §22 的 .bv-todo-ico，
	   箭头虽然是装饰、语义由旁边的名称承担，但没理由留一个不达标的元素。 */
	color: var(--ink-3, #5E6B7C);
	flex: none;
	transition: color .15s ease, transform .15s ease;
}

/* 「敬请期待」用中性灰底，不用警示色——它不是问题，只是还没开。 */
.bv-plan-item--soon {
	background-color: var(--surface-2, #FAFBFD);
}
.bv-plan-soon {
	flex: none;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 999px;
	color: var(--ink-3, #5E6B7C);
	background-color: var(--surface-sunk, #EFF2F7);
	white-space: nowrap;
}
.bv-plan-item--soon .bv-plan-name {
	color: var(--ink-2, #333F4E);
}


/* ══ 28 · 🐛 侧栏收起时 logo 块比顶栏高 3.5px ═════════════════════════════

   实测（1600 宽，收起态）：
       #page-topbar        top=0     bottom=70    h=70
       .navbar-brand-box   top=-3.5  bottom=73.5  h=77.1   ← 上下各溢出 3.5px

   根因：收起后显示的是 `.logo-sm img`，`register.css:178` 给它 `height:48px`，
   加上 `.logo` 那个 <a> 自带的行高，整块撑到 77.1 > 顶栏的 70。
   `.navbar-header > .d-flex` 是 align-items:center，于是 (70-77.1)/2 = -3.55，
   深色块上下各露出一条。展开态不受影响，因为 header.tpl 的内联 <style> 只给
   `.logo-lg img` 限了 max-height:40px，漏了 logo-sm。

   修法：把 brand-box 的高度钉死成顶栏高度，内部 flex 居中、超出裁掉。
   不改 register.css 的 48px（那是 default 主题共用层）。
   ⚠ ≤992 时上游本来就把 brand-box 隐藏了（实测 w=0 h=0），
   这里的 height 不会把它撑出来——已在 992 / 390 两档实测确认。 */
.navbar-brand-box {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	overflow: hidden;
}

.navbar-brand-box .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

/* 70px 宽的收起态侧栏里，40px 见方的图标留 15px 呼吸位刚好。 */
.navbar-brand-box .logo-sm img {
	height: 40px;
	width: auto;
}


/* ══ 29 · 统一的格子网格：代办事项 / 已开通产品 ═══════════════════════════

   这两块都是 col-xl-12 全宽，但原来一个是 flex(justify-around)、一个是
   4 列 grid，格子宽度对不上，上下叠在一起看着像两套东西。
   统一成同一套列定义后，两块的格子严格等宽、左右边缘也对齐。

   列数按代办事项定：它固定 5 格，5 列时正好一行放下。
   已开通产品少于 5 个就空着右边——固定列宽本来就是为了让第二行也对齐（见 §26）。 */
.bv-cell-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 1199px) { .bv-cell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .bv-cell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 400px)  { .bv-cell-grid { grid-template-columns: 1fr; } }

/* §26 定的 4 列要让位给上面的 5 列（同特异度、本文件内后来者胜，
   但 §26 那几条带 media query，这里也得逐档覆盖，否则窄屏会回到 §26 的值）。 */
.bv-ov-grid.bv-cell-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .bv-ov-grid.bv-cell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .bv-ov-grid.bv-cell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { .bv-ov-grid.bv-cell-grid { grid-template-columns: 1fr; } }

/* 代办事项原来靠 flex 撑宽，改 grid 后每格要自己占满格子。 */
.bv-todo.bv-cell-grid > a {
	width: auto;
	min-width: 0;
}

/* 格子外观和「已开通产品」对齐：上游 `.zddbsx a` 是直角 + #eee 边框 + 10px 内边距，
   产品卡是 12px 圆角 + --line 边框 + 14/16 内边距，两块上下叠着，边角对不上很显眼。
   顺带把 hover 也接管了——上游 `.zddbsx a:hover` 还是厂商蓝 #0066ff，是换肤漏网的一处。 */
.zddbsx.bv-todo a {
	padding: 14px 12px;
	border: 1px solid var(--line, #E2E7EF);
	border-radius: var(--r-card, 12px);
	color: var(--ink-2, #333F4E);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zddbsx.bv-todo a:hover {
	border: 1px solid var(--line-strong, #CFD7E3);
	background: var(--surface, #FFFFFF);
	color: var(--ink-2, #333F4E);
	box-shadow: var(--sh-1, 0 1px 3px rgba(17,24,35,.06));
	transform: translateY(-1px);
}


/* ══ 30 · 财务信息卡：底部 6 条裸链接 → 带图标的胶囊 ═══════════════════════

   原来是 `d-flex justify-content-between` 平铺 6 条纯文字，字挨着字，
   「充值记录 / 消费记录 / 退款记录」三个只差一个字，扫一眼分不清；
   而且看不出是可点的。改成小胶囊，每个是明确的点击目标，两行铺开。 */
.bv-fin-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bv-fin-links a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	font-size: 13px;
	line-height: 1.2;
	border-radius: var(--r-ctl, 8px);
	color: var(--ink-2, #333F4E);
	background-color: var(--surface-2, #FAFBFD);
	border: 1px solid var(--line, #E2E7EF);
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.bv-fin-links a:hover,
.bv-fin-links a:focus {
	color: var(--brand-700, #B84508);
	border-color: var(--brand-100, #FFE3D0);
	background-color: var(--brand-50, #FFF4ED);
}

.bv-fin-links a i {
	font-size: 15px;
	line-height: 1;
	color: var(--ink-3, #5E6B7C);
	transition: color .15s ease;
}
.bv-fin-links a:hover i {
	color: var(--brand-700, #B84508);
}


/* ══ 31 · 合作计划和上面那一行拉开距离 ════════════════════════════════════
   上面是「资源列表 + 公告通知」的等高双卡，合作计划紧贴着会读成同一组。 */
.bv-plan-section {
	margin-top: 10px;
}


/* ══ 32 · 顶栏消息跑马灯 ══════════════════════════════════════════════════

   位置在「总览」和搜索框之间那块一直空着的区域。数据来自消息中心同一张表。

   ⚠ 滚动方向：文字**向左**移动（从右侧进入、左侧移出）。
   这是所有公告条的默认方向，因为中文横排是从左往右读的——如果反过来让文字
   向右跑，读者看到的是句子的**尾巴先进场**，一句话要倒着拼。要真改成反向，
   把 animation-direction 设成 reverse 即可，只有一行。 */
/* ⚠ 左右两组按钮必须禁止收缩，否则跑马灯一挤，右边「帮助/工单/消息/费用/购物车」
   的**文字会在按钮内部换行**（实测 1750/1600/1500 三档右侧那排从 70px 变 92px，
   1440 变 114px）。注意判据不是「元素换行」——它们的 top 一直相同，
   是每个按钮里的两个字被折成上下两行，只有量高度才看得出来。
   顺序是：右侧按钮先拿够宽度，跑马灯捡剩下的。 */
#page-topbar .navbar-header > .d-flex {
	flex: 0 0 auto;
}

.bv-ticker {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 520px;
	margin: 0 16px;
	padding: 0 14px;
	height: 34px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .07);
}

/* 顶栏是深墨蓝（§1），这里所有前景色都得是浅色，不能走 --ink-* */
.bv-ticker-ico {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	line-height: 1;
	/* ⚠ 这里必须写死一个「暗底专用」的亮橙，不能用 --brand-500。
	   顶栏是全站唯一的深色区，design-token 的浅色档是配白底的：
	   --brand-500 #F2610C 压在跑马灯底（#101A2E + 7% 白 ≈ #1F2939）上只有 3.78。
	   #FF9459 是 token 暗色块里给深底配的那档，实测 6.6 ✓。
	   同 §1：顶栏那几条前景色也是直接写 #fff，不走 token。 */
	color: #FF9459;
	flex: none;
}

.bv-ticker-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.bv-ticker-track {
	display: flex;
	align-items: center;
	gap: 36px;
	height: 100%;
	width: max-content;
	animation: bv-ticker-run 40s linear infinite;
}
/* 轨道里内容放了两遍，走到 -50% 正好是第二遍的开头，接回去看不出接缝 */
@keyframes bv-ticker-run {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 鼠标停上去暂停，否则想点的那条会跑掉 */
.bv-ticker:hover .bv-ticker-track {
	animation-play-state: paused;
}

.bv-ticker-item {
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, .82);   /* 在 #101A2E 上 12.1 ✓ */
	flex: none;
	transition: color .15s ease;
}
.bv-ticker-item:hover,
.bv-ticker-item:focus {
	color: #fff;
	text-decoration: underline;
}

/* 未读前面点一个小红点，和消息中心列表里那个是同一个约定 */
.bv-ticker-unread::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: 1px;
	/* 同上：--bad-500 #D92D20 是配白底的，压在跑马灯的深底上只有 2.52，
	   连非文本内容的 3:1 都不到。#F87171 是 token 暗色块给深底配的红，实测 4.91。 */
	background-color: #F87171;
}

.bv-ticker-more {
	font-size: 12px;
	line-height: 1;
	/* .6 是配旧的近黑顶栏的；底色提亮后掉到 4.4，提到 .72 才回到 4.5 以上。 */
	color: rgba(255, 255, 255, .72);
	flex: none;
	white-space: nowrap;
}
.bv-ticker-more:hover,
.bv-ticker-more:focus {
	color: #fff;
}

/* 顶栏右边那排（帮助/工单/消息/费用/购物车/语言/用户）优先级更高，
   宽度不够时先把跑马灯收掉，而不是让它把按钮挤换行。 */
/* 1500 以下剩余空间不足 300px，再显示就是一条细缝，不如收掉。
   实测 1550 还有 489px 可用、1500 起隐藏，两侧按钮全程保持单行。 */
@media (max-width: 1500px) {
	.bv-ticker { display: none; }
}

/* 有人把系统动效关了就别滚 */
@media (prefers-reduced-motion: reduce) {
	.bv-ticker-track { animation: none; }
}

.bv-ticker-modal .bv-msg-date {
	font-size: 12px;
	color: var(--ink-3, #5E6B7C);
	margin-bottom: 10px;
}


/* ══ 33 · 🐛 侧栏收起时看不出选中的是哪一项 ═══════════════════════════════

   实测（1600 宽，收起态）：选中的一级项背景是 #eff2f7，对白色侧栏底
   **对比度 1.12** —— 等于没有。17 个灰图标里只有一个是橙的，靠色相去认，
   扫一眼根本找不到。展开态本来是有一套的（浅橙底 + 橙字 + 左侧 3px 竖条，
   见本文件前面那节），但上游在 .vertical-collpsed 下把背景又改回中性灰了：

       body[data-sidebar="dark"].vertical-collpsed … li.mm-active .active

   这里把展开态那套原样接到收起态，两种状态视觉语言一致，切换时不会像换了套设计。
   竖条同样用 inset box-shadow 而不是 border-left —— border 会改盒模型，
   70px 宽的轨道里挪 3px，图标就不居中了。

   竖条颜色用 --brand-500 (#F2610C)：白底 3.23，刚好过「非文本内容」3.0 的线。
   浅橙底本身只有 1.06，指望它做选中信号是不够的，真正起作用的是竖条 + 橙图标。 */

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.mm-active > a,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.mm-active > a.active,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active {
	background-color: var(--brand-50, #FFF4ED) !important;
	box-shadow: inset 3px 0 0 var(--brand-500, #F2610C);
	color: var(--brand-700, #B84508) !important;
}

/* 图标要跟着变橙。收起态下图标就是唯一的文字信息，漏掉这条会留下白图标浮在浅橙底上
   —— 和展开态那节记的是同一个坑（.mm-active .active i 那条必须显式覆盖）。 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.mm-active > a i,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu ul li.mm-active .active i {
	color: var(--brand-700, #B84508) !important;
}

/* 收起态展开的二级浮层里，当前项也标出来（浮层是 hover 才出现的，
   进去之后如果不标，用户不知道自己现在在哪一条）。 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a.active {
	color: var(--brand-700, #B84508) !important;
	background-color: var(--brand-50, #FFF4ED);
}