/* ============================================================
 *  风行 · 全息玻璃（Holo Glass）主题层
 *  覆写原站 shadcn 语义 token + 叠加玻璃/极光效果
 *  不改动任何 DOM 结构与 data-slot 标记 → clone.js 交互完全不受影响
 *  加载顺序：必须在 clone-*.css 之后
 * ============================================================ */

/* ---------- 1. 语义 token 覆写 ---------- */
:root {
  --background: #070b1f;
  --foreground: #eef2ff;
  --card: rgba(255, 255, 255, .055);
  --card-foreground: #eef2ff;
  --popover: rgba(16, 21, 48, .92);
  --popover-foreground: #eef2ff;

  --primary: #7c5cff;
  --primary-foreground: #ffffff;

  --secondary: rgba(255, 255, 255, .08);
  --secondary-foreground: #eef2ff;

  --muted: rgba(255, 255, 255, .06);
  --muted-foreground: #9aa6cf;

  --accent: rgba(255, 255, 255, .10);
  --accent-foreground: #eef2ff;

  --destructive: #fb7185;
  --destructive-foreground: #fff5f7;

  --border: rgba(255, 255, 255, .14);
  --input: rgba(255, 255, 255, .16);
  --ring: #a5b4fc;

  --chart-1: #7c5cff;
  --chart-2: #22d3ee;
  --chart-3: #ec4899;
  --chart-4: #facc15;
  --chart-5: #34d399;

  --sidebar: rgba(255, 255, 255, .05);
  --sidebar-foreground: #eef2ff;
  --sidebar-primary: #7c5cff;
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: rgba(255, 255, 255, .10);
  --sidebar-accent-foreground: #eef2ff;
  --sidebar-border: rgba(255, 255, 255, .12);
  --sidebar-ring: #a5b4fc;

  --font-sans: Inter, "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Merriweather, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: .75rem;

  --shadow-color: 3 6 23;
  --shadow-2xs: 0 2px 8px -2px rgb(3 6 23 / .28);
  --shadow-xs: 0 4px 12px -2px rgb(3 6 23 / .35);
  --shadow-sm: 0 8px 24px -4px rgb(3 6 23 / .42), 0 2px 6px -2px rgb(3 6 23 / .30);
  --shadow: 0 10px 30px -6px rgb(3 6 23 / .45), 0 2px 8px -2px rgb(3 6 23 / .32);
  --shadow-md: 0 14px 40px -8px rgb(3 6 23 / .48), 0 4px 10px -4px rgb(3 6 23 / .34);
  --shadow-lg: 0 20px 52px -10px rgb(3 6 23 / .52), 0 6px 14px -6px rgb(3 6 23 / .36);
  --shadow-xl: 0 26px 66px -12px rgb(3 6 23 / .56), 0 8px 18px -8px rgb(3 6 23 / .38);
  --shadow-2xl: 0 36px 90px -16px rgb(3 6 23 / .62);
}

/* ---------- 2. 极光背景 + 网格纹理 ---------- */
body {
  background-color: #070b1f;
  color: var(--foreground);
  font-family: var(--font-sans);
  position: relative;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* 极光光斑（缓慢呼吸） */
body::before {
  z-index: -2;
  background:
    radial-gradient(780px 480px at 10% 2%,  rgba(124, 92, 255, .40), transparent 62%),
    radial-gradient(700px 440px at 92% 10%, rgba(34, 211, 238, .28), transparent 60%),
    radial-gradient(900px 640px at 50% 104%, rgba(236, 72, 153, .22), transparent 66%);
  animation: holoAurora 22s ease-in-out infinite alternate;
}

@keyframes holoAurora {
  0%   { transform: translate3d(0,0,0) scale(1);      opacity: .92; }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); opacity: 1; }
  100% { transform: translate3d(2%, -1%, 0) scale(1.03);   opacity: .95; }
}

