/* ==========================================================================
   摩盾 · 暗夜主题  modun-dark  ——  全站深色皮肤  v5（科幻视觉层）
   --------------------------------------------------------------------------
   挂载位置：themes/clientarea/modun-dark/includes/head.tpl （最后加载）
   作用范围：会员中心全部页面 + 购物车全部页面（购物车复用 clientarea 外壳）

   覆盖策略：
     1) 所有选择器统一加 `body` 前缀提高特异性，并配 !important，
        确保覆盖：bootstrap.min.css / app.min.css / assets_custom/global.css
        以及各模板 <style> 内联样式与 style="" 内联属性。
     2) 仅改“颜色/背景/圆角/阴影/间距/字号/动效”，不动任何 DOM 结构。
     3) 功能挂钩（id / name / action / Smarty 变量 / Vue 绑定）零改动。

   设计语言：极光深空底色 + 玻璃拟态面板 + 霓虹辉光 + HUD 角标 + 悬浮微交互。
   不是“换个深色”，而是把整体视觉重做成未来感（详见 §31 科幻视觉层）。

   v3 可读性兜底：§25 浅色残留清除 / §26 v10 购买页 / §27 介绍拉宽 / §28 支付图标 / §29 打磨
   v5 视觉重做：  §31 科幻视觉层（极光背景 / 玻璃 / 霓虹 / 角标 / 动效）
                §32 布局颠覆层（左侧栏 → 顶部横向导航，纯 CSS 搬运，功能零改动；已移除 :has() 依赖）
   v6 页面级修复：§33 产品列表介绍溢出 / 帮助中心白底 / 安全中心文字黑色 / 配置选项底色 / 订单按钮压金额
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  --md-bg:          #0a0c11;   /* 页面底色 */
  --md-bg-soft:     #0d1017;   /* 次级底色 */
  --md-panel:       #12161e;   /* 卡片/面板 */
  --md-panel-2:     #171c26;   /* 输入/悬浮/次级面板 */
  --md-panel-3:     #1e2430;   /* 更亮一级 */
  --md-line:        #232a37;   /* 描边 */
  --md-line-2:      #2e3646;   /* 强描边 */
  --md-text:        #e9edf5;   /* 主文字 */
  --md-text-2:      #9aa5b8;   /* 次文字 */
  --md-text-3:      #6b7688;   /* 弱文字 */
  --md-primary:     #5b7cfa;   /* 主色 */
  --md-primary-2:   #8b5cf6;   /* 品牌紫 */
  --md-grad:        linear-gradient(135deg, #8b5cf6 0%, #4f8cff 100%);
  --md-grad-hover:  linear-gradient(135deg, #9b6bff 0%, #5f9bff 100%);
  --md-glow:        0 6px 20px rgba(91, 124, 250, .35);
  --md-danger:      #ff6b6b;
  --md-success:     #34d399;
  --md-warn:        #fbbf24;
  --md-price:       #ff8a5c;   /* 价格橙 */
  --md-radius:      14px;
  --md-radius-sm:   9px;
  --md-shadow:      0 10px 30px rgba(0, 0, 0, .45);
  --md-shadow-sm:   0 4px 16px rgba(0, 0, 0, .30);
  --md-hairline:    rgba(255, 255, 255, .045);
}

/* --------------------------------------------------------------------------
   2. 基础：页面底色 / 文字 / 滚动条 / 链接
   -------------------------------------------------------------------------- */
body {
  background-color: var(--md-bg) !important;
  color: var(--md-text) !important;
}
body .main-content { background-color: var(--md-bg) !important; }
body .page-content { background-color: var(--md-bg) !important; }
body .container-fluid { background-color: transparent !important; }
body .wrapper,
body .layout-wrapper { background-color: var(--md-bg) !important; }
body a { color: var(--md-primary); }
body a:hover { color: #7d97ff; }

body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-track { background: var(--md-bg-soft); }
body ::-webkit-scrollbar-thumb {
  background: #2b3240;
  border-radius: 6px;
  border: 2px solid var(--md-bg-soft);
}
body ::-webkit-scrollbar-thumb:hover { background: #3a4356; }

/* --------------------------------------------------------------------------
   3. 顶栏
   -------------------------------------------------------------------------- */
body #page-topbar {
  background-color: rgba(18, 22, 30, .92) !important;
  border-bottom: 1px solid var(--md-line) !important;
  box-shadow: 0 1px 0 var(--md-hairline), 0 8px 24px rgba(0, 0, 0, .40) !important;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
body .navbar-header { background-color: transparent !important; }
body .navbar-brand-box { background-color: transparent !important; }
body .header-item {
  color: var(--md-text-2) !important;
  background-color: transparent !important;
}
body .header-item:hover,
body .header-item:focus {
  background-color: var(--md-panel-2) !important;
  color: var(--md-text) !important;
}
body .header-item i { color: inherit !important; }
body .navbar-header .dropdown.show .header-item { background-color: var(--md-panel-2) !important; }
body #vertical-menu-btn { color: var(--md-text-2) !important; }
body .user-center_header {
  background: var(--md-grad) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(91, 124, 250, .16) !important;
}
body .badge-danger { background-color: var(--md-danger) !important; }
body .noti-icon-badge { background-color: var(--md-danger) !important; color: #fff !important; }
body .waves-effect .waves-ripple { background: rgba(255, 255, 255, .12) !important; }

/* --------------------------------------------------------------------------
   4. 左侧栏
   -------------------------------------------------------------------------- */
body .vertical-menu {
  background-color: var(--md-panel) !important;
  border-right: 1px solid var(--md-line) !important;
}
body #sidebar-menu { background-color: transparent !important; }
body #side-menu > li > a {
  color: var(--md-text-2) !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 10px 10px 0 !important;
  margin-right: 10px !important;
  transition: all .2s ease !important;
}
body #side-menu > li > a i { color: var(--md-text-3) !important; transition: color .2s ease; }
body #side-menu > li > a:hover {
  color: var(--md-text) !important;
  background-color: rgba(91, 124, 250, .10) !important;
}
body #side-menu > li > a:hover i { color: var(--md-primary) !important; }
body #side-menu > li > a.active,
body #side-menu > li.mm-active > a {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(139, 92, 246, .26), rgba(79, 140, 255, .10)) !important;
  border-left-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 124, 250, .14);
}
body #side-menu > li > a.active i,
body #side-menu > li.mm-active > a i { color: #a9bcff !important; }
body .sub-menu li a,
body #side-menu .sub-menu li a {
  color: var(--md-text-3) !important;
  background-color: transparent !important;
  border-radius: 8px !important;
  margin-right: 10px !important;
  transition: all .2s ease;
}
body .sub-menu li a:hover,
body #side-menu .sub-menu li a:hover {
  color: var(--md-text) !important;
  background-color: rgba(91, 124, 250, .08) !important;
}
body .sub-menu li a.active {
  color: #fff !important;
  background: rgba(91, 124, 250, .14) !important;
}
body .metismenu .mm-collapse { background-color: rgba(0, 0, 0, .18) !important; }
body .menu-title { color: var(--md-text-3) !important; }
body #sidebar-menu::before, body .vertical-menu::before { background: transparent !important; }
body .vertical-menu-btn { color: var(--md-text-2) !important; }

/* --------------------------------------------------------------------------
   5. 卡片 / 分区 / 通用容器
   -------------------------------------------------------------------------- */
body .card {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow-sm) !important;
  color: var(--md-text) !important;
}
body .card-body { background-color: transparent !important; color: var(--md-text) !important; }
body .card-footer {
  background-color: rgba(255, 255, 255, .02) !important;
  border-top: 1px solid var(--md-line) !important;
  color: var(--md-text-2) !important;
}
body .card-header {
  background-color: rgba(255, 255, 255, .02) !important;
  border-bottom: 1px solid var(--md-line) !important;
  color: var(--md-text) !important;
}
body .card-title { color: var(--md-text) !important; }
body .border-bottom { border-bottom-color: var(--md-line) !important; }
body .border-top { border-top-color: var(--md-line) !important; }
body .border { border-color: var(--md-line) !important; }
body .border-light { border-color: var(--md-line) !important; }
body hr { border-top-color: var(--md-line) !important; background-color: var(--md-line) !important; }
body .bg-light { background-color: var(--md-panel-2) !important; color: var(--md-text) !important; }
body .bg-white { background-color: var(--md-panel) !important; color: var(--md-text) !important; }
body .bg-primary {
  background-color: var(--md-primary) !important;
  background-image: var(--md-grad) !important;
}
body .bg-success { background-color: rgba(52, 211, 153, .18) !important; color: var(--md-success) !important; }
body .bg-gray, body .bg-gray-100 { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }
body .text-dark { color: var(--md-text) !important; }
body .text-black, body .text-black-50 { color: var(--md-text-2) !important; }
body .text-black-80 { color: var(--md-text-2) !important; }
body .text-muted { color: var(--md-text-3) !important; }
body .text-secondary { color: var(--md-text-2) !important; }
body .text-primary { color: #7d97ff !important; }
body .text-success { color: var(--md-success) !important; }
body .text-danger { color: var(--md-danger) !important; }
body .text-warning { color: var(--md-warn) !important; }
body .text-body { color: var(--md-text) !important; }
body .color-999, body .color-999999 { color: var(--md-text-3) !important; }
body .color-333, body .color-666 { color: var(--md-text-2) !important; }

/* --------------------------------------------------------------------------
   6. 表格
   -------------------------------------------------------------------------- */
body .table {
  color: var(--md-text) !important;
  background-color: transparent !important;
  margin-bottom: 0 !important;
}
body .table thead th {
  background-color: var(--md-panel-2) !important;
  color: var(--md-text-2) !important;
  border-color: var(--md-line) !important;
  border-bottom: 1px solid var(--md-line-2) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: .3px;
  white-space: nowrap;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
body .table td,
body .table th {
  border-color: var(--md-line) !important;
  vertical-align: middle;
  color: var(--md-text-2) !important;
  background-color: transparent !important;
}
body .table tbody td {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  transition: background-color .18s ease;
}
body .table tbody tr { background-color: transparent !important; }
body .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .015) !important; }
body .table-hover tbody tr:hover,
body .table-hover tbody tr:hover > td { background-color: rgba(91, 124, 250, .075) !important; }
body .table-bordered td, body .table-bordered th { border-color: var(--md-line) !important; }
body .table-responsive { border-color: var(--md-line) !important; }
body .table td .text-dark,
body .table td strong,
body .table td b { color: var(--md-text) !important; }

/* --------------------------------------------------------------------------
   7. 表单
   -------------------------------------------------------------------------- */
body .form-control,
body .custom-select {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text) !important;
  border-radius: var(--md-radius-sm) !important;
}
body .form-control:focus,
body .custom-select:focus {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-primary) !important;
  color: var(--md-text) !important;
  box-shadow: 0 0 0 3px rgba(91, 124, 250, .18) !important;
}
body .form-control::placeholder,
body input::placeholder { color: var(--md-text-3) !important; }
body input::-webkit-input-placeholder { color: var(--md-text-3) !important; }
body .form-control:disabled,
body .form-control[readonly] {
  background-color: #141820 !important;
  color: var(--md-text-3) !important;
  border-color: var(--md-line) !important;
}
body label,
body .col-form-label,
body .form-check-label { color: var(--md-text-2) !important; }
body .input-group-text {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .form-control.is-valid,
body .was-validated .form-control:valid,
body .was-validated .custom-control-input:valid ~ .custom-control-label::before {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}
body .invalid-feedback { color: var(--md-danger) !important; }
body .needs-validation .invalid-feedback { color: var(--md-danger) !important; }
body .form-control-file { color: var(--md-text-2) !important; }
body .custom-file-label {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-3) !important;
}
body .custom-file-label::after {
  background-color: var(--md-panel-3) !important;
  color: var(--md-text-2) !important;
}
body .custom-file-input:focus ~ .custom-file-label { border-color: var(--md-primary) !important; box-shadow: none !important; }

/* 复选框 / 单选框 */
body .custom-control-label::before {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
}
body .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}
body .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(91, 124, 250, .18) !important;
}
body .custom-checkbox .custom-control-label::after { filter: none !important; }
body .custom-control-input:disabled ~ .custom-control-label { color: var(--md-text-3) !important; }

