@charset "UTF-8";
/* ==========================================================================
   aurora_fresh · 暗色科技磨砂玻璃增强层（fresh-darkglass.css）
   --------------------------------------------------------------------------
   ⚠️ 本文件为「纯样式增强」，不改动任何业务逻辑、模板变量、表单 action、
      业务 JS（app.js / fresh-ui.js）、侧边菜单 $Nav 契约、或魔方原生弹窗 /
      提示组件（Bootstrap Modal / toastr / metisMenu / simplebar / waves）。
   ⚠️ 本文件在 fresh-compat.css 之后加载（见 includes/head.tpl），仅做视觉
      覆盖；所有颜色均走 fresh-tokens.css 的 --f-* 变量，未新增任何变量名。
   设计基调：深海军蓝黑基底 + 靛蓝→紫罗兰渐变点缀（主按钮/品牌/分页选中）
           + 青蓝高亮（选中/导航/focus）+ 薄荷价格 + 毛玻璃磨砂 + 微光描边 +
             卡片 hover 轻上浮 + 输入框聚焦柔光 + 细渐变分割线 + 金额高亮。
   ========================================================================== */

/* ===== 01 页面底色：炭黑基底 + 双角冰蓝/青蓝光晕（毛玻璃模糊背景） ===== */
body {
  background:
    radial-gradient(1200px 640px at 88% -14%, rgba(139, 59, 255, .12), transparent 60%),
    radial-gradient(1100px 560px at -10% 0%, rgba(44, 100, 255, .14), transparent 55%),
    var(--f-bg);
  color: var(--f-text);
}

/* ===== 02 顶栏 / 侧栏：毛玻璃 + 微光描边 ===== */
#page-topbar,
.navbar,
.vertical-menu {
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.vertical-menu {
  background: rgba(13, 18, 28, .72) !important;   /* 侧栏半透明（!important 仅覆盖 Skote 浅色底，不影响 JS 菜单逻辑） */
  border-right: 1px solid var(--f-border);
}
#page-topbar,
.navbar {
  background: rgba(11, 14, 20, .72) !important;
  border-bottom: 1px solid var(--f-border);
}

/* 侧边菜单文字：暗底浅色 + 选中/悬停「主题紫」
   ⚠️ 必须带 !important：assets/css/app.min.css（Skote 引擎包，先加载）里写死了
      .mm-active > a / .mm-active .active { color:#0B7A5B !important }（绿色），
      不加 !important 会被它压掉 —— 这正是此前「左侧菜单还是绿色」的原因。
      仅覆盖颜色，不动 metismenu 的 .mm-active/.active 类名与 JS 逻辑。 */
.metismenu a,
#side-menu a {
  color: var(--f-text-2);
  transition: color var(--f-dur-fast) var(--f-ease), background var(--f-dur-fast) var(--f-ease);
}
.metismenu a:hover,
#side-menu a:hover { color: var(--f-violet-bright); background: rgba(139, 59, 255, .10); }

/* 当前项 / 展开的父级：紫色文字 + 紫色渐变底 */
#side-menu a.has-arrow.active,
.metismenu a.mm-active,
#side-menu .mm-active > a {
  color: var(--f-violet-bright) !important;
  background: linear-gradient(90deg, rgba(139, 59, 255, .22), transparent) !important;
}
/* 覆盖 app.min.css 的三条 !important 绿色规则（父级文字/图标 + 二级当前项） */
#sidebar-menu .mm-active > a,
#sidebar-menu .mm-active > a i,
#sidebar-menu .mm-active > a i.f-menu-ico,
#side-menu .mm-active > a i,
.metismenu .mm-active > a,
.metismenu .mm-active > a i,
.metismenu .mm-active .active,
#sidebar-menu .mm-active .active,
#sidebar-menu .mm-active .active i {
  color: var(--f-violet-bright) !important;
}
/* 展开箭头（.has-arrow::after）在展开态跟随紫色 */
#sidebar-menu .mm-active > a.has-arrow:after {
  border-color: var(--f-violet-bright) !important;
}

/* ===== 03 卡片：毛玻璃 + 微光描边 + hover 轻上浮 ===== */
.card {
  background: var(--f-glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--f-glass-border) !important;
  box-shadow: var(--f-glow);
  transition: transform var(--f-dur) var(--f-ease),
              box-shadow var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--f-glow-hover);
  border-color: rgba(140, 180, 255, .32) !important;
}
.card-body { color: var(--f-text); }

/* 卡片标题左侧色条改为冰蓝青蓝渐变 */
.card-title::before,
.f-section-title::before { background: var(--f-grad); }

/* ===== 04 细渐变分割线（替换原纯色线；不覆盖状态色边框如 border-danger） ===== */
hr,
.f-divider { border: 0; height: 1px; background: var(--f-divider-grad); }

