/* ==========================================================================
   TY · 顶部横向导航（替代左侧竖栏）
   依赖 ty.tokens.css。必须在 app.min.css 之后加载，用来清掉竖栏遗留布局。
   ========================================================================== */

/* ------------------------------------------------- 清掉竖栏占的布局 */
.main-content,
.page-content,
body[data-sidebar] .main-content {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.vertical-menu,
#sidebar-menu,
.ty-sidebar,
#vertical-menu-btn,
.ty-header-overview {
  display: none !important;
}

body.vertical-collpsed .main-content,
body[data-sidebar-size=sm] .main-content {
  margin: 0 !important;
}

/* ------------------------------------------------- 导航条 */
.ty-topnav {
  position: sticky;
  /* #page-topbar 是 fixed 且高 71px，脱离文档流；
     --ty-topbar-h 由 menu.tpl 脚本按实测高度写入，这里兜底 71px */
  top: var(--ty-topbar-h, 71px);
  margin-top: var(--ty-topbar-h, 71px);
  z-index: 1004;
  background: var(--ty-glass);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  /* 两条栏底色同为 --ty-glass，本就无缝；这条线把顶栏/导航/内容切成三段，
     去掉后整页看起来是一层连续表面（用户反馈「横线很明显」） */
  border-bottom: 0;
}

.ty-topnav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2.5vw, 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  /* 这里绝不能开 overflow：CSS 规定一个轴非 visible 时另一个轴的 visible
     会按 auto 处理，于是整个下拉面板被裁掉（面板在导航条下方 46px 处开始） */
  overflow: visible;
}

.ty-topnav-list { flex: 0 0 auto; }

.ty-topnav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.ty-li { position: relative; }

/* 一级项 */
.ty-a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: var(--ty-text-2) !important;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  border-radius: 9px;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}

.ty-a:hover {
  color: var(--ty-text) !important;
  background: var(--ty-surface-2);
}

.ty-a.is-active,
.ty-li.is-open > .ty-a {
  color: var(--ty-text) !important;
  background: var(--ty-surface-2);
}

.ty-a > i:first-child {
  font-size: 16px;
  color: var(--ty-text-3);
}

.ty-a.is-active > i:first-child { color: var(--ty-text); }

.ty-tag {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--ty-surface);
  border: 1px solid var(--ty-border);
  color: var(--ty-text-3);
}

/* 下拉箭头 */
.ty-caret {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .55;
}

.ty-caret.right {
  margin-left: auto;
  transform: rotate(-45deg);
}

/* ------------------------------------------------- 二级下拉 */
/* global.css 里有 .dropdown-menu{min-width:5rem !important}，
   不加 !important 会被它压成 80px 的小面板 */
.ty-topnav .ty-menu {
  min-width: 236px !important;
  margin-top: 6px;
  padding: 7px;
  border: 1px solid var(--ty-border);
  border-radius: 14px;
  background: var(--ty-surface);
  box-shadow: 0 14px 34px rgba(var(--ty-glow-rgb, 12, 14, 18), .16) !important;
  /* 内联样式给 .dropdown-menu 加了 overflow:hidden，会把三级飞出裁掉 */
  overflow: visible;
}

/* 按钮和面板之间有 6px 视觉间隙，指针穿过这 6px 时既不在按钮上也不在面板上，
   :hover 立刻失效 → 面板闪关，根本点不到子项。用一块透明桥接补上命中区。 */
.ty-topnav .ty-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.ty-ma {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--ty-text-2) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}

.ty-ma:hover,
.ty-ma:focus {
  background: var(--ty-surface-2);
  color: var(--ty-text) !important;
}

.ty-ma.is-active { color: var(--ty-text) !important; font-weight: 650; }

/* 图标列定宽，文字才对齐 */
.ty-ma > i:first-child {
  flex: 0 0 18px;
  width: 18px;
  font-size: 15px;
  text-align: center;
  color: var(--ty-text-3);
}

.ty-ma:hover > i:first-child,
.ty-ma.is-active > i:first-child { color: var(--ty-text-2); }

/* 三级：飞出 */
.dropdown-submenu { position: relative; }

.ty-menu2 {
  top: -8px;
  left: 100%;
  margin-left: 6px;
  min-width: 200px !important;
  padding: 7px;
  border: 1px solid var(--ty-border);
  border-radius: 14px;
  background: var(--ty-surface);
  box-shadow: 0 14px 34px rgba(var(--ty-glow-rgb, 12, 14, 18), .16) !important;
}

.dropdown-submenu:hover > .ty-menu2,
.dropdown-submenu:focus-within > .ty-menu2,
.dropdown-submenu.ty-hover > .ty-menu2 { display: block; }

/* 三级同理：飞出面板左侧 6px 间隙也要能接得住指针 */
.ty-menu2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 8px;
}

/* 桌面端悬停即开（.ty-hover 是 JS 给的关闭缓冲，触屏仍走 Bootstrap 点击） */
@media (min-width: 992px) {
  .ty-li.dropdown:hover > .ty-menu,
  .ty-li.dropdown.ty-hover > .ty-menu { display: block; }

  .ty-li.dropdown:hover > .ty-a,
  .ty-li.dropdown.ty-hover > .ty-a {
    color: var(--ty-text) !important;
    background: var(--ty-surface-2);
  }
}

/* 移动端：横向可滚，不折叠成汉堡 */
@media (max-width: 767.98px) {
  .ty-a { height: 42px; padding: 0 10px; font-size: 13.5px; }
  .ty-topnav .ty-menu { max-width: 78vw; overflow-x: auto; }
}

/* 减弱动效 */
@media (prefers-reduced-motion: reduce) {
  .ty-a, .ty-ma { transition: none; }
}


/* 导航已经占了顶部那条带，page-content 原本为 fixed 顶栏留的 94px 要收掉 */
.ty-topnav + .main-content .page-content,
body:has(.ty-topnav) .page-content {
  padding-top: 24px !important;
}

