/* ============================================================
   MOFAN UI 精修覆盖层 v1 —— 商业级云厂商视觉
   仅覆盖视觉；不修改任何模板结构 / ID / JS 交互。
   在 cloudnexa.css 之后加载。
   风格参考：雨云 / 阿里云国际 / Vultr 的克制蓝调 + 精致灰阶。
   ============================================================ */

/* ---------- 1. 设计令牌：更干净的浅色与深蓝暗色 ---------- */
:root {
  --surface-base:    247 248 250;   /* 页面底：微冷灰 */
  --surface-card:    255 255 255;   /* 卡片 */
  --surface-elevated:255 255 255;
  --surface-hover:   240 243 247;
  --surface-sunken:  244 246 249;
  --content-primary:   17 24 39;
  --content-secondary: 71 85 105;
  --content-tertiary:  148 163 184;
  --border-subtle:  227 232 239;
  --border-strong:  203 210 220;
  --border-brand:   37 99 235;
  --accent-glow:    37 99 235;
  color-scheme: light;
}
.dark {
  --surface-base:    8 12 22;
  --surface-card:    15 22 38;
  --surface-elevated:20 29 48;
  --surface-hover:  24 34 56;
  --surface-sunken: 11 17 30;
  --content-primary:   236 240 246;
  --content-secondary: 156 170 192;
  --content-tertiary:  100 116 139;
  --border-subtle:  30 41 61;
  --border-strong:  51 65 87;
  --border-brand:   59 130 246;
  --accent-glow:    56 189 248;
  color-scheme: dark;
}

/* ---------- 2. 品牌渐变：收敛为「蓝 → 靛」专业渐变 ---------- */
.bg-gradient-brand {
  background-image: linear-gradient(135deg, #2563eb 0%, #5b4ee6 52%, #7C3AED 100%) !important;
}
.text-gradient-brand {
  background-image: linear-gradient(135deg, #2563eb 0%, #6d28d9 100%);
}
.dark .text-gradient-brand {
  background-image: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
}
.shadow-glow { box-shadow: 0 8px 24px rgba(37, 99, 235, .28); }
.shadow-glow-sm { box-shadow: 0 4px 14px rgba(37, 99, 235, .22); }

/* ---------- 3. 全局字体与正文 ---------- */
body {
  letter-spacing: .01em;
  font-feature-settings: "cv11", "ss01", "kern", "liga";
}
h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }
.num-mono, .num {
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. 卡片体系：统一圆角 12px + 细边框 + 柔和阴影 ---------- */
.card-base, .card-elevated, .card-sunken, .glass-card, .glass-card-strong {
  border-radius: 12px;
}
.card-elevated {
  border-color: rgb(var(--border-subtle) / .9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .10);
}
.dark .card-elevated {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .5);
}
.card-base:hover, .card-elevated:hover { border-color: rgb(var(--border-strong)); }

/* ---------- 5. 按钮层级：主行动唯一、次级统一 ghost ---------- */
.btn-glow {
  box-shadow: 0 6px 18px rgba(37, 99, 235, .30);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-glow:hover {
  box-shadow: 0 10px 26px rgba(37, 99, 235, .40);
  transform: translateY(-1px);
  filter: brightness(1.05);
}
/* 次级按钮：白底描边，进入感温和 */
a.bg-surface-card.border.border-border-subtle,
a.rounded-xl.bg-surface-card,
a.rounded-lg.bg-surface-card {
  transition: border-color .18s ease, background .18s ease, transform .15s ease;
}
a.bg-surface-card:hover {
  border-color: rgb(var(--border-brand)) !important;
  background: rgb(var(--surface-hover)) !important;
}
/* 统一 h-12 主按钮为 44px 高、10px 圆角 */
.h-12.rounded-xl {
  border-radius: 10px;
  height: 44px;
}
.h-11.rounded-lg { border-radius: 10px; }
.h-10.rounded-lg { border-radius: 9px; }

/* ---------- 6. 导航：磨砂浮起 + 克制的激活态 ---------- */
#cnHeader { border-bottom-color: rgb(var(--border-subtle) / .8); }
#cnHeader .nav-link,
#cnHeader a[class*="px-3 py-2"] {
  border-radius: 8px;
}
#cnHeader a:hover,
#cnHeader a:focus-visible {
  background: rgb(var(--surface-hover)) !important;
  color: rgb(var(--border-brand)) !important;
}