/* ===== 05 按钮：主按钮渐变 + 发光；基础按钮暗色化 ===== */
.btn-primary,
.btn-success,
.btn-info {
  background: var(--f-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 8px 22px rgba(90, 70, 255, .30);
  transition: transform var(--f-dur) var(--f-ease), box-shadow var(--f-dur) var(--f-ease);
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background: linear-gradient(135deg, #4A7BFF, #A05CFF) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(90, 70, 255, .40);
}
.btn {
  color: var(--f-text);
  border-color: var(--f-border);
}
.btn-light, .btn-soft, .btn-outline-light {
  background: rgba(13, 18, 28, .55) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
.btn-light:hover, .btn-soft:hover { background: rgba(34, 211, 238, .10) !important; color: #67E8F9 !important; }

/* ===== 06 表单：暗色输入框 + 聚焦柔光边框 ===== */
.form-control,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
  background-color: rgba(13, 18, 28, .72) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
  background-color: rgba(13, 18, 28, .85) !important;
  border-color: #38BDF8 !important;
  box-shadow: var(--f-focus-ring) !important;
  color: var(--f-text) !important;
}
.form-control::placeholder { color: var(--f-text-4); }
.form-check-input:checked { background-color: var(--f-primary); border-color: var(--f-primary); }

/* ===== 07 表格：暗色表头 / 行分隔，保证可读 ===== */
.table { color: var(--f-text); }
.table thead th,
.table thead td { background: var(--f-surface-alt); color: var(--f-text-2); border-color: var(--f-border); }
.table td, .table th { border-color: var(--f-border); }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, .02); }
.table-hover > tbody > tr:hover { background: rgba(34, 211, 238, .06); }

/* ===== 08 弹窗：暗色化（原生 Bootstrap Modal 组件，仅换肤） ===== */
.modal-content {
  background: rgba(18, 24, 38, .96);
  border: 1px solid var(--f-glass-border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--f-text);
}
.modal-header, .modal-footer { border-color: var(--f-border); }
.modal-title { color: var(--f-ink-800); }

/* ===== 09 金额 / 余额 / 价格：高亮浅色 + 青蓝微光（需求重点） ===== */
[class*="balance"], [class*="Balance"],
[class*="price"], [class*="Price"],
[class*="Amount"], [class*="amount"],
[class*="total"], [class*="Total"] {
  color: var(--f-price-color);
  text-shadow: var(--f-price-glow);
  font-variant-numeric: tabular-nums;
}

/* ===== 10 暗色滚动条（仅 WebKit / Firefox，增强质感） ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(140, 170, 220, .20); border-radius: var(--f-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: rgba(140, 170, 220, .34); }
* { scrollbar-width: thin; scrollbar-color: rgba(140, 170, 220, .20) transparent; }

/* ===== 11 遗留浅色面强制暗化（覆盖 Skote 底座 global.css / aurora.css 硬编码 #fff） =====
   以下规则全部带 !important，且本文件末位加载，仅在视觉层生效；
   不动任何业务逻辑、DOM 契约、表单 action、业务 JS（app.js / fresh-ui.js）。
   颜色一律走 fresh-tokens.css 的 --f-* 令牌，未新增任何变量名。 */

/* 11.1 表格外框：原 .table-responsive{background:#fff} 大白块 → 暗玻璃 */
.table-responsive {
  background: var(--f-glass-bg) !important;
  border: 1px solid var(--f-glass-border) !important;
  border-radius: var(--f-radius);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* 11.2 通用按钮：btn-default / btn-secondary 浅底 → 暗玻璃 */
.btn-default,
.btn-secondary {
  background-color: rgba(13, 18, 28, .55) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
.btn-default:hover, .btn-default.active,
.btn-secondary:hover {
  background-color: rgba(34, 211, 238, .10) !important;
  border-color: rgba(140, 180, 255, .32) !important;
  color: #67E8F9 !important;
}

/* 11.3 输入组前缀/后缀：.input-group-text{background:#f2f7ff} → 暗玻璃 */
.input-group-text {
  background-color: rgba(13, 18, 28, .72) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text-2) !important;
}

/* 11.4 分页：.page-link{background:#fff} → 暗玻璃；禁用态转柔和暗灰 */
.pagination .page-link {
  background: var(--f-glass-bg) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text-2) !important;
}
.pagination .page-link:hover {
  background: rgba(34, 211, 238, .12) !important;
  border-color: rgba(140, 180, 255, .32) !important;
  color: #67E8F9 !important;
}
.pagination .page-item.disabled .page-link {
  background: rgba(13, 18, 28, .40) !important;
  color: var(--f-text-4) !important;
}
.pagination .page-item.active .page-link {
  background: var(--f-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 11.5 列表组：.list-group-item{background:#fff} → 暗玻璃 */
.list-group-item {
  background: var(--f-glass-bg) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
.list-group-item.active {
  background: var(--f-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 11.6 业务卡片：推广 / 工单 / 知识库 / 支付区 / 充值方式 / 用户中心产品（aurora.css 硬编码 #fff） */
.aff-item,
.ticket-item,
.kb-item,
.pay-area,
.addfunds-payment,
.user-center_product {
  background: var(--f-glass-bg) !important;
  border-color: var(--f-glass-border) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--f-glow);
  transition: transform var(--f-dur) var(--f-ease),
              box-shadow var(--f-dur) var(--f-ease),
              border-color var(--f-dur) var(--f-ease);
}
.aff-item:hover, .ticket-item:hover, .kb-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--f-glow-hover);
  border-color: rgba(140, 180, 255, .32) !important;
}

/* 11.6.1 支付方式「选中」态必须补回：
   上面 11.6 用 !important 统一压了 .addfunds-payment 的玻璃底/描边，
   会把 fresh-compat.css §6 的 .addfunds-payment.active 选中边框盖掉
   ——表现为点了支付方式卡片看不到任何选中反馈。此处以同级 !important 补回。 */
.addfunds-payment.active {
  border-color: var(--f-primary) !important;
  background: rgba(34, 211, 238, .12) !important;
  color: var(--f-cyan-bright) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .20), var(--f-glow) !important;
}
.addfunds-payment:hover:not(.active) {
  border-color: rgba(34, 211, 238, .45) !important;
}
.addfunds-payment.active::after {
  content: "";
  position: absolute;
  top: 6px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--f-cyan-bright);
  box-shadow: 0 0 8px rgba(34, 211, 238, .85);
}

/* 11.7 侧栏品牌框：.navbar-brand-box 白底 → 半透明暗（与侧栏一致） */
.navbar-brand-box {
  background: rgba(13, 18, 28, .72) !important;
  border-right: 1px solid var(--f-border) !important;
}

/* 11.8 富文本工具栏 / 进度条轨道 / 代码块：浅底 → 暗 */
.note-toolbar {
  background: rgba(13, 18, 28, .72) !important;
  border-bottom-color: var(--f-border) !important;
}
.progress { background: rgba(13, 18, 28, .55) !important; }
code, pre {
  background: rgba(13, 18, 28, .55) !important;
  color: #9AD1FF !important;
  border: 1px solid var(--f-border) !important;
}

/* 11.9 下拉菜单（Bootstrap 底座 .dropdown-menu{background:#fff}） → 暗玻璃 */
.dropdown-menu {
  background: rgba(18, 24, 38, .96) !important;
  border: 1px solid var(--f-glass-border) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--f-glow);
}
.dropdown-item { color: var(--f-text) !important; }
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(34, 211, 238, .10) !important;
  color: #67E8F9 !important;
}
.dropdown-divider { border-color: var(--f-border) !important; }

