/* ============================================================
 *  CZPLUS · 提交充值页亮色皮肤层（redeem-light）
 *  用途：替换老站的 theme-holo.css（暗色玻璃主题）
 *  约束：只改视觉 —— 不动任何 DOM、id、data-* 钩子，redeem.js / clone.js 逐字未改
 *  加载顺序：必须在 clone-614bc.css 之后
 *
 *  设计来源：assets/css/site.css 的 A 方案 token
 *    --bg #f5f6f8 · --surface #fff · --ink #0f172a · --ink-2 #475569
 *    --ink-3 #8a94a6 · --line #e6e9ef · --brand #5b4cf5 · --brand-dark #4438d6
 *    --ok #0f9d63 · --warn #c2760a · --danger #d93a3a
 * ============================================================ */

/* ---------- 1. 语义 token 覆写（把原站绿色系换成品牌紫） ---------- */
:root {
  --background: #f5f6f8;
  --foreground: #0f172a;

  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;

  --primary: #5b4cf5;
  --primary-foreground: #ffffff;

  --secondary: #f1f0fe;
  --secondary-foreground: #0f172a;

  --muted: #f3f4f8;
  --muted-foreground: #6b7385;

  --accent: #eeecfe;
  --accent-foreground: #0f172a;

  --destructive: #d93a3a;
  --destructive-foreground: #ffffff;

  --border: #e6e9ef;
  --input: #d7dbe5;
  --ring: #5b4cf5;

  --radius: .75rem;

  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* 系统处于暗色模式时原站会切 --background:#000d07，
   本页固定走亮色皮肤 → 再显式压一次（特异性同为 :root，靠加载顺序取胜） */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #f5f6f8;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --popover: #ffffff;
    --popover-foreground: #0f172a;
    --muted: #f3f4f8;
    --muted-foreground: #6b7385;
    --border: #e6e9ef;
    --input: #d7dbe5;
  }
}