/* ---------- 7. 公告条：低调深蓝细条 ---------- */
#cnAnnounce {
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 60%, #4f46e5 100%);
  letter-spacing: .02em;
}

/* ---------- 8. 表格：精致表头 + 行 hover ---------- */
.table-row-hover:hover { background: rgb(var(--surface-hover) / .7); }
.border-collapse-fine th {
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgb(var(--content-tertiary));
  background: rgb(var(--surface-sunken) / .6);
}

/* ---------- 9. 状态徽章：统一为轻底深字 ---------- */
.bg-status-success-bg { background: rgba(22, 163, 74, .10); }
.bg-status-danger-bg  { background: rgba(220, 38, 38, .10); }
.bg-status-warning-bg { background: rgba(217, 119, 6, .12); }
.bg-status-info-bg    { background: rgba(37, 99, 235, .10); }

/* ---------- 10. 选购页：套餐卡/时长卡/选配 ---------- */
.plan-card {
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.plan-card:hover { transform: translateY(-1px); }
.plan-card.open {
  /* 去掉粗蓝框套娃：改为浅蓝底 + 顶部色条 */
  border-color: rgb(var(--border-subtle)) !important;
  background: linear-gradient(180deg, rgb(var(--border-brand) / .045), rgb(var(--surface-card)) 120px) !important;
  box-shadow: 0 12px 32px -16px rgba(37, 99, 235, .25);
  position: relative;
  overflow: hidden;
}
.plan-card.open::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
}
.plan-name { letter-spacing: -.01em; }
.plan-price .p { color: #1f2937; }
.dark .plan-price .p { color: #f1f5f9; }

/* 时长卡：选中态 + 折扣角标精致化 */
.cycle-card {
  border-radius: 10px;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cycle-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .12); }
.cycle-card.active {
  border-color: rgb(var(--border-brand)) !important;
  background: rgb(var(--border-brand) / .06) !important;
  box-shadow: 0 0 0 1px rgb(var(--border-brand) / .25), 0 6px 16px -8px rgba(37, 99, 235, .35);
}
/* 时长卡内价格降噪：划线价更淡、人民币更小 */
.cycle-card .orig { opacity: .6; }
.cycle-card .cny { font-size: .68rem; }
.save-badge {
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}

/* 选配 stepper：消费级圆形加减 */
.stepper { border-radius: 999px; }
.stepper button {
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.stepper button:hover { background: rgb(var(--border-brand) / .10) !important; color: rgb(var(--border-brand)) !important; }
.addon-row { transition: background .15s ease; border-radius: 8px; }
.addon-row:hover { background: rgb(var(--surface-sunken) / .5); }

/* 支付方式：选中更清晰 */
.pay-opt { border-radius: 10px; transition: all .15s ease; }
.pay-opt.active {
  border-color: rgb(var(--border-brand)) !important;
  box-shadow: 0 0 0 1px rgb(var(--border-brand) / .30);
}

/* 库存紧迫感 */
#qtyStock, .text-status-danger { font-weight: 600; }

/* 选配区标题分组 */
div:has(> .stepper) { border-bottom: 1px dashed rgb(var(--border-subtle)); }
div:has(> .stepper):last-child { border-bottom: none; }

/* ---------- 11. 操作系统选择器 ---------- */
#f_os {
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#f_os:focus {
  border-color: rgb(var(--border-brand));
  box-shadow: 0 0 0 3px rgb(var(--border-brand) / .18);
}
#f_os option { padding: 4px 8px; }

/* ---------- 12. 表单控件统一 ---------- */
.form-select, .form-control, input[class*="rounded-lg"]:not([type="checkbox"]):not([type="radio"]) {
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: rgb(var(--border-brand));
  box-shadow: 0 0 0 3px rgb(var(--border-brand) / .18);
}

/* ---------- 13. 控制台：侧边栏精致化 ---------- */
#cnSidebar nav a {
  border-radius: 9px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
#cnSidebar nav a:hover { transform: translateX(2px); }
#cnSidebar nav a.bg-brand-primary\/10,
#cnSidebar nav a[class*="bg-brand-primary/10"] {
  background: rgb(var(--border-brand) / .10) !important;
  box-shadow: inset 3px 0 0 rgb(var(--border-brand));
}
#cnSidebar nav a.bg-brand-primary\/10 i,
#cnSidebar nav a[class*="bg-brand-primary/10"] i { color: rgb(var(--border-brand)); }

