@charset "UTF-8";
/* ==================== 详情页暗金主题（Bootstrap 4 覆盖层） ==================== */
/* 与新首页 home.css 变量同源；仅覆盖颜色/背景，不动 Bootstrap 栅格布局 */
:root {
  --bg-dark: #0b0d12;
  --bg-panel: #12151d;
  --gold: #d4af37;
  --text: #e8e2d0;
  --text-muted: #9a937f;
  --line: rgba(212, 175, 55, 0.25);
}

/* 全局底色与文字 */
body {
  background: var(--bg-dark);
  color: var(--text);
}
a { color: var(--gold); }

/* 主体背景：原浅色头图/底图区整体换暗底；padding 压 0 覆盖 common.css 的 42.2rem 大图留白（导航已改 in-flow 两层，内容紧贴导航） */
.main > .main-bg {
  background: var(--bg-dark);
  padding-top: 0;
}

/* 右侧内容卡片区 */
.main-content-right {
  background: var(--bg-panel) !important;
  border: 1px solid var(--line);
  color: var(--text);
}
.content {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
}

/* 标题区 */
.content-right-title {
  border-bottom: 1px solid var(--line);
}
.title { color: var(--gold); }

/* 面包屑（您的位置） */
.right-location,
.right-location a {
  color: var(--text-muted) !important;
}
.right-location a:hover {
  color: var(--gold) !important;
}

/* 内容列表链接（富文本/列表兜底，各页专属 CSS 若自带配色则优先） */
.content ul li a { color: var(--text); }
.content ul li a:hover { color: var(--gold); }

/* 分页：Bootstrap 4 结构 ul.pagination > li.page-item > a/span.page-link
   （驱动见 app/paginator/Bootstrap4.php；BS3 的 li > a 选择器已随驱动替换一并删除）
   ⚠️ 特异性必须压过 Bootstrap 4，否则观感回退（BS4 那两条的声明值就是蓝底白字 #007bff / 白底）——
      BS4：`.pagination-sm .page-link` (0,2,0)、`.page-item.active/.disabled .page-link` (0,3,0)；
      本段（浏览器 CSSOM 实取）：普通 `.pagination > li.page-item > .page-link` = (0,3,1)，
      hover 与两个态 = (0,4,1)。若把态规则退回 `.pagination .page-link` 一档 (0,2,0)，必输给 BS4 的 (0,3,0)。 */
.pagination > li.page-item > .page-link {
  background: var(--bg-panel);
  color: var(--gold);
  border: 1px solid var(--line);
  margin: 0 0.3rem;
  padding: 0.3rem 0.7rem;
  /* 原 BS3 结构下字号继承 .page-bottom 的 1rem；BS4 的 .pagination-sm .page-link 会压到 .875rem，
     原声明块没有 font-size 可继承，故显式写回，保持改动前字号 */
  font-size: 1rem;
  text-decoration: none;
}
.pagination > li.page-item > .page-link:hover {
  background: var(--gold);
  color: #0b0d12;
}
/* 当前页：金底深字（本规则 CSSOM 实取 (0,4,1)，稳压 BS4 的 .page-item.active .page-link (0,3,0)；
   同档的还有下面的 hover 与禁用态，两条也都是 (0,4,1)） */
.pagination > li.page-item.active > .page-link {
  background: var(--gold);
  color: #0b0d12;
  border: 1px solid var(--gold);
  margin: 0 0.3rem;
  padding: 0.3rem 0.7rem;
}
/* 禁用态（首页/末页在两端、上一页/下一页到头）：透明底 + 弱化字色 */
.pagination > li.page-item.disabled > .page-link {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
  margin: 0 0.3rem;
  padding: 0.3rem 0.7rem;
}

/* 跳页表单（驱动输出 form.form-inline > input.pagination-jump + button.btn-outline-secondary）
   前台原本没有 input 规则，不覆盖就是 BS4 的白底默认框。
   ⚠️ 宽度必须用 `.form-inline > .pagination-jump`：BS4 在 @media(min-width:576px) 里写了
   `.form-inline .form-control{width:auto}` (0,2,0)，单写 `.pagination-jump` (0,1,0) 会被压成
   number 输入框的默认 50px（实测：占位符被挤到贴边）。
   ⚠️ 这条**依赖加载顺序**：`.form-inline > .pagination-jump` 与 BS4 那条同为 (0,2,0)，
   靠 theme.css 后于 bootstrap.min.css 加载才赢——layout 里调换两个 <link> 的次序，宽度即失守。 */
