:root {
  --theme-primary: var(--shell-accent, var(--public-shell-primary, #4a7ec9));
  --theme-primary-rgb: var(--shell-accent-rgb, var(--public-shell-primary-rgb, 74, 126, 201));
  --theme-accent: var(--shell-accent-2, var(--public-shell-accent, #6b9ad6));
  --theme-accent-rgb: var(--shell-accent-2-rgb, var(--public-shell-accent-rgb, 107, 154, 214));

  --theme-page-bg: color-mix(in srgb, var(--theme-primary) 8%, #ffffff 92%);
  --theme-panel-bg: color-mix(in srgb, var(--theme-primary) 12%, #ffffff 88%);
  --theme-panel-soft: color-mix(in srgb, var(--theme-primary) 15%, #ffffff 85%);
  --theme-panel-strong: color-mix(in srgb, var(--theme-primary) 18%, #ffffff 82%);
  --theme-chrome-bg: color-mix(in srgb, var(--theme-primary) 24%, #ffffff 76%);

  --theme-border: color-mix(in srgb, var(--theme-primary) 32%, #ffffff 68%);
  --theme-border-strong: color-mix(in srgb, var(--theme-primary) 44%, #ffffff 56%);
  --theme-border-soft: color-mix(in srgb, var(--theme-primary) 24%, #ffffff 76%);
  --theme-text: color-mix(in srgb, var(--theme-primary) 10%, #111111 90%);
  --theme-text-muted: color-mix(in srgb, var(--theme-primary) 14%, #555555 86%);
  --theme-text-soft: color-mix(in srgb, var(--theme-primary) 12%, #888888 88%);

  --theme-on-primary: color-mix(in srgb, var(--theme-primary) 4%, #ffffff 96%);
  --theme-button-bg: var(--theme-primary);
  --theme-button-hover: color-mix(in srgb, var(--theme-primary) 86%, #111113 14%);
  --theme-button-text: var(--theme-on-primary);
  --theme-button-soft: var(--theme-panel-strong);
  --theme-button-soft-hover: color-mix(in srgb, var(--theme-primary) 24%, #ffffff 76%);
  --theme-button-soft-border: color-mix(in srgb, var(--theme-primary) 40%, #ffffff 60%);
  --theme-button-disabled: color-mix(in srgb, var(--theme-primary) 8%, #dddddd 92%);
  --theme-button-disabled-text: color-mix(in srgb, var(--theme-primary) 8%, #888888 92%);

  --theme-input-bg: var(--theme-panel-bg);
  --theme-input-border: var(--theme-border);
  --theme-modal-shell: var(--theme-panel-bg);
  --theme-modal-bar: var(--theme-chrome-bg);
  --theme-modal-body: var(--theme-panel-bg);
  --theme-modal-field: var(--theme-panel-soft);
  --theme-modal-divider: var(--theme-border);
  --theme-overlay-bg: rgba(var(--theme-primary-rgb), 0.38);
  --theme-toast-bg: color-mix(in srgb, var(--theme-primary) 78%, #111113 22%);
  --theme-toast-text: var(--theme-on-primary);

  --theme-success: #059669;
  --theme-success-rgb: 5, 150, 105;
  --theme-success-surface: rgba(var(--theme-success-rgb), 0.1);
  --theme-success-border: rgba(var(--theme-success-rgb), 0.26);
  --theme-danger: #dc2626;
  --theme-danger-rgb: 220, 38, 38;
  --theme-danger-surface: rgba(var(--theme-danger-rgb), 0.09);
  --theme-danger-border: rgba(var(--theme-danger-rgb), 0.24);
  --theme-warning: #d97706;

  --theme-shadow-panel: 0 24px 64px rgba(var(--theme-primary-rgb), 0.14);
  --theme-shadow-card: 0 14px 34px rgba(var(--theme-primary-rgb), 0.11);
  --theme-shadow-strong: 0 30px 70px rgba(var(--theme-primary-rgb), 0.2);
  --theme-shadow-hover: 0 22px 48px rgba(var(--theme-primary-rgb), 0.17);
}

/* 表格分割线统一实色 */
table td,
table th,
.data-table td,
.data-table th,
#memberUsersTable td,
#memberUsersTable th,
#orderManagementTableBody td,
#orderManagementTableBody th,
.super-guard-data-table td,
.super-guard-data-table th,
.dispatch-center-table td,
.dispatch-center-table th,
.api-table td,
.api-table th {
  border-bottom: 1px solid #b0b4bb !important;
}

/* 表格头部分割线实色 */
.data-table thead tr,
table thead tr {
  border-bottom: 1px solid #b0b4bb !important;
}

/* ===== 主题化滚动条（表格镜像滚动条 / 弹窗滚动区） =====
   滑轨与滑块颜色跟随当前主题，不再固定成白色；
   表格侧与弹窗侧共用同一套颜色，保持完全一致。
   颜色取 --admin-accent-rgb：app-shell 外壳页与后台 iframe 页里都会被主题同步写入，
   而 --theme-primary 在 iframe 内并未注入，会退回默认蓝，故不使用。
   只改颜色、不改宽度，滚动条占位与表格最后一列的让位宽度仍严格对齐。 */
.modal-body,
.admin-runtime-modal-scroll,
.database-table-modal__table-wrap {
  --tnb-scroll-rgb: var(--admin-accent-rgb, 74, 126, 201);
  scrollbar-color:
    color-mix(in srgb, rgb(var(--tnb-scroll-rgb)) 62%, #6b6b6b 38%)
    color-mix(in srgb, rgb(var(--tnb-scroll-rgb)) 12%, transparent);
}

/* 表格侧的滚动条：滑槽透明，由 table-native-bar.js 把面板自身的底色/渐变铺在这个
   15px 上，滚动条整条盖住表格（行分割线到这为止），滑块颜色仍跟随主题。 */
.table-native-bar {
  --tnb-scroll-rgb: var(--admin-accent-rgb, 74, 126, 201);
  scrollbar-color:
    color-mix(in srgb, rgb(var(--tnb-scroll-rgb)) 62%, #6b6b6b 38%)
    transparent;
}

/* 悬停 / 拖动时滑块再深一档，便于识别 */
.modal-body:hover,
.admin-runtime-modal-scroll:hover,
.database-table-modal__table-wrap:hover {
  scrollbar-color:
    color-mix(in srgb, rgb(var(--tnb-scroll-rgb)) 80%, #5a5a5a 20%)
    color-mix(in srgb, rgb(var(--tnb-scroll-rgb)) 16%, transparent);
}

.table-native-bar:hover {
  scrollbar-color:
    color-mix(in srgb, rgb(var(--tnb-scroll-rgb)) 80%, #5a5a5a 20%)
    transparent;
}