/* 滑块 */
body input[type="range"] {
  background: var(--md-primary) !important;
  border-radius: 3px !important;
}
body .range_none { background: var(--md-line-2) !important; }

/* --------------------------------------------------------------------------
   8. 按钮
   -------------------------------------------------------------------------- */
body .btn-primary {
  background-image: var(--md-grad) !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--md-glow) !important;
}
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active {
  background-image: var(--md-grad-hover) !important;
  box-shadow: 0 8px 26px rgba(91, 124, 250, .45) !important;
  color: #fff !important;
}
body .btn-secondary {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}
body .btn-default {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .btn-default:hover, body .btn-default.active {
  background-color: var(--md-panel-3) !important;
  color: var(--md-text) !important;
}
body .btn-outline-light {
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  background-color: transparent !important;
}
body .btn-outline-light:hover { background-color: var(--md-panel-2) !important; color: #fff !important; }
body .btn-outline-primary { color: #7d97ff !important; border-color: rgba(91, 124, 250, .5) !important; background-color: transparent !important; }
body .btn-outline-primary:hover { background-image: var(--md-grad) !important; border-color: transparent !important; color: #fff !important; }
body .btn-outline-secondary { color: var(--md-text-2) !important; border-color: var(--md-line-2) !important; }
body .btn-outline-secondary:hover { background-color: var(--md-panel-3) !important; color: var(--md-text) !important; }
body .btn-light {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line) !important;
  color: var(--md-text) !important;
}
body .btn-light:not(:disabled):not(.disabled).active,
body .btn-light:not(:disabled):not(.disabled):active,
body .show > .btn-light.dropdown-toggle {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-line-2) !important;
  color: #fff !important;
}
body .btn-danger { background-color: var(--md-danger) !important; border-color: var(--md-danger) !important; color: #fff !important; }
body .btn-warning { background-color: var(--md-warn) !important; border-color: var(--md-warn) !important; color: #1a1f2b !important; }
body .btn-success { background-color: var(--md-success) !important; border-color: var(--md-success) !important; color: #08211a !important; }
body .btn-info { background-color: var(--md-primary) !important; border-color: var(--md-primary) !important; color: #fff !important; }
body .btn-white { background-color: var(--md-panel-2) !important; border-color: var(--md-line) !important; color: var(--md-text) !important; }
body .btn-custom,
body .btn-custom-group .btn {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  border-radius: var(--md-radius-sm) !important;
}
body .btn-custom:hover,
body .btn-custom-group .btn:hover {
  border-color: var(--md-primary) !important;
  color: #fff !important;
}
body .btn-custom-group .active,
body .btn-custom-group .btn.active {
  background-image: var(--md-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--md-glow) !important;
}
body .btn-group-toggle > .btn input[type="radio"],
body .btn-group-toggle > .btn-group > .btn input[type="radio"] { position: absolute; opacity: 0; }
body .btn-link { color: #7d97ff !important; }

/* --------------------------------------------------------------------------
   9. 下拉 / 弹窗 / 提示
   -------------------------------------------------------------------------- */
body .dropdown-menu {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line) !important;
  box-shadow: var(--md-shadow) !important;
  border-radius: var(--md-radius-sm) !important;
}
body .dropdown-item { color: var(--md-text-2) !important; }
body .dropdown-item:hover,
body .dropdown-item:focus {
  background-color: rgba(91, 124, 250, .14) !important;
  color: #fff !important;
}
body .dropdown-divider { border-color: var(--md-line) !important; }
body .dropdown-header { color: var(--md-text-3) !important; }
body .modal-content {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow) !important;
}
body .modal-header,
body .modal-footer { border-color: var(--md-line) !important; }
body .modal-title { color: var(--md-text) !important; }
body .modal-body { color: var(--md-text-2) !important; }
body .close,
body .modal-header .close {
  color: var(--md-text-2) !important;
  text-shadow: none !important;
  opacity: .8 !important;
}
body .tooltip-inner {
  background-color: var(--md-panel-3) !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-line-2) !important;
}
body .tooltip .arrow::before { border-top-color: var(--md-panel-3) !important; }
body .popover {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line) !important;
  color: var(--md-text) !important;
}
body .popover-header { background-color: var(--md-panel-3) !important; color: var(--md-text) !important; border-color: var(--md-line) !important; }
body .popover-body { color: var(--md-text-2) !important; }

/* --------------------------------------------------------------------------
   10. bootstrap-select（选择出站等下拉）
   -------------------------------------------------------------------------- */
body .bootstrap-select .dropdown-toggle {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text) !important;
  border-radius: var(--md-radius-sm) !important;
}
body .bootstrap-select .dropdown-toggle:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(91, 124, 250, .18) !important; }
body .bootstrap-select .dropdown-toggle.bs-placeholder,
body .bootstrap-select .dropdown-toggle.bs-placeholder:hover { color: var(--md-text-3) !important; }
body .bootstrap-select .dropdown-menu {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line) !important;
}
body .bootstrap-select .dropdown-menu li a {
  color: var(--md-text-2) !important;
  background-color: transparent !important;
}
body .bootstrap-select .dropdown-menu li a:hover,
body .bootstrap-select .dropdown-menu li a:focus {
  background-color: rgba(91, 124, 250, .14) !important;
  color: #fff !important;
}
body .bootstrap-select .dropdown-menu li.selected a,
body .bootstrap-select .dropdown-menu li a.active {
  background-color: var(--md-primary) !important;
  color: #fff !important;
}
body .bootstrap-select .dropdown-menu .inner { background-color: transparent !important; }
body .bootstrap-select.btn-group .dropdown-toggle .filter-option { color: inherit !important; }
body .bootstrap-select.is-valid .dropdown-toggle,
body .was-validated .bootstrap-select select:valid + .dropdown-toggle { border-color: var(--md-line-2) !important; }
body .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  background-color: var(--md-panel-3) !important;
  color: var(--md-text) !important;
}

/* select2（部分表单使用） */
body .select2-container .select2-selection--single,
body .select2-container .select2-selection--multiple {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}
body .select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .select2-dropdown {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line) !important;
}
body .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--md-panel-3) !important;
  color: var(--md-text) !important;
}
body .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}

/* --------------------------------------------------------------------------
   11. 分页 / 面包屑 / 页头
   -------------------------------------------------------------------------- */
