/* =====================================================================
   aurora_fresh · 兼容层（Compatibility）
   ---------------------------------------------------------------------
   职责：
     1. 承接旧主题 global.css / aurora.css 定义的「工具类 + 业务类」，
        让未重写 HTML 的约 110 个页面自动套用新设计，不散架
     2. 保留第三方控件补丁（summernote / layui-layer / ionRangeSlider /
        bootstrap-select / ZdCascader / autofill）
   说明：
     · 本文件**不再加载** global.css / aurora.css（避免旧 !important 打架）
     · 只放「旧类映射」与「第三方补丁」，不放布局与通用组件样式
       （那些在 fresh-layout.css / fresh-components.css 里）
   加载顺序：fresh-tokens → layout → components → pages → compat（本文件）
   ===================================================================== */

/* =====================================================================
   1. 文字尺寸工具类（原 .fs-* / .fz-* / .font-size-*）
      旧主题把 12 映射成 13px、14 映射成 15px（偏大），此处修正为真实值
   ===================================================================== */
.fs-12, .font-size-12, .fz-12 { font-size: 12px !important; }
.fs-13, .font-size-13 { font-size: 13px !important; }
.fs-14, .font-size-14, .fz-14 { font-size: 14px !important; }
.font-size-15 { font-size: 15px !important; }
.fs-16, .font-size-16 { font-size: 16px !important; }
.fs-18, .font-size-18 { font-size: 18px !important; }
.fs-20 { font-size: 20px !important; }
.fs-22 { font-size: 22px !important; }
.fs-24 { font-size: 24px !important; }
.fs-26 { font-size: 26px !important; }
.fs-28 { font-size: 28px !important; }
.fs-30 { font-size: 30px !important; }
.fs-50 { font-size: 50px !important; }

/* 字重 */
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.font-weight-normal { font-weight: 400 !important; }

/* =====================================================================
   2. 文字颜色工具类（映射到新语义色）
   ===================================================================== */
.text-muted,
.text-black-50,
.text-secondary,
.text-gray {
  color: var(--f-text-3) !important;
}

.text-black-80 {
  color: var(--f-text-2) !important;
}

.text-dark {
  color: var(--f-text) !important;
}

.text-primary {
  color: var(--f-primary-active) !important;
}

.text-info {
  color: var(--f-info-ink) !important;
}

.text-success {
  color: var(--f-success-ink) !important;
}

.text-warning {
  color: var(--f-warning-ink) !important;
}

.text-danger {
  color: var(--f-danger-ink) !important;
}

/* ⚠️ 彩色文字工具类一律用「深档」：白底上要过 4.5:1。
   #2FA98A 3.28:1 / #4A8FE7 3.29:1 / #EF5F6C 3.22:1 都不达标，
   深档 #1F7D64 5.07 / #2D6BC4 5.23 / #B4323E 6.06 全部达标。 */

/* ------- 彩色 / 图片底上的「次要文字」-------
   Bootstrap 的 .text-white-50 是 rgba(255,255,255,.5)，合成后对比度极低：
     · 软件详情主色卡 #17614E 上 → 2.43:1
     · 服务详情横幅 #4d83ff 浅端上 → 1.96:1
     · SSL 状态卡 #17614E 上      → 2.43:1
   而这些位置全是「产品标识 / 备注信息 / 域名 / 操作系统」这类必须读到的正文，
   不是装饰。统一提到 .80 —— 在深档底上是 5.42:1，比正文白字低一档、层级仍在。
   该类的实际落点只有 3 类页面：bind/loginaccesstoken 的品牌图、servicedetail/*
   的横幅与主色卡，均在深色或图片底上，所以全局提高是安全的。 */
.text-white-50 {
  color: rgba(255, 255, 255, .8) !important;
}

/* 浅底徽章（affiliates / knowledgebase / news / newslist 里用于计数）：
   底座 Bootstrap 的 .badge-soft-success 是「#34C38F 字 + 同色 12% 底」= 2.03:1，
   改为深字 + 主题浅底。 */
.badge-soft-success {
  background: var(--f-success-bg) !important;
  color: var(--f-success-ink) !important;
}

.badge-soft-primary {
  background: var(--f-primary-50) !important;
  color: var(--f-primary-active) !important;
}

.badge-soft-info {
  background: var(--f-info-bg) !important;
  color: var(--f-info-ink) !important;
}

.badge-soft-warning {
  background: var(--f-warning-bg) !important;
  color: var(--f-warning-ink) !important;
}

