/* ==========================================================================
   宇速云 · 用户中心统一皮肤 (ys-skin.css)
   --------------------------------------------------------------------------
   目的：把「用户中心」的视觉语言对齐官网首页与购物车商品浏览页，消除三个界面
        之间「像一个站拼出来的」观感；并给左侧菜单的收/展加上过渡动效。

   为何单独一个文件：本文件在 includes/head.tpl 里**最后**加载（在内联
   <style> 之前），所以能稳定覆盖 bootstrap/app.min/change.qr/element.qr 等
   各层，且不污染主题原有文件；后台「自定义设置」生成的内联样式仍在其后，
   用户配置依旧拥有最终决定权。

   取值来源（实测官网首页 / 购物车商品浏览页的计算样式，非凭感觉）：
     --ys-primary      #1668dc      三端主色，已一致
     --ys-radius       8px          官网/购物车圆角，用户中心原本全是 0
     字号 / 文字色     14px / #1a1f36  官网与购物车一致，用户中心原本 13px / #495057
     卡片阴影          0 4px 16px rgba(23,38,70,.06)
                       购物车为 0 5px 18px rgba(230,233,249,.25)、顶栏为
                       0 2px 16px rgba(0,0,0,.07)，这里取同色系的中庸值
     顶栏高度          68px         官网与购物车均 68，用户中心原本 70
   ========================================================================== */

:root {
	--ys-primary: #1668dc;
	--ys-primary-dark: #0f52b3;
	--ys-radius: 8px;
	--ys-text: #1a1f36;
	--ys-text-muted: #616b7d;
	--ys-border: #e6e9ef;
	--ys-page-bg: #f5f7fb;
	/* 全站唯一的浮层投影（下拉/弹窗/tooltip/移动抽屉/返回顶部），见第 6 节 */
	--ys-shadow-float: 0 8px 24px rgba(23, 38, 70, .10);
	--ys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	--ys-header-h: 68px;
	--ys-ease: cubic-bezier(.22, .61, .36, 1);
	--ys-dur: .28s;
}

/* --------------------------------------------------------------------------
   1. 排版对齐：字体 / 字号 / 文字色 / 页面底色
   ---- font-family 用 !important 是必要的：主题里 bootstrap 与 app.min 都
        直接给 body 声明了字体，且历史上被缓存过一份 Arial !important 版本。
   -------------------------------------------------------------------------- */
body {
	font-family: var(--ys-font) !important;
	font-size: 14px;
	color: var(--ys-text);
	background-color: var(--ys-page-bg);
}

h1, h2, h3, h4, h5, h6,
.font-size-16, .font-size-14 {
	color: var(--ys-text);
}

.text-muted, .text-secondary {
	color: var(--ys-text-muted) !important;
}

/* 表单控件继承字体，避免个别控件回落到浏览器默认衬线/无衬线 */
button, input, select, textarea, optgroup {
	font-family: inherit;
}

/* --------------------------------------------------------------------------
   2. 圆角与阴影对齐（用户中心原本卡片/按钮/输入框圆角为 0）
   ---- 这里必须带 !important：主题自带的 change.qr.css 对
        `.btn` / `.card` / `table,td,th` 写了 `border-radius:0px!important`
        （element.qr.css 对 .modal-content 同样处理），是作者刻意强制方角。
        本文件在其后加载，同优先级下后者胜，但前提是**双方都要 !important**，
        否则普通声明会被对方的 !important 直接压掉 —— 实测过，不加则计算值仍为 0px。
   ---- 排除 .btn-sm / .form-control-sm：顶栏的汉堡按钮、表格内的紧凑控件都靠
        它们维持小尺寸，统一改字号会把图标和行高一起撑大。
   -------------------------------------------------------------------------- */
.card {
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius) !important;
	box-shadow: none !important; /* 卡片改「纯边框制」，见第 6 节 */
}

.card-header, .card-footer {
	border-color: var(--ys-border);
}

.card-header {
	border-radius: calc(var(--ys-radius) - 1px) calc(var(--ys-radius) - 1px) 0 0 !important;
}

.btn:not(.btn-sm) {
	border-radius: var(--ys-radius) !important;
	font-size: 14px;
}

.btn-sm {
	border-radius: 6px !important;
}

.form-control:not(.form-control-sm),
.custom-select:not(.custom-select-sm),
.input-group-text,
.bootstrap-select:not(.btn-sm) > .dropdown-toggle {
	border-radius: var(--ys-radius) !important;
}

.dropdown-menu,
.popover,
.tooltip-inner {
	border-radius: var(--ys-radius);
}

.modal-content {
	border-radius: var(--ys-radius) !important;
}

.dropdown-menu {
	border-color: var(--ys-border);
	box-shadow: var(--ys-shadow-float);
}

/* 表格：去掉生硬的四边框，改用与卡片一致的分隔线 */
.table td, .table th {
	border-color: var(--ys-border);
}

/* --------------------------------------------------------------------------
   3. 顶栏高度对齐 68px（官网/购物车均为 68，用户中心原本 70）
   ---- 高度由多个选择器共同决定，必须一起改，否则侧栏会与顶栏错位 2px。
   -------------------------------------------------------------------------- */
#page-topbar,
.navbar-header,
.header-item,
.navbar-brand-box,
.logo {
	height: var(--ys-header-h);
}

.navbar-brand-box {
	height: var(--ys-header-h) !important; /* 标记上写了 inline height:70px */
}

.logo {
	line-height: var(--ys-header-h);
}

#page-topbar {
	box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}

.vertical-menu {
	top: var(--ys-header-h);
}

.main-content .content {
	margin-top: var(--ys-header-h);
	padding: 0 15px 24px 15px;
}

/* --------------------------------------------------------------------------
   4. 左侧菜单：字号对齐正文，选中态用主色，页脚不再另起一层灰
   -------------------------------------------------------------------------- */
#sidebar-menu ul li a {
	font-size: 14px;
	color: #4a5568;
}

#sidebar-menu ul li ul.sub-menu li a {
	color: #5b6675;
}

#sidebar-menu .menu-title {
	letter-spacing: .04em;
}

.footer {
	background-color: transparent;
	color: var(--ys-text-muted);
}

/* --------------------------------------------------------------------------
   5. 动效：左侧菜单「收 / 展」过渡
   ---- 原来宽度、内容左边距、页脚左边距、品牌区宽度都是瞬时跳变，观感生硬。
        这里给这四个属性加同一条缓动曲线，让整屏一起平移。
        注意供应商样式的 .vertical-collpsed .vertical-menu 带 !important 的
        width:70px，那只是**目标值**，transition 写在基础选择器上即可生效。
   -------------------------------------------------------------------------- */
.vertical-menu,
.navbar-brand-box,
.main-content,
.footer {
	transition: width var(--ys-dur) var(--ys-ease),
		margin-left var(--ys-dur) var(--ys-ease),
		left var(--ys-dur) var(--ys-ease);
}

/* 菜单文字在折叠时是 display:none（供应商行为，不可过渡），
   这里只让菜单项本身的背景/位移有个短过渡，弱化跳变感 */
.vertical-menu #sidebar-menu > ul > li > a {
	transition: background-color .2s ease, color .2s ease, padding var(--ys-dur) var(--ys-ease);
}

/* 移动端抽屉：供应商用 display:none → block 切换，display 不可过渡。
   改用 animation：规则一旦命中就播放，无需改 JS，也不依赖 display 的过渡能力。*/
@media (max-width: 992px) {
	body.sidebar-enable .vertical-menu {
		animation: ysDrawerIn .26s var(--ys-ease);
		box-shadow: var(--ys-shadow-float);
	}
}

@keyframes ysDrawerIn {
	from {
		opacity: 0;
		transform: translateX(-14px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 尊重系统的「减弱动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {

	.vertical-menu,
	.navbar-brand-box,
	.main-content,
	.footer,
	.vertical-menu #sidebar-menu > ul > li > a {
		transition: none;
	}

	body.sidebar-enable .vertical-menu {
		animation: none;
	}
}

/* ==========================================================================
   6. 阴影体系统一（全站收敛到 3 档）
   --------------------------------------------------------------------------
   实测（/clientarea、/billing）：单页曾有 7 种不同阴影值、分属三套设计语言 ——
     · 极浅中性投影（卡片）
     · 品牌色发光   rgba(6,75,179) 0 4px 20px 2px      —— 官网/购物车没有这种做法
     · 新拟态      8px 8px 20px + -8px -8px 20px，
                   以及 inset 2px 2px 4px + inset -2px -2px 4px —— 官网/购物车完全没有
   后两类是「看着像两个站拼出来」的主因，这里按层级统一：

     L0 平面   侧栏、表格容器、页面底色        → 无阴影，用 1px 分隔线/底色差
     L1 内容块 卡片                            → 无阴影，只用 1px 边框
     L2 浮层   下拉、弹窗、tooltip、移动抽屉   → --ys-shadow-float
     L3 悬浮操作 返回顶部按钮                  → --ys-shadow-float（同类，仅此一处）

   两条原则：
     ① 阴影与边框二选一，不叠加 —— 同时有 1px 边框 + 投影正是「重」的来源；
     ② 阴影不做过渡动画（box-shadow 过渡触发重绘，性能差），hover 一律改底色/边框色。
   ========================================================================== */

/* L1：卡片不再有投影，层次交给边框与留白 */
.card {
	box-shadow: none !important;
}

/* L0：侧栏不投影，与内容之间用 1px 分隔线。
   移动端抽屉是浮层，保留投影（见第 5 节），故用 min-width 排除。 */
@media (min-width: 993px) {
	.vertical-menu {
		box-shadow: none !important;
		border-right: 1px solid var(--ys-border);
	}
}

/* 新拟态：内嵌阴影的表格容器、双面阴影的充值方式卡片，全部拉平 */
.table-responsive,
.user-center_resources,
.h100p.user-center_resources,
.addfunds-payment:hover,
.addfunds-payment.active {
	box-shadow: none !important;
}

.table-responsive,
.user-center_resources {
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius);
}

/* 选中/悬停改用边框高亮，替代原来的新拟态凸起 */
.addfunds-payment:hover,
.addfunds-payment.active {
	border-color: var(--ys-primary) !important;
}

/* 表单控件（含新拟态 select）：不要阴影，与输入框统一为 1px 边框 + 8px 圆角 */
select,
.selectpicker,
.bootstrap-select > .dropdown-toggle {
	box-shadow: none !important;
}

/* 列表项 hover 的品牌色发光 -> 改浅色底 */
.security-items .security-item:hover,
.ticket-item:hover {
	box-shadow: none !important;
	background-color: #f7f9fc;
}

/* 按钮不发光：购物车的按钮就没有光晕。
   焦点环保留 —— 那是键盘可达性反馈，删掉会让键盘用户失去当前位置提示。 */
.btn,
.btn:hover,
.btn:active,
.btn.active {
	box-shadow: none !important;
}

.btn:focus,
.btn.focus {
	box-shadow: 0 0 0 .2rem rgba(22, 104, 220, .25) !important;
}

/* L2：所有浮层共用一档投影，深浅一致 */
.dropdown-menu,
.modal-content,
.popover,
.tooltip-inner,
.select2-dropdown,
.select2-container--open .select2-dropdown {
	box-shadow: var(--ys-shadow-float) !important;
}

/* L3：返回顶部。它是浮在内容之上的操作按钮，保留投影才「浮」得起来；
   主题原值是新拟态的 8px 8px 20px（单向偏移，观感偏脏），换成居中扩散。 */
#tthetop,
.pls-back2top {
	box-shadow: var(--ys-shadow-float) !important;
}

/* ==========================================================================
   7. 触控目标
   --------------------------------------------------------------------------
   实测：卡片与表格里的独立操作链接（"查看全部实例""查看更多""立即申请为推介人"等）
   高度只有 16~19px，低于 WCAG 2.2 AA 要求的 24×24 CSS px 最低线。
   用 padding 补足可点高度而不是 min-height，避免撑动行高、影响段落排版。
   排除 .btn（自带尺寸）与 .dropdown-item / .nav-link（自带 padding）。
   ========================================================================== */
.card a:not(.btn):not(.nav-link):not(.dropdown-item),
.table a:not(.btn):not(.dropdown-item) {
	display: inline-block;
	min-height: 24px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* 顶栏的文字/图标链接（首页、帮助、工单、消息、费用、购物车、LOGO）
   实测行盒只有 19px 高，同样低于 24px。这里给它们撑到 24px。
   ---- 这些 <a> 是行内元素，min-height 对其无效，必须改成 flex 容器；
        顶栏本身有 68px 高度，撑到 24px 不会影响排版。 */
#page-topbar .navbar-header a:not(.btn):not(.dropdown-item) {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ==========================================================================
   8. 页面切换过渡
   --------------------------------------------------------------------------
   用户中心目前是各页硬切，观感生硬。这里做「淡出 → 进度条 → 淡入」：

     · 离开：点击内部链接后把页面压到 .55 透明度（**不是 0**）。
       压到 0 会让等待服务端渲染的那 1~2 秒变成白屏，比硬切更难受；
       留一点可见内容 + 顶部进度条，等待感会明显改善。
     · 进入：新文档由 head 里的同步脚本挂上 ys-page-enter → ys-page-ready，
       整页淡入。脚本必须早于首屏绘制，否则会先闪一下再淡入。
     · 只用 opacity，**不用 transform**：#page-topbar 与 .vertical-menu 都是
       position:fixed，给祖先加 transform 会把它们的包含块改掉、定位全乱。
   ========================================================================== */
html.ys-page-enter body {
	opacity: 0;
}

html.ys-page-ready body {
	opacity: 1;
	transition: opacity .24s ease;
}

body.ys-page-out {
	opacity: .55 !important;
	transition: opacity .18s ease !important;
}

#ysProgress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--ys-primary);
	z-index: 10000;
	pointer-events: none;
	transition: width .45s cubic-bezier(.22, .61, .36, 1), opacity .3s ease .15s;
}

#ysProgress.ys-run {
	width: 82%;
}