body .pagination .page-link {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line) !important;
  color: var(--md-text-2) !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
}
body .pagination .page-link:hover { background-color: var(--md-panel-3) !important; color: #fff !important; }
body .pagination .page-item.active .page-link {
  background-image: var(--md-grad) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: var(--md-glow) !important;
}
body .pagination .page-item.disabled .page-link { background-color: var(--md-bg-soft) !important; color: var(--md-text-3) !important; }
body .breadcrumb { background-color: transparent !important; }
body .breadcrumb-item,
body .breadcrumb-item a { color: var(--md-text-3) !important; }
body .breadcrumb-item.active { color: var(--md-text-2) !important; }
body .breadcrumb-item + .breadcrumb-item::before { color: var(--md-text-3) !important; }
body .page-title-box h4,
body .page-title-box .page-title { color: var(--md-text) !important; }
body .page-title-box .breadcrumb-item a { color: var(--md-text-3) !important; }
body .page-title-box { color: var(--md-text) !important; }
body .page-title-box .page-title-right .btn { color: var(--md-text-2) !important; }

/* --------------------------------------------------------------------------
   12. 标签 / 徽章 / 提示条 / 标签页
   -------------------------------------------------------------------------- */
body .badge { background-color: var(--md-panel-3) !important; color: var(--md-text-2) !important; }
body .badge-primary { background-image: var(--md-grad) !important; color: #fff !important; }
body .badge-success, body .badge-soft-success { background-color: rgba(52, 211, 153, .2) !important; color: var(--md-success) !important; }
body .badge-danger, body .badge-soft-danger { background-color: rgba(255, 107, 107, .2) !important; color: var(--md-danger) !important; }
body .badge-warning, body .badge-soft-warning { background-color: rgba(251, 191, 36, .2) !important; color: var(--md-warn) !important; }
body .badge-info, body .badge-soft-info { background-color: rgba(91, 124, 250, .2) !important; color: #93b0ff !important; }
body .badge-light { background-color: var(--md-panel-3) !important; color: var(--md-text-2) !important; }
body .badge-secondary { background-color: var(--md-panel-3) !important; color: var(--md-text-3) !important; }
body .alert { border-radius: var(--md-radius-sm) !important; border: 1px solid transparent !important; }
body .alert-danger {
  background-color: rgba(255, 107, 107, .10) !important;
  border-color: rgba(255, 107, 107, .30) !important;
  color: #ff9d9d !important;
}
body .alert-success {
  background-color: rgba(52, 211, 153, .10) !important;
  border-color: rgba(52, 211, 153, .28) !important;
  color: #6ee7b7 !important;
}
body .alert-info {
  background-color: rgba(91, 124, 250, .10) !important;
  border-color: rgba(91, 124, 250, .28) !important;
  color: #93b0ff !important;
}
body .alert-warning {
  background-color: rgba(251, 191, 36, .10) !important;
  border-color: rgba(251, 191, 36, .28) !important;
  color: #fcd34d !important;
}
body .alert .close { color: inherit !important; opacity: .8 !important; }

/* 标签页 */
body .nav-tabs { border-bottom-color: var(--md-line) !important; }
body .nav-tabs .nav-link { color: var(--md-text-3) !important; border-color: transparent !important; background-color: transparent !important; }
body .nav-tabs .nav-link:hover { border-color: var(--md-line) var(--md-line) transparent !important; color: var(--md-text-2) !important; }
body .nav-tabs .nav-link.active {
  background-color: var(--md-panel) !important;
  border-color: var(--md-line) var(--md-line) var(--md-panel) !important;
  color: var(--md-text) !important;
}
body .nav-pills .nav-link { color: var(--md-text-3) !important; background-color: transparent !important; }
body .nav-pills .nav-link.active {
  background-image: var(--md-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
}
body .checkout-tabs .nav-pills .nav-link {
  background-color: var(--md-panel-2) !important;
  color: var(--md-text-3) !important;
}
body .checkout-tabs .nav-pills .nav-link.active { color: #fff !important; }
body .card-radio { background-color: var(--md-panel-2) !important; border-color: var(--md-line) !important; }
body .card-radio .card-radio-label { color: var(--md-text-2) !important; }
body .accordion .card-header { background-color: var(--md-panel-2) !important; }
body .custom-accordion .accordion-list .accor-plus-icon { background-color: var(--md-panel-3) !important; }

/* --------------------------------------------------------------------------
   13. 购物车 · 分类栏（左侧「跨境专区 / 跨境分类」）
   -------------------------------------------------------------------------- */
body .prolist { background-color: transparent !important; }
body .prolist .firstbox,
body .prolist .secondbox { background-color: transparent !important; }
body .prolist ul { list-style: none; margin: 0; padding: 0; }
body .prolist li {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius-sm) !important;
  margin-bottom: 8px !important;
  transition: all .2s ease !important;
  overflow: hidden;
}
body .prolist li a {
  display: block;
  padding: 10px 14px !important;
  color: var(--md-text-2) !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: all .2s ease;
}
body .prolist li:hover {
  border-color: rgba(91, 124, 250, .45) !important;
  background-color: var(--md-panel-3) !important;
}
body .prolist li:hover a { color: var(--md-text) !important; }
body .prolist li.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, .26), rgba(79, 140, 255, .20)) !important;
  border-color: rgba(91, 124, 250, .55) !important;
  box-shadow: 0 4px 14px rgba(91, 124, 250, .20) !important;
}
body .prolist li.active a,
body .prolist li.active a:hover { color: #fff !important; font-weight: 600; }

/* 搜索框 */
body .search-box .form-control,
body .pro-search-box .form-control {
  background-color: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #fff !important;
}
body .search-box .form-control::placeholder { color: rgba(255, 255, 255, .55) !important; }
body .search-box .mdi,
body .pro-search-box .mdi { color: rgba(255, 255, 255, .7) !important; }

/* --------------------------------------------------------------------------
   14. 购物车 · 产品卡片（列表页）
   -------------------------------------------------------------------------- */
body .cartitem {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  overflow: hidden !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--md-shadow-sm) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
body .cartitem:hover,
body .cartitem.active {
  transform: translateY(-5px) !important;
  border-color: rgba(91, 124, 250, .55) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(91, 124, 250, .22) !important;
}
body .cartitem .card-body {
  background-color: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
}
body .cartitem h5 {
  color: var(--md-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
body .cartitem .card-text { color: var(--md-text-2) !important; font-size: 13px; }
body .cartitem .card-footer {
  margin-top: auto !important;
  background-color: transparent !important;
  border-top: 1px solid var(--md-line) !important;
  box-shadow: none !important;
}
body .cartitem .card-footer a,
body .cartitem.active .card-footer a {
  display: block !important;
  width: 100% !important;
  line-height: 42px !important;
  background-image: var(--md-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-align: center;
  text-decoration: none !important;
  transition: filter .2s ease;
}
body .cartitem .card-footer a:hover,
body .cartitem.active .card-footer a:hover { filter: brightness(1.12); }
body .cartitem.active .card-footer { background-color: transparent !important; }
body .cartitem .color-999 { color: var(--md-text-3) !important; }
body .cartitem img { max-width: 100%; }

/* --------------------------------------------------------------------------
   15. 购物车 · 顶部二级分类条
   -------------------------------------------------------------------------- */
body .firstgroup_box_prov,
body .secondgroup_box_area {
  background: var(--md-grad) !important;
  color: #fff !important;
  border-radius: var(--md-radius-sm) !important;
}
body .firstgroup_item,
body .secondgroup_item {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius-sm) !important;
  transition: all .2s ease;
}
body .firstgroup_item a,
body .secondgroup_item a { color: var(--md-text-2) !important; text-decoration: none !important; }
body .firstgroup_item:hover,
body .secondgroup_item:hover { border-color: rgba(91, 124, 250, .45) !important; }
body .firstgroup_item:hover a,
body .secondgroup_item:hover a { color: var(--md-text) !important; }
body .firstgroup_item.active,
body .secondgroup_item.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, .28), rgba(79, 140, 255, .22)) !important;
  border-color: rgba(91, 124, 250, .55) !important;
}
body .firstgroup_item.active a,
body .secondgroup_item.active a,
body .firstgroup_item.active a.text-white { color: #fff !important; font-weight: 600; }

/* --------------------------------------------------------------------------
   16. 购物车 · 配置页
   -------------------------------------------------------------------------- */
body .configoption_form .form-group.row {
  border-bottom: 1px dashed var(--md-line) !important;
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}
body .configoption_form .form-group.row:last-child { border-bottom: none !important; }
body .configoption_form .col-form-label {
  color: var(--md-text-2) !important;
  font-size: 13px !important;
}
body .configoption_form .card-title { color: var(--md-text) !important; }
body .cycle-select-discount { background: var(--md-danger) !important; color: #fff !important; }
body .error-tip { color: var(--md-danger) !important; }
body .form-check { color: var(--md-text-2) !important; }
body .form-check-input { border-color: var(--md-line-2) !important; background-color: var(--md-panel-2) !important; }
body .custom-checkbox .custom-control-label { color: var(--md-text-2) !important; }
body [class*="lingAge-"] label,
body [class*="lingAge-"] .btn { color: var(--md-text-2) !important; }

/* --------------------------------------------------------------------------
   17. 购物车 · 订单摘要
   -------------------------------------------------------------------------- */
body .ordersummary {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  box-shadow: var(--md-shadow-sm) !important;
  color: var(--md-text) !important;
}
body .ordersummary .table,
body .ordersummary .table td,
body .ordersummary .table th {
  color: var(--md-text-2) !important;
  border-color: var(--md-line) !important;
  background-color: transparent !important;
}
body .ordersummary .text-dark,
body .ordersummary .font-weight-bold { color: var(--md-text) !important; }
body .ordersummary .total,
body .ordersummary .price-num { color: var(--md-price) !important; }
body .ordersummary .btn-primary { color: #fff !important; }

/* --------------------------------------------------------------------------
   18. 购物车 · 结算页
   -------------------------------------------------------------------------- */
body .cart-login,
body .cart-register,
body .new-user,
body .old-user {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  color: var(--md-text-2) !important;
}
body .cart-login a,
body .cart-register a { color: #7d97ff !important; }
body .goods_info { color: var(--md-text-2) !important; }
body .cart_qty .form-control,
body .cart_qty { color: var(--md-text) !important; }
body .invoice-title { color: var(--md-text) !important; }
body .payDiv { background-color: transparent !important; }
body .payDiv > label,
body .payDiv .payment-checkbox,
body .payDiv .custom-control-label {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius-sm) !important;
  color: var(--md-text-2) !important;
  transition: all .2s ease;
}
body .payDiv .payment-checkbox:hover,
body .payDiv > label:hover { border-color: rgba(91, 124, 250, .5) !important; }
body .payDiv .custom-control-input:checked ~ .custom-control-label,
body .payDiv .active {
  border-color: var(--md-primary) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(79, 140, 255, .14)) !important;
  color: #fff !important;
}
body .remarksInput { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }
body .remarksInput::-webkit-input-placeholder { color: var(--md-text-3) !important; }
body .discount-num,
body .price-num,
body .len-num { color: var(--md-price) !important; }
body .total { color: var(--md-price) !important; }
body .mobile-bottom-total { color: var(--md-text) !important; }
body .submit-btn,
body .completeBtn {
  background-image: var(--md-grad) !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--md-radius-sm) !important;
  box-shadow: var(--md-glow) !important;
}
body .submit-btn:hover,
body .completeBtn:hover { background-image: var(--md-grad-hover) !important; }
body .deleteBtn { color: var(--md-danger) !important; }
body .modal-body .old-user,
body .modal-body .new-user { background-color: transparent !important; }

/* --------------------------------------------------------------------------
   19. 购物车 · 下单完成页
   -------------------------------------------------------------------------- */
body .twitter-bs-wizard .twitter-bs-wizard-nav .nav-link {
  color: var(--md-text-3) !important;
  background-color: transparent !important;
}
body .twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active { color: var(--md-text) !important; }
body .twitter-bs-wizard .step-number {
  border-color: var(--md-line-2) !important;
  color: var(--md-text-3) !important;
  background-color: var(--md-panel-2) !important;
}
body .twitter-bs-wizard .nav-link.active .step-number {
  background-image: var(--md-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}
body .twitter-bs-wizard .progress { background-color: var(--md-line) !important; }
body .twitter-bs-wizard .progress-bar { background-image: var(--md-grad) !important; }
body .display-4 { color: var(--md-success) !important; }
body .text-success { color: var(--md-success) !important; }

/* --------------------------------------------------------------------------
   20. 会员中心 · 用户中心 / 产品 / 工单
   -------------------------------------------------------------------------- */
body .user-center_h300,
body .user-center_calc,
body .user-center_home {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
}
body .user-center_name { color: var(--md-text) !important; }
body .user-center_safety {
  background-image: var(--md-grad) !important;
  color: #fff !important;
}
body .user-center_safety_wrapper,
body .user-center_safety_wrapper a { color: var(--md-text-2) !important; }
body .user-center_product {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius-sm) !important;
  color: var(--md-text-2) !important;
}
body .user-center_product:hover { border-color: rgba(91, 124, 250, .5) !important; color: var(--md-text) !important; }
body .user-center_product i { color: var(--md-primary) !important; }
body .user-center_notice_ul { color: var(--md-text-2) !important; }
body .user-center_notice_item { border-bottom: 1px solid var(--md-line) !important; }
body .notice_item_time { color: var(--md-text-3) !important; }
body .notice_item_title { color: var(--md-text-2) !important; }
body .notice_item_title:hover { color: #7d97ff !important; }
body .no-data { color: var(--md-text-3) !important; }
body #balanceCharts { background-color: transparent !important; }
body .security-item-image { background-color: var(--md-panel-2) !important; border-radius: 12px !important; }
body .security-item { border-color: var(--md-line) !important; }
body .security-item .title { color: var(--md-text) !important; }
body .security-item .des { color: var(--md-text-3) !important; }
body .security-item .status { color: var(--md-success) !important; }

/* 服务详情 / 产品详情 */
body .service-detail,
body .servicedetail { color: var(--md-text) !important; }
body .product-img,
body .service-header { border-radius: var(--md-radius) !important; }
body .ticket-item { background-color: var(--md-panel-2) !important; border-color: var(--md-line) !important; }
body .ticket-item h4 { color: var(--md-text) !important; }
body .ticket-item p { color: var(--md-text-3) !important; }
body .ticket-reply .post-by { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }
body .kb-item { color: var(--md-text-2) !important; }
body .kb-link { color: var(--md-text-2) !important; }
body .kb-item .date { color: var(--md-text-3) !important; }

/* --------------------------------------------------------------------------
   21. Element UI 兜底（云产品配置页等）
   -------------------------------------------------------------------------- */
body .el-card,
body .el-dialog,
body .el-drawer {
  background-color: var(--md-panel) !important;
  border-color: var(--md-line) !important;
  color: var(--md-text) !important;
}
body .el-card__header { border-bottom-color: var(--md-line) !important; color: var(--md-text) !important; }
body .el-card__body { color: var(--md-text-2) !important; }
body .el-dialog__title,
body .el-dialog__body { color: var(--md-text) !important; }
body .el-dialog { border-radius: var(--md-radius) !important; overflow: hidden; }
body .el-input__inner,
body .el-textarea__inner {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}
body .el-input__inner::placeholder { color: var(--md-text-3) !important; }
body .el-input-group__append,
body .el-input-group__prepend {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .el-select-dropdown,
body .el-dropdown-menu {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line) !important;
}
body .el-select-dropdown__item { color: var(--md-text-2) !important; }
body .el-select-dropdown__item.hover,
body .el-select-dropdown__item:hover { background-color: rgba(91, 124, 250, .14) !important; }
body .el-select-dropdown__item.selected { color: #7d97ff !important; }
body .el-popper[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: var(--md-panel-2) !important; }
body .el-form-item__label { color: var(--md-text-2) !important; }
body .el-tabs__item { color: var(--md-text-3) !important; }
body .el-tabs__item.is-active { color: #7d97ff !important; }
body .el-tabs__nav-wrap::after { background-color: var(--md-line) !important; }
body .el-table,
body .el-table th,
body .el-table tr,
body .el-table td {
  background-color: transparent !important;
  border-color: var(--md-line) !important;
  color: var(--md-text-2) !important;
}
body .el-table th { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }
body .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: var(--md-panel-3) !important; }
body .el-table::before { background-color: var(--md-line) !important; }
body .el-table__empty-block { background-color: transparent !important; }
body .el-table__empty-text { color: var(--md-text-3) !important; }
body .el-radio-button__inner {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-image: var(--md-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
body .el-radio__label { color: var(--md-text-2) !important; }
body .el-checkbox__label { color: var(--md-text-2) !important; }
body .el-slider__runway { background-color: var(--md-line) !important; }
body .el-slider__bar { background-color: var(--md-primary) !important; }
body .el-tooltip__popper.is-dark { background-color: var(--md-panel-3) !important; }
body .el-message-box { background-color: var(--md-panel) !important; border-color: var(--md-line) !important; }
body .el-message-box__title, body .el-message-box__content { color: var(--md-text) !important; }
body .el-pagination { color: var(--md-text-2) !important; }
body .el-pagination button { background-color: transparent !important; color: var(--md-text-2) !important; }
body .el-pager li { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; border-radius: 6px; margin: 0 2px; }
body .el-pager li.active { background-image: var(--md-grad) !important; color: #fff !important; }
body .el-loading-mask { background-color: rgba(10, 12, 17, .75) !important; }
body .el-switch__core { background-color: var(--md-line-2) !important; border-color: var(--md-line-2) !important; }
body .el-switch.is-checked .el-switch__core { background-color: var(--md-primary) !important; border-color: var(--md-primary) !important; }

/* --------------------------------------------------------------------------
   22. toastr / sweetalert / 其他第三方
   -------------------------------------------------------------------------- */
body #toast-container > div {
  background-image: none !important;
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text) !important;
  box-shadow: var(--md-shadow) !important;
  opacity: 1 !important;
}
body #toast-container > .toast-success { border-color: rgba(52, 211, 153, .5) !important; }
body #toast-container > .toast-error { border-color: rgba(255, 107, 107, .5) !important; }
body .swal2-popup {
  background-color: var(--md-panel) !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
}
body .swal2-title, body .swal2-content { color: var(--md-text) !important; }
body .swal2-styled.swal2-confirm { background-image: var(--md-grad) !important; background-color: transparent !important; }
body .swal2-styled.swal2-cancel { background-color: var(--md-panel-3) !important; }
body .note-editor.note-frame,
body .note-editor.note-frame .note-editing-area,
body .note-editor.note-frame .note-statusbar {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line) !important;
}
body .note-popover .popover-content,
body .card-header.note-toolbar {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-line) !important;
}
body .note-btn-group .note-btn {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .note-editor .note-editable { background-color: var(--md-panel) !important; color: var(--md-text) !important; }
body .dropzone { background-color: var(--md-panel-2) !important; border-color: var(--md-line-2) !important; }
body .datepicker-container, body .datepicker-panel > ul { background-color: var(--md-panel-2) !important; }
body .datepicker table tr td.day:hover { background-color: var(--md-panel-3) !important; }
body .datepicker-panel > ul > li { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }
body #preloader { background-color: var(--md-bg) !important; }
body .right-bar { background-color: var(--md-panel) !important; border-left: 1px solid var(--md-line) !important; }

/* --------------------------------------------------------------------------
   23. 国旗（Twemoji）保护 —— 必须保证在深色背景下正常显示
   -------------------------------------------------------------------------- */
body img.emoji {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
body .btn-group-toggle label img.emoji,
body .bootstrap-select .dropdown-toggle img.emoji,
body .bootstrap-select .dropdown-menu li a img.emoji {
  height: 20px !important;
  width: 20px !important;
  vertical-align: middle !important;
  margin: 0 4px 0 0 !important;
}

/* --------------------------------------------------------------------------
   24. 页脚
   -------------------------------------------------------------------------- */
body .footer {
  background-color: var(--md-panel) !important;
  border-top: 1px solid var(--md-line) !important;
  color: var(--md-text-3) !important;
}

/* 购物车分类栏补充 */
body .prolist li a,
body .prolist .firstbox .active a,
body .prolist .secondbox .active a { background-color: transparent !important; }
body .prolist .firstbox,
body .prolist .secondbox {
  background-color: transparent !important;
  min-height: 420px !important;
}
body .prolist .secondbox { border-left: 1px solid var(--md-line) !important; }

/* 结算页 · 明细与移动端吸底总价 */
body .goods_info .title { color: #7d97ff !important; }
body .goods_info .title font { color: var(--md-text-3) !important; }
body .goods_info .info { color: var(--md-text-2) !important; }
body .mobile-bottom-total {
  background-color: var(--md-panel) !important;
  border-top: 1px solid var(--md-line) !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .45) !important;
  color: var(--md-text) !important;
}
body .mobile-bottom-total .total { color: var(--md-price) !important; }
body .cart_qty .btn,
body .cart_qty button { background-color: var(--md-panel-2) !important; color: var(--md-text) !important; border-color: var(--md-line-2) !important; }

/* 滑块手柄 */
body input[type="range"]::-webkit-slider-thumb {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-primary) !important;
}
body input[type="range"]::-moz-range-thumb {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-primary) !important;
}
body .selectpicker { color: var(--md-text) !important; }
body .search-icon { color: rgba(255, 255, 255, .7) !important; }
body .normalhide { color: var(--md-text-2) !important; }

/* ==========================================================================
   ▶ v3 新增修复层
   ========================================================================== */

/* --------------------------------------------------------------------------
   25. 全站浅色残留清除  ★ 根因修复
   -------------------------------------------------------------------------- */
/* 25.1 表格外层容器 —— 原先 global.css 里 .table-responsive{background:#fff}
        这一条白底，是「我的产品 / 消息中心 / 系统日志 / 账单 / 合同管理 /
        资源列表」等页面出现白块、文字看不清的**主因**。 */
body .table-responsive {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  padding: 0 !important;
  min-height: 0 !important;          /* 原为 calc(100vh - 650px)，会撑出大片白 */
  /* 注意：不要改 overflow —— 保留 bootstrap 默认的 overflow-x:auto，
     避免裁掉表格行内的下拉菜单 */
}
body .table-container { background: transparent !important; }
body .table-header,
body .table-footer { background-color: transparent !important; }
body .table-header .table-filter,
body .table-footer .table-pageinfo { color: var(--md-text-2) !important; }
body .table-pageinfo { color: var(--md-text-3) !important; }
body .table-responsive tbody tr:hover td { background-color: rgba(91, 124, 250, .075) !important; }
body .table-responsive .no-data,
body .table-responsive .table-empty { background-color: transparent !important; color: var(--md-text-3) !important; }

/* 25.2 其它已知白底容器 */
body .security-item-image { background-color: var(--md-panel-2) !important; }
body .user-center_product_grid .user-center_product { background-color: var(--md-panel-2) !important; }
body .powerimg, body .powerImg { background-color: var(--md-panel-2) !important; }
body .cancelBtn { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }
body .addfunds-payment { background-color: var(--md-panel-2) !important; border-color: var(--md-line) !important; }
body .type-info { color: var(--md-text-2) !important; }
body .type-info li i { color: var(--md-primary) !important; }
body .finish-step, body .finish-step-div { background-color: transparent !important; }

/* 25.3 模板内联白底（写死在 <style> 块里的类） */
body .box {                       /* viewbilling.tpl（账单详情） */
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  color: var(--md-text-2) !important;
}
body .xf-bg { background-color: var(--md-panel-2) !important; }   /* servicedetail 各云产品模板 */
body .api-manage-modal-title { background-color: var(--md-panel-2) !important; }  /* apimanage.tpl */
body .sslStatusOnediv > div:first-child > div { background-color: var(--md-panel-2) !important; }  /* servicedetail/ssl.tpl */
body .sslIncompleteStep > .yuan,
body .sslIncompleteStep .btn-ssl,
body .sslIncompleteStep .btn-ssl-b { background-color: var(--md-panel-2) !important; }
body .amount-box, body .pay-amount, body .pay-body { background-color: transparent !important; color: var(--md-text) !important; }
body .pay-title { color: var(--md-text) !important; }
body .pay-area, body .pay-tools { color: var(--md-text-2) !important; }
body .select-pay {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}
body .pay-text, body .pay-text p { color: var(--md-text-2) !important; }
body .add-html { color: var(--md-text-2) !important; }
body .contract-box, body .contract-content { background-color: var(--md-panel) !important; color: var(--md-text-2) !important; }
body .pdf-box, body .pdf-viewer { background-color: var(--md-panel-2) !important; }

/* 25.4 内联 style 白底兜底 —— 精确匹配以「;」或引号结尾，避免误伤 #fff3e0 等色 */
body [style*="background:#fff;"],
body [style*="background: #fff;"],
body [style*="background-color:#fff;"],
body [style*="background-color: #fff;"],
body [style*="background:#ffffff;"],
body [style*="background: #ffffff;"],
body [style*="background-color:#ffffff;"],
body [style*="background-color: #ffffff;"],
body [style*="background:white;"],
body [style*="background: white;"],
body [style*="background:#FFF;"],
body [style*="background: #FFF;"],
body [style$="background:#fff"],
body [style$="background: #fff"],
body [style*="background:#fff !important"],
body [style*="background: #fff !important"] {
  background: var(--md-panel) !important;
  background-color: var(--md-panel) !important;
}
/* 浅灰底内联兜底 */
body [style*="background:#f8f9fa;"], body [style*="background: #f8f9fa;"],
body [style*="background-color:#f8f9fa;"], body [style*="background-color: #f8f9fa;"],
body [style*="background:#fafafa;"], body [style*="background: #fafafa;"],
body [style*="background:#f5f7fa;"], body [style*="background: #f5f7fa;"],
body [style*="background:#f7f8fa;"], body [style*="background: #f7f8fa;"],
body [style*="background:#f8f8fb;"], body [style*="background: #f8f8fb;"],
body [style*="background:#f0f2f6;"], body [style*="background: #f0f2f6;"],
body [style*="background:#efefef;"], body [style*="background: #efefef;"] {
  background: var(--md-panel-2) !important;
  background-color: var(--md-panel-2) !important;
}
/* 内联深色文字兜底 */
body [style*="color:#333"], body [style*="color: #333"],
body [style*="color:#2d2d2d"], body [style*="color: #2d2d2d"],
body [style*="color:#666"], body [style*="color: #666"],
body [style*="color:#1E2736"], body [style*="color: #1E2736"],
body [style*="color:#171725"], body [style*="color: #171725"],
body [style*="color:#4E5259"], body [style*="color: #4E5259"],
body [style*="color:#757575"], body [style*="color: #757575"],
body [style*="color:#000"], body [style*="color: #000"] {
  color: var(--md-text-2) !important;
}
/* 内联浅色描边兜底 */
body [style*="border:1px solid #E6E7EB"], body [style*="border: 1px solid #E6E7EB"],
body [style*="border:1px solid #e6e7eb"], body [style*="border-color:#E6E7EB"],
body [style*="border-color: #E6E7EB"], body [style*="border:1px solid #eff2f7"],
body [style*="border:1px solid #DCDCDC"], body [style*="border:1px solid #ddd"],
body [style*="border-color:#ddd"] {
  border-color: var(--md-line-2) !important;
}
/* 内联白底 + 纯白描边的小圆点（如头像外圈）保持可见 */
body [style*="background-color: #fff"] { background-color: var(--md-panel-2) !important; }

/* 25.5 深色文字兜底（CSS 类）—— 浅底专用的深灰色，在深底上会「看不见」 */
body .text-gray, body .color-gray, body .gray-600, body .gray-700, body .gray-800, body .gray-900 {
  color: var(--md-text-2) !important;
}
body .text-999, body .text-666, body .text-333 { color: var(--md-text-3) !important; }
body .list-unstyled li { color: var(--md-text-2) !important; }
body dl, body dt, body dd { color: var(--md-text-2); }
body strong, body b { color: inherit; }
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body h1, body h2, body h3, body h4, body h5, body h6 { color: var(--md-text); }
body .font-weight-bold, body .font-weight-bolder { color: inherit; }

/* 空状态 / 加载 / 分割 */
body .empty, body .empty-box, body .no-data-box { color: var(--md-text-3) !important; }
body .divider, body .divider-x { background-color: var(--md-line) !important; }

/* --------------------------------------------------------------------------
   26. v10 购买页（Vue 商品购买 / 配置）深色适配
   -------------------------------------------------------------------------- */
body .buy-serve,
body .up-License,
body .template,
body .main-card { color: var(--md-text-2) !important; }

body .buy-serve .config-tit,
body .up-License .config-tit {
  color: var(--md-text) !important;
}
body .buy-serve .config-tit::before,
body .up-License .config-tit::before { background: var(--md-grad) !important; }

body .buy-serve .cycle .item,
body .up-License .cycle .item {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  border-radius: var(--md-radius-sm) !important;
  color: var(--md-text-2) !important;
}
body .buy-serve .cycle .item .name,
body .up-License .cycle .item .name { color: var(--md-text) !important; }
body .buy-serve .cycle .item .price,
body .up-License .cycle .item .price { color: #7d97ff !important; }
body .buy-serve .cycle .com-active,
body .up-License .cycle .com-active {
  border-color: var(--md-primary) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .20), rgba(79, 140, 255, .12)) !important;
}
body .buy-serve .cycle .com-active::after,
body .up-License .cycle .com-active::after { border-bottom-color: var(--md-primary) !important; }

body .buy-serve .config-item .unit,
body .up-License .config-item .unit { color: var(--md-text-2) !important; }
body .buy-serve .config-item .des,
body .up-License .config-item .des { color: var(--md-text-3) !important; }
body .buy-serve .area-box .tit,
body .up-License .area-box .tit { color: var(--md-text) !important; }
body .buy-serve .area-box .country .item,
body .buy-serve .area-box .city .item,
body .up-License .area-box .country .item,
body .up-License .area-box .city .item {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  border-radius: var(--md-radius-sm) !important;
}
body .buy-serve .area-box .country .item.com-active,
body .buy-serve .area-box .city .item.com-active,
body .up-License .area-box .country .item.com-active,
body .up-License .area-box .city .item.com-active {
  border-color: var(--md-primary) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .20), rgba(79, 140, 255, .12)) !important;
}
body .buy-serve .click-select .item,
body .up-License .click-select .item {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  border-radius: var(--md-radius-sm) !important;
}
body .buy-serve .click-select .item.com-active,
body .up-License .click-select .item.com-active {
  border-color: var(--md-primary) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .20), rgba(79, 140, 255, .12)) !important;
  color: #fff !important;
}