.badge-soft-danger {
  background: var(--f-danger-bg) !important;
  color: var(--f-danger-ink) !important;
}

/* 顶栏「请登录」链接：模板里挂了 .f-link 但一直没有对应样式，
   之前直接吃全局 a 的颜色；这里显式定义成达标的深档品牌色。 */
.f-link {
  color: var(--f-primary-active);
  font-weight: var(--f-fw-medium);
}

.f-link:hover {
  color: var(--f-primary-deep);
  text-decoration: underline;
}

.color-999,
.color-666 {
  color: var(--f-text-3) !important;
}

.text-nowrap,
.box_nowrap {
  white-space: nowrap;
}

/* =====================================================================
   3. 布局 / 显示工具类
   ===================================================================== */
.hide,
.hidden {
  display: none !important;
}

.pointer {
  cursor: pointer;
}

.not-allowed {
  cursor: not-allowed;
}

.flex1 {
  flex: 1 1 auto;
  min-width: 0;
}

.h100p {
  height: 100%;
}

.w100p {
  width: 100%;
}

.mw-250 {
  max-width: 250px;
}

.min-95 {
  min-width: 95px;
}

/* 排序箭头容器微调（tablesearch/service 依赖此 class 存在） */
.offset-3 {
  position: relative;
  top: -3px;
}

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

.bg-primary {
  /* 与品牌渐变保持一致（靛蓝→紫罗兰）。该工具类常与 .text-white 搭配
     （安全中心 banner、servicedetail 各子页顶部蓝色块）；原 Bootstrap #007bff
     与旧青蓝 #0EA5E9 都和主题品牌渐变脱节，故统一到 --f-grad
     （两端白字 4.80:1 / 5.04:1，均 ≥AA）。 */
  background: var(--f-grad) !important;
}

.bg-promote {
  background: linear-gradient(135deg, var(--f-primary-50) 0%, var(--f-accent-50) 100%);
  border-radius: var(--f-radius-md);
}

/* 语义底工具类（底座 Bootstrap 原值都是「中间色 + 白字」，仅 1.9~3.0:1）。
   模板里它们的实际用法：progress-bar（无文字）、圆点、以及
   `col.text-white > card.bg-danger / card.bg-warning` 这类「彩色卡片 + 白字」，
   所以统一落到深档 —— 白字全部 ≥4.5:1，彩色卡片不再糊成一片。
   例外：.security-logo.bg-info 由后加载的 .security-logo 白底规则接管（不受影响）。 */
.bg-success {
  background: var(--f-success-ink) !important;
}

.bg-info {
  background: var(--f-info-ink) !important;
}

.bg-danger {
  background: var(--f-danger-ink) !important;
}

.bg-warning {
  background: var(--f-warning-ink) !important;
}

/* 移动端显隐 */
@media (max-width: 991.98px) {
  .phonehide {
    display: none !important;
  }

  .normalhide {
    display: inline-block !important;
  }
}

@media (min-width: 992px) {
  .normalhide {
    display: none !important;
  }
}

/* =====================================================================
   4. 首页 / 个人中心（user-center_*）
   ===================================================================== */
.user-center_header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  background: var(--f-primary-100);
  color: var(--f-primary-deep);
  font-size: 20px;
  font-weight: var(--f-fw-semibold);
}

.user-center_name {
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
}

.user-center_safety_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--f-space-4);
  width: 200px;
  margin: 0 auto;
}

.user-center_safety {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--f-primary-50);
  color: var(--f-primary-active);
  font-size: 16px;
  transition: background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

.user-center_safety:hover {
  background: var(--f-primary-active);
  color: #fff;
}

.user-center_h300 {
  min-height: 300px;
}

.user-center_calc {
  min-height: calc(300px + 2rem);
}

.user-center_dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--f-primary);
}

/* 已开通产品宫格 */
.user-center_product_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--f-space-3) var(--f-space-5);
}

.user-center_product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-2);
  height: 52px;
  padding: 0 var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
  color: var(--f-text-2);
  font-size: var(--f-fs-base);
  cursor: pointer;
  transition: border-color var(--f-dur-fast) var(--f-ease),
              background var(--f-dur-fast) var(--f-ease),
              color var(--f-dur-fast) var(--f-ease);
}

.user-center_product:hover {
  border-color: var(--f-primary-200);
  background: var(--f-primary-50);
  color: var(--f-primary-active);
}

.user-center_product i {
  color: var(--f-primary-active);
  margin-right: var(--f-space-2);
}

