/* ============================================================
   yunzhou · 会员中心骨架设计层（skeleton.css）
   2026-10-25 · 版本参数 ?v=20261047（B3 批起随 head.tpl 引用）
   覆盖对象：官方 app.min.css 的顶栏/侧栏/页头/面包屑/页脚硬编码样式
            + B3 起新增「通用组件深色适配」正式节（权威版本，替代客户本地约90行兜底）
   策略：本文件在 head.tpl 中置于 app.min.css 之后——同特异度后者胜；
   官方用更高特异度或 !important 处，本文件对应使用 !important（逐条注明）
   变量：仅用主题 23 变量（--nav-bg/--nav-bg-strong 即为骨架预留）
   ============================================================ */

/* ---------- 对抗区：官方 app.min.css 硬编码（逐条对应） ---------- */
/* ① .footer{position:absolute;left:250px;right:0;height:60px}——脱离文档流+右移 */
.footer, .yz-footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
}
/* ② .vertical-menu{background:#fff}——侧栏死白 */
.vertical-menu, .yz-sidebar { background: var(--nav-bg-strong) !important; }

/* ---------- 页面基底 ---------- */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
.yz-main { background: var(--bg); min-height: 100vh; }
.page-content { background: var(--bg); }
.container-fluid { background: var(--bg); }

/* ---------- 顶栏 ---------- */
/* Q1（2026-10-24 客户规则级定位）：官方 app.min.css 用 ID 选择器 #page-topbar{background:#fff}
   （特异度 1,0,0），类选择器赢不了——必须同用 ID + !important。
   半透明 var(--nav-bg) 叠在 body 上即官方深/浅顶栏（客户补丁取样值 rgba(11,15,22,.86)/rgba(244,246,249,.88) 已验证） */
#page-topbar,
#page-topbar.yz-topbar {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  position: sticky;
  top: 0;
  z-index: 1000;
}
/* Q2：官方 .navbar-brand-box{background:#14141E} 硬编码深底——子层全透明，底色统一交给 #page-topbar */
#page-topbar .navbar-brand-box,
#page-topbar .yz-topbar-brand,
#page-topbar .yz-navbar-header { background: transparent !important; }
/* LOGO 双变体规则唯一真源在 yunzhou.css（全站加载含 auth 页），本文件不再定义，避免两份漂移（Q3 根治） */
/* 顶栏按钮（汉堡/搜索/语言/购物车/消息/用户） */
.yz-topbar-btn {
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
}
.yz-topbar-btn:hover, .yz-topbar-btn:focus {
  color: var(--accent) !important;
  background: rgba(255, 178, 36, 0.08) !important;
}
.navbar-header .dropdown.show .header-item { background: var(--surface-2) !important; }
/* 用户头像（琥珀金圆） */
.yz-user-avatar {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  font-weight: 700;
}
/* 顶栏登录链接 */
.yz-topbar-login { color: var(--accent) !important; font-weight: 600; }

/* ---------- 侧栏 ---------- */
.yz-sidebar {
  border-right: 1px solid var(--line);
  box-shadow: none;
}
#sidebar-menu ul li a, .yz-menu-link {
  color: var(--muted);
  font-size: 13.5px;
}
#sidebar-menu ul li a:hover, .yz-menu-link:hover { color: var(--accent); }
#sidebar-menu ul li a:hover i, .yz-menu-link:hover .yz-menu-icon { color: var(--accent); }
#sidebar-menu ul li a i, .yz-menu-icon { color: var(--muted); }
#sidebar-menu ul li ul.sub-menu li a, .yz-submenu .yz-menu-link {
  color: var(--muted);
  font-size: 13px;
}
/* 当前选中项（metisMenu 的 active） */
#sidebar-menu .menuitem-active > a, #sidebar-menu li.active > a, .yz-menu .mm-active > a {
  color: var(--accent) !important;
}
#sidebar-menu .menuitem-active > a i, .yz-menu .mm-active > a .yz-menu-icon { color: var(--accent) !important; }
/* 展开箭头 */
#sidebar-menu .has-arrow:after { color: var(--muted); }
/* 侧栏滚动条 */
.yz-sidebar .simplebar-scrollbar:before { background: var(--line-strong); }

