/* ============================================================
   808音频工作室 · v29 星云玻璃（Nebula Glass · 性能优化版）
   视觉语言不变（深空底 + 紫/粉/青星云 + 霜化玻璃 + 渐变标题 + 发光按钮），
   但对景合成方式做了重写，解决滚动卡顿。

   本次卡顿的根因（均已在本文件中处理）：
   ① 逐元素 backdrop-filter —— 下载页 26 行 + 上百枚 chip，
      浏览器每滚动一帧要做 200+ 次"截取背景 → 卷积"；
   ② glass.js 的 SVG 折射滤镜 —— 3 个 feDisplacementMap + 高斯组成的
      矢量滤镜挂在 backdrop-filter 上，属 CPU 滤镜，逐帧执行；
   ③ 三颗 800px 星云用 filter: blur(100px) 且动画里带 scale()，
      scale 每变一次都要重新栅格化整张模糊贴图。

   处理原则：真实模糊只留给"单例元素"（打开时才出现的弹窗遮罩）；
   列表/卡片一律改用「预渲染霜面」——半透明渐变 + 发丝描边 + 内高光，
   在近乎纯色的深空底色上观感与真磨砂几乎一致，但合成成本为零。
   ============================================================ */

/* ============================================================
   1) 深色设为默认（含未写入 data-theme 的首帧，避免白屏闪烁）
   ============================================================ */
html:not([data-theme]),
html[data-theme="dark"] {
  --bg: #07070E;
  --bg-soft: #0B0B14;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .07);
  --border-solid: rgba(255, 255, 255, .10);
  --hair: rgba(255, 255, 255, .10);
  --hair-2: rgba(255, 255, 255, .06);
  --text: #EDEDF5;
  --muted: #A2A2B8;
  --muted-dim: #7C7C92;
  --muted-2: #8A8AA0;
  --kicker: #8B8BA3;
  --panel: rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .065);
  --nav-bg: rgba(10, 10, 20, .88);
  --shadow: 0 30px 60px -34px rgba(0, 0, 0, .95);

  --glow-1: rgba(124, 92, 255, .38);
  --glow-2: rgba(34, 211, 238, .22);
  --glow-pink: rgba(236, 72, 153, .30);

  --tint: rgba(255, 255, 255, .04);
  --tint-strong: rgba(255, 255, 255, .07);
  --mask: rgba(4, 4, 8, .80);

  /* —— 玻璃变量（深空版）—— */
  --glass-bg: rgba(20, 20, 36, .42);
  --glass-bg-strong: rgba(22, 22, 40, .62);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-edge: rgba(255, 255, 255, .12);
  --glass-blur: 20px;
  --glass-shadow: 0 24px 60px -26px rgba(0, 0, 0, .85);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .12);
  --orb-o: .62;
  --radius: 16px;

  /* 「预渲染霜面」：不用 backdrop-filter 也能有霜玻璃的层次 */
  --glass-fill: linear-gradient(180deg, rgba(44, 44, 74, .52) 0%, rgba(17, 17, 30, .46) 100%);
  --glass-fill-2: linear-gradient(180deg, rgba(52, 52, 86, .64) 0%, rgba(20, 20, 36, .54) 100%);
  --chip-fill: rgba(255, 255, 255, .08);

  color-scheme: dark;
}

/* ============================================================
   2) 面板：换用预渲染霜面
   不再逐元素叠加 ::before / ::after 毛玻璃层，
   改为元素自身一层渐变填充（同一对象一次绘制完成）。
   ============================================================ */
.card::before, .dl-row::before, .panel::before, .stat::before, .login-box::before,
.gate-card::before, .voice-entry::before, .feature::before, .theme-panel::before,
.notice::before, .dropzone::before, .admin-bar::before, .nav-inner::before,
.modal::before, .voice-room::before,
.card::after, .dl-row::after, .panel::after, .stat::after, .login-box::after,
.gate-card::after, .voice-entry::after, .feature::after, .theme-panel::after,
.notice::after, .dropzone::after, .admin-bar::after, .nav-inner::after,
.modal::after, .voice-room::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.card, .dl-row, .panel, .stat, .login-box, .gate-card, .voice-entry, .feature,
.theme-panel, .notice, .dropzone, .admin-bar, .nav-inner, .modal, .voice-room {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  border-radius: var(--radius);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  /* 限制重绘范围：内部变化不外溢到整页 */
  contain: layout style;
}

