/* ============================================================================
 * NBGAMING 运营后台 · 主题皮肤  [DS-0824]
 * ============================================================================
 * 取代 pgame-theme-v15.css。两条硬规矩:
 *
 * 🔴 1. 本文件里**一个 #hex 都没有**。所有颜色一律 var(--nbg-*),
 *       值由 nbg-tokens.css 提供,而那个文件是从 src/admin_web/brand.ts 生成的。
 *       母版要复制 50+ 品牌 —— 颜色写死一处 = 50 个品牌一起错。
 *
 * 🔴 2. 明暗两套是**同一份规则**。旧皮只有暗色一套(实测整个 12MB 产物里
 *       prefers-color-scheme 命中 0 次),浅色环境全靠碰运气。
 *       现在深浅的差别**只在 token 值**,规则本身不分叉 ⇒ 不会出现
 *       "改了暗色忘了亮色"。
 *
 * 【为什么还留着这么多 !important】
 *   这个后台有 600+ 个页面组件,大量写死的 inline style(color:#000 / 背景白)。
 *   不用 !important 就压不住它们。但和旧皮不同的是:旧皮 !important 指向的是
 *   **写死的深色值**,所以在浅色环境下就成了"深字压深底";现在指向的是
 *   **随明暗变的 token**,两套都对。global-theme.scss 那条 `th{color:...!important}`
 *   把全后台表头写成深色字压深色底的事故,在这套结构下不可能再发生。
 *
 * 【旧皮里必须保住的修复,已逐条继承,别删】
 *   v14  侧栏 hover 灰块(dashboard.css 的 lightgray)
 *   v15  分组展开时整组染蓝、子项全高亮
 *   0823 弹窗半透明(.modal-content 用半透明面色 + 遮罩写成 BS3 的 .in)
 *        —— 这里用 --nbg-overlay,它在 token 层面就是**不透明**的,
 *           从构造上杜绝,而不是再打一个补丁。
 * ========================================================================== */

/* ---------------------------------------------------------------- 基础 ---- */
html, body { height: 100%; }

