/* ============================================================
   theme-aurora.css — 「极光网格」主题 (aurora)
   ------------------------------------------------------------
   参考 QVMConsole 官网的视觉语言，按本站在售的变量体系重写：
     · 网格纹理背景（CSS 渐变 + 径向遮罩渐隐）
     · 弥散极光光晕（blur 大圆 + 位移动画）
     · 光标光晕跟随层（#auroraCursorGlow）
     · 玻璃磨砂卡片 + 柔和描边 + 顶部内高光
     · 首页 hero 粒子层容器（#auroraHeroLayer，由 JS 挂 canvas）

   作用范围：全部前台页面（由 theme_head.php 注入并打标 html[data-frontend-theme="aurora"]）
   仅覆盖视觉层，不改动任何页面 HTML 结构与功能逻辑。
   加载顺序：在所有基础 CSS 之后，最后一个加载。
   ============================================================ */

/* ---------------------------------------------------------
   1. 主题变量覆盖（复用本站在售变量名，保证组件无缝继承）
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] {
  /* 基底：浅色通透 */
  --bg:            #F4F7FD;
  --bg-card:       rgba(255,255,255,0.74);
  --bg-muted:      rgba(255,255,255,0.48);
  --bg-elevated:   rgba(255,255,255,0.86);
  --bg-header:     rgba(255,255,255,0.62);
  --bg-stats:      rgba(255,255,255,0.58);

  /* 文字：深空蓝黑 */
  --text-primary:   #0C1425;
  --text-secondary: #45516A;
  --text-muted:     #8593AC;

  /* 品牌：极光青 → 天蓝 → 紫 */
  --accent:         #38BDF8;
  --accent-hover:   #0EA5E9;
  --accent-soft:    rgba(56,189,248,0.10);
  --accent-border:  rgba(56,189,248,0.22);

  --aurora-teal:    #2DD4BF;
  --aurora-blue:    #38BDF8;
  --aurora-violet:  #8B5CF6;
  --aurora-grad:    linear-gradient(120deg, #2DD4BF 0%, #38BDF8 48%, #8B5CF6 100%);
  --aurora-grad-soft: linear-gradient(120deg, rgba(45,212,191,.16), rgba(56,189,248,.16) 48%, rgba(139,92,246,.16));

  /* 描边：浅色主题用深色低透明描边 */
  --border:         rgba(12,20,37,0.08);
  --border-strong:  rgba(12,20,37,0.14);

  /* 阴影：柔和多层 */
  --shadow-sm:      0 1px 2px rgba(12,20,37,0.05), 0 4px 12px rgba(12,20,37,0.05);
  --shadow-md:      0 2px 6px rgba(12,20,37,0.06), 0 16px 40px -12px rgba(12,20,37,0.14);
  --shadow-lg:      0 4px 10px rgba(12,20,37,0.06), 0 32px 80px -20px rgba(12,20,37,0.22);

  /* 玻璃参数 */
  --glass-bg:       rgba(255,255,255,0.66);
  --glass-border:   rgba(255,255,255,0.70);
  --glass-blur:     26px;

  /* 圆角：略大于默认，更现代 */
  --radius-sm:      10px;
  --radius-md:      16px;
  --radius-lg:      22px;

  /* 主题专属：极光光晕色 */
  --agl-1: rgba(45,212,191,0.42);
  --agl-2: rgba(56,189,248,0.40);
  --agl-3: rgba(139,92,246,0.36);
  --agl-4: rgba(45,212,191,0.26);
  --agl-5: rgba(139,92,246,0.24);
}