.pagination-jump,
.form-inline > .pagination-jump {
  width: 4.5rem;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--line);
}
.pagination-jump:focus {
  background: var(--bg-panel);
  color: var(--text);
  border-color: var(--gold);
  box-shadow: none;
}
.pagination-jump::placeholder {
  color: var(--text-muted);
}
/* 「跳转」按钮：静态态由上面的 .btn 兜住；hover 也已被 `.btn:hover` 兜住——两者同为 (0,2,0)，
   而 theme.css 在 bootstrap 之后加载，故 BS4 的 `.btn-outline-secondary:hover`（灰底 #6c757d）本就压不过。
   对照实测（CSSOM 里临时删掉本条，取值等过渡稳定后读）：
     · hover —— 计算值不变（仍金底金字）→ hover 这半是**冗余**的；
     · :focus —— 露出 BS4 声明的灰色 3px 光晕 `rgba(108,117,125,0.5) 0px 0px 0px 3px`
       （0.2rem @根字号 15px），且 background/border-color 一并回退为 `.btn` 的静态值
       （rgba(11,13,18,.45) / --line）——即丢掉本按钮**唯一**的焦点高亮。
   本条的实际作用就在这里：把 :focus 的灰环压成 none，并把两态钉死在金色系。选择器 (0,3,0)。 */
.form-inline > .btn-outline-secondary:hover,
.form-inline > .btn-outline-secondary:focus {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold-light);
  box-shadow: none;
}

/* 富文本表格 */
.content table,
.content table th,
.content table td {
  color: var(--text);
  border-color: var(--line);
}

/* 按钮：Bootstrap .btn 统一 outline 风格（同首页 .btn-outline） */
.btn {
  background: rgba(11, 13, 18, 0.45);
  border: 1px solid var(--line);
  color: var(--gold-light);
}
.btn:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold-light);
}
/* 补丁包下载按钮（原蓝色实底），换暗金描边 */
.download {
  background-color: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--line) !important;
}

/* 页脚 */
.main-foot {
  background: var(--bg-panel) !important;
  color: var(--text-muted) !important;
}
.main-foot a {
  color: var(--gold) !important;
}
.main-footer {
  background: transparent;
  color: var(--text-muted);
  border-top: 1px solid var(--line);
}

/* 老站 common.css 强制外层/main-bg min-width 1517px（旧设计稿宽度），
   取消该限制让 Bootstrap 栅格按视口自适应（>1517 大屏仍 100% 撑满不受影响） */
body > div:first-child,
.main > .main-bg {
  min-width: 0 !important;
}

/* ==================== 全站风格统一（user/pay 前台） ==================== */
/* 金色阶变量与首页 home.css :root 对齐（btn-gold/btn-outline 同源色） */
:root {
  --gold-light: #f0d68a;
  --gold-dark: #8a6d2f;
  --gold-dim: rgba(212, 175, 55, 0.15);
}

/* ---------- 字体：正文系统栈，标题衬线（与首页 hero 同族） ---------- */
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
.content-right-title > .right-title,
.modal > .modal-content > .content > .login-bg-zh > span {
  font-family: "STKaiti", "KaiTi", "Kaiti SC", "SimSun", serif;
}

/* ---------- 认证卡片：暗底面板 + 金边（替换 login-bg.png 浅色位图） ---------- */
/* Bootstrap .modal{display:none} 与登录卡片 .modal 类名冲突（login.css 靠 JS 摘 .hide 显示，
   页面内静态卡片无此流程）→ 恢复显示；.modal.hide{display:none!important} 不受影响 */