/* ---------- 页头 / 面包屑 ---------- */
.yz-pageheader { padding: 14px 0; }
.yz-page-title { color: var(--text); font-weight: 700; }
.yz-breadcrumb { background: transparent; padding: 0; }
.yz-breadcrumb .breadcrumb-item { color: var(--muted); font-size: 13px; }
.yz-breadcrumb .breadcrumb-item a { color: var(--muted); }
.yz-breadcrumb .breadcrumb-item a:hover { color: var(--accent); }
.yz-breadcrumb .breadcrumb-item.active { color: var(--text); }
.yz-pageheader .backBtn i { color: var(--muted) !important; }

/* ---------- 页脚 ---------- */
.yz-footer {
  background: var(--nav-bg);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  padding: 18px 0;
}

/* ---------- 下拉菜单（用户/语言） ---------- */
.yz-dropdown {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.yz-dropdown .dropdown-item { color: var(--text); font-size: 13.5px; }
.yz-dropdown .dropdown-item:hover { background: rgba(255, 178, 36, 0.12); color: var(--accent); }
.yz-dropdown .dropdown-item.text-danger, .yz-dropdown .dropdown-item.text-danger i { color: var(--danger) !important; }

/* Q4（2026-10-24）：官方 .form-control{background:#fff} 未覆盖 select——
   手机区号下拉 select#phoneCodeSel 深色下纯白块。只补 select，不整体动 .form-control */
select.form-control,
select.form-select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
select.form-control option { background-color: var(--surface); color: var(--text); }

/* ---------- 浅色主题覆盖 ---------- */
html[data-theme="light"] #page-topbar,
html[data-theme="light"] #page-topbar.yz-topbar { background: var(--nav-bg) !important; }
html[data-theme="light"] .yz-sidebar { background: var(--nav-bg-strong); }
html[data-theme="light"] .yz-footer { background: var(--nav-bg); }

/* ---------- 移动端 ---------- */
/* M1（2026-10-26 客户实测 P0）：抽屉原 top:0 起于页首，被 70px 固定顶栏盖住第一个菜单项。
   桌面分支官方为 top:70px——移动断点漏写偏移，非设计意图。修法：抽屉整体下移顶栏高度并扣减高度，
   偏移量收敛到单一变量 --topbar-h（顶栏实际高度 71px，客户注入验证值），避免硬编码两处不同步。 */
:root { --topbar-h: 71px; }
@media (max-width: 992px) {
  .vertical-menu, .yz-sidebar {
    top: var(--topbar-h) !important;
    height: calc(100% - var(--topbar-h)) !important;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.25);
  }
  /* M2 遮罩层：由 theme.js 创建（.yz-sidebar-scrim），层级低于抽屉(999)高于内容；顶部与抽屉对齐 */
  .yz-sidebar-scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s var(--ease-out);
  }
  .yz-sidebar-scrim.show { opacity: 1; pointer-events: auto; }
  /* M3 背景滚动锁定：抽屉展开（body.sidebar-enable，官方 app.js 切换）时锁 body 滚动 */
  body.sidebar-enable, body.yz-drawer-open { overflow: hidden; }
  .yz-main { margin-left: 0 !important; }
  .footer, .yz-footer { left: 0 !important; }
  .yz-topbar-brand .logo-lg img { height: 15px !important; }
}
/* 桌面端不渲染遮罩（双保险：JS 只在 sidebar-enable 时显示，此处再按断点兜底） */
@media (min-width: 992.01px) {
  .yz-sidebar-scrim { display: none !important; }
}