/* 11.10 徽章：暗色友好化（保留语义色，改用柔底 + 亮字，避免亮红/亮黄刺眼）；
           security-header 内的白徽章（fresh-compat.css）特异性更高，保持原样不覆盖。 */
.badge-danger  { background: var(--f-danger-bg)  !important; color: var(--f-danger-ink)  !important; border: 1px solid rgba(248,113,113,.40)  !important; }
.badge-warning { background: var(--f-warning-bg) !important; color: var(--f-warning-ink) !important; border: 1px solid rgba(251,191,36,.40)  !important; }
.badge-success { background: var(--f-success-bg) !important; color: var(--f-success-ink) !important; border: 1px solid rgba(52,211,153,.40)  !important; }
.badge-info    { background: var(--f-info-bg)    !important; color: var(--f-info-ink)    !important; border: 1px solid rgba(96,165,250,.40)  !important; }

/* 11.11 （防御）模板越界注入的浅色徽章/标签兜底：仅强制浅色系（.badge-light / .label）暗化，
           语义徽章（danger/warning/success/info，见 11.10）不在此覆盖，保持各自柔色。 */
.badge-light,
.label {
  background: var(--f-glass-bg) !important;
  color: var(--f-text) !important;
  border: 1px solid var(--f-border) !important;
}

/* ===== 13 通用文字层级显式化（核心可读性修复：不再依赖继承，
           给每个模块显式高对比文字色，对齐参考图「卡片文字改显式高对比」原则） ===== */
h1, h2, h3, h4, h5, h6,
.card-title, .f-section-title { color: var(--f-ink-900); }

p, li, dd, dt, td, th { color: var(--f-text); }

label, .control-label, .col-form-label { color: var(--f-text); }

small, .text-muted, .help-block, .form-text, .form-hint,
.muted, .text-secondary { color: var(--f-text-3) !important; }

.f-empty, .empty-state, .no-data, .nodata, .data-empty,
.fc-empty, .list-empty { color: var(--f-text-2); }

/* ===== 12 尊重系统「减弱动效」偏好（与 tokens 一致，双保险） ===== */
@media (prefers-reduced-motion: reduce) {
  .card,
  .aff-item, .ticket-item, .kb-item,
  .btn-default, .btn-secondary,
  .btn-primary, .btn-success, .btn-info { transition: none; }
  .card:hover,
  .aff-item:hover, .ticket-item:hover, .kb-item:hover { transform: none; }
  .btn-primary:hover, .btn-success:hover, .btn-info:hover { transform: none; }
}

/* =====================================================================
   ===== 14 遗留浅色主题内联色 / 浅色模块面 → 主题化（全局可读性收口） =====
   ---------------------------------------------------------------------
   背景：多个 .tpl 自带 <style>（位于 <body>，文档序在 <head> 之后）写死了
   浅色主题遗留色。§13 的文字层级只覆盖「没有自有颜色」的元素；只要有一条
   直接命中元素的选择器（甚至带 !important），深色文字就会盖过继承来的浅色
   文字，或在深色页上留下「浅底 + 浅字」的白块。
   本段在末位加载层用「更具体选择器 + !important」把这些遗留色统一收口。
   ⚠️ 仅改颜色，不新增/改名任何 class/id、不动 DOM 与尺寸。
   涉及页面：newsview(见 .tpl 内 viewstyle 单独处理)、apimanage、credit、
   creditdetail、contract/contracthost、product_divert、verified、
   includes/upgrade*、includes/pay、servicedetail/*。
   ===================================================================== */

/* ---- 14.1 浅色模块面（bootstrap .bg-white/.bg-light）→ 暗面 ----
   ⚠️ .bg-light 取 --f-surface-alt，与 .bg-gray（fresh-compat）同值；即便二者
   同元素共存、层叠顺序被改写，颜色也完全一致，不会把 servicedetail 的暗块重新变亮。 */
.bg-white,
.bg-white-50 { background-color: var(--f-surface) !important; }

.bg-light { background-color: var(--f-surface-alt) !important; }

.explanation { background-color: var(--f-surface-alt) !important; }   /* verified.tpl 说明区（原 #f5f6f7 浅灰块） */