/* 单例「重点玻璃」唯一保留真实模糊的地方：弹窗遮罩（只在打开时存在） */
.modal-mask {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 其余小元素：一律取消 backdrop-filter（原本 chips 数量上百，代价最高） */
.badge, .toast, .theme-btn, .btn-ghost, .filter, .peer-card, .gate-audio-box,
.diag-panel, .banner-tip, .tabs, .ve-badge, .filter, .chip,
.nav-toggle, .field input, .field textarea, .field select,
.teacher-card, .case-row {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.bg-orbs {
  display: block !important;
  z-index: -3;
}
html { background: var(--bg); }
body {
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   3) 深空背景：星云光斑（去卷积核版）+ 细网格
   原实现：filter: blur(100px) + scale 动画 → 每帧重新栅格化 800px 贴图。
   现实现：把高斯衰减直接写进径向渐变的多个色标 + 只做 translate 动画，
   动画完全跑在合成线程，主线程与光栅线程都不再参与。
   ============================================================ */
.bg-orbs::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
}

.bg-orbs i {
  filter: none !important;
  will-change: transform;
}
.bg-orbs i:nth-child(1) {
  width: 780px; height: 780px; left: -220px; top: -240px;
  background: radial-gradient(circle at 40% 40%,
    rgba(var(--accent-rgb, 124, 92, 255), .50) 0%,
    rgba(var(--accent-rgb, 124, 92, 255), .34) 24%,
    rgba(var(--accent-rgb, 124, 92, 255), .19) 42%,
    rgba(var(--accent-rgb, 124, 92, 255), .085) 58%,
    rgba(var(--accent-rgb, 124, 92, 255), .028) 70%,
    transparent 78%) !important;
}
.bg-orbs i:nth-child(2) {
  width: 640px; height: 640px; right: -190px; top: 5%;
  background: radial-gradient(circle at 55% 45%,
    rgba(236, 72, 153, .34) 0%,
    rgba(236, 72, 153, .23) 24%,
    rgba(236, 72, 153, .13) 42%,
    rgba(236, 72, 153, .06) 58%,
    rgba(236, 72, 153, .02) 70%,
    transparent 78%) !important;
}
.bg-orbs i:nth-child(3) {
  width: 860px; height: 860px; left: 20%; bottom: -430px;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--accent2-rgb, 34, 211, 238), .26) 0%,
    rgba(var(--accent-rgb, 124, 92, 255), .30) 26%,
    rgba(var(--accent-rgb, 124, 92, 255), .21) 44%,
    rgba(var(--accent-rgb, 124, 92, 255), .10) 60%,
    rgba(var(--accent-rgb, 124, 92, 255), .035) 72%,
    transparent 80%) !important;
}

/* 重定义星云动画：去掉 scale()，只保留位移（避免每次重栅格） */
@keyframes orb1 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(64px,52px,0); } }
@keyframes orb2 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-52px,80px,0); } }
@keyframes orb3 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-46px,-38px,0); } }

/* 滚动期间暂停星云漂浮，把合成带宽全留给滚动本身 */
body.wb-busy .bg-orbs i { animation-play-state: paused; }

/* ============================================================
   4) 导航：去掉毛玻璃，改用高不透明度渐变（滚动时零成本）
   ============================================================ */