/* 右侧固定订单面板 */
body .buy-serve .order-right,
body .up-License .order-right {
  background-color: var(--md-panel) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius) !important;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .45) !important;
  color: var(--md-text-2) !important;
}
body .buy-serve .order-right .right-title,
body .up-License .order-right .right-title {
  color: var(--md-text) !important;
  border-bottom: 1px solid var(--md-line) !important;
}
body .buy-serve .order-right .subtotal,
body .buy-serve .order-right .right-country-os,
body .buy-serve .order-right .order-right-item,
body .buy-serve .order-right .info,
body .up-License .order-right .subtotal,
body .up-License .order-right .right-country-os,
body .up-License .order-right .order-right-item,
body .up-License .order-right .info { border-color: var(--md-line) !important; }
body .buy-serve .order-right .right-country-os .row,
body .buy-serve .order-right .order-right-item .row,
body .up-License .order-right .right-country-os .row,
body .up-License .order-right .order-right-item .row { color: var(--md-text-3) !important; }
body .buy-serve .order-right .info .des,
body .up-License .order-right .info .des { color: var(--md-text-2) !important; }
body .buy-serve .order-right .order-right-footer .footer-total .left,
body .up-License .order-right .order-right-footer .footer-total .left { color: var(--md-text-2) !important; }
body .buy-serve .order-right .order-right-item .row .del-add .del,
body .up-License .order-right .order-right-item .row .del-add .del {
  background-color: var(--md-panel-2) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important;
}
body .buy-serve .order-right .order-right-footer .footer-code .code-detail .code-detail-item,
body .up-License .order-right .order-right-footer .footer-code .code-detail .code-detail-item { color: var(--md-text-3) !important; }