/* ---------------------------------------------------------
   2. 背景：网格纹理 + 弥散极光（全站）
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] body {
  background-color: var(--bg);
  /* 极光在底层，网格在上层，通过两层叠加实现「网格浮于光晕之上」 */
  background-image:
    linear-gradient(rgba(12,20,37,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,20,37,0.045) 1px, transparent 1px),
    radial-gradient(1200px 760px at 10% -8%,  var(--agl-1) 0%, transparent 58%),
    radial-gradient(1100px 720px at 94% 2%,   var(--agl-3) 0%, transparent 60%),
    radial-gradient(1000px 680px at 76% 98%,  var(--agl-2) 0%, transparent 62%),
    radial-gradient(900px 620px at 2% 86%,    var(--agl-5) 0%, transparent 60%),
    linear-gradient(160deg, #F7FAFE 0%, #F2F6FD 45%, #F6F3FD 100%);
  background-size:
    52px 52px,
    52px 52px,
    auto, auto, auto, auto, auto;
  background-position: 0 0, 0 0, center, center, center, center, center;
  background-attachment: fixed;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* 网格整体径向渐隐，避免满屏生硬网格线 */
html[data-frontend-theme="aurora"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(12,20,37,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,20,37,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 100% 78% at 50% 22%, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 78% at 50% 22%, #000 22%, transparent 78%);
  opacity: .9;
}

/* 3 个漂移极光圆（增强层次，全站氛围） */
html[data-frontend-theme="aurora"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(45,212,191,0.30), transparent) 6% 4% / 620px 620px no-repeat,
    radial-gradient(closest-side, rgba(139,92,246,0.26), transparent) 96% 12% / 560px 560px no-repeat,
    radial-gradient(closest-side, rgba(56,189,248,0.28), transparent) 34% 104% / 520px 520px no-repeat;
  filter: blur(80px) saturate(1.1);
  opacity: .85;
  animation: auroraFloat 26s ease-in-out infinite alternate;
}
@keyframes auroraFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-28px, 22px, 0) scale(1.06); }
  100% { transform: translate3d(24px, -18px, 0) scale(1.03); }
}

/* 原生浮动光球层：极光主题下更弥散、低饱和 */
html[data-frontend-theme="aurora"] .floating-bg {
  opacity: 0.5;
  filter: blur(84px) saturate(1.12);
}

/* 确保页面主体内容浮在氛围层之上
   注意：绝对不要把 .header / .bottom-nav 放进这组规则！
   它们是 position:fixed 的置顶/置底栏，需要保持自身的
   fixed 定位与高 z-index；若被这里的 relative + z-index:2 覆盖，
   会出现「页面内容盖住菜单栏」的问题。 */
html[data-frontend-theme="aurora"] main,
html[data-frontend-theme="aurora"] .footer,
html[data-frontend-theme="aurora"] .container,
html[data-frontend-theme="aurora"] .sound-list {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   3. 光标光晕层（全站跟随鼠标，仅精确指针设备显示）
   --------------------------------------------------------- */
#auroraCursorGlow {
  position: fixed;
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle,
    rgba(56,189,248,0.13) 0%,
    rgba(139,92,246,0.09) 38%,
    transparent 68%);
  opacity: 0;
  transition: opacity .5s ease;
  will-change: transform;
}
@media (pointer: fine) {
  #auroraCursorGlow.on { opacity: 1; }
}
/* 触屏 / 粗指针设备不显示 */
@media (pointer: coarse) {
  #auroraCursorGlow { display: none; }
}

/* ---------------------------------------------------------
   4. 首页 Hero 粒子层（由 JS 挂载 canvas，仅首页存在该节点）
   --------------------------------------------------------- */
#auroraHeroLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#auroraHeroLayer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* hero 区域内元素上浮
   注意：绝不能给 .search-hero 加 overflow:hidden ——
   搜索历史下拉框（#searchHistoryWrap）挂在 .search-hero-bar 内，
   以 position:absolute 向下弹出，祖先一旦裁剪就会被切掉而看不见。
   粒子画布的裁剪由 #auroraHeroLayer 自己负责，此处无需再约束。
   同理 z-index 不能低于基础样式的 10，否则下拉层会被后续区块压住。 */
html[data-frontend-theme="aurora"] .search-hero,
html[data-frontend-theme="aurora"] .hero,
html[data-frontend-theme="aurora"] .banner {
  position: relative;
  z-index: 10;
}
/* 搜索框容器：建立层叠上下文，保证下拉层浮在后续内容之上 */
html[data-frontend-theme="aurora"] .search-hero-bar {
  position: relative;
  z-index: 20;
}
/* 搜索历史下拉层：极高优先级，确保不被同区其它元素遮挡 */
html[data-frontend-theme="aurora"] #searchHistoryWrap {
  z-index: 999 !important;
}