#ysProgress.ys-done {
	width: 100%;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

	html.ys-page-ready body {
		transition: none;
	}

	body.ys-page-out {
		opacity: 1 !important;
		transition: none !important;
	}

	#ysProgress {
		display: none;
	}
}

/* ==========================================================================
   9. 顶栏 LOGO 去重 + 侧栏菜单文字色
   ========================================================================== */

/* 顶栏里 .logo-dark 与 .logo-light 是**同一张图的两套变体**，主题原本靠
   body[data-topbar] / body[data-sidebar] 二选一显示。实测本站两张同时上屏
   （各 150×38 都可见），看起来就是「两个 LOGO」。
   这里把开关收紧成明确规则，保证任何 data-* 组合下都只显示一张。 */
.logo-light {
	display: none !important;
}

body[data-topbar="dark"] .logo-light,
body[data-sidebar="dark"] .logo-light,
body[data-sidebar="colored"] .logo-light {
	display: block !important;
}

body[data-topbar="dark"] .logo-dark,
body[data-sidebar="dark"] .logo-dark,
body[data-sidebar="colored"] .logo-dark {
	display: none !important;
}

/* 侧栏菜单文字改为近黑。用设计令牌里的主文本色 #1a1f36 而不是纯 #000：
   纯黑在白底上对比度 21:1，长时间阅读容易发涩；#1a1f36 视觉上同样是黑，
   且与站内其它主文本一致。子项比父项略浅一档，保持层级可辨。 */
#sidebar-menu ul li a {
	color: var(--ys-text);
}

#sidebar-menu ul li a i {
	color: var(--ys-text);
}

#sidebar-menu ul li ul.sub-menu li a {
	color: var(--ys-text);
}

/* 悬停与选中态仍走主色，避免"全黑"之后没有任何状态反馈 */
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover i {
	color: var(--ys-primary);
}

/* ==========================================================================
   10. 侧栏与主内容区的横向间距
   --------------------------------------------------------------------------
   主题里两个值互相矛盾（实测）：
     · .vertical-menu 实际宽度  → 230px（change.qr.css 的 .vertical-menu{width:230px}）
     · .main-content 左外边距   → 250px（app.min.css）
     · .footer 的 left          → 230px（app.min.css）
   也就是说页脚对齐的是 230，主内容却按 250 排 —— 侧栏右沿到内容卡片左沿
   因此多出 20px 空隙，加上内容区自身 15px 内边距，总共 35px，视觉上"隔了一条河"。

   这里把主内容区对齐到侧栏的真实宽度 230px，与页脚保持一致，
   最终留出 15px 的常规栏间距。
   用 min-width 限定桌面端：移动端靠 app.min.css 的
   `@media (max-width:992px){.main-content{margin-left:0!important}}` 控制，
   那条带 !important，不该也不需要被这里覆盖。
   ========================================================================== */
@media (min-width: 993px) {
	.main-content {
		margin-left: 230px;
	}

	/* 折叠态保持一致：侧栏 70px / 内容 70px（供应商已有该规则，这里显式写出便于对照） */
	.vertical-collpsed .main-content {
		margin-left: 70px;
	}
}

/* ==========================================================================
   11. 分页统一
   --------------------------------------------------------------------------
   实测 27 处分页的 DOM 其实是**完全一致**的（都是
   `<ul class="pagination pagination-sm">` 套在 `.table-footer > .table-pagination` 里），
   所以"看着不一样"不是结构分裂，而是**这一层没有统一样式**：有的页面靠
   app.min.css 的默认样式、有的页面分页不在 .table-footer 内，间距/圆角/选中态
   就各不相同。

   这里一次性给三个类上样式，覆盖全部页面（含暂未使用共用组件的那 20 多个模板）：
     .table-footer     → 分页区与表格的分隔线、左右两端对齐（左"共N条"、右页码）
     .table-pageinfo   → 说明文字用次级文本色
     .limitSel         → "每页条数"下拉，统一成站内输入框的样式
     .pagination       → 页码胶囊化，选中态用品牌色，圆角并入 8px 体系

   注意 .limitSel 原本是 id="limitSel"（硬编码 ID），一页放两个列表就会出现
   重复 ID、切换每页条数会同时命中两个下拉。已整体改为 class（21 处标记 +
   31 处 jQuery 选择器），这里按 class 上样式。
   ========================================================================== */
.table-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ys-border);
}

.table-tools {
	flex: 1 1 auto;
}

.table-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.table-pageinfo {
	color: var(--ys-text-muted);
	font-size: 14px;
}

.table-pageinfo .form-inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* 每页条数下拉：与站内输入框统一（边框 + 8px 圆角），固定最小宽度避免长短不一 */
.limitSel {
	min-width: 78px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius);
	background-color: #fff;
	color: var(--ys-text);
	font-size: 14px;
}

/* 页码：胶囊化。同时覆盖 Bootstrap 4 的 .page-item/.page-link 与旧版
   直接写在 li>a/li>span 上的结构，避免因核心输出的 HTML 版本不同而漏样式。 */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.pagination > li > a,
.pagination > li > span,
.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius);
	background-color: #fff;
	color: var(--ys-text);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.pagination > li > a:hover,
.pagination .page-link:hover {
	border-color: var(--ys-primary);
	background-color: #f2f7ff;
	color: var(--ys-primary);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination .page-item.active .page-link {
	border-color: var(--ys-primary);
	background-color: var(--ys-primary);
	color: #fff;
}

.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination .page-item.disabled .page-link {
	border-color: var(--ys-border);
	background-color: #fff;
	color: #aeb6c2;
}

/* Bootstrap 对首/末项单独写了 .pagination > li:first-child > a 之类的圆角规则，
   特异性高于上面那条通用规则 —— 结果是首尾页码只圆外侧两角、中间却是全圆角
   （实测首个页码算出 0px 8px 8px 0px）。这里用同等特异性补回，让每个页码一样。 */
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
	border-radius: var(--ys-radius);
}

/* 分页/筛选里的小下拉菜单，阴影单独收一档
   ----------------------------------------------------------------------
   第 6 节的 --ys-shadow-float 是按弹窗那种大面板定的。套到"每页条数"这种
   只有几十像素宽的小菜单上明显偏重。
   更关键的是 bootstrap-select 的输出结构是两层都带 .dropdown-menu：

     <div class="dropdown-menu">        ← 外层
       <ul class="dropdown-menu inner"> ← 内层

   两层都命中同一条规则、阴影叠在一起，视觉上就"重了两倍"。
   这里外层收浅、内层直接去掉，两者叠加后才是设计想要的一档。 */
.bootstrap-select > .dropdown-menu {
	box-shadow: 0 3px 10px rgba(23, 38, 70, .08) !important;
}

.bootstrap-select .dropdown-menu.inner {
	box-shadow: none !important;
}

/* ==========================================================================
   12. 资源列表：到期时间分档着色
   --------------------------------------------------------------------------
   接口返回的行里单元格没有类名（实测 5 个 td 的 class 全为空），
   所以颜色由 clientarea.tpl 里那段脚本在渲染后写入 data-ys-exp-days 与
   对应类名，这里只负责上色。
     数据来源是行内「到期时间」的文本，脚本按表头文字定位列，不写死列序号。
   阈值：≤7 天（危险红）／≤30 天（警示橙），与站内其它语义色一致。
   ========================================================================== */
.user-center_resources td[data-ys-exp-days] {
	font-weight: 600;
}

.user-center_resources td.ys-exp-warn {
	color: #a35a00;
}

.user-center_resources td.ys-exp-soon {
	color: #c62828;
}

/* 整行淡红底，让"要到期了"在扫视时先被看到。
   :has() 在旧浏览器上不支持 —— 不支持时只是少一层底色，主要信号（单元格红字）仍在。 */
.user-center_resources tbody tr:has(td.ys-exp-soon) {
	background-color: #fff5f5;
}









/* ==========================================================================
   13. 总览页卡片层级
   --------------------------------------------------------------------------
   实测总览页有 9 张卡，张张权重相同，扫视时找不到重点。这里只做一件事：
   把「资源列表」定为主卡（用户打开总览页真正要看的东西），其余压成辅助卡。
   主卡：标题更重、白底、留白更大；辅助卡：标题更小更淡、卡片间距收紧。
   ========================================================================== */
#sourceListBox {
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius);
}

#sourceListBox .card-title,
#sourceListBox h4.card-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ys-text);
}

/* 辅助卡：标题降一档，弱化到与正文同级偏上的位置 */
.card-body > h4.card-title,
.card > .card-body > h4.card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ys-text-muted);
}

/* 待办事项的三个数字：只在"有内容"时才值得被看见，
   全为 0 的卡片自然弱化（数字仍是原色，不额外加装饰色）。 */
.funds-item-header {
	font-size: 12px;
	color: var(--ys-text-muted);
}

/* ==========================================================================
   14. 个人信息页（details）重写配套样式
   --------------------------------------------------------------------------
   改前是一个 .card 里塞 3 个 .card-body，三组信息无分隔，故显得简陋。
   重写后拆成独立卡片，这里只补几处新结构需要的样式：
     .ys-card-hint   卡片标题下的一句说明（次级文本色，不抢标题）
     .ys-info-row    只读信息行（标签左、值右），替代原先 readonly 输入框
     .ys-save-card   提交卡：桌面端吸顶，长表单不必拖到底部才能保存
   ========================================================================== */
.ys-card-hint {
	margin: 0;
	font-size: 12px;
	color: var(--ys-text-muted);
}

.ys-info-list {
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius);
	padding: 4px 14px;
	background-color: #fbfcfe;
}

.ys-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
}

.ys-info-row + .ys-info-row {
	border-top: 1px solid var(--ys-border);
}

.ys-info-label {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--ys-text-muted);
}

.ys-info-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--ys-text);
	word-break: break-all;
}

/* 与输入框同高同框，放在表单里不会"缺一块" */
.ys-info-value-box {
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid var(--ys-border);
	border-radius: var(--ys-radius);
	background-color: #fbfcfe;
	font-weight: 400;
}

.ys-info-link {
	font-size: 13px;
	color: var(--ys-primary);
}

@media (min-width: 992px) {
	.ys-save-card {
		position: sticky;
		top: calc(var(--ys-header-h) + 16px);
	}
}

/* ==========================================================================
   15. 个人信息页：空值、实名徽标、表单小节标题
   ---- 徽标配色沿用前面无障碍修复后的语义色（成功绿 #0a7d3c / 警示橙 #a35a00），
        避免又引入新的、对比度不达标的色值。
   ========================================================================== */
.ys-info-empty {
	color: var(--ys-text-muted);
	font-weight: 400;
}

.ys-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
}

.ys-badge-ok {
	background-color: #e8f6ed;
	color: #0a7d3c;
}

.ys-badge-todo {
	background-color: #fdf3e6;
	color: #a35a00;
}

.ys-form-section {
	margin: 8px 0 14px;
	padding-left: 10px;
	border-left: 3px solid var(--ys-primary);
	color: var(--ys-text);
	font-size: 14px;
	font-weight: 600;
}


/* ==========================================================================
   用户中心设计底座（第①步：只动 CSS，不改模板）
   --------------------------------------------------------------------------
   目标：把首页/登录页已定下的语言（色板 #1668dc · #1a1f36 · #6b7280 · #98a2b3、
   卡 14px / 控件 10px 圆角、描边 rgba(23,38,70,.10~.16)、卡片一层柔和阴影、
   控件无阴影）铺到用户中心的所有页面。做法是"按通用元素统一"——
   .card / .table / .badge / .btn / .form-control / .nav-tabs / .pagination /
   页头，这样 30 多个页面一次到位，不需要逐页改。
   作用域用 body:has(.main-content)（用户中心每页都有），认证页的规则在
   ys-auth.css 里优先级更高，不受影响。
   ========================================================================== */

:root {
	--ys-primary: #1668dc;
	--ys-primary-hover: #1259c0;
	--ys-text: #1a1f36;
	--ys-text-sub: #6b7280;
	--ys-text-weak: #98a2b3;
	--ys-line: rgba(23, 38, 70, .10);
	--ys-line-strong: rgba(23, 38, 70, .16);
	--ys-radius: 10px;
	--ys-radius-card: 14px;
	--ys-shadow-card: 0 10px 30px rgba(23, 38, 70, .05);
	--ys-gap: 12px;
	--ys-ok: #16a34a;
	--ys-warn: #f59e0b;
	--ys-danger: #dc2626;
	--ys-page-bg: #f6f8fc;
}

/* ---------- ① 页面底色与页头 ---------- */
body:has(.main-content) {
	background-color: var(--ys-page-bg);
	color: var(--ys-text);
}

body:has(.main-content) .page-content {
	padding: 18px 20px 28px;
}

body:has(.main-content) .page-title-box {
	margin-bottom: 16px;
}

body:has(.main-content) .page-title-box h4 {
	font-size: 20px;
	font-weight: 600;
	color: var(--ys-text);
	margin: 0;
}

/* ---------- ② 卡片：统一圆角/描边/一层柔和阴影 ---------- */
body:has(.main-content) .card {
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-card) !important;
	box-shadow: var(--ys-shadow-card) !important;
	background: #fff;
}

body:has(.main-content) .card-header {
	background: #fff;
	border-bottom: 1px solid var(--ys-line);
	padding: 14px 18px;
	font-weight: 600;
	color: var(--ys-text);
}

body:has(.main-content) .card-body {
	padding: 18px;
}

/* ---------- ③ 表格 ---------- */
body:has(.main-content) .table {
	margin-bottom: 0;
	color: var(--ys-text);
}

body:has(.main-content) .table > thead th {
	border-bottom: 1px solid var(--ys-line-strong);
	border-top: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ys-text-sub);
	white-space: nowrap;
	padding: 12px 14px;
}

body:has(.main-content) .table > tbody td {
	border-top: 1px solid var(--ys-line);
	padding: 14px;
	font-size: 13.5px;
	vertical-align: middle;
}

body:has(.main-content) .table-hover > tbody > tr:hover {
	background-color: #f7f9fc;
}