/* 余额卡：渐变底 */
#cnSidebar div[style*="rgba(0,102,255,.06)"] {
  background: linear-gradient(150deg, rgb(var(--border-brand) / .12), rgb(79 70 229 / .08)) !important;
  border: 1px solid rgb(var(--border-brand) / .15);
  border-radius: 12px;
}

/* 控制台顶栏 */
header[class*="h-14"] {
  border-bottom-color: rgb(var(--border-subtle) / .8);
}

/* ---------- 14. 页脚：微调 ---------- */
footer a:hover { color: rgb(var(--border-brand)) !important; }

/* ---------- 15. 移动端微调 ---------- */
@media (max-width: 767.98px) {
  .card-elevated { border-radius: 10px; }
  .plan-card { border-radius: 10px; }
}

/* ---------- 16. 移动端专用修复 ---------- */
/* 1) Cookie 弹窗：小屏改底部通栏，不遮挡配置区 */
@media (max-width: 640px) {
  #cookieConsent {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 12px !important;
  }
}

/* 2) 选购页：标题区 chip 允许换行、副文案不截断 */
@media (max-width: 640px) {
  section[class*="bg-gradient-mesh"] .container {
    display: block !important;
  }
  section[class*="bg-gradient-mesh"] .flex.gap-2 {
    flex-wrap: wrap;
    margin-top: .75rem;
  }
  section[class*="bg-gradient-mesh"] .flex.gap-2 > div {
    flex: 1 1 auto;
    min-width: calc(33.33% - 0.6rem);
    justify-content: center;
  }
  section[class*="bg-gradient-mesh"] p {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: keep-all;
    text-wrap: balance;
    line-height: 1.65;
  }
  /* 新手指南：手机上 2 列卡片文字完整显示 */
  #guideBox .grid > div {
    min-width: 0;
  }
  #guideBox .grid p,
  #guideBox .grid div[class*="text-"] {
    word-break: break-word;
    line-height: 1.5;
  }
}

/* 3) 地区 Tab：小屏等宽换行、完整显示 */
@media (max-width: 480px) {
  .region-tabs .region-tab {
    flex: 1 1 45%;
    min-width: 0;
    text-align: center;
    padding: .55rem .5rem;
    font-size: .84rem;
  }
}

/* 4) 时长卡：小屏 2 列 */
@media (max-width: 480px) {
  .cycle-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .plan-price .p { font-size: 1.25rem; }
  /* 套餐头：小屏允许价格区收缩，避免 "$15." 被裁 */
  .plan-head { flex-wrap: wrap; }
  .plan-price { flex-shrink: 0; padding-left: .5rem; }
  .plan-head > div:first-child { min-width: 0; flex: 1 1 auto; }
  .plan-head > div:first-child .grid { min-width: 0; }
  .plan-head > div:first-child .grid > div { min-width: 0; }
}

/* 5) 订单摘要：小屏去 sticky、避免溢出 */
@media (max-width: 1023.98px) {
  .order-summary { position: static !important; margin-top: 1rem; }
}