body {
  background: var(--nbg-canvas) !important;
  color: var(--nbg-ink) !important;
  font-family: var(--nbg-font-ui) !important;
  font-size: var(--nbg-fs2) !important;
  line-height: var(--nbg-lh-base) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 数字一律等宽对齐 —— 后台全是金额/数量,不对齐就读不了。
   [FONT-0826] 这条规则的作用域**故意**不包含 h1-h6:标题走展示衬线体 Playfair,
   而 Playfair 实测没有 tnum、数字宽度从 374 到 615 不等(详见 brand.ts 的 FONT_FACES)。
   金额/流水永远待在 --nbg-font-ui 这一侧,那套字体是有 tnum 的。 */
td, th, input, .nbg-num, .table td, .table th,
.nbg-money, .nbg-amount, output {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-family: var(--nbg-font-ui);
}

/* [FONT-0826] 标题 = 自托管展示衬线体。字体文件在 res/public/fonts/,
   @font-face 由 brand.ts 的 FONT_FACES 生成进 nbg-tokens.css —— 没有任何外链 CDN。 */
h1, h2, h3, h4, h5, h6, .nbg-display {
  color: var(--nbg-ink) !important;
  font-family: var(--nbg-font-display) !important;
  font-weight: var(--nbg-fw-med) !important;
  letter-spacing: 0;
  line-height: var(--nbg-lh-tight);
}
/* 标题里如果嵌了数字徽标/计数,把它拉回 UI 字体,避免衬线体的不等宽数字 */
h1 .nbg-num, h2 .nbg-num, h3 .nbg-num, h4 .nbg-num,
h1 .badge, h2 .badge, h3 .badge, h4 .badge {
  font-family: var(--nbg-font-ui) !important;
  font-variant-numeric: tabular-nums;
}
h1 { font-size: var(--nbg-fs7) !important; }
h2 { font-size: var(--nbg-fs6) !important; margin: 0 0 var(--nbg-s5) !important; }
h3 { font-size: var(--nbg-fs5) !important; }
h4 { font-size: var(--nbg-fs4) !important; }
h5, h6 { font-size: var(--nbg-fs3) !important; }

a { color: var(--nbg-accent-ink); text-decoration: none; }
a:hover { color: var(--nbg-accent-hover); text-decoration: none; }
/* 按钮不算链接,别被上面的链接色染了 */
a:not(.btn):not([class*="btn"]) { color: var(--nbg-accent-ink) !important; }

.text-muted, small { color: var(--nbg-ink2) !important; }
hr { border-top: 1px solid var(--nbg-line) !important; margin: var(--nbg-s5) 0 !important; }
p, span, div, td, th, li, label, strong, b { color: inherit; }

code, pre {
  font-family: var(--nbg-font-mono) !important;
  background: var(--nbg-surface-alt) !important;
  color: var(--nbg-ink) !important;
  border: 1px solid var(--nbg-line) !important;
  border-radius: var(--nbg-r-sm);
}

.container, .container-fluid {
  padding-left: var(--nbg-s6) !important;
  padding-right: var(--nbg-s6) !important;
}

::selection { background: var(--nbg-accent-soft); color: var(--nbg-ink); }

/* ---------------------------------------------------------------- 侧栏 ---- */
/* 侧栏自成一面(--nbg-nav-bg),和内容区 canvas 分开 —— 这是"一眼看上去有层级"
   最省力的一招,比加阴影可靠得多。 */
body, .sidebar, .menu-content, .list-unstyled, .nav { background-color: transparent; }

.nav-side-menu {
  background: var(--nbg-nav-bg) !important;
  border-right: 1px solid var(--nbg-line) !important;
  border-left: none !important;   /* 旧皮那条 3px 竖线属于装饰,去掉 */
}

.sidebar-group-item-title, .sidebar-page-item-title {
  color: var(--nbg-nav-ink) !important;
  font-size: var(--nbg-fs2) !important;
}

.nav > li > a,
.list-unstyled > li > a,
a.list-group-item {
  color: var(--nbg-nav-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--nbg-r-sm);
  margin: 1px var(--nbg-s2);
  padding: 7px 10px !important;
  font-size: var(--nbg-fs2);
  transition: background .12s ease, color .12s ease;
}

.nav > li > a:hover,
.list-unstyled > li > a:hover {
  background: var(--nbg-nav-hover) !important;
  color: var(--nbg-ink) !important;
}

/* v14 继承:根治侧栏 hover 灰块(dashboard.css 里的 lightgray 才是真凶) */
.nav-side-menu .sidebar-page-item:hover,
.nav-side-menu .sidebar-group-item:hover,
.nav-side-menu .sidebar-item:hover,
.nav-side-menu .sidebar-page-item-elem:hover,
.nav-side-menu .sidebar-group-item-elem:hover,
.nav-side-menu li:hover,
.nav-side-menu li > a:hover {
  background-color: var(--nbg-nav-hover) !important;
  color: var(--nbg-ink) !important;
}
.nav-side-menu .sidebar-page-item:hover *,
.nav-side-menu .sidebar-group-item:hover *,
.nav-side-menu li:hover * { color: var(--nbg-ink) !important; }

/* 焦点残留灰块(Bootstrap a:focus = #eee) */
.nav-side-menu a:focus, .nav-side-menu a:active,
.nav-side-menu .sidebar-item-elem:focus, .nav-side-menu .sidebar-page-item:focus,
.nav > li > a:focus, .list-unstyled > li > a:focus,
.nav-side-menu li:focus, .nav-side-menu li:active {
  background-color: var(--nbg-nav-hover) !important;
  color: var(--nbg-ink) !important;
  outline: none !important;
}

.nav-side-menu .sidebar-item a,
.nav-side-menu .sidebar-group-item-name,
.nav-side-menu .sidebar-page-item-name,
.nav-side-menu .sidebar-group-item-title,
.nav-side-menu .sidebar-page-item-title { color: var(--nbg-nav-ink) !important; }
.nav-side-menu .sidebar-group-item-list { background-color: transparent !important; }

/* v15 继承:分组容器展开时**不能**染成实色,否则整组子项都成了高亮 */
.nav-side-menu li.sidebar-group-item.active,
.nav-side-menu li.sidebar-item.active,
.nav-side-menu .sidebar-group-item.active {
  background-color: transparent !important;
  color: inherit !important;
}

/* 只有"当前所在的页面项"才是实色高亮 */
.nav-side-menu .sidebar-page-item.active,
.nav-side-menu .sidebar-page-item > a.active,
.nav-side-menu a.active,
.nav-side-menu li.active > a,
.nav > li.active > a,
.nav > li > a.active {
  background-color: var(--nbg-nav-active) !important;
  color: var(--nbg-nav-active-ink) !important;
  border-radius: var(--nbg-r-sm);
}
.nav-side-menu a.active *,
.nav-side-menu .sidebar-page-item.active * { color: var(--nbg-nav-active-ink) !important; }

/* ------------------------------------------------------- 卡片 / 面板 ---- */
/* 靠 1px 发丝线分层,不靠大阴影 —— 阴影堆多了就是"模板感" */
.panel, .card, .well, .box {
  background: var(--nbg-surface) !important;
  border: 1px solid var(--nbg-line) !important;
  border-radius: var(--nbg-r-md) !important;
  box-shadow: none !important;
  color: var(--nbg-ink) !important;
}
.well { padding: var(--nbg-s5) !important; }
.panel-heading, .card-header {
  background: var(--nbg-surface-alt) !important;
  border-bottom: 1px solid var(--nbg-line) !important;
  font-weight: var(--nbg-fw-semi) !important;
  color: var(--nbg-ink) !important;
  padding: var(--nbg-s3) var(--nbg-s5) !important;
  font-size: var(--nbg-fs3) !important;
  border-radius: var(--nbg-r-md) var(--nbg-r-md) 0 0 !important;
}
.panel-body, .card-body { padding: var(--nbg-s5) !important; }
.panel-default, .panel-primary, .panel-info { border-color: var(--nbg-line) !important; }

/* ---------------------------------------------------------------- 表格 ---- */
.table {
  background: var(--nbg-surface) !important;
  border: 1px solid var(--nbg-line) !important;
  border-radius: var(--nbg-r-md) !important;
  box-shadow: none !important;
  overflow: hidden;
  margin-bottom: var(--nbg-s5) !important;
  color: var(--nbg-ink) !important;
}
.table > thead > tr > th {
  background: var(--nbg-surface-alt) !important;
  color: var(--nbg-ink2) !important;
  font-weight: var(--nbg-fw-semi) !important;
  font-size: var(--nbg-fs0) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--nbg-line) !important;
  border-top: none !important;
  padding: var(--nbg-s2) var(--nbg-s3) !important;
  white-space: nowrap;
  vertical-align: middle;
}
.table > tbody > tr > td {
  padding: var(--nbg-s2) var(--nbg-s3) !important;
  border-top: 1px solid var(--nbg-line) !important;
  color: var(--nbg-ink) !important;
  vertical-align: middle;
  font-size: var(--nbg-fs2);
  height: var(--nbg-row-h);
}
.table > tbody > tr { transition: background .1s ease; }
.table > tbody > tr:hover { background: var(--nbg-surface-hover) !important; }
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th { border-color: var(--nbg-line) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--nbg-surface-alt) !important; }