/* 公告列表 */
.user-center_notice_ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-center_notice_item {
  display: flex;
  align-items: center;
  gap: var(--f-space-3);
  height: 38px;
  font-size: var(--f-fs-base);
}

/* 日期列：宽度按内容自适应，且绝不换行
   ⚠️ 踩过的坑：这里曾写死 width: 92px。日期是「一个 span + 一个带空格的字符串」
   （客户端输出 Y-m-d H:i，如 "2026-08-27 00:35"，13px 下实测约需 110px），
   92px 装不下时 CSS 只会在那个空格处断行 → 日期与时间被拆成两行；
   而父行 .user-center_notice_item 是固定 height:38px + align-items:center，
   容不下第二行，视觉上就与相邻行错位（表现为「时间篡位」）。
   这里不给固定宽度：各行日期格式固定 + tabular-nums 等宽数字 ⇒ 各列宽度天然一致，
   标题左边缘仍然对齐，且比原主题 global.css 的 150px 更省、标题拿到更多空间。 */
.notice_item_time {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--f-text-4);
  font-size: var(--f-fs-sm);
  font-variant-numeric: tabular-nums;
}

.notice_item_title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--f-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice_item_title:hover {
  color: var(--f-primary-deep);
}

.user-center_resources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f-space-3);
}

/* =====================================================================
   5. 安全中心（security-*）
   ---------------------------------------------------------------------
   ⚠️ 横幅配色契约（改这里前务必先读）：
   模板根节点保留着 Bootstrap 工具类 .bg-primary，而 .bg-primary 自带
   `background-color: … !important`，会压过任何非 important 的背景声明。
   所以横幅底色一律由本段的 .security-header 用 !important 接管，
   并且——只要底色是饱和实色，横幅内所有文字就必须是白色系，
   绝不能沿用「浅底 + 深墨字」的卡片配色：实测灰蓝 #64748B 落在
   品牌绿 #2FA98A 上只有 1.62:1，基本等于看不见。
   下方 .security-item* 位于白色卡片之上，仍沿用浅底 + 品牌色字形。
   ===================================================================== */
.security-header {
  /* ⚠️ 这里不能加 display:flex —— 横幅内部是一个 Bootstrap .row/.col 栅格，
     一旦把 .security-header 变成 flex 容器，唯一的子元素 .card-body 会变成
     「收缩到内容宽度」的 flex 项，整行栅格随之塌陷（栏目被压成几十像素宽，
     文字被迫逐字折行）。布局交给 Bootstrap 栅格，这里只管外观。 */
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--f-radius-lg);
  /* !important：必须压过 .bg-primary 的 background-color !important。
     ⚠️ 配色契约（对齐全站品牌）：横幅必须与主按钮 / 分页选中同款
     靛蓝→紫罗兰渐变（--f-grad），否则一大块青色横幅会「不像这个主题」。
     渐变两端 #2C64FF / #8B3BFF 的白字对比度 4.80:1 / 5.04:1，横幅内所有
     白色文字（用户名 / 徽章 / 胶囊 / 星标）均 ≥4.5:1（AA）。 */
  background: var(--f-grad) !important;
  box-shadow: 0 12px 26px -14px rgba(90, 70, 255, .50);
}

/* 头像：外层只负责定位，内层才是可见的圆圈。
   模板上挂着 .bg-info（蓝色实底，带 !important），必须一并覆盖。
   白底 + 深绿首字（5.0:1），比半透明白圈 + 白字更清晰。 */
.security-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: none !important;
  box-shadow: none;
}

.security-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  /* 模板上有 p-4（padding 1.5rem），会把内容区挤成 8px，这里清零 */
  padding: 0 !important;
  border-radius: 50%;
  background: #fff !important;
  color: var(--f-violet) !important;
  font-size: 22px;
  font-weight: var(--f-fw-semibold);
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .55);
}

.security-info {
  min-width: 0;
}

/* 横幅内边距由 .card-body 承担（模板自带），这里只调一档 */
.security-header > .card-body {
  padding: var(--f-space-5);
}

.security-username {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--f-space-2);
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-semibold);
  color: #fff;
}

/* 实名认证徽章：白底 + 深绿字（5.0:1）。
   模板用的是 .badge-success（白字落在 #34C38F 上仅 2.2:1）以及
   .badge-light.novalid（页面内联 <style> 里的半透明白底 + 白字），
   两者都带 !important，故这里也必须用 !important 覆盖。 */