/* ---------- 2. 基底 ---------- */
html, body {
  background-color: #f5f6f8 !important;
  color: #0f172a;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { content: none !important; }  /* 清掉老主题的极光/网格伪元素 */

::selection { background: rgba(91, 76, 245, .18); color: #0f172a; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef0f4; }
::-webkit-scrollbar-thumb { background: #c9cfdb; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #aab3c4; background-clip: border-box; }

/* ---------- 3. 顶部导航：白底细边（对齐新站 header） ---------- */
header {
  background-color: rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #e6e9ef !important;
}
header [class*="bg-background"],
header [class*="bg-card"] { background-color: transparent !important; }

header nav a,
header a[data-slot="navigation-menu-link"] {
  color: #475569;
  transition: background-color .16s, color .16s;
}
header nav a:hover,
header a[data-slot="navigation-menu-link"]:hover {
  background-color: #f3f4f8 !important;
  color: #0f172a;
}
/* 导航里的「购买会员」是主按钮，保持紫实心 */
header a[class~="bg-primary"] { color: #fff !important; }

/* ---------- 4. 主按钮：紫实心（去掉老主题的紫青渐变流光） ---------- */
[class~="bg-primary"] {
  background-color: #5b4cf5 !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(91, 76, 245, .30);
  text-shadow: none !important;
}
[class~="bg-primary"]:hover {
  background-color: #4438d6 !important;
  box-shadow: 0 6px 16px -4px rgba(91, 76, 245, .45);
}
button[class~="bg-primary"]:focus-visible,
a[class~="bg-primary"]:focus-visible {
  outline: 2px solid #5b4cf5;
  outline-offset: 2px;
}

/* 次级按钮（border-input + bg-background / bg-transparent） */
[class~="border-input"]:hover,
[class~="bg-transparent"]:hover { background-color: #f3f4f8 !important; }

/* ---------- 5. 卡片 ---------- */
[class~="bg-card"] {
  background-color: #ffffff !important;
  border-color: #e6e9ef !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}
[class~="bg-muted/30"],
[class~="bg-muted/50"] {
  background-color: #fafbfc !important;
  border-color: #e6e9ef !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
[class~="bg-muted"] { background-color: #f3f4f8 !important; }

/* 白底容器保持白（clone 里客服浮窗/微信号条用的硬编码浅色类） */
[class~="bg-white"]:not(img),
[class~="bg-white/95"]:not(img),
[class~="bg-slate-50"]:not(img),
[class~="bg-slate-100"]:not(img) {
  background-color: #ffffff !important;
  border-color: #e6e9ef !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* ---------- 6. 文字色 ---------- */
[class~="text-slate-900"], [class~="text-slate-800"], [class~="text-slate-700"] { color: #0f172a !important; }
[class~="text-slate-600"] { color: #475569 !important; }
[class~="text-slate-500"], [class~="text-slate-400"] { color: #8a94a6 !important; }
[class~="text-[#b8c0cc]"] { color: #8a94a6 !important; }
[class~="text-primary"] { color: #4438d6 !important; }

/* ---------- 7. 状态色：成功 = 新站 --ok，提示 = 新站 --warn ---------- */
[class~="bg-emerald-50"] {
  background-color: #e8f7f0 !important;
  border-color: #bfe6d3 !important;
}
[class~="border-emerald-100"], [class~="border-emerald-200"], [class~="border-emerald-300"] {
  border-color: #bfe6d3 !important;
}
[class~="text-emerald-900"], [class~="text-emerald-800"], [class~="text-emerald-700"] {
  color: #0b6b45 !important;
}

[class~="bg-amber-50"] {
  background-color: #fdf3e3 !important;
  border-color: #f0dcb8 !important;
}
[class~="border-amber-200"], [class~="border-amber-300"] { border-color: #f0dcb8 !important; }
[class~="text-amber-900"], [class~="text-amber-800"], [class~="text-amber-700"] { color: #8a5a0c !important; }

[class~="bg-slate-50"][class~="border"] { border-color: #e6e9ef !important; }

/* ---------- 8. 表单 ---------- */
input, textarea { color: #0f172a; background-color: #ffffff; }
input::placeholder, textarea::placeholder { color: #9aa3b4; }
[class~="border-input"] { border-color: #d7dbe5 !important; }
input:focus, textarea:focus { border-color: #5b4cf5 !important; }

kbd {
  background-color: #f3f4f8 !important;
  border-color: #e6e9ef !important;
  color: #475569 !important;
}

pre, code { color: #475569; }
[class~="bg-muted"] code, code[class~="text-foreground"] { color: #0f172a !important; }

/* ---------- 9. 步进条（4 步）通用外观 ---------- */
[data-step-dot] {
  background-color: #ffffff;
  border-color: #e6e9ef;
}
/* 当前步：redeem.js 给的是 border-primary + bg-primary/5，
   5% 的紫在这套浅灰底上看不出来 → 换成 --brand-soft，一眼能定位到当前步 */
[data-step-dot][class~="border-primary"] {
  background-color: #eeecfe !important;
  border-color: rgba(91, 76, 245, .45) !important;
  color: #4438d6;
}
/* 已完成步：emerald-300/50/900 已在 §7 映射成新站 --ok */
[data-step-dot][class~="border-emerald-300"] { color: #0b6b45; }

/* ---------- 10. 页脚 ---------- */
footer {
  background-color: #ffffff !important;
  border-top: 1px solid #e6e9ef !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
footer [class*="bg-muted"],
footer [class*="bg-background"] { background-color: transparent !important; }

/* 注：页脚「在线时间：10:00-22:00」在窄列里会折成两行，试过 nowrap —— 会把
   整个页脚联系块撑破右边界（父 flex 不换行）。宁可折行也不要横向溢出，保持原样。 */

/* ---------- 11. 二维码：必须保留白底，否则扫不出 ---------- */
img[alt*="二维码"], img[alt*="QR"], img[class~="bg-white"] {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* ---------- 12. 移动端导航面板
 *  面板本体（position/size/阴影）由 clone.js#setOpen() 内联注入，这里只管「行」的观感。
 *  ul 被 portal 到 body 后会带上 .is-portaled，用它做作用域，桌面端零影响。
 *  原站每个菜单项都是 inline-flex 的胶囊链接，摊成竖排后面板里会左右不对齐，
 *  所以这里统一改成一整行可点区域（44px 触控高度，符合 WCAG 目标尺寸）。
 * ---------- */
#clone-nav-list.is-portaled > a,
#clone-nav-list.is-portaled > li > a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a !important;
  background-color: transparent !important;
  text-decoration: none;
  box-sizing: border-box;
}
#clone-nav-list.is-portaled > a:hover,
#clone-nav-list.is-portaled > li > a:hover {
  background-color: #f3f4f8 !important;
  color: #4438d6 !important;
}
#clone-nav-list.is-portaled > a:focus-visible,
#clone-nav-list.is-portaled > li > a:focus-visible {
  outline: 2px solid #5b4cf5;
  outline-offset: -2px;
}
#clone-nav-list.is-portaled > li { width: 100%; margin: 0; }
#clone-nav-list.is-portaled svg { flex: none; opacity: .62; }

/* ---------- 13. 减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}