/* ---- 14.2 遗留「深色文字」→ 主题浅色（原浅色主题遗留，落在暗底上不可读） ---- */
body .text-dark-50 { color: var(--f-text-3) !important; }             /* creditdetail.tpl（原自带 !important，需提权） */
.text-black-50 { color: var(--f-text-3) !important; }                 /* Bootstrap rgba(0,0,0,.5) 落在暗底不可见；全站 30+ 处排序箭头/弱化图标 */
.text-dark { color: var(--f-text) !important; }                       /* Bootstrap #212529 暗字，6 处落在暗底不可见 */
.order_title li p { color: var(--f-text) !important; }                /* creditdetail.tpl */
.api-manage-top-item-value,
.api-manage-sub-title { color: var(--f-ink-900) !important; }         /* apimanage.tpl 数值/小标题（原 #333） */
.api-manage-top-item-title { color: var(--f-text-3) !important; }     /* apimanage.tpl 标题（原 #64748B） */
.afc-modal-tip { color: var(--f-text-3) !important; }                 /* contract/contracthost.tpl（原 #64748B） */
.tips-text { color: var(--f-text-3) !important; }                     /* includes/upgrade.tpl（原 #64748B） */
.explanation_msg { color: var(--f-text) !important; }                 /* verified.tpl */
.ssl_p { color: var(--f-text) !important; }                           /* servicedetail/ssl.tpl（原 #333333） */
.xf-bg-text { color: var(--f-text) !important; }                      /* cloud/dedicated/zjmf*.tpl 悬浮层文字（原 #333） */
.table-container .table { color: var(--f-text) !important; }          /* product_divert 等遗留 .table{color:#495057} */
.balance_money { color: var(--f-ink-900) !important; }                /* includes/pay.tpl 余额数字（原 #7A4A00 / 内联 #0B4A8F） */

/* ---- 14.3 遗留「浅色强调/链接」→ 主题亮色 ---- */
.afc-update-name,
.downloadTemplate,
.configuration-btn-down,
.dc { color: var(--f-cyan-bright) !important; }                       /* 原 #2D6BC4 暗蓝，落到暗底偏暗 */
.prepayment { color: var(--f-violet-bright) !important; border-color: var(--f-violet-line) !important; }  /* credit.tpl 标签（原 #4348C9） */

/* ---- 14.4 遗留「浅色弹层 / 提示 / 状态」→ 主题化（避免白块与刺眼色） ---- */
.xf-bg { background: var(--f-surface-alt) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .45) !important; }   /* servicedetail 白色悬浮层 */
.api-manage-modal-title { background: var(--f-surface) !important; }   /* apimanage 白色弹窗卡片 */
.tips-div {                                                            /* includes/upgrade* 浅琥珀提示块 */
  background: var(--f-warning-bg) !important;
  color: var(--f-warning-ink) !important;
  border-color: rgba(251, 191, 36, .40) !important;
}
.focus-button:disabled { background: rgba(148, 163, 184, .20) !important; color: var(--f-text-4) !important; }   /* 原 #DFDFDF 浅灰 */
.error-text,
.red-color { color: var(--f-danger-ink) !important; }                 /* 原 #B4323E 深红 */
.iconfont { color: var(--f-cyan-bright) !important; }                  /* includes/pay.tpl 大图标（原 #0B7A5B 绿） */

/* ---- 14.5 图例色块 / 无 class 裸按钮（product_divert 等遗留） ---- */
.fontws i.bg-light { background-color: var(--f-text-3) !important; }   /* credit.tpl 图例方块，暗卡上保持可见 */
button:not([class]) {                                                  /* product_divert 等页遗留的裸 <button> */
  background: var(--f-surface-alt) !important;
  color: var(--f-text) !important;
  border: 1px solid var(--f-border) !important;
  border-radius: 4px !important;
}

/* =====================================================================
   §15 模块弹窗「整块点不动」修复 —— 解除祖先堆叠上下文（stacking context）
   =====================================================================
   现象（云服务器详情页 → 「快照」等由服务模块提供的标签页）：
     点开模块自己的 Bootstrap 弹窗后，弹窗虽然显示出来，但
       ① 被一层黑遮罩压暗；
       ② 弹窗内所有内容（下拉「磁盘选择」、输入框「备注名」、确定、右上角 ×）
          全部点不动 —— 整个弹窗像被透明玻璃罩住。
   根因（非业务逻辑，纯 CSS 层叠问题）：
     模块弹窗的 .modal 是写在 .tab-pane 里、而 .tab-pane 位于 .card 内部；
     本文件 §03 给 .card 加了 backdrop-filter（毛玻璃）—— 按规范
     backdrop-filter 会为元素建立「堆叠上下文」，于是卡片子树内的 .modal
     再高的 z-index 也只在该上下文内比较；
     而 Bootstrap 的 .modal-backdrop 是追加到 <body>、z-index:1040、处于
     根堆叠上下文 —— 结果 backdrop 永远盖在整张 .card 子树之上（含 .modal），
     既负责变暗、又拦截全部指针事件（pointer-events），故「点不动」。
   实测佐证：截图弹窗内取色 #0B0F18 ≈ 0.62 × rgba(18,24,38,.96)
     （.modal-content 原色被 38% 黑遮罩 `.modal-backdrop.show{opacity:.38}` 压暗），
     可确认遮挡关系成立。
   解法：
     Bootstrap 打开弹窗时会自动给 <body> 加 .modal-open。此时临时取消卡片
     及其可能的新增祖先上的「堆叠上下文来源」属性（backdrop-filter / transform /
     filter / isolation / perspective / will-change），让 .modal 回到根堆叠
     上下文 —— z-index:1050 即可正确盖住 z-index:1040 的 backdrop，
     指针事件恢复、position:fixed 也重新相对视口定位（弹窗居中）。
   ⚠️ 只在弹窗打开期间生效；不改颜色、不改尺寸、不改任何 class/id/DOM/JS，
      弹窗背后被遮罩压住的部分本就看不清，肉眼无差异。
   ===================================================================== */
body.modal-open .card,
body.modal-open .card:hover,
body.modal-open .card-body,
body.modal-open .tab-content,
body.modal-open .tab-pane {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  isolation: auto !important;
  perspective: none !important;
  will-change: auto !important;
}