/* 购买 / 升级按钮 */
body .buy-serve .f-btn .cart,
body .up-License .f-btn .cart {
  color: #7d97ff !important;
  border: 1px solid rgba(91, 124, 250, .55) !important;
  background-color: transparent !important;
}
body .buy-serve .f-btn .buy-btn,
body .up-License .f-btn .buy-btn {
  background-image: var(--md-grad) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--md-glow) !important;
}
body .buy-serve .order-right-footer .buy-btn,
body .up-License .order-right-footer .buy-btn {
  background-image: var(--md-grad) !important;
  border: none !important;
  color: #fff !important;
}

/* 购买弹窗 */
body .buy-dia .buy-title { color: var(--md-text) !important; }
body .buy-dia .price-box {
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-radius-sm) !important;
  background-color: transparent !important;
}
body .buy-dia .price-box .price-item {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  border-radius: var(--md-radius-sm) !important;
  color: var(--md-text-2) !important;
}
body .buy-dia .price-box .actice-pay {
  background: linear-gradient(135deg, rgba(139, 92, 246, .20), rgba(79, 140, 255, .14)) !important;
  border: 1px solid var(--md-primary) !important;
  color: #fff !important;
}
body .buy-dia .dialog-footer .el-button:first-child {
  background-image: var(--md-grad) !important;
  border: none !important;
  color: #fff !important;
}
body .buy-dia .dialog-footer .el-button:last-child {
  background-color: var(--md-panel-3) !important;
  border-color: var(--md-line-2) !important;
  color: var(--md-text) !important;
}

/* --------------------------------------------------------------------------
   27. 立即购买 · 产品介绍拉宽  ★
   -------------------------------------------------------------------------- */
/* 介绍文本原先被压缩在窄列中，读起来很累。这里放开宽度 + 优化行距与配色。 */
body .buy-serve .description,
body .up-License .description {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin-top: 24px !important;
  padding: 22px 26px !important;
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  border-radius: var(--md-radius-sm) !important;
  color: var(--md-text-2) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
/* 让左侧配置区真正铺满（右侧订单面板是 fixed，不占位） */
body .buy-serve,
body .up-License { width: 100% !important; }
body .buy-serve .l-config,
body .up-License .l-config { width: 100% !important; max-width: none !important; }
body .buy-serve .config-item:last-child,
body .up-License .config-item:last-child { margin-bottom: 40px !important; }
/* 给固定右侧面板留出安全边距，避免内容被遮挡 */
body .buy-serve .l-config,
body .up-License .l-config { padding-right: 8px !important; }
@media (min-width: 1400px) {
  body .buy-serve .l-config,
  body .up-License .l-config { padding-right: 24px !important; }
}
/* 若该页处在窄容器/弹窗中，一并放宽 */
body .buy-serve .el-dialog,
body .up-License .el-dialog { width: 960px !important; max-width: 96vw !important; }
body .buy-dia .el-dialog { width: 900px !important; max-width: 96vw !important; }

/* --------------------------------------------------------------------------
   28. 支付方式图标可见性  ★
       网关 Logo（支付宝/微信/Tether/银行转账…）多为带白底的 PNG，
       放在深色卡片上会变成一块突兀的白色；若为白色描边 Logo 又会看不见。
       统一给图标加「白色圆角底座」，两种情形都能清晰显示。
   -------------------------------------------------------------------------- */
body .addfunds-payment {
  background-color: var(--md-panel-2) !important;
  border: 1px solid var(--md-line-2) !important;
  border-radius: var(--md-radius-sm) !important;
  padding: 14px 10px !important;
  transition: all .2s ease !important;
}
body .addfunds-payment img {
  height: 30px !important;
  max-height: 30px !important;
  background-color: #fff !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  box-sizing: content-box !important;
  filter: none !important;
  opacity: 1 !important;
  object-fit: contain !important;
}
body .addfunds-payment:hover { border-color: rgba(91, 124, 250, .5) !important; }
body .addfunds-payment.active {
  border-color: var(--md-primary) !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(79, 140, 255, .12)) !important;
  box-shadow: 0 0 0 1px rgba(91, 124, 250, .35) !important;
}

/* 结算 / 支付弹窗里的同类 Logo */
body .payDiv img,
body .payment-checkbox img,
body .pay-list img,
body .payment-item img,
body .gateway-item img {
  background-color: #fff !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  box-sizing: content-box !important;
  filter: none !important;
  object-fit: contain !important;
}
/* 说明：若某个网关 Logo 本身是「白色描边 / 白色文字」，白底上会看不见，
   可在该 img 上加 class="mono-logo" 后启用下面这行做反色处理：
   body img.mono-logo { filter: invert(1) hue-rotate(180deg) !important; } */

/* --------------------------------------------------------------------------
   29. 整体视觉打磨（布局 / 间距 / 圆角 / 层级 / 数字排版）
   -------------------------------------------------------------------------- */
/* 29.1 页面标题区 */
body .page-title-box {
  padding: 4px 0 14px !important;
  border-bottom: 1px solid var(--md-line) !important;
  margin-bottom: 20px !important;
}
body .page-title-box h4,
body .page-title-box .page-title {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
}
body .page-title-box .breadcrumb { margin-bottom: 0 !important; }

/* 29.2 卡片内边距与标题层级 */
body .card-body { padding: 20px !important; }
body .card > .card-body > .row:first-child { margin-top: 0; }
body .card-title, body .card h5, body .card h4 { letter-spacing: .2px; }

/* 29.3 数字排版：金额/统计用等宽数字，更整齐 */
body .total, body .price, body .price-num, body .discount-num, body .len-num,
body .amount, body .user-center_num, body .stat-num, body .num,
body .table td .text-right, body .ordersummary, body .order-right .right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 29.4 统一控件高度与圆角，视觉更整 */
body .btn { border-radius: 10px !important; transition: all .2s ease; }
body .btn:not(.btn-sm):not(.btn-lg) { min-height: 38px; }
body .btn-sm { border-radius: 8px !important; }
body .form-control, body .custom-select { min-height: 42px; }
body .form-control-sm { min-height: 34px; }
body textarea.form-control { min-height: 96px; }
body .input-group > .form-control { border-radius: var(--md-radius-sm) !important; }

/* 29.5 表格整体观感：去掉竖线依赖，仅保留横向细分隔 */
body .table td, body .table th { border-left: 0 none !important; border-right: 0 none !important; }
body .table thead th:first-child { border-top-left-radius: var(--md-radius-sm) !important; }
body .table thead th:last-child { border-top-right-radius: var(--md-radius-sm) !important; }
body .table tbody tr:last-child td { border-bottom: 0 none !important; }

/* 29.6 表格底部工具条与分页对齐 */
body .table-footer {
  padding: 12px 4px 2px !important;
  font-size: 13px !important;
  color: var(--md-text-3) !important;
}
body .table-footer .table-pageinfo { margin-right: 8px !important; }
body .table-pagination .page-link { line-height: 1.4 !important; }

/* 29.7 侧栏与主内容间隙 */
body .main-content { padding: 18px 20px 26px !important; }
body .footer { padding: 14px 24px !important; font-size: 12.5px !important; }

/* 29.8 卡片之间统一留白 */
body .row > [class*="col-"] > .card + .card { margin-top: 18px !important; }