/* ---------------------------------------------------------------- 按钮 ---- */
/* 极简:小圆角、无渐变、无阴影。甲方"所有功能按钮尽量极简"。 */
.btn {
  border-radius: var(--nbg-r-sm) !important;
  font-weight: var(--nbg-fw-med) !important;
  padding: 0 var(--nbg-s3) !important;
  height: var(--nbg-ctl-h);
  line-height: calc(var(--nbg-ctl-h) - 2px);
  border: 1px solid transparent !important;
  font-size: var(--nbg-fs2) !important;
  transition: background .12s ease, border-color .12s ease;
  box-shadow: none !important;
}
.btn:focus-visible { outline: 2px solid var(--nbg-accent); outline-offset: 1px; }

.btn-primary, .btn-info {
  background: var(--nbg-accent) !important;
  border-color: var(--nbg-accent) !important;
  color: var(--nbg-ink-on) !important;
}
.btn-primary:hover, .btn-info:hover {
  background: var(--nbg-accent-hover) !important;
  border-color: var(--nbg-accent-hover) !important;
}
.btn-success { background: var(--nbg-good) !important; border-color: var(--nbg-good) !important; color: var(--nbg-ink-on) !important; }
.btn-warning { background: var(--nbg-warn) !important; border-color: var(--nbg-warn) !important; color: var(--nbg-ink-on) !important; }
.btn-danger  { background: var(--nbg-crit) !important; border-color: var(--nbg-crit) !important; color: var(--nbg-ink-on) !important; }
.btn-default, .btn-secondary {
  background: var(--nbg-surface) !important;
  border-color: var(--nbg-line-strong) !important;
  color: var(--nbg-ink) !important;
}
.btn-default:hover, .btn-secondary:hover { background: var(--nbg-surface-hover) !important; }
.btn-link { background: transparent !important; color: var(--nbg-accent-ink) !important; border-color: transparent !important; }
.btn-xs, .btn-sm { height: var(--nbg-ctl-h-sm); line-height: calc(var(--nbg-ctl-h-sm) - 2px); padding: 0 var(--nbg-s2) !important; font-size: var(--nbg-fs1) !important; }
.btn.active, .btn-group .btn.active { background: var(--nbg-accent) !important; color: var(--nbg-ink-on) !important; }

/* 描边按钮 */
.btn-outline-primary, .btn-outline-info { color: var(--nbg-accent-ink) !important; border-color: var(--nbg-accent) !important; background: transparent !important; }
.btn-outline-secondary, .btn-outline-default { color: var(--nbg-ink) !important; border-color: var(--nbg-line-strong) !important; background: transparent !important; }
.btn-outline-danger  { color: var(--nbg-crit-ink) !important; border-color: var(--nbg-crit) !important; background: transparent !important; }
.btn-outline-success { color: var(--nbg-good-ink) !important; border-color: var(--nbg-good) !important; background: transparent !important; }
.btn-outline-warning { color: var(--nbg-warn-ink) !important; border-color: var(--nbg-warn) !important; background: transparent !important; }
.btn-outline-primary:hover  { background: var(--nbg-accent-soft) !important; }
.btn-outline-secondary:hover { background: var(--nbg-surface-hover) !important; }
.btn-outline-danger:hover   { background: var(--nbg-crit-soft) !important; }
.btn-outline-success:hover  { background: var(--nbg-good-soft) !important; }
.btn-outline-warning:hover  { background: var(--nbg-warn-soft) !important; }
.btn-light, .btn-outline-light { background: var(--nbg-surface) !important; color: var(--nbg-ink) !important; border-color: var(--nbg-line-strong) !important; }
.btn-light:hover, .btn-outline-light:hover { background: var(--nbg-surface-hover) !important; }