/* ---------- ④ 按钮：主按钮品牌蓝，次要按钮描边，一律无阴影 ---------- */
body:has(.main-content) .btn {
	border-radius: var(--ys-radius) !important;
	font-size: 13.5px;
	font-weight: 500;
	box-shadow: none !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body:has(.main-content) .btn-primary {
	background-color: var(--ys-primary) !important;
	background-image: none !important;
	border-color: var(--ys-primary) !important;
	color: #fff !important;
}

body:has(.main-content) .btn-primary:hover,
body:has(.main-content) .btn-primary:focus {
	background-color: var(--ys-primary-hover) !important;
	border-color: var(--ys-primary-hover) !important;
}

body:has(.main-content) .btn-outline-primary,
body:has(.main-content) .btn-outline-secondary {
	background-color: #fff !important;
	border-color: var(--ys-line-strong) !important;
	color: var(--ys-text-sub) !important;
}

body:has(.main-content) .btn-outline-primary:hover {
	border-color: var(--ys-primary) !important;
	color: var(--ys-primary) !important;
}

/* ---------- ⑤ 表单控件 ---------- */
body:has(.main-content) .form-control,
body:has(.main-content) .custom-select,
body:has(.main-content) .bootstrap-select > .dropdown-toggle {
	height: 44px;
	font-size: 14px;
	color: var(--ys-text);
	background-color: #fff;
	border: 1px solid var(--ys-line-strong);
	border-radius: var(--ys-radius) !important;
	box-shadow: none !important;
	transition: border-color .2s ease;
}

body:has(.main-content) .form-control:hover,
body:has(.main-content) .custom-select:hover {
	border-color: rgba(22, 104, 220, .5);
}

body:has(.main-content) .form-control:focus,
body:has(.main-content) .custom-select:focus {
	border-color: var(--ys-primary);
	box-shadow: none !important;
}

body:has(.main-content) .form-control::placeholder {
	color: #a8b0bf;
}

body:has(.main-content) label,
body:has(.main-content) .col-form-label {
	font-size: 13px;
	color: var(--ys-text-sub);
}

/* ---------- ⑥ 标签页：下划线式（与登录页一致）---------- */
body:has(.main-content) .nav-tabs {
	border-bottom: 1px solid var(--ys-line);
	gap: 28px;
}

body:has(.main-content) .nav-tabs .nav-link {
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	border-radius: 0 !important;
	padding: 0 2px 10px;
	font-size: 14.5px;
	color: var(--ys-text-weak) !important;
	background: transparent !important;
}

body:has(.main-content) .nav-tabs .nav-link.active {
	color: var(--ys-primary) !important;
	font-weight: 600;
	border-bottom-color: var(--ys-primary) !important;
}

body:has(.main-content) .nav-tabs .nav-link:hover {
	color: var(--ys-primary) !important;
}

/* ---------- ⑦ 徽标（状态）：统一浅色底 + 同色字 ---------- */
body:has(.main-content) .badge {
	padding: 3px 9px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 999px;
}

body:has(.main-content) .badge-success,
body:has(.main-content) .badge-soft-success {
	color: var(--ys-ok) !important;
	background: rgba(22, 163, 74, .10) !important;
}

body:has(.main-content) .badge-warning,
body:has(.main-content) .badge-soft-warning {
	color: var(--ys-warn) !important;
	background: rgba(245, 158, 11, .12) !important;
}

body:has(.main-content) .badge-danger,
body:has(.main-content) .badge-soft-danger {
	color: var(--ys-danger) !important;
	background: rgba(220, 38, 38, .10) !important;
}

body:has(.main-content) .badge-info,
body:has(.main-content) .badge-primary,
body:has(.main-content) .badge-soft-info {
	color: var(--ys-primary) !important;
	background: rgba(22, 104, 220, .10) !important;
}

/* ---------- ⑧ 分页 ---------- */
body:has(.main-content) .pagination {
	gap: 6px;
	margin: 18px 0 0;
}

body:has(.main-content) .pagination .page-link {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	font-size: 13px;
	color: var(--ys-text-sub);
	background: #fff;
	border: 1px solid var(--ys-line-strong);
	border-radius: 8px !important;
	box-shadow: none !important;
}

body:has(.main-content) .pagination .page-link:hover {
	color: var(--ys-primary);
	border-color: var(--ys-primary);
}

body:has(.main-content) .pagination .page-item.active .page-link {
	color: #fff;
	background: var(--ys-primary);
	border-color: var(--ys-primary);
}

body:has(.main-content) .pagination .page-item.disabled .page-link {
	color: #c3c9d4;
	background: #f7f9fc;
}

/* ---------- ⑨ 提示条 / 下拉菜单 与卡片同规范 ---------- */
body:has(.main-content) .alert {
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius);
	box-shadow: none;
}

body:has(.main-content) .dropdown-menu {
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius);
	box-shadow: 0 10px 30px rgba(23, 38, 70, .08);
}

/* ---------- ⑩ 移动端 ---------- */
@media (max-width: 767.98px) {
	body:has(.main-content) .page-content {
		padding: 14px 12px 22px;
	}

	body:has(.main-content) .card-body {
		padding: 14px;
	}

	body:has(.main-content) .card {
		border-radius: 12px !important;
	}
}


/* ---------- 顶栏让位（修复内容被固定顶栏遮住）----------
   顶栏 #page-topbar 是固定定位、高 70px；主题原本靠 .page-content 的
   padding-top: calc(70px + 24px) 给它让位。我上一版把 padding 简写成
   "18px 20px 28px"，顶部留白一起没了 → 主内容钻到顶栏下面。
   这里把顶部留白还原为 70px + 18px（保留我收窄过的左右/底部内边距）。 */
body:has(.main-content) .page-content {
	padding: calc(70px + 8px) 6px 28px;
}

@media (max-width: 767.98px) {
	body:has(.main-content) .page-content {
		padding: calc(70px + 8px) 12px 22px;
	}
}


/* ==========================================================================
   产品/服务列表页（service.tpl 及其 _cdn / _cloud 变体）
   --------------------------------------------------------------------------
   这页没有独立样式文件，结构是：筛选行（.row 里的输入框/下拉/搜索）
   + 一张 .table + 状态 .badge + 分页 + 行内 .btn-sm 操作按钮。
   通用部分（卡片/表格/徽标/分页/表单）已由底座覆盖，这里只补这页特有的：
   筛选行排布、表格与卡片的贴合、小按钮与页数选择器的尺寸。
   ========================================================================== */

/* 筛选行：控件等高、间距统一，窄屏换行 */
body:has(.main-content) .card-body .row .form-control,
body:has(.main-content) .card-body .row .custom-select {
	height: 42px;
}

body:has(.main-content) .card-body .row > [class*="col-"] {
	margin-bottom: 10px;
}

/* 表格卡片：去掉表头与卡片内边距的重复留白，表格铺满卡片 */
body:has(.main-content) .card-body > .table-responsive,
body:has(.main-content) .card-body > .table {
	margin: 0 -18px;
	width: calc(100% + 36px);
}

body:has(.main-content) .table > thead th:first-child,
body:has(.main-content) .table > tbody td:first-child {
	padding-left: 18px;
}

body:has(.main-content) .table > thead th:last-child,
body:has(.main-content) .table > tbody td:last-child {
	padding-right: 18px;
}

/* 行内操作按钮：小尺寸、描边为主，主操作才用品牌蓝 */
body:has(.main-content) .table .btn-sm,
body:has(.main-content) .card-body .btn-sm {
	height: 30px;
	padding: 0 10px;
	font-size: 12.5px;
	border-radius: 8px !important;
	line-height: 1;
}

body:has(.main-content) .table .btn-primary.btn-sm {
	background-color: var(--ys-primary) !important;
	border-color: var(--ys-primary) !important;
}

body:has(.main-content) .table .btn-outline-primary.btn-sm,
body:has(.main-content) .table .btn-outline-secondary.btn-sm {
	background: #fff !important;
	border-color: var(--ys-line-strong) !important;
	color: var(--ys-text-sub) !important;
}

body:has(.main-content) .table .btn-outline-primary.btn-sm:hover {
	border-color: var(--ys-primary) !important;
	color: var(--ys-primary) !important;
}

/* 表格里的状态徽标与时间列不换行 */
body:has(.main-content) .table .badge,
body:has(.main-content) .table .text-black-50 {
	white-space: nowrap;
}

/* 每页条数选择器（limitSel）：与分页同高 */
body:has(.main-content) select.limitSel,
body:has(.main-content) .limitSel {
	height: 34px !important;
	padding: 0 26px 0 10px;
	font-size: 13px;
	border: 1px solid var(--ys-line-strong);
	border-radius: 8px;
	background-color: #fff;
}

/* 分页容器：与卡片拉开一点距离 */
body:has(.main-content) .pagination {
	margin-top: 16px !important;
}

@media (max-width: 767.98px) {
	body:has(.main-content) .card-body > .table-responsive,
	body:has(.main-content) .card-body > .table {
		margin: 0 -14px;
		width: calc(100% + 28px);
	}

	body:has(.main-content) .table > thead th,
	body:has(.main-content) .table > tbody td {
		padding: 10px 12px;
		font-size: 13px;
	}
}


/* ==========================================================================
   总览（仪表盘）页 /clientarea
   --------------------------------------------------------------------------
   结构 = 一行 KPI（.funds-items > .funds-item，内含 .funds-item-header 与 .funds-num）
   + 若干卡片（.card > .card-title + .card-body）。
   这页只做"骨架化"，不改数据与模板：
     · KPI 统一为 14px 圆角白卡、数字用品牌蓝大字、标签次要色；
     · 卡片标题统一 15px/600 深色与下间距；
     · 栅格间距统一 16px（消除 Bootstrap 默认 gutter 造成的忽宽忽窄）。
   ========================================================================== */

/* ---------- ② KPI 行 ---------- */
body:has(.main-content) .funds-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius-card);
	box-shadow: var(--ys-shadow-card);
	min-width: 0;
}

body:has(.main-content) .funds-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
	color: var(--ys-text-sub);
}

body:has(.main-content) .funds-num {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--ys-primary);
	word-break: break-all;
}

body:has(.main-content) .funds-item-other {
	font-size: 12.5px;
	color: var(--ys-text-weak);
}

/* ---------- ③ 卡片标题 ---------- */
body:has(.main-content) .card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ys-text);
	margin: 0 0 14px;
}

body:has(.main-content) .card-title.mb-4 {
	margin-bottom: 14px !important;
}

/* 卡片内的小标题（消费/账单等次级标题） */
body:has(.main-content) .card-body h5 {
	font-size: 14px;
	font-weight: 600;
	color: var(--ys-text);
	margin: 0 0 10px;
}

body:has(.main-content) .card-body a {
	color: var(--ys-primary);
}

body:has(.main-content) .card-body a:hover {
	color: var(--ys-primary-hover);
}

/* ---------- ④ 进度条（安全中心等）---------- */
body:has(.main-content) .progress {
	height: 6px;
	background: #eef2f7;
	border-radius: 999px;
	box-shadow: none;
}

body:has(.main-content) .progress-bar {
	background-color: var(--ys-primary);
	border-radius: 999px;
}

/* ---------- ⑤ 窄屏：KPI 两列 → 一列 ---------- */
@media (max-width: 991.98px) {
	body:has(.main-content) .funds-num {
		font-size: 22px;
	}
}



/* ---------- 撤回说明 ----------
   上一版对 .row / [class*=col-] 的间距覆盖与 .funds-items 的 display:grid
   都与主题自带的 Bootstrap 4 栅格冲突（BS4 用 -15px/15px gutter），
   造成列挤压与重叠，已全部撤回；KPI 卡片的样式（.funds-item 内部）保留。 */


/* ==========================================================================
   账单 / 账单明细页（billing.tpl、invoicelist.tpl）
   --------------------------------------------------------------------------
   只做"外观与对齐"，**不碰任何栅格/行/列**（上一次踩过 BS4 gutter 的坑）。
   通用部分（卡片/表格/徽标/分页/按钮）已由底座覆盖，这里补：
   金额右对齐、状态徽标不换行、操作列不换行、行高与悬停。
   ========================================================================== */

/* 金额列右对齐（账单页的金额都在 td 里，用 text-right 标记） */
body:has(.main-content) .table td.text-right,
body:has(.main-content) .table th.text-right {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* 状态徽标与操作列不换行 */
body:has(.main-content) .table td .badge,
body:has(.main-content) .table td .btn,
body:has(.main-content) .table td.text-nowrap {
	white-space: nowrap;
}

/* 行内操作按钮统一小尺寸（与产品列表一致） */
body:has(.main-content) .table td .btn {
	height: 30px;
	padding: 0 10px;
	font-size: 12.5px;
	border-radius: 8px !important;
	line-height: 1;
}

/* 订单/账单号等等宽数字，避免数字跳动 */
body:has(.main-content) .table td {
	font-variant-numeric: tabular-nums;
}

/* 表格里次要信息（时间、单号）用次要色小字 */
body:has(.main-content) .table td .text-muted,
body:has(.main-content) .table td small {
	color: var(--ys-text-weak) !important;
	font-size: 12.5px;
}


/* ==========================================================================
   详情页与表单页（产品详情 / 账单详情 / 个人信息 / 安全设置 / 实名认证）
   --------------------------------------------------------------------------
   同样只做外观与节奏：**不碰栅格、不碰行/列、不碰 display**。
   补的是这类页面的共性元素：只读信息行、表单节奏、说明文字、区块小标题、
   详情里的键值列表（dl/dt/dd）。
   ========================================================================== */

/* ① 表单节奏：字段之间 16px，标签与控件 6px */
body:has(.main-content) .form-group {
	margin-bottom: 16px;
}

body:has(.main-content) .form-group > label {
	margin-bottom: 6px;
}

/* ② 只读信息行（个人信息等页面的「字段 + 值」展示） */
body:has(.main-content) .ys-info-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--ys-line);
	font-size: 13.5px;
}

body:has(.main-content) .ys-info-row:last-child {
	border-bottom: 0;
}

