/* 主题：raindrop-lite（省电雨滴折射）
   WebGL2 渲染背景图 + 真实水滴折射（raindrop-fx 库，MIT）
   省电策略：renderScale 0.85 降采样 + 水滴参数精简 + backdrop-filter blur 降到 3px
   卡片底色完全透明（rgba(0,0,0,0)），靠 backdrop-filter 3px 提供合成层
   （走快路径省 GPU）+ 轻微模糊让背景透出且文字可读 */

/* ===== raindrop-lite 变量：卡片底色完全透明，backdrop-filter 降到 3px =====
   完全透明（rgba(0,0,0,0)）+ 保留 backdrop-filter（blur 3px）= 两全其美
   - backdrop-filter 存在 → 走合成快路径，GPU 不飙升
   - blur 3px → 背景图/水滴轮廓清晰透出
   - 完全透明底色 → 无额外遮挡
   文字可读性靠 3px 轻微模糊 + 白色文字 */
body.theme-raindrop-lite {
  --bg: #1a1a1f;
  --bg-card: rgba(0, 0, 0, 0); /* 完全透明 */
  --bg-card-solid: #2c2c2e;
  --text: #f5f5f7;
  --text-secondary: #aeaeb2;
  --text-tertiary: #8e8e93;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #f5f5f7;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* 覆盖 .card 的 backdrop-filter：blur 20px → 3px
   测试结论（2026-07-11）：
   - 20px（原版）：糊，GPU 35-43%
   - 8px：清晰，GPU 30%
   - 4px：更清晰，GPU 30%
   - 3px：最终选定值（清晰 + GPU 稳定 + 文字可读）
   - 2px/1px：几乎无模糊，GPU <36%，但文字与动态背景易混淆
   - 0（完全移除）：GPU 50%（触发 alpha 混合慢路径）
   结论：只要 backdrop-filter 存在（哪怕 1px），就走合成快路径省 GPU。
   3px 是甜点：背景清晰透出 + GPU 稳定 + 文字可读性有保障 */
body.theme-raindrop-lite .card,
body.theme-raindrop-lite .skeleton,
body.theme-raindrop-lite .state {
  backdrop-filter: blur(3px) saturate(180%);
  -webkit-backdrop-filter: blur(3px) saturate(180%);
}