/* ============================================================
 * 暗色模式覆盖层（Dark Mode）
 * 配合 assets/js/theme.js 的 <html data-mode="dark"> 属性生效
 * 覆盖：首页 / 订单 / 客服 / 用户中心 各页面
 * ============================================================ */

/* ---------- 1. 变量覆盖（首页 / 用户中心体系 + 订单页体系） ---------- */
html[data-mode="dark"] {
  --bg: #14161f;
  --bg-card: #1d2130;
  --bg-elevated: #262b3d;
  --text: #e8eaf2;
  --text-muted: #9aa1b5;
  --text-light: #6f7689;
  --accent: #f97316;
  --success: #34d399;
  --danger: #f87171;
  --warning: #fbbf24;
  --border: #2b3045;
  --border-light: #232839;
  --glass-bg: rgba(20, 22, 31, 0.82);
  --glass-border: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  --price-color: #f87171;
  --free-color: #34d399;

  /* 主题主色衍生（默认蓝；与 theme.js 暗色衍生一致，未选主题时的兜底） */
  --primary: #628ff1;
  --primary-dark: #3f76ed;
  --primary-mid: #81a5f3;
  --primary-deep: #153988;
  --primary-light: rgba(37, 99, 235, 0.16);
  --primary-soft: rgba(37, 99, 235, 0.16);
  --primary-rgb: 98, 143, 241;
  --info-color: #628ff1;

  /* 订单页 */
  --c-text: #e8eaf2;
  --c-text-2: #b6bccb;
  --c-text-3: #8a90a3;
  --c-bg: #171a27;
  --c-card: #1f2334;
  --c-border: #2c3147;
  --c-border-soft: #252a3d;
  --c-success-soft: rgba(52, 211, 153, 0.16);
  --c-danger-soft: rgba(248, 113, 113, 0.16);
  --c-accent-soft: rgba(249, 115, 22, 0.16);
}