/* 29.9 链接 / 操作列的小图标按钮 */
body .table a, body .table .btn-link { color: #7d97ff !important; }
body .table a:hover { color: #a9bcff !important; }

/* 29.10 图标统一色调（线框图标在暗色下更清晰） */
body .mdi, body .la, body .fas, body .far, body .fi { opacity: .95; }

/* --------------------------------------------------------------------------
   30. 响应式微调
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body .cartitem { margin-bottom: 14px !important; }
  body .main-content { padding: 14px 14px 22px !important; }
  body .buy-serve .order-right,
  body .up-License .order-right { position: static !important; width: 100% !important; margin-top: 20px !important; }
}
@media (max-width: 575.98px) {
  body .prolist li a { padding: 8px 10px !important; font-size: 12px; }
  body .cartitem .card-body { padding: 14px !important; }
  body .card-body { padding: 16px !important; }
  body .page-title-box h4 { font-size: 17px !important; }
  body .buy-serve .description,
  body .up-License .description { padding: 16px 18px !important; font-size: 13px !important; }
}

/* ==========================================================================
   31. 科幻视觉层  SCI-FI VISUAL LAYER  ★ 本轮重做：把"换色"升级为"未来感设计"
   --------------------------------------------------------------------------
   设计语言：极光深空底色 + 玻璃拟态面板 + 霓虹辉光 + HUD 角标 + 悬浮微交互。
   全部仍为纯 CSS，不动任何 DOM 结构 / id / name / action / Smarty / Vue / JS 逻辑。
   与 §1–29 的关系：§1–29 负责"功能零改动下的可读性兜底"，本层在其之上做视觉升级；
   因本层位于文件末尾且同样使用 body 前缀 + !important，对同名属性以本层为准。
   ========================================================================== */

/* 31.1 极空背景：极光辉光层 + 网格层（固定全屏，置于内容之下） */
html { background-color: #05070d; }

body {
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
}

/* 极光辉光（缓慢漂移，营造深空感） */
body::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 48% at 16% 10%,  rgba(34, 211, 238, .22), transparent 60%),
    radial-gradient(44% 54% at 86% 6%,   rgba(99, 102, 241, .24), transparent 62%),
    radial-gradient(50% 60% at 78% 92%,   rgba(168, 85, 247, .20), transparent 60%),
    radial-gradient(46% 52% at 8%  96%,   rgba(56, 130, 246, .18), transparent 60%),
    radial-gradient(60% 70% at 50% 50%,   rgba(13, 18, 30, .55),   transparent 70%);
  filter: saturate(125%);
  animation: mdAurora 28s ease-in-out infinite alternate;
}
/* 科技网格 + 暗角 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 160, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 38%, #000 38%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 82% at 50% 38%, #000 38%, transparent 100%);
}
@keyframes mdAurora {
  0%   { transform: translate3d(0, 0, 0)      scale(1);    }
  50%  { transform: translate3d(2%, -2%, 0)  scale(1.07); }
  100% { transform: translate3d(-2%, 2%, 0)   scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* 31.2 玻璃拟态面板 + HUD 角标 + 悬浮微交互 */
body .main-content,
body .page-content,
body .container-fluid { background: transparent !important; }

body .card,
body .card-body {
  background: linear-gradient(160deg, rgba(22, 30, 48, .74), rgba(9, 13, 21, .66)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(120, 160, 255, .16) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  position: relative;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
}
/* HUD 角标：左上霓虹青 / 右下霓虹紫 */
body .card::before,
body .card-body::before {
  content: "";
  position: absolute;
  top: 9px; left: 9px;
  width: 16px; height: 16px;
  border-top: 2px solid rgba(34, 211, 238, .75);
  border-left: 2px solid rgba(34, 211, 238, .75);
  border-top-left-radius: 6px;
  pointer-events: none;
}
body .card::after,
body .card-body::after {
  content: "";
  position: absolute;
  bottom: 9px; right: 9px;
  width: 16px; height: 16px;
  border-bottom: 2px solid rgba(168, 85, 247, .75);
  border-right: 2px solid rgba(168, 85, 247, .75);
  border-bottom-right-radius: 6px;
  pointer-events: none;
}
body .card:hover,
body .card-body:hover {
  transform: translateY(-4px);
  border-color: rgba(120, 180, 255, .45) !important;
  box-shadow: 0 16px 46px rgba(34, 120, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

/* 其它已知白底容器一并玻璃化（保持 §25 可读性兜底，同时统一质感） */
body .box,
body .xf-bg,
body .api-manage-modal-title,
body .payDiv,
body .contract-item,
body .ssl-item,
body .powerimg, body .powerImg,
body .user-center_product_grid .user-center_product,
body .addfunds-payment {
  background: linear-gradient(160deg, rgba(22, 30, 48, .74), rgba(9, 13, 21, .66)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(120, 160, 255, .16) !important;
  border-radius: 14px !important;
}

/* 31.3 顶栏 / 侧栏 玻璃 + 霓虹描边 */
/* 注意：必须保持 #page-topbar 的 position:fixed（app.css 原值），
   改为 relative 会使其进入普通流、把下方内容整体顶下去。::after 用绝对定位即可。 */
body #page-topbar {
  background: rgba(8, 11, 18, .72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent !important;
  z-index: 1002;
}
body .navbar-header {
  background: transparent !important;
  position: relative;
}
body #page-topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.85), rgba(168,85,247,.85), transparent);
  box-shadow: 0 0 12px rgba(34, 211, 238, .55);
}
body .vertical-menu {
  background: rgba(8, 11, 18, .62) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-right: 1px solid rgba(120, 160, 255, .12) !important;
}
/* 侧栏菜单项 */
body #side-menu > li > a,
body #sidebar-menu .metismenu > li > a {
  color: #aebbd6 !important;
  border-radius: 10px !important;
  position: relative;
  transition: all .2s ease;
}
body #side-menu > li > a:hover {
  background: rgba(34, 211, 238, .10) !important;
  color: #e6f6ff !important;
}
body #side-menu > li.mm-active > a,
body #side-menu > li.active > a,
body #side-menu .mm-active > a {
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(99,102,241,.06)) !important;
  color: #e6f6ff !important;
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25);
}
body #side-menu > li.mm-active > a::before,
body #side-menu .mm-active > a::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #22d3ee, #a855f7);
  box-shadow: 0 0 10px rgba(34, 211, 238, .85);
}
body #side-menu a i { transition: all .2s ease; }
body #side-menu a:hover i,
body #side-menu .mm-active > a i { color: #5eead4 !important; text-shadow: 0 0 8px rgba(34, 211, 238, .6); }

/* 31.4 霓虹按钮（主操作青→紫渐变 + 辉光） */
body .btn-primary {
  background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
  border: none !important;
  color: #03121a !important; font-weight: 600;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(34, 120, 255, .35) !important;
  transition: all .2s ease;
}
body .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(34, 211, 238, .55) !important;
  filter: brightness(1.08);
}
body .btn-default,
body .btn-light {
  background: rgba(20, 28, 44, .6) !important;
  border: 1px solid rgba(120, 160, 255, .28) !important;
  color: #cfe0ff !important;
  border-radius: 10px !important;
  transition: all .2s ease;
}
body .btn-default:hover,
body .btn-light:hover {
  border-color: rgba(34, 211, 238, .6) !important;
  color: #e6f6ff !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, .25);
}
body .btn-success { background: linear-gradient(135deg, #22d3ee, #2dd4bf) !important; border: none !important; color: #03121a !important; border-radius: 10px !important; }
body .btn-info    { background: linear-gradient(135deg, #38bdf8, #6366f1) !important; border: none !important; color: #03121a !important; border-radius: 10px !important; }

/* 31.5 标题霓虹 */
body .card-title {
  background: linear-gradient(90deg, #e6f6ff, #7dd3fc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
  font-weight: 600;
}
body h1, body h2, body h3, body h4, body h5, body h6 { color: #eaf2ff !important; }
body .page-title-box h4 { text-shadow: 0 0 18px rgba(34, 211, 238, .18); }

/* 31.6 表格霓虹 */
body .table thead th {
  border-bottom: 1px solid rgba(120, 160, 255, .28) !important;
  color: #9fb6e0 !important;
  text-transform: uppercase; letter-spacing: .04em; font-size: 12px;
}
body .table td { border-top: 1px solid rgba(120, 160, 255, .08) !important; }
body .table tbody tr { transition: background .15s ease; }
body .table tbody tr:hover td { background: rgba(34, 211, 238, .07) !important; }

/* 31.7 v10 购买页：右侧固定订单面板玻璃 + 霓虹 */
body .buy-serve,
body .up-License { background: transparent !important; }
body .order-right {
  background: linear-gradient(160deg, rgba(22, 30, 48, .82), rgba(9, 13, 21, .74)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(120, 160, 255, .18) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .42);
  border-radius: 16px !important;
}

/* 31.8 头像白圈 → 霓虹环（clientarea.tpl 内联白底圆） */
body .user-center_h300 div[style*="background-color: #fff"] {
  background: linear-gradient(135deg, #22d3ee, #a855f7) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, .5);
  padding: 3px !important;
}
/* 头部用户头像（header.tpl 内联小圆） */
body #page-header-user-dropdown .user-center_header {
  background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
  color: #03121a !important; font-weight: 700;
  box-shadow: 0 0 10px rgba(34, 211, 238, .4);
}

/* 31.9 徽章 / 胶囊霓虹描边 */
body .badge-primary, body .badge-info, body .badge-success {
  box-shadow: 0 0 10px rgba(34, 211, 238, .35);
}

/* 31.10 表单控件：聚焦霓虹辉光 */
body .form-control:focus,
body .select2-container--open .select2-selection,
body .bootstrap-select .dropdown-toggle:focus {
  border-color: rgba(34, 211, 238, .6) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18) !important;
}

/* ==========================================================================
   32. 布局颠覆层 · 指挥舱导航  COMMAND DECK NAV  ★ 左侧栏 → 顶部导航
   --------------------------------------------------------------------------
   思路：不新增 / 不删除任何 DOM，纯用 CSS 把「左侧竖向菜单」整体搬运为「顶部横向
        导航条」。菜单项仍由后台数据循环生成（顺序 / 文字 / 链接 / 调用页面一律不
        受影响），交互仍由原 metisMenu + app.js 驱动 —— 功能零改动，只换位置与外形。
   作用域：不依赖 CSS :has()（兼容 360 / QQ / 搜狗等「双核」浏览器与旧内核）。
        `.vertical-menu` 只出现在「有顶栏的登录态布局」里（登录 / 注册 / 找回密码等页面
        的 header.tpl 用 {if} 直接跳过了整个布局），因此直接命中 `.vertical-menu` 等即可，
        不会误伤登录页。
   展开逻辑：子菜单在「鼠标悬停 / 键盘聚焦 / metisMenu 展开(.mm-show)」时显示，
        既保证桌面 hover 体验，也保证触屏与键盘可点开。
   ========================================================================== */
@media (min-width: 992px) {

  /* 32.1 侧栏 → 顶部粘性导航条（置于顶栏之下，随页面滚动吸顶） */
  body .vertical-menu {
    position: sticky !important;
    top: 70px !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; height: auto !important;
    min-height: 0 !important; max-height: none !important;
    margin-top: 70px !important;
    z-index: 1001 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(120, 160, 255, .14) !important;
    background: rgba(8, 11, 18, .82) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .40) !important;
  }
  /* 把 SimpleBar 的所有包裹层"打平"（display:contents 不产生盒子），
     彻底消除其撑出的多余高度与裁剪；若个别旧浏览器不支持，用 height/overflow 兜底。 */
  body .vertical-menu .h-100,
  body .vertical-menu [data-simplebar],
  body .vertical-menu .simplebar-wrapper,
  body .vertical-menu .simplebar-mask,
  body .vertical-menu .simplebar-offset,
  body .vertical-menu .simplebar-content-wrapper,
  body .vertical-menu .simplebar-content {
    display: contents !important;
    position: static !important; inset: auto !important;
    width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
  }
  body .vertical-menu .simplebar-height-auto-observer-wrapper,
  body .vertical-menu .simplebar-height-auto-observer,
  body .vertical-menu .simplebar-track,
  body .vertical-menu .simplebar-scrollbar { display: none !important; }

  /* 32.2 菜单横排 */
  body #sidebar-menu,
  body #sidebar-menu.menu-js { height: auto !important; overflow: visible !important; padding: 0 !important; }
  body #side-menu {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: center !important; gap: 2px !important;
    padding: 7px 16px !important; margin: 0 !important;
  }
  /* 关键：顶级 li 必须收缩为「内容宽度」，否则继承 width:100% 会一行一个（竖向） */
  body #side-menu > li {
    position: relative !important; white-space: nowrap !important;
    width: auto !important; flex: 0 0 auto !important;
    margin: 0 !important; border: 0 !important; float: none !important;
  }
  body #side-menu > li > a {
    display: flex !important; align-items: center !important; gap: 8px !important;
    width: auto !important;
    padding: 9px 14px !important; min-height: 0 !important; height: auto !important;
    border-radius: 10px !important; color: #aebbd6 !important;
    transition: all .2s ease !important;
  }
  body #side-menu > li > a span { display: inline !important; padding-left: 0 !important; }
  /* 顶部模式：清掉 §31 的左侧竖条 */
  body #side-menu > li.mm-active > a::before,
  body #side-menu .mm-active > a::before { display: none !important; }
  body #side-menu > li > a:hover {
    background: rgba(34, 211, 238, .10) !important; color: #e6f6ff !important;
  }
  /* 激活项：底部霓虹线 + 微渐变 */
  body #side-menu > li.mm-active > a {
    background: linear-gradient(180deg, rgba(34,211,238,.16), rgba(99,102,241,.05)) !important;
    color: #e6f6ff !important; box-shadow: none !important;
  }
  body #side-menu > li > a::after { content: none !important; }
  body #side-menu > li.mm-active > a::after {
    content: "" !important; position: absolute !important;
    left: 10px !important; right: 10px !important; bottom: 2px !important;
    height: 2px !important; border-radius: 2px !important;
    background: linear-gradient(90deg, #22d3ee, #a855f7) !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, .85) !important;
  }
  /* 下拉箭头：统一为霓虹小三角（顶层） */
  body #side-menu > li > a.has-arrow::before {
    content: "" !important; width: 6px !important; height: 6px !important;
    border-right: 1.6px solid currentColor !important; border-bottom: 1.6px solid currentColor !important;
    transform: rotate(45deg) translateY(-2px) !important; margin-left: 3px !important; opacity: .7;
  }
  body #side-menu > li > a.has-arrow { padding-right: 12px !important; }

  /* 32.3 顶级下拉子菜单 */
  body #side-menu > li > ul.sub-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important; left: 0 !important;
    min-width: 214px !important; width: auto !important;
    height: auto !important; max-height: none !important;
    display: block !important; overflow: visible !important;
    padding: 8px !important; margin: 0 !important;
    background: rgba(12, 17, 28, .97) !important;
    border: 1px solid rgba(120, 160, 255, .20) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .55) !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateY(8px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s !important;
    z-index: 1200 !important;
  }
  /* 仅「鼠标悬停」展开：去掉 :focus-within 与 .mm-show（点一下会残留展开、移开不收起） */
  body #side-menu > li:hover > ul.sub-menu {
    opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
  }
  body #side-menu > li > ul.sub-menu > li { position: relative !important; }
  body #side-menu > li > ul.sub-menu > li > a {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 9px 12px !important; border-radius: 8px !important;
    color: #aebbd6 !important; width: auto !important;
  }
  body #side-menu > li > ul.sub-menu > li > a:hover,
  body #side-menu > li > ul.sub-menu > li.mm-active > a {
    background: rgba(34, 211, 238, .12) !important; color: #e6f6ff !important;
  }
  /* 三级菜单：自右侧飞出 */
  body #side-menu ul.sub-menu ul {
    position: absolute !important;
    top: -8px !important; left: calc(100% + 8px) !important;
    min-width: 200px !important; width: auto !important;
    height: auto !important; max-height: none !important;
    display: block !important; overflow: visible !important;
    padding: 8px !important; margin: 0 !important;
    background: rgba(12, 17, 28, .97) !important;
    border: 1px solid rgba(120, 160, 255, .20) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .55) !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateX(8px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s !important;
    z-index: 1201 !important;
  }
  /* 三级菜单：同样「仅悬停」展开 */
  body #side-menu ul.sub-menu li:hover > ul {
    opacity: 1 !important; visibility: visible !important; transform: translateX(0) !important;
  }
  body #side-menu ul.sub-menu ul li > a {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 9px 12px !important; border-radius: 8px !important; color: #aebbd6 !important; width: auto !important;
  }
  body #side-menu ul.sub-menu ul li > a:hover,
  body #side-menu ul.sub-menu ul li.mm-active > a {
    background: rgba(34, 211, 238, .12) !important; color: #e6f6ff !important;
  }

  /* 32.4 主内容全宽（原为 margin-left:250px 给侧栏让位） */
  body .main-content { margin-left: 0 !important; }
  body .page-content { padding-top: 26px !important; }
  body .footer { left: 0 !important; }

  /* 32.5 中立化「侧栏折叠」态（顶栏模式无侧栏可折）*/
  body.vertical-collpsed .vertical-menu { width: 100% !important; top: 70px !important; height: auto !important; }
  body.vertical-collpsed .main-content { margin-left: 0 !important; }
  body.vertical-collpsed .footer { left: 0 !important; }
  body.vertical-collpsed .navbar-brand-box { width: auto !important; }
  /* 桌面无需汉堡（顶栏模式没有可折叠的侧栏）*/
  body #vertical-menu-btn { display: none !important; }
}