.nav {
  background: linear-gradient(180deg, rgba(9, 9, 18, .92) 0%, rgba(9, 9, 18, .74) 100%);
  border-bottom: 1px solid var(--hair-2);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  contain: layout paint style;
}
.nav-inner { background: transparent !important; }
.nav-inner::before { background: transparent; }
.nav-links a {
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-links a.active {
  background: linear-gradient(120deg, rgba(124, 92, 255, .22), rgba(236, 72, 153, .18));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
@media (max-width: 720px) {
  .nav-links.open {
    background: rgba(12, 12, 24, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
  }
}

/* ============================================================
   5) 渐变标题（模板标志性手法）
   ============================================================ */
html[data-theme="dark"] .hero h1,
html:not([data-theme]) .hero h1 {
  background: linear-gradient(120deg, #FFFFFF 0%, #C9C2FF 38%, #7CF3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head h2,
.page-head h1 {
  background: linear-gradient(120deg, #FFFFFF 0%, #CBBFFF 45%, #86EFF7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .n { color: #fff; }

/* ============================================================
   6) 按钮：渐变 + 光晕
   ============================================================ */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, #EC4899 100%) !important;
  color: #fff !important;
  border: 0;
  box-shadow: 0 12px 34px -10px rgba(124, 92, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px -10px rgba(236, 72, 153, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.btn-ghost {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--glass-edge);
  color: var(--text);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .26);
  transform: translateY(-2px);
}

/* ============================================================
   7) 面板细节：内高光、悬浮、发光描边
   ============================================================ */
.card::before, .feature::before, .dl-row::before, .panel::before,
.stat::before, .notice::before, .teacher-card::before {
  border-radius: inherit;
}
.card:hover, .dl-row:hover, .feature:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 30px 70px -28px rgba(124, 92, 255, .55), var(--glass-highlight);
}

/* 老师卡片（明星墙） */
.teacher-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* 案例墙行 */
.case-row {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
}

/* 筛选胶囊 / chip */
.filter, .chip, .badge {
  border: 1px solid var(--glass-edge);
  background: var(--chip-fill);
  color: var(--muted);
}
.filter:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.filter.on {
  background: linear-gradient(120deg, rgba(124, 92, 255, .32), rgba(236, 72, 153, .22));
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}

/* 首屏 */
.hero { background: transparent; }
.hero::after {
  background:
    linear-gradient(180deg, rgba(7, 7, 14, .35) 0%, transparent 26%, rgba(7, 7, 14, .88) 100%);
}
.hero-media img { opacity: .32; }

/* 页脚 */
.footer {
  background: transparent;
  border-top: 1px solid var(--hair-2);
}

/* 输入控件（后台 / 登录） */
.field input, .field textarea, .field select {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--glass-edge) !important;
  color: var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: rgba(255, 255, 255, .3) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .22);
}

/* 弹窗 / 提示条 */
.modal, .toast, .theme-panel, .dropzone, .login-box {
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* 选中态与滚动条 */
::selection { background: rgba(124, 92, 255, .45); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 92, 255, .7), rgba(236, 72, 153, .55));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ============================================================
   8) 浅色模式：保留玻璃观感，只是更亮
   ============================================================ */
html[data-theme="light"] {
  --bg: #F3F1FB;
  --bg-soft: #EDEAF8;
  --hair: rgba(16, 18, 40, .10);
  --hair-2: rgba(16, 18, 40, .06);
  --panel: rgba(255, 255, 255, .62);
  --panel-2: rgba(255, 255, 255, .78);
  --nav-bg: rgba(255, 255, 255, .88);
  --glow-pink: rgba(236, 72, 153, .20);
  --orb-o: .50;
  --glass-bg: rgba(255, 255, 255, .58);
  --glass-bg-strong: rgba(255, 255, 255, .76);
  --glass-edge: rgba(16, 18, 40, .10);
  --glass-blur: 18px;
  --glass-shadow: 0 22px 48px -28px rgba(40, 30, 90, .35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .85);

  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .62) 100%);
  --glass-fill-2: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .74) 100%);
  --chip-fill: rgba(16, 18, 40, .05);
}
html[data-theme="light"] .nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .82) 100%);
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .page-head h1 {
  background: linear-gradient(120deg, #2B2340 0%, #6D5CFF 55%, #12B5D1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .nav-links a:hover { background: rgba(16, 18, 40, .06); color: #10111a; }

/* 浅色下光斑收敛一些，避免糊成一片 */
html[data-theme="light"] .bg-orbs i:nth-child(1) {
  background: radial-gradient(circle at 40% 40%,
    rgba(var(--accent-rgb, 109, 92, 255), .30) 0%,
    rgba(var(--accent-rgb, 109, 92, 255), .20) 24%,
    rgba(var(--accent-rgb, 109, 92, 255), .11) 42%,
    rgba(var(--accent-rgb, 109, 92, 255), .05) 58%,
    transparent 74%) !important;
}
html[data-theme="light"] .bg-orbs i:nth-child(2) {
  background: radial-gradient(circle at 55% 45%,
    rgba(236, 72, 153, .20) 0%,
    rgba(236, 72, 153, .13) 24%,
    rgba(236, 72, 153, .07) 42%,
    rgba(236, 72, 153, .03) 58%,
    transparent 74%) !important;
}
html[data-theme="light"] .bg-orbs i:nth-child(3) {
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--accent2-rgb, 18, 181, 209), .16) 0%,
    rgba(var(--accent-rgb, 109, 92, 255), .20) 26%,
    rgba(var(--accent-rgb, 109, 92, 255), .13) 44%,
    rgba(var(--accent-rgb, 109, 92, 255), .06) 60%,
    transparent 76%) !important;
}
html[data-theme="light"] .bg-orbs::after { opacity: .45; }
html[data-theme="light"] .nav-links a.active { color: #10111a; box-shadow: inset 0 0 0 1px rgba(16, 18, 40, .12); }
html[data-theme="light"] .filter:hover { background: rgba(16, 18, 40, .07); color: #10111a; }
html[data-theme="light"] .stat .n,
html[data-theme="light"] .hero .kicker { color: inherit; }

/* ============================================================
   9) 降级：低端设备 / 移动端进一步收敛
   ============================================================ */
@media (max-width: 720px) {
  :root, html[data-theme="dark"], html[data-theme="light"] { --glass-blur: 12px; }
  .hero-media, .hero-ghost { transform: none !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .dl-row, .panel, .feature, .stat, .notice, .nav-inner, .modal {
    background: var(--glass-fill) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-orbs i { animation: none !important; }
  .btn-primary:hover, .btn-ghost:hover, .card:hover, .dl-row:hover, .feature:hover { transform: none; }
}