/* =====================================================================
   §16 未被主题覆盖的原生 <select> 补肤（服务模块模板常见）
   =====================================================================
   模块自己渲染的 <select>（如弹窗里的「磁盘选择」）既没有 .form-control 也
   没有 .form-select，§06 的表单暗化规则命中不到它，浏览器便按默认样式画成
   浅灰控件 —— 在暗色主题上既突兀、又像「被禁用」。这里补两级外观
   （不改任何取值 / 提交 / onchange 逻辑）：
     16.1 全局无 class 的裸 select：按「行内小控件」处理
          （覆盖分页「每页 N 条」等 21 处，实测分页条高度与文字行高不变）
     16.2 弹窗内未被主题覆盖的 select：按标准表单控件处理，与 §06 的
          .form-control 视觉一致（用 :not() 排除已被 §06 覆盖的标准类，
          并排除 .paySelect —— 支付弹窗的支付方式下拉布局敏感，保持原样）
   ===================================================================== */
select:not([class]),
.modal select:not(.form-control):not(.form-select):not(.custom-select):not(.paySelect) {
  background-color: rgba(13, 18, 28, .72) !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2393A2B6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 12px 12px;
}
/* 16.1 行内小控件（分页每页条数等）：保持单行高度，不撑高工具条 */
select:not([class]) {
  padding: 3px 22px 3px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
/* 16.2 弹窗内的表单型 select：尺寸/圆角/右内边距对齐 .form-control */
.modal select:not(.form-control):not(.form-select):not(.custom-select):not(.paySelect) {
  height: 40px;
  padding: .45rem 2.1rem .45rem .75rem;
  border-radius: var(--f-radius-sm);
  background-position: right .7rem center;
  background-size: 14px 14px;
}
.modal-body select:not(.form-control):not(.form-select):not(.custom-select):not(.paySelect) {
  width: 100%;
  margin-bottom: var(--f-space-3);
}
select:not([class]):focus,
.modal select:not(.form-control):not(.form-select):not(.custom-select):not(.paySelect):focus {
  border-color: #38BDF8 !important;
  box-shadow: var(--f-focus-ring) !important;
  outline: 0;
}
select:not([class]) option,
.modal select option {
  background-color: #0D121C;
  color: var(--f-text);
}

/* =====================================================================
   §17 服务模块自渲染表格：浅色渐变表头 → 主题暗面
   =====================================================================
   服务模块（云服务器「快照」等标签页）自带一套面向浅色主题的表格样式，
   其 <thead> 常带浅灰/银白渐变底 + 深色字。落到暗色主题上就是一条刺眼的
   亮色横带（实测截图表头带被遮罩压暗后仍为 #9A9A9B，反推原色约 #F9F9F9）。
   本主题所有表格表头（§07 / fresh-components）都已是暗面，这里把
   「标签页内由模块渲染的表格」也统一到同一套暗色表头 —— 用 !important 是为
   压掉模块自带的 background 渐变（含 background-image）与内联色。
   ⚠️ 只作用于 .tab-content 内的 table，不动任何行列结构、不影响排序等 JS。
   ===================================================================== */
.tab-content table > thead,
.tab-content table > thead > tr,
.tab-content table > thead > tr > th,
.tab-content table > thead > tr > td {
  background-image: none !important;
  background-color: var(--f-surface-alt) !important;
  color: var(--f-text-2) !important;
  border-color: var(--f-border) !important;
}

/* =====================================================================
   §18 服务模块「客户区」浅色面板 → 主题暗面（设置 / 快照 等模块标签页）
   =====================================================================
   服务模块通过 AJAX 把自己的 HTML 注入 #module_client_area_{key} > div
   （见 servicedetail/cloud.tpl 的 $.ajax → .html(res)）。这段 HTML 自带一套
   面向「浅色」主题的样式，且晚于主题 CSS 生效，于是「设置」标签里两个模块
   面板（挂载 ISO / 启动项）呈现浅灰白底（实测 #F5F4F7），在深色主题上就是
   两块刺眼的白斑；配套的浅灰标签、默认蓝按钮、带白色系统箭头的下拉也与
   主题不符。
   ---------------------------------------------------------------------
   模块模板不在主题包内（由 plugins/servers/<模块> 生成），无法得知其类名，
   因此这里改用「前缀 id 限定 + 结构选择」而非按类名匹配：
     18.1 客户区容器整体给主题暗面；
     18.2 压平模块自带的浅色板 / 背景图（含渐变），让暗面透出 —— 这一步
          不针对具体类名，故对任何模块都有效；
     18.3 文字 / 标签提亮到主题层级；
     18.4 表单控件与按钮「重新上色」（在 18.2 之后、特异性更高，故优先生效）：
          按钮 → 主题主按钮渐变；下拉/输入框 → 主题暗底并补 appearance:none
          （§06 只改了底色、没去掉 select 的系统白箭头，故右上角一直有个白块）；
     18.5 客户区内的弹窗（如「快照」弹窗）重新铺回暗底，避免被 18.2 压平。
   ⚠️ 完全限定在模块客户区（id^= 前缀）内，不动任何 class / 结构 / JS / 表单取值。
   ===================================================================== */

/* 18.1 客户区容器：给主题暗面 */
[id^="module_client_area_"] > div {
  background: var(--f-surface) !important;
  color: var(--f-text) !important;
}
/* 18.2 压平模块自带的浅色底 / 背景图（不区分类名，模块换模板也生效） */
[id^="module_client_area_"] > div * {
  background-color: transparent !important;
  background-image: none !important;
}

/* 18.3 文字 / 标签 / 标题
   ⚠️ 带 > div 一档：模块常写成 `.panel label{color:#A9B4C0}`（特异性 0,1,1，
      且晚于主题生效），必须用 (0,1,2) 才能压过它 */
[id^="module_client_area_"] > div label,
[id^="module_client_area_"] > div .control-label,
[id^="module_client_area_"] > div legend,
[id^="module_client_area_"] > div h1, [id^="module_client_area_"] > div h2,
[id^="module_client_area_"] > div h3, [id^="module_client_area_"] > div h4,
[id^="module_client_area_"] > div h5, [id^="module_client_area_"] > div h6 {
  color: var(--f-text) !important;
}
[id^="module_client_area_"] > div .text-muted,
[id^="module_client_area_"] > div small,
[id^="module_client_area_"] > div .help-block { color: var(--f-text-3) !important; }

/* 18.4 表单控件 / 按钮：在 18.2 之后重新上色（特异性 (0,1,2) > (0,1,1) 必胜） */
/* 下拉：主题暗底 + 折角箭头（去掉系统白方块），与 §16 视觉一致 */
[id^="module_client_area_"] > div select {
  background-color: rgba(13, 18, 28, .72) !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2393A2B6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .7rem center !important;
  background-size: 14px 14px !important;
  padding-right: 2.1rem;
  border-radius: var(--f-radius-sm);
}
[id^="module_client_area_"] > div select option { background-color: #0D121C; color: var(--f-text); }
/* 输入框 / 文本域 */
[id^="module_client_area_"] > div input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
[id^="module_client_area_"] > div textarea {
  background-color: rgba(13, 18, 28, .72) !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
}
[id^="module_client_area_"] > div select:focus,
[id^="module_client_area_"] > div input:focus,
[id^="module_client_area_"] > div textarea:focus {
  border-color: #38BDF8 !important;
  box-shadow: var(--f-focus-ring) !important;
  outline: 0;
}
/* 按钮：模块默认蓝 → 主题主按钮（靛蓝→紫罗兰渐变） */
[id^="module_client_area_"] > div .btn-primary,
[id^="module_client_area_"] > div button.btn,
[id^="module_client_area_"] > div button:not(.close):not(.btn-link) {
  background: var(--f-grad) !important;
  background-image: var(--f-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 8px 22px rgba(90, 70, 255, .30);
}
[id^="module_client_area_"] > div button.btn:hover,
[id^="module_client_area_"] > div button:not(.close):not(.btn-link):hover {
  background: linear-gradient(135deg, #4A7BFF, #A05CFF) !important;
  color: #fff !important;
}

/* 18.5 客户区内弹窗：重新铺回暗底（否则被 18.2 压成透明） */
[id^="module_client_area_"] > div .modal-content {
  background: #121826 !important;
  background-image: none !important;
}
[id^="module_client_area_"] > div .modal-header,
[id^="module_client_area_"] > div .modal-footer {
  background: #0F1522 !important;
  background-image: none !important;
}

/* =====================================================================
   §19 遗留 Bootstrap 工具类收口：表格表头白带（日志 / 财务等标签）
   =====================================================================
   现象：云服务器详情页「日志」「财务」标签的表格表头是一条刺眼白带
   （实测 #F8F9FA）。
   根因：Bootstrap 自带 `.table .thead-light th { background-color:#f8f9fa }`，
   其特异性 (0,2,1) 的「class 计数 = 2」高于主题 `.table thead th` (0,1,2)
   的 1，故默认压过主题；而这些表格用的是 `<thead class="thead-light">`
   （日志 servicedetail-log.tpl / 财务 servicedetail-billing.tpl 均如此）。
   §17 只覆盖 `.tab-content` 内的表格，较窄且易受部署/缓存影响，这里改用
   「同款 class 组合 + !important」在所有 thead 变体上全局压平。
   ⚠️ 仅改颜色，不动 class/id/DOM；排序钩子 thead.bg-light 的类名保留。
   ===================================================================== */
.table .thead-light th, .table .thead-light td,
.table .thead-dark th, .table .thead-dark td,
.table > thead > tr > th, .table > thead > tr > td,
.table thead th, .table thead td,
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive thead th, .table-responsive thead td,
thead.thead-light > tr > th, thead.thead-light > tr > td,
thead.bg-light > tr > th, thead.bg-light > tr > td {
  background-color: var(--f-surface-alt) !important;
  background-image: none !important;
  color: var(--f-text-2) !important;
  border-color: var(--f-border) !important;
}

/* =====================================================================
   §20 下拉选项列表（<option>）配色收口：展开后的选项文字看不清
   =====================================================================
   现象：云服务器「快照」弹窗与「设置」标签的下拉框，关闭态的当前值是亮色、
   可读；但**展开后的选项列表**文字是暗灰（实测 #333333），压在暗色列表底
   (#111A2C) 上，对比度仅约 1.38:1 —— 等于看不见（「下拉里面的数值看不清」）。
   根因：服务模块自带的浅色样式在运行时（AJAX 注入模块 HTML 时）动态插入 <head>，
   顺序晚于主题，其 `option { color:#333 }`（浅色主题默认字色）覆盖了主题对
   option 的浅色文字；而主题原有 option 规则未加 !important、运行时顺序又落后，
   于是「深字 + 主题暗底」= 低对比。关闭态之所以正常，是因为 select 本体用了
   `color: var(--f-text) !important`（§16），不受影响。
   修复：用 !important 强制统一 option 的「暗底 + 浅字」，并给 select 声明
   color-scheme:dark，让原生弹出层（含高亮行 / 滚动条 / 弹层边框）也走暗色，
   避免「浅底浅字」。作用于全站所有 select，不改任何 class/id/DOM/JS。
   ⚠️ !important 是必需：模块样式运行时晚于本层加载，仅靠顺序/特异性会被反压。
   ===================================================================== */
select option,
select optgroup,
select optgroup option,
[class] option,
option {
  background-color: #111A2C !important;
  color: var(--f-text) !important;
}
/* 原生下拉弹出层的暗色渲染（含高亮/滚动条），保证任何环境下都是「暗底浅字」 */
select {
  color-scheme: dark;
}

/* §20.1 bootstrap-select / 自研下拉列表项（展开后「选项数值看不清」的第二种根因）
   --------------------------------------------------------------------------------
   上一版（§20）只修了原生 <option>，但对 class="selectpicker" 的 select 无效：
   bootstrap-select 会隐藏原生 <option>，把选项重渲染为
       .bootstrap-select > .dropdown-menu > .dropdown-menu.inner > li > a
   其中列表项是「裸 <a>」（很多版本不带 .dropdown-item 类）。主题 §11.9 只把
   .dropdown-menu 背景暗化、只给 .dropdown-item 亮字，而 bootstrap-select 的列表项
   是裸 <a>，其文字仍沿用模块自带浅色 CSS（a { color:#333 }，运行时晚于主题加载），
   于是「深字 + 主题暗底」= 看不清（与用户实测 #333 完全吻合）。
   修复：用更高特异性 + !important 强制「暗底 + 亮字 + 高亮行」，覆盖 bootstrap-select
   与 .dropdown-menu.inner 两种列表项写法。不影响顶栏/其它下拉菜单（它们已是 .dropdown-item
   且已被 §11.9 处理）。select / 表单 / JS 类名契约 100% 不动。 */
ul.dropdown-menu.inner,
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu.inner {
  background: rgba(18, 24, 38, .98) !important;
  border-color: var(--f-glass-border) !important;
}
ul.dropdown-menu.inner > li > a,
ul.dropdown-menu.inner > li > a.dropdown-item,
.bootstrap-select .dropdown-menu.inner li > a,
.bootstrap-select .dropdown-menu li > a,
.bootstrap-select .dropdown-menu a {
  color: var(--f-text) !important;
  background-color: transparent !important;
}
ul.dropdown-menu.inner > li > a:hover,
ul.dropdown-menu.inner > li > a:focus,
ul.dropdown-menu.inner > li.selected > a,
ul.dropdown-menu.inner > li.active > a,
.bootstrap-select .dropdown-menu.inner li > a:hover,
.bootstrap-select .dropdown-menu.inner li > a:focus,
.bootstrap-select .dropdown-menu.inner li.selected > a,
.bootstrap-select .dropdown-menu.inner li.active > a,
.bootstrap-select .dropdown-menu li > a:hover,
.bootstrap-select .dropdown-menu li > a:focus,
.bootstrap-select .dropdown-menu li.selected > a,
.bootstrap-select .dropdown-menu li.active > a {
  color: #FFFFFF !important;
  background-color: rgba(34, 211, 238, .14) !important;
}

/* =====================================================================
   §21 下拉控件「终极强制收口」：压平第三方下拉库的浅色主题样式
   =====================================================================
   根因（本轮定位 —— 也是 §16 / §20 / §20.1 反复改不净的真正原因）：
     服务详情总入口 servicedetail.tpl 在 <body> 内、**晚于** includes/head.tpl
     引入了两个第三方下拉库样式：
       ① <theme>/assets/libs/bootstrap-select/css/bootstrap-select.min.css（第 16 行）
       ② /vendor/dcimcloud/css/selectFilter.css（模块 vendor，selectFilter.js 配套）
     它们写在主题样式之后，同特异性下「后来者胜」，把主题既有的暗色规则反压：
       · bootstrap-select.min.css 里
         `.bootstrap-select > .dropdown-toggle.bs-placeholder… { color:#999 }`
         → 未选择时「请选择」被压成中灰 #999，压在暗底上对比度仅 ≈4:1（看不清）；
       · toggle 其余部分 / 列表项 <a> 亦沿用浅色主题的深色字。
   做法：不去改第三方文件，改在末位增强层（本文件）用「最高特异性 + !important」
   一次性压平所有下拉外观，统一为「暗底 + 亮字 + 暗边框 + dark scheme」。
   ⚠️ 选择器一律以 `html body` 起头，纯粹为抬特异性（起点 (0,0,2)），确保稳压
      后来加载的第三方规则；不新增/删除任何 class/id，不动 DOM、取值、提交、
      onchange 与 JS 契约，不影响表单校验与业务逻辑。
   ===================================================================== */

/* ---- 21.1 原生 <select> 与选项：暗底亮字 + 原生弹层走暗色 ---- */
html body select,
html body .modal select {
  color-scheme: dark !important;
}
html body select:not(.paySelect) {
  background-color: rgba(13, 18, 28, .72) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
html body select option,
html body select optgroup,
html body select optgroup option,
html body option {
  background-color: #111A2C !important;
  color: var(--f-text) !important;
}
/* 聚焦态：去掉浏览器默认的亮色 focus outline（弹窗里那圈发白的细边即由此而来），
   换成主题的柔光描边，既符合暗色主题也不丢可访问性 */
html body select:focus,
html body .modal select:focus {
  outline: 0 !important;
  border-color: #38BDF8 !important;
  box-shadow: var(--f-focus-ring) !important;
}

/* ---- 21.2 bootstrap-select 触发器（关闭态 / 「请选择」占位符） ---- */
html body .bootstrap-select > .dropdown-toggle,
html body .bootstrap-select > .dropdown-toggle.btn,
html body .bootstrap-select > .dropdown-toggle.btn-light,
html body .bootstrap-select > .dropdown-toggle.btn-default,
html body .bootstrap-select > .dropdown-toggle.btn-secondary,
html body .bootstrap-select > .dropdown-toggle.btn-outline-secondary,
html body .bootstrap-select > .dropdown-toggle.btn-outline-dark,
html body .modal .bootstrap-select > .dropdown-toggle {
  background-color: rgba(13, 18, 28, .72) !important;
  background-image: none !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
  box-shadow: none !important;
}
html body .bootstrap-select > .dropdown-toggle .filter-option,
html body .bootstrap-select > .dropdown-toggle .filter-option-inner,
html body .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  color: inherit !important;
  background: transparent !important;
}
/* 「请选择」：#999 → --f-text-2（≈8.6:1），保留「未选 / 已选」的层次差 */
html body .bootstrap-select > .dropdown-toggle.bs-placeholder,
html body .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
html body .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
html body .bootstrap-select > .dropdown-toggle.bs-placeholder:active,
html body .modal .bootstrap-select > .dropdown-toggle.bs-placeholder {
  color: var(--f-text-2) !important;
}
html body .bootstrap-select > .dropdown-toggle:focus,
html body .bootstrap-select > .dropdown-toggle:active,
html body .bootstrap-select.show > .dropdown-toggle {
  border-color: #38BDF8 !important;
  box-shadow: var(--f-focus-ring) !important;
  outline: 0 !important;
}

/* ---- 21.3 bootstrap-select / 通用 dropdown 列表（展开态） ---- */
html body .bootstrap-select .dropdown-menu,
html body .bootstrap-select .dropdown-menu.inner,
html body .dropdown-menu.inner {
  background-color: rgba(18, 24, 38, .98) !important;
  border-color: var(--f-glass-border) !important;
  color: var(--f-text) !important;
}
html body .bootstrap-select .dropdown-menu li > a,
html body .bootstrap-select .dropdown-menu li > a.dropdown-item,
html body .bootstrap-select .dropdown-menu.inner li > a,
html body .bootstrap-select .dropdown-menu a,
html body .dropdown-menu.inner li > a {
  color: var(--f-text) !important;
  background-color: transparent !important;
}
html body .bootstrap-select .dropdown-menu li > a span.text,
html body .bootstrap-select .dropdown-menu li > a span.check-mark {
  color: inherit !important;
}
html body .bootstrap-select .dropdown-menu li.selected > a,
html body .bootstrap-select .dropdown-menu li.active > a,
html body .bootstrap-select .dropdown-menu li > a:hover,
html body .bootstrap-select .dropdown-menu li > a:focus,
html body .dropdown-menu.inner li.selected > a,
html body .dropdown-menu.inner li > a:hover {
  color: #FFFFFF !important;
  background-color: rgba(34, 211, 238, .16) !important;
}
html body .bootstrap-select .dropdown-menu .bs-searchbox .form-control,
html body .bootstrap-select .dropdown-menu .form-control {
  background-color: rgba(13, 18, 28, .72) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
html body .bootstrap-select .dropdown-menu .no-results {
  background: transparent !important;
  color: var(--f-text-2) !important;
}

/* ---- 21.4 chosen / select2 / 模块自研下拉（供应商库）兜底 ---- */
html body .chosen-container .chosen-single,
html body .chosen-container .chosen-choices,
html body .select2-container .select2-selection,
html body .select2-container .select2-selection__rendered {
  background-color: rgba(13, 18, 28, .72) !important;
  border-color: var(--f-border) !important;
  color: var(--f-text) !important;
}
html body .chosen-container .chosen-drop,
html body .select2-container .select2-dropdown {
  background-color: rgba(18, 24, 38, .98) !important;
  border-color: var(--f-glass-border) !important;
}
html body .chosen-container .chosen-results li,
html body .select2-container .select2-results__option,
html body [class*="select-filter"] li,
html body [class*="selectFilter"] li {
  color: var(--f-text) !important;
}
html body .chosen-container .chosen-results li.highlighted,
html body .select2-container .select2-results__option--highlighted,
html body [class*="select-filter"] li:hover,
html body [class*="select-filter"] li.active,
html body [class*="selectFilter"] li:hover,
html body [class*="selectFilter"] li.active {
  color: #FFFFFF !important;
  background-color: rgba(34, 211, 238, .16) !important;
}

/* ---- 21.5 弹窗内「类表单控件」兜底：第三方 BS3 兼容层 / 自研控件一并压平 ----
   服务模块常自带一份 Bootstrap 3 兼容样式（.btn-default / .form-control 白底、
   #ccc 边框、#333 字）并在运行时晚于主题注入，弹窗里的下拉、输入框因此仍是
   「浅色边框 + 深色字」。这里只针对弹窗内的「非主操作」控件强制暗化，
   避开 .btn-primary/.btn-success 等品牌按钮（它们有各自的渐变底色）。 */
html body .modal select,
html body .modal textarea,
html body .modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
html body .modal .form-control,
html body .modal .bootstrap-select > .dropdown-toggle,
html body .modal .btn-default,
html body .modal .btn-light,
html body .modal .btn-secondary,
html body .modal .btn-outline-secondary,
html body .modal .btn-outline-light,
html body .modal .custom-select {
  background-color: rgba(13, 18, 28, .72) !important;
  background-image: none !important;
  border: 1px solid var(--f-border) !important;
  color: var(--f-text) !important;
  box-shadow: none !important;
}
html body .modal select:focus,
html body .modal textarea:focus,
html body .modal input:focus,
html body .modal .form-control:focus,
html body .modal .bootstrap-select > .dropdown-toggle:focus {
  background-color: rgba(13, 18, 28, .85) !important;
  border-color: #38BDF8 !important;
  box-shadow: var(--f-focus-ring) !important;
}
/* 占位符统一抬亮（浏览器默认灰 / 模块自定义灰都覆盖，opacity 一并复位） */
html body input::placeholder,
html body textarea::placeholder {
  color: var(--f-text-3) !important;
  opacity: 1 !important;
}