.modal.uc-static {
  display: block;
}
.modal > .modal-content {
  background-image: none !important;
  background-color: var(--bg-panel);
  border: 1px solid var(--gold);
  border-radius: 0.6rem;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.25);
}
.modal > .modal-content > .content > .login-bg-zh > span {
  color: var(--gold);
  font-size: 1.5rem;
  letter-spacing: 0.4rem;
}
.modal > .modal-content > .content > .close {
  color: var(--text-muted);
}
.modal > .modal-content > .content > .loginList > div > span {
  color: var(--text);
}
/* 登录输入框：暗底金边 + 聚焦金色高亮 */
.modal > .modal-content > .content > .loginList > div > .name,
.modal > .modal-content > .content > .loginList > div > .password,
.modal > .modal-content > .content > .loginList > div > .captcha {
  background-color: var(--bg-dark);
  border-color: var(--line);
  color: var(--text);
}
.modal > .modal-content > .content > .loginList > div > .name:focus,
.modal > .modal-content > .content > .loginList > div > .password:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0.4rem rgba(212, 175, 55, 0.35);
}
.modal > .modal-content > .content > .loginList input::placeholder {
  color: var(--text-muted);
}
/* 协议勾选：暗底圆点，选中金色 */
.modal > .modal-content > .content > .loginList > .regProtocol > span:first-child,
.modal > .modal-content > .content > .loginList > .regProtocol > span > .title {
  color: var(--text-muted);
}
.modal > .modal-content > .content > .loginList > .regProtocol > span > input[type="checkbox"] {
  background-color: var(--bg-dark);
  border-color: var(--line);
}
.modal > .modal-content > .content > .loginList > .regProtocol > span > input:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}
.modal > .modal-content > .content > .loginList > .regProtocol > span > a,
.modal > .modal-content > .content > .loginList > .but,
.modal > .modal-content > .content > .loginList > .but > a {
  color: var(--gold);
}
.modal > .modal-content > .content > .loginList a:hover {
  color: var(--gold-light);
}
/* 登录卡的 .btn 是布局容器（内放提交按钮），排除 .btn 全局 outline 规则 */
.modal > .modal-content > .content > .loginList > .btn {
  background: none;
  border: 0;
}

/* ---------- 主按钮：金渐变 + 深色字（同首页 .btn-gold，替换位图按钮） ----------
   登录 / 注册 / 找密码 / 换绑 / 改密 / 充值提交 / 结果页操作 共 7 个位图按钮，
   模板已补文字（Task 2/3），此处只换视觉（尺寸由各 css 原规则保留） */
.modal > .modal-content > .content > .loginList > .btn > .login,
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regButton > button,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > button,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > a > button {
  background-image: none !important;
  background: linear-gradient(180deg, #f0d68a 0%, #d4af37 45%, #a87e22 100%) !important;
  color: #1a1408;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.25rem;
  border: 0;
  border-radius: 0.4rem;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.modal > .modal-content > .content > .loginList > .btn > .login:hover,
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regButton > button:hover,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > button:hover,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recButton > a > button:hover {
  box-shadow: 0 6px 30px rgba(212, 175, 55, 0.55);
}

/* ---------- 验证码次按钮（.btn-cap）：暗底 + 金描边 + 金字（同首页 .btn-outline） ----------
   ⚠️ 2026-10-14：本条原先把档位按钮 `.limit > button` 与 `.btn-cap` **写在同一个分组**里，
   于是档位按钮也被套上暗底，用户报「要金色的啊」⇒ 把档位按钮**拆出本分组**，单独给金色。
   ⚠️ 档位按钮的颜色**必须写在本文件**：本文件在 `<link>` 中位于 recharge.css **之后**，
   而两处对 `.limit > button` 的特异性**完全相同**（都是 0,1,1）⇒ 同权重下**后加载者胜**。
   我踩过这一步：把金色写进 recharge.css，页面渲染出来仍是暗底（被本条无声压掉）。
   「本文件后加载」这一事实，就是它必须持有最终配色的原因。 */
.btn-cap {
  background: rgba(11, 13, 18, 0.45);
  background-image: none;
  border: 1px solid var(--line);
  color: var(--gold-light);
}
.btn-cap:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold-light);
}

