/* =============================================================================
 * h5-account-fix-20260623.css — 账户杂项 6 项补丁配套样式
 * 端: D:/最新版项目包/JP项目审计最终包/preview-h5/
 * 注入(交后续"注入"步统一改 index.html):
 *   <link rel="stylesheet" href="/assets/h5-account-fix-20260623.css?v=20260623-acct">
 *   ★★ 必须排在 h5-polish-dark.css(index.html 那一行)之后 ★★(为(5)主题修复提权)
 *
 * 设计红线:
 *   - 纯表现层;仅作用于补丁自打的 data-* 标记 / 自注入节点 / 明确作用域。
 *   - 总开关 window.__H5_ACCT_FIX_OFF__=true 时 JS 不打标记/不注节点 → 本 CSS 绝大多数规则
 *     自然失效;唯一独立于 JS 的是 (5) 主题修复(下方),它也带作用域注释,删本 <link> 即回滚。
 *   - 多语言:本文件不含文案(文案在 JS,缺失回退 zh)。
 * ========================================================================== */

/* ===========================================================================
 * (5) 主題 深/浅色切换失效 → 修好
 * 根因(实测): h5-polish-dark.css:27-29 把
 *   html[data-h5-polish="on"]、html[...][data-theme="light"]、html[...]:not([data-theme])
 *   全部强制成暗色令牌 → 切到 light 仍是暗色 → "点了不切换"。
 * 主包逻辑本身正确(root zx(): setAttribute data-theme + localStorage.jp_theme;切换 setter 正常)。
 * 修法(纯 CSS 提权,不动 JS、不动主包):本 <link> 排在 h5-polish-dark.css 之后,
 *   用同等/更高特指度,把 light 态令牌"改回主包真实浅色值"(与主包 [data-theme=light] 一致),
 *   仅作用于 light 分支;dark 分支(html[data-h5-polish="on"][data-theme="dark"])不触碰,保持币安暗色。
 * 主包 light 真实令牌(index-JmA2uOWk.css [data-theme=light]):
 *   --bg:#F4F7FB --surface:#FFFFFF --surface-2:#EEF2F7 --text:#111827 --text-2:#4B5563
 *   --text-3:#9CA3AF --border:#E5E7EB --gold:#C99A2E --nav-active:#A16207 color-scheme:light
 * 注:由于 polish 用了三段选择器(含无条件 html[data-h5-polish="on"]),这里也以
 *     html[data-h5-polish="on"][data-theme="light"] 提高特指度覆盖之(属性选择器 > 单属性)。
 * ========================================================================= */
html[data-h5-polish="on"][data-theme="light"] {
  --bg: #F4F7FB;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --text: #111827;
  --text-2: #4B5563;
  --text-3: #9CA3AF;
  --border: #E5E7EB;

  /* 金:回主包浅色金 */
  --gold: #C99A2E;
  --gold-deep: #A16207;
  --gold-dark: #A16207;
  --nav-active: #A16207;

  /* 派生别名同步回浅色 */
  --card-bg: #FFFFFF;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;

  /* 卡片描边/阴影回浅色(与主包 [data-theme=light] 一致) */
  --card-ring: 0 0 0 1px var(--border);
  --shadow-card: 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-elevated: 0 8px 20px rgba(16, 24, 40, .10);

  color-scheme: light;
}
/* 涨跌/盈亏语义色:浅深一致沿用主包(涨/盈红、跌/亏蓝),不随主题改 → 不在此重写 --up/--down,
 * 保持 polish 与主包既有 (--up:#F6465D, --down:#3D7EFF) 不变。 */

/* ===========================================================================
 * (1) 持仓"歷史"每单盈亏 — 补行样式
 * ========================================================================= */
.jp-acct-pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}
.jp-acct-pnl-label {
  color: var(--text-2);
  font-weight: 600;
}
.jp-acct-pnl-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* 颜色由 JS 行内设置(var(--up)/var(--down)/var(--text-2)),沿用现网盈亏配色 */
}

/* ===========================================================================
 * (2) 总览服务入口网格 — 统一恢复实色 / 明确可点(组内一致,含"綁定提現地址"行)
 * 作用域:仅 JS 打标的网格 data-jp-acct-entry-grid="1" 内的入口 button。
 * ========================================================================= */
[data-jp-acct-entry-grid="1"] > button {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* 标签文字从次文字色(--text-2,偏灰)提到主文字色(--text),整组一致更实,不单独高亮某行 */
[data-jp-acct-entry-grid="1"] > button {
  color: var(--text) !important;
}
[data-jp-acct-entry-grid="1"] > button > span {
  color: inherit;
}
/* 图标保持金色(主包既有 var(--gold-deep)),不动 */

/* ===========================================================================
 * (3)(4) 邮箱"已驗證" / 手机"已認證" pill 静态展示
 * ========================================================================= */
.jp-acct-verified-pill,
.jp-acct-authed-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #0ECB81;                 /* 通过/认证绿(与主包 --success 一致) */
  background: rgba(14, 203, 129, .12);
  border: 1px solid rgba(14, 203, 129, .28);
}
button.jp-acct-verified-pill {
  cursor: default;
}
.jp-acct-phone-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.jp-acct-phone-num {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
 * (6) 左侧抽屉 × 关闭按钮
 * ========================================================================= */
.jp-acct-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 26px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  z-index: 2;
  transition: background .15s ease, color .15s ease;
}
.jp-acct-drawer-close:hover,
.jp-acct-drawer-close:active {
  background: var(--surface-2);
  color: var(--text);
}

/* ===========================================================================
 * 通用 toast(就地反馈)
 * ========================================================================= */
.jp-acct-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(12px);
  max-width: 80vw;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(24, 26, 32, .96);
  color: #EAECEF;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.jp-acct-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.jp-acct-toast-err {
  background: rgba(120, 24, 32, .96);
  color: #FFE3E6;
}