/* 6) 控制台表格：小屏自动横向滚动（display:block 降级，桌面不受影响） */
@media (max-width: 767.98px) {
  main table.w-full,
  .card-elevated table.w-full {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  main table.w-full tbody,
  main table.w-full tr {
    display: table;
    width: 100%;
  }
}

/* ============================================================
   MOFAN UI 精修覆盖层 v5 —— 商业级进阶（2026-08）
   追加：按钮禁用态全局灰化 / btn-brand 体系 / 选中语言 / 细节打磨
   ============================================================ */

/* ---------- 17. 按钮禁用态：全局灰化，消除“可点视觉+拦截逻辑”冲突 ---------- */
button:disabled,
button[disabled] {
  cursor: not-allowed;
}
button:disabled[class*="bg-brand-primary"],
button:disabled[class*="btn-brand"],
button:disabled[class*="bg-gradient"],
button:disabled[class*="btn-glow"] {
  background: rgb(var(--border-strong)) !important;
  background-image: none !important;
  color: rgb(var(--content-tertiary)) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}
/* 禁用按钮内的图标继承灰字 */
button:disabled i { color: inherit; }

/* ---------- 18. btn-brand 主按钮：与品牌蓝对齐 + 弹性反馈 ---------- */
.btn-brand {
  background-image: linear-gradient(135deg, #2563eb 0%, #5b4ee6 52%, #7C3AED 100%) !important;
  box-shadow: 0 6px 18px -4px rgba(37, 99, 235, .45);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-brand:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -6px rgba(37, 99, 235, .55);
}
.btn-brand:active:not(:disabled) {
  transform: translateY(0) scale(.985);
  box-shadow: 0 3px 10px -3px rgba(37, 99, 235, .4);
}
.btn-brand:disabled {
  background: rgb(var(--border-strong)) !important;
  background-image: none !important;
  color: rgb(var(--content-tertiary)) !important;
  box-shadow: none !important;
  filter: none !important;
}
.dark .btn-brand { box-shadow: 0 8px 22px -6px rgba(37, 99, 235, .55); }

/* ---------- 19. 选中 chip 语言：描边 + 浅蓝底 + 内环（全站统一） ---------- */
.chip-option.active,
.pay-opt.active,
.cycle-card.active {
  border-color: rgb(var(--border-brand)) !important;
  background: rgb(var(--border-brand) / .07) !important;
  color: rgb(var(--border-brand)) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--border-brand) / .3);
  font-weight: 600;
}
/* 实心选中（地区 Tab 级） */
.chip-solid.active,
.region-tab.active {
  background: rgb(var(--border-brand)) !important;
  border-color: rgb(var(--border-brand)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgb(var(--border-brand) / .5);
}

/* ---------- 20. 套餐卡展开态：品牌蓝边框 + 顶部渐变色条 ---------- */
.plan-card.open {
  border-color: rgb(var(--border-brand) / .45) !important;
  background: rgb(var(--surface-card)) !important;
  box-shadow: 0 16px 40px -18px rgba(37, 99, 235, .35) !important;
}
.plan-card.open::before {
  background: linear-gradient(135deg, #2563eb, #7C3AED) !important;
}
.plan-card:hover { border-color: rgb(var(--border-brand) / .5) !important; }

/* ---------- 21. OS 选择器：选项 hover 与选中色 ---------- */
#f_os option:checked {
  background: rgb(var(--border-brand)) !important;
  color: #fff !important;
}
#f_os option {
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .12s ease;
}

/* ---------- 22. 主操作按钮统一（控制台「管理」等） ---------- */
a[class*="bg-brand-primary"][class*="rounded"],
button[class*="bg-brand-primary"][class*="rounded"] {
  transition: filter .15s ease, transform .12s ease, box-shadow .2s ease;
}
a[class*="bg-brand-primary"][class*="rounded"]:hover,
button[class*="bg-brand-primary"][class*="rounded"]:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .5);
}

