/* 全站主题变量与暗色模式适配 */
:root {
  --site-body-light: #f6f7f9;
  --site-body-extra-light: #ffffff;
  --site-secondary-color: #64748b;
  --site-border: rgba(15, 23, 42, 0.07);
  --site-border-subtle: rgba(15, 23, 42, 0.04);
  --site-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  --site-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.12);
  --site-surface: #ffffff;
  --site-surface-muted: rgba(248, 250, 252, 0.92);
  --site-input-border: rgba(15, 23, 42, 0.08);
  --site-divider: rgba(15, 23, 42, 0.08);
  --site-scrollbar: rgba(15, 23, 42, 0.12);

  /* 兼容 home.css / works.css 中引用的变量名 */
  --bs-body-light: var(--site-body-light);
  --bs-body-extra-light: var(--site-body-extra-light);
  --bs-secondary-color: var(--site-secondary-color);
}

html.site-dark,
#page-container.dark-mode {
  --site-body-light: #253041;
  --site-body-extra-light: #1f2937;
  --site-secondary-color: #99a8bd;
  --site-border: rgba(255, 255, 255, 0.08);
  --site-border-subtle: rgba(255, 255, 255, 0.05);
  --site-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  --site-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.35);
  --site-surface: #19222d;
  --site-surface-muted: rgba(30, 41, 59, 0.65);
  --site-input-border: rgba(255, 255, 255, 0.1);
  --site-divider: rgba(255, 255, 255, 0.08);
  --site-scrollbar: rgba(255, 255, 255, 0.15);

  /* OneUI 暗色模式未覆盖的 Bootstrap 变量 */
  --bs-body-color: #bec8d5;
  --bs-body-color-rgb: 190, 200, 213;
  --bs-body-bg: #19222d;
  --bs-body-bg-rgb: 25, 34, 45;
  --bs-emphasis-color: #dde2e9;
  --bs-border-color: #2a384b;
}

/* Layer 弹窗外壳（挂载在 body 下，需 html.site-dark） */
html.site-dark .layui-layer.home-layer {
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  background: var(--site-surface, #19222d) !important;
}

html.site-dark .layui-layer.home-layer .layui-layer-content {
  background: var(--site-surface, #19222d);
}

html.site-dark .layui-layer-shade {
  background-color: rgba(0, 0, 0, 0.55) !important;
}

/* iframe 弹窗页（无 #page-container） */
html.site-dark.home-modal-page,
html.site-dark .home-modal-page {
  color: #bec8d5;
  background: var(--site-surface, #19222d);
}

html.site-dark .home-modal-page .home-modal-titles h4,
html.site-dark .home-modal-page .home-modal-qun-name {
  color: #dde2e9;
}

html.site-dark .home-modal-page .home-modal-field .form-control {
  border-color: var(--site-input-border);
  background: #253041;
  color: #dde2e9;
}

html.site-dark .home-modal-page .home-modal-field .form-control::placeholder {
  color: rgba(153, 168, 189, 0.65);
}

html.site-dark .home-modal-page .home-modal-field .form-control:focus {
  background: #253041;
}

html.site-dark .home-modal-page .home-modal-qun-item {
  background: #253041;
}

html.site-dark .home-modal-page .VAPTCHA-init-main {
  background: #253041;
  border-color: var(--site-input-border);
}