/* ============================================================
   账户域主题适配补丁  (2026-09-11 13:02)
   问题：account.html / recharge.html 属于应用层 9 页，而应用层
   是 6 套深色主题（默认深海 ocean）。重构时误用了官网层的纸底
   浅色 + 写死卡片白，导致与其它应用页色调断层；且 --primary 在
   应用层是主题色（ocean 下为青 #00e0f0），写死的赭石兜底不生效。
   本补丁把账户域全部写死色改为跟随主题变量。
   ============================================================ */

/* 页底与正文：跟随主题 */
.ac-page-body {
  background: var(--bg, #030814);
  color: var(--text, #c8e8f4);
}

/* 卡片：跟随面板色 */
.ac-page-body .ac-card {
  background: var(--panel, rgba(6, 20, 38, 0.82));
  border-color: var(--line, rgba(0, 220, 240, 0.14));
  box-shadow: var(--shadow-card, 0 4px 16px rgba(0, 0, 0, 0.2));
}

/* 顶部返回按钮 / 幽灵按钮 / 胶囊筛选器 */
.ac-page-body .ac-back,
.ac-page-body .ac-btn--ghost,
.ac-page-body .ac-filter {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border-color: var(--line, rgba(0, 220, 240, 0.14));
  color: var(--text, #c8e8f4);
}

.ac-page-body .ac-btn--ghost:hover,
.ac-page-body .ac-back:hover {
  border-color: var(--primary, #00e0f0);
  color: var(--primary, #00e0f0);
}

/* 主按钮：主色底 + 深底文字（保证亮主色上的对比度） */
.ac-page-body .ac-btn--primary {
  background: var(--primary, #00e0f0);
  color: var(--bg, #030814);
}
.ac-page-body .ac-btn--primary:hover {
  background: var(--primary, #00e0f0);
  filter: brightness(1.12);
}

/* 激活态胶囊：主色底 + 深字 */
.ac-page-body .ac-filter.is-active {
  background: var(--primary, #00e0f0);
  border-color: var(--primary, #00e0f0);
  color: var(--bg, #030814);
}

/* 头像底 */
.ac-page-body .ac-avatar {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border-color: var(--line, rgba(0, 220, 240, 0.14));
}

/* 底部 Tab 栏：用不透明面板，避免内容透出 */
.ac-page-body .ac-tabs {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border-top: 1px solid var(--line, rgba(0, 220, 240, 0.14));
}

/* 输入框 */
.ac-page-body .ac-field input {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  color: var(--text, #c8e8f4);
  border-color: var(--line, rgba(0, 220, 240, 0.14));
}
.ac-page-body .ac-field input:disabled {
  background: rgba(255, 255, 255, 0.04);
}

/* 套餐卡 */
.ac-page-body .rc-plan {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border-color: var(--line, rgba(0, 220, 240, 0.14));
}
.ac-page-body .rc-plan:hover {
  border-color: var(--primary, #00e0f0);
  box-shadow: var(--shadow-card-hover, 0 12px 36px rgba(0, 0, 0, 0.35));
}
.ac-page-body .rc-plan__badge {
  background: var(--primary, #00e0f0);
  color: var(--bg, #030814);
}

/* 支付区块 / 生态入口卡 */
.ac-page-body .rc-pay,
.ac-page-body .ac-tile {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border-color: var(--line, rgba(0, 220, 240, 0.14));
}

/* 二维码区：必须白底才能扫，保留浅底 */
.ac-page-body .rc-qr {
  background: #ffffff;
  border-color: var(--line, rgba(0, 220, 240, 0.14));
}

/* 遮罩与弹窗 */
.ac-page-body .ac-modal {
  background: rgba(0, 0, 0, 0.62);
}
.ac-page-body .ac-modal__card {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border: 1px solid var(--line, rgba(0, 220, 240, 0.14));
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
}

/* Toast */
.ac-page-body .ac-toast {
  background: var(--panel-strong, rgba(10, 28, 50, 0.94));
  border: 1px solid var(--line, rgba(0, 220, 240, 0.14));
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
  color: var(--text, #c8e8f4);
}

/* 进度条 / 骨架 / 空态图标的底色与描边 */
.ac-page-body .ac-pools__bar,
.ac-page-body .ac-eco__track,
.ac-page-body .ac-skeleton {
  background: rgba(255, 255, 255, 0.08);
}
.ac-page-body .ac-state__icon {
  color: rgba(255, 255, 255, 0.28);
}

/* 桌面端 Tab 转顶部时背景透明，跟随页面 */
@media (min-width: 900px) {
  .ac-page-body .ac-tabs {
    background: none;
    border-top: none;
    border-bottom: 1px solid var(--line, rgba(0, 220, 240, 0.14));
  }
}