body:has(.main-content) .ys-info-row .ys-info-label {
	flex: 0 0 120px;
	color: var(--ys-text-weak);
}

body:has(.main-content) .ys-info-row .ys-info-value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ys-text);
	word-break: break-all;
}

/* ③ 说明文字 / 表单提示 */
body:has(.main-content) .form-text,
body:has(.main-content) .invalid-feedback {
	font-size: 12.5px;
	color: var(--ys-text-weak);
}

body:has(.main-content) .text-muted {
	color: var(--ys-text-weak) !important;
}

/* ④ 区块小标题（卡片内的 h5/h6 与分割标题） */
body:has(.main-content) .card-body h6 {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ys-text);
	margin: 0 0 10px;
}

/* ⑤ 详情里的键值列表 */
body:has(.main-content) dl.row {
	margin-bottom: 0;
}

body:has(.main-content) dl dt {
	font-size: 13px;
	font-weight: 500;
	color: var(--ys-text-weak);
	margin-bottom: 4px;
}

body:has(.main-content) dl dd {
	font-size: 13.5px;
	color: var(--ys-text);
	margin-bottom: 14px;
	word-break: break-all;
}

/* ⑥ 实名/安全页的状态提示条（成功/警告色，浅底同色） */
body:has(.main-content) .bg-soft-success,
body:has(.main-content) .bg-soft-warning,
body:has(.main-content) .bg-soft-danger {
	border-radius: var(--ys-radius);
	padding: 12px 14px;
	font-size: 13.5px;
	border: 1px solid transparent;
}

body:has(.main-content) .bg-soft-success {
	color: var(--ys-ok) !important;
	background: rgba(22, 163, 74, .08) !important;
	border-color: rgba(22, 163, 74, .18) !important;
}

body:has(.main-content) .bg-soft-warning {
	color: #b45309 !important;
	background: rgba(245, 158, 11, .10) !important;
	border-color: rgba(245, 158, 11, .22) !important;
}

body:has(.main-content) .bg-soft-danger {
	color: var(--ys-danger) !important;
	background: rgba(220, 38, 38, .08) !important;
	border-color: rgba(220, 38, 38, .18) !important;
}


/* ==========================================================================
   第④步：移动端逐页统一（纯外观与节奏，不碰栅格/行/列）
   --------------------------------------------------------------------------
   覆盖用户中心所有页面在窄屏下的共性：卡片与内边距、表格横向滚动与紧凑、
   表单与控件、分页、徽标、图片、弹窗宽度、只读信息行改为上下堆叠。
   只读信息行 .ys-info-row 是本项目自建的类，改它的 display 是安全的。
   ========================================================================== */
@media (max-width: 767.98px) {

	/* 卡片与页头 */
	body:has(.main-content) .card-header {
		padding: 12px 14px;
		font-size: 14px;
	}

	body:has(.main-content) .page-title-box h4 {
		font-size: 18px;
	}

	/* 表格：横向滚动 + 紧凑内边距 */
	body:has(.main-content) .table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	body:has(.main-content) .table > thead th,
	body:has(.main-content) .table > tbody td {
		padding: 10px 12px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* 表单控件占满、控件高度略降 */
	body:has(.main-content) .form-control,
	body:has(.main-content) .custom-select {
		height: 42px;
		font-size: 14px;
	}

	body:has(.main-content) .form-group {
		margin-bottom: 14px;
	}

	/* 按钮：保证可点面积，字号不缩 */
	body:has(.main-content) .btn {
		min-height: 38px;
		padding: 0 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	body:has(.main-content) .table td .btn,
	body:has(.main-content) .btn-sm {
		min-height: 30px;
		padding: 0 10px;
	}

	/* 分页：可换行、方片略小 */
	body:has(.main-content) .pagination {
		flex-wrap: wrap;
		gap: 4px;
	}

	body:has(.main-content) .pagination .page-link {
		min-width: 30px;
		height: 30px;
		font-size: 12.5px;
	}

	/* 徽标与弱文字 */
	body:has(.main-content) .badge {
		font-size: 11.5px;
		padding: 2px 8px;
	}

	/* 只读信息行：窄屏改为上下堆叠 */
	body:has(.main-content) .ys-info-row {
		flex-direction: column;
		gap: 4px;
		padding: 10px 0;
	}

	body:has(.main-content) .ys-info-row .ys-info-label {
		flex: 0 0 auto;
	}

	/* 详情键值列表：上下堆叠 */
	body:has(.main-content) dl dt {
		margin-bottom: 2px;
	}

	body:has(.main-content) dl dd {
		margin-bottom: 12px;
	}

	/* 弹窗与下拉自适应 */
	body:has(.main-content) .modal-dialog {
		margin: 14px auto;
		max-width: calc(100vw - 28px);
	}

	body:has(.main-content) .dropdown-menu {
		max-width: calc(100vw - 28px);
	}

	/* 图片与富文本不溢出 */
	body:has(.main-content) .card-body img,
	body:has(.main-content) .card-body table {
		max-width: 100%;
	}
}


/* ---------- 总览（/clientarea）：只留数据、收起操作 ----------
   需求："用户中心主要显示数据，不需要有什么操作"。
   作用域只针对总览页（该页独有的 .funds-items 容器），不影响其它页面。
   收起：卡片内的操作按钮（管理/续费/支付等）与行内操作下拉菜单。
   访问产品的入口由左侧导航与「全部产品」承担，不会因此断链。 */
body:has(.funds-items) .card-body .btn,
body:has(.funds-items) .card-body .btn-sm,
body:has(.funds-items) .card-body .dropdown-toggle,
body:has(.funds-items) .card-body .dropdown-menu {
	display: none !important;
}

/* 收起按钮后，行内剩余内容左对齐更整洁 */
body:has(.funds-items) .table td:last-child:empty {
	display: none;
}


/* ---------- 总览：空 KPI 带自动隐藏 ----------
   顶部三张数字卡已全部移入右侧栏，容器若为空则不再占位（纯 CSS，不改模板）。 */
body:has(.main-content) .funds-items:not(:has(.funds-item)) {
	display: none !important;
}

/* 右栏的数字卡：与卡片规范一致，窄屏不再堆叠成超长列表 */
body:has(.funds-items) .col-md-4 .funds-item {
	margin-bottom: 12px;
}


/* ---------- 右栏：账号完善度条目（自安全中心移入）----------
   这些条目原本是 .app-overview-grid 的网格项，进右栏后失去网格父级，
   这里按"紧凑只读行"重排：一行一项、图标+文字、虚线分隔、悬停变主色。
   只作用于总览页右栏（body:has(.funds-items) .col-md-4），不影响其它页面。 */
body:has(.funds-items) .col-md-4 .app-overview-col {
	display: block;
	width: auto;
	padding: 0;
	margin: 0;
}

body:has(.funds-items) .col-md-4 .app-overview-col > .app-overview-grid__box {
	display: block;
}

body:has(.funds-items) .col-md-4 ._ov-block-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ys-text-sub);
	text-decoration: none;
	border-bottom: 1px dashed var(--ys-line);
	transition: color .2s ease;
}

body:has(.funds-items) .col-md-4 .app-overview-col:last-child ._ov-block-item {
	border-bottom: 0;
}

body:has(.funds-items) .col-md-4 ._ov-block-item:hover {
	color: var(--ys-primary);
}

body:has(.funds-items) .col-md-4 ._ov-block-item i,
body:has(.funds-items) .col-md-4 ._ov-block-item svg {
	flex: 0 0 auto;
	font-size: 15px;
}


/* ---------- 总览：账号卡（左栏顶部）----------
   头像用品牌标占位（主题没有头像字段，已勘察确认），横排：头像 52px + 右侧账号信息。 */
.ys-acct {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.ys-acct-avatar {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	object-fit: contain;
	border-radius: 12px;
	background: #f2f7ff;
	padding: 6px;
	box-sizing: border-box;
}

.ys-acct-info {
	min-width: 0;
}

.ys-acct-info .card-title {
	margin-bottom: 4px !important;
}

.ys-acct-info p {
	font-size: 13px;
	word-break: break-all;
}

/* 右栏四张数字卡：竖排间距 */
body:has(.ys-acct-card) .col-md-4 .funds-item {
	display: block;
	margin-bottom: 12px;
}

@media (max-width: 767.98px) {
	.ys-acct-avatar {
		width: 44px;
		height: 44px;
	}
}


/* ---------- 用户信息卡：紧凑两列网格 + 图标 ----------
   替代原来的单列长列表（6 行太高、且无图标）。 */
.ys-acct-card .card-body {
	padding: 16px 18px 18px;
}

.ys-info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ys-line);
}

.ys-info-item {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 13px;
}

.ys-info-item i {
	flex: 0 0 auto;
	font-size: 15px;
	color: var(--ys-primary);
	opacity: .85;
}

.ys-info-item .ys-info-label {
	flex: 0 0 auto;
	color: var(--ys-text-weak);
}

.ys-info-item .ys-info-value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ys-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ys-info-item .ys-info-value a {
	color: var(--ys-primary);
}

@media (max-width: 767.98px) {
	.ys-info-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}


/* 头像改圆形（QQ 头像本身是方形，圆形观感更统一；占位品牌标同样处理） */
.ys-acct-avatar {
	border-radius: 50% !important;
	padding: 0 !important;
	object-fit: cover;
	background: #f2f7ff;
}


/* ---------- 头像行：文字与圆头像垂直齐平 ----------
   原来 h4 带 mb-1、p 带 mb-0，两行文字块上下不对称 → 视觉重心偏上，
   与圆形头像看起来不齐平。这里把两行外边距归零、用 gap 控制间距，
   整块垂直居中于头像。 */
.ys-acct-info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.ys-acct-info .card-title,
.ys-acct-info p {
	margin: 0 !important;
	line-height: 1.5;
}

.ys-acct-avatar {
	align-self: center;
}


/* ---------- 用户信息卡：头像+名称 与 信息项 排在同一行 ----------
   卡片体改为两列网格：左列（头像 + 用户名 + 分组，定宽），右列（信息项网格）。
   原来上下两块的横向分隔线改为竖向分隔线；窄屏（≤991.98px）退回上下堆叠。 */
.ys-acct-card .card-body {
	display: grid;
	grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
}

.ys-acct-card .ys-info-grid {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	border-left: 1px solid var(--ys-line);
	padding-left: 24px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
	.ys-acct-card .card-body {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ys-acct-card .ys-info-grid {
		border-left: 0;
		border-top: 1px solid var(--ys-line);
		padding-left: 0;
		padding-top: 12px;
	}

	.ys-acct-card .ys-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.ys-acct-card .ys-info-grid {
		grid-template-columns: 1fr;
	}
}


/* ---------- 修正：用户信息卡移入右栏（窄列）后应上下堆叠 ----------
   卡片从 8 栏挪到 4 栏后，上一版为宽卡片设的"左右两列（230px + 1fr）"
   会把右侧信息区挤坏（显示错乱）。窄栏内改为：
   头像行在上、信息项网格在下、分隔线为横线、信息项单列。 */
body:has(.ys-acct-card) .col-md-4 .ys-acct-card .card-body,
.ys-acct-card .card-body {
	display: block !important;
}

.ys-acct-card .ys-info-grid {
	grid-template-columns: 1fr !important;
	border-left: 0 !important;
	border-top: 1px solid var(--ys-line) !important;
	padding-left: 0 !important;
	padding-top: 12px !important;
	margin-top: 14px !important;
}


/* ---------- 总览左栏：统计大卡片 ----------
   复用站内 .funds-item 卡面规范，加一行"图标 + 标签"，数字沿用 .funds-num 大字。 */
.ys-stat-row {
	margin-bottom: 8px;
}

.ys-stat-col {
	margin-bottom: 16px;
}

.ys-stat-card {
	display: block;
	height: 100%;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ys-stat-card:hover {
	border-color: var(--ys-primary) !important;
	box-shadow: 0 14px 34px rgba(23, 38, 70, .08) !important;
	transform: translateY(-2px);
}

.ys-stat-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--ys-text-sub);
	margin-bottom: 8px;
}

.ys-stat-head i {
	font-size: 16px;
	color: var(--ys-primary);
	opacity: .9;
}

@media (max-width: 575.98px) {
	.ys-stat-col {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
}


/* ---------- 右栏：账号卡（名称缩小 + 与头像同行三项）+ 账户安全卡 ---------- */
.ys-acct-name {
	font-size: 16px !important;
	font-weight: 600;
	color: var(--ys-text);
	margin: 0 0 6px !important;
	line-height: 1.3;
}

.ys-acct-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 12px;
	color: var(--ys-text-weak);
}

.ys-acct-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ys-acct-meta i {
	font-size: 13px;
	color: var(--ys-primary);
	opacity: .85;
}