/* ---------- 2. 页面背景（统一深色渐变，跟随主题主色） ---------- */
html[data-mode="dark"] body,
html[data-mode="dark"] {
  background: linear-gradient(180deg, var(--primary-deep, #1e1b4b) 0%, #161827 55%, #13141d 100%) fixed no-repeat !important;
  background-attachment: fixed;
}
html[data-mode="dark"] body { color: var(--text); }
html[data-mode="dark"] .app:before {
  background: linear-gradient(180deg, var(--primary-deep, #1e1b4b) 0%, #161827 55%, #13141d 100%) !important;
}

/* ---------- 3. 固定头部（玻璃拟态） ---------- */
html[data-mode="dark"] .site-header {
  background: var(--glass-bg);
  border-bottom-color: var(--glass-border);
}
html[data-mode="dark"] .site-header a { color: inherit; }
html[data-mode="dark"] .site-nav a { color: var(--text-muted); }

/* ---------- 4. 商品卡片 / 公告 / 通用卡片 ---------- */
html[data-mode="dark"] .product-card {
  background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
html[data-mode="dark"] .product-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55); }
html[data-mode="dark"] .sidebar,
html[data-mode="dark"] .announce-card { background: var(--bg-card); box-shadow: var(--shadow-sm); }

/* ---------- 5. 侧边栏 / 商品分类 ---------- */
html[data-mode="dark"] .cat-side .sidebar-list a { color: var(--text-muted); }
html[data-mode="dark"] .cat-side .sidebar-list a.active { color: var(--primary); }
html[data-mode="dark"] .cat-side .sidebar-list .cat-img { background: var(--bg-elevated); border-color: var(--border); }

/* ---------- 6. 首页用户面板 ---------- */
html[data-mode="dark"] .up-menu a { color: var(--text-muted); }
html[data-mode="dark"] .up-tag-nv { background: var(--border-light); color: var(--text-muted); }
html[data-mode="dark"] .up-btn-o { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
html[data-mode="dark"] .up-logout { background: rgba(224, 85, 85, 0.16); color: #f87171; }
html[data-mode="dark"] .up-logout:hover { background: rgba(224, 85, 85, 0.26); color: #f87171; }
html[data-mode="dark"] .up-bal {
  background: linear-gradient(135deg, var(--primary-soft), rgba(255, 255, 255, 0.02));
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .up-bal-label,
html[data-mode="dark"] .up-bal .up-bal-day { color: var(--text-muted); }
html[data-mode="dark"] .up-bal .up-bal-day { border-top-color: var(--border); }
html[data-mode="dark"] .up-bal-amt { color: var(--text); }
html[data-mode="dark"] .up-micon { background: linear-gradient(145deg, var(--border-light), var(--bg-card)); color: var(--text-muted); }

/* ---------- 7. 底部导航 ---------- */
html[data-mode="dark"] .mobile-tabbar {
  background: rgba(20, 22, 31, 0.9);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
}

/* ---------- 8. 订单页 ---------- */
html[data-mode="dark"] .query-card-header { background: #1a1e2d; }
html[data-mode="dark"] .query-legend { background: #1c2030; border-color: var(--c-border); }
html[data-mode="dark"] .legend-kf { border-top-color: var(--c-border); }
html[data-mode="dark"] .qt-card .order-info { color: var(--c-text); }
html[data-mode="dark"] .qt-card .oi-tag.oi-time { color: #67e8f9; background: rgba(8, 145, 178, 0.18); }
html[data-mode="dark"] .qt-card .oi-tag.oi-no { color: #c4b5fd; background: rgba(124, 58, 237, 0.18); }
html[data-mode="dark"] .qt-btn { border-color: var(--c-border); color: var(--c-text); }
html[data-mode="dark"] .page-jump { border-color: var(--c-border); background: var(--c-card); color: var(--c-text); }
html[data-mode="dark"] .page-sum { color: var(--c-text-3); }
html[data-mode="dark"] .status-refunded { background: var(--c-border-soft); color: var(--c-text-2); }
html[data-mode="dark"] #orderItem td.info { background: #1a1e2d; }
html[data-mode="dark"] #orderItem td.warning { background: rgba(245, 158, 11, 0.16); }

/* 订单页补充：搜索区 / 卡片头 / 分页计数器 */
html[data-mode="dark"] .search-group,
html[data-mode="dark"] .search-input { background: var(--c-card); }
html[data-mode="dark"] .search-select { background: var(--c-bg); border-right-color: var(--c-border); }
html[data-mode="dark"] .search-input::placeholder { color: var(--c-text-3); }
html[data-mode="dark"] .qt-card .layui-card-header { color: var(--c-text); border-bottom-color: var(--c-border); }
html[data-mode="dark"] .order-pagination span[style] { color: var(--c-text-3) !important; }
html[data-mode="dark"] .order-pagination span[style] b { color: var(--c-primary) !important; }

/* 订单详情弹窗（layui layer） */
html[data-mode="dark"] .layui-layer,
html[data-mode="dark"] .layui-layer-rim { background: var(--bg-elevated) !important; color: var(--text); }
html[data-mode="dark"] .layui-layer-title { background: var(--bg-elevated) !important; color: var(--text); border-bottom-color: var(--border); }
html[data-mode="dark"] .layui-layer-content { color: var(--text); }
html[data-mode="dark"] .layui-layer-content font[color="#525252"] { color: var(--text-muted) !important; }
html[data-mode="dark"] .layui-layer-msg,
html[data-mode="dark"] .layui-layer-dialog { background: var(--bg-elevated) !important; color: var(--text); }

/* ---------- 9. 客服页 ---------- */
html[data-mode="dark"] .kf-contact-card,
html[data-mode="dark"] .kf-faq-item {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
html[data-mode="dark"] .kf-contact-value,
html[data-mode="dark"] .kf-section-title,
html[data-mode="dark"] .kf-faq-q { color: var(--text); }
html[data-mode="dark"] .kf-copy-btn:hover { background: var(--kf-primary-soft); }
html[data-mode="dark"] .kf-faq-item.open { border-color: var(--kf-primary); }
html[data-mode="dark"] .kf-faq-a { color: var(--text-muted); }
html[data-mode="dark"] .kf-faq-a-inner hr { border-top-color: var(--border); }
html[data-mode="dark"] .kf-btn-primary { background: var(--bg-card); color: var(--kf-primary); }

/* 客服页补充：FAQ 文字 / 辅助色 / 复制按钮态 */
html[data-mode="dark"] .kf-faq-text { color: var(--text); }
html[data-mode="dark"] .kf-faq-a-inner { color: var(--text-muted); }
html[data-mode="dark"] .kf-contact-label,
html[data-mode="dark"] .kf-contact-tip,
html[data-mode="dark"] .kf-section-sub,
html[data-mode="dark"] .kf-faq-note { color: var(--text-muted); }
html[data-mode="dark"] .kf-arrow { color: var(--text-light); }
html[data-mode="dark"] .kf-copy-btn.copied { background: var(--c-success-soft); color: var(--success); }

/* ---------- 10. 用户中心（app.css / Bootstrap 组件） ---------- */
html[data-mode="dark"] .panel-default,
html[data-mode="dark"] .panel { border-color: var(--border); }
html[data-mode="dark"] .panel-default > .panel-heading,
html[data-mode="dark"] .panel-default > .panel-footer {
  background-color: #1a1e2d;
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .panel .list-group-item,
html[data-mode="dark"] .list-group-item {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .list-group-item font { color: var(--text); }
html[data-mode="dark"] a.list-group-item:hover,
html[data-mode="dark"] a.list-group-item:focus { background: var(--bg-elevated); color: var(--text); }
html[data-mode="dark"] .well { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-mode="dark"] .bg-white,
html[data-mode="dark"] .bg-white-only { background-color: var(--bg-card) !important; }
html[data-mode="dark"] .bg-light,
html[data-mode="dark"] .bg-light.dker { background-color: var(--bg-card) !important; }
html[data-mode="dark"] .text-muted { color: var(--text-muted) !important; }
html[data-mode="dark"] .text-dark { color: var(--text) !important; }
html[data-mode="dark"] .form-control,
html[data-mode="dark"] .input-group-addon {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .form-control:focus { border-color: var(--primary); box-shadow: none; }
html[data-mode="dark"] .table,
html[data-mode="dark"] .table > thead > tr > th,
html[data-mode="dark"] .table > tbody > tr > td,
html[data-mode="dark"] .table > tfoot > tr > td { color: var(--text); border-color: var(--border); }
html[data-mode="dark"] .btn-default { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-mode="dark"] .btn-default:hover { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
html[data-mode="dark"] .pagination > li > a,
html[data-mode="dark"] .pagination > li > span { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-mode="dark"] .pagination > li > a:hover,
html[data-mode="dark"] .pagination > li > span:hover { background: var(--bg-elevated); color: var(--text); }
html[data-mode="dark"] .layui-card { background: var(--bg-card); }

/* 设置弹窗（个性化设置）暗色适配 */
html[data-mode="dark"] .settings-modal { background: var(--bg-elevated); box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
html[data-mode="dark"] .settings-modal-header { border-bottom-color: var(--border); }
html[data-mode="dark"] .settings-modal-header h3 { color: var(--text); }
html[data-mode="dark"] .settings-modal-close { color: var(--text-muted); }
html[data-mode="dark"] .settings-section-title { color: var(--text); }
html[data-mode="dark"] .settings-hint { color: var(--text-muted); }
html[data-mode="dark"] .settings-switch-label { color: var(--text); }
html[data-mode="dark"] .settings-switch-slider { background: var(--border); }
html[data-mode="dark"] .settings-switch-slider:before { background: #e8eaf2; }
html[data-mode="dark"] .settings-btn-secondary { background: var(--bg-card); border-color: var(--border); color: var(--text); }
html[data-mode="dark"] .settings-btn-secondary:hover { background: var(--border-light); color: var(--text); }
html[data-mode="dark"] .settings-btn-primary { background: var(--primary); color: #fff; }
html[data-mode="dark"] .settings-modal-overlay { background: rgba(5, 6, 12, 0.72); }
html[data-mode="dark"] .theme-swatch { box-shadow: none; border-color: var(--border); }
html[data-mode="dark"] .theme-swatch.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
html[data-mode="dark"] .theme-swatch-name { color: var(--text-muted); }
html[data-mode="dark"] .theme-swatch.active .theme-swatch-name { color: var(--primary); }

/* ---------- 11. 首页补充：分类头 / 商品容器 / 登录模组 ---------- */
html[data-mode="dark"] .category-header,
html[data-mode="dark"] .product-grid {
  background: var(--bg-elevated);
}
html[data-mode="dark"] .category-header {
  color: var(--text);
  border-bottom-color: var(--border);
}
html[data-mode="dark"] .category-header h2 { color: var(--text); }

html[data-mode="dark"] .up-card {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-mode="dark"] .up-name { color: var(--text); }
html[data-mode="dark"] .up-avatar {
  border-color: var(--bg-card);
  background: var(--bg-elevated);
}

/* ---------- 12. 公告内容（后台富文本可能带内联白色背景） ---------- */
html[data-mode="dark"] .announce-content-wrapper [style*="background:#fff"],
html[data-mode="dark"] .announce-content-wrapper [style*="background: #fff"] {
  background: var(--bg-card) !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.35) !important;
}
html[data-mode="dark"] .announce-content-wrapper [style*="color:#222"],
html[data-mode="dark"] .announce-content-wrapper [style*="color: #222"],
html[data-mode="dark"] .announce-content-wrapper [style*="color:#333"],
html[data-mode="dark"] .announce-content-wrapper [style*="color: #333"] {
  color: var(--text) !important;
}

/* ---------- 13. 用户中心：登录页 / 容器 / 通用白底覆盖 ---------- */
/* 登录页卡片 */
html[data-mode="dark"] .login-card { background: var(--bg-card) !important; color: var(--text); }
html[data-mode="dark"] .login-card .form-control {
  background: var(--bg-card);
  border-bottom-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .login-card .form-control::placeholder { color: var(--text-light); }
html[data-mode="dark"] .login-card .input-group-addon { border-bottom-color: var(--border); color: var(--text-muted); }
html[data-mode="dark"] .login-card .divider span { background: var(--bg-card); color: var(--text-muted); }
html[data-mode="dark"] .login-card .divider::before { background: var(--border); }
html[data-mode="dark"] .login-card .login-header img { background: var(--bg-elevated); }
html[data-mode="dark"] .login-card .social-btn { background: var(--bg-elevated); color: var(--text); border-color: var(--border); }
html[data-mode="dark"] .login-card .social-btn:hover { background: var(--border-light); }

/* 用户中心通用容器（白底卡片） */
html[data-mode="dark"] .container,
html[data-mode="dark"] .container[style*="background:#fff"],
html[data-mode="dark"] .container[style*="background: #fff"] {
  background: var(--bg-card) !important;
  color: var(--text);
}

/* public-style.main.css 组件 */
html[data-mode="dark"] .panel-basics,
html[data-mode="dark"] .panel-shadow {
  background: var(--bg-card) !important;
  color: var(--text);
}
html[data-mode="dark"] .panel-shadow { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }

/* QQ客服卡片 */
html[data-mode="dark"] .qqkf-card-title { background: var(--bg-elevated) !important; border-bottom-color: var(--border); }
html[data-mode="dark"] .qqkf-card { background: var(--bg-card) !important; color: var(--text); border-color: var(--border); }

/* 工单页 */
html[data-mode="dark"] .gdan_gout { background: var(--bg-card) !important; color: var(--text); }

/* 手机端底部导航（mobile-tabbar）*/
html[data-mode="dark"] .mobile-tabbar {
  background: rgba(20, 22, 31, 0.92) !important;
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4);
}
html[data-mode="dark"] .mobile-tabbar .tab-item { color: var(--text-muted); }

/* 用户中心：内联 !important 白底覆盖（list.php / recharge.php / price.php / regsite.php / xd.php）*/
html[data-mode="dark"] [style*="background: #fff !important"],
html[data-mode="dark"] [style*="background:#fff !important"] {
  background: var(--bg-card) !important;
}

/* 用户中心：卡密列表 / 订单通知 / 批量下单 等内联白底 */
html[data-mode="dark"] [style*="background: #fff"]:not(.announce-content-wrapper),
html[data-mode="dark"] [style*="background-color: #fff"]:not(.announce-content-wrapper),
html[data-mode="dark"] [style*="background:#ffffff"]:not(.announce-content-wrapper) {
  background: var(--bg-card) !important;
}

/* 用户中心：文字颜色覆盖（#333 / #666 / #999 深色文字）*/
html[data-mode="dark"] [style*="color: #333"]:not(.announce-content-wrapper),
html[data-mode="dark"] [style*="color:#333"]:not(.announce-content-wrapper) {
  color: var(--text) !important;
}
html[data-mode="dark"] [style*="color: #666"]:not(.announce-content-wrapper),
html[data-mode="dark"] [style*="color:#666"]:not(.announce-content-wrapper) {
  color: var(--text-muted) !important;
}
html[data-mode="dark"] [style*="color: #999"]:not(.announce-content-wrapper),
html[data-mode="dark"] [style*="color:#999"]:not(.announce-content-wrapper) {
  color: var(--text-light) !important;
}

/* 用户中心：边框颜色覆盖 */
html[data-mode="dark"] [style*="border-color: #ddd"],
html[data-mode="dark"] [style*="border-color:#ddd"] {
  border-color: var(--border) !important;
}
html[data-mode="dark"] [style*="border-bottom-color: #ddd"],
html[data-mode="dark"] [style*="border-bottom-color:#ddd"] {
  border-bottom-color: var(--border) !important;
}

/* 用户中心：表格 / 列表补充 */
html[data-mode="dark"] .list-group-item[style*="background:#fff"],
html[data-mode="dark"] .list-group-item[style*="background: #fff"] {
  background: var(--bg-card) !important;
}

/* 用户中心：卡片标题 / 徽章文字 */
html[data-mode="dark"] .label-yc { color: #fff !important; }
html[data-mode="dark"] .three-df-naw,
html[data-mode="dark"] .two-df-naw { color: var(--text); border-top-color: var(--border); }

/* 用户中心：通用覆盖（兜底——常见白底卡片元素） */
html[data-mode="dark"] .well,
html[data-mode="dark"] .well-lg {
  background: var(--bg-card) !important;
  border-color: var(--border);
  color: var(--text);
}

/* ---------- 14. 用户中心独立子页（未走 head 文件的独立 HTML 页面） ---------- */
/* records.php 收支明细（Bootstrap 面板 / 表格 / 分页） */
html[data-mode="dark"] .panel,
html[data-mode="dark"] .panel-default {
  background: var(--bg-card) !important;
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .panel-default .panel-heading {
  background: linear-gradient(135deg, var(--primary-deep, #1e1b4b), var(--primary-dark, #2563eb)) !important;
  border-color: var(--border);
  color: #fff !important;
}
html[data-mode="dark"] .table { color: var(--text); background: transparent; }
html[data-mode="dark"] .table > thead > tr > th,
html[data-mode="dark"] .table > thead > tr > td,
html[data-mode="dark"] .table > tbody > tr > th,
html[data-mode="dark"] .table > tbody > tr > td,
html[data-mode="dark"] .table > tfoot > tr > th,
html[data-mode="dark"] .table > tfoot > tr > td { border-color: var(--border); }
html[data-mode="dark"] .table-bordered { border-color: var(--border); }
html[data-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-mode="dark"] .table-hover > tbody > tr:hover { background: var(--bg-elevated); }
html[data-mode="dark"] .pagination > li > a,
html[data-mode="dark"] .pagination > li > span {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .pagination > li > a:hover,
html[data-mode="dark"] .pagination > li > span:hover { background: var(--bg-elevated); color: var(--text); }
html[data-mode="dark"] .pagination > .disabled > a,
html[data-mode="dark"] .pagination > .disabled > span {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-light);
}

/* cardlist.php / cardlist2.php 卡密中心（独立版）+ records.php / xd.php 独立页面（body.uc-standalone） */
html[data-mode="dark"] .uc-standalone h3,
html[data-mode="dark"] .uc-standalone h4 { color: var(--text); }
html[data-mode="dark"] .uc-standalone .page-header {
  background: linear-gradient(135deg, var(--primary-deep, #1e1b4b), var(--primary-dark, #2563eb)) !important;
}
html[data-mode="dark"] .uc-standalone .stat-item,
html[data-mode="dark"] .uc-standalone .card-form { background: var(--bg-elevated) !important; color: var(--text); }
html[data-mode="dark"] .uc-standalone .balance-card { background: rgba(239, 68, 68, 0.14) !important; color: var(--text); }
html[data-mode="dark"] .uc-standalone .form-control,
html[data-mode="dark"] .uc-standalone .search-input,
html[data-mode="dark"] .uc-standalone .pagesize-select {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .uc-standalone textarea {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-mode="dark"] .uc-standalone .table th,
html[data-mode="dark"] .uc-standalone .table td { border-color: var(--border); }
html[data-mode="dark"] .uc-standalone .table th { background: var(--bg-elevated); }
html[data-mode="dark"] .uc-standalone .expired { background: rgba(239, 68, 68, 0.14) !important; }
html[data-mode="dark"] .uc-standalone .pagination a {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}
html[data-mode="dark"] .uc-standalone .pagination a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
html[data-mode="dark"] .uc-standalone .rule-box { background: var(--bg-card) !important; color: var(--text); }
html[data-mode="dark"] .uc-standalone .rule-line { background: var(--border); }
html[data-mode="dark"] .uc-standalone .tips { color: #10b981; }
html[data-mode="dark"] .uc-standalone .loading-mask { background: var(--bg) !important; }
html[data-mode="dark"] .uc-standalone .loading-text { color: var(--text-muted); }

/* xd.php 快捷邀请助手（Element Plus 变量覆盖） */
html[data-mode="dark"] {
  --el-bg-color: #1d2130;
  --el-bg-color-overlay: #262b3d;
  --el-fill-color-blank: #1d2130;
  --el-fill-color-light: #262b3d;
  --el-fill-color-lighter: #232839;
  --el-fill-color: #2b3045;
  --el-border-color: #2b3045;
  --el-border-color-light: #2b3045;
  --el-border-color-lighter: #2b3045;
  --el-border-color-extra-light: #232839;
  --el-text-color-primary: #e8eaf2;
  --el-text-color-regular: #c7ccda;
  --el-text-color-secondary: #9aa1b5;
  --el-text-color-placeholder: #6f7689;
  --el-mask-color: rgba(0, 0, 0, 0.6);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.4);
}
html[data-mode="dark"] .uc-standalone #app { background: var(--bg) !important; }
html[data-mode="dark"] .uc-standalone .el-card,
html[data-mode="dark"] .uc-standalone .el-dialog,
html[data-mode="dark"] .uc-standalone .el-message-box { background: var(--bg-card); color: var(--text); }
html[data-mode="dark"] .uc-standalone .el-table {
  --el-table-bg-color: var(--bg-card);
  --el-table-tr-bg-color: var(--bg-card);
  --el-table-header-bg-color: var(--bg-elevated);
  --el-table-header-text-color: var(--text);
  --el-table-text-color: var(--text);
  --el-table-border-color: var(--border);
}
html[data-mode="dark"] .uc-standalone .el-form-item__label,
html[data-mode="dark"] .uc-standalone .el-descriptions__label,
html[data-mode="dark"] .uc-standalone .el-descriptions__content { color: var(--text); }