/* ---------- 档位按钮：金色（用户 2026-10-14「要金色的啊」） ----------
   两种状态（用户 2026-10-14 明确口径）：
     未选中 = **金线 + 透明底**（描边式）
     选中   = **实心高亮黄 + 深字**（一眼看出当前用的是哪一档）
   ⚠️ 必须放本文件（后加载），理由见上一条注释。
   ⚠️ 选择器用短链 `.limit > button`：两页都有 `.limit`（免登录页已对齐结构）；
      深链只会命中登录页（该页为此已踩三次坑）。
   ⚠️ 选中态类名统一为 `.is-on`（两页 JS 都只加这一个类）：此前登录页用**行内样式**
      `$btn.css({background-color:…})` 标选中，而免登录页**根本没有选中态**；行内样式还会
      盖住 hover，且两页各写一份必然漂移。改为类名后颜色只在本文件定义一次。
   ⚠️ 字号略放大（0.8→0.85rem）：选中态是实心块，字太小会显得糊。 */
.limit > button {
  background: transparent;
  background-image: none;
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.85rem;
}
.limit > button:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold);
  color: #fff8e1;
}
.limit > button.is-on,
.limit > button.is-on:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #241c07;
  font-weight: 700;
}
/* 获取验证码倒计时禁用态（模板用 disabled 属性控制） */
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > .captcha > span > .btn-cap:disabled {
  background: rgba(154, 147, 127, 0.15);
  border-color: rgba(154, 147, 127, 0.35);
  color: var(--text-muted);
}

/* ---------- 表单输入框：暗底金边（register/findpwd/mobile/password 共用 register.css 链） ---------- */
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > div > span > input {
  background-color: var(--bg-dark);
  border-color: var(--line);
  color: var(--text);
}
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > div > span > input:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0.4rem rgba(212, 175, 55, 0.35);
}
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > div > span > input::placeholder {
  color: var(--text-muted);
}
/* 禁用输入框（换绑页当前手机号只读展示） */
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > div > span > input:disabled {
  background-color: var(--bg-panel);
  color: var(--text-muted);
}
/* 充值表单（recharge.css 链） */
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > input,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > select,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .amount > .amount {
  background-color: var(--bg-dark);
  border-color: var(--line);
  color: var(--text);
}
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > select:focus,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .amount > .amount:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0.4rem rgba(212, 175, 55, 0.35);
}
/* select 原文案强制黑色（recharge.css color:#000!important）→ 同特异性链 + 后加载胜出改亮色 */
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .text > select {
  color: var(--text) !important;
}

/* ---------- 表单标签与提示文字 ---------- */
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > div > span,
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regProtocol,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > div > .recLabel,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .yuan,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recField > .rechargeAmount > .reveal > .currency,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recProtocol {
  color: var(--gold-light);
}
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regField > .prompt > .prompt,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .prompt {
  color: var(--text-muted);
}
/* 协议链接（register.css 蓝色 #75b4ff → 金色） */
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regProtocol > span > a {
  color: var(--gold);
}
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regProtocol > span > a:hover {
  color: var(--gold-light);
}
/* 单选/复选圆点统一金色选中态（注册协议 + 支付方式） */
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regProtocol > span > input[type="checkbox"],
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recProtocol > .paymentBox > span > label > input {
  background-color: var(--bg-dark);
  border-color: var(--line);
}
.main > .main-bg > .main-content > .main-content-right > .content > .register > .content > div > .regProtocol > span > input:checked,
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > div > .recProtocol > .paymentBox > span > label > input:checked {
  background-color: var(--gold);
  border-color: var(--gold);
}

/* ---------- 支付方式卡片：未选中态改暗底（去蓝） ----------
   ⚠️ 2026-10-14（用户：「以登录充值为准，改成暗金的那个，不要蓝色的」）：
   recharge.css 里未选中卡片是 `rgba(24,83,140,.35)`（= #18538c 的蓝）、hover 是
   `rgba(116,172,225,.35)`（更亮的蓝），而本主题**从未覆盖过卡片底色**
   ⇒ **两个充值页的支付方式都在漏蓝**（不同于档位按钮，那个只在免登录页漏）。
   这里把未选中/hover 统一到与档位按钮同一套暗金体系：
   未选中 = 暗底 + 金描边（`--line`），hover = 更亮的金边 + 极淡金底。
   ⚠️ **选中态不动**（仍是 `rgba(212,175,55,.45)` 金底金边，见 recharge.css）——那是选中标识，
      改成暗底就看不出选没选了。
   选择器刻意写短（`.paymentBox …`）以免重蹈深选择器只命中一页的覆辙（本页已踩三次）。 */