/* ---------- Q6 侧栏特异度修复（2026-10-24 客户 WCAG 量化：浅色下子项 3.54:1、悬浮 1.08:1 完全不可见） ----------
   根因：官方 body[data-sidebar="dark"] 一整套侧栏规则（#2a3042/#a6b0cf/#79829c/悬浮 #fff），
   我方原覆盖用裸类选择器比特异度低一级，一交互被官方接管。
   修法：同用属性选择器前缀提特异度（不动 data-sidebar 属性本身——官方 app.js 已实证不读该属性）。
   悬浮/激活色用 --accent-text（浅色 5.47:1）而非 --accent（浅色 1.93:1 作文字色不达标）。 */
body[data-sidebar] #sidebar-menu ul li a,
body[data-sidebar] #sidebar-menu ul li ul.sub-menu li a,
body[data-sidebar] .yz-menu-link { color: var(--muted) !important; }
body[data-sidebar] #sidebar-menu ul li a i,
body[data-sidebar] .yz-menu-icon { color: var(--muted) !important; }
body[data-sidebar] #sidebar-menu ul li a:hover,
body[data-sidebar] #sidebar-menu ul li a:hover i,
body[data-sidebar] .yz-menu-link:hover { color: var(--accent-text) !important; }
body[data-sidebar] #sidebar-menu ul li.mm-active > a,
body[data-sidebar] #sidebar-menu li.active > a { color: var(--accent-text) !important; }
/* Q10（2026-10-24 客户实测）：选中态只给了 > a 的文字色，图标 i 被上面的 !important 规则
   直接命中（截断继承链），一行之内两个颜色。补齐 i + 展开箭头 has-arrow:after（同一归属，
   避免下一轮再报——展开箭头由 #sidebar-menu .has-arrow:after 控制，选中时同样不变色）。 */
body[data-sidebar] #sidebar-menu ul li.mm-active > a i,
body[data-sidebar] #sidebar-menu li.active > a i,
body[data-sidebar] .yz-menu li.mm-active > a .yz-menu-icon,
body[data-sidebar] #sidebar-menu .has-arrow.mm-active:after,
body[data-sidebar] #sidebar-menu .has-arrow.active:after { color: var(--accent-text) !important; }

/* ---------- Q9 顶栏右侧对齐（2026-10-24 客户像素实测：明暗按钮贴顶高 27px、铃铛低 5px） ----------
   根因：auth 页的 34px 方块按钮搬进官方 flex 顶栏，子项固定 height 时按起始对齐（贴顶）；
   官方 header-item 内部图标靠 line-height 基线不齐。
   修法：切换按钮并入顶栏体系（裸图标+撑满高度）+ header-item flex 居中统一基线。
   验收口径（客户定，已入矩阵）：顶栏右侧元素垂直中心极差 ≤ 2 实像素。 */
#page-topbar .yz-theme-btn {
  width: 44px;
  height: auto;
  align-self: stretch;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
#page-topbar .yz-theme-btn:hover {
  background: rgba(255, 178, 36, 0.08);
  color: var(--accent-text);
}
#page-topbar .header-item { display: inline-flex; align-items: center; justify-content: center; }
#page-topbar .header-item i { vertical-align: middle; line-height: 1; }

/* ---------- Q7 收起态汉堡进品牌位（2026-10-24 客户 UX 意见，我方采纳方案 A） ----------
   官方机制（app.js 实证）：body.vertical-collpsed = 收起态（≥992px 点汉堡切换）。
   原状：brand-box 缩 70px 但 logo-sm 因配置无 mini 而不渲染 → 空格子 + 旁边汉堡。
   方案 A：收起态汉堡 absolute 进品牌位格子并居中，展开态自动回流失归位。
   【生效口径（2026-10-24 客户书面确认）】：方案 A 为当前生效口径——不配置
   logo_url_home_mini（客户现网无此项，空格问题按方案 A 关闭）；若客户将来自建
   迷你标，须先书面告知我方、由我方切回方案 B（品牌位显示 mini 标、汉堡归原位），
   维护时见此注释请勿误判为缺陷。 */