/* ==========================================================================
   33. 页面级修复 v6（按用户截图逐页修）
   -------------------------------------------------------------------------- */

/* 33.1 产品列表（cart / product.tpl）—— 「4 列产品」，介绍文字冲出卡片 ★
   根因：卡片内层是 `<div class="card-body row">`，bootstrap 的 .row 自带
        margin-left/right:-15px 负外边距，窄卡里会把文字顶出卡片；长英文/无空格串也不换行。 */
body .card.cartitem { overflow: hidden !important; }
/* card-body 被写成了 class="card-body row" → 变成 flex 行，把 h5 和正文挤成并排窄列；
   直接改回块级流动，让正文按卡片宽度正常换行。 */
body .card.cartitem .card-body.row {
  display: block !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
body .card.cartitem .card-body.row > .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
body .card.cartitem .card-body.row > h5 { width: auto !important; }
body .card.cartitem .card-text {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  color: var(--md-text-2) !important;
  margin-bottom: 8px !important;
}
body .card.cartitem .card-text + .card-text { color: var(--md-text-3) !important; }
/* 产品卡底部「立即购买」条：统一深色 + 霓虹，不再用蓝阴影 */
body .card.cartitem .card-footer {
  background-color: rgba(91, 124, 250, .10) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--md-line) !important;
}
body .card.cartitem .card-footer a {
  display: block !important; padding: 12px 0 !important;
  color: #9fb8ff !important; font-weight: 600 !important; text-decoration: none !important;
}
body .card.cartitem .card-footer a:hover { color: #fff !important; background: var(--md-grad) !important; }

/* 33.2 帮助中心（knowledgebase.tpl）—— 列表仍是白底 ★
   bootstrap 的 .list-group-item 默认 background:#fff。 */
body .list-group-item {
  background-color: transparent !important;
  border-color: var(--md-line) !important;
  color: var(--md-text-2) !important;
}
body .list-group-item.text-muted,
body .list-group-item .text-muted { color: var(--md-text-3) !important; }
body a.list-group-item:hover,
body a.list-group-item:focus,
body .list-group-item-action:hover,
body .list-group-item-action:focus {
  background-color: rgba(91, 124, 250, .10) !important;
  color: var(--md-text) !important;
}
body .kb-item, body .kb-link { color: var(--md-text-2) !important; }
body .kb-item .date { color: var(--md-text-3) !important; }

/* 33.3 安全中心（security.tpl）—— 标题/说明是黑色，看不见 ★
   global.css 里 .security-item-title{color:#000}；此前误写成 .security-item .title（不存在）。 */
body .security-item-title,
body .security-item .title { color: var(--md-text) !important; }
body .security-item-title small,
body .security-item .title small { color: var(--md-text-3) !important; }
body .security-item-desc,
body .security-item .des { color: var(--md-text-3) !important; }

/* 33.4 v10 配置页 —— 去掉选项胶囊的底色（改为描边，不再铺色）★ */
body .buy-serve .cycle .item,
body .up-License .cycle .item,
body .buy-serve .config-way .item,
body .buy-serve .area-box .country .item,
body .buy-serve .area-box .city .item,
body .up-License .area-box .country .item,
body .up-License .area-box .city .item,
body .buy-serve .click-select .item,
body .up-License .click-select .item {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  box-shadow: none !important;
}
/* 选中态：只做边框高亮 + 微光，不铺底色 */
body .buy-serve .cycle .com-active,
body .up-License .cycle .com-active,
body .buy-serve .area-box .country .item.com-active,
body .buy-serve .area-box .city .item.com-active,
body .up-License .area-box .country .item.com-active,
body .up-License .area-box .city .item.com-active,
body .buy-serve .click-select .item.com-active,
body .up-License .click-select .item.com-active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--md-primary) !important;
  color: var(--md-text) !important;
  box-shadow: inset 0 0 0 1px rgba(91,124,250,.6), 0 0 12px rgba(91,124,250,.22) !important;
}
body .buy-serve .com-active::after,
body .up-License .com-active::after { border-bottom-color: var(--md-primary) !important; }
/* Element UI 单选/复选按钮同样去底色 */
body .buy-serve .el-radio-button__inner,
body .up-License .el-radio-button__inner {
  background: transparent !important; border-color: var(--md-line-2) !important;
  color: var(--md-text-2) !important; box-shadow: none !important;
}
body .buy-serve .el-radio-button__orig-radio:checked + .el-radio-button__inner,
body .up-License .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: transparent !important; border-color: var(--md-primary) !important;
  color: var(--md-text) !important; box-shadow: none !important;
}

/* 33.5 v10 订单面板 —— 「加入购物车」按钮压住金额 ★ */
body .buy-serve .order-right .order-right-footer,
body .up-License .order-right .order-right-footer { display: flex !important; flex-direction: column !important; }
body .buy-serve .order-right .order-right-footer .footer-total,
body .up-License .order-right .order-right-footer .footer-total {
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important;
  justify-content: space-between !important; gap: 6px 12px !important; margin-bottom: 16px !important;
}
body .buy-serve .order-right .order-right-footer .footer-total .right,
body .up-License .order-right .order-right-footer .footer-total .right { margin-left: auto !important; }
body .buy-serve .f-btn,
body .up-License .f-btn { display: flex !important; gap: 12px !important; margin-top: 16px !important; }
body .buy-serve .f-btn .el-button,
body .up-License .f-btn .el-button { width: auto !important; flex: 1 1 0 !important; height: 44px !important; padding: 0 16px !important; }
body .buy-serve .order-right .buy-btn,
body .up-License .order-right .buy-btn { width: 100% !important; margin-top: 12px !important; }

/* 33.6 通用：页面内长文本一律换行，杜绝横向溢出 */
body .page-content, body .container-fluid { overflow-x: hidden !important; }
body .description { overflow-wrap: anywhere !important; word-break: break-word !important; max-width: 100% !important; }

/* ==========================================================================
   34. 页面级修复 v7（购物车介绍白底 / 配置选项彩色按钮 / 菜单下拉）
   ========================================================================== */

/* 34.1 购物车「产品介绍」是富文本，里面写死了内联 background:#ffffff 等浅色块 ★
       这些内联样式必须用属性选择器兜底，普通类选择器压不住。 */
body .page-content [style*="background:"][style*="#fff"],
body .page-content [style*="background-color:"][style*="#fff"],
body .page-content [style*="background:"][style*="#FFF"],
body .page-content [style*="background:"][style*="#FFF7F3"],
body .page-content [style*="background:"][style*="#F7F8FA"] {
  background: var(--md-panel-2) !important;
  background-image: none !important;
  color: var(--md-text-2) !important;
}
/* 内联浅色描边（#ffccb3 / #eaeaea / #F0F0F0 / #E6E7EB）在深色下太扎眼 → 压暗 */
body .page-content [style*="#ffccb3"],
body .page-content [style*="#eaeaea"],
body .page-content [style*="#F0F0F0"],
body .page-content [style*="#E6E7EB"] { border-color: var(--md-line-2) !important; }
/* 内联深色字（原本配白底用的）→ 提亮 */
body .page-content [style*="color:#333"],
body .page-content [style*="color: #333"],
body .page-content [style*="color:#222"],
body .page-content [style*="color:#000"],
body .page-content [style*="color: #000"],
body .page-content [style*="color:#555"],
body .page-content [style*="color: #555"],
body .page-content [style*="color:#666"],
body .page-content [style*="color: #666"] { color: var(--md-text-2) !important; }

/* 34.2 产品配置页 —— 选项小按钮（<label class="btn btn-primary btn-sm">）改「透明 + 只留一个框」★
       之前被 .btn-primary 的紫蓝渐变铺了底色，挡住文字和国旗。 */
body .configoption_form label.btn,
body .configoption_form label.btn-primary,
body .configoption_form .btn-group-toggle .btn,
body .configoption_form .btn-group-toggle label,
body label.btn.btn-primary {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* 选中态：只把框变霓虹色，不铺底色 */
body .configoption_form label.btn.active,
body .configoption_form label.btn-primary.active,
body .configoption_form .btn-group-toggle label.active,
body label.btn.btn-primary.active {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--md-primary) !important;
  color: var(--md-text) !important;
  box-shadow: inset 0 0 0 1px rgba(91,124,250,.75), 0 0 12px rgba(91,124,250,.25) !important;
}
/* 周期组 / btn-custom 组：同样去底色只留框 */
body .btn-custom-group .btn,
body .btn-group-toggle.cycle .btn,
body .btn-custom {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--md-line-2) !important;
  color: var(--md-text-2) !important;
  box-shadow: none !important;
}
body .btn-custom-group .active,
body .btn-group-toggle.cycle .active {
  background-color: transparent !important;
  color: var(--md-text) !important;
  border-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(91,124,250,.75) !important;
}