/* ---------- 22b. 全站存量主按钮批量升级为品牌渐变（不改模板） ---------- */
a[class*="bg-brand-primary"][class*="hover:bg-brand-primary-hover"],
button[class*="bg-brand-primary"][class*="hover:bg-brand-primary-hover"],
a[class*="bg-brand-primary"][class*="btn-glow"],
button[class*="bg-brand-primary"][class*="btn-glow"] {
  background-image: linear-gradient(135deg, #2563eb 0%, #5b4ee6 52%, #7C3AED 100%) !important;
  box-shadow: 0 6px 18px -4px rgba(37, 99, 235, .45);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
a[class*="bg-brand-primary"][class*="hover:bg-brand-primary-hover"]:hover,
button[class*="bg-brand-primary"][class*="hover:bg-brand-primary-hover"]:hover:not(:disabled),
a[class*="bg-brand-primary"][class*="btn-glow"]:hover,
button[class*="bg-brand-primary"][class*="btn-glow"]:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -6px rgba(37, 99, 235, .55);
}
a[class*="bg-brand-primary"][class*="hover:bg-brand-primary-hover"]:active,
button[class*="bg-brand-primary"][class*="hover:bg-brand-primary-hover"]:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}
/* 小尺寸主按钮维持 10px 圆角，不随 hover 变形过大 */
a[class*="bg-brand-primary"][class*="h-8"],
button[class*="bg-brand-primary"][class*="h-8"],
a[class*="bg-brand-primary"][class*="h-9"],
button[class*="bg-brand-primary"][class*="h-9"] {
  box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .4);
}

/* ---------- 23. 状态徽章：统一直径与字重 ---------- */
span[class*="rounded"][class*="bg-status"] {
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}

/* ---------- 24. 监控进度条：圆角与过渡 ---------- */
.progress {
  border-radius: 999px !important;
  overflow: hidden;
}
.progress-bar {
  transition: width .6s cubic-bezier(.22, 1, .36, 1) !important;
}

/* ---------- 25. 表格：数字列右对齐、主键列等宽数字 ---------- */
.table-row-hover td.num-mono,
td.num-mono {
  font-feature-settings: "tnum", "zero";
}

/* ---------- 26. 空状态与提示块：更克制 ---------- */
p.text-content-secondary:empty { display: none; }

/* ---------- 27. 焦点可见性（键盘导航） ---------- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgb(var(--border-brand) / .25) !important;
  border-color: rgb(var(--border-brand)) !important;
  border-radius: 8px;
}

/* ---------- 28. 平滑滚动与减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   MOFAN UI 精修覆盖层 v6 —— 控制台表格/徽章/分页（2026-08）
   ============================================================ */

/* ---------- 29. 控制台表格：精致表头 + 行 hover 过渡 ---------- */
main table.w-full thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgb(var(--content-tertiary));
  background: rgb(var(--surface-sunken) / .55);
  border-bottom: 1px solid rgb(var(--border-subtle));
  white-space: nowrap;
}
main table.w-full tbody tr {
  transition: background .15s ease;
}
main table.w-full tbody tr:hover {
  background: rgb(var(--surface-hover) / .6);
}
/* 订单号/主机名等标识列使用等宽数字 */
main table td code {
  font-feature-settings: "tnum", "zero";
  letter-spacing: .01em;
}
/* 金额列右对齐观感（有 text-right 的不受影响） */
main table td.num-mono:not([class*="text-right"]):not([class*="text-left"]) {
  text-align: right;
}