/* ---------------------------------------------------------
   5. 顶栏 / 导航
   ------------------------------------------------------------
   对齐参考站 (qvmconsole.cn) 的顶栏语言：
     · 通栏固定在顶部，一层轻玻璃，不用卡片外壳
     · 导航项：无底色块，字号/字重/间距收敛，底部极光渐变下划线
     · 滚动后：白底加深 + 底部描边 + 柔和阴影（由 JS 加 .scrolled）
   --------------------------------------------------------- */

/* ---- 5.1 顶栏本体 ---- */
html[data-frontend-theme="aurora"] .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  /* 置顶层：需高于页面内容(2)与氛围层(0)，
     但低于滚动进度条(200)与各类弹窗(900+)，故取 150 */
  z-index: 150;
  background: var(--bg-header);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border-bottom: 1px solid transparent;
  /* 通栏元素：未滚动时不投影，避免整条浮起成「框」 */
  box-shadow: none;
  transition: background .32s ease, border-color .32s ease, box-shadow .32s ease;
}
/* 滚动态：白底加深 + 底部描边 + 柔和阴影（参考站同款层次） */
html[data-frontend-theme="aurora"] .header.scrolled {
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 30px -18px rgba(12,20,37,0.26);
}
/* 顶栏内层：与页面内容同一套左右留白，避免文字贴边 */
html[data-frontend-theme="aurora"] .header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* 基础样式在 header 下方有一道 12px 渐变遮罩，
   与本主题「干净边界 + 底部描边」的语言冲突，这里关掉 */
html[data-frontend-theme="aurora"] .header::after {
  display: none;
}

/* ---- 5.2 导航项：文字 + 渐变下划线（无底色块） ---- */
html[data-frontend-theme="aurora"] .header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
html[data-frontend-theme="aurora"] .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 参考站：内边距更紧凑、字重更轻 */
  padding: 8px 15px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color .26s ease;
}
/* 渐变下划线：hover / 当前页从左展开 */
html[data-frontend-theme="aurora"] .nav-link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--aurora-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-out-expo);
  pointer-events: none;
}
html[data-frontend-theme="aurora"] .nav-link:hover {
  color: var(--text-primary);
  background: transparent;
  transform: none;
}
html[data-frontend-theme="aurora"] .nav-link:hover::after {
  transform: scaleX(1);
}
html[data-frontend-theme="aurora"] .nav-link.active {
  color: var(--accent-hover);
  font-weight: 600;
  background: transparent;
}
html[data-frontend-theme="aurora"] .nav-link.active::after {
  transform: scaleX(1);
}
/* 导航图标：跟随文字色深浅（保留各页面的品牌小图标） */
html[data-frontend-theme="aurora"] .nav-link img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .26s ease;
}
html[data-frontend-theme="aurora"] .nav-link:hover img,
html[data-frontend-theme="aurora"] .nav-link.active img {
  opacity: 1;
}

/* ---- 5.3 壁纸入口：去掉紫色胶囊，改为与其它导航项一致的纯文字 ----
   注意：layout.css 中 .nav-link.nav-wallpaper 使用了 !important（旧版紫色胶囊），
   因此此处必须同样加 !important，否则文字会被强制为白色，与相邻菜单不一致。 */
html[data-frontend-theme="aurora"] .nav-link.nav-wallpaper,
html[data-frontend-theme="aurora"] .nav-link.nav-highlight {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border-radius: 0;
  padding: 8px 15px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: none !important;
}
html[data-frontend-theme="aurora"] .nav-link.nav-wallpaper:hover,
html[data-frontend-theme="aurora"] .nav-link.nav-highlight:hover {
  background: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: none;
}
html[data-frontend-theme="aurora"] .nav-link.nav-wallpaper.active,
html[data-frontend-theme="aurora"] .nav-link.nav-highlight.active {
  background: transparent !important;
  color: var(--accent-hover) !important;
  box-shadow: none !important;
}
/* 壁纸图标原本被反白（filter: brightness(0) invert(1)），
   此处解除反白并令其跟随文字色，与相邻菜单图标观感一致 */