.security-header .badge {
  background: #fff !important;
  color: var(--f-violet) !important;
  box-shadow: none !important;
  font-weight: var(--f-fw-medium);
}

.security-strength {
  margin-top: var(--f-space-2);
}

/* 账号安全强度胶囊：同样是白底 + 深绿字。
   层次改用字号/字重区分，不再靠降低文字不透明度（那会掉对比度） */
.security-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--f-radius-pill);
  background: #fff;
  color: var(--f-violet);
  font-size: var(--f-fs-sm);
}

/* 胶囊内的数值沿用胶囊文字色——这里绝不能写死白色，否则白底白字 */
.security-label .security-text {
  color: inherit;
}

.security-text {
  font-size: var(--f-fs-sm);
}

.security-meta {
  color: #fff;
  font-size: var(--f-fs-sm);
}

/* 强度进度条：模板里硬编码了 .bg-danger（亮红，带 !important），
   掉在绿底上既不协调也不清晰，这里统一改成白色进度条 + 半透明轨道。
   特异性 (0,3,0) 高于 .bg-danger 的 (0,1,0)，同为 !important 时按特异性取胜。 */
.security-header .progress {
  height: 6px;
  background: rgba(255, 255, 255, .26);
}

.security-header .progress .progress-bar {
  background-color: #fff !important;
  border-radius: var(--f-radius-pill);
}

/* 右侧账户信息：折行排列的三行「标签 + 值」，标签定宽右对齐，读起来整齐 */
.security-meta__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.security-meta__list > li {
  display: flex;
  align-items: baseline;
  gap: var(--f-space-2);
  min-width: 0;
}

.security-meta__k {
  flex: 0 0 68px;
  /* 深浅靠字号与字重区分即可；再往下压不透明度会跌破 4.5:1 */
  color: rgba(255, 255, 255, .95);
}

.security-meta__v {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  overflow-wrap: anywhere;
}

.security-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--f-space-4);
}

.security-item {
  display: flex;
  align-items: flex-start;
  gap: var(--f-space-3);
  padding: var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  background: var(--f-surface);
  transition: border-color var(--f-dur-fast) var(--f-ease),
              box-shadow var(--f-dur-fast) var(--f-ease);
}

.security-item:hover {
  border-color: var(--f-primary-200);
  box-shadow: var(--f-shadow-sm);
}

.security-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--f-radius-sm);
  background: var(--f-primary-50);
  color: var(--f-primary-active);
  font-size: 18px;
}

/* 模板在图标方块上交替挂着 .bg-primary / .bg-info，本意只是「换个颜色做区分」。
   但这两个工具类带 !important 的实色底，会把方块刷成实心绿 / 实心蓝，
   而字形颜色仍是品牌绿 → 绿底绿图标，图标完全看不见（实测已复现）。
   这里把它们落回同色系的「浅底 + 同色深字」，既保留区分度又保证可见。 */
.security-item-icon.bg-primary {
  background: var(--f-primary-50) !important;
  color: var(--f-primary-active) !important;
}

.security-item-icon.bg-info {
  background: var(--f-info-bg) !important;
  color: var(--f-info-ink) !important;
}

.security-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.security-item-title {
  font-size: var(--f-fs-base);
  font-weight: var(--f-fw-medium);
  color: var(--f-ink-800);
  margin-bottom: 2px;
}

/* 标题后的「已设置」弱化小字，勾选图标用品牌色 */
.security-item-title small {
  font-size: var(--f-fs-sm);
  font-weight: var(--f-fw-normal);
  color: var(--f-text-3);
}

.security-item-title small .fa-check-circle {
  color: var(--f-primary-active);
}

.security-item-desc {
  font-size: var(--f-fs-sm);
  color: var(--f-text-3);
}

.security-item-image {
  flex: 0 0 auto;
}

/* =====================================================================
   6. 支付 / 账单（pay-* / addfunds-payment）
   ===================================================================== */
.pay-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--f-space-3);
}

.pay-title {
  color: var(--f-text-3);
  font-size: var(--f-fs-base);
}

.pay-amount {
  font-size: var(--f-fs-2xl);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
  font-variant-numeric: tabular-nums;
}