/* ---------- 30. 状态徽章：统一尺寸与字重 ---------- */
td span[class*="bg-status"][class*="text-xs"],
td span[class*="rounded"][class*="text-xs"] {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
/* 徽章内图标尺寸一致 */
td span[class*="bg-status"] i {
  font-size: .72rem;
}

/* ---------- 31. 分页：统一精致化 ---------- */
nav[class*="justify-center"][class*="gap-2"] a {
  transition: all .15s ease;
  font-weight: 500;
}
nav[class*="justify-center"][class*="gap-2"] a:hover {
  background: rgb(var(--border-brand) / .06);
  border-color: rgb(var(--border-brand));
  color: rgb(var(--border-brand));
  transform: translateY(-1px);
}

/* ---------- 32. 空状态：图标与按钮呼吸感 ---------- */
td[class*="p-14"] > i.bi,
td[class*="p-12"] > i.bi {
  opacity: .85;
}

/* ---------- 33. 徽章容器换行安全 ---------- */
td > span[class*="bg-status"] + span[class*="bg-status"] {
  margin-left: .3rem;
}

/* ============================================================
   MOFAN UI 精修覆盖层 v7 —— 暗色模式精修（2026-08）
   ============================================================ */

/* ---------- 34. Cookie 弹窗暗色适配（覆盖内联白底） ---------- */
html.dark #cookieConsent {
  background: rgba(15, 22, 38, .97) !important;
  color: #E4E9F2 !important;
  border-color: #334155 !important;
}
html.dark #cookieConsent span[style*="color"] {
  color: #9CAAC0 !important;
}
html.dark #cookieConsent b {
  color: #F1F5F9 !important;
}

/* ---------- 35. 禁用按钮暗色对比增强 ---------- */
html.dark .btn-brand:disabled,
html.dark button:disabled[class*="bg-brand-primary"],
html.dark button:disabled[class*="btn-glow"] {
  background: #2A3650 !important;
  color: #8494AE !important;
  border: 1px solid #3A4763;
}
html.dark .btn-glow:disabled {
  background: #2A3650 !important;
  color: #8494AE !important;
}

/* ---------- 36. 订单摘要头部：暗色下降饱和 ---------- */
html.dark .os-head {
  background: linear-gradient(135deg, #16295C 0%, #241F52 55%, #2E1660 100%) !important;
}
html.dark #cnAnnounce {
  background: linear-gradient(90deg, #16295C 0%, #1C3570 60%, #241F52 100%) !important;
}

/* ---------- 37. 卡片边界：暗色下提亮一档 ---------- */
html.dark .plan-card {
  border-color: #24314B !important;
}
html.dark .cycle-card {
  border-color: #2A3650 !important;
  background: #131C31 !important;
}
html.dark .cycle-card:hover {
  border-color: #3B82F6 !important;
}
html.dark .cycle-card.active {
  background: rgba(59, 130, 246, .14) !important;
}
html.dark .addon-row {
  border-color: #2A3650 !important;
}
html.dark .qty-mini,
html.dark .qty-mini button {
  border-color: #2A3650 !important;
  background: #1A2540 !important;
}
html.dark .qty-mini input {
  background: #131C31 !important;
  color: #E4E9F2 !important;
}
html.dark .pay-opt {
  border-color: #2A3650 !important;
}

/* ---------- 38. OS 列表：暗色下改为浅蓝底选中（不过亮） ---------- */
html.dark #f_os option:checked {
  background: rgba(59, 130, 246, .35) !important;
  color: #DBEAFE !important;
}
html.dark #f_os option {
  background: #131C31;
  color: #E4E9F2;
}

/* ---------- 39. 次要文字对比提升（仅暗色） ---------- */
html.dark .text-content-secondary {
  color: #9CAAC0 !important;
}
html.dark .text-content-tertiary {
  color: #7C8AA5 !important;
}
html.dark .cycle-card .cny,
html.dark .cycle-card .orig {
  color: #7C8AA5 !important;
}
html.dark .os-row span:first-child {
  color: #9CAAC0 !important;
}

/* ---------- 40. 未展开套餐卡与页底层次 ---------- */
html.dark .plan-card:not(.open) {
  background: #10192E !important;
}
html.dark .card-sunken {
  background: #0E162A !important;
}
html.dark .order-summary {
  background: #10192E !important;
  border-color: #24314B !important;
}
html.dark .order-summary .os-body hr {
  border-color: #24314B !important;
}