html[data-frontend-theme="aurora"] .nav-link.nav-wallpaper img,
html[data-frontend-theme="aurora"] .nav-link.nav-highlight img {
  opacity: .7 !important;
  filter: none !important;
}
html[data-frontend-theme="aurora"] .nav-link.nav-wallpaper:hover img,
html[data-frontend-theme="aurora"] .nav-link.nav-wallpaper.active img {
  opacity: 1 !important;
}

/* ---- 5.4 下拉菜单：真正的浮层，保留玻璃卡片质感 ---- */
html[data-frontend-theme="aurora"] .nav-dropdown-menu {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
html[data-frontend-theme="aurora"] .nav-dropdown-item {
  color: var(--text-secondary);
  font-size: 14px;
  transition: background .24s ease, color .24s ease;
}
html[data-frontend-theme="aurora"] .nav-dropdown-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ---- 5.5 语言切换：独立小控件，保留轻卡片 ---- */
html[data-frontend-theme="aurora"] .lang-switch-btn {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .24s ease, color .24s ease, background .24s ease;
}
html[data-frontend-theme="aurora"] .lang-switch-btn:hover {
  border-color: var(--accent-border);
  color: var(--accent-hover);
  background: rgba(255,255,255,0.78);
  transform: none;
}

/* ---- 5.6 手机端：隐藏桌面导航（保留底部 Tab 栏） ---- */
@media (max-width: 639px) {
  html[data-frontend-theme="aurora"] .header-nav { display: none; }
  html[data-frontend-theme="aurora"] .nav-link { padding: 8px 12px; font-size: 14px; }
}

/* ---------------------------------------------------------
   6. 卡片：玻璃磨砂 + 柔和描边 + 顶部内高光 + 悬浮
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] .sound-card,
html[data-frontend-theme="aurora"] .more-card,
html[data-frontend-theme="aurora"] .wide-card,
html[data-frontend-theme="aurora"] .stat-card,
html[data-frontend-theme="aurora"] .upload-card,
html[data-frontend-theme="aurora"] .upload-info-card,
html[data-frontend-theme="aurora"] .sound-panel,
html[data-frontend-theme="aurora"] .share-card-page,
html[data-frontend-theme="aurora"] .recommend-card,
html[data-frontend-theme="aurora"] .site-card,
html[data-frontend-theme="aurora"] .wx-modal-card,
html[data-frontend-theme="aurora"] .info-card,
html[data-frontend-theme="aurora"] .compress-card,
html[data-frontend-theme="aurora"] .up-stat,
html[data-frontend-theme="aurora"] .up-item,
html[data-frontend-theme="aurora"] .coll-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.9);
  transition:
    transform .34s var(--ease-out-expo),
    box-shadow .34s var(--ease-out-expo),
    border-color .28s ease,
    background .28s ease;
  overflow: hidden;
}
html[data-frontend-theme="aurora"] .sound-card:hover,
html[data-frontend-theme="aurora"] .more-card:hover,
html[data-frontend-theme="aurora"] .wide-card:hover,
html[data-frontend-theme="aurora"] .stat-card:hover,
html[data-frontend-theme="aurora"] .site-card:hover,
html[data-frontend-theme="aurora"] .recommend-card:hover,
html[data-frontend-theme="aurora"] .coll-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-border);
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.16),
    0 22px 56px -18px rgba(56,189,248,0.34),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* 卡片顶部极光渐变高光条（hover 显现） */
html[data-frontend-theme="aurora"] .sound-card::before,
html[data-frontend-theme="aurora"] .more-card::before,
html[data-frontend-theme="aurora"] .wide-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--aurora-grad);
  opacity: 0;
  transition: opacity .32s ease;
  z-index: 3;
}
html[data-frontend-theme="aurora"] .sound-card:hover::before,
html[data-frontend-theme="aurora"] .more-card:hover::before,
html[data-frontend-theme="aurora"] .wide-card:hover::before {
  opacity: 1;
}