body.vertical-collpsed .navbar-brand-box { padding: 0; }
body.vertical-collpsed .navbar-brand-box .logo { display: none; }
body.vertical-collpsed #vertical-menu-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Q15 内容容器成对规则（2026-10-24 客户实测：viewbilling 深色白底浅字） ----------
   口径（客户定，全站生效）：凡内容容器背景与文字必须成对处理——只改文字不改背景
   （或反之）必然造成对比度事故。Q13（v10 深色白卡）与 Q15 同根，此处一次性兜底。
   打印态例外：viewbilling 等打印页在 @media print 下强制白底黑字（打印友好是特性）。 */
.card, .el-card, .el-table, .box, .card-body {
  background-color: var(--surface);
  color: var(--text);
}
.card .text-muted, .box .text-muted { color: var(--muted) !important; }
@media print {
  .card, .el-card, .el-table, .box, .card-body { background-color: #fff !important; color: #000 !important; }
}

/* ============================================================
   通用组件深色适配 · 正式版（B3 起为权威版本，2026-10-25）
   ------------------------------------------------------------
   背景（客户 36b 号函 §5.1）：客户曾在本地 skeleton.css 追加约 90 行通用组件兜底
   （表格/表单控件/次级按钮/下拉/分页/标签页 白底清零）。本节转正其精神并扩展到
   全组件族，客户按完整文件替换本文件后撤掉本地追加（不做增量合并）。
   原则：
   ① 颜色一律走主题变量——:root（暗色默认）与 html[data-theme="light"] 自动切换，
      不为深浅两主题各写一遍；
   ② 官方 JS 依赖的类名（如排序点击依赖 thead.bg-light）只改样式、绝不删类名；
   ③ 与官方同特异度时本文件后加载者胜；官方 !important 处对应用 !important；
   ④ 影响面=全会员中心页（经 head.tpl 加载），含已交付页——均为视觉增强无语义变化。
   ============================================================ */

/* ---------- ① 表格族 ---------- */
.table { color: var(--text); }
.table th, .table td { border-color: var(--line-soft); }
.table thead th { color: var(--muted); font-weight: 600; }
.table-hover tbody tr:hover { background-color: var(--surface-2); }
/* bg-light/thead-light：官方 Bootstrap 工具类白底（#f8f9fa!important）——同 !important 后加载胜。
   注意：includes/tablesearch 的排序 JS 以 .bg-light th.pointer 为选择器，类名必须保留 */
thead.bg-light, .thead-light, .thead-light th, .bg-light {
  background-color: var(--surface-2) !important;
  color: var(--text);
}
/* 排序 caret 基底色：官方 JS（includes/tablesearch changeStyle）运行时会写内联黑灰色
   （rgba(0,0,0,.1)/.8），内联胜本规则——官方深浅区分得以保留；
   深色主题的主动修复在 theme.js（yzFixSortCarets 写内联主题色，后写者胜）；
   本规则（不带 !important）只兜底 JS 未运行场景，避免深色下黑箭头看不见 */
.bg-light th.pointer .text-black-50 i { color: var(--muted); }
/* 表尾/搜索/空态（includes/tablefooter、includes/tablesearch） */
.table-footer { color: var(--muted); }
.table-pageinfo { color: var(--muted); font-size: 12.5px; }
.search-box .form-control { background-color: var(--surface-2); }
.search-icon { color: var(--muted) !important; }
.no-data { color: var(--muted); }

/* ---------- ② 表单控件族 ---------- */
/* 官方 Bootstrap .form-control 白底 #fff + 焦点蓝环；global.css 把 disabled/readonly 改 #FAFAFA（仍白） */
.form-control {
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}
.form-control:focus {
  background-color: var(--surface-2);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem rgba(255, 178, 36, 0.12);
}
.form-control::placeholder { color: var(--muted); opacity: .85; }
.form-control:disabled, .form-control[readonly] {
  background-color: var(--surface-2);
  color: var(--muted);
}
/* 原生 select（Q4 已覆盖 select.form-control；此处覆盖 form-select 与 option 列表） */
select.form-control, select.form-select { color: var(--text); }
.form-select { background-color: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
select.form-control option, select.form-select option { background-color: var(--surface); color: var(--text); }
/* 标签文字（官方 col-form-label/label 继承深色问题：深色主题下官方 body 色系为浅，此处显式成对） */
label, .col-form-label { color: var(--text); }
/* Bootstrap4 自定义复选框/单选框（custom-control：input 视觉隐藏，样式在 label::before） */
.custom-control-label { color: var(--text); }
.custom-control-label::before { background-color: var(--surface-2); border-color: var(--line-strong); }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent);
  border-color: var(--accent);
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.15rem rgba(255, 178, 36, 0.12);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  background-color: var(--accent-soft);
}
/* 文件选择（verified.tpl 证件上传 custom-file） */
.custom-file-label {
  background-color: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
}
.custom-file-label::after { background-color: var(--surface); border-color: var(--line); color: var(--text); }
/* 输入组前后缀（验证码获取按钮组等） */
.input-group-text { background-color: var(--surface-2); border-color: var(--line); color: var(--muted); }
.input-group-append .btn, .input-group-prepend .btn { border-color: var(--line); }