.paymentBox > span > label > .pay-way-card {
  background-color: rgba(11, 13, 18, 0.45);
  border-color: var(--line);
}
.paymentBox > span > label:hover > .pay-way-card {
  background-color: var(--gold-dim);
  border-color: var(--gold);
}

/* ---------- 充值表单面板（recharge.css 灰底 #9c9c9c → 暗面板） ---------- */
.main > .main-bg > .main-content > .main-content-right > .recharge > .content > .rechargeContent {
  background-color: var(--bg-panel);
  border-color: var(--line);
}

/* ---------- 个人中心资料卡片（center.html 白底蓝边 → 暗面板金边） ---------- */
.uc-card {
  background: var(--bg-panel);
  border-color: var(--line);
}
.uc-card .uc-row {
  border-bottom-color: var(--line);
}
.uc-card .uc-label {
  color: var(--gold-light);
}
.uc-card .uc-value {
  color: var(--text);
}
.uc-badge.ok {
  background: var(--gold);
  color: #1a1408;
}
.uc-badge.no {
  background: rgba(154, 147, 127, 0.3);
  color: var(--text-muted);
}
.uc-actions a {
  background: rgba(11, 13, 18, 0.45);
  border-color: var(--line);
  color: var(--gold-light);
}
.uc-actions a:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ---------- 表格：表头金字、行间金线、hover 微亮 ---------- */
.content table th {
  background: var(--bg-panel);
  color: var(--gold);
  border-color: var(--line);
}
.content table tbody tr:hover {
  background: var(--gold-dim);
}
/* 金额金色突出（收银台/结果页兜底） */
.money {
  color: var(--gold);
}

/* ==========================================================================
   充值页主题的「两页共用」短选择器（2026-10-14 新增）
   --------------------------------------------------------------------------
   背景：本文件上半部分那批充值页规则全部写成**绑定登录页精确 DOM 的深选择器**
   （如 `.recField > .rechargeAmount > .reveal > .amount > .amount`）。免登录页
   `/quick` 的 DOM 与之不同（金额行外层多一层包裹、档位行少一层）⇒ 那些规则在
   免登录页**整批命不中**，该页于是回落到 recharge.css 的原始蓝底样式：同一个档位
   按钮在登录页是暗底金描边、在免登录页是蓝底（用户附图对比「按钮大小/样式不一致」）。
   ⚠️ 这是本页第三次踩同一个坑（前两次：档位按钮 `#j-limits`、赠品提示 `.gift-hint`）。

   做法：**不动**上面那些深选择器（它们在登录页是对的、改了要重新验证），改为在文件
   末尾补一批**锚在共用类名上的短选择器**——`.rechargeAmount / .limit / .recButton /
   .prompt / .recField` 两页都有（模板已对齐结构，见 quick/index.html 注释）。同特异性
   时后加载者胜，故这批置于文件末尾即可覆盖。
   选择器一律以 `.recharge` 开头收窄范围，避免影响官网/用户中心。 */
.recharge .rechargeAmount .amount > .amount,
.recharge .rechargeAmount input.amount {
  background-color: var(--bg-dark);
  border-color: var(--line);
  color: var(--text);
}
.recharge .rechargeAmount .amount > .amount:focus,
.recharge .rechargeAmount input.amount:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0.4rem rgba(212, 175, 55, 0.35);
}
.recharge .rechargeAmount .reveal .yuan,
.recharge .rechargeAmount .reveal .currency,
.recharge .recField .recLabel {
  color: var(--gold-light);
}
/* 免登录页的点券预览行：与登录页 `.coin-hint` 同观感（此前是裸文本色） */
.recharge .rechargeAmount .coin-hint {
  color: var(--gold-light);
  font-size: 12px;
  margin: 0.25rem 0 0 1.05rem;
}