/* ==========================================================================
   36. 页面级修复 v8（购物车分类条白底 / 订单汇总按钮挡住金额）
   ========================================================================== */

/* 36.1 购物车顶部分类条（cart/topbar.css 的 .firstgroup_box / .secondgroup_box）★
       该 CSS 在 <body> 里后加载，且写死 background:#fff；用更强的选择器 + !important 压过。
       其中「跨境加速」等是 <a class="text-white">，白字配白底看不见 → 这里统一改浅色。 */
body .firstgroup_box,
body .secondgroup_box {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--md-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
body .firstgroup_box_prov,
body .secondgroup_box_area { color: var(--md-text-3) !important; }
body .firstgroup_item,
body .secondgroup_item,
body .pro_box .pro_item {
  background-color: transparent !important;
  border: 1px solid var(--md-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
body .firstgroup_box a, body .secondgroup_box a, body .pro_box a,
body .firstgroup_box .firstgroup_item, body .secondgroup_box .secondgroup_item, body .pro_box .pro_item {
  color: var(--md-text-2) !important;
}
body .firstgroup_item.active, body .firstgroup_item:hover,
body .secondgroup_item.active, body .secondgroup_item:hover,
body .pro_box .pro_item.active, body .pro_box .pro_item:hover {
  background-color: transparent !important;
  border-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(91,124,250,.6) !important;
}
body .firstgroup_item.active a, body .secondgroup_item.active a, body .pro_box .pro_item.active a,
body .firstgroup_item:hover a, body .secondgroup_item:hover a, body .pro_box .pro_item:hover a {
  color: var(--md-text) !important;
}

/* 36.2 订单汇总「加入购物车」按钮原为 position:absolute;bottom:20px;right:20px，会压住金额。
       已在 ordersummary.tpl 改成常规流；此处再做一层 CSS 兜底（万一模板没更新）。 */
body div[style*="position: absolute"][style*="bottom: 20px"][style*="right: 20px"] {
  position: static !important;
  text-align: right !important;
  margin-top: 16px !important;
}
body #addToCartBtn, body #addToCartBtnTwo { margin-top: 6px !important; }

/* ==========================================================================
   37. 页面级修复 v9（分类标签 / 帮助中心内页文字 / 工单状态徽章 / 页脚固定）
   ========================================================================== */

/* 37.1 购物车分类条的左侧标签（跨境专区 / 跨境分类）——
       早前 §15 给它铺了紫蓝渐变底 + 白字，§36 只改了字色 → 变成"紫底 + 暗字"看不见。
       这里把底色一并去掉，标签改浅色文字。 */
body .firstgroup_box_prov,
body .secondgroup_box_area {
  background: transparent !important;
  background-image: none !important;
  color: var(--md-text) !important;
  border-radius: 8px !important;
}

/* 37.2 帮助中心 / 知识库内页（knowledgebaseview.tpl）—— 正文与所有文字颜色
       正文在 <pre class="newscontent"> 里、外层是 .text-muted，深色下几乎看不见。 */
body .newscontent,
body .newscontent * { color: var(--md-text-2) !important; }
body .newscontent { background: transparent !important; white-space: pre-wrap !important; word-break: break-word !important; }
body .text-muted { color: var(--md-text-3) !important; }
body .badge-light { background-color: var(--md-panel-2) !important; color: var(--md-text-2) !important; }

/* 37.3 工单状态徽章（.badge 带内联 status.color）—— 浅色状态底 + 白字看不见。
       用内阴影把底色统一压深一点，保留色相、保证白字可读。 */
body .badge {
  color: #fff !important;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .28) !important;
}

/* 37.4 页脚（带公司名称）固定到视口底部，所有页面都能看到 */
body .footer {
  position: fixed !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 1000 !important;
  height: auto !important;
  background: rgba(8, 11, 18, .86) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--md-line) !important;
  color: var(--md-text-3) !important;
}
/* 给内容留出页脚高度，避免被固定页脚盖住 */
body .main-content { padding-bottom: 78px !important; }

/* ==========================================================================
   39. 商品「介绍」富文本块 —— 作者用「浅底 + 深字」设计，标题被主题白字盖掉
   实测：介绍外层背景是浅色 #f8fbff，而 body h1..h6{color:#eaf2ff!important}
        把 <h3 style="color:#1e3c72"> 强制成了白色 → 白字浅底，看不见。
   这里把「介绍块内的标题」还原为深色，并让块内文字默认深色（作者自己的内联色仍在）。
   ========================================================================== */
body .card-text h1, body .card-text h2, body .card-text h3, body .card-text h4, body .card-text h5, body .card-text h6,
body .card-text + div h1, body .card-text + div h2, body .card-text + div h3, body .card-text + div h4,
body .card-text + div h5, body .card-text + div h6,
body .description h1, body .description h2, body .description h3, body .description h4, body .description h5, body .description h6,
body .newscontent h1, body .newscontent h2, body .newscontent h3, body .newscontent h4,
body [style*="#f8fbff"] h1, body [style*="#f8fbff"] h2, body [style*="#f8fbff"] h3,
body [style*="#f8fbff"] h4, body [style*="#f8fbff"] h5, body [style*="#f8fbff"] h6 {
  color: #1e3c72 !important;
}
body [style*="#f8fbff"],
body .card-text + div[style*="#f8fbff"] { color: #33405a !important; }

/* ==========================================================================
   41. 支付弹窗二维码：加「白底圆角框」+ 略微缩小（QR 必须白底才清晰可扫）
   二维码尺寸在 includes/pay.tpl 里由 qrcode({width,height}) 生成，已由 200 → 168。
   ========================================================================== */
body #canvas:not(:empty) {
  display: inline-block !important;
  line-height: 0 !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(120, 160, 255, .40) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .07), 0 10px 26px rgba(0, 0, 0, .40) !important;
}
body #canvas canvas, body #canvas img, body #canvas table {
  display: block !important; border-radius: 8px !important;
}
/* 二维码区域上下留白更舒服 */
body .modal .pay-area { margin-top: 14px !important; margin-bottom: 38px !important; }

/* ==========================================================================
   42. 手机版页面级修复（购物车 / 订单汇总「框小了、显示不全」）
   --------------------------------------------------------------------------
   问题（用户手机截图实测）：
     A. 购物车顶部分类胶囊文字被横向裁掉（框小、显示不全）
     B. 订单汇总表格比容器宽 → .table-responsive 内部横向滚动 → 金额列被推出可视区
     C. 吸底「合计 + 加入购物车」条宽度只有卡片宽、按钮被裁（不是整屏吸底）
   ========================================================================== */

/* --------------------------------------------------------------------------
   42.0 ★关键★ 去掉 .card / .card-body 上的 backdrop-filter
   --------------------------------------------------------------------------
   根因（headless Chrome 实测祖先链）：
     .mobile-bottom-total{position:fixed} 的最近"包含块祖先"被算成了 <div class="card-body">，
     因为 backdrop-filter 会为 fixed 后代建立包含块。
     → 吸底条 width:100% 只等于"卡片宽度"（实测 310px 而不是视口 390px），
       且被 .table-responsive 裁切 → 「合计」被挤、右侧「加入购物车」按钮缺一块。
   玻璃质感实际由「半透明渐变 + 1px 浅描边 + 大阴影」承担；
   卡片背后的底色本身是平滑极光渐变，模糊与否肉眼几乎无差别（已对比截图确认）。
   注意：仅在"容器"上移除；.footer / #page-topbar / .vertical-menu 等自身即 fixed 的元素保留模糊。
   -------------------------------------------------------------------------- */
body .card,
body .card-body,
body .box,
body .xf-bg,
body .api-manage-modal-title,
body .payDiv,
body .contract-item,
body .ssl-item,
body .powerimg, body .powerImg,
body .user-center_product_grid .user-center_product,
body .addfunds-payment {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* --------------------------------------------------------------------------
   42.1 吸底「合计 + 加入购物车」条 —— 变成真正的整屏吸底 flex 行
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body .mobile-bottom-total {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 58px !important;
    line-height: 1.4 !important;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    text-align: right !important;
    box-sizing: border-box !important;
  }
  body .mobile-bottom-total .total {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body .mobile-bottom-total .btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}
/* 出现吸底购买条时，隐藏固定页脚，避免两条吸底条叠加（class 由 ordersummary.tpl 的脚本添加） */
body.md-has-buybar .footer { display: none !important; }

/* 订购项的值用内联 word-break:break-all 写死，会把 "5Mbps" 拆成 "5Mbp / s"。
   改为 overflow-wrap:anywhere —— 仍能断超长串，但优先在正常词边界断开。 */
body .ordersummary td span[style*="break-all"],
body .ordersummary td [style*="word-break"] {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* --------------------------------------------------------------------------
   42.2 购物车顶部分类胶囊 —— 手机版改为「标签一行 + 胶囊纵向整行」
   --------------------------------------------------------------------------
   topbar.css 原文：.firstgroup_box a{min-width:120px;white-space:nowrap;overflow:hidden;
   display:flex;justify-content:center} + topbar-categories.tpl 里 @media(max-width:576px)
   {.firstgroup_item{min-width:auto!important;width:50%;padding:0}}
   → 胶囊被压到 ~120px 且"居中 + overflow:hidden"，两端一起被切（截图里只剩中间几个字）。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body .firstgroup_box,
  body .secondgroup_box {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    row-gap: 8px !important;
    padding: 12px 12px 10px !important;
    box-sizing: border-box !important;
  }
  body .firstgroup_box_prov,
  body .secondgroup_box_area {
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    letter-spacing: .4px;
  }
  body .firstgroup_box_group,
  body .secondgroup_box_group {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body .firstgroup_item,
  body .secondgroup_item,
  body .pro_box .pro_item {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body .firstgroup_box .firstgroup_item a,
  body .secondgroup_box .secondgroup_item a,
  body .firstgroup_item a,
  body .secondgroup_item a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* --------------------------------------------------------------------------
   42.3 订单汇总表格 —— 手机版不再横向溢出
   --------------------------------------------------------------------------
   responsive.css（default 主题）把 .table td 写成了 white-space:nowrap，
   加上 .mw-250{max-width:250px}，使标签列既不能换行也不能收缩；
   标签列 250px + 金额列 69px = 319px > 容器 276px → .table-responsive 内部横向滚动，
   金额被推到可视区之外（用户截图：「¥10…」被切）。
   修法：手机版让标签列可换行、去掉 250px 上限；金额列保持一行并收缩到最小宽度。
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body .ordersummary { width: 100% !important; max-width: 100% !important; }
  body .ordersummary td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 7px 4px !important;
    vertical-align: top !important;
  }
  body .ordersummary td.mw-250 { max-width: none !important; width: auto !important; }
  body .ordersummary td.text-right {
    width: 1% !important;
    padding-left: 10px !important;
    white-space: nowrap !important;
    color: var(--md-price) !important;
  }
  body .ordersummary td.text-right > * { white-space: nowrap !important; }
  body .ordersummary tr > td:first-child { padding-left: 0 !important; }
  body .ordersummary tr > td:last-child { padding-right: 0 !important; }
}

/* --------------------------------------------------------------------------
   42.4 商品卡（购物车列表页 product.tpl）—— 手机版把被嵌套 padding 吃掉的宽度还回来
   --------------------------------------------------------------------------
   实测：390px 视口里 .cartitem 只有 278px 宽（page-content 14 + container-fluid 12
   + col-sm-3 左右各 15 + card-body.p-4 24），介绍是长文，可用宽度越小卡片越高。
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  body .page-content { padding-left: 10px !important; padding-right: 10px !important; }
  body .page-content > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
  body .card-body.p-4 { padding: 14px !important; }
  body .card-body.p-4 > .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  body .card.cartitem { height: auto !important; }
  body .card.cartitem .card-body { padding: 14px !important; }
  body .card.cartitem h5 { font-size: 15.5px !important; line-height: 1.45 !important; }
  body .card.cartitem .card-text { font-size: 12.5px !important; line-height: 1.7 !important; }
  body .card.cartitem .card-footer a { line-height: 44px !important; }
}