/* 裸 button(不带 .btn):消灭浏览器默认浅灰底 */
button { color: var(--nbg-ink); font-family: inherit; }
button:not(.btn) {
  background-color: var(--nbg-surface) !important;
  color: var(--nbg-ink) !important;
  border: 1px solid var(--nbg-line-strong) !important;
  border-radius: var(--nbg-r-sm);
}
button:not(.btn):hover { background-color: var(--nbg-surface-hover) !important; }

/* ---------------------------------------------------------- 表单 / 下拉 ---- */
.form-control,
input[type=text], input[type=number], input[type=password],
input[type=email], input[type=search], input[type=date], input[type=datetime-local],
select, textarea {
  background: var(--nbg-surface) !important;
  border: 1px solid var(--nbg-line-strong) !important;
  border-radius: var(--nbg-r-sm) !important;
  color: var(--nbg-ink) !important;
  box-shadow: none !important;
  padding: 0 var(--nbg-s3) !important;
  height: var(--nbg-ctl-h) !important;
  font-size: var(--nbg-fs2) !important;
}
textarea, textarea.form-control { height: auto !important; padding: var(--nbg-s2) var(--nbg-s3) !important; line-height: var(--nbg-lh-base); }

.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--nbg-accent) !important;
  box-shadow: 0 0 0 3px var(--nbg-focus-ring) !important;
  outline: none;
}
label, .control-label {
  color: var(--nbg-ink2) !important;
  font-weight: var(--nbg-fw-med) !important;
  font-size: var(--nbg-fs1);
  margin-bottom: var(--nbg-s1);
}
::placeholder { color: var(--nbg-ink3) !important; }
select option { background: var(--nbg-overlay); color: var(--nbg-ink); }
.input-group-addon {
  background: var(--nbg-surface-alt) !important;
  border-color: var(--nbg-line-strong) !important;
  color: var(--nbg-ink2) !important;
}
input[type=checkbox], input[type=radio] { accent-color: var(--nbg-accent); width: 15px; height: 15px; }

/* 兜底:所有没 class 的裸 input(内联白底黑字压不住时) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
textarea, select, .form-control {
  background-color: var(--nbg-surface) !important;
  color: var(--nbg-ink) !important;
  border: 1px solid var(--nbg-line-strong) !important;
}

/* react-select(emotion 随机类名,只能靠属性选择器命中) */
.Select-control, .select__control, [class*="-control"] {
  background-color: var(--nbg-surface) !important;
  border-color: var(--nbg-line-strong) !important;
  border-radius: var(--nbg-r-sm) !important;
  color: var(--nbg-ink) !important;
}
.Select-menu-outer, .select__menu, [class*="-menu"] {
  background-color: var(--nbg-overlay) !important;
  border: 1px solid var(--nbg-line) !important;
  border-radius: var(--nbg-r-sm) !important;
  box-shadow: var(--nbg-shadow2) !important;
  color: var(--nbg-ink) !important;
}
.Select-value-label, .select__single-value, [class*="singleValue"] { color: var(--nbg-ink) !important; }
[class*="-option"] { background-color: transparent !important; color: var(--nbg-ink) !important; }
[class*="-option"]:hover, [class*="-option"][class*="focused"] { background-color: var(--nbg-accent-soft) !important; }
[class*="-placeholder"] { color: var(--nbg-ink3) !important; }
[class*="-multiValue"] { background-color: var(--nbg-accent-soft) !important; }
[class*="-multiValue"] [class*="label"], [class*="-input"] { color: var(--nbg-ink) !important; }
[class*="-control"] [class*="css-"], [class*="-control"] > div > div { color: var(--nbg-ink) !important; }
[class*="-control"] svg { fill: var(--nbg-ink3) !important; }

/* Bootstrap list-group */
.list-group, .list-group-item, ul.list-group > li {
  background-color: var(--nbg-surface) !important;
  color: var(--nbg-ink) !important;
  border-color: var(--nbg-line) !important;
}
.list-group-item strong, .list-group-item b, .list-group-item span,
.list-group-item label, .list-group-item td, .list-group-item th,
.list-group-item div { color: var(--nbg-ink) !important; }