@media (max-width: 767.98px) {
  .ty-topnav + .main-content .page-content,
  body:has(.ty-topnav) .page-content { padding-top: 16px !important; }
}


/* ============================================================ 认证页
   登录/注册/找回密码/绑定 页不需要那条深色工具顶栏：
   它只放「请登录 / 语言 / 主题切换」，前两项导航条已有，
   主题切换由 menu.tpl 在导航条右端补上。
   隐藏后 #page-topbar 的 offsetHeight 变 0，
   menu.tpl 的实测脚本会自动把 --ty-topbar-h 归零，导航条自然贴顶。 */
body[data-ty-auth] #page-topbar {
  display: none !important;
}

body[data-ty-auth] .ty-topnav {
  border-top: 0;
  border-bottom: 0;
}

body[data-ty-auth] .ty-topnav-inner {
  max-width: 1240px;
}

/* 导航条右端工具区（认证页专用） */
.ty-topnav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
}


/* ------------------------------------------------- 导航条上的主题切换 */
.ty-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ty-border);
  background: var(--ty-surface);
  color: var(--ty-text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}

.ty-theme-toggle:hover {
  color: var(--ty-text);
  border-color: var(--ty-border-2);
}

.ty-theme-toggle .ty-ico {
  width: 14px;
  height: 14px;
  display: none;
  flex: none;
}

.ty-theme-toggle .ty-ico-moon { display: block; }
.ty-theme-toggle[data-ty-resolved="dark"] .ty-ico-moon { display: none; }
.ty-theme-toggle[data-ty-resolved="dark"] .ty-ico-sun { display: block; }


/* 认证页不依赖 JS 测高：顶栏既然隐藏，导航条就直接贴顶。
   JS 只负责内页那条真实存在的顶栏高度。 */
body[data-ty-auth] .ty-topnav {
  margin-top: 0 !important;
  top: 0 !important;
}


/* ============================================================ 侧栏移除后的遗留偏移
   厂商给页脚写了 .footer { position: relative; left: 230px }，用来避开
   230px 的左侧栏。竖栏已改成顶部导航，这个 left 会把页脚整体推右、
   撑破文档宽度（出现横向滚动条 + 右侧一大块空白）。 */