/* ---------- ③ 按钮族（Q5 已覆盖 btn-primary 全态；此处补次级/语义/描边按钮） ---------- */
.btn-secondary, .btn-default, .btn-light {
  background-color: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover,
.btn-secondary:focus, .btn-default:focus, .btn-light:focus {
  background-color: var(--surface);
  border-color: var(--muted);
  color: var(--accent-text);
}
/* btn-outline-light：官方白底白边——浅色主题下白底白边完全不可见（客户实测重灾区），
   映射为中性次级按钮（深浅两主题均可见） */
.btn-outline-light {
  background-color: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
.btn-outline-light:hover, .btn-outline-light:focus {
  background-color: var(--surface);
  border-color: var(--muted);
  color: var(--accent-text);
}
/* btn-outline-primary：官方蓝描边 → 品牌黄描边（链接/次级动作品牌色，五勾选之一） */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent-text);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn-danger { background-color: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn-danger:hover, .btn-danger:focus { filter: brightness(1.08); }
.btn-success { background-color: var(--ok); border-color: var(--ok); color: #07281C; }
.btn-success:hover, .btn-success:focus { filter: brightness(1.08); }
.btn-warning { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-info { background-color: var(--surface-2); border-color: var(--line-strong); color: var(--text); }
.btn-info:hover, .btn-info:focus { background-color: var(--surface); border-color: var(--muted); color: var(--accent-text); }
.btn[disabled], .btn.disabled { opacity: .5; }

/* ---------- ④ 下拉菜单（官方 dropdown-menu 白底） ---------- */
.dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--surface-2);
  color: var(--accent-text);
}
.dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--danger) !important; }
.dropdown-divider { border-color: var(--line); }

/* ---------- ⑤ 分页（includes/tablefooter 的 pagination） ---------- */
.page-link {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--muted);
}
.page-link:hover {
  background-color: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--accent-text);
}
.page-item.active .page-link {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.page-item.disabled .page-link {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--muted);
  opacity: .55;
}

/* ---------- ⑥ 标签页（nav-tabs：官方白底 + 蓝色激活） ---------- */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs .nav-link {
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  color: var(--text);
  border-color: var(--line);
  background: transparent;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--accent-text);
  background-color: var(--surface);
  border-color: var(--line) var(--line) var(--surface);
}