.ys-info-grid-1 {
	grid-template-columns: 1fr !important;
	gap: 10px !important;
	border-top: 0 !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.ys-security-card {
	margin-top: 16px;
}


/* 绑定/实名状态：已=绿色，未=警示色（两个文字颜色不同） */
.ys-state-ok {
	color: var(--ys-ok) !important;
}

.ys-state-no {
	color: var(--ys-warn) !important;
}

.ys-acct-meta .ys-state-ok {
	color: var(--ys-ok) !important;
}

.ys-acct-meta .ys-state-no {
	color: var(--ys-warn) !important;
}


/* ---------- 图标不再统一蓝色 ----------
   统计卡：四张各用一种颜色（工单橙 / 订单蓝 / 余额绿 / 累计紫），靠 nth-child 区分，
   与数字本身的品牌蓝形成层次；信息项与账号卡 meta 的小图标改为中性灰，
   避免整页全是蓝色。 */
.ys-stat-row .ys-stat-col:nth-child(1) .ys-stat-head i { color: #f59e0b !important; }
.ys-stat-row .ys-stat-col:nth-child(2) .ys-stat-head i { color: #1668dc !important; }
.ys-stat-row .ys-stat-col:nth-child(3) .ys-stat-head i { color: #16a34a !important; }
.ys-stat-row .ys-stat-col:nth-child(4) .ys-stat-head i { color: #7c3aed !important; }

.ys-info-item i,
.ys-acct-meta i {
	color: var(--ys-text-weak) !important;
	opacity: 1 !important;
}


/* ---------- 统计卡与信息文字改为黑色（近黑 #1a1f36），状态色除外 ----------
   状态色（已=绿/未=橙）带 !important，不会被这里覆盖。 */
.ys-stat-head,
.ys-stat-head span,
.ys-stat-card .funds-num,
.ys-info-item .ys-info-label,
.ys-info-item .ys-info-value,
.ys-acct-meta,
.ys-acct-meta > span {
	color: var(--ys-text) !important;
}

.ys-acct-name {
	color: var(--ys-text) !important;
}


/* ---------- 总览：卡片间隔收紧 ----------
   原来：统计卡之间用 Bootstrap 默认 gutter（左右各 15px → 间距 30px），
   卡片上下间距 16px。现在统一收紧：
     · 统计卡左右间距 30px → 16px（只在 .ys-stat-row 自己的行上改，
       且行与列的数值成对设置，不会破坏外层栅格对齐）；
     · 卡片上下间距 16px → 10px。 */
.ys-stat-row {
	margin-left: -8px !important;
	margin-right: -8px !important;
	margin-bottom: 4px !important;
}

.ys-stat-row .ys-stat-col {
	padding-left: 8px !important;
	padding-right: 8px !important;
	margin-bottom: 10px !important;
}

.ys-security-card {
	margin-top: 10px !important;
}


/* ---------- 账户信息：标签与值之间拉开间距，值左对齐成一列 ---------- */
body:has(.main-content) .ys-info-grid-1 .ys-info-item .ys-info-label {
	min-width: 84px;
	margin-right: 18px;
}
@media (max-width: 767.98px) {
	body:has(.main-content) .ys-info-grid-1 .ys-info-item .ys-info-label {
		min-width: 76px;
		margin-right: 14px;
	}
}

/* ---------- 总览页：卡片间距再收紧（只作用于本页，靠 .ys-stat-row 判定）----------
   统计卡之间 16px → 10px；卡片上下 16px → 8px；左右两栏间距 30px → 20px。
   两栏用「行负外边距 + 列内边距」成对收缩，内容边缘位置不变，不会破栅格对齐。 */
body:has(.ys-stat-row) .ys-stat-row {
	margin-left: -5px !important;
	margin-right: -5px !important;
	margin-bottom: 0 !important;
}

body:has(.ys-stat-row) .ys-stat-row .ys-stat-col {
	padding-left: 5px !important;
	padding-right: 5px !important;
	margin-bottom: 6px !important;
}

body:has(.ys-stat-row) .card {
	margin-bottom: 8px !important;
}

/* 账号卡与账户安全卡的间距改由 .card 的 8px 提供，避免两处叠加 */
body:has(.ys-stat-row) .ys-security-card {
	margin-top: 0 !important;
}

body:has(.ys-stat-row) .row:has(> .col-md-8.col-xl-8) {
	margin-left: -10px !important;
	margin-right: -10px !important;
}

body:has(.ys-stat-row) .col-md-8.col-xl-8,
body:has(.ys-stat-row) .col-md-4.col-xl-4 {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* ---------- 客户分组：标签蓝字 + 值实心蓝标签（特异性高于黑色文字规则）---------- */
body:has(.main-content) .card .ys-acct-meta > .ys-acct-groupitem {
	color: var(--ys-primary) !important;
	font-weight: 600;
}

body:has(.main-content) .card .ys-acct-meta > .ys-acct-groupitem > .ys-acct-group {
	display: inline-block;
	margin-left: 4px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 11.5px;
	line-height: 18px;
	font-weight: 600;
	color: #fff !important;
	background: var(--ys-primary);
}

/* ---------- 账户安全卡：右上角「安全设置」跳转 ---------- */
body:has(.main-content) .ys-security-card .ys-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

body:has(.main-content) .ys-security-card .ys-sec-head .card-title {
	margin-bottom: 0 !important;
}

body:has(.main-content) .ys-security-card .ys-sec-link {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	font-size: 12.5px;
	line-height: 20px;
	color: var(--ys-primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

body:has(.main-content) .ys-security-card .ys-sec-link:hover {
	opacity: .78;
}

body:has(.main-content) .ys-security-card .ys-sec-link i {
	font-size: 16px;
}

/* ---------- 快捷入口（统计卡下方）：我的产品 + 常用功能 ---------- */
body:has(.main-content) .ys-quick-card .ys-ql-sub {
	font-size: 12px;
	color: var(--ys-text-weak);
	margin: 0 0 6px;
}

body:has(.main-content) .ys-quick-card .ys-ql-sub + .ys-ql-grid {
	margin-bottom: 14px;
}

body:has(.main-content) .ys-quick-card .ys-ql-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

body:has(.main-content) .ys-quick-card .ys-ql-item {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--ys-line);
	border-radius: var(--ys-radius);
	background: #fff;
	color: var(--ys-text) !important;
	font-size: 13px;
	text-decoration: none !important;
	transition: border-color .2s ease, color .2s ease;
}

body:has(.main-content) .ys-quick-card .ys-ql-item:hover {
	border-color: var(--ys-primary) !important;
	color: var(--ys-primary) !important;
}

body:has(.main-content) .ys-quick-card .ys-ql-item i {
	flex: 0 0 auto;
	font-size: 16px;
	color: var(--ys-primary);
}

body:has(.main-content) .ys-quick-card .ys-ql-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body:has(.main-content) .ys-quick-card .ys-ql-count {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--ys-text-weak);
}

@media (max-width: 1199.98px) {
	body:has(.main-content) .ys-quick-card .ys-ql-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	body:has(.main-content) .ys-quick-card .ys-ql-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- 近7天内到期卡：数字与图标用警示红 ---------- */
body:has(.main-content) .ys-stat-row .ys-stat-col .ys-stat-card[href="service"] .funds-num {
	color: var(--ys-danger) !important;
}

body:has(.main-content) .ys-stat-row .ys-stat-col .ys-stat-card[href="service"] .ys-stat-head i {
	color: var(--ys-danger) !important;
}

/* ---------- 资源列表卡（左栏）---------- */
body:has(.main-content) .ys-res-card .ys-res-table {
	font-size: 13px;
	margin-bottom: 0;
}

body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th {
	border-bottom: 1px solid var(--ys-line-strong) !important;
	border-top: 0 !important;
	background: #fff !important;
	position: sticky;
	top: 0;
	z-index: 2;
	color: var(--ys-text-weak) !important;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	padding: 0 8px 8px !important;
}

body:has(.main-content) .ys-res-card .ys-res-table > tbody > tr > td {
	border: 0 !important;
	border-bottom: 1px solid var(--ys-line) !important;
	padding: 10px 8px !important;
	vertical-align: middle;
	color: var(--ys-text) !important;
	white-space: nowrap;
}

body:has(.main-content) .ys-res-card .ys-res-table > tbody > tr:last-child > td {
	border-bottom: 0 !important;
}

/* 首列文字与标题（及卡片内边距）对齐到同一条竖线：单元格左右内边距 8px -> 18px。
   原来表格是通栏、单元格只有 8px，文字比标题靠左约 24px，加重了"两块"的观感。
   行背景仍通栏（内边距在内部），悬停高亮不受影响。 */
body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th,
body:has(.main-content) .ys-res-card .ys-res-table > tbody > tr > td {
	padding-left: 18px !important;
	padding-right: 18px !important;
}

body:has(.main-content) .ys-res-card .ys-res-table a {
	color: var(--ys-primary) !important;
	text-decoration: none !important;
}

body:has(.main-content) .ys-res-card .ys-res-table a:hover {
	text-decoration: underline !important;
}

body:has(.main-content) .ys-res-card .ys-res-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--ys-text-weak);
	vertical-align: middle;
}

body:has(.main-content) .ys-res-card .ys-res-dot.is-on {
	background: var(--ys-ok);
}

body:has(.main-content) .ys-res-card .ys-res-dot.is-off {
	background: var(--ys-danger);
}

body:has(.main-content) .ys-res-card .ys-res-empty {
	padding: 18px 0;
	text-align: center;
	font-size: 13px;
	color: var(--ys-text-weak);
}

/* ---------- 资源列表：卡片内纵向滚动（表头吸顶）---------- */
body:has(.main-content) .ys-res-card .table-responsive {
	max-height: 300px;
	overflow-y: auto;
	scrollbar-width: thin;
}

body:has(.main-content) .ys-res-card .table-responsive::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

body:has(.main-content) .ys-res-card .table-responsive::-webkit-scrollbar-thumb {
	background: rgba(23, 38, 70, .18);
	border-radius: 3px;
}

/* ---------- 财务信息卡（右栏）---------- */
body:has(.main-content) .ys-fin-card .ys-fin-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body:has(.main-content) .ys-fin-card .ys-fin-list > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ys-line);
}

body:has(.main-content) .ys-fin-card .ys-fin-list > li:first-child {
	padding-top: 0;
}

body:has(.main-content) .ys-fin-card .ys-fin-list > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

body:has(.main-content) .ys-fin-card .ys-fin-label {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--ys-text-weak) !important;
}

body:has(.main-content) .ys-fin-card .ys-fin-val {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ys-text) !important;
	text-align: right;
	word-break: break-all;
}

/* ---------- 弱灰文字统一改黑（提升可读性）----------
   只动「标签/次要说明」这类信息文字；链接（查看全部、充值、安全设置）保持主题蓝，
   状态色（已实名绿 / 未实名橙 / 到期红）保持不变。 */
body:has(.main-content) .ys-quick-card .ys-ql-sub,
body:has(.main-content) .ys-quick-card .ys-ql-count,
body:has(.main-content) .ys-fin-card .ys-fin-label,
body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th,
body:has(.main-content) .ys-res-card .ys-res-empty {
	color: var(--ys-text) !important;
}

/* ---------- 新闻 / 帮助 切换卡（右栏）---------- */
body:has(.main-content) .ys-news-card .ys-tabnav {
	display: flex;
	align-items: center;
	gap: 16px;
}

body:has(.main-content) .ys-news-card .ys-tabnav-btn {
	padding: 0 0 6px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--ys-text) !important;
	cursor: pointer;
}

body:has(.main-content) .ys-news-card .ys-tabnav-btn.is-on {
	color: var(--ys-primary) !important;
	border-bottom-color: var(--ys-primary);
}

body:has(.main-content) .ys-news-card .ys-tabpane {
	display: none;
}

body:has(.main-content) .ys-news-card .ys-tabpane.is-on {
	display: block;
}

body:has(.main-content) .ys-news-card .ys-artlist {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

body:has(.main-content) .ys-news-card .ys-artlist > li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--ys-line);
}

body:has(.main-content) .ys-news-card .ys-artlist > li:last-child {
	border-bottom: 0;
}

body:has(.main-content) .ys-news-card .ys-artlist a {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--ys-text) !important;
	text-decoration: none !important;
}

body:has(.main-content) .ys-news-card .ys-artlist a:hover {
	color: var(--ys-primary) !important;
}

body:has(.main-content) .ys-news-card .ys-artdate {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--ys-text) !important;
	opacity: .62;
}

body:has(.main-content) .ys-news-card .ys-artmore {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--ys-primary) !important;
	text-decoration: none !important;
}

body:has(.main-content) .ys-news-card .ys-artempty {
	padding: 18px 0;
	text-align: center;
	font-size: 13px;
	color: var(--ys-text) !important;
}

/* ---------- 推荐返利卡（右栏）---------- */
body:has(.main-content) .ys-promo-card {
	background: linear-gradient(135deg, #f2f7ff 0%, #eaf3ff 100%) !important;
	border-color: rgba(22, 104, 220, .16) !important;
}

body:has(.main-content) .ys-promo-card .ys-promo-list {
	list-style: none;
	margin: 4px 0 14px;
	padding: 0;
}

body:has(.main-content) .ys-promo-card .ys-promo-list > li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 4px 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ys-text) !important;
}

body:has(.main-content) .ys-promo-card .ys-promo-list i {
	flex: 0 0 auto;
	margin-top: 2px;
	font-size: 14px;
	color: var(--ys-primary);
}

body:has(.main-content) .ys-promo-card .ys-promo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: var(--ys-radius);
	background: var(--ys-primary);
	color: #fff !important;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background-color .2s ease;
}

body:has(.main-content) .ys-promo-card .ys-promo-btn:hover {
	background: #1259c3;
}

/* ---------- 收回被主题可访问性规则覆盖的布局 ----------
   主题有条规则 .card a:not(.btn):not(.nav-link):not(.dropdown-item)（特异性 0,4,1）
   给卡片内链接加了 display:inline-block + 上下 padding:4px，用来撑够 24px 可点高度。
   它压过了我给按钮/磁贴写的 display:flex（0,3,1），导致按钮文字不居中、磁贴内部错位。
   这里用 (0,4,2) 的特异性只把「布局」收回来，可点高度仍保留 24px 以上。 */
body:has(.main-content) .card.ys-promo-card a.ys-promo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0;
	min-height: 24px;
	white-space: nowrap;
	color: #fff !important;
	background: #1668dc !important;
}

body:has(.main-content) .card.ys-promo-card a.ys-promo-btn:hover {
	background: #1259c3 !important;
}

body:has(.main-content) .card.ys-quick-card a.ys-ql-item {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	min-height: 24px;
}