/* 卡片内鼠标光斑层（JS 注入 .aurora-card-glow，与 glass 主题的 .glass-glow 互不冲突） */
html[data-frontend-theme="aurora"] .aurora-card-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .34s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(56,189,248,0.16) 0%,
    rgba(139,92,246,0.10) 42%,
    transparent 70%);
}
html[data-frontend-theme="aurora"] .aurora-card-glow.on { opacity: 1; }
/* 光斑层之下的实际内容保持在上层 */
html[data-frontend-theme="aurora"] .aurora-card-glow ~ * {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   7. 搜索栏 / Hero 输入框
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] .search-hero-bar {
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.95);
  transition: border-color .3s ease, box-shadow .3s ease;
}
html[data-frontend-theme="aurora"] .search-hero-bar:focus-within {
  border-color: rgba(56,189,248,0.55);
  box-shadow:
    0 0 0 4px rgba(56,189,248,0.12),
    0 18px 46px -16px rgba(56,189,248,0.36);
}
/* 搜索输入框：显式复位，确保不受全局表单样式影响
   （只保留透明背景 + 无边框，样式由外层 .search-hero-bar 承担） */
html[data-frontend-theme="aurora"] .search-hero-input {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text-primary);
}
html[data-frontend-theme="aurora"] .search-hero-input:focus {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
html[data-frontend-theme="aurora"] .search-hero-icon {
  color: var(--text-muted);
}
/* 紧凑搜索框输入：同样复位（样式由外层 .search-bar 承担） */
html[data-frontend-theme="aurora"] .search-input {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--text-primary);
}
html[data-frontend-theme="aurora"] .search-input:focus {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
html[data-frontend-theme="aurora"] .search-hero-title {
  letter-spacing: -.02em;
}
/* 标题中的强调字使用极光渐变文字 */
html[data-frontend-theme="aurora"] .search-hero-title .grad-text,
html[data-frontend-theme="aurora"] .grad-text {
  background: var(--aurora-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: auroraTextShine 6s linear infinite;
}
@keyframes auroraTextShine {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ---------------------------------------------------------
   8. 按钮：主按钮极光渐变 + 流光扫过
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] .btn-promo,
html[data-frontend-theme="aurora"] .btn-primary {
  position: relative;
  color: #FFF;
  background: var(--aurora-grad);
  background-size: 160% 160%;
  border: none;
  overflow: hidden;
  box-shadow: 0 10px 28px -10px rgba(56,189,248,0.55), 0 4px 12px -6px rgba(139,92,246,0.40);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s ease;
}
html[data-frontend-theme="aurora"] .btn-promo::after,
html[data-frontend-theme="aurora"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.5) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events: none;
}
html[data-frontend-theme="aurora"] .btn-promo:hover,
html[data-frontend-theme="aurora"] .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(56,189,248,0.62), 0 6px 18px -6px rgba(139,92,246,0.48);
}
html[data-frontend-theme="aurora"] .btn-promo:hover::after,
html[data-frontend-theme="aurora"] .btn-primary:hover::after {
  transform: translateX(120%);
}

/* 次要按钮 / 分页 / 语言按钮 */
html[data-frontend-theme="aurora"] .page-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .24s var(--ease-out-expo), border-color .24s ease, box-shadow .24s ease;
}
html[data-frontend-theme="aurora"] .page-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-sm);
}
/* 卡片操作按钮：试听 / 下载 / 分享 */
html[data-frontend-theme="aurora"] .card-actions .play-btn,
html[data-frontend-theme="aurora"] .card-actions .download-btn,
html[data-frontend-theme="aurora"] .card-actions .share-btn {
  transition: transform .24s var(--ease-out-expo), box-shadow .24s ease, background .24s ease;
}
html[data-frontend-theme="aurora"] .card-actions .play-btn:hover,
html[data-frontend-theme="aurora"] .card-actions .download-btn:hover,
html[data-frontend-theme="aurora"] .card-actions .share-btn:hover {
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   9. 筛选 / 排序按钮
   ------------------------------------------------------------
   见下方「10. 统计条」章节统一处理（分段控件与统计条同一层级）。
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   10. 统计条 / 页脚
   ------------------------------------------------------------
   统计条本身是「通栏」元素（满宽 border-bottom），
   故不用卡片外壳：改为一层极淡玻璃 + 上下细分隔线，
   让它融进页面，而非浮成一个框。
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] .stats-bar {
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
html[data-frontend-theme="aurora"] .stats-bar-inner {
  /* 与页面内容同一套左右留白节奏，视觉上对齐卡片区 */
  padding-top: 14px;
  padding-bottom: 14px;
}

/* 数字：降低视觉密度，不用满渐变，改深色 + 极轻光晕 */
html[data-frontend-theme="aurora"] .stat-number {
  background: var(--aurora-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  letter-spacing: -0.01em;
}
html[data-frontend-theme="aurora"] .stat-label {
  color: var(--text-muted);
}
/* 统计项之间用细分隔线替代大间距，结构更清晰 */
html[data-frontend-theme="aurora"] .stat-item + .stat-item {
  position: relative;
}
html[data-frontend-theme="aurora"] .stat-item + .stat-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(8px, 1.5vw, 24px));
  top: 50%;
  width: 1px;
  height: 26px;
  margin-top: -13px;
  background: var(--border-strong);
}