/* -------------------------------------------------------------- 标签页 ---- */
.nav-tabs { border-bottom: 1px solid var(--nbg-line) !important; }
.nav-tabs > li > a {
  border: none !important;
  color: var(--nbg-ink2) !important;
  font-weight: var(--nbg-fw-med);
  border-radius: 0 !important;
  padding: var(--nbg-s2) var(--nbg-s4) !important;
  margin-bottom: -1px;
  background: transparent !important;
  font-size: var(--nbg-fs2);
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
  color: var(--nbg-ink) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--nbg-accent) !important;
}
.nav-pills > li.active > a { background: var(--nbg-accent) !important; color: var(--nbg-ink-on) !important; border-radius: var(--nbg-r-sm) !important; }

/* ---------------------------------------------------------------- 徽章 ---- */
/* 语义色统一走 soft 底 + ink 字,深浅两套都保证对比度 */
.label, .badge {
  border-radius: var(--nbg-r-xs) !important;
  font-weight: var(--nbg-fw-med) !important;
  padding: 2px var(--nbg-s2) !important;
  font-size: var(--nbg-fs0);
  letter-spacing: .02em;
}
.label-success, .badge-success { background: var(--nbg-good-soft) !important; color: var(--nbg-good-ink) !important; }
.label-warning, .badge-warning { background: var(--nbg-warn-soft) !important; color: var(--nbg-warn-ink) !important; }
.label-danger,  .badge-danger  { background: var(--nbg-crit-soft) !important; color: var(--nbg-crit-ink) !important; }
.label-info, .label-primary, .badge-info { background: var(--nbg-accent-soft) !important; color: var(--nbg-accent-ink) !important; }
.label-default, .badge-default { background: var(--nbg-surface-alt) !important; color: var(--nbg-ink2) !important; }

/* -------------------------------------------------------------- 提示框 ---- */
.alert {
  border-radius: var(--nbg-r-sm) !important;
  border: 1px solid transparent !important;
  padding: var(--nbg-s3) var(--nbg-s4) !important;
  font-size: var(--nbg-fs2);
}
.alert-danger  { background: var(--nbg-crit-soft) !important; color: var(--nbg-crit-ink) !important; border-color: var(--nbg-crit) !important; }
.alert-info    { background: var(--nbg-accent-soft) !important; color: var(--nbg-accent-ink) !important; border-color: var(--nbg-accent) !important; }
.alert-success { background: var(--nbg-good-soft) !important; color: var(--nbg-good-ink) !important; border-color: var(--nbg-good) !important; }
.alert-warning { background: var(--nbg-warn-soft) !important; color: var(--nbg-warn-ink) !important; border-color: var(--nbg-warn) !important; }

/* ---------------------------------------------------------------- 弹窗 ---- */
/* 🔴 --nbg-overlay 在 token 层就是不透明的。旧皮那个"每个弹窗都半透明、
      底下输入框透出来"的缺陷,在这里是结构上不可能发生,不是又打了一个补丁。 */
.modal-content {
  background: var(--nbg-overlay) !important;
  border: 1px solid var(--nbg-line) !important;
  border-radius: var(--nbg-r-md) !important;
  box-shadow: var(--nbg-shadow2) !important;
  color: var(--nbg-ink) !important;
}
.modal-header, .modal-footer { border-color: var(--nbg-line) !important; }
.modal-title { color: var(--nbg-ink) !important; font-weight: var(--nbg-fw-semi) !important; }
/* BS3 用 .in,BS4/react-bootstrap 用 .show —— 两个都写上,别再漏 */
.modal-backdrop.in, .modal-backdrop.show { opacity: .55 !important; }
.close { color: var(--nbg-ink) !important; opacity: .55; text-shadow: none; }
.close:hover { opacity: 1; }
.popover, .dropdown-menu, .tooltip-inner {
  background: var(--nbg-overlay) !important;
  border: 1px solid var(--nbg-line) !important;
  color: var(--nbg-ink) !important;
  box-shadow: var(--nbg-shadow2) !important;
  border-radius: var(--nbg-r-sm) !important;
}
.dropdown-menu > li > a { color: var(--nbg-ink) !important; }
.dropdown-menu > li > a:hover { background: var(--nbg-surface-hover) !important; }

/* ---------------------------------------------------------------- 分页 ---- */
.pagination > li > a, .pagination > li > span {
  background: var(--nbg-surface) !important;
  color: var(--nbg-ink) !important;
  border-color: var(--nbg-line) !important;
}
.pagination > li.active > a, .pagination > li.active > span {
  background: var(--nbg-accent) !important;
  border-color: var(--nbg-accent) !important;
  color: var(--nbg-ink-on) !important;
}

/* -------------------------------------------------------------- 滚动条 ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nbg-scroll-thumb); border-radius: var(--nbg-r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--nbg-scroll-thumb-hover); }

/* ------------------------------------------ 内联写死颜色的兜底(明暗通用) ---- */
/* 组件里有大量 style="color:#000" / style="background:#fff" 这类**浅色主题遗留**。
   旧皮把它们强制成写死的浅字 ⇒ 浅色环境下就白底白字。
   这里映射到 token:
     深色下 --nbg-ink 是近白、--nbg-surface 是深面 ⇒ 正确;
     浅色下 --nbg-ink 是近黑、--nbg-surface 就是纯白 ⇒ 也正确(等于没改)。
   同一条规则两套都成立,不需要按明暗分叉。 */