body:has(.main-content) .card.ys-security-card a.ys-sec-link,
body:has(.main-content) .card.ys-fin-card a.ys-sec-link,
body:has(.main-content) .card.ys-res-card a.ys-sec-link,
body:has(.main-content) .card.ys-news-card a.ys-artmore {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

/* ---------- TWT 客服容器：空白区不吃点击 ----------
   实测：组件容器是固定定位的 80×80 色块（inline: bottom:4px; right:4px;
   z-index:2147483639; pointer-events:auto），整块压在右下角「返回顶部」按钮
   （52×52，z-index:99）之上，命中测试拿到的是容器而不是按钮，点击被吞掉。
   容器内唯一需要交互的是它自己的 iframe（悬浮球已被 display:none 隐藏），
   所以容器设点击穿透、只放行 iframe 与组件的 surface 元素；
   客服面板打开时仍是容器内的 iframe，因此面板本身照常可点。 */
[data-twt-widget-container] {
	pointer-events: none !important;
}

[data-twt-widget-container] iframe,
[data-twt-widget-container] [data-twt-widget-surface]:not([data-twt-widget-surface="launcher"]) {
	pointer-events: auto !important;
}

/* ---------- 新闻/帮助切换过渡（原先 display 硬切，观感生硬）----------
   display 不能过渡，所以用「新面板淡入 + 轻微上移」；只有切换过才播（.ys-anim），
   页面首次加载不闪一下。两个面板给同一最小高度，避免两者条目数不同导致卡片高度突跳。 */
body:has(.main-content) .ys-news-card .ys-tabnav-btn {
	transition: color .18s ease, border-color .18s ease;
}

body:has(.main-content) .ys-news-card .ys-tabpane {
	min-height: 132px;
}

body:has(.main-content) .ys-news-card.ys-anim .ys-tabpane.is-on {
	animation: ys-pane-in .26s ease both;
}

@keyframes ys-pane-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body:has(.main-content) .ys-news-card.ys-anim .ys-tabpane.is-on {
		animation: none;
	}
}

/* ---------- 统计卡加宽 ----------
   实测原状：卡片宽 262px、卡片间距 10px、卡内左右各留白 20px（内容可视宽度只有 222px）。
   这里把间距 10px → 4px（行负边距与列内边距成对改，卡片外边缘仍精确对齐左栏内容边界，
   与下方资源列表/快捷入口卡片保持同一左边缘），同时卡内左右留白 20px → 14px。
   结果：卡片自身宽约 +4px，内容可视宽度约 +16px（约 7%）。 */
body:has(.main-content) .ys-stat-row {
	margin-left: -2px !important;
	margin-right: -2px !important;
}

body:has(.main-content) .ys-stat-row .ys-stat-col {
	padding-left: 2px !important;
	padding-right: 2px !important;
}

body:has(.main-content) .ys-stat-row .ys-stat-card {
	padding-left: 14px !important;
	padding-right: 14px !important;
}

/* ---------- 统计卡纵向加高 ----------
   实测：卡片高 109px。上下内边距其实已有（本文件早前的 .funds-item{padding:18px 20px} 覆盖了
   厂商行内的 padding:0 20px），所以这里是在 18px 基础上继续加大 → 上下各 26/28px，卡片高约 +18px。 */
body:has(.main-content) .ys-stat-row .ys-stat-card {
	padding-top: 30px !important;
	padding-bottom: 24px !important;
}

body:has(.main-content) .ys-stat-row .ys-stat-head {
	margin-bottom: 10px;
}

/* ---------- 「开通时间 / 登录日志 / 实名提醒」提示块：按需求在所有屏幕都显示 ----------
   厂商 change.qr.css 里是 `@media screen and (min-width:900px){.dnhider{display:none}}`，
   即宽屏隐藏。这里用 !important 覆盖它，让待办提醒（实名 / 手机号等）在 PC 上也看得见。
   该元素没有行内 style 控制显隐（不是第 15 条那种系统 JS 托管的元素），用 !important 安全。 */
body:has(.main-content) .dnhider {
	display: block !important;
}

/* ---------- 提示条与卡片之间的间隔收紧 ----------
   实测：消息块底边到卡片顶边正好 20px，全部来自厂商的 .app-expense-alert{margin-bottom:20px}。
   这里收窄到 8px，与本页其它间距（页面内边距 8px、卡片间距 4px）保持同一节奏。 */
body:has(.main-content) .dnhider .app-expense-alert {
	margin-bottom: 8px !important;
}

/* ---------- 修正：固定高度按钮里的文字贴顶（各页面都受影响）----------
   实测：.table / .card-body 里的 .btn-sm 只写了 height:30px + line-height:1，没有垂直居中，
   文字会贴在按钮顶部（充值页「提交工单」实测偏上 9px，肉眼很明显）。
   Bootstrap 给的是 display:inline-block，这里改为 inline-flex 居中；图标与文字用 gap 分开。
   这几条选择器覆盖站内所有 .btn-sm 及表格内按钮，改一处即可全站生效。 */
body:has(.main-content) .btn-sm,
body:has(.main-content) .table .btn-sm,
body:has(.main-content) .card-body .btn-sm,
body:has(.main-content) .table td .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	line-height: 1 !important;
}

/* ---------- <a> 套 <button> 的按钮（厂商写法）：整体偏上 4px ----------
   实测（/invoicelist「发票申请」、/supporttickets「提交工单」）：外层 <a> 被可访问性规则
   `.card a:not(.btn)...` 变成 inline-block 并加了上下各 4px 内边距，内层 <button> 按基线对齐，
   于是整体偏上 4px。让外层 <a> 变成居中容器并去掉那 4px 内边距即可（按钮自身尺寸与点击区不变）。
   注意：该可访问性规则特异性 (0,4,1)，所以这里必须用 !important 才能覆盖。 */
body:has(.main-content) a:has(> .btn) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	min-height: 0 !important;
}

/* ---------- 行内小按钮加高（原来 30px 太矮，与页面其它 44/68px 按钮比例失衡）----------
   实测服务列表页：.btn-sm 高 30px / 字 12.5px，而同页其它按钮 44px、68px，看着"憋"。
   这里统一到 36px 高、13px 字、左右 14px，圆角沿用 8px；.btn-sm 是共用的，全站一致。 */
body:has(.main-content) .btn-sm,
body:has(.main-content) .table .btn-sm,
body:has(.main-content) .card-body .btn-sm,
body:has(.main-content) .table td .btn {
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 14px !important;
	font-size: 13px !important;
}

/* ---------- 安全中心头部卡片：蓝底深灰字看不清 + 白色信息块被挤 ----------
   厂商在头部整行写了行内 style="color:#555"，配 .bg-primary 蓝底 → 邮箱/开通时间/手机几乎看不见；
   白色 .security-info 又没有内边距，用户名与「账号安全强度」被 space-between 顶到两端。
   这里：卡片内文字改白（CSS !important 可覆盖行内样式），白块内部保持深色并补内边距，
   强度标签与数值改为相邻显示。 */
body:has(.main-content) .security-header .row {
	color: #fff !important;
}

body:has(.main-content) .security-header .security-info {
	background: #fff !important;
	color: var(--ys-text) !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
}

body:has(.main-content) .security-header .security-username {
	color: var(--ys-text) !important;
	font-size: 17px !important;
	font-weight: 600;
}

body:has(.main-content) .security-header .security-strength {
	margin-top: 6px;
}

body:has(.main-content) .security-header .security-label {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 6px;
}

body:has(.main-content) .security-header .security-label .security-text {
	color: var(--ys-text) !important;
	font-weight: 600;
}

body:has(.main-content) .security-header .progress {
	margin-top: 6px;
}

/* ---------- 全站按钮垂直居中（根治模板自带 style 里「固定高度 + 半行高」）----------
   扫描各模板内联 <style> 发现 14 处 `height: Npx; line-height: N/2 px` 的写法，其中影响按钮的是：
   security.tpl 的 .btn-primary（40/20）、register.tpl 与 pwreset.tpl 的 .btn-primary（46/23）——
   这种写法会让按钮文字贴在顶部。这里让所有 .btn 用 inline-flex 居中，与行高无关。
   注：主题可访问性规则只作用于 `a:not(.btn)`，所以 .btn 不受它影响，不会互相打架。 */
body:has(.main-content) .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* ---------- 每页数量选择器（bootstrap-select 插件）：还原布局 + 扁平白底 ----------
   实测 /systemlog：外层 .bootstrap-select 为 78×34，插件自己的 .dropdown-toggle 依赖 display:block 撑满；
   被「全站 .btn 居中」的 inline-flex 压成 42×44（比外框窄 36px、还高出 10px），于是看起来错乱。
   这里把插件内的按钮还原成块级并铺满，同时按需求去掉阴影与灰调：白底 + 1px 描边 + 10px 圆角，菜单同样扁平。 */
body:has(.main-content) .bootstrap-select > .dropdown-toggle {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 12px !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	background: #fff !important;
	box-shadow: none !important;
	color: var(--ys-text) !important;
	font-size: 13px !important;
	line-height: 32px !important;
	text-align: left !important;
}