/* 分段控件：同样收敛为无框内嵌样式，与统计条同一层级 */
html[data-frontend-theme="aurora"] .format-filter,
html[data-frontend-theme="aurora"] .sort-filter {
  background: rgba(255,255,255,0.60);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}
html[data-frontend-theme="aurora"] .format-btn,
html[data-frontend-theme="aurora"] .sort-btn {
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  transition: background .24s ease, color .24s ease;
}
html[data-frontend-theme="aurora"] .format-btn:hover,
html[data-frontend-theme="aurora"] .sort-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.85);
  transform: none;
}
html[data-frontend-theme="aurora"] .format-btn.active,
html[data-frontend-theme="aurora"] .sort-btn.active {
  color: #FFF;
  background: var(--aurora-grad);
  box-shadow: 0 6px 18px -8px rgba(56,189,248,0.55);
}

html[data-frontend-theme="aurora"] .footer {
  background:
    radial-gradient(700px 300px at 14% 0%, rgba(45,212,191,0.10), transparent 60%),
    radial-gradient(700px 300px at 86% 8%, rgba(139,92,246,0.10), transparent 60%),
    var(--bg-muted);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------
   10.1 壁纸推广横幅
   ------------------------------------------------------------
   该元素在 HTML 里带行内 style（淡紫渐变 + 边框）与
   onmouseover/onmouseout 内联事件。处理策略分两层：
     · CSS 层：用 !important 压过初始内联 style
     · JS 层（theme-aurora.js）：移除内联事件与配色内联值，
       否则 JS 写入的行内样式会高于样式表，hover 时闪回紫色
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] .wallpaper-banner {
  background: linear-gradient(120deg,
    rgba(45,212,191,0.10) 0%,
    rgba(56,189,248,0.10) 48%,
    rgba(139,92,246,0.12) 100%) !important;
  border: 1px solid var(--accent-border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: none !important;
  transition: border-color .26s ease, background .26s ease !important;
}
html[data-frontend-theme="aurora"] .wallpaper-banner:hover,
html[data-frontend-theme="aurora"] .wallpaper-banner.aurora-banner:hover {
  background: linear-gradient(120deg,
    rgba(45,212,191,0.16) 0%,
    rgba(56,189,248,0.16) 48%,
    rgba(139,92,246,0.18) 100%) !important;
  border-color: rgba(56,189,248,0.42) !important;
  box-shadow: 0 12px 30px -18px rgba(56,189,248,0.5) !important;
}

/* ---------------------------------------------------------
   11. 表单控件
   ------------------------------------------------------------
   注意：必须排除站内已有的独立搜索框输入类：
     · .search-hero-input  首页大搜索框
     · .search-input       紧凑搜索框（header 等位置）
   它们各有独立样式（位于 components.css）。若被这里的全局规则
   命中，会额外套上背景/边框/圆角，造成「框里套框」。
   glass 主题同样做了排除，此处保持一致。
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] input:not([type="checkbox"]):not([type="radio"]):not(.search-hero-input):not(.search-input):not([type="submit"]):not([type="button"]),
html[data-frontend-theme="aurora"] textarea,
html[data-frontend-theme="aurora"] select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color .24s ease, box-shadow .24s ease;
}
html[data-frontend-theme="aurora"] input:not(.search-hero-input):not(.search-input):focus,
html[data-frontend-theme="aurora"] textarea:focus,
html[data-frontend-theme="aurora"] select:focus {
  outline: none;
  border-color: rgba(56,189,248,0.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.14);
}

/* ---------------------------------------------------------
   12. 滚动条 / 悬浮按钮 / 底部导航
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,189,248,0.55), rgba(139,92,246,0.55));
  border-radius: 999px;
}
html[data-frontend-theme="aurora"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(56,189,248,0.78), rgba(139,92,246,0.78));
}

html[data-frontend-theme="aurora"] .float-btn:not([style*="background"]) {
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  transition: transform .28s var(--ease-out-expo), box-shadow .28s ease, color .24s ease;
}
html[data-frontend-theme="aurora"] .float-btn:hover {
  transform: translateY(-3px);
  color: var(--accent-hover);
  box-shadow: var(--shadow-lg);
}

html[data-frontend-theme="aurora"] .bottom-nav {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px -16px rgba(12,20,37,0.16);
}
html[data-frontend-theme="aurora"] .bottom-nav-item {
  transition: color .22s ease, transform .24s var(--ease-out-expo);
}
html[data-frontend-theme="aurora"] .bottom-nav-item.active {
  color: var(--accent-hover);
}

/* ---------------------------------------------------------
   13. Toast / 弹窗
   --------------------------------------------------------- */
html[data-frontend-theme="aurora"] .toast {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------
   14. 滚动入场
   ------------------------------------------------------------
   站点已有一套完整入场机制（animations.css 的 .reveal/.visible，
   由 motion.js 驱动）。本主题不再重复定义，避免两套规则作用于
   同一元素时特异性冲突，把元素压成 opacity:0 而永久不可见。
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   15. 降级：不支持 backdrop-filter 时用不透明背景兜底
   --------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-frontend-theme="aurora"] .sound-card,
  html[data-frontend-theme="aurora"] .more-card,
  html[data-frontend-theme="aurora"] .wide-card,
  html[data-frontend-theme="aurora"] .header,
  html[data-frontend-theme="aurora"] .bottom-nav,
  html[data-frontend-theme="aurora"] .stats-bar,
  html[data-frontend-theme="aurora"] .search-hero-bar,
  html[data-frontend-theme="aurora"] .nav-dropdown-menu {
    background: rgba(255,255,255,0.96);
  }
}

