/* ============================================================================
   会员中心换肤覆盖层（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);
}

/* 菜单路径状态：.mm-active 只用于展开父级，只有当前链接 .active 着色。 */
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active > a:not(.active),
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active > a:not(.active) i {
	background-color:transparent !important;
	color:var(--ink-3, #5E6B7C) !important;
	box-shadow:none !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active > a.active,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active .active {
	background-color:#F5F8FC !important;
	color:#41658F !important;
	box-shadow:none !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active > a.active i,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active .active i {
	color:#41658F !important;
}

/* 云资源拓扑流动反馈：根节点发出流光，沿圆角虚线分流到四个资源域。 */
@media (min-width:768px) {
	.bv2-cloud-root::before {
		content:""; position:absolute; inset:-5px; z-index:-1;
		border:1px solid rgba(55,137,231,.34); border-radius:11px; opacity:0;
		animation:bv2-cloud-root-pulse 5.2s cubic-bezier(.22,.61,.36,1) infinite;
	}
	.bv2-cloud-connectors .bv2-cloud-line {
		fill:none; stroke:#A9C3E1; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
		stroke-dasharray:5 5; vector-effect:non-scaling-stroke;
	}
	.bv2-cloud-connectors .bv2-cloud-flow {
		fill:none; stroke:#2584ED; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round;
		stroke-dasharray:7 93; stroke-dashoffset:7; filter:drop-shadow(0 0 3px rgba(37,132,237,.5));
		vector-effect:non-scaling-stroke; animation:bv2-cloud-flow 5.2s cubic-bezier(.4,0,.2,1) infinite;
	}
	.bv2-cloud-flow--2 { animation-delay:.13s; }
	.bv2-cloud-flow--3 { animation-delay:.26s; }
	.bv2-cloud-flow--4 { animation-delay:.39s; }
	.bv2-cloud-domain { animation:bv2-cloud-card-arrive 5.2s ease-out infinite; }
	.bv2-cloud-domain:nth-child(2) { animation-delay:.13s; }
	.bv2-cloud-domain:nth-child(3) { animation-delay:.26s; }
	.bv2-cloud-domain:nth-child(4) { animation-delay:.39s; }
	.bv2-cloud-domain::after { animation:bv2-cloud-node-arrive 5.2s ease-out infinite; }
	.bv2-cloud-domain:nth-child(2)::after { animation-delay:.13s; }
	.bv2-cloud-domain:nth-child(3)::after { animation-delay:.26s; }
	.bv2-cloud-domain:nth-child(4)::after { animation-delay:.39s; }
}
@keyframes bv2-cloud-root-pulse {
	0%,7%,100% { opacity:0; transform:scale(.97); }
	12% { opacity:.8; transform:scale(1); }
	22% { opacity:0; transform:scale(1.055); }
}
@keyframes bv2-cloud-flow {
	0%,8% { stroke-dashoffset:7; opacity:0; }
	12% { opacity:1; }
	42% { stroke-dashoffset:-93; opacity:1; }
	48%,100% { stroke-dashoffset:-93; opacity:0; }
}
@keyframes bv2-cloud-node-arrive {
	0%,36%,100% { box-shadow:0 0 0 1px #91B5DE; transform:translateX(-50%) scale(1); }
	43% { box-shadow:0 0 0 1px #71A9E8,0 0 0 6px rgba(37,132,237,.14),0 0 12px rgba(37,132,237,.46); transform:translateX(-50%) scale(1.18); }
	53% { box-shadow:0 0 0 1px #91B5DE; transform:translateX(-50%) scale(1); }
}
@keyframes bv2-cloud-card-arrive {
	0%,38%,100% { border-color:#E3EAF3; box-shadow:none; transform:translateY(0); }
	45% { border-color:#A9CFF7; box-shadow:0 8px 20px rgba(37,112,191,.1); transform:translateY(-2px); }
	57% { border-color:#E3EAF3; box-shadow:none; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
	.bv2-cloud-root::before,
	.bv2-cloud-connectors .bv2-cloud-flow,
	.bv2-cloud-domain,
	.bv2-cloud-domain::after { animation:none !important; }
}

/* 侧栏 hover 统一为冷蓝灰反馈。此前早期规则仍引用 brand 橙色变量，
   在展开、收起浮层和二级菜单之间表现不一致。选中态规则保持独立。 */
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover,
body.bv-clientarea-shell[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(.bv-fly):hover > a,
body.bv-clientarea-shell[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(.bv-fly):hover > a i,
body.bv-clientarea-shell[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > ul a:hover {
	background-color:#F1F6FB !important;
	color:#41658F !important;
}

/* ══ 顶栏搜索：单输入框结构 ═══════════════════════════════════════════════
   header.tpl 已移除旧的 button > input 与下拉层第二个 input。这里使用普通
   search 表单和独立建议面板，不再依赖 Bootstrap Popper 或 top:-51px 补位。 */
.bv-header-search {
	position:relative;
	display:inline-flex;
	align-items:center;
	width:191px;
	height:var(--header-h, 60px);
}
.bv-header-search-form { position:relative; width:100%; margin:0; }
.bv-header-search .bv-header-search-input {
	display:block;
	box-sizing:border-box;
	width:100% !important;
	height:34px;
	padding:0 39px 0 13px;
	border-radius:999px;
	font-size:12px;
	line-height:34px;
	-webkit-appearance:none;
	appearance:none;
}
.bv-header-search-submit {
	position:absolute;
	top:0;
	right:0;
	dis:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:34px;
	padding:0;
	border:0;
	border-radius:0 999px 999px 0;
	background:transparent;
	color:rgba(255,255,255,.86);
	font-size:18px;
	cursor:pointer;
}
.bv-header-search-submit:hover,
.bv-header-search-submit:focus { color:#fff; outline:0; }
.bv-header-search-panel {
	position:absolute;
	top:calc(100% - 1px);
	right:0;
	z-index:1080;
	box-sizing:border-box;
	width:100%;
	padding:0;
	border-radius:0 0 12px 12px;
	background:#fff;
	box-shadow:0 0 0 1px var(--line, #E2E7EF), 0 12px 32px rgba(17,24,35,.14);
}
.bv-header-search-panel[hidden] { display:none !important; }
.bv-header-search.is-open .bv-header-search-input {
	border-color:rgba(255,255,255,.4);
	background:#3A4A66;
}
.bv-header-search.is-open .header-search-droplist { animation:bvSearchDropIn 150ms var(--ease, ease) both; }
@media (prefers-reduced-motion:reduce) {
	.bv-header-search.is-open .header-search-droplist { animation:none; }
}

/* 客户端下载二维码：桌面悬浮、移动端点击。保持弹层脱离顶栏 flex 布局，
   避免二维码内容撑高左侧控件并把汉堡按钮推出可视区。 */
#page-topbar .bv-client-btn .fa-desktop { font-size:12px; }
@media (min-width:992px) { #page-topbar .bv-client-btn { font-size:12px !important; } }
.bv-client-menu { position:relative; display:inline-flex; align-items:center; }
.bv-client-pop {
	position:absolute; top:100%; left:0; margin-top:8px; padding:16px;
	background:#fff; border-radius:14px; box-shadow:0 14px 40px rgba(20,30,60,.20);
	z-index:1080; opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .16s ease, transform .16s ease; pointer-events:none;
}
.bv-client-menu:hover > .bv-client-pop,
.bv-client-menu:focus-within > .bv-client-pop,
.bv-client-menu.bv-open > .bv-client-pop {
	opacity:1; visibility:visible; transform:translateY(4px); pointer-events:auto;
}
.bv-client-pop-inner { display:flex; flex-wrap:nowrap; gap:18px; }
.bv-qr { text-align:center; }
.bv-qr img { width:122px; height:122px; display:block; border-radius:10px; border:1px solid #eef0f4; background:#fff; object-fit:contain; }
.bv-qr span { display:block; margin-top:9px; font-size:13px; color:#5a6474; font-weight:500; }
.bv-client-pop::before { content:""; position:absolute; top:-6px; left:26px; width:12px; height:12px; background:#fff; transform:rotate(45deg); box-shadow:-3px -3px 6px rgba(20,30,60,.05); }
@media (max-width:420px) {
	.bv-client-pop { padding:13px; }
	.bv-client-pop-inner { gap:12px; }
	.bv-qr img { width:100px; height:100px; }
	.bv-qr span { font-size:12px; margin-top:6px; }
}

/* 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);
}

/* ---- tab 条上下两条横线看着像重复（用户 2026-08-23 反馈）----
   实测这一带有两条【粗细、颜色、宽度全不一样】的横线夹着 tab 文字：

     上：.card 的 border-top   1px #E2E7EF，宽 1162（整卡），离 tab 文字只有 20px
     下：ul.nav-tabs 自己的    2px #F6F6F6，宽 1120（比卡片窄 42px，两头悬空）

   #F6F6F6 是厂商留下的近白色，跟全站统一的 1px --line(#E2E7EF) 不是一套；
   2px 又比别处都粗；宽度还比卡片短一截。所以它读起来是"又画了一条线"，
   而不是"tab 的基线"。

   治法两条：
     1) 统一成 1px var(--line)，跟卡片边框、表格分隔线同一套；
     2) 左右各出血 20px（= .card-body 的内边距，实测 1440/768/390 三档都是 20px），
        让它铺满卡片宽度 —— 这样它读作"卡片头部分隔线"，跟上面的卡片边框
        构成上下边界，而不是两条互相打架的短线。

   活动 tab 的橙色指示条是 ::after{bottom:-1px;height:2px}，改成 1px 后
   它正好盖住这条 1px 灰线再多出 1px —— 2px 橙条压在 1px 灰轨上，是想要的效果。 */
.nav-tabs-custom {
	border-bottom: 1px solid var(--line, #E2E7EF);
}
/* 出血给外层包裹（.bv-sd-tabwrap 由 servicedetail 的 JS 加），
   ul 自己保持在包裹内 100% 宽 → 边框自然铺满；padding 把首个 tab 推回内容对齐线。
   ⚠ 不能把负 margin 直接加在 ul 上：手机端 ul 是横滑容器，
     负 margin + padding 会让右侧渐变提示（.bv-sd-tabwrap::after，定位基准是包裹）错位。 */
.card-body > .bv-sd-tabwrap {
	margin-left: -20px;
	margin-right: -20px;
}
.card-body > .bv-sd-tabwrap > .nav-tabs-custom,
.card-body > .nav-tabs-custom {
	padding-left: 20px;
	padding-right: 20px;
}
.card-body > .nav-tabs-custom {
	margin-left: -20px;
	margin-right: -20px;
}
.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); }
/* 顶栏那个假框在 header.tpl 里加了 readonly（原因见那边的注释）。
   浏览器给 readonly input 的默认光标是文本 I 形，会让人以为能往里打字，
   可它的职责只有「点我展开面板」。给手型。 */
.zdy-ss[readonly] { cursor: pointer; }
#page-header-search-dropdown { cursor: pointer; }
/* ⚠ 原来这条写的是 `.form-control.zdy-ss:focus` —— **永远匹配不上**：
   顶栏那两个 input 的 class 只有 `zdy-ss` / `zdy-ss zdy-tcss`，
   压根没有 `form-control`。所以聚焦态一直是**浏览器默认焦点环**
   （Chrome 的蓝紫色 outline: auto），跟站点橙毫无关系，
   而且那圈 outline 是直角的，套在 100px 圆角的胶囊上非常难看。
   改成挂在 .zdy-ss 上，并且把默认 outline 显式关掉。

   ⚠ `outline: none` 不能删 —— 一删浏览器默认那圈蓝紫焦点环就回来了，
   直角框套在 100px 圆角的胶囊上，正是当初要修的东西。

   聚焦反馈只保留「底色提亮一档 + 边框白一点」，**不加任何橙色**：
   用户明确要求去掉橙色选中框。这两个值就是厂商原本写在
   `.form-control.zdy-ss:focus` 里的意图（那条选择器匹配不上，从没生效过）。
   ⚠ 代价要记一笔：#313E56 → #3A4A66 的明度差只有约 1.15，
   键盘 Tab 过来时的焦点提示很弱，不满足 WCAG 2.4.7 的可见焦点。
   这是用户在看过橙色方案之后做的取舍，不是疏忽。 */
.zdy-ss:focus,
.zdy-ss:focus-visible,
.form-control.zdy-ss:focus {
	background-color: #3A4A66;
	border-color: rgba(255, 255, 255, .4);
	box-shadow: none;
	outline: none;
	/* ⚠ 这条 border-radius 不是多余的。_shared/design-token.css 里有一条全局
	     :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px;
	                      border-radius: 2px; }
	   它和 `.zdy-ss` 的特异度打平（都是 0,1,0），但排在后面，所以聚焦时赢。
	   而文本框只要被点击就必然匹配 :focus-visible —— 结果就是**一点搜索框，
	   100px 的胶囊立刻塌成 2px 圆角的长条**。
	   这里用 `.zdy-ss:focus-visible`（0,2,0）压回去。
	   那条全局规则本身是对的（给全站键盘焦点用），不去动 design-token.css
	   ——那个文件是官网/会员中心共享的，线上还多一段 BH-THEME-VARS 块。
	   上面的 `outline: none` 同理，压的也是它那圈橙色 outline。 */
	border-radius: 100px;
	color: #fff;
}

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

   ⚠ 这条只在 .dropdown.show 时生效 —— 属于**交互态**，
   默认状态的色值扫描抓不到它，是点开搜索框才发现的。 */
.navbar-header .dropdown.show .header-item {
	background-color: rgba(255, 255, 255, .08);
}
/* ⚠ 搜索框除外。它的 .header-item 是个 191x70 的 <button>，里面只嵌着一个
   32px 高的胶囊输入框，所以这层底铺出来是一整块**直角矩形**罩在圆角胶囊
   后面（实测展开时像素从 144,156,177 变成 152,163,183），看着像输入框
   背后多了个框。其它下拉的 .header-item 就是图标本身，铺底是贴合的。
   搜索框展开的反馈已经由输入框自己的橙色焦点环给足了，这层纯属多余。
   ⚠ 只排除搜索框，不删整条规则 —— 顶栏右上角「个人信息」那个下拉也吃
   这条，它需要展开态高亮。 */
.navbar-header .dropdown.show #page-header-search-dropdown.header-item {
	background-color: transparent;
}

/* 首页「个人认证 / 设置密保 / 绑定手机 / 绑定邮箱」四个链接，原 #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 把它
   拽到图标右上角，结果反而和官网不一致了 —— 用户要的就是「跟首页一样」。
   改这里之前先去看一眼官网长什么样。 */
/* 2026-08-24 追加：「工单」「费用」两个角标复用同一套形状 —— .bv-top-badge。
   工单角标 = 已回复未关闭（status=2）的工单数；费用角标 = 待支付账单数。
   取数在 app/zdsju.php 的 bv_ticket_replied() / bv_unpaid_invoices()。

   ⚠ 同样不能用厂商的 .badge-danger（见上面那段）：§12 把它改成了浅红底深红字，
     在深墨蓝顶栏上是一块浅粉斑。这里跟购物车角标一样走 #e41e2c 实心红。

   ⚠ 定位上下文同样是外层 div.dropdown，所以 right:0 落在「工单」「费用」
     文字的右上角，和购物车角标一致 —— 三个角标在一条水平线上。 */
.noti-icon .badge.bv-cart-count,
.noti-icon .badge.bv-top-badge {
	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); }

/* 「N 台在用」换成按产品状态分档的明细（模板里服务端直出，零请求）。
   档位不是我定的，是魔方自己那套 domainstatus 译名（已激活/已暂停/待开通…），
   证书分组另有一套（已签发/未使用/已过期），见 app/zdsju.php bv_status_map()。

   小圆点用 background: currentColor，颜色只在 .bv-ov-st--* 上设一次，
   点和文字永远同色，不会出现「绿点配灰字」。

   三档颜色沿用 §12 那组 --sk-*-ink：它们是配过对比度的**浅底深字**档，
   直接拿 --ok-500 / --warn-500 / --bad-500 会掉到 3 以下（§12 记过一次，别再犯）。

   gap 写成 `2px 10px`：横向 10px 分开各档，纵向 2px 是给窄屏换行留的行距。
   卡片高度不用管——网格项默认 stretch，同一行的卡片会一起长高。 */
.bv-ov-stat--split {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
}
.bv-ov-st {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.bv-ov-st > i {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.bv-ov-st--ok   { color: var(--sk-ok-ink,   #0F7A37); }
.bv-ov-st--warn { color: var(--sk-warn-ink, #9A6108); }
.bv-ov-st--bad  { color: var(--sk-bad-ink,  #B02318); }
/* 被取消 / 被删除 / 已过期：是事实不是警示，不该抢眼。 */
.bv-ov-st--mute { color: var(--ink-3,      #5E6B7C); }

/* 有异常/将到期的那张卡描一道边——不填底色：五张卡里有一张变红底会像是
   报错弹窗，而这只是「有台机器该续费了」，提示到位就够了。

   写死颜色不是偷懒：design-token.css 的 bad / warn 档只有 -50 和 -500 两级，
   没有 -200 这种描边用的中间色，var(--bad-200, …) 会 100% 走回落值，
   写成 token 的样子只会骗人。两个值都是对应 -500 掺白到 --line 的亮度层级。 */
.bv-ov-item--bad        { border-color: #F0BDB8; }
.bv-ov-item--bad:hover  { border-color: var(--sk-bad-ink, #B02318); }
.bv-ov-item--soon       { border-color: #EFD3A4; }
.bv-ov-item--soon:hover { border-color: var(--sk-warn-ink, #9A6108); }


/* ══ 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; } }
/* 代办事项(.bv-todo)在极窄屏(≤400px)不塌成 1 列——用户要每行 2 个。
   共用的 .bv-cell-grid 上面 ≤400 是 1fr；这里 .zddbsx.bv-todo.bv-cell-grid (0,3,0)
   高特异度只把代办这块恢复 2 列,不动别的用同套网格的块。 */
@media (max-width: 400px)  { .zddbsx.bv-todo.bv-cell-grid { grid-template-columns: repeat(2, minmax(0, 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-label {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255,255,255,.78);
}

.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;
}

/* ══ 35 · 用户中心 V2：任务优先工作台 ═══════════════════════════════════
   只作用于 /clientarea 首页。其它账单、产品详情和表单页继续沿用稳定版结构，
   避免一次换肤碰到业务表单。选定方向是「浅色工作台 + 左侧分组导航」，并保留
   魔方原来的模板变量、链接、分页和消息已读接口。 */
body.bv-clientarea-v2 {
	background: #F3F7FC;
	color: #15233D;
}

body.bv-clientarea-v2 #page-topbar {
	background: var(--nav-bg-1, #131E33);
	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,.08), 0 8px 28px rgba(23,35,58,.12);
}
body.bv-clientarea-v2 .navbar-brand-box {
	background: transparent !important;
	border-right: 0;
}
body.bv-clientarea-v2 .navbar-brand-box .logo-light { display: flex !important; }
body.bv-clientarea-v2 .navbar-brand-box .logo-dark { display: none !important; }
.bv2-brand-logo { display:none; }
body.bv-clientarea-v2 .bv2-brand-logo { display:none; }
body.bv-clientarea-v2 .bv2-brand-logo img { display:block; max-width:145px; max-height:42px; width:auto; height:auto; object-fit:contain; }
body.bv-clientarea-v2 #page-topbar .header-item,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex > a,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex > a:hover,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex > a:focus {
	color: #fff;
}
body.bv-clientarea-v2 #page-topbar .header-item { height:60px; margin-top:0; }
body.bv-clientarea-v2 #page-topbar .bx-cart-alt { font-size:18px; line-height:1; vertical-align:middle; }
body.bv-clientarea-v2 #vertical-menu-btn { position:relative; }
body.bv-clientarea-v2 #vertical-menu-btn::after { display:none; content:none; }
body.bv-clientarea-v2 #page-topbar .header-item:hover {
	background: rgba(255,255,255,.09);
	color: #fff;
}
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child a,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child button,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child i,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child span {
	color:#fff !important;
}
body.bv-clientarea-v2 #page-topbar .bv-client-btn {
	border-left: 0;
}

/* 跑马灯占用参考图中央搜索条的位置。文字仍来自 system_message，点击逻辑不改。 */
body.bv-clientarea-v2 .bv-ticker {
	display: flex;
	max-width: 390px;
	height: 38px;
	margin: 0 auto;
	padding: 0 12px;
	gap: 8px;
	background: #F2F6FC;
	border: 1px solid #E1E9F4;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
body.bv-clientarea-v2 .bv-ticker-ico {
	color: #1A7FE0;
	font-size: 17px;
}
body.bv-clientarea-v2 .bv-ticker-label {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: #345174;
	white-space: nowrap;
}
body.bv-clientarea-v2 .bv-ticker-label::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 12px;
	margin-left: 8px;
	vertical-align: -2px;
	background: #CAD6E6;
}
body.bv-clientarea-v2 .bv-ticker-item {
	color: #4A607F;
	font-size: 12px;
}
body.bv-clientarea-v2 .bv-ticker-item:hover,
body.bv-clientarea-v2 .bv-ticker-item:focus,
body.bv-clientarea-v2 .bv-ticker-more:hover,
body.bv-clientarea-v2 .bv-ticker-more:focus { color: #1268C3; }
body.bv-clientarea-v2 .bv-ticker-more {
	color: #1A7FE0;
	font-weight: 600;
}
body.bv-clientarea-v2 .bv-ticker-unread::before { background: #F2610C; }

/* 左侧导航改成轻量工作台，不改变 Nav 的循环和层级。 */
body.bv-clientarea-v2 .vertical-menu {
	background: var(--surface, #fff);
	border-right: 1px solid var(--line, #E2E7EF);
	box-shadow: 8px 0 28px rgba(42, 65, 105, .035);
}
body.bv-clientarea-v2 #sidebar-menu { padding: 12px 10px 24px; }
body.bv-clientarea-v2 #sidebar-menu ul li a {
	min-height: 44px;
	padding: 10px 14px;
	border-radius: 9px;
	color: var(--ink-2, #333F4E);
	font-size: 14px;
}
body.bv-clientarea-v2 #sidebar-menu ul li a i {
	color: var(--ink-3, #5E6B7C);
	font-size: 18px;
}
body.bv-clientarea-v2 #sidebar-menu ul li a:hover,
body.bv-clientarea-v2 #sidebar-menu ul li a:hover i {
	background: var(--brand-50, #FFF4ED);
	color: var(--skin-accent-deep, var(--brand-700, #B84508));
}
body.bv-clientarea-v2[data-sidebar="dark"] .mm-active > a,
body.bv-clientarea-v2[data-sidebar="dark"] .mm-active .active {
	background: var(--brand-50, #FFF4ED);
	box-shadow: inset 3px 0 0 var(--brand-500, #F2610C);
	color: var(--skin-accent-deep, var(--brand-700, #B84508)) !important;
}
body.bv-clientarea-v2[data-sidebar="dark"] .mm-active > a i,
body.bv-clientarea-v2[data-sidebar="dark"] .mm-active .active i {
	color: var(--skin-accent-deep, var(--brand-700, #B84508)) !important;
}
body.bv-clientarea-v2 #sidebar-menu ul li ul.sub-menu li a {
	padding-left: 43px;
	font-size: 13px;
	min-height: 38px;
}

body.bv-clientarea-v2 .page-content {
	padding-top: 92px;
	background: #F3F7FC;
}
body.bv-clientarea-v2 .page-content > .container-fluid {
	max-width: 1720px;
	padding: 0 22px 28px;
}
body.bv-clientarea-v2 .page-content > .container-fluid > .row {
	margin-left: -7px;
	margin-right: -7px;
}
body.bv-clientarea-v2 .page-content > .container-fluid > .row > section {
	padding-left: 7px;
	padding-right: 7px;
}
body.bv-clientarea-v2 .card {
	border: 1px solid #E1E8F2;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(42, 65, 105, .05);
	background: rgba(255,255,255,.96);
}
body.bv-clientarea-v2 .card-body { padding: 20px; }
body.bv-clientarea-v2 .card-title {
	font-size: 16px;
	font-weight: 650;
	color: #13243E;
}

/* 首排三块共用一张淡蓝工作台底图，视觉上连成参考图的欢迎区。 */
body.bv-clientarea-v2 .page-content > .container-fluid > .row > section:nth-child(-n+3) .card {
	min-height: 286px;
	background-color: rgba(255,255,255,.94);
	background-image: url('/themes/clientarea/baiduvps/assets_custom/img/new-background.jpg');
	background-size: cover;
	background-position: center 62%;
	background-blend-mode: screen;
}
body.bv-clientarea-v2 .page-content > .container-fluid > .row > section:first-child .card {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
body.bv-clientarea-v2 .page-content > .container-fluid > .row > section:nth-child(2) .card {
	border-radius: 8px;
}
body.bv-clientarea-v2 .page-content > .container-fluid > .row > section:nth-child(3) .card {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
body.bv-clientarea-v2 .user-center_h300 { height: auto; }
body.bv-clientarea-v2 .user-center_header {
	background: #EAF3FF;
	color: #1268C3;
	box-shadow: inset 0 0 0 1px #D6E7FA;
}
body.bv-clientarea-v2 .user-center_name a { color: #11284A; font-weight: 650; }
body.bv-clientarea-v2 .zdyhz { border-radius: 999px; }
body.bv-clientarea-v2 .zduserlj a,
body.bv-clientarea-v2 .bv-fin-links a {
	border: 1px solid #DCE5F0;
	background: rgba(255,255,255,.76);
	border-radius: 8px;
}
body.bv-clientarea-v2 .zduserlj a:hover,
body.bv-clientarea-v2 .bv-fin-links a:hover {
	border-color: #A9CCF4;
	background: #EEF6FF;
}
body.bv-clientarea-v2 .zdcwxx .fz-14,
body.bv-clientarea-v2 .bv-trend-num { color: #F2610C; }
body.bv-clientarea-v2 .zdcc .btn-primary {
	border-radius: 8px;
	box-shadow: 0 7px 18px rgba(242,97,12,.16);
}

/* 任务和资源两块成为第二行主工作区。 */
body.bv-clientarea-v2 .bv-todo a,
body.bv-clientarea-v2 .bv-ov-item {
	border: 1px solid #E1E8F2;
	border-radius: 11px;
	background: #fff;
	box-shadow: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.bv-clientarea-v2 .bv-todo a:hover,
body.bv-clientarea-v2 .bv-ov-item:hover {
	transform: translateY(-2px);
	border-color: #B7D4F5;
	box-shadow: 0 8px 18px rgba(42, 87, 145, .08);
}
body.bv-clientarea-v2 .bv-todo-ico,
body.bv-clientarea-v2 .bv-ov-ico { background: #EEF6FF; color: #1A7FE0; }
body.bv-clientarea-v2 .bv-todo-alert .bv-todo-ico { background: #FFF1E8; color: #F2610C; }
body.bv-clientarea-v2 .bv-cell-grid { gap: 10px; }

body.bv-clientarea-v2 #bv-resources .card,
body.bv-clientarea-v2 #bv-resources + section .card { min-height: 520px; }
body.bv-clientarea-v2 table { color: #3E526E; }
body.bv-clientarea-v2 thead th {
	background: #F5F8FC;
	color: #526680;
	font-size: 12px;
	font-weight: 600;
	border-bottom: 1px solid #E1E8F2;
}
body.bv-clientarea-v2 tbody td { border-color: #EDF1F6; }
body.bv-clientarea-v2 .bv-notice-link {
	border-radius: 8px;
	padding: 9px 8px;
}
body.bv-clientarea-v2 .bv-notice-link:hover { background: #F5F8FC; }

@media (max-width: 1500px) {
	body.bv-clientarea-v2 .bv-ticker { display: flex; max-width: 300px; }
	body.bv-clientarea-v2 .bv-ticker-label { display: none; }
}
@media (max-width: 1260px) {
	body.bv-clientarea-v2 .bv-ticker { display: none; }
	body.bv-clientarea-v2 .page-content > .container-fluid > .row > section:nth-child(-n+3) .card {
		border-radius: 14px;
	}
}
@media (max-width: 991.98px) {
	body.bv-clientarea-v2 .page-content { padding-top: 78px; }
	body.bv-clientarea-v2 .page-content > .container-fluid { padding: 0 12px 22px; }
	body.bv-clientarea-v2 .vertical-menu { box-shadow: 18px 0 40px rgba(23,42,73,.14); }
}
@media (max-width: 767.98px) {
	body.bv-clientarea-v2 .card { border-radius: 12px; }
	body.bv-clientarea-v2 .card-body { padding: 16px; }
	body.bv-clientarea-v2 .page-content > .container-fluid > .row > section:nth-child(-n+3) .card {
		min-height: 0;
		background-position: center;
	}
	body.bv-clientarea-v2 .bv-cell-grid { grid-template-columns: 1fr 1fr; }
	body.bv-clientarea-v2 #bv-resources .card,
	body.bv-clientarea-v2 #bv-resources + section .card { min-height: 0; }
}

/* ══ 36 · 用户中心 V2 完整布局 ══════════════════════════════════════════ */
body.bv-clientarea-v2 { font-family: "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
@media (min-width: 992px) {
	body.bv-clientarea-v2 .navbar-brand-box { width:180px; height:60px; }
	body.bv-clientarea-v2 .navbar-header { margin-left:0; height:60px; }
	body.bv-clientarea-v2 .vertical-menu { width: 180px; top: 60px; }
	body.bv-clientarea-v2 .main-content { margin-left: 180px; }
	body.bv-clientarea-v2 #page-topbar { height: 60px; }
	body.bv-clientarea-v2 .navbar-brand-box .logo { line-height: 60px; }
	body.bv-clientarea-v2.vertical-collpsed .navbar-brand-box { width:70px; }
	body.bv-clientarea-v2.vertical-collpsed .navbar-header { margin-left:0; }
	body.bv-clientarea-v2.vertical-collpsed .main-content { margin-left:70px; }
	body.bv-clientarea-v2.vertical-collpsed .bv2-brand-logo { display:none; }
	body.bv-clientarea-v2.vertical-collpsed .navbar-brand-box .logo-dark { display:none !important; }
	body.bv-clientarea-v2.vertical-collpsed .navbar-brand-box .logo-light { display:flex !important; }
	body.bv-clientarea-v2.vertical-collpsed #sidebar-menu { padding:12px 0 24px; }
	body.bv-clientarea-v2.vertical-collpsed #sidebar-menu > ul > li > a {
		display:flex; align-items:center; justify-content:center; width:70px !important;
		min-height:48px; margin:0; padding:10px 0 !important; border-radius:0;
	}
	body.bv-clientarea-v2.vertical-collpsed #sidebar-menu > ul > li > a i {
		width:auto !important; min-width:0; margin:0 !important; line-height:24px;
	}
}
body.bv-clientarea-v2 .page-content { padding-top: 78px; }
body.bv-clientarea-v2 .page-content > .container-fluid { max-width: none; padding: 0 18px 20px; }
body.bv-clientarea-v2 .page-content > .container-fluid > .row { display: block; margin: 0; }
body.bv-clientarea-v2 .bv2-dashboard { width: 100%; }

.bv2-hero {
	display: grid;
	grid-template-columns: minmax(330px, 1.3fr) minmax(235px, .72fr) minmax(430px, 1.2fr);
	align-items: center;
	min-height: 164px;
	padding: 22px 24px;
	border: 1px solid #DCE7F4;
	border-radius: 14px;
	background-color: #EAF4FF;
	background-image: url('/themes/clientarea/baiduvps/assets_custom/img/clientarea-v2-hero.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: 0 8px 24px rgba(34, 77, 130, .06);
}
.bv2-profile { display: flex; align-items: center; min-width: 0; }
.bv2-avatar { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 74px; margin-right: 18px; background: rgba(255,255,255,.78); border: 2px solid #fff; box-shadow: 0 8px 22px rgba(47,110,190,.13); color: #207DE1; font-size: 38px; overflow: hidden; }
.bv2-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bv2-profile-copy { min-width: 0; }
.bv2-kicker { display: none; }
.bv2-profile h1 { margin: 0 0 3px; font-size: 22px; line-height: 1.35; color: #102542; font-weight: 700; }
.bv2-welcome { margin: 0 0 10px; color: #49617F; font-size: 13px; }
.bv2-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.bv2-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 550; }
.bv2-badge--ok { color: #087A4B; background: #E7F8EF; border: 1px solid #BDEBD1; }
.bv2-badge--safe { color: #237A50; background: #EDF9F2; border: 1px solid #C8EAD7; }
.bv2-detail-link { display: inline-flex; align-items: center; color: #1672D3; font-size: 12px; white-space: nowrap; }

.bv2-balance { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; min-height: 104px; padding: 0 22px; border-left: 1px solid rgba(135,166,206,.28); border-right: 1px solid rgba(135,166,206,.28); }
.bv2-balance-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #E6F6ED; color: #16915A; font-size: 24px; }
.bv2-balance .bv2-label { display: block; color: #556A86; font-size: 12px; }
.bv2-balance strong { display: block; margin: 2px 0 4px; color: #F2610C; font-size: 25px; line-height: 1; letter-spacing: -.5px; }
.bv2-balance-copy { min-width:0; }
.bv2-credit-limit { display:flex; align-items:center; gap:6px; max-width:245px; margin-top:5px; padding-top:5px; border-top:1px solid rgba(130,154,185,.22); color:#4C6280; font-size:10px; line-height:1.2; white-space:nowrap; }
.bv2-credit-limit span { color:#405875; }
.bv2-credit-limit b { color:#1672D3; font-size:11px; font-weight:700; }
.bv2-credit-limit em { overflow:hidden; color:#8493A7; font-style:normal; text-overflow:ellipsis; }
.bv2-credit-limit > i { margin-left:auto; color:#7F94AE; font-size:13px; }
.bv2-credit-limit:hover { color:#1268C3; }
.bv2-recharge { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 34px; padding: 0 16px; border-radius: 7px; background: #F2610C; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 6px 14px rgba(242,97,12,.18); }
.bv2-recharge:hover { color:#fff; background:#D9520A; }

.bv2-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(86px,1fr)); gap: 10px; padding-left: 20px; }
.bv2-shortcuts > a { display: flex; min-height: 104px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(213,226,241,.9); border-radius: 10px; background: rgba(255,255,255,.82); color: #142744; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.bv2-shortcuts > a:hover { transform: translateY(-2px); color: #1268C3; border-color: #B8D4F3; box-shadow: 0 10px 20px rgba(39,88,149,.09); }
.bv2-shortcut-icon { display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:7px; border-radius:10px; background:#EAF3FF; color:#1677E8; font-size:21px; }
.bv2-shortcut--warm .bv2-shortcut-icon { background:#FFF0E7; color:#F2610C; }
.bv2-shortcuts b { font-size:13px; font-weight:650; }
.bv2-shortcuts small { margin-top:2px; color:#8796AA; font-size:11px; }

.bv2-main-grid { display:grid; grid-template-columns: 1fr 1.08fr; gap:14px; margin-top:14px; }
.bv2-bottom-grid { display:grid; grid-template-columns:minmax(0,2.7fr) minmax(300px,.95fr); align-items:start; gap:14px; margin-top:14px; }
.bv2-panel { min-width:0; border:1px solid #E0E7F0; border-radius:12px; background:#fff; box-shadow:0 5px 18px rgba(35,63,105,.045); }
.bv2-main-grid > .bv2-panel { min-height: 424px; padding: 18px 20px; }
.bv2-panel-head { display:flex; align-items:center; justify-content:space-between; min-height:28px; }
.bv2-panel-head h2,.bv2-resource-toolbar h2 { display:flex; align-items:center; margin:0; color:#132642; font-size:16px; font-weight:700; }
.bv2-panel-head h2 em { min-width:24px; height:20px; margin-left:8px; padding:0 6px; border-radius:999px; background:#F04438; color:#fff; font-size:11px; line-height:20px; text-align:center; font-style:normal; }
.bv2-panel-head > a { color:#60758F; font-size:12px; }
.bv2-title-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-right:8px; border-radius:7px; background:#EAF3FF; color:#1978E2; font-size:16px; }
.bv2-title-icon--warm { background:#FFF1E8; color:#F2610C; }

.bv2-task-tabs { display:flex; gap:7px; margin:14px 0 4px; overflow-x:auto; }
.bv2-task-tab { height:30px; padding:0 13px; border:0; border-radius:7px; background:#F4F7FB; color:#697D97; font-size:12px; white-space:nowrap; cursor:pointer; }
.bv2-task-tab.is-active { background:#EAF3FF; color:#1677E8; font-weight:650; }
.bv2-task-tab b { margin-left:3px; }
.bv2-task-item { display:grid; grid-template-columns:40px minmax(0,1fr) 44px 68px 16px; align-items:center; gap:10px; min-height:69px; border-bottom:1px solid #EDF1F6; color:#162B48; }
.bv2-task-item:last-child { border-bottom:0; }
.bv2-task-item:hover { color:#162B48; }
.bv2-task-ico { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#EAF3FF; color:#1677E8; font-size:19px; }
.bv2-task-ico--orange { background:#FFF0E8; color:#F2610C; }
.bv2-task-ico--green { background:#E7F7EF; color:#148A55; }
.bv2-task-copy { min-width:0; }
.bv2-task-copy b { display:block; overflow:hidden; color:#162B48; font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.bv2-task-copy small { display:block; margin-top:3px; overflow:hidden; color:#8493A8; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.bv2-task-count { color:#4F6481; font-size:12px; text-align:right; white-space:nowrap; }
.bv2-task-action { display:inline-flex; align-items:center; justify-content:center; height:30px; border:1px solid #9DC8FA; border-radius:6px; color:#1677E8; font-size:12px; font-weight:600; }
.bv2-task-item:first-child .bv2-task-action { border-color:#F5A36C; color:#E95C0B; }
.bv2-task-item > .bx-chevron-right { color:#7D8FA6; }

.bv2-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0; }
.bv2-stat-row > div { display:flex; align-items:center; min-height:62px; padding:10px; border:1px solid #E3EAF3; border-radius:8px; }
.bv2-stat-ico { display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-right:10px; border-radius:50%; background:#EAF3FF; color:#1677E8; font-size:18px; }
.bv2-stat-ico--green { background:#E7F7EF; color:#148A55; }
.bv2-stat-ico--orange { background:#FFF0E8; color:#F2610C; }
.bv2-stat-ico--red { background:#FDECEC; color:#D92D20; }
.bv2-stat-row p { margin:0; color:#6B7E97; font-size:11px; }
.bv2-stat-row strong { display:block; margin-top:2px; color:#132642; font-size:18px; line-height:1; }
.bv2-cloud-root { display:flex; flex-direction:column; align-items:center; width:138px; margin:6px auto 0; padding:8px; border:1px solid #CFE2F8; border-radius:8px; background:#F8FBFF; position:relative; z-index:2; }
.bv2-cloud-root span { color:#1677E8; font-size:23px; line-height:1; }
.bv2-cloud-root b { color:#203653; font-size:12px; }
.bv2-cloud-root small { color:#8292A7; font-size:10px; }
.bv2-cloud-tree { position:relative; padding-top:22px; }
.bv2-cloud-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; position:relative; }
.bv2-cloud-connectors { position:absolute; top:0; left:0; width:100%; height:38px; overflow:visible; pointer-events:none; }
.bv2-cloud-connectors path { fill:none; stroke:#91B5DE; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; }
.bv2-cloud-group { display:grid; grid-template-columns:32px 1fr auto; align-items:center; min-height:74px; padding:10px; border:1px solid #E3EAF3; border-radius:8px; color:#203653; }
.bv2-cloud-group:hover { color:#1268C3; border-color:#B8D4F3; }
.bv2-cloud-domain { position:relative; margin-top:15px; background:linear-gradient(145deg,#fff 0%,#F9FCFF 100%); }
.bv2-cloud-domain::after { content:""; position:absolute; left:50%; bottom:calc(100% - 3px); width:7px; height:7px; border:2px solid #fff; border-radius:50%; background:#3789E7; box-shadow:0 0 0 1px #91B5DE; transform:translateX(-50%); }
.bv2-cloud-group-icon { display:flex; align-items:center; justify-content:center; width:29px; height:29px; border-radius:7px; background:#EAF3FF; color:#1677E8; font-size:17px; }
.bv2-cloud-group b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.bv2-cloud-group strong { font-size:16px; }
.bv2-cloud-group small { grid-column:1 / -1; margin-top:5px; overflow:hidden; color:#7C8DA3; font-size:9px; white-space:nowrap; }
.bv2-dot { display:inline-block; width:5px; height:5px; margin:0 3px 1px 4px; border-radius:50%; background:#98A6B8; }
.bv2-dot--ok { background:#12A365; }.bv2-dot--warn { background:#F79009; }.bv2-dot--bad { background:#D92D20; }
.bv2-cloud-subgroups { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:13px; }
.bv2-cloud-subgroup { display:flex; align-items:center; min-width:0; min-height:42px; padding:7px 9px; border:1px solid #E3EAF3; border-radius:7px; background:#fff; color:#405673; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.bv2-cloud-subgroup:hover { color:#1268C3; border-color:#B8D4F3; box-shadow:0 5px 14px rgba(35,103,179,.08); transform:translateY(-1px); }
.bv2-cloud-subgroup span { display:flex; align-items:center; justify-content:center; flex:0 0 25px; width:25px; height:25px; margin-right:7px; border-radius:6px; background:#EEF5FE; color:#1677E8; font-size:14px; }
.bv2-cloud-subgroup b { overflow:hidden; flex:1; font-size:10px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.bv2-cloud-subgroup em { margin-left:5px; color:#71839A; font-size:10px; font-style:normal; }
.bv2-cloud-subgroup--more { background:#F6FAFF; color:#1677E8; }
.bv2-cloud-subgroup--more > i { font-size:15px; }

.bv2-resources { min-height:0; padding:14px 18px 12px; overflow:visible; }
.bv2-resource-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.bv2-resource-tools { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:1; }
.bv2-resource-tools select,.bv2-search,.bv2-resource-tools button,.bv2-console-btn { box-sizing:border-box; height:32px; margin:0; border:1px solid #D7E1ED; border-radius:6px; background:#fff; color:#4C607C; font-size:12px; }
.bv2-resource-tools select {
	min-width:104px;
	padding:0 34px 0 11px;
	border-color:#CFDBE9;
	border-radius:8px;
	background-color:#fff;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%235E7491' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position:right 10px center;
	background-repeat:no-repeat;
	color:#334A68;
	font-weight:500;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
	transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
#bv2ResourceType { min-width:118px; }
#bv2ResourceStatus { min-width:104px; }
.bv2-resource-tools select:hover {
	border-color:#9FC2EA;
	background-color:#F9FCFF;
	color:#176FCB;
}
.bv2-resource-tools select:focus,
.bv2-resource-tools select:focus-visible {
	border-color:#5C9FE8;
	outline:0;
	box-shadow:0 0 0 3px rgba(22,119,232,.12);
}
.bv2-search { display:flex; align-items:center; width:200px; padding:0 9px; }
.bv2-search i { color:#6F829C; font-size:16px; }
.bv2-search input { width:100%; min-width:0; height:30px; padding:0 4px; border:0; outline:0; background:transparent; color:#263A55; font-size:12px; line-height:30px; -webkit-appearance:none; appearance:none; }
.bv2-resource-tools button { display:flex; align-items:center; gap:4px; padding:0 10px; cursor:pointer; }
.bv2-resource-tools button:hover { color:#1268C3; border-color:#AFCFF3; }
.bv2-console-btn { display:inline-flex; align-items:center; padding:0 12px; border-color:#1677E8; background:#1677E8; color:#fff; font-weight:600; }
.bv2-console-btn:hover { color:#fff; background:#1268C3; }
.bv2-loading,.bv2-empty { display:flex; min-height:220px; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#8796AA; font-size:12px; }
.bv2-loading i { font-size:24px; color:#1677E8; }
#sourceListData > .card-title,#sourceListData > .bv-panel-head { display:none; }
/* 首页资源列表固定为「表头 + 5 行」的稳定视口。少于 5 条时保留完整框架，
   选择 10/15/20 条时只在列表内部纵向滚动，不再把卡片、分页和右侧公告拉长。 */
#sourceListData .user-center_resources {
	box-sizing:border-box;
	height:279px;
	min-height:279px;
	max-height:279px;
	overflow:auto;
	scrollbar-gutter:stable;
	-webkit-overflow-scrolling:touch;
}
#sourceListData .user-center_resources::-webkit-scrollbar { width:7px; height:7px; }
#sourceListData .user-center_resources::-webkit-scrollbar-track { background:transparent; }
#sourceListData .user-center_resources::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:rgba(107,128,153,.42); background-clip:padding-box; }
#sourceListData .user-center_resources::-webkit-scrollbar-thumb:hover { background:rgba(72,101,135,.62); background-clip:padding-box; }
#sourceListData .table { margin-top:0 !important; }
#sourceListData .table thead {
	position:sticky;
	z-index:6;
	top:0;
	background:#F5F8FC;
	box-shadow:0 1px 0 #E7EDF5;
}
#sourceListData .table thead::before {
	position:absolute;
	z-index:-1;
	inset:-2px 0 0;
	background:#F5F8FC;
	content:"";
}
#sourceListData .table th { position:relative; z-index:1; padding:9px 10px; background:#F5F8FC; color:#405672; font-size:12px; font-weight:650; }
#sourceListData .table td { padding:9px 10px; color:#435975; font-size:13px; vertical-align:middle; }
#sourceListData .table { min-width:820px; table-layout:fixed; }
#sourceListData .table th,
#sourceListData .table td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sourceListData .bv-res-group,
#sourceListData .bv-res-region,
#sourceListData .bv-res-ip { display:inline-flex; align-items:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sourceListData .bv-res-region i { margin-right:4px; color:#5E8FC7; font-size:14px; flex:none; }
#sourceListData .bv-res-manage {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	height:26px;
	border:1px solid #B9D5F5;
	border-radius:6px;
	color:#1677E8;
	font-size:12px;
	font-weight:600;
}
#sourceListData .bv-res-manage:hover { border-color:#1677E8; background:#EEF6FF; color:#1268C3; }
#sourceListData .bv-res-status { padding:5px 8px; }
#sourceListData .table-footer.bv-res-pager { display:flex !important; align-items:center; justify-content:flex-end; min-height:42px; padding:8px 0 2px; overflow:visible; }
#sourceListData .table-footer .table-pagination { display:flex; width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
#sourceListData .table-footer .table-pageinfo {
	display:flex !important;
	align-items:center;
	margin:0 !important;
	color:#667A95;
	font-size:12px;
	white-space:nowrap;
}
#sourceListData .table-footer .table-pageinfo > span { display:inline-flex; align-items:center; }
#sourceListData .table-footer #sourcelimitSel {
	width:58px;
	height:30px;
	margin:0 5px;
	padding:0 24px 0 9px;
	border:1px solid #D7E2EF;
	border-radius:8px;
	outline:0;
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 3.75 5 6.25l2.5-2.5' fill='none' stroke='%235E7491' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
	color:#334A68;
	font-size:12px;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
#sourceListData .table-footer #sourcelimitSel:focus {
	border-color:#5C9FE8;
	box-shadow:0 0 0 3px rgba(22,119,232,.12);
}
#sourceListData .table-footer .pagination { display:flex; align-items:center; gap:6px; margin:0; padding:0; }
#sourceListData .table-footer .page-item { display:flex; align-items:center; margin:0; }
#sourceListData .table-footer .page-link {
	display:flex !important;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	min-width:30px;
	height:30px;
	padding:0 8px;
	border:1px solid #D7E2EF;
	border-radius:8px !important;
	background:#fff;
	color:#4C607C;
	font-size:12px;
	font-weight:600;
	line-height:30px !important;
	box-shadow:0 1px 2px rgba(31,58,92,.04);
	transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#sourceListData .table-footer .page-item:not(.disabled):not(.active) .page-link:hover,
#sourceListData .table-footer .page-item:not(.disabled):not(.active) .page-link:focus {
	border-color:#9FC6F2;
	background:#F2F7FD;
	color:#1268C3;
	box-shadow:0 4px 12px rgba(22,119,232,.10);
	transform:translateY(-1px);
}
#sourceListData .table-footer .page-item.active .page-link {
	border-color:#1677E8;
	background:#1677E8;
	color:#fff;
	box-shadow:0 5px 12px rgba(22,119,232,.22);
}
#sourceListData .table-footer .page-item.disabled .page-link {
	border-color:#E8EEF5;
	background:#F7F9FC;
	color:#AAB7C7;
	box-shadow:none;
	cursor:not-allowed;
}

.bv2-notices { min-height:0; padding:14px 18px; }
.bv2-notices ul { margin:8px 0 0; padding:0; list-style:none; }
.bv2-notices li { border-bottom:1px solid #EDF1F6; }
.bv2-notices li:last-child { border-bottom:0; }
.bv2-notices li a { display:flex; align-items:flex-start; min-height:43px; padding:7px 1px; color:#243955; }
.bv2-notice-dot { width:6px; height:6px; margin:6px 8px 0 0; border-radius:50%; background:#1677E8; flex:none; }
.bv2-notices li:first-child .bv2-notice-dot { background:#F04438; }
.bv2-notice-copy { min-width:0; }
.bv2-notice-copy b { display:-webkit-box; overflow:hidden; color:#203653; font-size:13px; font-weight:600; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; }
.bv2-notice-copy small { display:block; margin-top:2px; color:#73859D; font-size:11px; }
.bv2-notice-more { display:flex; align-items:center; justify-content:center; height:34px; margin-top:9px; border-radius:6px; background:#EEF5FE; color:#1677E8; font-size:12px; font-weight:600; }

@media (max-width: 1360px) {
	.bv2-hero { grid-template-columns: minmax(300px,1.2fr) minmax(220px,.75fr) minmax(360px,1fr); padding:18px; }
	.bv2-shortcuts { gap:7px; padding-left:14px; }
	.bv2-shortcuts > a { min-height:94px; }
	.bv2-cloud-subgroups { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width: 1180px) {
	.bv2-hero { grid-template-columns:1fr 1fr; }
	.bv2-shortcuts { grid-column:1 / -1; padding:14px 0 0; }
	.bv2-main-grid,.bv2-bottom-grid { grid-template-columns:1fr; }
	.bv2-main-grid > .bv2-panel { min-height:0; }
	.bv2-notices { min-height:0; }
}
@media (max-width: 767.98px) {
	body.bv-clientarea-v2 .page-content { padding:74px 0 40px; }
	body.bv-clientarea-v2 .page-content > .container-fluid { padding:0 10px 18px; }
	.bv2-hero { display:block; min-height:0; padding:16px; border-radius:12px; background-position:center right; }
	.bv2-avatar { width:58px; height:58px; flex-basis:58px; margin-right:12px; font-size:30px; }
	.bv2-profile h1 { font-size:19px; }
	.bv2-welcome { font-size:12px; }
	.bv2-detail-link { display:none; }
	.bv2-balance { grid-template-columns:38px 1fr auto; min-height:82px; margin-top:14px; padding:12px 0; border:0; border-top:1px solid rgba(135,166,206,.25); }
	.bv2-balance-icon { width:38px; height:38px; }
	.bv2-balance strong { font-size:22px; }
	.bv2-credit-limit { max-width:none; }
	.bv2-shortcuts { grid-template-columns:repeat(4,1fr); gap:6px; padding-top:8px; }
	.bv2-shortcuts > a { min-height:78px; padding:7px 3px; }
	.bv2-shortcut-icon { width:31px; height:31px; margin-bottom:4px; font-size:18px; }
	.bv2-shortcuts b { font-size:11px; }
	.bv2-shortcuts small { display:none; }
	.bv2-main-grid,.bv2-bottom-grid { gap:10px; margin-top:10px; }
	.bv2-main-grid > .bv2-panel { padding:15px 13px; }
	.bv2-task-tabs { padding-bottom:3px; }
	.bv2-task-item { grid-template-columns:36px minmax(0,1fr) 56px 12px; gap:7px; min-height:65px; }
	.bv2-task-count { display:none; }
	.bv2-task-action { height:28px; font-size:11px; }
	.bv2-stat-row { grid-template-columns:1fr 1fr; }
	.bv2-cloud-groups { grid-template-columns:1fr 1fr; }
	.bv2-cloud-connectors,.bv2-cloud-domain::after { display:none; }
	.bv2-cloud-tree { padding-top:10px; }
	.bv2-cloud-subgroups { grid-template-columns:1fr 1fr; }
	.bv2-resource-toolbar { display:block; }
	.bv2-resource-toolbar h2 { margin-bottom:10px; }
	.bv2-resource-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
	.bv2-search { width:auto; grid-column:1 / -1; grid-row:1; }
	.bv2-resource-tools select { display:block; min-width:0; }
	#bv2ResourceType { grid-column:1 / 3; grid-row:2; }
	#bv2ResourceStatus { grid-column:3 / 5; grid-row:2; }
	#bv2ResourceRefresh { grid-column:1 / 2; grid-row:3; justify-content:center; }
	.bv2-console-btn { grid-column:2 / 5; grid-row:3; justify-content:center; padding:0 9px; }
	.bv2-resources { padding:14px 12px; }
	#sourceListData .user-center_resources { min-height:0; overflow-x:auto; }
	#sourceListData table { min-width:700px; }
	#sourceListData .table-footer.bv-res-pager { justify-content:center; }
	#sourceListData .table-footer .table-pagination { width:100%; flex-direction:row; align-items:center; justify-content:space-between; }
	#sourceListData .table-footer .table-pageinfo { flex:1 1 190px; }
	#sourceListData .table-footer .pagination { flex:none; }
}


/* ══ 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);
}


/* ══ 34 · 侧栏收起态：子菜单从「hover 驱动」改成「点击驱动」 ════════════════
   两个报告其实是同一个根因。上游 app.css 在收起态是这么做的：

       .vertical-collpsed … > li:hover > a  { width: calc(190px + 70px); }
       .vertical-collpsed … > li:hover > ul { display: block; left: 70px; }

   于是：
   ① 点击"没反应"。metisMenu 的点击确实在 li 上加/去 mm-show，但显示与否由
      :hover 决定，所以点一下、再点一下，看起来都没变化 —— 点击是假的。
   ② 鼠标一扫过图标，那条 a 就从 70px 长到 260px，**伸进右边内容区 190px**，
      把正文盖住。展开态没有这条规则，所以只在收起时出现。

   还有个附带问题：这套浮层的配色来自 body[data-sidebar="dark"] 那一套
   （#2e3548 深底 + #79829c 灰字），而我们早就把侧栏改成白底了，
   于是浮层是一块深色板压在浅色页面上，子项文字在深底上几乎读不出来。

   这里的处理：
   - hover 只保留 70px 以内的底色反馈，不再伸出去、不再显示文字标签；
     图标是什么意思改用原生 title 提示（见 header.tpl 里的 syncTitles）。
   - 真正的展开由 .bv-fly 这个类控制，点击切换（header.tpl 里的脚本），
     不做状态保持 —— 换页就没了，这是浮层不是面板。
   - 浮层配色改成和白色侧栏一致：白底、--line 描边、--sh-2 投影。

   ⚠ 选择器必须比上游更"重"：上游是 body[data-sidebar="dark"].vertical-collpsed
     … #sidebar-menu > ul > li:hover > a，光靠文件顺序压不住（特异度胜过顺序），
     所以这里统一加 :not(.bv-fly) / .bv-fly 抬一级。 */

/* ── ⓪ 收起态的侧栏改回 fixed，并恢复 simplebar 的裁剪与滚动 ──────────
   上游收起态做了两件事：`position: absolute`，以及把 .simplebar-mask /
   .simplebar-content-wrapper 的 overflow 强制成 visible —— 目的是让那个
   hover 浮层能从 70px 的栏里探出去。副作用是**菜单再也没人裁、也没人给滚动**：
   本站顶级菜单 16 条、收起态 1049px，比可视区（视口-70=830）高，
   于是多出来的图标顺着页面往下淌，在内容短的页面（103 违规公示、/service…）
   就露在页脚「© …」下面。展开态是 fixed + simplebar 正常裁剪，所以只有收起时有。

   我们的浮层已经不靠这个了（改成 position: fixed，包含块是视口，
   祖先的 overflow 裁不到它），所以可以把裁剪原样收回来，
   收起态的滚动行为就和展开态一致了。 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu {
	position: fixed;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu .simplebar-mask {
	overflow: hidden !important;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu .simplebar-content-wrapper {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}
/* 上游在收起态把滚动条也 display:none 掉了（既然不滚就不需要）。现在要滚，放回来 ——
   显隐仍由 simplebar 自己的 opacity 控制，和展开态一样。 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu .simplebar-scrollbar {
	display: block !important;
}

/* ── ① 收掉 hover 展开 ───────────────────────────────────────────────── */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(.bv-fly):hover > a {
	width: 70px;
	background-color: var(--surface-sunk, #EFF2F7);
	color: var(--ink-1, #111823);
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(.bv-fly):hover > a i {
	color: var(--brand-700, #B84508);
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(.bv-fly):hover > a span {
	display: none;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:not(.bv-fly):hover > ul {
	display: none;
}

/* ── ② 点开之后的浮层 ─────────────────────────────────────────────────── */
/* ⚠ a **必须一直是 70px**。上一版这里写的是 calc(70px + 190px)，
   等于把上游那条 hover 才出现的横条改成点击才出现 —— 客户看到的还是
   一根条压在正文上（实测右边缘 260，超出侧栏 190px）。
   组名不放在这条上，放进浮层面板里当标题，见下面的 ::before。 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > a {
	position: relative;
	z-index: 1002;
	width: 70px;
	background-color: var(--brand-50, #FCF1EB);
	color: var(--brand-700, #B84508);      /* 在 --brand-50 上 4.99 ✓ */
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > a i {
	color: var(--brand-700, #B84508);
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > a span {
	display: none;
}
/* has-arrow 的小箭头在收起态被上游隐藏了，展开浮层时也不需要它 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > a.has-arrow:after {
	display: none;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > ul {
	display: block;
	/* fixed 而不是 absolute：侧栏内部现在是裁剪+滚动的，absolute 的浮层会被裁掉。
	   fixed 的包含块是视口，祖先 overflow 裁不到它。
	   top 由 header.tpl 的脚本按图标位置算（还要防止顶出视口底部）。 */
	position: fixed;
	top: 0;
	left: 70px;
	width: 204px;
	height: auto !important;
	max-height: calc(100vh - 86px);
	overflow-y: auto;
	z-index: 1005;
	padding: 0 0 6px;
	background-color: var(--surface, #FFFFFF);
	border: 1px solid var(--line, #E2E7EF);
	border-radius: 0 10px 10px 0;
	/* 比 --sh-2 重一档：它是浮在正文上的弹层，不是侧栏的一部分，
	   投影太轻会和下面的白色卡片糊在一起分不出层次。 */
	box-shadow: 0 8px 28px rgba(17, 24, 35, .14);
}
/* 组名。文字由 header.tpl 的脚本写进 data-bv-title —— 用 attr() 拿，
   就不用往 metisMenu 管的 ul 里插真节点（插了它 slideUp/Down 会一起动）。 */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > ul::before {
	content: attr(data-bv-title);
	display: block;
	padding: 13px 18px 11px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink-1, #111823);
	border-bottom: 1px solid var(--line, #E2E7EF);
	margin-bottom: 6px;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > ul a {
	width: 100%;
	padding: 8px 18px;
	color: var(--ink-2, #333F4E);          /* 白底 10.37 ✓，原来是 #79829c 压深底 */
	box-shadow: none;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > ul a:hover {
	color: var(--brand-700, #B84508);
	background-color: var(--brand-50, #FCF1EB);
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li.bv-fly > ul a.active {
	color: var(--brand-700, #B84508);
	font-weight: 600;
	background-color: var(--brand-50, #FCF1EB);
}


/* ══ 35 · 开了信用额度时「账单日 / 还款期限」压在下面的胶囊上 ═══════════════

   `1.css` 里：

       .zdcc        { width: 49%; display: inline-block }
       .zdcc.zdr span { position: relative; top: 12px }      ← 把文字往下推 12px
       @media (max-width: 1630px) { .zdcc { width: 100% } }  ← 于是两块改成上下堆叠

   那个 `top:12px` 是给「充值按钮在左、账单日在右、同一行」的横排做垂直对齐的。
   一旦 `.zdcc` 变成 100% 宽、两块上下堆叠，这 12px 就直接把文字推进了下面
   `.bv-fin-links` 那排胶囊里 —— 实测 1440 宽就开始重叠（账单日↔账单列表、
   还款期限↔充值记录），手机上 `1.css` 又把「账单日」藏了，所以只看得到
   「还款期限：5天」压在「账单列表」上。**这不是手机独有的**，1920 才没事。

   断点取 1630 是对齐 `1.css` 让 `.zdcc` 变 100% 的那条 —— 谁让它堆叠，就在谁那里
   把偏移收掉，两条规则永远同进同出。 */
@media (max-width: 1630px) {
	.zdcc.zdr span {
		position: static;
		top: auto;
	}
	.zdcc.zdr {
		margin-bottom: 8px;
	}
}


/* ══ 36 · 收起态：恢复 hover 出子菜单（点击开合保留） ══════════════════════
   第 34 节把上游 hover 展开整个收掉了 —— 因为上游那套 hover 会把 70px 的图标条
   拉成 260px 伸进正文。现在浮层已经不再撑宽图标条了（图标恒 70px、组名在浮层里），
   所以 hover 可以放回来：鼠标扫过就看到子菜单，不用先点一下。

   ⚠ 还是**不能用 CSS 的 :hover**：浮层现在是 position:fixed，top 得按图标的实际
     位置算（见 header.tpl 的 bvPlaceFly），CSS 做不到。所以 hover 也走脚本，
     用 pointerenter/pointerleave 并且只认 pointerType==='mouse' ——
     触摸屏上 tap 会先合成一次 mouseenter，不区分的话「点一下」会变成
     「先 hover 打开、再被 click 关掉」，看起来像没反应。 */

/* ------------------------------------------------- 顶栏右侧五项的 hover
   帮助 / 工单 / 消息 / 费用 / 购物车。原来 hover 变 #1268C3（上游遗留的蓝），
   和侧栏菜单 hover 的橙不是一回事，同一个页面两套悬浮语言。

   侧栏菜单项 hover 实测是 `color: rgb(217,82,10)` = --skin-accent，无背景。
   这里跟它对齐。

   ⚠ 下面这段实测数据先留着 —— 它说明的是**去掉浅底之后仍然存在的问题**，
   不是历史记录。2026-08-22 按用户要求把浅底撤了，只保留变字色：

     顶栏是渐变，右半边很亮（--nav-bg-2 后台调成了 #B3BECE）。像素采样：
       x=983(帮助) #98A4B7 · x=1257(购物车) #A8B4C5 · x=1334 #ACB8C9
     在这段底色上——
       白字（静止态）  对比度 2.52 → 2.01
       橙字 #D9520A    对比度 1.61 → 2.03   ← 比现在的蓝(2.27)还差
   光换字色，hover 反而比不 hover 更看不清。加一块 --brand-50 浅底之后，
   橙字落在 #FCF1EB 上 ≈ 3.9，和侧栏菜单在白底上 hover 的观感、对比度都一致。

   ⚠ 顺带记一笔：静止态白字在顶栏右半边只有 2.0~2.5，**这是后台把 --nav-bg-2
     调到 #B3BECE 之后的既有问题**，不是这条规则引入的。要根治得把 nav-bg-2
     调暗（比如 #6E7F9E，白字 4.6），那是后台配色的决定，没在这里擅自改。 */
/* ⚠ 2026-08-22：按用户要求**去掉浅底**，hover 只变字色。
   原来那块 --brand-50 浅底是给对比度兜底用的（见上面那段实测：
   顶栏右半边底色是 #98A4B7~#ACB8C9，橙字直接落上去只有 1.6~2.0，
   比换肤前的蓝 2.27 还差）。去掉之后这个问题会回来，
   根治仍然只有一条路：把后台的 --nav-bg-2 调暗，见上面 §「顶栏对比度」。
   这是用户看过带浅底的版本之后做的取舍。
   transition 留着 —— 现在过渡的是 color 不是背景。 */
#page-topbar .dropdown.d-none.d-lg-inline-block {
	transition: color var(--t-fast, .15s) var(--ease, ease);
}
/* a 和里面那个 button 都要写：上游只给 a 挂了 hover 变色，
   button 里的图标恒白 —— 浅底一铺，白图标就没了。 */
#page-topbar .dropdown.d-none.d-lg-inline-block:hover > a,
#page-topbar .dropdown.d-none.d-lg-inline-block:hover > a .btn.header-item,
#page-topbar .dropdown.d-none.d-lg-inline-block:hover > a .btn.header-item i {
	color: var(--skin-accent, #D9520A);
}

/* ══ 37 · 财务信息卡：窄屏右侧大片空白 ═══════════════════════════════════

   卡片在 `col-md-12 col-xl-4` 下，**xl(1200) 以下是整行满宽**，可它里面的东西
   全是按「三列窄卡」的尺寸写死的，于是 390px 实测（卡内容区 324px）：

     .zdye 当前余额     宽 159（一半），右边空 186
     .zdcc.zdpd 充值键  .w-75 → 243，右边空 102     ← 最扎眼的一块
     .bv-fin-links      6 个胶囊各 94px 定宽，排成 3 + 2，第二行右边空一大截
     .zdcwxx            高度 0（两列是浮动的，父级塌陷）

   ⚠ **可用额度是后台开关（`$zduser.is_open_credit_limit`），两种状态都得成立**：
     开着 → `.zdcwxx` 里是 .zdye + .zdxy 两块，还多一行「账单日/还款期限」和
            第 6 个「信用管理」胶囊；
     关着 → `.zdcwxx` 里**只有 .zdye 一块**，它还是只占一半宽，
            右边整整一半是空的 —— 不处理的话关掉额度反而更空。
   所以这里不写死列宽，改用 flex 让子项自己分：两块时各半、一块时独占。
   一条规则同时管住两种状态，也顺手解决了浮动塌陷。 */
@media (max-width: 1199.98px) {
	.zdcwxx {
		display: flex;
		gap: var(--s3, 12px);
	}
	.zdcwxx > div {
		float: none !important;
		width: auto !important;
		flex: 1 1 0;
		min-width: 0;
	}

	/* 充值按钮：满宽的整行主操作。w-75 是 bootstrap 的 `width:75%!important`，
	   压它必须同样带 !important。 */
	.zdcc.zdpd > span > .btn.w-75 {
		width: 100% !important;
	}
	/* 按钮和下面那行贴得太紧。间距给 .zdcc.zdpd 而不是给下一个兄弟 ——
	   下一个兄弟是谁取决于额度开关（开着是「账单日」行、关着直接是胶囊排），
	   挂在按钮自己身上两种状态才都成立。
	   ⚠ 开着额度时 §35 已给 `.zdcc.zdr` 补过 8px 下边距，两条不叠在同一个间隙上。 */
	.zdcc.zdpd {
		margin-bottom: 8px;
	}

	/* 胶囊铺满每一行：flex:1 允许拉伸，min-width 决定一行最多几个
	   —— 28% 时一行 3 个（3×28 + 2×8px gap < 100%），换行后剩下的平分该行，
	   所以第二行两个各占一半，不会再留半行空白。
	   开不开额度只是胶囊 6 个还是 5 个，这条都成立。 */
	.bv-fin-links a {
		flex: 1 1 auto;
		min-width: 28%;
		justify-content: center;
	}

	/* 上游 `1.css` 在窄屏把这两条藏了，纯粹是当年放不下 —— 现在两块都铺满了，
	   位置有富余，放回来正好把空白填上，也不用客户为了看账单日专门点进信用管理。
	     `.zdcc.zdr span:first-child` @≤768px   → 「账单日」
	     `.zdpd a:nth-child(5)`       @≤1630px  → 「发票管理」胶囊
	   ⚠ 只在这个断点区间内放开：1200px 以上卡片回到三列窄卡，那里确实挤，
	     维持上游的隐藏。 */
	.zdcc.zdr span:first-child {
		display: inline !important;
	}
	.bv-fin-links.zdpd a:nth-child(5) {
		display: inline-flex !important;
	}
}


/* ══ 12 · 顶栏搜索下拉的形态 ═══════════════════════════════════════════════
   §10 里那一大段只把颜色从 #0080ff 换成了品牌橙，形态一个字没动。
   实测展开态（1440px，点开搜索框）：

     面板    191x219  圆角 4px  阴影 0 16px 48px rgba(0,0,0,.176)  紧贴顶栏底 y=70
     ul      list-style: disc（没生效只是因为 li 里都是块级元素，属于漏网）
     行高    首块 74 / 50 / 39 / 39  —— 四行三个高度
     标签    18px 高、2px 圆角、1px #adb0b8 灰边、透明底
     箭头    .text::after 是内嵌 base64 SVG

   ⚠ 那个箭头 hover 时换成另一张 base64，颜色是 **#C7000B** —— 华为云的红。
     （这套下拉整个是照着华为云控制台抄的，register.css 里那批 #252B3A /
     #575d6c / #adb0b8 也都是华为云的色板。）文字早就换成品牌橙了，
     箭头还留着红，hover 一下两个颜色打架。
     改法不是再塞一张橙色 base64，而是**换成 mask + currentColor**，
     以后不管文字色怎么改，箭头自动跟着走，不会再有第三种颜色。

   ⚠ 面板不能用 overflow:hidden 来裁圆角：展开态那个输入框 .zdy-tcss 是
     `position:absolute; top:-51px`，靠溢出到面板外面去盖住顶栏那个输入框的
     （见 §10 的「两个 .zdy-ss 重合」）。一裁，展开后输入框直接消失。
     圆角只能靠给首尾子元素各自加圆角来兜。 */

/* ── 面板本体 ──
   ⚠⚠ **不要给这个面板加 margin-top / margin-left**，哪怕只有 8px。
   实测（CDP 查规则）它同时受两套定位摆布：
       .dropdown-menu.show { top: 100% !important }   ← 上游 CSS，= 70px
       内联 transform: translate3d(0, 70px, 0)        ← bootstrap4 的 Popper
   两个 70px 本来是叠加的，Popper 靠「量当前 rect 再算偏移」把它抵消掉，
   所以平时看到的是 y=70。一旦加了 margin-top，Popper 量到的基准就变了，
   抵消失效 —— 我加 8px 的结果是面板直接掉到 **y=148**（70+70+8）。
   连带把展开态的输入框 .zdy-tcss 也拽了下去：它是 `top:-51px` 反向溢出
   到面板外面去盖住顶栏输入框的（见 §10），面板一沉，它就变成页面里
   凭空多出来的第二个输入框。要留间隙只能改 top，不能加 margin。
   面板紧贴顶栏底本来就是头部搜索的常规形态，不留间隙。

   宽度同理不动：上游 `.dropdown-menu { width: 100% }`（0,1,0）压过了
   主题自己写的 `.dropdown-menu-lg { width: 320px }`（同权重、但在前面），
   面板因此恒等于触发按钮宽度 191px。这其实是**对的**——面板和输入框
   等宽、左右对齐，读起来像输入框的延伸；强行拉到 320px 会向右糊到
   帮助/工单图标上（Popper 内联 left:0，右对齐是假的）。
   代价是横向很紧，靠下面把字号和箭头间距收一点来换。 */
.navbar-header .dropdown .dropdown-menu.dropdown-menu-lg {
	padding: 0;
	border: 0;
	border-radius: var(--r-card, 12px);
	/* ⚠ 描边必须用 box-shadow 的 1px 外扩，**不能用 border**。
	   面板是 .zdy-tcss（展开态输入框）的包含块，那个 input 是
	   `position:absolute; top:-51px; left:3px`，靠反向溢出去精确盖住顶栏那个
	   输入框的（同一位置叠两个 input 是这套主题的既有设计，见 §10）。
	   border 会把内边距盒整体推 1px —— 实测两个输入框错位成
	   [775,19] / [776,20]，下面那个的边框沿左上边露出一条 1px 白线，
	   用户看到的就是「两个搜索框重叠在一起」。
	   box-shadow 不进盒模型，视觉等价、零位移。 */
	box-shadow: 0 0 0 1px var(--line, #E2E7EF),
	            0 12px 32px rgba(17, 24, 35, .14);
}
/* 淡入。⚠⚠ 动画必须挂在**子元素**上，不能挂在 .dropdown-menu 自己身上。
   实测：给面板本身加 `animation: ... 150ms both`（只动 opacity，连 transform
   都没碰），面板立刻从 y=70 掉到 y=140 —— 正好是 `top:100%`(70) 和 Popper 的
   `translate3d(0,70px,0)` 两个偏移不再相互抵消、叠加了起来。逐条关声明验证过：
   border / border-radius / box-shadow / padding 全关掉都还是 140，
   一关掉 animation 立刻回 70。
   （bootstrap4 那条 `.dropdown-menu.show{top:100%!important}` 本来就在和 Popper
   的内联 top:0 打架，平时靠 Popper 的测量把它抵消掉；元素一旦带上动画，
   这个脆弱的平衡就没了。机制不必深究，结论是硬的：**这个面板不能带动画**。）
   连带后果不只是位置：展开态的输入框 .zdy-tcss 靠 `top:-51px` 反向溢出去盖住
   顶栏输入框，面板沉 70px，它就变成页面里凭空多出来的第二个输入框。

   挂到 .header-search-droplist 上等效，且它不是 Popper 定位的元素，
   不会再影响任何几何。 */
.navbar-header .dropdown .dropdown-menu.dropdown-menu-lg.show .header-search-droplist {
	animation: bvSearchDropIn 150ms var(--ease, ease) both;
}
@keyframes bvSearchDropIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.navbar-header .dropdown .dropdown-menu.dropdown-menu-lg.show .header-search-droplist { animation: none; }
}

/* ── 列表 ── */
.header-search-droplist > ul {
	padding: 8px;
	margin-bottom: 0;
	list-style: none;
}
.header-search-droplist > ul > li > a {
	display: block;
	padding: 9px 10px;
	border-radius: var(--r-ctl, 8px);
	font-size: 13.5px;
	line-height: 20px;
	color: var(--ink-2, #333F4E);
}
.header-search-droplist > ul > li > a span {
	color: var(--ink-2, #333F4E);
	opacity: 1;
}
/* hover 用品牌浅底而不是 #efeff1 的中性灰：文字同时转橙，
   灰底配橙字读起来像「禁用了还变色」，浅橙底才读得出是选中。 */
.header-search-droplist > ul > li:hover > a,
.header-search-droplist > ul > li > a.hover,
.header-search-droplist > ul > li:hover .search-block,
.header-search-droplist .search-block:hover,
.header-search-droplist .search-block.hover {
	background-color: var(--brand-50, #FFF4ED);
}

/* ── 首块「云服务器 直达热门产品」 ── */
.header-search-droplist .search-block {
	padding: 9px 10px;
	border-radius: var(--r-ctl, 8px);
	font-size: 13px;
	line-height: 20px;
	color: var(--ink-2, #333F4E);
	white-space: normal;
}
/* ⚠ 主次是反的：`<span>云服务器</span>直达热门产品`，
   span 里包的是**产品名**（这行唯一有信息量的部分），上游却把它调淡
   （#575d6c + opacity .8），反倒是「直达热门产品」这句套话最重。调过来。 */
.header-search-droplist .search-block .text > span:first-child {
	font-weight: 600;
	color: var(--ink-1, #111823);
	opacity: 1;
}
.header-search-droplist .search-block:hover .text > span:first-child,
.header-search-droplist > ul > li:hover .text > span:first-child {
	color: var(--brand-700, #B84508);
}

/* ── 箭头：base64 图片 → mask + currentColor ── */
.header-search-droplist .search-block .text::after,
.header-search-droplist > ul > li:hover .text::after,
.header-search-droplist .search-block.hover .text::after {
	background-image: none;
	background-color: currentColor;
	width: 14px;
	height: 10px;
	margin-left: 5px;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6h12M9.2 1.8 13.5 6l-4.3 4.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6h12M9.2 1.8 13.5 6l-4.3 4.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--t-fast, 120ms) var(--ease, ease);
}
.header-search-droplist > ul > li:hover .text::after {
	transform: translateX(3px);
}

/* ── 标签胶囊 ── */
.header-search-droplist .search-block .search-tag { margin-top: 7px; }
.header-search-droplist .search-block .search-tag a {
	height: 21px;
	line-height: 19px;
	padding: 0 9px;
	margin-top: 0;
	border-radius: var(--r-chip, 4px);
	border: 1px solid var(--line, #E2E7EF);
	background: var(--surface-sunk, #EFF2F7);
	color: var(--ink-3, #5E6B7C);
	font-size: 11.5px;
}
.header-search-droplist .search-block .search-tag a:hover,
.header-search-droplist > ul > li:hover .tag-product,
.header-search-droplist .search-block .search-tag .tag-console:hover {
	background: var(--brand-100, #FFE3D0);
	border-color: var(--brand-100, #FFE3D0);
	color: var(--brand-700, #B84508);
}
/* 上游写了 `.tag-console:hover + a { border-color:#adb0b8!important; color:#575d6c!important }`
   —— 悬停一个标签会把**另一个**标签强行按回华为云灰。带 !important，只能同样带。 */
.header-search-droplist .search-block .search-tag .tag-console:hover + a {
	border-color: var(--line, #E2E7EF) !important;
	background: var(--surface-sunk, #EFF2F7);
	color: var(--ink-3, #5E6B7C) !important;
}

/* ── 首块和下面普通条目之间的分隔线（上游 #dfe1e6，且宽度是配 16px 内边距算的）── */
.header-search-droplist > ul li.to-page + li:not(.to-page)::before {
	width: calc(100% - 16px);
	margin: 6px 8px;
	background-color: var(--line, #E2E7EF);
}

/* ══ 用户信息卡 · 账户ID 一键复制 ══════════════════════════════════════════
   ⚠ 这张卡的排版**全靠 :nth-child()**（register.css 606-632）：
       1 欢迎您回来 100% ／ 2 用户名 60% ／ 3 用户组 30% float:right
       ／ 4 登录账户 ／ 5 账户ID
     所以复制按钮只能塞进第 5 个 span **内部**，绝不能新加一个兄弟 span ——
     加一个，4/5 的宽度规则就整体错位一格，整张卡当场散掉。

   顺带修掉一个既有的静默截断：4/5 在「≤1630px」和「≤768px」两档写死了百分比宽度，
   实测（uid=1，也就是最短的情况）：
       1280px 容器 198px → span4 拿到 129px 却需要 134px
                           span5 拿到  48px 却需要  50px
        390px 容器 253px → span4 拿到 124px 却需要 134px
     两边都已经被 `overflow:hidden` 悄悄裁掉了，只是当前账号 uid 只有一位数看不出来。
     改成按内容取宽。实测除 1280 外所有断点两段加起来都放得下（5 位 uid 也够）；
     1280 那一档容器特别窄（xl 栅格挤），给 span4 留个上限让它省略号，保证 span5 完整
     —— 宁可截手机号，也不能截你正要复制的那个号。
   ⚠ 上限必须留够：留少了 span5 会被挤到下一行，而 .user-center_h300 是**写死 300px**
     的三卡等高（实测内容已占 298px，只剩 2px），多一行直接顶到卡片外面。
     112px 是量出来的，不是拍的：1280 那一档 12px 字号下「账户ID:」+ 数字 + 图标的实测宽度是
     4 位 88px / 5 位 95 / 6 位 102 / 7 位 109。先写的 104 就在 7 位上翻了车（换行 + 顶破卡片）。
     ⚠ 112 的真实保证是**到 6 位 uid 为止**：7 位时 1280 那一档 86+109=195，加上两个 span
       之间那个空白文本节点的 ~4px 正好越过容器的 198px。本站现在最大 uid 是 1808（4 位），
       6 位 = 99 万客户，够远了；真到那天要么把这里再调大，要么把两个 span 之间的换行去掉。 */
@media screen and (max-width: 1630px) {
	.zduserxx span:nth-child(4) { width: auto; max-width: calc(100% - 112px); }
	.zduserxx span:nth-child(5) { width: auto; }
}
@media screen and (max-width: 768px) {
	.zduserxx span:nth-child(4) { width: auto; max-width: calc(100% - 112px); }
	.zduserxx span:nth-child(5) { width: auto; }
}

/* ⚠ 可点范围**只有图标**，号码本身是普通文字。
   一开始把号码和图标一起包进 <a>，结果鼠标划到号码上就变成手型、点一下也会复制 ——
   号码是要读、要选、要划的内容，不该整块变成按钮。
   现在号码在 <b class="bv-acct-id"> 里，只有 <a> 里的图标接管点击。 */
.zduserxx .bv-acct-id {
	font-weight: inherit;   /* <b> 只是拿来当个不带样式的容器，别真加粗 */
}
.zduserxx .bv-copy-id {
	cursor: pointer;
	color: var(--ink-4, #8D9AAB);
	margin-left: 3px;
	/* 行内元素的上下 padding 不会撑高行框，只是把这个 11px 的小图标的可点区域做大一点。
	   左右各 4px + 3px 外边距 = 号码和图标之间看起来仍是 7px 的空当。 */
	padding: 4px;
	transition: color var(--t-fast, .15s) var(--ease, ease);
}
.zduserxx .bv-copy-id:hover { color: var(--skin-accent, #F2610C); }
.zduserxx .bv-copy-id:focus-visible {
	outline: 2px solid var(--skin-accent, #F2610C);
	outline-offset: 2px;
	border-radius: 2px;
}
/* register.css 的 `.zduserxx span i` 给图标压了 18px + position:relative 的偏移
   （那是给「用户组」徽标那个图标定的），套到复制图标上会把行高顶开，逐条覆盖回来。 */
.zduserxx .bv-copy-id i {
	/* 11px 而不是跟文字齐平的 13px：复制图标是辅助动作，画得和号码一样重会先抢眼。
	   间距挪到外面的 <a> 上（margin+padding），这里不再单独留 margin。
	   position/top/left 三条是覆盖 register.css 的 `.zduserxx span i`，那条是给用户组徽标定的。 */
	font-size: 11px;
	position: static;
	top: 0;
	left: 0;
	margin-left: 0;
	vertical-align: 0;
	color: inherit;
}
.zduserxx .bv-copy-id i.bv-copied { color: var(--ok-500, #15A34A); }

/* ── 手机端顶栏四控件「磨砂片」统一设计(2026-09-04) ──────────────────────────
   痛点:顶栏是左深右浅渐变(左 rgb93,107,134 → 右 rgb179,190,206),购物车/头像正好落在
   右侧发白端→白图标对比虚;叠加图标粗细不一(汉堡粗、购物车细)、头像是照片圆,四者不成套。
   方案:把汉堡/总览/购物车/头像统一成同款「磨砂片」——深色半透明底(rgba)+细白边+backdrop-blur,
   ①任意渐变位置都给白图标兜住对比;②四者同一视觉语言=协调。汉堡/购物车做 34px 圆钮,
   总览带字做胶囊,头像同尺寸加细白环。作用域 max-width:991.98px,不碰桌面。
   ⚠ 34px 定高需要父 flex 居中,否则会顶到 70px 顶栏顶部。 */
@media (max-width: 991.98px) {
	/* 左右两簇 flex 垂直居中,让 34px 定高控件在 70px 顶栏里居中 */
	#page-topbar .navbar-header > .d-flex { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	/* 与线上现行头部保持相同的 12px 左侧装订线。 */
	#page-topbar .navbar-header { padding-left: 12px !important; }
	body.bv-clientarea-v2 #vertical-menu-btn::after { display:none; }

	/* —— 汉堡(:not(.ml-3) 排除总览那个同 id 按钮) & 购物车:34px 磨砂圆钮 —— */
	#page-topbar #vertical-menu-btn:not(.ml-3),
	#page-topbar .d-lg-none .noti-icon {
		width: 34px; height: 34px !important; min-width: 34px; padding: 0 !important;
		display: -webkit-box; display: -ms-flexbox; display: inline-flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
		border-radius: 50%;
		background: rgba(28, 39, 58, 0.20) !important;
		border: 1px solid rgba(255, 255, 255, 0.22) !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
		transition: background-color .15s ease;
	}
	#page-topbar #vertical-menu-btn:not(.ml-3):active,
	#page-topbar .d-lg-none .noti-icon:active { background: rgba(28, 39, 58, 0.34) !important; }
	#page-topbar #vertical-menu-btn:not(.ml-3) .fa-indent { font-size: 19px; line-height: 1; }
	#page-topbar .d-lg-none .bx-cart-alt { font-size: 19px; line-height: 1; margin-top: 0 !important; }

	/* —— 客户端:同款磨砂,带文字→胶囊 —— */
	#page-topbar .bv-client-btn {
		height: 34px !important; padding: 0 13px !important;
		display: -webkit-box; display: -ms-flexbox; display: inline-flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
		border-radius: 999px;
		background: rgba(28, 39, 58, 0.20) !important;
		border: 1px solid rgba(255, 255, 255, 0.22) !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
		font-size: 13px; line-height: 1;
	}
	#page-topbar .bv-client-menu.ml-3 { margin-left: 10px !important; }
	#page-topbar .bv-client-btn .fa-desktop { font-size: 12px; margin-right: 5px; }

	/* —— 头像:同尺寸圆 + 细白环,和三个磨砂片成套 —— */
	#page-header-user-dropdown { padding: 0 6px !important; }
	#page-header-user-dropdown .user-center_header {
		width: 34px !important; height: 34px !important; font-size: 15px !important;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
	}

	/* —— 购物车角标:现在定位祖先 .dropdown 只 34px 高(=圆钮),top 相对钮顶算,
	   top:-5 让角标略出钮顶=贴右上角 45°(钮改小前 dropdown 是 70px,那时要 +16) —— */
	#page-topbar .d-lg-none { margin-right: 6px !important; }
	#page-topbar .d-lg-none .noti-icon .bv-cart-count { top: -5px !important; right: -4px !important; }
}

/* ══ 顶栏视觉统一：以“最新消息”胶囊为基准 ═══════════════════════════════
   后台配置继续控制顶栏渐变；前景统一使用跑马灯的蓝灰色，搜索与跑马灯
   共享高度、圆角、底色和描边。 */
:root {
	--bv-topbar-ink:#345174;
	--bv-topbar-copy:#4A607F;
	--bv-topbar-accent:#1A7FE0;
	--bv-topbar-pill:#F2F6FC;
	--bv-topbar-line:#E1E9F4;
	--bv-topbar-control-height:34px;
}
.bv-ticker,
body.bv-clientarea-v2 .bv-ticker {
	height:var(--bv-topbar-control-height);
	padding:0 12px;
	border:1px solid var(--bv-topbar-line);
	border-radius:999px;
	background:var(--bv-topbar-pill);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.bv-ticker-ico,
body.bv-clientarea-v2 .bv-ticker-ico { color:var(--bv-topbar-accent); }
.bv-ticker-label,
body.bv-clientarea-v2 .bv-ticker-label { color:var(--bv-topbar-ink); }
.bv-ticker-item,
body.bv-clientarea-v2 .bv-ticker-item { color:var(--bv-topbar-copy); }
.bv-ticker-more,
body.bv-clientarea-v2 .bv-ticker-more { color:var(--bv-topbar-accent); }

.bv-header-search .bv-header-search-input {
	height:var(--bv-topbar-control-height);
	padding-right:41px;
	border:1px solid var(--bv-topbar-line);
	background:var(--bv-topbar-pill);
	color:var(--bv-topbar-ink) !important;
	line-height:var(--bv-topbar-control-height);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.bv-header-search .bv-header-search-input::placeholder { color:#7A8DA7; }
.bv-header-search-submit { width:40px; height:var(--bv-topbar-control-height); color:var(--bv-topbar-accent); }
.bv-header-search-submit:hover,
.bv-header-search-submit:focus { color:#1268C3; }
.bv-header-search.is-open .bv-header-search-input,
.bv-header-search .bv-header-search-input:focus {
	border-color:#BFD4EC;
	background:#fff;
	color:var(--bv-topbar-ink) !important;
}

/* 二级会员页的搜索容器占满统一的 60px 顶栏，输入框仍在内部垂直居中。
   弹层以容器底边定位，因此会和首页一样贴住 header 底线，而不是从输入框
   底部提前展开并压在顶栏上。 */
body.bv-clientarea-shell:not(.bv-clientarea-v2) #page-header-search-dropdown {
	height:60px;
	align-self:stretch;
}
body.bv-clientarea-shell:not(.bv-clientarea-v2) #bvHeaderSearchForm {
	display:flex;
	align-items:center;
	height:60px;
}
body.bv-clientarea-shell:not(.bv-clientarea-v2) #bvHeaderSearchForm .bv-header-search-input {
	margin-top:0;
	margin-bottom:0;
}
body.bv-clientarea-shell:not(.bv-clientarea-v2) #bvHeaderSearchForm .bv-header-search-submit {
	top:50%;
	transform:translateY(-50%);
}

/* 用户中心首页购物车的旧结构是 60px 按钮后紧跟文本，inline 基线会让图标
   看起来低一截。让链接直接负责横向和垂直对齐，按钮只保留图标点击区。 */
@media (min-width:992px) {
	body.bv-clientarea-v2 #page-topbar .bv-top-cart > a {
		display:inline-flex;
		align-items:center;
		height:60px;
		gap:4px;
		padding:0 8px;
		line-height:1;
	}
	body.bv-clientarea-v2 #page-topbar .bv-top-cart > a > .header-item {
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:22px;
		height:22px;
		padding:0;
		margin:0;
	}
	body.bv-clientarea-v2 #page-topbar .bv-top-cart .bx-cart-alt {
		margin-top:0 !important;
		line-height:1;
	}
}

/* 搜索建议面板的静态文字统一使用“最新消息”正文蓝灰色，避免同一行中
   关键词、说明和操作各自读取旧主题色。鼠标悬浮时再统一切换为强调蓝。 */
#bvHeaderSearchPanel,
#bvHeaderSearchPanel .header-search-droplist,
#bvHeaderSearchPanel .search-block,
#bvHeaderSearchPanel p,
#bvHeaderSearchPanel .search-block .text,
#bvHeaderSearchPanel .search-block .text span,
#bvHeaderSearchPanel .search-tag,
#bvHeaderSearchPanel .search-tag a,
#bvHeaderSearchPanel a,
#bvHeaderSearchPanel a:link,
#bvHeaderSearchPanel a:visited,
#bvHeaderSearchPanel li > a,
#bvHeaderSearchPanel li > a span {
	color:var(--bv-topbar-copy) !important;
	text-shadow:none !important;
}
/* 首页顶栏曾用高特异度规则把右侧区域的全部 a/span 刷成白色；将搜索面板
   明确排除在外，并保持与二级页面相同的正文蓝灰。 */
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel p,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel a,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel span {
	color:var(--bv-topbar-copy) !important;
	text-shadow:none !important;
}
#bvHeaderSearchPanel a:hover,
#bvHeaderSearchPanel a:focus,
#bvHeaderSearchPanel a:active,
#bvHeaderSearchPanel li > a:hover,
#bvHeaderSearchPanel li > a:hover span,
#bvHeaderSearchPanel li:hover .search-block .text,
#bvHeaderSearchPanel li:hover .search-block .text span,
#bvHeaderSearchPanel li:hover .search-tag a {
	color:var(--bv-topbar-accent) !important;
}
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel a:hover,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel a:focus,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel li:hover .text,
body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child #bvHeaderSearchPanel li:hover .text span {
	color:var(--bv-topbar-accent) !important;
}

/* 头像菜单：限定在用户下拉框，避免影响同一顶栏中的语言等菜单。 */
#page-topbar #page-header-user-dropdown + .dropdown-menu {
	min-width:168px;
	padding:6px;
	border:1px solid var(--bv-topbar-line, #E1E9F4);
	border-radius:10px;
	background:#fff;
	box-shadow:0 12px 30px rgba(32,54,83,.14);
}
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item {
	display:flex;
	align-items:center;
	min-height:38px;
	padding:8px 10px;
	border-radius:7px;
	color:var(--bv-topbar-copy, #4A607F) !important;
	font-size:13px;
}
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item i,
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item span {
	color:inherit !important;
}
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item:hover,
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item:focus {
	background:var(--bv-topbar-pill, #F2F6FC);
	color:var(--bv-topbar-accent, #1A7FE0) !important;
}
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item.text-danger {
	color:#C43B32 !important;
}
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item.text-danger:hover,
#page-topbar #page-header-user-dropdown + .dropdown-menu .dropdown-item.text-danger:focus {
	background:#FFF1F0;
	color:#A52B23 !important;
}

/* 公共会员页侧栏：只统一导航尺寸和状态，不改后台下发的侧栏底色。 */
body.bv-clientarea-shell #sidebar-menu { padding:12px 10px 24px; }
body.bv-clientarea-shell #sidebar-menu ul li a {
	min-height:44px;
	padding:10px 14px;
	border-radius:9px;
	font-size:14px;
}
body.bv-clientarea-shell #sidebar-menu ul li a i { font-size:18px; }
body.bv-clientarea-shell #sidebar-menu ul li a:hover,
body.bv-clientarea-shell #sidebar-menu ul li a:hover i {
	background:var(--brand-50, #FFF4ED);
	color:var(--skin-accent-deep, var(--brand-700, #B84508));
}
/* 展开链上的父级只负责保持子菜单展开；视觉选中只落到当前页面对应的
   最末级 .active。没有子菜单的一级入口自身带 .active，仍会正常高亮。 */
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu .mm-active > a:not(.active) {
	background:transparent;
	box-shadow:none;
	color:var(--ink-3, #5E6B7C) !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu .mm-active > a:not(.active) i {
	color:var(--ink-3, #5E6B7C) !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu .mm-active .active {
	background:var(--brand-50, #FFF4ED);
	box-shadow:inset 3px 0 0 var(--skin-accent, var(--brand-500, #F2610C));
	color:var(--skin-accent-deep, var(--brand-700, #B84508)) !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu .mm-active .active i {
	color:var(--skin-accent-deep, var(--brand-700, #B84508)) !important;
}
body.bv-clientarea-shell #sidebar-menu ul li ul.sub-menu li a {
	min-height:38px;
	padding-left:43px;
	font-size:13px;
}
@media (min-width:992px) {
	/* Product Design 方向 1：连续导航面板。侧栏作为一个完整信息面，依靠
	   对齐、分隔线和层级缩进组织菜单，只给当前末级入口使用强调色。 */
	body.bv-clientarea-shell:not(.vertical-collpsed) .vertical-menu {
		left:10px;
		top:78px;
		bottom:12px;
		width:194px;
		border:1px solid #E3E9F1;
		border-radius:12px;
		background:#fff;
		box-shadow:0 10px 28px rgba(31,58,92,.07);
		overflow:hidden;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu {
		padding:10px 12px 24px;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) .main-content { margin-left:220px; }
	body.bv-clientarea-shell:not(.vertical-collpsed) footer.footer { left:220px; }
	body.bv-clientarea-shell:not(.vertical-collpsed) .vertical-menu .simplebar-track.simplebar-vertical {
		display:none;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu > ul > li {
		margin:0;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul.sub-menu {
		margin:0 0 7px;
		padding:2px 0 4px;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul.sub-menu > li {
		margin:2px 0;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul li > a {
		box-sizing:border-box;
		border:0;
		border-radius:6px;
		background:transparent;
		box-shadow:none;
		transition:background-color .16s ease,color .16s ease;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu > ul > li > a {
		min-height:54px;
		padding:13px 10px;
		border-radius:0;
		border-bottom:1px solid #EDF1F5;
		font-size:14px;
		font-weight:500;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul li > a:hover {
		background:#F5F8FC;
		box-shadow:none;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul li > a:hover i {
		background:#EEF4FA;
		color:#41658F;
		box-shadow:0 4px 10px rgba(52,81,116,.16);
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul li > a > i {
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:28px;
		height:28px;
		margin-right:8px;
		border:1px solid #E8EEF5;
		border-radius:6px;
		background:#F7F9FC;
		color:#56779E;
		box-shadow:0 3px 8px rgba(52,81,116,.12);
		transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu ul.sub-menu > li > a {
		min-height:40px;
		padding:9px 12px 9px 46px;
		border:0;
		border-radius:6px;
		background:transparent;
		font-size:13px;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu .mm-active .active {
		border:0;
		border-radius:6px;
		background:#F5F8FC;
		box-shadow:none;
		color:#41658F !important;
		font-weight:600;
	}
	body.bv-clientarea-shell:not(.vertical-collpsed) #sidebar-menu .mm-active .active > i {
		border-color:#DDE8F3;
		background:#EEF4FA;
		color:#41658F !important;
		box-shadow:0 3px 9px rgba(52,81,116,.16);
	}
	/* 所有会员页统一采用用户中心首页的 60px 顶栏基线。相关容器必须一起
	   收口，否则外框虽变矮，logo、按钮或侧栏仍会按旧 70px 尺寸排版。 */
	body.bv-clientarea-shell #page-topbar { height:60px; }
	body.bv-clientarea-shell .navbar-header { height:60px; }
	body.bv-clientarea-shell .navbar-brand-box { width:180px; height:60px; }
	body.bv-clientarea-shell .navbar-brand-box .logo { line-height:60px; }
	body.bv-clientarea-shell #page-topbar .header-item { height:60px; }
	body.bv-clientarea-shell .vertical-menu { width:180px; top:60px; }
	body.bv-clientarea-shell .main-content { margin-left:180px; }
	body.bv-clientarea-shell footer.footer {
		left:180px;
		right:0;
		width:auto;
		box-sizing:border-box;
		padding:20px 30px;
	}
	body.bv-clientarea-shell footer.footer > .container-fluid { padding:0; }
	body.bv-clientarea-shell.vertical-collpsed .navbar-brand-box { width:70px; }
	body.bv-clientarea-shell.vertical-collpsed .main-content { margin-left:70px; }
	body.bv-clientarea-shell.vertical-collpsed footer.footer { left:70px; }
	body.bv-clientarea-shell.vertical-collpsed #sidebar-menu { padding:12px 0 24px; }
	body.bv-clientarea-shell.vertical-collpsed #sidebar-menu > ul > li > a {
		display:flex;
		align-items:center;
		justify-content:center;
		padding:10px 0;
	}
	body.bv-clientarea-shell.vertical-collpsed #sidebar-menu > ul > li > a i { margin:0; }
}

/* H5 顶栏与内容卡片共用 10px 装订线和 12px 圆角。 */
@media (max-width:991.98px) {
	body.bv-clientarea-shell #page-topbar {
		top:8px;
		left:10px;
		right:10px;
		width:auto;
		height:60px;
		border-radius:12px;
		box-shadow:0 5px 18px rgba(35,63,105,.12);
	}
	body.bv-clientarea-shell #page-topbar .navbar-header {
		width:100%;
		height:60px;
		border-radius:12px;
	}
	body.bv-clientarea-shell #page-topbar .header-item { height:60px; }
	body.bv-clientarea-shell footer.footer {
		left:0;
		right:0;
		width:auto;
		box-sizing:border-box;
		padding:20px 10px;
	}
	body.bv-clientarea-shell footer.footer > .container-fluid { padding:0; }
}

@media (min-width:992px) {
	#page-topbar .bv-client-btn,
	#page-topbar .bv-client-btn i,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > a,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > a > .header-item,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > a > .header-item i,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > .header-item,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > .header-item > a,
	#page-topbar #page-header-user-dropdown,
	#page-topbar #page-header-user-dropdown > span,
	#page-topbar #page-header-user-dropdown > i {
		color:var(--bv-topbar-ink) !important;
	}
	#page-topbar .bv-client-btn:hover,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > a:hover,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > a:hover > .header-item,
	#page-topbar .navbar-header > .d-flex:last-child > .dropdown > a:hover > .header-item i,
	#page-topbar #page-header-user-dropdown:hover,
	#page-topbar #page-header-user-dropdown:hover > span,
	#page-topbar #page-header-user-dropdown:hover > i {
		color:#1268C3 !important;
	}
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child > .dropdown > a,
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child > .dropdown > a > .header-item,
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child > .dropdown > a > .header-item i,
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child > .dropdown > .header-item,
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child > .dropdown > .header-item > a,
	body.bv-clientarea-v2 #page-topbar #page-header-user-dropdown,
	body.bv-clientarea-v2 #page-topbar #page-header-user-dropdown > span,
	body.bv-clientarea-v2 #page-topbar #page-header-user-dropdown > i {
		color:var(--bv-topbar-ink) !important;
	}
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child .bv-header-search .bv-header-search-submit,
	body.bv-clientarea-v2 #page-topbar .navbar-header > .d-flex:last-child .bv-header-search .bv-header-search-submit i {
		color:var(--bv-topbar-accent) !important;
	}
}


/* 菜单切页过渡态：app.js 会先写 active 再写 mm-active，两个阶段均禁止旧橙色闪现。 */
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu a.active,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu a.active:hover {
	background-color:#F5F8FC !important;
	color:#41658F !important;
	box-shadow:none !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu a.active i,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu a.active:hover i {
	color:#41658F !important;
}
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.active > a:not(.active),
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active > a:not(.active),
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.active > a:not(.active) i,
body.bv-clientarea-shell[data-sidebar="dark"] #sidebar-menu li.mm-active > a:not(.active) i {
	background-color:transparent !important;
	color:var(--ink-3, #5E6B7C) !important;
	box-shadow:none !important;
}

/* H5 固定顶栏遮罩：覆盖顶栏上方及两侧装订线，滚动内容不会从圆角外露出。 */
@media (max-width:991.98px) {
	body.bv-clientarea-shell::before {
		content:"";
		position:fixed;
		top:0;
		left:0;
		right:0;
		height:76px;
		z-index:1001;
		background:#F8F8FB;
		pointer-events:none;
	}
	body.bv-clientarea-shell.bv-clientarea-v2::before { background:#F3F7FC; }
	body.bv-clientarea-shell #page-topbar { z-index:1002; }
}

/* 会员公用尾部：外层跟随主内容区，内层卡片按各页面内容宽度排版。 */
body.bv-clientarea-shell { --bv-footer-sidebar:220px; }
body.bv-clientarea-shell.vertical-collpsed { --bv-footer-sidebar:70px; }
body.bv-clientarea-shell > footer.footer {
	position:relative;
	left:auto !important;
	right:auto !important;
	bottom:auto !important;
	width:calc(100% - var(--bv-footer-sidebar));
	height:auto;
	min-height:60px;
	margin:32px 0 24px var(--bv-footer-sidebar);
	padding:0 24px;
	box-sizing:border-box;
	background:transparent;
	border:0;
	box-shadow:none;
}
body.bv-clientarea-shell > footer.footer > .container-fluid {
	width:100%;
	padding:20px 24px;
	box-sizing:border-box;
	background:var(--surface, #fff);
	border:1px solid var(--line, #E5E8EF);
	border-radius:var(--r-card, 14px);
	box-shadow:var(--sh-2, 0 8px 24px rgba(32,45,64,.08));
}
body.bv-clientarea-shell > footer.footer > .container-fluid > .row {
	align-items:center;
	max-width:none;
	margin-top:0;
}
@media (min-width:992px) {
	body.bv-clientarea-shell .main-content { min-height:calc(100vh - 120px); }
}
@media (max-width:991.98px) {
	body.bv-clientarea-shell { --bv-footer-sidebar:0px; }
	body.bv-clientarea-shell > footer.footer {
		width:100%;
		margin:28px 0 12px;
		padding:0 12px;
	}
	body.bv-clientarea-shell > footer.footer > .container-fluid {
		padding:18px 20px;
	}
}