[style*="color: rgb(0, 0, 0)"], [style*="color:#000"], [style*="color: #000"],
[style*="color:#333"], [style*="color: #333"], [style*="color:black"],
[style*="#000000"] {
  color: var(--nbg-ink) !important;
}
[style*="background-color: rgb(255, 255, 255)"],
[style*="background:#fff"], [style*="background: #fff"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background:white"], [style*="background: white"],
[style*="#FFFFFF"], [style*="#F2F2F2"] {
  background-color: var(--nbg-surface) !important;
}

/* ------------------------------------------------- Hint 短提示 + 悬浮详情 ---- */
/* 组件见 components/common/Hint.tsx。这里不写 !important —— 它不需要和任何东西抢。 */
.ui-hint {
  margin: 0 0 var(--nbg-s3);
  font-size: var(--nbg-fs2);
  line-height: var(--nbg-lh-base);
  color: var(--nbg-ink2);
}
.ui-hint-warn .ui-hint-text { color: var(--nbg-warn-ink); font-weight: var(--nbg-fw-semi); }
.ui-hint-more {
  position: relative;
  display: inline-block;
  margin-left: var(--nbg-s2);
  color: var(--nbg-accent-ink);
  border-bottom: 1px dashed currentColor;
  cursor: help;
  outline: none;
}
.ui-hint-pop {
  display: none;
  position: absolute;
  left: 0;
  top: 150%;
  z-index: 2000;
  width: 460px;
  max-width: 72vw;
  padding: var(--nbg-s3) var(--nbg-s4);
  border-radius: var(--nbg-r-sm);
  background: var(--nbg-overlay);
  color: var(--nbg-ink);
  border: 1px solid var(--nbg-line);
  box-shadow: var(--nbg-shadow2);
  font-size: var(--nbg-fs2);
  font-weight: var(--nbg-fw-normal);
  line-height: var(--nbg-lh-base);
  text-align: left;
  white-space: normal;
  cursor: auto;
}
.ui-hint-more:hover .ui-hint-pop,
.ui-hint-more:focus .ui-hint-pop,
.ui-hint-more:focus-within .ui-hint-pop { display: block; }

/* --------------------------------------------------------- 语义状态工具类 ---- */
/* 页面里表达"好/警告/严重"一律用这三个类,不要再各自挑颜色。 */
.nbg-good { color: var(--nbg-good-ink) !important; }
.nbg-warn { color: var(--nbg-warn-ink) !important; }
.nbg-crit { color: var(--nbg-crit-ink) !important; }
.nbg-mute { color: var(--nbg-ink3) !important; }
.nbg-mono { font-family: var(--nbg-font-mono) !important; }

/* 打印:后台经常要打台账。
   这里用 white/black 关键字而不是 token —— 纸是纸,不是品牌的一个"面":
   任何品牌打出来都得是白纸黑字,跟着 --nbg-canvas 走会印一整页深色。
   (也仍然满足"本文件不出现 #hex"。) */
@media print {
  body { background: white !important; color: black !important; }
  .nav-side-menu, .sidebar { display: none !important; }
}

/* ===========================================================================
 * [SKIN-0829] A 批:皮肤层重做。**追加**在文件末尾,上面 554 行一个字没改。
 * ---------------------------------------------------------------------------
 * 回滚:删掉本注释以下全部内容即可,或整文件换回 .bak_skin_0829。
 *
 * 为什么这一段大量用 !important:
 *   实测(2026-08-29,真后台)大包 style-loader 把 85 个 <style> 注入在
 *   <head> 末尾,而本文件是第 12 个子节点 ⇒ **本文件排在它们之前,普通规则压不过**。
 *   对照实验:`table td{padding-top:44px}` 无效(仍 8px);同一条加 !important 生效(33px)。
 *   所以这不是偷懒,是层叠顺序决定的唯一可行手段。
 *
 * 判据(每一条都在公网真后台验过,不是"我改了文件"):
 *   截图 4 组 = 深/浅 × 中/英。
 * ========================================================================== */

/* --------------------------------------------------- 1. 展示衬线体收口 ---- */
/* 甲方 0829 批准:Playfair 衬线只留登录页,内页一律 UI 字体。
   理由:它是"一个后台三套设计语言"的成因之一;密集数据表里衬线只增加噪音。
   实现:用 :has() 判断当前是不是登录页(登录页有 #nbg-login-user)。
   🔴 万一浏览器不支持 :has(),整条选择器失效 ⇒ 回落到"到处都是衬线"(即现状),
      不会变成更糟的状态。这是刻意选的降级方向。 */
body:not(:has(#nbg-login-user)) h1,
body:not(:has(#nbg-login-user)) h2,
body:not(:has(#nbg-login-user)) h3,
body:not(:has(#nbg-login-user)) h4,
body:not(:has(#nbg-login-user)) h5,
body:not(:has(#nbg-login-user)) h6 {
  font-family: var(--nbg-font-ui) !important;
  font-weight: var(--nbg-fw-bold) !important;
  letter-spacing: -.01em;
}

/* --------------------------------------------------- 2. 表格:裸 table ---- */
/* 实测:新 React 页(rm_players / ggx_games / agent_children)的 <table>
   **一个 class 都没有** ⇒ 上面那批 `.table` 规则对它们完全不生效,
   这正是它们没有斑马纹、没有固定表头的原因。这里按裸标签补齐。
   旧页(setting / permission_matrix / withdraw_config)带 .table,
   `.table` 选择器特指度更高,所以下面动密度的几条要 !important 才能统一两边。 */
table { border-collapse: collapse; }

/* 固定表头。172 行(setting)/ 101 行(ggx_games)/ 92 行(permission_matrix)
   滚下去就不知道在看哪一列 —— 这是实测行数,不是估计。
   🔴 sticky 必须有不透明底色,否则表体会从表头底下透出来。 */
table > thead > tr > th {
  position: sticky !important;
  top: 0;
  z-index: 2;
  background: var(--nbg-surface-alt) !important;
  border-bottom: 1px solid var(--nbg-line-strong) !important;
  color: var(--nbg-ink3) !important;
  font-family: var(--nbg-font-ui) !important;
  font-size: var(--nbg-fs0) !important;
  font-weight: var(--nbg-fw-med) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: var(--nbg-s2) var(--nbg-s3) !important;
}

/* 行高统一到"标准档" 36px(--nbg-row-h)。
   实测现状是 37/39/43/54/58/98px 六种,最高与最低差 2.6 倍。 */
table > tbody > tr > td {
  padding: var(--nbg-s2) var(--nbg-s3) !important;
  border-bottom: 1px solid var(--nbg-line) !important;
  line-height: var(--nbg-lh-base);
  vertical-align: middle;
}

/* 斑马纹。实测 6 张表全部没有(对照组已验证探针有效:
   种一张确实有斑马纹的表,探针报 true,才承认真实表格的 false)。 */
table > tbody > tr:nth-child(even) > td { background: var(--nbg-surface-alt); }
table > tbody > tr:hover > td { background: var(--nbg-surface-hover) !important; }

/* --------------------------------------------------- 3. 金额排版 ---- */
/* 🔴 说明清楚这条的边界:CSS **无法**知道哪一列是金额(选择器不能匹配文本内容)。
   所以"金额右对齐 + 等宽"这件事在纯 CSS 层只能**备好类**,
   真正生效需要组件加上 class ⇒ 那是 D 批(要重建大包)。
   实测线上 .nbg-money/.nbg-amount 当前使用者 = 0。
   合规要求(MGA / GLI-19 / UKGC):金额固定 2 位小数、货币单位常驻可见、
   虚拟币必须同时标真实币值 —— 那几条是组件层的事,这里只管排版。 */
.nbg-money, .nbg-amount, .nbg-num, td.nbg-num, th.nbg-num {
  font-family: var(--nbg-font-mono) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  text-align: right !important;
  white-space: nowrap;
}
.nbg-credit { color: var(--nbg-good-ink) !important; }   /* 钱进来 */
.nbg-debit  { color: var(--nbg-crit-ink) !important; }   /* 钱出去 */

/* --------------------------------------------------- 4. 危险区域 ---- */
/* 甲方硬要求:动钱的按钮不许和安全操作并排。
   这几个类给 D 批的组件用;A 批先把样式备好,保证 D 批落地时不用再改 CSS。 */
.nbg-danger-zone {
  border: 1px solid var(--nbg-crit) !important;
  background: var(--nbg-crit-soft) !important;
  border-radius: var(--nbg-r-sm);
  padding: var(--nbg-s3);
}
.nbg-danger-zone > * + * { margin-top: var(--nbg-s2); }
/* 危险按钮独占一行 —— 结构上堵死"并排"。 */
.nbg-danger-zone .btn, .nbg-danger-zone button { display: block !important; width: auto; }
.btn-danger, .nbg-btn-danger {
  background: var(--nbg-crit-solid) !important;
  border-color: var(--nbg-crit-solid) !important;
  color: var(--nbg-ink-on) !important;
}
.btn-primary, .btn-info, .nbg-btn-primary {
  background: var(--nbg-accent-solid) !important;
  border-color: var(--nbg-accent-solid) !important;
  color: var(--nbg-ink-on) !important;
}
.btn-primary:hover, .btn-info:hover { background: var(--nbg-accent-solid-hover) !important; }
.btn-success { background: var(--nbg-good-solid) !important; border-color: var(--nbg-good-solid) !important; color: var(--nbg-ink-on) !important; }
.btn-warning { background: var(--nbg-warn-solid) !important; border-color: var(--nbg-warn-solid) !important; color: var(--nbg-ink-on) !important; }

/* --------------------------------------------------- 5. 状态徽章 ---- */
/* WCAG SC 1.4.1:颜色不能是传达信息的唯一手段。
   所以徽章一律 = 文字 + 1px 描边(形状)+ 颜色,三样同时在场,绝不做成纯色圆点。 */
.nbg-badge {
  display: inline-flex; align-items: center; gap: var(--nbg-s1);
  padding: 1px var(--nbg-s2); border-radius: var(--nbg-r-xs);
  font-size: var(--nbg-fs0); font-weight: var(--nbg-fw-med); line-height: 1.7;
  white-space: nowrap; border: 1px solid currentColor;
}
.nbg-badge-good { color: var(--nbg-good-ink) !important; background: var(--nbg-good-soft) !important; }
.nbg-badge-warn { color: var(--nbg-warn-ink) !important; background: var(--nbg-warn-soft) !important; }
.nbg-badge-crit { color: var(--nbg-crit-ink) !important; background: var(--nbg-crit-soft) !important; }
.nbg-badge-info { color: var(--nbg-accent-ink) !important; background: var(--nbg-accent-soft) !important; }
.nbg-badge-mute { color: var(--nbg-ink3) !important; background: var(--nbg-surface-alt) !important; }

/* --------------------------------------------------- 6. 焦点可见 ---- */
/* 运营要能纯键盘操作台账。焦点环用 accent,实测对 surface 有 4.88:1(深)/6.51:1(浅),
   过 SC 1.4.11 的 3:1。 */
:focus-visible {
  outline: 2px solid var(--nbg-accent) !important;
  outline-offset: 2px;
}

/* --------------------------------------------------- 7. 侧栏溢出 ---- */
/* 实测缺陷:侧栏里的跑马灯 span 宽 365px、父容器 730px,而侧栏只有 170px,
   于是它被画到 x=-105(左边被切掉)。这里把溢出关在侧栏内,不再糊到内容区。 */
.nav-side-menu, .sidebar { overflow-x: hidden !important; }

/* --------------------------------------------------- 8. 凹陷面 ---- */
/* 新增的 --nbg-sunken:表格外的槽 / 空状态 / 代码块。比 canvas 更深一层,
   让"数据面"和"页面底"在深色下也分得开(深色主题最容易糊成一片)。 */
.nbg-sunken { background: var(--nbg-sunken) !important; }
pre, code { background: var(--nbg-sunken) !important; }

/* --------------------------------------------- 9. 修正:跑马灯溢出屏幕 ---- */
/* 实测祖先链(child -> ancestor):
 *   span(w=365) < div(w=730 跑马灯轨道=文本×2) < .current-time(overflow:hidden 的裁剪窗)
 *   < div < .brand(w=168, flex) < .nav-side-menu(w=170, fixed)
 * 根因:.current-time 这个裁剪窗本身被定位到 x=-9,左边 9px 掉出屏幕;
 *      而 .brand 是 flex 且 overflow:visible,其子元素被 730px 的轨道撑破,不受 168px 约束。
 *
 * 🔴 我第一版写的是 `.current-time{width:auto}`,**那是错的,当场把它从 188px 撑到 732px**,
 *    比原来更糟。教训:这个元素的 overflow:hidden 是有用的裁剪窗,不能把它的宽度放开,
 *    要做的是**把它连同父级一起约束回侧栏宽度**。留着这段注释,别再犯。
 */
.nav-side-menu .brand { overflow: hidden !important; }
.nav-side-menu .brand > * { min-width: 0 !important; max-width: 100% !important; }
.nav-side-menu .current-time {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* -------------------------------- 10. 修正:行高统一要压过 .table 特指度 ---- */
/* 实测:`.table > tbody > tr > td` 特指度 (0,1,3) 压过裸 `table > tbody > tr > td` (0,0,4),
   所以第 2 段的密度规则对旧页(setting / permission_matrix / withdraw_config)不生效
   —— 改前 37 / 54px,改后仍是 37 / 54px。这里补一条同特指度的。
   🔴 只压 padding,不压 height/max-height:ggx_games 行里有游戏封面图,
      压高度会把图切掉。少留白是安全的,强制行高不是。 */
.table > tbody > tr > td,
table.table > tbody > tr > td {
  padding: var(--nbg-s2) var(--nbg-s3) !important;
  line-height: var(--nbg-lh-base) !important;
  vertical-align: middle !important;
}
.table > thead > tr > th,
table.table > thead > tr > th {
  position: sticky !important;
  top: 0;
  z-index: 2;
  background: var(--nbg-surface-alt) !important;
  border-bottom: 1px solid var(--nbg-line-strong) !important;
  padding: var(--nbg-s2) var(--nbg-s3) !important;
}
.table > tbody > tr:nth-child(even) > td { background: var(--nbg-surface-alt) !important; }