/* ⚠️ 支付区（.pay-area）—— 两条纪律，改错任何一条都会让弹窗里的二维码贴左：
   1) 不要给它写宽度（尤其别写 width: 100%）。
      原主题这条规则刻意只有 margin + position，靠上面 .pay-body 的
      align-items: center 把 200px 的支付区「收缩居中」——
      写满宽后，里面的 #pay-type{width:200px}（二维码 + 支付方式下拉）就贴到左边了。
   2) 不要删 position: relative。
      .par_balance（信用额余额遮罩）和 .pay_area_mask（支付成功遮罩）都是
      position: absolute，必须由 .pay-area 当定位上下文；
      否则会认到 Bootstrap 给 .modal-body 的 relative 上，遮罩跑到弹窗顶部。
   契约已脚本化进 theme-check.py [14]。 */
.pay-area {
  position: relative;
}

/* .pay-html / .pay-jump / .pay-insert / .pay-none 等类在当前 pay.tpl 中已无引用
   （属原主题遗留），这里仅保留宽度兜底，不再复刻 200×200 的旧盒模型。 */
.pay-html {
  width: 100%;
}

.pay-jump,
.pay-url {
  color: var(--f-accent-active);
  word-break: break-all;
}

.pay-insert {
  width: 100%;
}

.pay-none {
  display: none;
}

.pay-text {
  color: var(--f-text-3);
  font-size: var(--f-fs-sm);
}

.pay-tools {
  display: flex;
  gap: var(--f-space-2);
}

/* 充值支付方式卡片 */
.addfunds-payment {
  position: relative; /* 选中角标 ::after 的定位基准（原缺失，角标会飘） */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-space-2);
  height: 56px;
  padding: var(--f-space-2) var(--f-space-3);
  border: 1px solid var(--f-border-strong);
  border-radius: var(--f-radius-sm);
  background: var(--f-surface);
  /* 无 logo 时直接显示网关名称：显式高对比色，勿用低对比令牌 */
  color: var(--f-text);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--f-dur-fast) var(--f-ease),
              background var(--f-dur-fast) var(--f-ease),
              box-shadow var(--f-dur-fast) var(--f-ease);
}

.addfunds-payment:hover {
  border-color: var(--f-primary-300);
  background: var(--f-primary-50);
}

.addfunds-payment.active {
  border-color: var(--f-primary);
  background: var(--f-primary-50);
  /* 暗底上的文字必须用亮青（--f-primary-active #0EA5E9 在暗底偏暗） */
  color: var(--f-cyan-bright);
  box-shadow: var(--f-ring);
}

/* 网关 logo 是「图标 + 深色 wordmark」合成的位图（如 支付宝/微信支付/银行转账），
   深色 wordmark 落在深色卡片上对比度仅 ≈1.5:1，等于隐形。
   给 logo 加浅色底板（胶囊）：品牌色图标不动，图片内深色文字恢复可读。 */
.addfunds-payment img {
  box-sizing: content-box;
  max-height: 22px;
  max-width: calc(100% - 18px);
  width: auto;
  padding: 5px 9px;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FB 100%);
  box-shadow: 0 1px 2px rgba(3, 6, 14, .30), inset 0 0 0 1px rgba(255, 255, 255, .75);
}
.addfunds-payment:hover img,
.addfunds-payment.active img {
  box-shadow: 0 2px 10px rgba(34, 211, 238, .30), inset 0 0 0 1px rgba(255, 255, 255, .90);
}

/* 账单单选按钮组 */
.btn-radio-bill {
  border: 1px solid var(--f-border-strong);
  background: var(--f-surface);
  color: var(--f-text-2);
}

.btn-radio-bill.active {
  background: var(--f-primary-active);
  border-color: var(--f-primary-active);
  color: #fff;
}

.cancelBtn {
  color: var(--f-text-3);
  background: transparent;
  border: 1px solid var(--f-border-strong);
  border-radius: var(--f-radius-sm);
}

.cancelBtn:hover {
  color: var(--f-text);
  background: var(--f-surface-alt);
}

.btn-default {
  background: var(--f-surface);
  border: 1px solid var(--f-border-strong);
  color: var(--f-text-2);
}

.btn-default:hover {
  background: var(--f-surface-alt);
  color: var(--f-text);
}

/* 按钮组切换（产品状态筛选） */
.btn-group-toggle .btn-primary {
  background: var(--f-surface);
  color: var(--f-text-2);
  border: 1px solid var(--f-border-strong);
}

.btn-group-toggle .btn-primary.active,
.btn-group-toggle .btn-primary:active {
  background: var(--f-primary-active) !important;
  border-color: var(--f-primary-active) !important;
  color: #fff !important;
}

