/* ============================================================
   theme-glass.css — 小米澎湃 OS 4「柔光玻璃」主题
   ------------------------------------------------------------
   仅前端视觉层覆盖，不改动任何页面 HTML 结构 / 功能逻辑。
   最后加载，通过 CSS 变量 + 组件级覆盖实现柔光玻璃质感：
     · 大面积磨砂毛玻璃（backdrop-filter 柔光模糊）
     · 弥散多色光晕背景（玻璃后透出的柔光）
     · 大圆角 + 半透明白描边 + 顶部内高光
     · 大范围低透明度柔阴影
   ============================================================ */

/* ---------------------------------------------------------
   1. 主题变量覆盖
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] {
  --bg:            #EEF1F8;
  --bg-card:       rgba(255,255,255,0.62);
  --bg-muted:      rgba(255,255,255,0.42);
  --bg-elevated:   rgba(255,255,255,0.78);
  --bg-header:     rgba(255,255,255,0.55);
  --bg-stats:      rgba(255,255,255,0.50);

  --text-primary:   #1C2333;
  --text-secondary: #5A6479;
  --text-muted:     #8B93A7;

  --accent:         #3C6EF5;
  --accent-hover:   #2B57D4;
  --accent-soft:    rgba(60,110,245,0.10);
  --accent-border:  rgba(60,110,245,0.20);

  --border:         rgba(255,255,255,0.55);
  --border-strong:  rgba(255,255,255,0.75);

  --shadow-sm:      0 2px 8px rgba(78,95,140,0.06);
  --shadow-md:      0 10px 30px -8px rgba(78,95,140,0.16);
  --shadow-lg:      0 24px 60px -16px rgba(78,95,140,0.24);

  --glass-bg:        rgba(255,255,255,0.58);
  --glass-border:    rgba(255,255,255,0.65);
  --glass-blur:      30px;

  --radius-sm:       10px;
  --radius-md:       16px;
  --radius-lg:       22px;

  /* 主题专属变量 */
  --glow-1:  rgba(120,160,255,0.55);
  --glow-2:  rgba(186,150,255,0.50);
  --glow-3:  rgba(255,168,204,0.42);
  --glow-4:  rgba(140,225,255,0.45);
  --glow-5:  rgba(190,235,200,0.40);
}

/* ---------------------------------------------------------
   2. 背景：弥散柔光光晕层
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] body {
  background:
    radial-gradient(1100px 720px at 12% -6%,  var(--glow-1) 0%, transparent 58%),
    radial-gradient(1000px 680px at 92% 4%,   var(--glow-2) 0%, transparent 60%),
    radial-gradient(900px 640px at 78% 96%,   var(--glow-3) 0%, transparent 62%),
    radial-gradient(820px 600px at 4% 88%,    var(--glow-4) 0%, transparent 60%),
    radial-gradient(760px 560px at 50% 52%,   var(--glow-5) 0%, transparent 65%),
    linear-gradient(160deg, #EEF2FB 0%, #F3EEFB 45%, #F7EFF6 100%);
  background-attachment: fixed;
}

/* 原生浮动光球层：柔光主题下更弥散 */
html[data-frontend-theme="glass"] .floating-bg {
  opacity: 0.55;
  filter: blur(80px) saturate(1.15);
}

/* ---------------------------------------------------------
   3. 顶部导航 / 底部导航 —— 悬浮玻璃条
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .header {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 6px 24px -10px rgba(78,95,140,0.18),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

html[data-frontend-theme="glass"] .nav-dropdown-menu {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 24px 50px -18px rgba(78,95,140,0.30),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

html[data-frontend-theme="glass"] .nav-link:hover,
html[data-frontend-theme="glass"] .nav-dropdown-item:hover {
  background: rgba(255,255,255,0.55);
}

/* 手机端底部导航：背景在通栏父级 .bottom-nav 上，不做圆角卡片 */
html[data-frontend-theme="glass"] .bottom-nav {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border-top: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    0 -8px 28px -14px rgba(78,95,140,0.28),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ---------------------------------------------------------
   4. 通用玻璃卡片
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .glass-panel,
html[data-frontend-theme="glass"] .sound-card.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.7);
}