footer.footer,
.footer {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  /* 页脚不再单独一块白底 + 顶边线：body 已经是固定渐变层，
     这里透明就等于「和内容是同一个背景」，不会在末尾突出来一块。 */
  background: transparent !important;
  border-top: 0 !important;
  color: var(--ty-text-3) !important;
  font-size: 12.5px;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* 页脚文字要跟内容列同一条 1440 的中轴，不能贴着屏幕左边。
   Bootstrap 的 .row 自带 -12px 负外边距，会把文字再往左推 12px，
   而内容区里的卡片不吃这个 gutter，所以这里一并抵消掉。 */
.footer > .container-fluid {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

.footer .row {
  margin-left: 0;
  margin-right: 0;
}

.footer .col-sm-6 {
  padding-left: 0;
  padding-right: 0;
}

.footer a { color: var(--ty-text-2) !important; }
.footer a:hover { color: var(--ty-text) !important; }

/* 顶栏 / 导航行 / 内容区共用同一条宽度和左右边缘 */
.navbar-header,
.ty-topnav-inner,
.page-content > .container-fluid {
  max-width: 1440px;
}


/* ============================================================ 手机端 ≤767.98px
   上面那条移动规则写的是 `.ty-topnav .ty-menu`，但导航列表的实际类名是
   .ty-topnav-list —— 选择器早就失效，规则从未命中。于是 ul 按 flex:0 0 auto
   永不收缩，撑到 max-content 565px，把整页文档宽顶到 577px（视口 375），
   页面可以横向拖动约 200px。

   这里不能改成 overflow-x:auto 收场：CSS 规定一个轴非 visible 时，另一个轴
   的 visible 会按 auto 计算，挂在导航下面的下拉面板会被自己的容器裁掉
   —— 跟 .ty-topnav-inner 绝不能开 overflow 是同一个坑。
   正确做法是让 ul 在 flex 父级里可以收缩，靠它本来就有的 flex-wrap:wrap 换行。 */
@media (max-width: 767.98px) {
  .ty-topnav-list {
    flex: 1 1 auto;   /* 覆盖前面的 0 0 auto，允许被压窄 */
    min-width: 0;     /* flex 子项默认 min-width:auto，不写这句收缩不生效 */
    max-width: 100%;
  }

  .ty-topnav-inner { row-gap: 2px; }

  /* 图标按钮尺寸在 header.tpl 的 575.98px 块里改（它后加载，改这里没用） */
}

/* ===== DARKMODE 深色模式全局适配（BS4，!important 压页面级写死白底）=====
   仅深色生效，浅色不动。放 ty.nav.css 因它在所有 clientarea 页加载。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .card-header,
  :root:not([data-theme="light"]) .card-footer,
  :root:not([data-theme="light"]) .list-group-item,
  :root:not([data-theme="light"]) .modal-content,
  :root:not([data-theme="light"]) .modal-header,
  :root:not([data-theme="light"]) .modal-footer,
  :root:not([data-theme="light"]) .dropdown-menu,
  :root:not([data-theme="light"]) .form-control,
  :root:not([data-theme="light"]) .custom-select,
  :root:not([data-theme="light"]) .bootstrap-select .dropdown-toggle,
  :root:not([data-theme="light"]) .input-group-text,
  :root:not([data-theme="light"]) .bg-white,
  :root:not([data-theme="light"]) .table,
  :root:not([data-theme="light"]) .table th,
  :root:not([data-theme="light"]) .table td,
  :root:not([data-theme="light"]) .table thead th {
    background-color: var(--ty-surface) !important;
    color: var(--ty-text) !important;
    border-color: var(--ty-border) !important;
  }
  :root:not([data-theme="light"]) .text-muted { color: var(--ty-text-3) !important; }
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .list-group-item,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .bootstrap-select .dropdown-toggle,
:root[data-theme="dark"] .input-group-text,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td,
:root[data-theme="dark"] .table thead th {
  background-color: var(--ty-surface) !important;
  color: var(--ty-text) !important;
  border-color: var(--ty-border) !important;
}
:root[data-theme="dark"] .text-muted { color: var(--ty-text-3) !important; }

/* ===== DARKMODE2 深色补充：白渐变 + bg 工具类 + servicedetail 自定义盒子 ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .table,
  :root:not([data-theme="light"]) .bg-light,
  :root:not([data-theme="light"]) .bg-white,
  :root:not([data-theme="light"]) .bg-gray,
  :root:not([data-theme="light"]) .server_header_box,
  :root:not([data-theme="light"]) .bottom-box,
  :root:not([data-theme="light"]) .box_left_wrap,
  :root:not([data-theme="light"]) .power_box,
  :root:not([data-theme="light"]) .pre-money-box,
  :root:not([data-theme="light"]) .zdphig,
  :root:not([data-theme="light"]) .chart_content_box,
  :root:not([data-theme="light"]) .card-body { background-image: none !important; }
  :root:not([data-theme="light"]) .bg-light,
  :root:not([data-theme="light"]) .bg-white,
  :root:not([data-theme="light"]) .bg-gray,
  :root:not([data-theme="light"]) .server_header_box,
  :root:not([data-theme="light"]) .bottom-box,
  :root:not([data-theme="light"]) .box_left_wrap,
  :root:not([data-theme="light"]) .power_box,
  :root:not([data-theme="light"]) .pre-money-box,
  :root:not([data-theme="light"]) .zdphig,
  :root:not([data-theme="light"]) .chart_content_box {
    background-color: var(--ty-surface) !important;
    color: var(--ty-text) !important;
    border-color: var(--ty-border) !important;
  }
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-gray,
:root[data-theme="dark"] .server_header_box,
:root[data-theme="dark"] .bottom-box,
:root[data-theme="dark"] .box_left_wrap,
:root[data-theme="dark"] .power_box,
:root[data-theme="dark"] .pre-money-box,
:root[data-theme="dark"] .zdphig,
:root[data-theme="dark"] .chart_content_box,
:root[data-theme="dark"] .card-body { background-image: none !important; }
:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-gray,
:root[data-theme="dark"] .server_header_box,
:root[data-theme="dark"] .bottom-box,
:root[data-theme="dark"] .box_left_wrap,
:root[data-theme="dark"] .power_box,
:root[data-theme="dark"] .pre-money-box,
:root[data-theme="dark"] .zdphig,
:root[data-theme="dark"] .chart_content_box {
  background-color: var(--ty-surface) !important;
  color: var(--ty-text) !important;
  border-color: var(--ty-border) !important;
}

/* ===== DARKMODE3 深色补充：text-white-50 标签转亮 + 原生 select 转深 ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .text-white-50 { color: rgba(255, 255, 255, .55) !important; }
  :root:not([data-theme="light"]) select {
    background-color: var(--ty-surface) !important;
    color: var(--ty-text) !important;
    border-color: var(--ty-border) !important;
  }
}
:root[data-theme="dark"] .text-white-50 { color: rgba(255, 255, 255, .55) !important; }
:root[data-theme="dark"] select {
  background-color: var(--ty-surface) !important;
  color: var(--ty-text) !important;
  border-color: var(--ty-border) !important;
}

/* ===== DARKMODE4 深色：去掉卡片/表格/弹层/下拉的粉色辉光，换中性暗影 ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .table-responsive,
  :root:not([data-theme="light"]) .modal-content,
  :root:not([data-theme="light"]) .dropdown-menu {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
  }
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table-responsive,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu {
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important;
}

/* ===== DARKMODE5 深色：分页中性化（去白/粉胶囊，active 用稍亮深面区分）===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-link { background-color: var(--ty-surface) !important; color: var(--ty-text-2) !important; border-color: var(--ty-border) !important; box-shadow: none !important; }
  :root:not([data-theme="light"]) .page-item.active .page-link { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
  :root:not([data-theme="light"]) .page-item.disabled .page-link { background-color: var(--ty-surface) !important; color: var(--ty-text-3) !important; }
  :root:not([data-theme="light"]) .page-link:hover { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; }
}
:root[data-theme="dark"] .page-link { background-color: var(--ty-surface) !important; color: var(--ty-text-2) !important; border-color: var(--ty-border) !important; box-shadow: none !important; }
:root[data-theme="dark"] .page-item.active .page-link { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; border-color: var(--ty-border-2) !important; }
:root[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--ty-surface) !important; color: var(--ty-text-3) !important; }
:root[data-theme="dark"] .page-link:hover { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; }

/* ===== DARKMODE6 深色：顶栏搜索框内层 input 转深（原来写死白底）===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ty-header-search,
  :root:not([data-theme="light"]) .ty-header-search input { background-color: transparent !important; color: var(--ty-text) !important; }
  :root:not([data-theme="light"]) .ty-header-search input::placeholder { color: var(--ty-text-3) !important; }
}
:root[data-theme="dark"] .ty-header-search,
:root[data-theme="dark"] .ty-header-search input { background-color: transparent !important; color: var(--ty-text) !important; }
:root[data-theme="dark"] .ty-header-search input::placeholder { color: var(--ty-text-3) !important; }

/* ===== DARKMODE7 深色：软按钮转深底（保留语义文字色，primary 转 accent 实底）===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; border-color: var(--ty-border) !important; }
  :root:not([data-theme="light"]) .btn.btn-primary { background-color: var(--ty-accent) !important; color: var(--ty-on-accent) !important; border-color: transparent !important; }
  :root:not([data-theme="light"]) .btn.btn-danger { color: var(--ty-err) !important; }
  :root:not([data-theme="light"]) .btn.btn-warning { color: var(--ty-warn) !important; }
  :root:not([data-theme="light"]) .btn.btn-success { color: var(--ty-ok) !important; }
}
:root[data-theme="dark"] .btn { background-color: var(--ty-surface-2) !important; color: var(--ty-text) !important; border-color: var(--ty-border) !important; }
:root[data-theme="dark"] .btn.btn-primary { background-color: var(--ty-accent) !important; color: var(--ty-on-accent) !important; border-color: transparent !important; }
:root[data-theme="dark"] .btn.btn-danger { color: var(--ty-err) !important; }
:root[data-theme="dark"] .btn.btn-warning { color: var(--ty-warn) !important; }
:root[data-theme="dark"] .btn.btn-success { color: var(--ty-ok) !important; }

/* ===== BTNSEM 按钮语义化：区分主次/危险/成功/取消，别全一个粉（浅色生效；深色另有 DARKMODE7）===== */
.btn.btn-primary { background-color: var(--ty-accent) !important; color: var(--ty-on-accent) !important; border-color: transparent !important; }
.btn.btn-danger { background-color: #dc2626 !important; color: #fff !important; border-color: transparent !important; }
.btn.btn-success { background-color: #059669 !important; color: #fff !important; border-color: transparent !important; }
.btn.btn-warning { background-color: #d97706 !important; color: #fff !important; border-color: transparent !important; }
.btn.btn-info { background-color: #2563eb !important; color: #fff !important; border-color: transparent !important; }
.btn.btn-secondary, .btn.btn-default, .btn.btn-light { background-color: var(--ty-surface-2) !important; color: var(--ty-text-2) !important; border: 1px solid var(--ty-border-2) !important; }

/* ===== BTNGHOST 次级按钮去填充：透明底 + 语义描边 + 语义文字（primary 保留实心强调）===== */
.btn.btn-danger { background-color: transparent !important; color: #dc2626 !important; border: 1px solid #dc2626 !important; }
.btn.btn-danger:hover { background-color: rgba(220, 38, 38, .08) !important; }
.btn.btn-success { background-color: transparent !important; color: #059669 !important; border: 1px solid #059669 !important; }
.btn.btn-success:hover { background-color: rgba(5, 150, 105, .08) !important; }
.btn.btn-warning { background-color: transparent !important; color: #d97706 !important; border: 1px solid #d97706 !important; }
.btn.btn-warning:hover { background-color: rgba(217, 119, 6, .08) !important; }
.btn.btn-info { background-color: transparent !important; color: #2563eb !important; border: 1px solid #2563eb !important; }
.btn.btn-info:hover { background-color: rgba(37, 99, 235, .08) !important; }

/* ===== FILEBTN 附件文件选择按钮：原生 file input 的按钮加填充 ===== */
input[type="file"]::file-selector-button,
.form-control-file::file-selector-button {
  background-color: var(--ty-surface-2);
  color: var(--ty-text);
  border: 1px solid var(--ty-border-2);
  border-radius: 999px;
  padding: 7px 16px;
  margin-right: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease;
}
input[type="file"]::file-selector-button:hover,
.form-control-file::file-selector-button:hover { background-color: var(--ty-accent); color: var(--ty-on-accent); border-color: transparent; }

/* ===== FILEBTN2 文件选择按钮填充（带 -webkit 前缀 + 可见填充）===== */
input[type="file"]::-webkit-file-upload-button,
.form-control-file::-webkit-file-upload-button,
input[type="file"]::file-selector-button,
.form-control-file::file-selector-button {
  background-color: #e8ebef !important;
  color: #101215 !important;
  border: 1px solid #c9ced6 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  margin-right: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  background-color: var(--ty-accent) !important; color: #fff !important; border-color: transparent !important;
}

/* ===== 添加更多(btn-success) 填充实心绿+白字（文字也一并显出来）===== */
.btn.btn-success { background-color: #059669 !important; color: #fff !important; border: 1px solid #059669 !important; }
.btn.btn-success:hover { background-color: #047857 !important; border-color: #047857 !important; color: #fff !important; }
/* 确保顶栏的主题切换按钮 SVG 正确显示和切换 */
.ty-theme-toggle .ty-ico {
  width: 19px !important;
  height: 19px !important;
  display: none !important;
  pointer-events: none;
}
.ty-theme-toggle .ty-ico-moon {
  display: block !important;
}
html[data-theme= dark] .ty-theme-toggle .ty-ico-moon,
[data-ty-resolved=dark] .ty-ico-moon {
  display: none !important;
}
html[data-theme=dark] .ty-theme-toggle .ty-ico-sun,
[data-ty-resolved=dark] .ty-ico-sun {
  display: block !important;
}
/* ----------------------------------------------------
   强行提权深色样式与事件层级
   ---------------------------------------------------- */
.ty-theme-toggle,
.ty-auth-theme {
  pointer-events: auto !important; /* 确保鼠标事件不被穿透或阻挡 */
  z-index: 99999 !important; /* 确保自身层级在所有透明遮罩之上 */
}

/* 确保顶栏内部层级高于伪类渐变背景 */
.ty-header-right,
.ty-header-nav,
.ty-hicon {
  position: relative !important;
  z-index: 100 !important;
}
/* ======= 最强硬的主题切换按钮事件穿透保护 ======= */
.ty-theme-toggle {
    position: relative !important;
    z-index: 2147483647 !important; /* CSS 允许的最大 Z-index */
    pointer-events: auto !important;
    isolation: isolate !important;
}
.ty-theme-toggle svg {
    pointer-events: none !important;
}
/* 取消所有可能遮挡按钮的父级 pointer-events 控制 */
.ty-header-right,
.ty-header-nav,
.navbar-header {
    pointer-events: auto !important;
}
/* ======== 修补完毕 ======== */
/* 解决官网顶栏和登录页等 SVG 图标层级和显示问题 */
[data-ty-theme-toggle] {
    pointer-events: auto !important;
    position: relative;
    z-index: 9999;
}
[data-ty-theme-toggle] svg {
    pointer-events: none !important;
}
.ty-theme-toggle .ty-ico-moon,
.ty-theme-toggle .i-moon {
    display: block !important;
}
html[data-theme= dark] .ty-theme-toggle .ty-ico-moon,
html[data-theme=dark] .ty-theme-toggle .i-moon {
    display: none !important;
}
html[data-theme=dark] .ty-theme-toggle .ty-ico-sun,
html[data-theme=dark] .ty-theme-toggle .i-sun {
    display: block !important;
}

/* ===== 深色：监控图容器/卡片压深（canvas 外的边距/卡片底）===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .my-echart,
  :root:not([data-theme="light"]) .echart-main,
  :root:not([data-theme="light"]) .manage-content,
  :root:not([data-theme="light"]) .main-content { background-color: transparent !important; }
}
:root[data-theme="dark"] .my-echart,
:root[data-theme="dark"] .echart-main,
:root[data-theme="dark"] .manage-content,
:root[data-theme="dark"] .main-content { background-color: transparent !important; }


/* ===== TY-SVC-BTN 2026-10-11 产品详情页操作按钮：去填充改描边、修对比度 =====
   现象：① 重装系统/重置密码 是厂商写死的蓝色实心(#0080ff)，跟粉色主题打架；
        ② 续费/申请停用 被上轮"粉光→中性"改成了粉色渐变底，但文字仍是
           btn-success 绿 / btn-danger 红 → 红绿字压粉底，看不清；
        ③ 开机/关机/重启… 电源下拉项白底浅字，深色模式下直接隐形。
   统一：小操作按钮一律去填充 → 描边（透明底 + 主题色字 + 主题色边），
        只有 hover 才实色填充；语义色分开（续费=accent 粉、申请停用=err 红），
        深浅两套全靠令牌自动可读。控制台/VNC 是主 CTA，保留粉色实色不动。 */

/* 蓝色实心按钮（重装系统 / 重置密码）+ 续费/申请停用 → 描边 */
.service_module_button:not(.dropdown-item):not(.custom-button),
.btn.rsb {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid var(--ty-accent) !important;
  border-radius: 999px !important;
  color: var(--ty-accent) !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* 危险动作（申请停用）走红色系，别跟续费同色 */
.btn.btn-danger.rsb {
  border-color: var(--ty-err) !important;
  color: var(--ty-err) !important;
}

/* hover：实色填充 + 反白字，对比拉满 */
.service_module_button:not(.dropdown-item):not(.custom-button):hover,
.btn.btn-success.rsb:hover {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
}
.btn.btn-danger.rsb:hover {
  background-color: var(--ty-err) !important;
  border-color: var(--ty-err) !important;
  color: #fff !important;
}

/* 电源下拉项（开机/关机/重启/硬关机/硬重启/救援系统…）：白底浅字 → 主题面板底 + 可读字 */
.dropdown-item.service_module_button {
  background-color: var(--ty-surface) !important;
  background-image: none !important;
  color: var(--ty-text) !important;
  border: 1px solid var(--ty-border-2) !important;
  border-radius: 10px !important;
}
.dropdown-item.service_module_button:hover {
  background-color: rgba(var(--ty-accent-rgb), .12) !important;
  color: var(--ty-accent) !important;
}


/* ===== TY-SVC-BTN2 2026-10-11 提高 .rsb 权重，压过 BTNSEM/添加更多/DARKMODE 等旧规则 =====
   上一版 .btn.rsb(0,2,0) 被 :root[data-theme=dark] .btn.btn-success(0,4,0) 与
   全局 .btn.btn-success 实心绿(637行) 压住，续费/申请停用 没变成描边。
   这里用 :root[data-theme] .btn.btn-*.rsb(0,5,0) 强制：去填充→描边，
   续费=success 绿、申请停用=err 红，hover 实色反白。语义清晰、深浅都可读。 */
:root[data-theme] .btn.btn-success.rsb,
:root[data-theme] .btn.btn-danger.rsb {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
:root[data-theme] .btn.btn-success.rsb {
  color: var(--ty-ok) !important;
  border: 1px solid var(--ty-ok) !important;
}
:root[data-theme] .btn.btn-danger.rsb {
  color: var(--ty-err) !important;
  border: 1px solid var(--ty-err) !important;
}
:root[data-theme] .btn.btn-success.rsb:hover {
  background-color: var(--ty-ok) !important;
  border-color: var(--ty-ok) !important;
  color: #fff !important;
}
:root[data-theme] .btn.btn-danger.rsb:hover {
  background-color: var(--ty-err) !important;
  border-color: var(--ty-err) !important;
  color: #fff !important;
}


/* ===== TY-SVC-DARK 2026-10-11 产品详情页动态内容深色补全 =====
   厂商/历史遗留：设置页「挂载ISO/启动项」两张卡是写死浅底 #f5f4f7，
   文字却是主题浅色 → 深色下白底浅字全糊；模态框 .modal-body 也是白底；
   还有 .btn_main.purple 其实是蓝色 #2f54ea，跟粉色主题打架。
   这里只在深色下把卡片/模态框拉回主题面板色；蓝色主按钮深浅都改成主题粉。 */

/* 设置页两张卡 → 主题面板底 */
:root[data-theme="dark"] .mountingISO,
:root[data-theme="dark"] .startupItem {
  background-color: var(--ty-panel) !important;
  border: 1px solid var(--ty-border-2) !important;
  color: var(--ty-text) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28) !important;
}
:root[data-theme="dark"] .mountingISO .public_title,
:root[data-theme="dark"] .startupItem .public_title { color: var(--ty-text) !important; }

/* 卡内表单控件（选择框/输入框）深色 */
:root[data-theme="dark"] .mountingISO .form-control,
:root[data-theme="dark"] .startupItem .form-control,
:root[data-theme="dark"] .mountingISO .custom-select,
:root[data-theme="dark"] .startupItem .custom-select,
:root[data-theme="dark"] .mountingISO select,
:root[data-theme="dark"] .startupItem select {
  background-color: var(--ty-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ty-border-2) !important;
  color: var(--ty-text) !important;
}
:root[data-theme="dark"] .mountingISO .form-control::placeholder,
:root[data-theme="dark"] .startupItem .form-control::placeholder { color: var(--ty-text-2) !important; }

/* 模态框 body 白底 → 透明，跟随深色 modal-content */
:root[data-theme="dark"] .modal-body {
  background-color: transparent !important;
  color: var(--ty-text) !important;
}
:root[data-theme="dark"] .modal-body .form-control,
:root[data-theme="dark"] .modal-body .custom-select {
  background-color: var(--ty-surface) !important;
  color: var(--ty-text) !important;
  border: 1px solid var(--ty-border-2) !important;
}

/* 蓝色主按钮 .btn_main.purple → 主题粉（蓝与全站粉色冲突，深浅都改） */
.btn_main.purple {
  background-image: linear-gradient(135deg, var(--ty-accent), var(--ty-accent-2)) !important;
  background-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
  border: 0 !important;
}
.btn_main.purple:hover {
  background-color: var(--ty-accent-2) !important;
  color: var(--ty-on-accent) !important;
}


/* ===== TY-SVC-DARK2 2026-10-11 模态框/自定义下拉/告警条 深色补全 =====
   ① 产品详情设置页的「挂载ISO/启动项」用的是自定义下拉(filter-text/title/list)，
      白底浅字深色下糊；② .alert-danger 等告警条是浅色主题粉/黄底，深色下刺眼；
      ③ 原生 checkbox 白框。统一在深色下修。 */

/* 自定义下拉控件 → 主题面板底 + 可读字 */
:root[data-theme="dark"] .filter-text,
:root[data-theme="dark"] .filter-title {
  background-color: var(--ty-surface) !important;
  background-image: none !important;
  color: var(--ty-text) !important;
  border-color: var(--ty-border-2) !important;
}
:root[data-theme="dark"] .filter-list {
  background-color: var(--ty-surface) !important;
  border: 1px solid var(--ty-border-2) !important;
}
:root[data-theme="dark"] .filter-list li {
  background-color: transparent !important;
  color: var(--ty-text) !important;
}
:root[data-theme="dark"] .filter-list li:hover,
:root[data-theme="dark"] .filter-list li.active,
:root[data-theme="dark"] .filter-list li.on,
:root[data-theme="dark"] .filter-list li.selected {
  background-color: rgba(var(--ty-accent-rgb), .16) !important;
  color: var(--ty-accent) !important;
}

/* 告警条：深色下改成半透明语义色底 + 亮色字，别再用浅色主题的实粉底 */
:root[data-theme="dark"] .alert-danger {
  background-color: rgba(255, 107, 97, .13) !important;
  border-color: rgba(255, 107, 97, .38) !important;
  color: #ffb4af !important;
}
:root[data-theme="dark"] .alert-warning {
  background-color: rgba(240, 180, 60, .13) !important;
  border-color: rgba(240, 180, 60, .38) !important;
  color: #f2cf8f !important;
}
:root[data-theme="dark"] .alert-success {
  background-color: rgba(10, 180, 90, .15) !important;
  border-color: rgba(10, 180, 90, .38) !important;
  color: #8fe0b0 !important;
}
:root[data-theme="dark"] .alert-info {
  background-color: rgba(80, 150, 220, .15) !important;
  border-color: rgba(80, 150, 220, .38) !important;
  color: #a9d2f5 !important;
}

/* 原生勾选框/单选框跟随主题色 */
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] {
  accent-color: var(--ty-accent);
}


/* ===== TY-SVC-DARK3 2026-10-11 自定义下拉「选项文字」深色补全 =====
   .filter-list 的 li 已改浅色，但选项文字其实在 li 里的 <a> 上，被全局 a{color:#333}
   压成深字→深底看不见。这里把 <a> 也拉到主题浅色，hover/选中用主题色。 */
:root[data-theme="dark"] .filter-list li a,
:root[data-theme="dark"] .filter-list li span {
  color: var(--ty-text) !important;
}
:root[data-theme="dark"] .filter-list li:hover,
:root[data-theme="dark"] .filter-list li:hover a,
:root[data-theme="dark"] .filter-list li.active,
:root[data-theme="dark"] .filter-list li.active a,
:root[data-theme="dark"] .filter-list li.on,
:root[data-theme="dark"] .filter-list li.on a,
:root[data-theme="dark"] .filter-list li.selected,
:root[data-theme="dark"] .filter-list li.selected a {
  color: var(--ty-accent) !important;
}


/* ===== TY-SWAL 2026-10-11 SweetAlert2 弹窗跟随主题 + 居中 + 按钮主题色 =====
   快照/备份等操作成功后弹的 Swal.fire 成功框：白底浅字（深色下糊）、OK 是默认蓝、
   模块还注入过 .swal2-popup{position:absolute;top:0} 把它钉顶。
   用 body .swal2-container .swal2-* 的高权重(0,2,1)压过模块运行时注入的 !important，
   颜色全走令牌 → 深浅自适应。 */

/* 遮罩：给个半透明底，像模态框 */
body .swal2-container.swal2-backdrop-show,
body .swal2-container {
  background: rgba(18, 14, 22, .55) !important;
}

/* 弹窗主体：跟随主题、居中、圆角 */
body .swal2-container .swal2-popup {
  position: relative !important;
  top: auto !important;
  margin: auto !important;
  background: var(--ty-surface) !important;
  background-image: none !important;
  color: var(--ty-text) !important;
  border: 1px solid var(--ty-border-2) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45) !important;
}
body .swal2-container .swal2-title { color: var(--ty-text) !important; }
body .swal2-container .swal2-html-container,
body .swal2-container .swal2-content { color: var(--ty-text-2) !important; }
body .swal2-container .swal2-close { color: var(--ty-text-2) !important; }
body .swal2-container .swal2-close:hover { color: var(--ty-accent) !important; }

/* 确认按钮 → 主题粉（默认蓝跟全站冲突） */
body .swal2-container .swal2-confirm.swal2-styled {
  background: var(--ty-accent) !important;
  background-image: none !important;
  border-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
  box-shadow: none !important;
}
body .swal2-container .swal2-confirm.swal2-styled:hover {
  background: var(--ty-accent-2) !important;
  border-color: var(--ty-accent-2) !important;
}
/* 取消/拒绝按钮 → 中性 */
body .swal2-container .swal2-deny.swal2-styled,
body .swal2-container .swal2-cancel.swal2-styled {
  background: var(--ty-surface-2) !important;
  color: var(--ty-text) !important;
  border: 1px solid var(--ty-border-2) !important;
  box-shadow: none !important;
}


/* ===== TY-UPG-BEAUTY 2026-10-11 升降配/选项胶囊美化 + 单选主题色 =====
   数据盘/网络类型这类 .btn-group-toggle 选项：原来选中与未选中都是粉底，看不出选了哪个。
   改成 未选=描边(透明底+粉边+粉字)、选中=实心粉渐变+柔光，层级清楚、也更贴主题。
   IP 数量这类 .form-check-input 单选原来是系统蓝(#0064ff)，强制跟随主题粉。 */

/* 选项胶囊：未选描边 */
.btn-group-toggle .btn.btn-primary {
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid var(--ty-accent) !important;
  color: var(--ty-accent) !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn-group-toggle .btn.btn-primary:hover {
  background-color: rgba(var(--ty-accent-rgb), .10) !important;
  color: var(--ty-accent) !important;
}
/* 选中：实心粉 + 柔光 */
.btn-group-toggle .btn.btn-primary.active,
.btn-group-toggle .btn.btn-primary:has(input:checked) {
  background-image: linear-gradient(135deg, var(--ty-accent), var(--ty-accent-2)) !important;
  background-color: var(--ty-accent) !important;
  border-color: transparent !important;
  color: var(--ty-on-accent) !important;
  box-shadow: 0 8px 18px rgba(var(--ty-accent-rgb), .28) !important;
}
.btn-group-toggle .btn.btn-primary.active:hover,
.btn-group-toggle .btn.btn-primary:has(input:checked):hover {
  background-color: var(--ty-accent-2) !important;
  color: var(--ty-on-accent) !important;
}

/* 单选/复选跟随主题粉（覆盖系统蓝） */
.form-check-input {
  accent-color: var(--ty-accent) !important;
}
.form-check-input:checked {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
}


/* ===== TY-UPG-BEAUTY2 2026-10-11 再提权重：盖过 :root[data-theme=dark] .btn.btn-primary(0,4,0) 的粉底 =====
   未选中的选项胶囊要变描边，但上面那条深色 btn-primary 规则把背景色钉成粉(0,4,0)!important，
   我上一版 .btn-group-toggle .btn.btn-primary(0,3,0) 压不住 → 未选仍是粉底。
   这里用 :root[data-theme] + :not(.active):not(:has(checked)) 把权重拉到 (0,7,1)，稳赢。 */
:root[data-theme] .btn-group-toggle .btn.btn-primary:not(.active):not(:has(input:checked)) {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ty-accent) !important;
  color: var(--ty-accent) !important;
  box-shadow: none !important;
}
:root[data-theme] .btn-group-toggle .btn.btn-primary:not(.active):not(:has(input:checked)):hover {
  background-color: rgba(var(--ty-accent-rgb), .12) !important;
  color: var(--ty-accent) !important;
}


/* ===== TY-CART-BTN-UNIFY2 2026-10-11 购物车「立即选购」统一描边 =====
   放这里而非 ty.cart.theme.css：后者有个非 UTF-8 坏字节，追加的规则解析不进来。
   深色下我自己那条 :root[data-theme="dark"] .btn{background:var(--ty-surface-2)}(0,3,0)
   把描边按钮填成了暗底，第3个套餐又是实心粉渐变 → 一排深浅不一。
   用 .ty-plan-btn-wrap .btn.xxx(0,3,0)+!important 压过它，outline 与 highlight 统一成
   透明底+粉描边+粉字，hover 才实心粉。--ty-accent 令牌 → 深浅两套都自适应。 */
.ty-plan-btn-wrap .btn.ty-plan-btn-outline,
.ty-plan-btn-wrap .btn.ty-plan-btn-highlight {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--ty-accent) !important;
  color: var(--ty-accent) !important;
  box-shadow: none !important;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ty-plan-btn-wrap .btn.ty-plan-btn-outline:hover,
.ty-plan-btn-wrap .btn.ty-plan-btn-highlight:hover {
  background-color: var(--ty-accent) !important;
  background-image: none !important;
  border-color: var(--ty-accent) !important;
  color: var(--ty-on-accent) !important;
  box-shadow: 0 8px 18px rgba(var(--ty-accent-rgb), .28) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}


/* ===== TY-BILL-DOC 2026-10-12 账单详情：白纸打印风格恒定 =====
   #pdfCentent 是 PDF 导出用的白纸文档，任何主题下都保持"白纸+深字+浅表格"，
   不跟随深色主题（否则深色下：白纸配深表格、浅灰支付信息看不见）。
   用 .box#pdfCentent 前缀(ID权重)压过全局深色表格规则。 */
.box#pdfCentent {
  background: #fff !important;
  color: #27212b !important;
}
.box#pdfCentent,
.box#pdfCentent * {
  color: #27212b !important;
}
.box#pdfCentent table,
.box#pdfCentent table th,
.box#pdfCentent table td {
  background: transparent !important;
  border-color: #e5d8e1 !important;
}
.box#pdfCentent table thead th {
  background: #f7f0f3 !important;
}
.box#pdfCentent .text-success { color: #0a7d3f !important; }
.box#pdfCentent .text-danger { color: #bf2f26 !important; }
.box#pdfCentent .text-muted { color: #635b67 !important; }


/* ===== TY-BILL-DOC2 2026-10-12 账单白纸内的嵌套卡也强制白底 =====
   账单表格包在 .card > .card-body > .table-responsive 里，深色主题会把它们染深，
   白纸上出现深色块。全部强制白底（已确认 .box 内无玫瑰横幅，可整块强制）。 */
.box#pdfCentent .card,
.box#pdfCentent .card-body,
.box#pdfCentent .card-header,
.box#pdfCentent .table-responsive,
.box#pdfCentent .table-responsive table {
  background-color: #fff !important;
  background-image: none !important;
}


/* 账单表格的 TFOOT(总计行) 也有 .card-footer 深色底 → 一并转白 */
.box#pdfCentent tfoot,
.box#pdfCentent tfoot td,
.box#pdfCentent tfoot .card-footer,
.box#pdfCentent .card-footer {
  background-color: #fff !important;
  background-image: none !important;
}


/* 账单白纸内禁用深色行悬停（鼠标扫过亮出一大块深色），改浅色反馈 */
.box#pdfCentent table tr:hover,
.box#pdfCentent table tr:hover td,
.box#pdfCentent table tr:hover th,
.box#pdfCentent table tbody tr:hover,
.box#pdfCentent table tbody tr:hover td,
.box#pdfCentent table tbody tr:hover th {
  background-color: #f7f0f3 !important;
  background-image: none !important;
  color: #27212b !important;
}

/* ===== TY-BILL-DARK 2026-10-12 深色模式下账单纸改深色纸 =====
   用户反馈：深色里一片白太显眼。深色主题下账单跟随主题变深色纸
   （纸面 var(--ty-surface)=#252029 / 文字 #f5edf3，与 privacy 等文档页深色一致）；
   浅色模式仍走上面的白纸规则，不受影响。深色作用域 + :root 前缀压过上面无条件的白纸规则。 */
:root[data-theme=dark] .box#pdfCentent {
  background: var(--ty-surface, #252029) !important;
  background-image: none !important;
  color: var(--ty-text, #f5edf3) !important;
  border-color: var(--ty-border, #352c38) !important;
}
:root[data-theme=dark] .box#pdfCentent,
:root[data-theme=dark] .box#pdfCentent * {
  color: var(--ty-text, #f5edf3) !important;
}
:root[data-theme=dark] .box#pdfCentent table,
:root[data-theme=dark] .box#pdfCentent table th,
:root[data-theme=dark] .box#pdfCentent table td {
  background: transparent !important;
  border-color: var(--ty-border, #352c38) !important;
}
:root[data-theme=dark] .box#pdfCentent table thead th {
  background: var(--ty-surface-2, #2d2633) !important;
  color: var(--ty-text, #f5edf3) !important;
}
:root[data-theme=dark] .box#pdfCentent .card,
:root[data-theme=dark] .box#pdfCentent .card-body,
:root[data-theme=dark] .box#pdfCentent .card-header,
:root[data-theme=dark] .box#pdfCentent .table-responsive,
:root[data-theme=dark] .box#pdfCentent .table-responsive table,
:root[data-theme=dark] .box#pdfCentent tfoot,
:root[data-theme=dark] .box#pdfCentent tfoot td,
:root[data-theme=dark] .box#pdfCentent tfoot .card-footer,
:root[data-theme=dark] .box#pdfCentent .card-footer {
  background-color: transparent !important;
  background-image: none !important;
}
:root[data-theme=dark] .box#pdfCentent table tr:hover,
:root[data-theme=dark] .box#pdfCentent table tr:hover td,
:root[data-theme=dark] .box#pdfCentent table tr:hover th,
:root[data-theme=dark] .box#pdfCentent table tbody tr:hover,
:root[data-theme=dark] .box#pdfCentent table tbody tr:hover td,
:root[data-theme=dark] .box#pdfCentent table tbody tr:hover th {
  background-color: var(--ty-surface-2, #2d2633) !important;
  background-image: none !important;
  color: var(--ty-text, #f5edf3) !important;
}
:root[data-theme=dark] .box#pdfCentent .text-success { color: #5fd08a !important; }
:root[data-theme=dark] .box#pdfCentent .text-danger  { color: #ff8a80 !important; }
:root[data-theme=dark] .box#pdfCentent .text-muted,
:root[data-theme=dark] .box#pdfCentent .text-black-50 { color: var(--ty-text-2, #bcaeb9) !important; }
:root[data-theme=dark] .box#pdfCentent hr { border-color: var(--ty-border, #352c38) !important; }
/* 纸内按钮：浅色按钮转深色 chip，主色按钮文字保持白 */
:root[data-theme=dark] .box#pdfCentent .btn-light {
  background-color: var(--ty-surface-2, #2d2633) !important;
  border-color: var(--ty-border-2, #483a4c) !important;
  color: var(--ty-text, #f5edf3) !important;
}
:root[data-theme=dark] .box#pdfCentent .btn-primary { color: #fff !important; }


/* ===== TY-CHKBOX 2026-10-12 复选框（同意服务条款/隐私条款）双模式美化 =====
   Bootstrap 的 .custom-control-label::before 默认白底，深色下就是一个白方块。
   改走主题令牌：未选=表面色+描边，悬停=描边提亮，选中=主色填充+白色对勾，
   键盘聚焦=焦点环。只动颜色不动几何，避免与厂商排版打架。 */
.custom-control-label { color: var(--ty-text-2); cursor: pointer; }
.custom-control-label::before {
  background-color: var(--ty-surface-2) !important;
  border-color: var(--ty-border-2) !important;
  border-radius: .3rem !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.custom-control-label:hover::before { border-color: var(--ty-accent) !important; }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ty-accent) !important;
  border-color: var(--ty-accent) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--ty-ring, rgba(232,160,192,.30)) !important;
}
.custom-control-input:disabled ~ .custom-control-label { opacity: .55; }
.custom-control-label a { color: var(--ty-accent); }
.custom-control-label a:hover { text-decoration: underline; }