/* =====================================================================
   7. 工单（ticket-* / post-by）
   ===================================================================== */
.ticket-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90px;
  padding: var(--f-space-5);
  margin-bottom: var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  background: var(--f-surface);
  background-image: none;
  transition: box-shadow var(--f-dur) var(--f-ease);
}

.ticket-item:hover {
  box-shadow: var(--f-shadow-sm);
}

.ticket-reply {
  border: 1px solid var(--f-border) !important;
  border-radius: var(--f-radius-md);
  margin-bottom: var(--f-space-4);
  overflow: hidden;
  background: var(--f-surface);
}

.ticket-reply.admin {
  border-left: 3px solid var(--f-accent);
}

.ticket-reply.admin .post-by {
  background: var(--f-accent-50);
}

.post-by {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--f-space-3);
  padding: var(--f-space-3) var(--f-space-4);
  border-bottom: 1px solid var(--f-divider);
  background: var(--f-surface-alt);
  font-size: var(--f-fs-sm);
  color: var(--f-text-3);
}

.post-user {
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
  color: var(--f-text-2);
  font-weight: var(--f-fw-medium);
}

.post-date {
  color: var(--f-text-4);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   8. 知识库 / 新闻（kb-* / news-*）
   ===================================================================== */
.kb-items,
.news-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--f-space-4);
}

.kb-item,
.news-item {
  padding: var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  background: var(--f-surface);
  transition: border-color var(--f-dur-fast) var(--f-ease),
              box-shadow var(--f-dur-fast) var(--f-ease);
}

.kb-item:hover,
.news-item:hover {
  border-color: var(--f-primary-200);
  box-shadow: var(--f-shadow-sm);
}

.kb-link {
  color: var(--f-text);
  font-weight: var(--f-fw-medium);
}

.kb-link:hover {
  color: var(--f-primary-deep);
}

/* =====================================================================
   9. 推广联盟（aff-* / affiliates-*）
   ===================================================================== */
.affs-nav {
  border-bottom: 1px solid var(--f-border);
  gap: var(--f-space-2);
}

.aff-item {
  padding: var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  background: var(--f-surface);
  text-align: center;
  transition: box-shadow var(--f-dur) var(--f-ease);
}

.aff-item:hover {
  box-shadow: var(--f-shadow-sm);
}

.aff-item-title {
  color: var(--f-text-3);
  font-size: var(--f-fs-sm);
}

.aff-item-num,
.aff-amo-num {
  font-size: var(--f-fs-xl);
  font-weight: var(--f-fw-semibold);
  color: var(--f-ink-800);
  font-variant-numeric: tabular-nums;
}

.aff-amo-nums {
  display: flex;
  gap: var(--f-space-4);
  flex-wrap: wrap;
}

.affiliates-item-title {
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-medium);
  color: var(--f-ink-800);
}

.affiliates-item-text {
  color: var(--f-text-3);
  font-size: var(--f-fs-sm);
}

/* =====================================================================
   10. 认证页（auth-* / login_right / type-*）
   ===================================================================== */
.auth-full-bg {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(140deg, var(--f-primary-50) 0%, var(--f-accent-50) 55%, var(--f-bg) 100%);
}

.auth-full-bg .bg-overlay,
.bg-overlay {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1;
}

.auth-full-page-content {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.login_right {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.auth-review-carousel {
  padding: var(--f-space-6) 0;
}

.auth-review-carousel h1.text-white {
  color: var(--f-ink-800) !important;
  font-size: var(--f-fs-2xl);
  font-weight: var(--f-fw-semibold);
  line-height: 1.4;
}

.auth-review-carousel p.text-white-50 {
  color: var(--f-text-2) !important;
  font-size: var(--f-fs-base);
  line-height: 1.7;
}

/* 认证类型选择卡片 */
.type-item {
  display: flex;
  align-items: flex-start;
  gap: var(--f-space-3);
  padding: var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  background: var(--f-surface);
  cursor: pointer;
  transition: border-color var(--f-dur-fast) var(--f-ease),
              box-shadow var(--f-dur-fast) var(--f-ease);
}

.type-item:hover {
  border-color: var(--f-primary-300);
  box-shadow: var(--f-shadow-sm);
}

.type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--f-radius-sm);
  background: var(--f-primary-50);
  color: var(--f-primary-active);
  font-size: 20px;
}

.type-title {
  font-size: var(--f-fs-base);
  font-weight: var(--f-fw-medium);
  color: var(--f-ink-800);
}