/* ---------- ⑦ 模态框（官方 modal-content 白底） ---------- */
.modal-content {
  background-color: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-header .close, .modal-footer .close { color: var(--muted); text-shadow: none; opacity: .8; }
.modal-header .close:hover, .modal-footer .close:hover { color: var(--text); opacity: 1; }

/* ---------- ⑧ 徽章 / 进度条 / 列表组 / 提示框 ---------- */
.badge { font-weight: 600; }
.badge-primary { background-color: var(--accent); color: var(--on-accent); }
.badge-secondary, .badge-light {
  background-color: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.badge-success {
  background-color: rgba(61, 214, 140, 0.12);
  border: 1px solid rgba(61, 214, 140, 0.4);
  color: var(--ok);
}
.badge-danger {
  background-color: rgba(229, 72, 77, 0.12);
  border: 1px solid rgba(229, 72, 77, 0.4);
  color: var(--danger);
}
.badge-warning {
  background-color: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-text);
}
.badge-info {
  background-color: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
/* 进度条：官方白轨；.progress-bar 无 bg-* 修饰时（如安全强度条 bg-danger）由 bg-danger 胜出保持语义红 */
.progress { background-color: var(--surface-2); }
.progress-bar { background-color: var(--accent); }
.list-group-item { background-color: var(--surface); border-color: var(--line); color: var(--text); }
.alert { background-color: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.alert-success {
  background-color: rgba(61, 214, 140, 0.08);
  border-color: rgba(61, 214, 140, 0.4);
  color: var(--ok);
}
.alert-danger {
  background-color: rgba(229, 72, 77, 0.08);
  border-color: rgba(229, 72, 77, 0.4);
  color: var(--danger);
}
.alert-warning {
  background-color: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.alert-info {
  background-color: rgba(141, 155, 176, 0.08);
  border-color: var(--line-strong);
  color: var(--text);
}
.alert .close { color: inherit; text-shadow: none; }

/* ---------- ⑨ 文本/背景工具类（官方 Bootstrap 蓝色系与黑灰色系 → 主题语义色） ---------- */
/* 品牌色（五勾选之一）：主按钮/链接/选中态 = --accent（填充）或 --accent-text（文字） */
.text-primary { color: var(--accent-text) !important; }
.text-info { color: var(--accent-text) !important; }
.text-warning { color: var(--accent-text) !important; }
.text-success { color: var(--ok) !important; }
.text-danger { color: var(--danger) !important; }
.text-dark { color: var(--text) !important; }
.text-black-50 { color: var(--muted) !important; }
.text-black-80 { color: var(--text) !important; }
.text-muted { color: var(--muted) !important; }
/* 背景工具类（白底清零的收尾：bg-white/bg-light → 主题面） */
.bg-white { background-color: var(--surface) !important; }
.bg-primary { background-color: var(--accent) !important; color: var(--on-accent) !important; }
.bg-info { background-color: var(--surface-2) !important; color: var(--text) !important; }
.bg-success { background-color: var(--ok) !important; color: #07281C !important; }
.bg-danger { background-color: var(--danger) !important; color: #FFFFFF !important; }
.bg-warning { background-color: var(--accent) !important; color: var(--on-accent) !important; }

/* ---------- ⑩ 标题层级（B3 五勾选之四：页面/区块/正文三级） ----------
   L1 页面标题：yz-page-title 18px/700（skeleton 页头节，已交付）
   L2 区块标题：card-title 统一 700 字重（官方 Bootstrap 默认 400，仅字重强化、不动字号）
   L3 正文：form/label/td 默认继承 --text，14px 级
   影响面：所有 card-title（含已交付的 configureproduct 订单摘要标题、clientarea 公告标题）
   ——纯字重强化，无尺寸/布局变化，已在 B3 变更清单声明。 */
.card-title { font-weight: 700; }

/* ---------- ⑪ 杂项组件 ---------- */
/* 分隔线（官方 hr 为 rgba(0,0,0,.1)，深色下不可见） */
hr { border-color: var(--line); }
/* 卡片头/脚（官方白底） */
.card-header, .card-footer { background-color: var(--surface-2); border-color: var(--line); }
/* 边框工具类（验证码 img.border 等） */
.border { border-color: var(--line) !important; }
/* select2 保险（部分官方页经 app.js 全局增强 select；渲染白底下拉） */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--surface-2);
  border: 1px solid var(--line);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); }
.select2-container--default .select2-selection__placeholder { color: var(--muted); }
.select2-dropdown {
  background-color: var(--surface);
  border-color: var(--line);
}
.select2-container--default .select2-results__option { color: var(--text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--surface-2);
  color: var(--accent-text);
}
/* dropzone 保险（verified 证件上传库，未初始化时不渲染；初始化后白底区域适配） */
.dz-message { color: var(--muted); }
.dz-preview .dz-details, .dz-preview .dz-image { background-color: var(--surface-2); }

/* ---------- ⑫ bootstrap-select（includes/tablestyle 全表格页加载；B4 产品列表多选筛选在用） ----------
   官方渲染：白底下拉 + 深色文字；深色主题下整块刺眼。类名全保留（JS 依赖），只映射颜色。 */
.bootstrap-select .dropdown-menu {
  background-color: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.bootstrap-select .dropdown-item { color: var(--text); background: transparent; }
.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus,
.bootstrap-select .dropdown-item.active {
  background-color: var(--surface-2);
  color: var(--accent-text);
}
.bootstrap-select .dropdown-item .text { color: inherit; }
.bootstrap-select .dropdown-item .text-muted { color: var(--muted); }
.bootstrap-select .dropdown-toggle .filter-option { color: var(--text); }
.bootstrap-select .dropdown-toggle .filter-option-inner-inner { color: var(--text); }
.bootstrap-select .bs-searchbox .form-control { background-color: var(--surface-2); }
.bootstrap-select .check-mark { color: var(--accent); }
.bootstrap-select .dropdown-menu.inner .selected .check-mark { color: var(--accent); }
.bootstrap-select.show-tick .dropdown-menu .selected span::before { color: var(--accent); }

/* ---------- ⑬ 官方 assets_custom/css/global.css 硬编码对抗（B4 回执 D1/D2 + 六处潜在白底） ----------
   客户 10-26 回执定位：白底定义在官方 global.css，主题层从未覆盖过这些选择器
   （此前白底检测只扫 assets/css/，遗漏 assets_custom/——已据此扩大检测口径）。
   本组逐条对抗：同特异度后加载胜；官方 !important 处对应用 !important。
   浅色主题下 var(--surface)=#FFFFFF 与官方 #fff 同值，视觉零变化（客户要求浅色无回归）。 */

/* D1-① 表格容器白底（global.css L449 `background:#fff`）——产品列表/账单/消息/仪表盘资源表 */
.table-responsive { background: var(--surface); }
/* D1-② 空态 250px Void（global.css L441 `min-height:calc(100vh - 650px)`）——
   仅深色主题调整；空态高度交由 .no-data（官方 150px）内容驱动，浅色维持官方原样 */
html:not([data-theme="light"]) .table-responsive { min-height: 0; }
/* D2 行 hover 浅灰横条（global.css L470 `#f5f7fa`）——仅深色主题，浅色维持官方原样 */
html:not([data-theme="light"]) .table-responsive tbody tr:hover td { background-color: var(--surface-2); }

/* 潜在① .security-item-image（global.css L335 `#fff` + 官方插图底板）——oauth 为空时渲染；
   插图本身是内容保留，只把白底板转主题面（深色下不再是一块白） */
.security-item-image { background-color: var(--surface-2); }
/* 潜在③ btn-light hover（global.css L1087 `#fff`，特异度 0,2,0 压过组件节 0,1,0） */
.btn-light:hover { background-color: var(--surface-2); border-color: var(--muted); color: var(--accent-text); }
/* 潜在④ 购物车登录/注册页 active 态（global.css L1101 `#fff`，特异度 0,4,0） */
.cart-login .btn-primary:not(:disabled):not(.disabled).active,
.cart-register .btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* 潜在⑤ 禁用态按钮（global.css L1178 `#fff`，特异度 0,3,0；另需 !important——
   我方 Q5 的 .btn-primary 全态规则带 !important，非 !important 对抗会被琥珀底压住） */
.btn-group-toggle .btn-primary.disabled {
  background-color: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
/* 潜在⑥ btn-light active/pressed（global.css L1252 `#fff !important`——同等 !important 对抗） */
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
  background-color: var(--surface) !important;
  border-color: var(--muted) !important;
}

/* ---------- B3-5 硬化：长邮箱/用户名截断防护 ----------
   客户 10-26 复测未复现溢出（容器 flex 自适应），但两处容器 nowrap+clip 无省略号保护。
   防御性补齐：仅在文本真正超出时截断，不影响当前视觉。 */
#page-topbar .header-item .d-xl-inline-block,
#page-topbar .header-item .ml-1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yz-sec-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }


/* ── 二级菜单激活态（2026-10-25）────────────────────────────────
   官方只给一级菜单加了 .menuitem-active/.mm-active 规则，
   二级子项（个人信息/安全中心/实名认证…）虽然带 active 类却无任何高亮
   → 用户点击后不知道落在哪一项。此处补：左侧品牌竖条 + 淡黄底 + 品牌字 */
#sidebar-menu ul.sub-menu li > a.active,
#sidebar-menu ul li ul.sub-menu li > a.active,
#sidebar-menu .yz-menu-link.active,
.yz-submenu .yz-menu-link.active {
  color: var(--accent-text) !important;
  background: var(--accent-soft) !important;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
#sidebar-menu ul.sub-menu li > a.active i,
#sidebar-menu .yz-menu-link.active .yz-menu-icon {
  color: var(--accent) !important;
}

/* 二级菜单激活态·修正（2026-10-25）
   上一条特异性 (1,1,3) 压不过 L158 的 body[data-sidebar] #sidebar-menu ul li ul.sub-menu li a (1,1,6)
   → 文字仍为 --muted。此处加 body[data-sidebar] 前缀提到 (1,2,6) 才能生效。 */
body[data-sidebar] #sidebar-menu ul li ul.sub-menu li > a.active,
body[data-sidebar] #sidebar-menu .yz-menu-link.active,
body[data-sidebar] .yz-submenu .yz-menu-link.active {
  color: var(--accent-text) !important;
  background: var(--accent-soft) !important;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
body[data-sidebar] #sidebar-menu ul li ul.sub-menu li > a.active i,
body[data-sidebar] #sidebar-menu .yz-menu-link.active .yz-menu-icon {
  color: var(--accent) !important;
}

/* ── 移动端横向溢出修正（2026-10-25）────────────────────────────
   实测 375px 下实名页：.card-body.p-5 内边距 48px 把内容压到 231px，
   Bootstrap .row 负 margin 再溢出 71px → 表单左侧被视口裁掉、文字显示不全。
   同时授权勾选块长文案需要允许断行。 */
@media (max-width: 767.98px) {
  .card-body.p-5 { padding: 1rem !important; }
  .card-body form .row,
  .card-body > form > .row { margin-left: 0 !important; margin-right: 0 !important; }
  .card-body form .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .card-body form .form-group.row { margin-left: 0 !important; margin-right: 0 !important; }
  /* 授权勾选：允许断行，避免长句撑破容器 */
  .yz-cc-l { font-size: 12.5px !important; line-height: 1.65 !important; align-items: flex-start !important; }
  .yz-cc-l span { word-break: break-word; overflow-wrap: anywhere; white-space: normal; }
}


/* ── 移动端「图例及要求」重排（2026-10-25 · 客户方案：文字在上，两张示例图同一排并缩小）
   根因（实测定位）：verified.tpl 内联 <style> 把 .explanation 写死 height:150px、
   .explanation_msg 写死 height:85px。移动端「文字块 85px + 图片行 104px ≈ 190px」
   实际内容超出 150px 固定高，溢出部分压住了后面的 .yz-cc 与提交按钮。
   修法：移动端解除固定高，文字占满整行在上，两张图并排各 45% 并锁高 104px。 */
@media (max-width: 767.98px) {
  .explanation {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 10px !important;
    box-sizing: border-box !important;
  }
  .explanation .explanation_msg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.62 !important;
    font-size: 12.5px !important;
  }
  .explanation > img {
    display: inline-block !important;
    width: 45% !important;
    max-width: 45% !important;
    height: 104px !important;
    max-height: 104px !important;
    object-fit: contain !important;
    margin: 0 4% 0 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    vertical-align: top !important;
    border-radius: 6px;
  }
  .explanation > img:last-of-type { margin-right: 0 !important; }
  .yz-cc { margin-top: 12px !important; }
}