/* ---------------------------------------------------------
   16. 尊重系统「减少动态效果」偏好
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-theme="aurora"] body::after {
    animation: none;
  }
  html[data-frontend-theme="aurora"] .grad-text,
  html[data-frontend-theme="aurora"] .search-hero-title .grad-text {
    animation: none;
  }
  html[data-frontend-theme="aurora"] .sound-card,
  html[data-frontend-theme="aurora"] .sound-card:hover,
  html[data-frontend-theme="aurora"] .more-card:hover,
  html[data-frontend-theme="aurora"] .nav-link,
  html[data-frontend-theme="aurora"] .nav-link:hover,
  html[data-frontend-theme="aurora"] .float-btn,
  html[data-frontend-theme="aurora"] .float-btn:hover {
    transform: none;
    transition: none;
  }
  html[data-frontend-theme="aurora"] .aurora-card-glow { display: none; }
  #auroraCursorGlow { display: none; }
  #auroraHeroLayer { display: none; }
}

/* ---------------------------------------------------------
   17. 移动端适配
   --------------------------------------------------------- */
@media (max-width: 768px) {
  html[data-frontend-theme="aurora"] body::before {
    background-size: 40px 40px;
  }
  html[data-frontend-theme="aurora"] body {
    background-size: 40px 40px, 40px 40px, auto, auto, auto, auto, auto;
  }
  #auroraCursorGlow { display: none; }
  html[data-frontend-theme="aurora"] body::after {
    filter: blur(64px) saturate(1.05);
  }
}