.type-desc {
  font-size: var(--f-fs-sm);
  color: var(--f-text-3);
}

.type-info {
  min-width: 0;
}

.personal,
.enterprises {
  border-radius: var(--f-radius-md);
}

.not_certified_title {
  font-size: var(--f-fs-md);
  font-weight: var(--f-fw-medium);
  color: var(--f-ink-800);
}

.not_certified_text {
  font-size: var(--f-fs-sm);
  color: var(--f-text-3);
}

/* 购物车登录/注册切换（契约：.cart-login / .cart-register 内的 btn-primary 反色） */
.cart-login .btn-primary,
.cart-register .btn-primary {
  color: var(--f-text-2);
  background-color: var(--f-surface);
  border-color: var(--f-surface);
}

.cart-login .btn-primary.active,
.cart-register .btn-primary.active {
  border-bottom: 2px solid var(--f-primary);
  color: var(--f-primary-active);
}

/* =====================================================================
   11. 产品状态雪碧图（.sprite / .sprite2）
       位置值沿用原图，仅保证背景图路径与尺寸正确
   ===================================================================== */
.sprite {
  display: inline-block;
  background-image: url("../img/status2.png");
  background-size: 48px;
  background-repeat: repeat-y;
  width: 48px;
  height: 48px;
}

/* ⚠️ 仅对「绿色运行态」雪碧帧做紫化：hue-rotate(110deg) saturate(2.2)
   把绿圈 #47BF8A 转成主题紫 #B587FF（≈ --f-violet-bright），白色播放三角不变色。
   红色 closed / 灰色 pause·unknown / 其它语义帧一律不动，避免误染色。 */
.sprite.start { background-position: 0px 0px; filter: hue-rotate(110deg) saturate(2.2); }
.sprite.closed { background-position: 0px -55px; }
.sprite.waitOn { background-position: 0px -218px; }
.sprite.waitOff { background-position: 0px -272px; }
.sprite.pause { background-position: 0px -485px; }
.sprite.unknown { background-position: 0px -163px; }
.sprite.waiting { background-position: 0px -859px; }

.sprite2 {
  display: inline-block;
  background-image: url("../img/status3.0.png");
  background-size: 48px;
  background-repeat: repeat-y;
  width: 48px;
  height: 48px;
}

.sprite2.Pending { background-position: 0px 0px; }
.sprite2.Fraud { background-position: 0px -230px; }
.sprite2.Deleted { background-position: 0px -77px; }
.sprite2.Cancelled { background-position: 0px -154px; }
/* 域名状态「Active」绿圈 #3FBF70 → 主题紫，与产品运行态一致 */
.sprite2.Active { background-position: 0px -307px; filter: hue-rotate(110deg) saturate(2.2); }
.sprite2.Suspended { background-position: 0px 48px; }

.ststus-box {
  display: inline-flex;
  align-items: center;
  gap: var(--f-space-2);
}

.powerimg {
  width: 48px;
  height: 48px;
}

.power-detail-box {
  padding: var(--f-space-4);
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-md);
  background: var(--f-surface);
}

.module_chart_date {
  display: flex;
  align-items: center;
  gap: var(--f-space-2);
  color: var(--f-text-3);
  font-size: var(--f-fs-sm);
}

/* =====================================================================
   12. 表单辅助类
   ===================================================================== */
.form-control-label {
  font-size: var(--f-fs-base);
  color: var(--f-text-3);
  font-weight: var(--f-fw-normal);
}

.label-color {
  color: var(--f-text-2) !important;
}

.form-error,
.help-block {
  display: block;
  margin-top: var(--f-space-1);
  font-size: var(--f-fs-sm);
  color: var(--f-danger-ink);
}

/* =====================================================================
   13. 第三方控件补丁（沿用原主题，保证功能与观感不退化）
   ===================================================================== */
/* 13.1 Summernote 富文本 */
.note-editor .note-toolbar {
  border-radius: var(--f-radius-sm) var(--f-radius-sm) 0 0;
  overflow: hidden;
  background: var(--f-surface-alt);
  border-bottom: 1px solid var(--f-border);
}

.note-editor.note-frame {
  border: 1px solid var(--f-border-strong) !important;
  border-radius: var(--f-radius-sm);
  box-shadow: none;
}

.note-editor.note-frame .note-editing-area .note-editable {
  color: var(--f-text);
  background: var(--f-surface);
  min-height: 150px;
}

.note-btn-group .note-btn {
  border-color: var(--f-border) !important;
  background: var(--f-surface);
  color: var(--f-text-2);
}