body:has(.main-content) .bootstrap-select > .dropdown-toggle .filter-option {
	display: inline-block !important;
	line-height: 32px !important;
	color: var(--ys-text) !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu {
	border: 1px solid var(--ys-line) !important;
	border-radius: var(--ys-radius) !important;
	box-shadow: none !important;
	padding: 4px !important;
	font-size: 13px !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu li a,
body:has(.main-content) .bootstrap-select .dropdown-item {
	border-radius: 6px !important;
	font-size: 13px !important;
	color: var(--ys-text) !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu li.selected a,
body:has(.main-content) .bootstrap-select .dropdown-item.active {
	background: rgba(22, 104, 220, .10) !important;
	color: var(--ys-primary) !important;
}

/* ---------- 每页数量选择器：改成"原生下拉"的外观（边框与箭头都在外框上）----------
   实测：外框 78×34，其中左右内边距占 36px（右侧留给箭头），内容区只有 42px，
   所以把 width:100% 加在内部按钮上，边框就只有 42px 宽、看着错位。
   正确做法：边框/圆角/箭头放在外框上，内部按钮铺满且透明，并隐藏插件自带的箭头。 */
body:has(.main-content) .bootstrap-select {
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27 d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	box-shadow: none !important;
	padding: 0 !important;
}

body:has(.main-content) .bootstrap-select > .dropdown-toggle {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 26px 0 10px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ys-text) !important;
	font-size: 13px !important;
	line-height: 32px !important;
	text-align: left !important;
}

body:has(.main-content) .bootstrap-select > .dropdown-toggle::after {
	display: none !important;
}

body:has(.main-content) .bootstrap-select > .dropdown-toggle .filter-option {
	display: inline-block !important;
	line-height: 32px !important;
	color: var(--ys-text) !important;
}

/* ---------- 分页区顺序：共 N 条 → « 1 » → 每页 X 条 ----------
   原结构：.table-pagination(flex) > .table-pageinfo(block) > .form-inline(flex) > [共N条, 每页X条]，再跟 <ul.pagination>。
   用 display:contents 把两层包裹"解开"，让两个 span 与分页器一起参与外层 flex 排序，再用 order 定顺序。
   纯 CSS 改序，不动模板与系统分页逻辑。 */
body:has(.main-content) .table-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

body:has(.main-content) .table-pageinfo,
body:has(.main-content) .table-pageinfo > .form-inline {
	display: contents !important;
}

body:has(.main-content) .table-pagination > .table-pageinfo span:first-child {
	order: 1;
}

body:has(.main-content) .table-pagination > .pagination {
	order: 2;
	margin-bottom: 0 !important;
}

body:has(.main-content) .table-pagination > .table-pageinfo span:last-child {
	order: 3;
}

/* ---------- 每页数量下拉框：白底黑字 ---------- */
body:has(.main-content) .bootstrap-select > .dropdown-toggle,
body:has(.main-content) .bootstrap-select > .dropdown-toggle .filter-option,
body:has(.main-content) .bootstrap-select .dropdown-menu {
	background-color: #fff !important;
	color: #000 !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu li a,
body:has(.main-content) .bootstrap-select .dropdown-item {
	background-color: #fff !important;
	color: #000 !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu li.selected a,
body:has(.main-content) .bootstrap-select .dropdown-item.active {
	background-color: rgba(22, 104, 220, .10) !important;
	color: var(--ys-primary) !important;
}

/* 分页区文字统一成黑色（与下拉框一致，去掉原本偏灰的 #616b7d） */
body:has(.main-content) .table-pagination > .table-pageinfo,
body:has(.main-content) .table-pagination > .table-pageinfo span {
	color: #000 !important;
}

/* ---------- 每页数量选择器：统一原生 select 与 bootstrap-select 两套实现的外观 ----------
   实测各页面有两套：/message /invoicelist /systemlog 是 bootstrap-select 插件（白底、10px 圆角、黑字、SVG 箭头），
   /service /billing /credit 是原生 <select class="limitSel">（圆角 8、近黑字、厂商箭头）→ 看着不统一。
   这里把原生那套对齐：同高 34px、同 1px 描边、同 10px 圆角、黑字白底、同一枚内联 SVG 箭头，并去掉系统默认外观。 */
body:has(.main-content) select.limitSel {
	height: 34px !important;
	padding: 0 26px 0 10px !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	background-color: #fff !important;
	color: #000 !important;
	font-size: 13px !important;
	line-height: 32px !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27none%27 stroke=%27%236b7280%27 stroke-width=%272%27 d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
}

/* ---------- 分页区：白底按钮 + 当前页只变边框 + 三部分对齐 ----------
   实测 /credit：按钮是浅灰底 rgb(247,249,252)/极浅灰字 rgb(195,201,212)（禁用态），
   当前页是整块蓝底白字；且 <ul.pagination> 带外边距 → 比「共 N 条」和每页选择器低 8px。
   这里：按钮统一白底 + 1px 细边 + 黑字；当前页/悬停只变边框与文字颜色（不整块变蓝）；
   <ul> 去外边距并统一高度，使三部分共用同一中心线。 */
body:has(.main-content) .table-pagination {
	align-items: center !important;
}

body:has(.main-content) .table-pagination .pagination {
	margin: 0 !important;
	align-items: center !important;
}

body:has(.main-content) .table-pagination .pagination .page-item {
	margin: 0 2px !important;
}

body:has(.main-content) .table-pagination .pagination .page-link {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px !important;
	padding: 0 10px !important;
	background: #fff !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	box-shadow: none !important;
	color: #000 !important;
	font-size: 13px !important;
	line-height: 1 !important;
}

body:has(.main-content) .table-pagination .pagination .page-link:hover {
	background: #fff !important;
	border-color: var(--ys-primary) !important;
	color: var(--ys-primary) !important;
}

body:has(.main-content) .table-pagination .pagination .page-item.active .page-link {
	background: #fff !important;
	border-color: var(--ys-primary) !important;
	color: var(--ys-primary) !important;
	box-shadow: none !important;
}

body:has(.main-content) .table-pagination .pagination .page-item.disabled .page-link {
	background: #fff !important;
	border-color: var(--ys-line) !important;
	color: var(--ys-text-weak) !important;
	opacity: .6;
}

/* ---------- 分页「上一页 / 下一页」按钮：把 « » 字形换成 chevron 图标 ----------
   系统输出的是排版引号字形（« »），观感偏弱。这里把字形隐藏（font-size:0），改用 ::before
   加一个 mask 图标：mask 让图标颜色跟随 currentColor，所以禁用态自动变浅灰、
   当前页/悬停自动变主题蓝，无需额外分支。图标形状与每页选择器的下拉箭头同一款 chevron。 */
body:has(.main-content) .table-pagination .pagination .page-item:first-child .page-link,
body:has(.main-content) .table-pagination .pagination .page-item:last-child .page-link {
	font-size: 0 !important;
}

body:has(.main-content) .table-pagination .pagination .page-item:first-child .page-link::before,
body:has(.main-content) .table-pagination .pagination .page-item:last-child .page-link::before {
	content: "";
	display: block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body:has(.main-content) .table-pagination .pagination .page-item:first-child .page-link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 18l-6-6 6-6%27/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M15 18l-6-6 6-6%27/%3E%3C/svg%3E");
}

body:has(.main-content) .table-pagination .pagination .page-item:last-child .page-link::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 6l6 6-6 6%27/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 6l6 6-6 6%27/%3E%3C/svg%3E");
}

/* 上一页/下一页按钮与数字按钮同宽（34×34），避免比数字宽 2px */
body:has(.main-content) .table-pagination .pagination .page-item:first-child .page-link,
body:has(.main-content) .table-pagination .pagination .page-item:last-child .page-link {
	padding: 0 !important;
}

/* ---------- 日志「操作详情」列：文字与内嵌链接不齐 ----------
   实测：该列是 td.d-flex（flex 容器）+ 混排「纯文本 + <a class="el-link">」，
   而主题的可访问性规则给链接加了 min-height:24px/padding:4px 0，flex 子项又被块级化，
   于是链接文字比周围文字低 4px（文本墨迹中心 259 vs 链接 263），一行多个链接就参差不齐；
   同时 white-space:nowrap 让长详情挤成一整行。
   这里：单元格改回块级（让文本与链接按行内基线排列）、允许换行，并让 el-link 恢复为普通行内链接。 */
body:has(.main-content) .table td.d-flex {
	display: block !important;
	white-space: normal !important;
	line-height: 1.7 !important;
}

body:has(.main-content) .table td.d-flex .el-link,
body:has(.main-content) .table td .el-link {
	display: inline !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	vertical-align: baseline !important;
	line-height: inherit !important;
}

/* ---------- 展开后的下拉菜单要能"浮起来" ----------
   实测：菜单是白底 + rgba(23,38,70,.1) 极淡边框 + 无阴影，盖在白色卡片上白压白，
   看着像两张卡片重叠。**收起状态的下拉框保持扁平无阴影不变**，
   只给"展开的浮层"加分隔：稍明显的描边 + 一层柔和投影 + 提升层级。 */
body:has(.main-content) .bootstrap-select .dropdown-menu {
	background-color: #fff !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	box-shadow: 0 8px 24px rgba(23, 38, 70, .12) !important;
	z-index: 1050 !important;
	margin-top: 4px !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu .inner {
	border-radius: calc(var(--ys-radius) - 1px) !important;
}

/* ---------- 所有下拉浮层统一样式（顶栏语言/用户菜单、表格行操作菜单、每页选择器等）----------
   实测各菜单样式不一：顶栏菜单是 1px rgba(23,38,70,.1) + 阴影 .1，选择器菜单是 .16 + 阴影 .12，
   弱的一档盖在白色卡片上仍然发糊。这里统一：白底 + .16 描边 + 10px 圆角 + 一层柔和投影 + 4px 间距，
   菜单项圆角与悬停色也统一（悬停浅蓝底 + 主题蓝字）。 */
body:has(.main-content) .dropdown-menu {
	background-color: #fff !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	box-shadow: 0 8px 24px rgba(23, 38, 70, .12) !important;
	margin-top: 4px !important;
	padding: 6px !important;
}

body:has(.main-content) .dropdown-menu .dropdown-item {
	border-radius: 6px !important;
	font-size: 13px !important;
	color: var(--ys-text) !important;
	padding: 7px 10px !important;
}

body:has(.main-content) .dropdown-menu .dropdown-item:hover,
body:has(.main-content) .dropdown-menu .dropdown-item:focus {
	background-color: rgba(22, 104, 220, .08) !important;
	color: var(--ys-primary) !important;
}

body:has(.main-content) .dropdown-menu .dropdown-item.active,
body:has(.main-content) .dropdown-menu .dropdown-item:active {
	background-color: rgba(22, 104, 220, .12) !important;
	color: var(--ys-primary) !important;
}

body:has(.main-content) .dropdown-menu .dropdown-divider {
	border-top-color: var(--ys-line) !important;
	margin: 4px 0 !important;
}

/* ---------- 下拉浮层改成"简单款"（按需求：不要阴影、不要卡片嵌套感）----------
   去掉阴影与小圆角菜单项，只保留：白底 + 一条 1px 细边（用于和底下白卡片区分，避免又糊在一起）
   + 完整圆角外框 + 整行高亮的菜单项。 */
body:has(.main-content) .dropdown-menu {
	background-color: #fff !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	box-shadow: none !important;
	margin-top: 2px !important;
	padding: 4px 0 !important;
}

body:has(.main-content) .dropdown-menu .dropdown-item {
	border-radius: 0 !important;
	font-size: 13px !important;
	color: var(--ys-text) !important;
	padding: 8px 14px !important;
	background-color: transparent !important;
}

body:has(.main-content) .dropdown-menu .dropdown-item:hover,
body:has(.main-content) .dropdown-menu .dropdown-item:focus {
	background-color: rgba(22, 104, 220, .08) !important;
	color: var(--ys-primary) !important;
}

body:has(.main-content) .dropdown-menu .dropdown-item.active,
body:has(.main-content) .dropdown-menu .dropdown-item:active {
	background-color: rgba(22, 104, 220, .10) !important;
	color: var(--ys-primary) !important;
}

body:has(.main-content) .dropdown-menu .dropdown-divider {
	border-top-color: var(--ys-line) !important;
	margin: 4px 0 !important;
}

/* 每页选择器的菜单特异性更高，这里显式覆盖成同一"简单款"，避免它还留着阴影 */
body:has(.main-content) .bootstrap-select .dropdown-menu {
	background-color: #fff !important;
	border: 1px solid var(--ys-line-strong) !important;
	border-radius: var(--ys-radius) !important;
	box-shadow: none !important;
	margin-top: 2px !important;
	padding: 4px 0 !important;
	z-index: 1050 !important;
}

/* 每页选择器的菜单项也去掉小圆角，和顶栏菜单的"整行高亮"保持一致（不改内边距，避免影响多选勾选位） */
body:has(.main-content) .bootstrap-select .dropdown-menu li a,
body:has(.main-content) .bootstrap-select .dropdown-menu .dropdown-item {
	border-radius: 0 !important;
}

/* ---------- 修掉"下拉菜单里两个卡片重叠" ----------
   bootstrap-select 的菜单结构是「外层 .dropdown-menu > 内层 .dropdown-menu.inner」两层同名元素，
   两层都命中 .dropdown-menu 的样式（白底 + 描边 + 圆角），展开后就是"卡片里套卡片"。
   这里把内层还原为纯列表容器：无底色、无描边、无圆角、无阴影、无内外边距，只保留外层的面板外观。 */
body:has(.main-content) .dropdown-menu.inner,
body:has(.main-content) .dropdown-menu .inner {
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 菜单项与面板同宽（原来内层列表比面板窄 17px，悬停高亮会短一截） */
body:has(.main-content) .bootstrap-select .dropdown-menu .inner,
body:has(.main-content) .bootstrap-select .dropdown-menu .inner ul {
	width: 100% !important;
}

body:has(.main-content) .bootstrap-select .dropdown-menu li,
body:has(.main-content) .bootstrap-select .dropdown-menu li a,
body:has(.main-content) .bootstrap-select .dropdown-menu .dropdown-item {
	width: 100% !important;
}

/* 定位到菜单内层的 ul（它也带 .dropdown-menu.inner 这个同名 class），强制铺满面板，
   否则菜单项只有 60px 宽、悬停高亮比面板短一截。 */
body:has(.main-content) .bootstrap-select .dropdown-menu ul.inner,
body:has(.main-content) .bootstrap-select .dropdown-menu .inner > ul {
	width: 100% !important;
	min-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* ---------- 个人信息页（重写版）：与新版用户中心（总览页）一致的卡片与信息网格 ---------- */
body:has(.main-content) .ys-details .ys-sec-head {
	margin-bottom: 0;
}

body:has(.main-content) .ys-details .ys-sec-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

body:has(.main-content) .ys-details .ys-info-grid {
	margin-top: 14px;
	gap: 9px 22px;
}

/* 标签定宽，值左对齐成一列（与总览页账户信息同款） */
body:has(.main-content) .ys-details .ys-info-item .ys-info-label {
	min-width: 84px;
	margin-right: 16px;
}

body:has(.main-content) .ys-details .ys-info-empty {
	color: var(--ys-text-weak) !important;
}

/* 编辑态的分节小标题 */
body:has(.main-content) .ys-details .ys-form-section {
	margin: 18px 0 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ys-text);
}

body:has(.main-content) .ys-details .ys-form-section:first-of-type {
	margin-top: 4px;
}

body:has(.main-content) .ys-details .ys-details-side {
	margin-bottom: 8px;
}

@media (max-width: 767.98px) {
	body:has(.main-content) .ys-details .ys-info-item .ys-info-label {
		min-width: 76px;
		margin-right: 12px;
	}
}

/* 个人信息页：卡片头部左右分布（.ys-sec-head 原有样式带了总览页作用域，这里补一份） */
body:has(.main-content) .ys-details .ys-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 0;
}

body:has(.main-content) .ys-details .ys-sec-head .card-title {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   分页（移动端）：保持单行
   —— 原先「共N条 + 每页条数下拉」与页码会折成两行/三行。
   要点：① .table-pagination 自身是 flex-wrap:wrap，必须一起改；
        ② “每页条数”是 bootstrap-select 生成的按钮（原生 select 被隐藏），
           尺寸要落在 .bootstrap-select > .dropdown-toggle 上，改 select 没用；
        ③ 本文件里已有 body:has(.main-content) 前缀的同类规则，这里用同样前缀
           提权，否则会被压掉（实测第一版就是被压掉、毫无效果）。
   ========================================================================== */
@media (max-width: 767.98px) {
	body:has(.main-content) .table-footer {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 6px !important;
	}
	body:has(.main-content) .table-footer .table-tools { flex: 0 1 auto !important; min-width: 0 !important; }
	body:has(.main-content) .table-footer .table-pagination {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 6px !important;
		min-width: 0 !important;
		margin-left: auto !important;
	}
	body:has(.main-content) .table-footer .table-pageinfo {
		font-size: 12.5px !important;
		white-space: nowrap !important;
	}
	body:has(.main-content) .table-footer .table-pageinfo {
		display: block !important;
	}
	body:has(.main-content) .table-footer .table-pageinfo .form-inline {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 4px !important;
	}
	/* select 前后的“每页/条”文字用 0 号字隐藏（不占位），保留下拉本体 */
	body:has(.main-content) .table-footer .table-pageinfo span.mx-2 { font-size: 0 !important; }
	body:has(.main-content) .table-footer .table-pageinfo .form-inline > span:not(.mx-2) { font-size: 12.5px !important; }

	body:has(.main-content) .table-footer select.limitSel,
	body:has(.main-content) .table-footer .limitSel {
		min-width: 50px !important;
		width: 50px !important;
		height: 28px !important;
		padding: 0 4px !important;
		font-size: 12.5px !important;
	}
	/* 外层容器也要收到 28px：只改内部按钮的话，容器仍是 34px，
	   按钮在容器里居中 → 比翻页按钮高出 4px，视觉上就是"没齐平"（实测） */
	body:has(.main-content) .table-footer .bootstrap-select {
		display: inline-flex !important;
		align-items: center !important;
		vertical-align: middle !important;
		height: 28px !important;
		min-height: 0 !important;
		width: auto !important;
		min-width: 0 !important;
	}
	body:has(.main-content) .table-footer .bootstrap-select > .dropdown-toggle,
	body:has(.main-content) .table-footer .bootstrap-select > .btn {
		height: 28px !important;
		min-height: 0 !important;
		padding: 0 20px 0 8px !important;
		font-size: 12.5px !important;
		line-height: 26px !important;
		border-radius: var(--ys-radius) !important;
	}
	body:has(.main-content) .table-footer .bootstrap-select .filter-option-inner-inner,
	body:has(.main-content) .table-footer .bootstrap-select .filter-option {
		font-size: 12.5px !important;
		line-height: 26px !important;
	}

	body:has(.main-content) .pagination {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 4px !important;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	body:has(.main-content) .pagination::-webkit-scrollbar { display: none; }
	/* .pagination 上有 margin-top: 16px !important（本文件 1216 行），在
	   align-items:center 下会把整组往下推 16/2=8px，导致与「每页条数」高低不齐；
	   移动端把它归零，两个控件才真正同一水平线（实测 deltaTop 8px → 0） */
	body:has(.main-content) .table-footer .table-pagination > .pagination,
	body:has(.main-content) .table-footer .table-pagination > ul.pagination {
		margin: 0 !important;
	}
	/* 这一行会被某处撑到 44px 高（实测 28 + 16）。若按居中排列，「每页条数」贴顶、
	   翻页器居中 → 两者差 8px（用户看到的"没有齐平"）。移动端统一顶部对齐 +
	   归零各层外边距，两个控件必然在同一水平线上。 */
	body:has(.main-content) .table-footer .table-pagination {
		align-items: flex-start !important;
		min-height: 0 !important;
	}
	body:has(.main-content) .table-footer .table-pagination > * {
		align-self: flex-start !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* 必须带上 .table-pagination 层级：文件里另有一条
	   body:has(.main-content) .table-pagination .pagination .page-link{height:34px!important}
	   （4 个类 + !important），只用 3 个类会被它压掉（实测翻页按钮仍是 34px） */
	body:has(.main-content) .table-pagination .pagination > li > a,
	body:has(.main-content) .table-pagination .pagination > li > span,
	body:has(.main-content) .table-pagination .pagination .page-link {
		min-width: 28px !important;
		height: 28px !important;
		padding: 0 6px !important;
		font-size: 12.5px !important;
		line-height: 1 !important;
	}
}

/* ==========================================================================
   顶栏菜单（#page-topbar > .navbar-header 里的 首页/帮助/工单/消息/费用/购物车）
   —— 修两个实测到的问题：
      ① 图标与文字不齐平：模板与主题给图标写了 margin-top:6px（部分是内联样式），
         而容器是 align-items:center，margin 参与居中 → 图标整体下移 6/2 = 3px
         （实测 图标中心 37 / 文字中心 34）。归零即可对齐。
      ② 间隔不匀且偏挤：各项之间只有 ml-1 的 4px；图标与文字之间是 0，
         只靠 .header-item 的左右各 3px 内边距撑开。改成统一间距。
   ========================================================================== */
#page-topbar .navbar-header .d-flex:has(> .dropdown) {
	gap: 14px;
	align-items: center;
}
#page-topbar .navbar-header .d-flex:has(> .dropdown) > .dropdown {
	margin-left: 0 !important;
}
#page-topbar .navbar-header .d-flex:has(> .dropdown) > .dropdown > a {
	gap: 5px;
}
#page-topbar .navbar-header .header-item {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
#page-topbar .navbar-header .header-item > i,
#page-topbar .navbar-header .header-item i {
	margin: 0 !important;   /* 模板里有内联 margin-top:6px，必须 !important 才盖得住 */
	line-height: 1;
	vertical-align: middle;
}

/* ==========================================================================
   筛选/每页条数等 bootstrap-select 组件："圆角处缺线条"的根因修复
   —— 实测量到的结构（/billing 状态筛选）：
        外层 .bootstrap-select : 400×33、border 1px、border-radius 10px、白底
        内层 button.dropdown-toggle : 399×32、border-radius 0、**白色背景**
      内层是从外层内缩 1px 的"方形白底"，它把外层圆角的弧线盖住大半，
      只剩最外约 1px 的弧，看上去就像圆角缺了一段线。
   修法：内层按钮改成透明 + 继承外层圆角（不改它的尺寸与 display —— 它需要
   display:block 撑满外框，见第 22 条），这样外层的完整描边与圆角都露出来。
   ========================================================================== */
body:has(.main-content) .bootstrap-select > .dropdown-toggle,
body:has(.main-content) .bootstrap-select > .btn {
	background-color: transparent !important;
	border-radius: inherit !important;
	box-shadow: none !important;
}
body:has(.main-content) .bootstrap-select > .dropdown-toggle:focus,
body:has(.main-content) .bootstrap-select > .btn:focus,
body:has(.main-content) .bootstrap-select > .dropdown-toggle:hover,
body:has(.main-content) .bootstrap-select > .btn:hover {
	background-color: transparent !important;
}

/* ==========================================================================
   资源列表（总览页 /clientarea 左栏）
   ① 去掉"第二张卡片"：内层 .table-responsive 自带 1px 边框 + 10px 圆角（全局皮肤规则），
      而它的高度会被拉伸去对齐右栏 —— 实测外框 604×250，里面只有一张 124 高的表，
      框内留下 126px 空白，所以看着像多了一张空卡片。这里让外框只保留 .card 一层。
   ② 列表标题条加阴影：标题条改通栏白底 + 向下投影，阴影正好落在表头上，
      把"标题"和"列表"两部分区分开（.card-body 内边距实测 18px，故用 -18px 抵消）。
   ========================================================================== */
body:has(.main-content) .ys-res-card .table-responsive {
	border: 0 !important;
	border-radius: 0 !important;
}
body:has(.main-content) .ys-res-card .ys-sec-head {
	position: relative;
	z-index: 3;
	margin: 0 -18px;
	padding: 0 18px 12px;
	/* 浅色表头条 + 发丝分割线 + 极浅阴影：让它读作"同一张卡片的表头"。
	   上一版用了 0.38 的较深阴影，在卡片中间画出一道明显分界，
	   标题与列表看起来成了两块（用户反馈"割裂感"）。 */
	background: #fafbfc;
	box-shadow: 0 1px 0 rgba(23, 38, 70, .06), 0 6px 10px -10px rgba(23, 38, 70, .16);
}
/* 窄屏 .card-body 内边距是 14px（实测 390px 宽），抵消值要跟着变，
   否则标题条会左右各溢出 3px（实测 head.right - card.right = 3） */
@media (max-width: 767.98px) {
	body:has(.main-content) .ys-res-card .ys-sec-head {
		margin: 0 -14px;
		padding: 0 14px 12px;
	}
	/* 窄屏内边距是 14px，表格单元格同步，保持"标题与首列对齐"在所有断点都成立 */
	body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th,
	body:has(.main-content) .ys-res-card .ys-res-table > tbody > tr > td {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}

/* ==========================================================================
   资源列表：「查看全部实例」移到标题行右上角
   —— 与账户安全卡的「安全设置」（本文件 2106 行起）同款布局：标题左、
      链接右，flex + space-between。原来两者是上下堆叠的，所以链接看着像
      挂在标题下面。表头条的通栏/浅底/发丝线保持不变。
   ========================================================================== */
body:has(.main-content) .ys-res-card .ys-sec-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
body:has(.main-content) .ys-res-card .ys-sec-head .card-title {
	margin-bottom: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}
body:has(.main-content) .ys-res-card .ys-sec-link {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 12.5px;
	line-height: 20px;
	color: var(--ys-primary) !important;
	text-decoration: none !important;
}

/* ==========================================================================
   资源列表：表头行（机器状态 / 产品名称 / 到期时间 / 费用）
   —— 文字加粗（500 → 600）+ 底色深一档（#fff → #eef1f6），让列标题与数据行
      分得更清楚。底色必须保留不透明 —— 表头是 position:sticky，滚动时
      内容会从它下面穿过，透明底会透出数据行。
   ========================================================================== */
body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th {
	background: #eef1f6 !important;
	font-weight: 600 !important;
	color: var(--ys-text) !important;
}

/* ==========================================================================
   资源列表：「资源列表」标题行不再要阴影/底色
   —— 列标题行已改成"加粗 + 灰色底"来分区，标题行保持干净即可。
      布局（左标题 / 右「查看全部实例」）与间距保留不变。
   ========================================================================== */
body:has(.main-content) .ys-res-card .ys-sec-head {
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
}
body:has(.main-content) .ys-res-card .ys-sec-head .card-title {
	background: transparent !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   资源列表（第二轮微调）
   ① 列标题行的灰色带纵向太窄：原 th 只有 `padding: 0 18px 8px`（无上内边距），
      灰带仅约 24px 高。改成上下各 10px → 约 36px。
   ② 列表两侧加竖线：原来只有行之间横向分隔线，两侧悬空，看着不像一条列表。
      竖线加在外层 .table-responsive 上（它通栏），只加左右、不加圆角与外框，
      避免又变回"第二张卡片"（.table-responsive 是 border-box，
      加 1px 左右边框不会把宽度撑出去）。
   ========================================================================== */
body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th {
	padding: 10px 18px !important;
}
body:has(.main-content) .ys-res-card .table-responsive {
	border-left: 1px solid var(--ys-line) !important;
	border-right: 1px solid var(--ys-line) !important;
}
@media (max-width: 767.98px) {
	body:has(.main-content) .ys-res-card .ys-res-table > thead > tr > th {
		padding: 10px 14px !important;
	}
}

/* ==========================================================================
   账单列表（总览页左栏，插在资源列表下方）
   —— 结构与资源列表完全一致（复用 .ys-res-card / .ys-sec-head / .ys-res-table，
      所以表头条、表头加粗灰底、两侧竖线、单元格内边距都自动一致），
      这里只补账单特有的列宽与状态胶囊。
   ========================================================================== */
body:has(.main-content) .ys-bill-card .ys-bill-table { table-layout: fixed; }
body:has(.main-content) .ys-bill-card .ys-col-no { width: 34%; }
body:has(.main-content) .ys-bill-card .ys-col-amount { width: 20%; }
body:has(.main-content) .ys-bill-card .ys-col-due { width: 24%; }
body:has(.main-content) .ys-bill-card .ys-col-status { width: 22%; }
body:has(.main-content) .ys-bill-card .ys-bill-amount {
	font-weight: 600;
	color: var(--ys-text) !important;
}
body:has(.main-content) .ys-bill-card .ys-bill-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
}
body:has(.main-content) .ys-bill-card .ys-bill-status.is-paid { background: rgba(22, 163, 74, .10); color: #16a34a; }
body:has(.main-content) .ys-bill-card .ys-bill-status.is-unpaid { background: rgba(220, 38, 38, .10); color: #dc2626; }
body:has(.main-content) .ys-bill-card .ys-bill-status.is-other { background: rgba(23, 38, 70, .06); color: var(--ys-text-weak); }

/* ==========================================================================
   账单详情页（/viewbilling?id=xxx）—— 按用户反馈修正
   作用域用页面独有的 #pdfCentent，避免影响其它页面。
   ① 支付状态原为 <h3>/<h5>（标题级字号）→ 收成小胶囊（颜色沿用原有 text-success/text-danger）
   ② 「账单详情」表内联写死 80%/5%/15%，类型列仅 5%（≈35px）必然挤压 → 重设列宽
   ③ 「交易流水」表无任何列宽声明、流水号很长 → 固定列宽 + 等宽数字 + 单号可折行
   ④ 表格上硬编码的 border:#ddd 与外层卡片形成双层边框 → 去掉（卡片本身已有边框）
   ⑤ 发票抬头 logo 尺寸收敛，避免上传大图把版式顶开
   ========================================================================== */
/* ① 支付状态小胶囊 */
body:has(#pdfCentent) #pdfCentent header .text-style {
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	display: inline-block !important;
	padding: 3px 12px !important;
	margin: 0 !important;
	border: 1px solid currentColor;
	border-radius: 999px;
}
/* ⑤ logo 尺寸收敛 */
body:has(#pdfCentent) #pdfCentent header .head-img {
	max-height: 48px;
	width: auto;
	max-width: 240px;
}
/* ④ 去掉表内硬编码边框（双层框） */
body:has(#pdfCentent) #pdfCentent main .card table {
	border: 0 !important;
}
/* 表头行统一浅灰加粗（与资源/账单列表一致） */
body:has(#pdfCentent) #pdfCentent main table > thead > tr > th,
body:has(#pdfCentent) #pdfCentent main table > thead > tr > td {
	background: #eef1f6 !important;
	font-weight: 600 !important;
	color: var(--ys-text) !important;
	white-space: nowrap;
}
/* ② 账单详情表：标题 62% / 类型 16% / 金额 22% */
body:has(#pdfCentent) #pdfCentent main .card table {
	table-layout: fixed;
	width: 100% !important;
}
body:has(#pdfCentent) #pdfCentent main .card table > thead > tr > td:nth-child(1),
body:has(#pdfCentent) #pdfCentent main .card table > tbody > tr > td:nth-child(1) { width: 62% !important; }
body:has(#pdfCentent) #pdfCentent main .card table > thead > tr > td:nth-child(2),
body:has(#pdfCentent) #pdfCentent main .card table > tbody > tr > td:nth-child(2) { width: 16% !important; }
body:has(#pdfCentent) #pdfCentent main .card table > thead > tr > td:nth-child(3),
body:has(#pdfCentent) #pdfCentent main .card table > tbody > tr > td:nth-child(3) { width: 22% !important; }
/* ③ 交易流水表：交易日期 22% / 支付方式 20% / 流水号 38% / 金额 20% */
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table {
	table-layout: fixed;
	width: 100% !important;
}
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > thead > tr > th:nth-child(1),
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > tbody > tr > td:nth-child(1) { width: 22% !important; }
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > thead > tr > th:nth-child(2),
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > tbody > tr > td:nth-child(2) { width: 20% !important; }
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > thead > tr > th:nth-child(3),
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > tbody > tr > td:nth-child(3) { width: 38% !important; word-break: break-all; }
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > thead > tr > th:nth-child(4),
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table > tbody > tr > td:nth-child(4) { width: 20% !important; }
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table td {
	font-variant-numeric: tabular-nums;
}
/* 只给"短字段"列不换行；流水号列（第 3 列）允许折行，避免长单号溢出 */
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table td:nth-child(1),
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table td:nth-child(2),
body:has(#pdfCentent) #pdfCentent main .table-responsive.mt-3 table td:nth-child(4) {
	white-space: nowrap;
}

/* ==========================================================================
   修正一条全局假设：`.card-body` 内边距当作 18px 来做"通栏抵消"
   （见本文件早前的 `.card-body > .table-responsive { margin: 0 -18px; width: calc(100% + 36px) }`）。
   但若卡片是 **p-0（无内边距）**，就没有内边距可抵消 —— 表格会被硬生生撑宽 36px。
   实测 /viewbilling 的「账单详情」表就是这样：表宽 1023px、卡片仅 990px，
   右侧溢出导致「金额」列被裁掉。p-0 时直接还原为 100%。
   ========================================================================== */
body:has(.main-content) .card-body.p-0 > .table-responsive,
body:has(.main-content) .card-body.p-0 > .table {
	margin: 0 !important;
	width: 100% !important;
}