/* 细网格（顶部渐隐） */
body::after {
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 22%, #000 18%, transparent 82%);
          mask-image: radial-gradient(ellipse 90% 60% at 50% 22%, #000 18%, transparent 82%);
}

/* 主容器透出背景 */
body > div.h-screen.w-screen { min-height: 100vh; height: auto; }

/* ---------- 3. 玻璃质感 ---------- */
/* 卡片类容器：半透明 + 背景模糊 */
[data-slot="card"],
[class*="bg-card"],
[class*="bg-popover"] {
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
  border-color: rgba(255, 255, 255, .13);
}

/* 弱化底容器：轻量模糊，避免整站重绘压力 */
[class*="bg-muted"],
[class*="bg-secondary"],
[class*="bg-accent"] {
  -webkit-backdrop-filter: blur(12px) saturate(130%);
          backdrop-filter: blur(12px) saturate(130%);
}

/* 顶部导航：强玻璃 */
header {
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  background-color: rgba(10, 14, 38, .55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
header [class*="bg-background"],
header [class*="bg-card"] {
  background-color: rgba(10, 14, 38, .55) !important;
}

/* 页脚 */
footer {
  background-color: rgba(6, 9, 26, .55) !important;
  border-top: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

/* 分区背景统一降透明，让极光透出来 */
section[class*="bg-background"],
[class*="bg-muted/5"],
[class*="bg-background/5"] { background-color: rgba(7, 11, 31, .40) !important; }

/* ---------- 4. 主按钮：紫青渐变流光 ----------
 * 注意：必须用 [class~=] 词匹配，不能用 [class*=]
 * 否则会误伤 hover:bg-primary/5、bg-primary-foreground 等派生类 */
[data-slot="button"][class~="bg-primary"],
[class~="bg-primary"],
[class~="bg-primary/90"],
[class~="bg-primary/95"] {
  background-image: linear-gradient(120deg, #7c5cff 0%, #6d8bff 42%, #22d3ee 100%) !important;
  background-size: 180% 100%;
  border: 0;
  box-shadow: 0 8px 26px -6px rgba(124, 92, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background-position .45s ease, box-shadow .25s ease, transform .18s ease;
}
[data-slot="button"][class*="bg-primary"]:hover,
[class*="bg-primary/90"]:hover {
  background-position: 100% 0;
  box-shadow: 0 12px 38px -8px rgba(124, 92, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: translateY(-1px);
}
button[data-slot="button"],
a[data-slot="button"] { text-shadow: 0 1px 2px rgba(3, 6, 23, .35); }

/* 分类 chip 选中态 */
button[data-active="true"] {
  background-image: linear-gradient(120deg, #7c5cff, #22d3ee) !important;
  box-shadow: 0 6px 22px -6px rgba(124, 92, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
  border-color: transparent !important;
}

/* ---------- 5. 强调文字 / 价格渐变 ---------- */
[data-slot="accordion-trigger"],
h1, h2, h3 { letter-spacing: -.005em; }

/* 高亮数字与价格用渐变文本（仅限 text-primary 本体，
 * 不能误伤 text-primary-foreground，否则按钮白字会掉对比度） */
[class~="text-primary"] { color: #a5b4fc; }

/* ---------- 6. 图片：原站浅色截图适配深色 ---------- */
/* 二维码白底必须保留（否则扫不出），其余截图做降亮处理 */
img[alt*="二维码"],
img[alt*="QR"],
[aria-label*="二维码"] { background: #fff; }

main img:not([alt*="二维码"]):not([alt*="logo"]),
section img:not([alt*="二维码"]):not([alt*="logo"]) {
  border-radius: 10px;
}

/* 视频容器圆角 */
video { border-radius: 12px; }

/* ---------- 7. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 92, 255, .6), rgba(34, 211, 238, .5));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: border-box; }

/* 选区 */
::selection { background: rgba(124, 92, 255, .38); color: #fff; }

/* ---------- 9. 原站硬编码浅色 → 深色玻璃适配 ---------- */
/* 9.1 唯一必须保留白底的场景：二维码本体（类直接挂在 img 上） */
img[class~="bg-white"],
img[class~="bg-slate-50"],
img[class~="bg-white/95"] {
  background-color: #ffffff !important;
  padding: 6px;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 30px -10px rgba(3, 6, 23, .6);
}

/* 9.2 其余白底容器（内容卡 / 客服浮窗 / 微信号条 / 关闭按钮 / hover 项）→ 玻璃卡 */
[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: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
/* 微信号条比卡片再暗一档，形成层次 */
[class~="bg-slate-50"]:not(img) { background-color: rgba(255, 255, 255, .045) !important; }

/* 9.3 硬编码深色文字 → 语义色 */
[class~="text-slate-900"],
[class~="text-slate-800"],
[class~="text-slate-700"] { color: var(--foreground) !important; }
[class~="text-slate-600"] { color: #c3cbea !important; }
[class~="text-slate-500"],
[class~="text-slate-400"] { color: var(--muted-foreground) !important; }

/* 9.4 硬编码浅色边框 → 玻璃边框 */
[class~="border-slate-200"],
[class~="border-slate-100"] { border-color: rgba(255, 255, 255, .14) !important; }
[class~="border-emerald-100"],
[class~="border-emerald-200"] { border-color: rgba(52, 211, 153, .35) !important; }

/* 9.5 微信/QQ 品牌色：保留原色，深色底上补一层发光提升辨识度 */
[class~="text-[#07c160]"] { text-shadow: 0 0 14px rgba(7, 193, 96, .45); }
[class~="text-[#12b7f5]"] { text-shadow: 0 0 14px rgba(18, 183, 245, .45); }
[class~="bg-[#07c160]"]   { box-shadow: 0 6px 20px -6px rgba(7, 193, 96, .65); }
[class~="bg-[#12b7f5]"]   { box-shadow: 0 6px 20px -6px rgba(18, 183, 245, .65); }

/* 9.6 深色场景下的纯白字若落在浅色玻璃上会偏弱，统一加描边不适用，
 *     这里只处理 text-[#b8c0cc]（原浅灰），提亮到可读区间 */
[class~="text-[#b8c0cc]"] { color: #9aa6cf !important; }

/* 9.7 header / footer 兜底
 * §3 里的 [class*="bg-background/5"] 没有元素前缀，特异性高于裸 header，
 * 会把导航栏压成 .40 透明导致滚动时透字脏。这里用更高特异性压回来 */
header[class],
body > div > header { background-color: rgba(9, 13, 34, .62) !important; }
footer[class],
body > div > footer { background-color: rgba(6, 9, 26, .62) !important; }

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