/* 13.2 layui-layer（idcsmart 弹窗） */
.idcsmart.layui-layer {
  border-radius: var(--f-radius-md);
  overflow: hidden;
}

.idcsmart .layui-layer-title {
  display: flex;
  align-items: center;
  border-radius: var(--f-radius-md) var(--f-radius-md) 0 0;
  border-bottom: 1px solid var(--f-divider);
  background: var(--f-surface);
  color: var(--f-ink-800);
  font-weight: var(--f-fw-semibold);
}

.idcsmart .layui-layer-title:before {
  content: '';
  width: 3px;
  height: 14px;
  display: inline-block;
  background-color: var(--f-primary);
  border-radius: var(--f-radius-xs);
  margin-right: 10px;
}

.idcsmart .layui-layer-btn {
  padding: 12px 15px;
  border-top: 1px solid var(--f-divider);
}

.idcsmart .layui-layer-btn > a {
  min-height: 34px;
  min-width: 80px;
  border-radius: var(--f-radius-sm);
  margin-top: 0;
  line-height: 34px;
  text-align: center;
}

.idcsmart .layui-layer-btn .layui-layer-btn0 {
  color: #fff !important;
  background-color: var(--f-primary-active) !important;
  border-color: var(--f-primary-active) !important;
}

.idcsmart .layui-layer-btn .layui-layer-btn0:hover {
  background-color: var(--f-primary-deep) !important;
  color: #fff !important;
}

.idcsmart .layui-layer-setwin {
  top: 13px;
}

/* 13.3 ionRangeSlider */
.irs--square .irs-handle {
  border: 2px solid var(--f-primary) !important;
  width: 12px !important;
  height: 12px !important;
  top: 26px !important;
}

.irs--square {
  width: 80%;
  float: left;
  margin-right: 20px;
}

/* 13.4 bootstrap-select */
.bootstrap-select {
  position: relative;
}

.bootstrap-select::after {
  content: '';
  width: 0;
  height: 0;
  border-top: 4px solid var(--f-text-4);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  right: 10px;
  top: 16px;
  pointer-events: none;
}

.bootstrap-select .dropdown-menu {
  min-width: 100% !important;
}

.dropdown-menu {
  min-width: 5rem !important;
}

/* 13.5 ZdCascader 省市区级联（自研控件） */
.zd-cascader-wrap .zd-input__inner {
  height: 36px;
}

.zd-cascader-wrap.is-focus .zd-input .zd-input__inner,
.zd-cascader-wrap:focus-within .zd-input__inner {
  border-color: var(--f-primary) !important;
}

/* 13.6 屏蔽 Chrome 自动填充的黄色背景 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition-delay: 99999s !important;
  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out !important;
}

input:-webkit-autofill {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* 13.7 保留原主题的一处约定：隐藏 badge-info（避免改动导致界面多出元素） */
.badge.badge-info {
  display: none;
}

/* =====================================================================
   13.8 后端下发颜色的状态徽章（对比度兜底）
   ---------------------------------------------------------------------
   工单列表/详情的状态徽章底色由后端下发（supporttickets.tpl /
   viewticket.tpl 内联 style="background-color:..."），颜色深浅不可控：
     · supporttickets 徽章没写文字色 → 继承表格深字，落在中等饱和的
       绿/蓝/黄底上就是「彩底 + 深字」，和之前"已激活看不清"是同一类问题；
     · viewticket 徽章内联写死 color:#fff → 后端若下发浅色就是白底白字。
   处理：文字统一换深墨色（!important 可压过内联 color:#fff），
   并用一层 inset 阴影把任意底色调成浅粉彩 —— 底色色相保留（状态可辨），
   深字在任何后端色上都能读清。与 13.7 的 .badge-soft-* 同一设计语言。
   contracthost.tpl 则是把后端颜色当文字色直接放在白卡上，
   浅色时会看不清，用 filter 压深保色相。
   ===================================================================== */
.status.badge[style*="background-color"],
.f-ticket__title .badge[style*="background-color"] {
  color: var(--f-ink-800) !important;
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .78);
}

.badge[style^="color:"],
.badge[style^="color: "] {
  filter: brightness(.62) saturate(1.6);
}

/* =====================================================================
   14. 打印优化
   ===================================================================== */
@media print {
  .vertical-menu,
  #page-topbar,
  .footer,
  .f-preloader,
  .f-mask {
    display: none !important;
  }
}