/* ---------------------------------------------------------
   5. 音效卡片 —— 柔光玻璃块 + 鼠标光斑跟随
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .sound-card {
  background: rgba(255,255,255,0.56);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  box-shadow:
    0 12px 34px -14px rgba(78,95,140,0.22),
    inset 0 1px 0 rgba(255,255,255,0.92);
  transition:
    transform 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo),
    background 0.3s ease,
    border-color 0.3s ease;
}

/* 卡片顶部高光细线：柔光主题用白色细线（保持原 1px 高度与 hover 行为） */
html[data-frontend-theme="glass"] .sound-card::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  opacity: 0;
  z-index: 1;
}
html[data-frontend-theme="glass"] .sound-card:hover::before { opacity: 1; }

html[data-frontend-theme="glass"] .sound-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    0 30px 60px -18px rgba(78,95,140,0.30),
    0 0 0 1px rgba(255,255,255,0.75),
    0 0 40px -12px rgba(120,160,255,0.5),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ---------------------------------------------------------
   6. 分段筛选器 / 按钮
   —— 分段控件（sort/format）：外层容器做玻璃，内层按钮不加边框，
      避免出现「框套框」
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .sort-filter,
html[data-frontend-theme="glass"] .format-filter {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow:
    0 8px 22px -12px rgba(78,95,140,0.26),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* 内层未选中按钮：保持透明，不额外加边框 */
html[data-frontend-theme="glass"] .sort-btn,
html[data-frontend-theme="glass"] .format-btn {
  background: transparent;
  border: none;
  box-shadow: none;
}
html[data-frontend-theme="glass"] .sort-btn:hover,
html[data-frontend-theme="glass"] .format-btn:hover {
  background: rgba(255,255,255,0.7);
}

/* 选中态：柔和渐变玻璃胶囊 */
html[data-frontend-theme="glass"] .sort-btn.active,
html[data-frontend-theme="glass"] .format-btn.active {
  background: linear-gradient(135deg, rgba(60,110,245,0.95), rgba(120,90,240,0.95));
  color: #FFFFFF;
  box-shadow:
    0 8px 20px -8px rgba(60,110,245,0.6),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* 语言切换按钮 */
html[data-frontend-theme="glass"] .lang-switch-btn {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

/* 卡片上的操作按钮 */
html[data-frontend-theme="glass"] .card-actions .play-btn,
html[data-frontend-theme="glass"] .card-actions .download-btn,
html[data-frontend-theme="glass"] .card-actions .share-btn {
  border-radius: var(--radius-md);
}

html[data-frontend-theme="glass"] .btn-promo {
  border-radius: var(--radius-md);
  box-shadow:
    0 14px 34px -12px rgba(60,110,245,0.55),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ---------------------------------------------------------
   7. 通栏区块（统计栏 / 教程区）
   —— 这些原本就是「通栏背景条」，不做圆角卡片，
      只做一条柔和的通栏玻璃，避免出现「框套框」的割裂感
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .stats-bar {
  background: rgba(255,255,255,0.34);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: 0;
}

html[data-frontend-theme="glass"] .tutorial-section {
  border-top: 1px solid rgba(255,255,255,0.5);
  background: transparent;
}

/* ---------------------------------------------------------
   7.1 Hero 搜索区 —— 保持透明，只强化搜索框玻璃质感
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .search-hero {
  background: transparent;
  border: none;
  box-shadow: none;
}
html[data-frontend-theme="glass"] .search-hero-title {
  text-shadow: 0 1px 18px rgba(255,255,255,0.75);
}
html[data-frontend-theme="glass"] .search-hero-bar {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: var(--radius-full);
  box-shadow:
    0 14px 34px -14px rgba(78,95,140,0.30),
    inset 0 1px 0 rgba(255,255,255,0.95);
}
html[data-frontend-theme="glass"] .search-hero-bar:focus-within {
  border-color: rgba(60,110,245,0.55);
  box-shadow:
    0 18px 40px -14px rgba(60,110,245,0.38),
    0 0 0 4px rgba(60,110,245,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* ---------------------------------------------------------
   7.2 区块标题行 —— 不加背景，仅柔化
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .section-header {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ---------------------------------------------------------
   8. 弹窗 / Toast / 下拉
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .toast {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-md);
  box-shadow:
    0 22px 48px -16px rgba(78,95,140,0.28),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* ---------------------------------------------------------
   9. 悬浮按钮 —— 本身已是玻璃，仅增强阴影层次
      （带 inline 渐变色的按钮不做覆盖，保留原样）
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .float-btn:not([style*="background"]) {
  box-shadow:
    0 16px 36px -14px rgba(78,95,140,0.30),
    inset 0 1px 0 rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.7);
}

/* ---------------------------------------------------------
   10. 页脚
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .footer {
  background: rgba(255,255,255,0.42);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-top: 1px solid rgba(255,255,255,0.6);
}

/* ---------------------------------------------------------
   11. 表单控件 —— 保持原有尺寸/圆角，仅柔化底色与描边
       （排除 hero 搜索框等已单独处理的控件）
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] input:not([type="checkbox"]):not([type="radio"]):not(.search-hero-input):not([type="submit"]):not([type="button"]),
html[data-frontend-theme="glass"] textarea,
html[data-frontend-theme="glass"] select {
  background: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.85);
}

/* ---------------------------------------------------------
   11.1 各页面独立卡片 —— 统一补充玻璃质感
        这些卡片原本用 --bg-card（已被主题改为半透明白），
        这里补上毛玻璃模糊与描边，让整体质感统一；
        带强调渐变的图标块 / 变体卡片不做覆盖，保留原配色。
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] .more-card,
html[data-frontend-theme="glass"] .wide-card,
html[data-frontend-theme="glass"] .stat-card,
html[data-frontend-theme="glass"] .upload-card,
html[data-frontend-theme="glass"] .upload-info-card,
html[data-frontend-theme="glass"] .sound-panel,
html[data-frontend-theme="glass"] .share-card-page,
html[data-frontend-theme="glass"] .recommend-card,
html[data-frontend-theme="glass"] .site-card,
html[data-frontend-theme="glass"] .wx-modal-card,
html[data-frontend-theme="glass"] .info-card,
html[data-frontend-theme="glass"] .compress-card,
html[data-frontend-theme="glass"] .up-stat,
html[data-frontend-theme="glass"] .up-item {
  background: rgba(255,255,255,0.56);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-color: rgba(255,255,255,0.72);
  box-shadow:
    0 12px 32px -16px rgba(78,95,140,0.22),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* 独立卡片光斑跟随：由 JS 注入 .glass-glow 子元素驱动
   （这些卡片自带的 ::before/::after 已被占用，故用真实元素，避免冲突） */
html[data-frontend-theme="glass"] .glass-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.5),
    rgba(255,255,255,0.1) 42%,
    transparent 68%
  );
}
html[data-frontend-theme="glass"] .glass-glow.on { opacity: 1; }
/* 内部内容浮于光斑之上 */
html[data-frontend-theme="glass"] .glass-glow ~ * {
  position: relative;
  z-index: 2;
}

/* 这些卡片需要相对定位与裁切（JS 会加 .glass-glow） */
html[data-frontend-theme="glass"] :is(.more-card, .wide-card, .stat-card, .upload-card,
  .upload-info-card, .sound-panel, .share-card-page, .recommend-card, .site-card,
  .wx-modal-card, .info-card, .compress-card, .up-stat, .up-item) {
  overflow: hidden;
}

html[data-frontend-theme="glass"] .more-card:hover,
html[data-frontend-theme="glass"] .wide-card:hover,
html[data-frontend-theme="glass"] .stat-card:hover,
html[data-frontend-theme="glass"] .site-card:hover,
html[data-frontend-theme="glass"] .recommend-card:hover {
  background: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.95);
  box-shadow:
    0 22px 48px -20px rgba(78,95,140,0.30),
    0 0 34px -14px rgba(120,160,255,0.5),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ---------------------------------------------------------
   12. 滚动条柔化
   --------------------------------------------------------- */
html[data-frontend-theme="glass"] ::-webkit-scrollbar-thumb {
  background: rgba(120,135,170,0.42);
  border-radius: var(--radius-full);
}

/* ---------------------------------------------------------
   13. 交互细节增强 —— 让整体更「顺滑舒服」
   --------------------------------------------------------- */

/* 12.1 顶部导航链接：hover 浮起玻璃胶囊 */
html[data-frontend-theme="glass"] .nav-link {
  border-radius: var(--radius-full);
  transition:
    color 0.22s ease,
    background 0.28s var(--ease-out-expo),
    box-shadow 0.28s var(--ease-out-expo),
    transform 0.28s var(--ease-out-expo);
}
html[data-frontend-theme="glass"] .nav-link:hover {
  background: rgba(255,255,255,0.62);
  box-shadow:
    0 6px 18px -8px rgba(78,95,140,0.32),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transform: translateY(-1px);
}
html[data-frontend-theme="glass"] .nav-link.active {
  background: rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

/* 12.2 下拉菜单项：hover 微光 */
html[data-frontend-theme="glass"] .nav-dropdown-item {
  border-radius: var(--radius-sm);
  transition: background 0.22s ease, transform 0.22s var(--ease-out-expo);
}
html[data-frontend-theme="glass"] .nav-dropdown-item:hover {
  background: rgba(255,255,255,0.72);
  transform: translateX(2px);
}

/* 12.3 分段筛选按钮：hover / 按下 更有回弹手感 */
html[data-frontend-theme="glass"] .sort-btn,
html[data-frontend-theme="glass"] .format-btn {
  transition:
    color 0.2s ease,
    background 0.26s var(--ease-out-expo),
    box-shadow 0.26s var(--ease-out-expo),
    transform 0.2s var(--ease-out-expo);
}
html[data-frontend-theme="glass"] .sort-btn:hover,
html[data-frontend-theme="glass"] .format-btn:hover {
  transform: translateY(-1px);
}
html[data-frontend-theme="glass"] .sort-btn:active,
html[data-frontend-theme="glass"] .format-btn:active {
  transform: scale(0.95);
}

/* 12.4 卡片操作按钮（试听/下载/分享）：玻璃 + 上浮 */
html[data-frontend-theme="glass"] .card-actions .play-btn,
html[data-frontend-theme="glass"] .card-actions .download-btn,
html[data-frontend-theme="glass"] .card-actions .share-btn {
  transition:
    transform 0.24s var(--ease-out-expo),
    box-shadow 0.24s var(--ease-out-expo),
    background 0.24s ease;
}
html[data-frontend-theme="glass"] .card-actions .play-btn:hover,
html[data-frontend-theme="glass"] .card-actions .download-btn:hover,
html[data-frontend-theme="glass"] .card-actions .share-btn:hover {
  transform: translateY(-2px);
}

/* 12.5 通用按钮：柔和高光 + 上浮 */
html[data-frontend-theme="glass"] .btn-promo,
html[data-frontend-theme="glass"] .page-btn,
html[data-frontend-theme="glass"] .lang-switch-btn {
  transition:
    transform 0.24s var(--ease-out-expo),
    box-shadow 0.24s var(--ease-out-expo),
    background 0.24s ease;
}
html[data-frontend-theme="glass"] .btn-promo:hover,
html[data-frontend-theme="glass"] .page-btn:hover,
html[data-frontend-theme="glass"] .lang-switch-btn:hover {
  transform: translateY(-2px);
}
html[data-frontend-theme="glass"] .btn-promo:active,
html[data-frontend-theme="glass"] .page-btn:active,
html[data-frontend-theme="glass"] .lang-switch-btn:active {
  transform: translateY(0) scale(0.97);
}

/* 12.6 统计数字：柔光晕 */
html[data-frontend-theme="glass"] .stat-number {
  text-shadow: 0 2px 20px rgba(60,110,245,0.28);
}

/* 12.7 底部导航项：hover / 激活柔光 */
html[data-frontend-theme="glass"] .bottom-nav-item {
  transition: color 0.22s ease, transform 0.24s var(--ease-out-expo);
}
html[data-frontend-theme="glass"] .bottom-nav-item:active {
  transform: scale(0.92);
}

/* 12.8 悬浮按钮 hover 上浮 */
html[data-frontend-theme="glass"] .float-btn {
  transition:
    transform 0.28s var(--ease-out-expo),
    box-shadow 0.28s var(--ease-out-expo),
    background 0.24s ease,
    color 0.24s ease;
}
html[data-frontend-theme="glass"] .float-btn:hover {
  transform: translateY(-3px);
}

/* 12.9 卡片内图标：hover 轻微放大（延续原交互，统一缓动） */
html[data-frontend-theme="glass"] .card-icon-wrap,
html[data-frontend-theme="glass"] .more-card .card-icon {
  transition: transform 0.35s var(--ease-out-expo);
}

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

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  html[data-frontend-theme="glass"] .sound-card,
  html[data-frontend-theme="glass"] .sound-card:hover,
  html[data-frontend-theme="glass"] .nav-link,
  html[data-frontend-theme="glass"] .nav-link:hover,
  html[data-frontend-theme="glass"] .float-btn,
  html[data-frontend-theme="glass"] .float-btn:hover {
    transform: none;
    transition: none;
  }
  html[data-frontend-theme="glass"] .glass-glow { display: none; }
}