/* ============================================================
 * 主题定义
 * ------------------------------------------------------------
 * 【怎么加主题】照着下面任意一段复制，改个名字和颜色，
 *   然后在 js/ui.js 的 THEMES 数组里加一行即可。
 *
 * 配色原则（按教育类 App 的通行做法）：
 *   - 60-30-10：大面积底色 60% / 卡片与次要元素 30% / 强调色 10%
 *   - 教育类主色宜冷静（绿、青、蓝系），强调色用于按钮与当前步骤
 *   - 浅色背景比深色更利于阅读学习，所以浅色主题占多数
 *   - 文字色与背景的对比度尽量做到 4.5:1 以上
 * ============================================================ */

/* 毛玻璃主题的背景色块，普通主题不需要，统一兜底为透明。
   1/2/3 是三团主色雾，4/5 是补光的小雾，让背景有明暗起伏，
   不然 backdrop-filter 只能糊一块纯色，等于没效果。 */
:root {
  --blob-1: transparent;
  --blob-2: transparent;
  --blob-3: transparent;
  --blob-4: transparent;
  --blob-5: transparent;

  /* 玻璃质感参数：默认按「深色玻璃」给，浅色玻璃主题各自覆盖。
     - hi / hi2 / lo 是四个边的描边亮度，模拟光从左上方打过来
     - sheen 是压在玻璃面上的斜向反光
     - grain 是极淡颗粒，用来压住大半径模糊产生的色带 */
  --glass-blur: 22px;
  --glass-sat: 1.7;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .12);
  --glass-hi: rgba(255, 255, 255, .42);
  --glass-hi2: rgba(255, 255, 255, .22);
  --glass-lo: rgba(255, 255, 255, .06);
  --glass-shadow: 0 18px 46px -16px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .22);
  --glass-grain: .05;
  --mesh-opacity: .58;

  /* 图片背景参数：只有 glass-photo-* 三套会用到。
     别的主题没有背景图，这组值留着不影响任何东西。 */
  --photo-blur: 30px;
  --photo-sat: 1;
  --photo-bright: 1;
  --photo-contrast: 1;
  --photo-zoom: 1.12;
  --photo-image-opacity: 1;
  --photo-veil: transparent;
}

/* 主题一：清爽浅色 */
[data-theme="light"] {
  --bg: #f4f6f9;
  --bg-deco: #e8edf4;
  --surface: #ffffff;
  --surface-2: #f0f3f7;
  --surface-3: #e6ebf2;
  --text: #1b1f24;
  --text-2: #59616d;
  --text-3: #8d96a3;
  --border: #e3e8ef;
  --border-2: #cfd7e2;
  --accent: #2f7ff0;
  --accent-2: #1f6ade;
  --accent-soft: #e7f0fe;
  --on-accent: #ffffff;
  --ok: #2e9e63;
  --ok-soft: #e6f6ed;
  --warn: #d99413;
  --warn-soft: #fdf3e0;
  --bad: #dc4b4b;
  --bad-soft: #fdeceb;
  --pic-bg: #eef2f8;
  --radius: 12px;
  --radius-lg: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题二：暗夜护眼 */
[data-theme="dark"] {
  --bg: #12151a;
  --bg-deco: #1a1f27;
  --surface: #1b2027;
  --surface-2: #232931;
  --surface-3: #2b323c;
  --text: #e9edf2;
  --text-2: #a6b0bd;
  --text-3: #78838f;
  --border: #2c333d;
  --border-2: #3b4451;
  --accent: #3fb0a4;
  --accent-2: #4cc4b7;
  --accent-soft: #16302e;
  --on-accent: #062220;
  --ok: #4bbd82;
  --ok-soft: #16302a;
  --warn: #e0ac3e;
  --warn-soft: #332a15;
  --bad: #e2706c;
  --bad-soft: #33201f;
  --pic-bg: #171c22;
  --radius: 12px;
  --radius-lg: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题三：卡通童趣 */
[data-theme="kids"] {
  --bg: #fff6e8;
  --bg-deco: #ffe9cf;
  --surface: #ffffff;
  --surface-2: #fff2e0;
  --surface-3: #ffe6cb;
  --text: #3a2b1f;
  --text-2: #7d6753;
  --text-3: #a89279;
  --border: #ffe0bb;
  --border-2: #f8c894;
  --accent: #ff8a3d;
  --accent-2: #f2761f;
  --accent-soft: #ffead9;
  --on-accent: #ffffff;
  --ok: #38a86a;
  --ok-soft: #e3f7ec;
  --warn: #e0952a;
  --warn-soft: #fdf0da;
  --bad: #e8604f;
  --bad-soft: #fdeae7;
  --pic-bg: #fff4e3;
  --radius: 18px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Comic Sans MS", "Chalkboard SE", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
 * 以下为新增主题（原有三个保持不变）
 * ============================================================ */

/* 主题四：林间绿 —— 教育类首选主色，绿 + 橙点缀 */
[data-theme="forest"] {
  --bg: #eef4ee;
  --bg-deco: #dcebdd;
  --surface: #ffffff;
  --surface-2: #e9f2ea;
  --surface-3: #d8e7da;
  --text: #16211a;
  --text-2: #4a5a4e;
  --text-3: #7d8d80;
  --border: #dbe8dc;
  --border-2: #bdd3bf;
  --accent: #178a4e;
  --accent-2: #12703f;
  --accent-soft: #dff2e6;
  --on-accent: #ffffff;
  --ok: #178a4e;
  --ok-soft: #dff2e6;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #c0392b;
  --bad-soft: #fbe9e5;
  --pic-bg: #eaf2eb;
  --radius: 14px;
  --radius-lg: 22px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题五：暖阳橙 —— 米底 + 深橙，暖色但不刺眼 */
[data-theme="sunset"] {
  --bg: #fdf5ee;
  --bg-deco: #f7e5d3;
  --surface: #ffffff;
  --surface-2: #fcf0e4;
  --surface-3: #f7e5d3;
  --text: #2a1d12;
  --text-2: #6b5540;
  --text-3: #9c8468;
  --border: #f6e5d4;
  --border-2: #e8c9a6;
  --accent: #b8520b;
  --accent-2: #9c4510;
  --accent-soft: #fdeadb;
  --on-accent: #ffffff;
  --ok: #1e8a4e;
  --ok-soft: #e2f4e9;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #c0392b;
  --bad-soft: #fbe9e5;
  --pic-bg: #fbf0e5;
  --radius: 16px;
  --radius-lg: 24px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题六：樱花粉 */
[data-theme="sakura"] {
  --bg: #fdf2f5;
  --bg-deco: #f9e0e8;
  --surface: #ffffff;
  --surface-2: #fceef2;
  --surface-3: #f8e0e8;
  --text: #2b1620;
  --text-2: #6d4a57;
  --text-3: #a37e8b;
  --border: #f7e2ea;
  --border-2: #eec3d1;
  --accent: #b83a68;
  --accent-2: #9c2f58;
  --accent-soft: #fde8ef;
  --on-accent: #ffffff;
  --ok: #1e8a4e;
  --ok-soft: #e2f4e9;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #b02a37;
  --bad-soft: #fbe6e8;
  --pic-bg: #fceef4;
  --radius: 18px;
  --radius-lg: 26px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题七：暮色紫 */
[data-theme="lavender"] {
  --bg: #f3f1fb;
  --bg-deco: #e0daf7;
  --surface: #ffffff;
  --surface-2: #eceafa;
  --surface-3: #ded8f7;
  --text: #1d1a2b;
  --text-2: #514b6b;
  --text-3: #857e9c;
  --border: #e5dff5;
  --border-2: #cbc2ea;
  --accent: #6c3fd4;
  --accent-2: #5a2fbb;
  --accent-soft: #eae4fc;
  --on-accent: #ffffff;
  --ok: #1e8a4e;
  --ok-soft: #e2f4e9;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #c0392b;
  --bad-soft: #fbe9e5;
  --pic-bg: #edeafb;
  --radius: 16px;
  --radius-lg: 24px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题八：抹茶青 —— 偏冷的青绿，长时间看不累 */
[data-theme="matcha"] {
  --bg: #eff6f7;
  --bg-deco: #d8ecee;
  --surface: #ffffff;
  --surface-2: #e6f1f2;
  --surface-3: #d3e8ea;
  --text: #12201f;
  --text-2: #43585a;
  --text-3: #7b9093;
  --border: #dcebeb;
  --border-2: #b6d2d4;
  --accent: #0f7d7d;
  --accent-2: #0c6868;
  --accent-soft: #dcf1f1;
  --on-accent: #ffffff;
  --ok: #1e8a4e;
  --ok-soft: #e2f4e9;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #c0392b;
  --bad-soft: #fbe9e5;
  --pic-bg: #e8f2f3;
  --radius: 12px;
  --radius-lg: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题九：午夜深空 —— 纯黑暗色，OLED 屏更省电 */
[data-theme="midnight"] {
  --bg: #0d1014;
  --bg-deco: #151a21;
  --surface: #161b22;
  --surface-2: #1e242d;
  --surface-3: #262e38;
  --text: #e8edf3;
  --text-2: #a6b1bf;
  --text-3: #75808e;
  --border: #262e38;
  --border-2: #37414e;
  --accent: #4da3ff;
  --accent-2: #6cb4ff;
  --accent-soft: #16324f;
  --on-accent: #06131f;
  --ok: #4bbd82;
  --ok-soft: #16302a;
  --warn: #e0ac3e;
  --warn-soft: #332a15;
  --bad: #e2706c;
  --bad-soft: #33201f;
  --pic-bg: #10151b;
  --radius: 12px;
  --radius-lg: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十：纸墨护眼 —— 米黄纸底 + 褐色，模拟纸张，久读不涩 */
[data-theme="paper"] {
  --bg: #f4ece0;
  --bg-deco: #e8dcc8;
  --surface: #fbf6ec;
  --surface-2: #f1e7d5;
  --surface-3: #e6d8bf;
  --text: #33291c;
  --text-2: #5f5040;
  --text-3: #93805f;
  --border: #e6d8bf;
  --border-2: #d0bd9b;
  --accent: #8a5a2b;
  --accent-2: #734a20;
  --accent-soft: #f0e3cf;
  --on-accent: #fffaf2;
  --ok: #4d7a34;
  --ok-soft: #e8f0dc;
  --warn: #96600a;
  --warn-soft: #f6ead2;
  --bad: #a63a2a;
  --bad-soft: #f5e2dc;
  --pic-bg: #f1e7d5;
  --radius: 12px;
  --radius-lg: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* ============================================================
 * 新增主题（原有 10 套保持不动）
 * ============================================================ */

/* 主题十一：海洋蓝 */
[data-theme="ocean"] {
  --bg: #eef4fb;
  --bg-deco: #d9e7f7;
  --surface: #ffffff;
  --surface-2: #e4eef8;
  --surface-3: #d3e3f5;
  --text: #10202f;
  --text-2: #47596b;
  --text-3: #7f8fa3;
  --border: #dbe8f5;
  --border-2: #b8cee6;
  --accent: #1565c0;
  --accent-2: #11519f;
  --accent-soft: #dcecfb;
  --on-accent: #ffffff;
  --ok: #1e8a4e;
  --ok-soft: #e2f4e9;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #c0392b;
  --bad-soft: #fbe9e5;
  --pic-bg: #e9f1fa;
  --radius: 14px;
  --radius-lg: 22px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十二：薄荷糖 */
[data-theme="mint"] {
  --bg: #eefaf5;
  --bg-deco: #d1f0e2;
  --surface: #ffffff;
  --surface-2: #e2f6ee;
  --surface-3: #cfeee0;
  --text: #0f2119;
  --text-2: #43605a;
  --text-3: #7c9791;
  --border: #dbf0e7;
  --border-2: #b4ddce;
  --accent: #0e9f6e;
  --accent-2: #0b8259;
  --accent-soft: #d9f4e8;
  --on-accent: #ffffff;
  --ok: #0e9f6e;
  --ok-soft: #d9f4e8;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #c0392b;
  --bad-soft: #fbe9e5;
  --pic-bg: #e8f7f0;
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十三：蜜桃 */
[data-theme="peach"] {
  --bg: #fff5f0;
  --bg-deco: #ffdfcd;
  --surface: #ffffff;
  --surface-2: #ffe9de;
  --surface-3: #ffd9c6;
  --text: #2e170e;
  --text-2: #6f4b3d;
  --text-3: #a58272;
  --border: #fbe3d6;
  --border-2: #f0c1ab;
  --accent: #c2410c;
  --accent-2: #a3360a;
  --accent-soft: #fee8de;
  --on-accent: #ffffff;
  --ok: #1e8a4e;
  --ok-soft: #e2f4e9;
  --warn: #96600a;
  --warn-soft: #fbf0da;
  --bad: #b3261e;
  --bad-soft: #fbe6e4;
  --pic-bg: #fff0e8;
  --radius: 18px;
  --radius-lg: 26px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十四：极简灰（黑白灰，强调色就是黑） */
[data-theme="mono"] {
  --bg: #f5f5f5;
  --bg-deco: #e2e2e2;
  --surface: #ffffff;
  --surface-2: #ededed;
  --surface-3: #dcdcdc;
  --text: #191919;
  --text-2: #555555;
  --text-3: #8a8a8a;
  --border: #e4e4e4;
  --border-2: #c9c9c9;
  --accent: #1f1f1f;
  --accent-2: #000000;
  --accent-soft: #e8e8e8;
  --on-accent: #ffffff;
  --ok: #1a7f4b;
  --ok-soft: #e3f3ea;
  --warn: #8a5a00;
  --warn-soft: #f5ecd8;
  --bad: #b3261e;
  --bad-soft: #fae6e4;
  --pic-bg: #efefef;
  --radius: 6px;
  --radius-lg: 10px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十五：暮光蓝（深色） */
[data-theme="dusk"] {
  --bg: #0f1420;
  --bg-deco: #1a2338;
  --surface: #161c2b;
  --surface-2: #1e2637;
  --surface-3: #28324a;
  --text: #e6ecf7;
  --text-2: #a3b0c8;
  --text-3: #7180a0;
  --border: #253048;
  --border-2: #364460;
  --accent: #7dd3fc;
  --accent-2: #a5e4ff;
  --accent-soft: #14304a;
  --on-accent: #06263a;
  --ok: #4bbd82;
  --ok-soft: #16302a;
  --warn: #e0ac3e;
  --warn-soft: #332a15;
  --bad: #e2706c;
  --bad-soft: #33201f;
  --pic-bg: #111726;
  --radius: 12px;
  --radius-lg: 20px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十六：深空紫（深色） */
[data-theme="grape"] {
  --bg: #120e1e;
  --bg-deco: #1e1733;
  --surface: #1a1428;
  --surface-2: #221b33;
  --surface-3: #2c2440;
  --text: #ece7f7;
  --text-2: #aca0c8;
  --text-3: #7d6f99;
  --border: #2a2140;
  --border-2: #3d3159;
  --accent: #c4b5fd;
  --accent-2: #ddd0ff;
  --accent-soft: #241a3d;
  --on-accent: #1c1140;
  --ok: #4bbd82;
  --ok-soft: #16302a;
  --warn: #e0ac3e;
  --warn-soft: #332a15;
  --bad: #e2706c;
  --bad-soft: #33201f;
  --pic-bg: #171029;
  --radius: 14px;
  --radius-lg: 24px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* ============================================================
 * 毛玻璃主题
 * 四要素缺一不可：模糊 18-24px + 半透明底 + 1px 白色高光边框 + 分层阴影
 * ============================================================ */

/* 主题十七：极光玻璃 */
[data-theme="glass-aurora"] {
  --bg: #08101c;
  --bg-deco: #12283c;
  --blob-1: #22d3ee;
  --blob-2: #6366f1;
  --blob-3: #a855f7;
  --blob-4: #2dd4bf;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .14);
  --surface-3: rgba(255, 255, 255, .20);
  --text: #eef4fb;
  --text-2: rgba(238, 244, 251, .78);
  --text-3: rgba(238, 244, 251, .55);
  --border: rgba(255, 255, 255, .18);
  --border-2: rgba(255, 255, 255, .30);
  --accent: #5eead4;
  --accent-2: #99f6e4;
  --accent-soft: rgba(94, 234, 212, .20);
  --on-accent: #04241d;
  --ok: #4bbd82;
  --ok-soft: rgba(75, 189, 130, .20);
  --warn: #e0ac3e;
  --warn-soft: rgba(224, 172, 62, .20);
  --bad: #e2706c;
  --bad-soft: rgba(226, 112, 108, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十八：樱花玻璃 */
[data-theme="glass-sakura"] {
  --bg: #1b0f1a;
  --bg-deco: #33182c;
  --blob-1: #fb7185;
  --blob-2: #f472b6;
  --blob-3: #c084fc;
  --blob-4: #f0abfc;
  --surface: rgba(255, 255, 255, .11);
  --surface-2: rgba(255, 255, 255, .15);
  --surface-3: rgba(255, 255, 255, .21);
  --text: #fdf2f6;
  --text-2: rgba(253, 242, 246, .80);
  --text-3: rgba(253, 242, 246, .57);
  --border: rgba(255, 255, 255, .20);
  --border-2: rgba(255, 255, 255, .32);
  --accent: #fda4af;
  --accent-2: #fecdd3;
  --accent-soft: rgba(253, 164, 175, .22);
  --on-accent: #3f0d1c;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .09);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题十九：落日玻璃 */
[data-theme="glass-sunset"] {
  --bg: #1c1008;
  --bg-deco: #38200e;
  --blob-1: #fb923c;
  --blob-2: #f472b6;
  --blob-3: #8b5cf6;
  --blob-4: #fcd34d;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .14);
  --surface-3: rgba(255, 255, 255, .20);
  --text: #fdf6ee;
  --text-2: rgba(253, 246, 238, .79);
  --text-3: rgba(253, 246, 238, .56);
  --border: rgba(255, 255, 255, .19);
  --border-2: rgba(255, 255, 255, .31);
  --accent: #fdba74;
  --accent-2: #fed7aa;
  --accent-soft: rgba(253, 186, 116, .22);
  --on-accent: #3d1a05;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题二十：海洋玻璃 */
[data-theme="glass-ocean"] {
  --bg: #05161c;
  --bg-deco: #0b2b33;
  --blob-1: #06b6d4;
  --blob-2: #14b8a6;
  --blob-3: #3b82f6;
  --blob-4: #60a5fa;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .14);
  --surface-3: rgba(255, 255, 255, .20);
  --text: #eefafd;
  --text-2: rgba(238, 250, 253, .78);
  --text-3: rgba(238, 250, 253, .55);
  --border: rgba(255, 255, 255, .18);
  --border-2: rgba(255, 255, 255, .30);
  --accent: #67e8f9;
  --accent-2: #a5f3fc;
  --accent-soft: rgba(103, 232, 249, .20);
  --on-accent: #04252e;
  --ok: #4bbd82;
  --ok-soft: rgba(75, 189, 130, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 18px;
  --radius-lg: 26px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* ============================================================
 * 第二批毛玻璃主题（五套）
 * ------------------------------------------------------------
 * 和上面四套共用同一套玻璃渲染（见 app.css「毛玻璃主题」段），
 * 这里只负责给颜色。区别在于：
 *   - ice / dawn 是浅色玻璃：底色几乎白，文字走深色，
 *     四个边的描边要更亮、阴影要更淡，不然会脏
 *   - jade / berry / ink 是深色玻璃：底色薄，靠背景色雾透出来
 * ============================================================ */

/* 主题二十一：冰川玻璃（浅色）—— 冷白磨砂 + 蓝紫雾 */
[data-theme="glass-ice"] {
  --bg: #dce8f6;
  --bg-deco: #c6d9ee;
  --blob-1: #38bdf8;
  --blob-2: #8b5cf6;
  --blob-3: #22d3ee;
  --blob-4: #a78bfa;
  --blob-5: #60a5fa;
  --surface: rgba(255, 255, 255, .32);
  --surface-2: rgba(255, 255, 255, .58);
  --surface-3: rgba(255, 255, 255, .72);
  --text: #0f2438;
  --text-2: rgba(15, 36, 56, .76);
  --text-3: rgba(15, 36, 56, .52);
  --border: rgba(255, 255, 255, .70);
  --border-2: rgba(255, 255, 255, .92);
  --accent: #0e7490;
  --accent-2: #155e75;
  --accent-soft: rgba(14, 116, 144, .14);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .42);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  /* 浅色玻璃：描边接近纯白，阴影换成冷灰，不然白底上会发黑 */
  --glass-blur: 24px;
  --glass-sat: 1.50;
  --glass-bright: 1.05;
  --glass-sheen: rgba(255, 255, 255, .30);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-hi2: rgba(255, 255, 255, .55);
  --glass-lo: rgba(15, 36, 56, .10);
  --glass-shadow: 0 18px 44px -18px rgba(23, 54, 86, .42), 0 2px 6px rgba(23, 54, 86, .10);
  --glass-grain: .035;
  --mesh-opacity: .80;
}

/* 主题二十二：晨曦玻璃（浅色）—— 暖白磨砂 + 桃粉晨光 */
[data-theme="glass-dawn"] {
  --bg: #f7e7e3;
  --bg-deco: #f0d6cf;
  --blob-1: #f43f5e;
  --blob-2: #f59e0b;
  --blob-3: #8b5cf6;
  --blob-4: #fbbf24;
  --blob-5: #fb7185;
  --surface: rgba(255, 255, 255, .34);
  --surface-2: rgba(255, 255, 255, .60);
  --surface-3: rgba(255, 255, 255, .74);
  --text: #33131c;
  --text-2: rgba(51, 19, 28, .74);
  --text-3: rgba(51, 19, 28, .50);
  --border: rgba(255, 255, 255, .72);
  --border-2: rgba(255, 255, 255, .94);
  --accent: #be123c;
  --accent-2: #9f1239;
  --accent-soft: rgba(190, 18, 60, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .44);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 24px;
  --glass-sat: 1.45;
  --glass-bright: 1.04;
  --glass-sheen: rgba(255, 255, 255, .32);
  --glass-hi: rgba(255, 255, 255, .96);
  --glass-hi2: rgba(255, 255, 255, .56);
  --glass-lo: rgba(74, 26, 26, .10);
  --glass-shadow: 0 18px 44px -18px rgba(96, 40, 34, .40), 0 2px 6px rgba(96, 40, 34, .10);
  --glass-grain: .035;
  --mesh-opacity: .80;
}

/* 主题二十三：翡翠玻璃（深色）—— 墨绿底 + 青玉色雾 */
[data-theme="glass-jade"] {
  --bg: #04140f;
  --bg-deco: #0a241b;
  --blob-1: #10b981;
  --blob-2: #22d3ee;
  --blob-3: #a3e635;
  --blob-4: #34d399;
  --blob-5: #0ea5e9;
  --surface: rgba(255, 255, 255, .09);
  --surface-2: rgba(255, 255, 255, .13);
  --surface-3: rgba(255, 255, 255, .19);
  --text: #eafaf2;
  --text-2: rgba(234, 250, 242, .78);
  --text-3: rgba(234, 250, 242, .55);
  --border: rgba(255, 255, 255, .17);
  --border-2: rgba(255, 255, 255, .30);
  --accent: #6ee7b7;
  --accent-2: #a7f3d0;
  --accent-soft: rgba(110, 231, 183, .20);
  --on-accent: #04211a;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题二十四：莓果玻璃（深色）—— 紫红夜色，偏女性向但不过分甜 */
[data-theme="glass-berry"] {
  --bg: #150a18;
  --bg-deco: #24102b;
  --blob-1: #e879f9;
  --blob-2: #7c3aed;
  --blob-3: #f43f5e;
  --blob-4: #c026d3;
  --blob-5: #8b5cf6;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .14);
  --surface-3: rgba(255, 255, 255, .20);
  --text: #fbeffb;
  --text-2: rgba(251, 239, 251, .78);
  --text-3: rgba(251, 239, 251, .55);
  --border: rgba(255, 255, 255, .18);
  --border-2: rgba(255, 255, 255, .31);
  --accent: #f0abfc;
  --accent-2: #f5d0fe;
  --accent-soft: rgba(240, 171, 252, .20);
  --on-accent: #2d0a33;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* 主题二十五：曜石玻璃（深色）—— 近黑单色，银色高光，最克制的一套 */
[data-theme="glass-ink"] {
  --bg: #0a0b0d;
  --bg-deco: #14161a;
  --blob-1: #64748b;
  --blob-2: #38bdf8;
  --blob-3: #475569;
  --blob-4: #7dd3fc;
  --blob-5: #94a3b8;
  --surface: rgba(255, 255, 255, .07);
  --surface-2: rgba(255, 255, 255, .11);
  --surface-3: rgba(255, 255, 255, .16);
  --text: #eef1f5;
  --text-2: rgba(238, 241, 245, .74);
  --text-3: rgba(238, 241, 245, .50);
  --border: rgba(255, 255, 255, .14);
  --border-2: rgba(255, 255, 255, .26);
  --accent: #dbe3ec;
  --accent-2: #f8fafc;
  --accent-soft: rgba(219, 227, 236, .16);
  --on-accent: #0a0b0d;
  --ok: #86efac;
  --ok-soft: rgba(134, 239, 172, .18);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .18);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .18);
  --pic-bg: rgba(255, 255, 255, .06);
  --radius: 16px;
  --radius-lg: 24px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 26px;
  --glass-sat: 1.45;
  --glass-sheen: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .34);
  --glass-hi2: rgba(255, 255, 255, .18);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 20px 50px -18px rgba(0, 0, 0, .70), 0 2px 8px rgba(0, 0, 0, .30);
  --glass-grain: .055;
}

/* ============================================================
 * 第三批：图片背景玻璃（三套）
 * ------------------------------------------------------------
 * 和上面九套的区别：背景不是 CSS 合成的色雾，而是**当前单词的配图**。
 * 换一个词，背景跟着换一张。
 *   - 三套共用同一个 .photo-layer（见 app.css），
 *     只靠下面这些 --photo-* 变量区分观感
 *   - --photo-zoom 必须 >1，不然 blur 之后四周会透出底色
 *   - 没有配图的词（走 Emoji 兜底）会落到 --blob-* 色雾上，
 *     所以这三套也得配一组好看的色雾，不能留空
 * ============================================================ */

/* 主题二十六：暗夜照片 —— 图压到很暗，只留轮廓和色温，最沉的一套 */
[data-theme="glass-photo-dim"] {
  --bg: #0b0f16;
  --bg-deco: #131a24;
  --blob-1: #1e3a8a;
  --blob-2: #0f766e;
  --blob-3: #4c1d95;
  --blob-4: #164e63;
  --blob-5: #1e293b;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .12);
  --surface-3: rgba(255, 255, 255, .18);
  --text: #f2f6fb;
  --text-2: rgba(242, 246, 251, .76);
  --text-3: rgba(242, 246, 251, .52);
  --border: rgba(255, 255, 255, .16);
  --border-2: rgba(255, 255, 255, .28);
  --accent: #7dd3fc;
  --accent-2: #bae6fd;
  --accent-soft: rgba(125, 211, 252, .18);
  --on-accent: #06202e;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .18);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .18);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .18);
  --pic-bg: rgba(255, 255, 255, .07);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 24px;
  --glass-sat: 1.5;
  --glass-bright: .95;
  --glass-sheen: rgba(255, 255, 255, .09);
  --glass-hi: rgba(255, 255, 255, .30);
  --glass-hi2: rgba(255, 255, 255, .16);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 20px 52px -18px rgba(0, 0, 0, .72), 0 2px 8px rgba(0, 0, 0, .34);
  --glass-grain: .05;
  /* 色雾只留一丝，主角是图 */
  --mesh-opacity: .16;
  /* 图：重模糊 + 压暗，只剩色块感 */
  --photo-blur: 52px;
  --photo-sat: 1.10;
  --photo-bright: .30;
  --photo-contrast: 1.06;
  --photo-zoom: 1.24;
  /* 四周压暗，中间留一点亮，让卡片浮起来 */
  --photo-veil:
    radial-gradient(126% 104% at 50% 30%, rgba(6, 10, 18, .18) 0%, rgba(3, 5, 10, .86) 100%);
}

/* 主题二十七：柔光照片 —— 图提亮成淡彩，认得出拍的是什么，白天最舒服 */
[data-theme="glass-photo-soft"] {
  --bg: #eef2f8;
  --bg-deco: #dfe6f1;
  --blob-1: #a5b4fc;
  --blob-2: #99f6e4;
  --blob-3: #fbcfe8;
  --blob-4: #fde68a;
  --blob-5: #bfdbfe;
  --surface: rgba(255, 255, 255, .46);
  --surface-2: rgba(255, 255, 255, .54);
  --surface-3: rgba(255, 255, 255, .70);
  --text: #10243a;
  --text-2: rgba(16, 36, 58, .74);
  --text-3: rgba(16, 36, 58, .50);
  --border: rgba(255, 255, 255, .74);
  --border-2: rgba(255, 255, 255, .93);
  --accent: #1d4ed8;
  --accent-2: #1e40af;
  --accent-soft: rgba(29, 78, 216, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .50);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 22px;
  --glass-sat: 1.25;
  --glass-bright: 1.06;
  --glass-sheen: rgba(255, 255, 255, .34);
  --glass-hi: rgba(255, 255, 255, .96);
  --glass-hi2: rgba(255, 255, 255, .58);
  --glass-lo: rgba(16, 36, 58, .10);
  --glass-shadow: 0 26px 60px -22px rgba(24, 50, 86, .55), 0 4px 12px rgba(24, 50, 86, .16);
  --glass-grain: .03;
  --mesh-opacity: .22;
  /* 图：轻模糊 + 提亮，保留可辨识的形体和颜色 */
  --photo-blur: 20px;
  --photo-sat: 1.22;
  --photo-bright: 1.10;
  --photo-contrast: .94;
  --photo-zoom: 1.07;
  /* 白色奶雾从上往下渐浓，越靠下越白，文字压得住 */
  --photo-veil:
    radial-gradient(126% 102% at 50% 40%, rgba(255, 255, 255, 0) 44%, rgba(38, 58, 92, .22) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .34) 100%);
}

/* 主题二十八：浓彩照片 —— 高饱和 + 偏紫蓝，背景最张扬的一套 */
[data-theme="glass-photo-vivid"] {
  --bg: #100a1c;
  --bg-deco: #1a1030;
  --blob-1: #7c3aed;
  --blob-2: #db2777;
  --blob-3: #0891b2;
  --blob-4: #a21caf;
  --blob-5: #1e1b4b;
  --surface: rgba(255, 255, 255, .13);
  --surface-2: rgba(255, 255, 255, .15);
  --surface-3: rgba(255, 255, 255, .22);
  --text: #fdf4ff;
  --text-2: rgba(253, 244, 255, .78);
  --text-3: rgba(253, 244, 255, .54);
  --border: rgba(255, 255, 255, .20);
  --border-2: rgba(255, 255, 255, .34);
  --accent: #5eead4;
  --accent-2: #99f6e4;
  --accent-soft: rgba(94, 234, 212, .20);
  --on-accent: #062621;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fda4af;
  --bad-soft: rgba(253, 164, 175, .20);
  --pic-bg: rgba(255, 255, 255, .10);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 26px;
  --glass-sat: 1.75;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .12);
  --glass-hi: rgba(255, 255, 255, .40);
  --glass-hi2: rgba(255, 255, 255, .22);
  --glass-lo: rgba(255, 255, 255, .06);
  --glass-shadow: 0 26px 64px -18px rgba(16, 0, 32, .78), 0 4px 14px rgba(16, 0, 32, .40);
  --glass-grain: .055;
  --mesh-opacity: .18;
  /* 图：饱和度拉到接近失真，再压一点亮度，颜色才不会被模糊洗淡 */
  --photo-blur: 38px;
  --photo-sat: 1.75;
  --photo-bright: .58;
  --photo-contrast: 1.12;
  --photo-zoom: 1.16;
  /* 紫蓝→玫红的斜向叠加，等于给整张图重新调色 */
  --photo-veil:
    radial-gradient(126% 102% at 50% 36%, rgba(10, 2, 26, 0) 36%, rgba(10, 2, 26, .66) 100%),
    linear-gradient(142deg, rgba(76, 29, 149, .56) 0%, rgba(8, 47, 73, .34) 52%, rgba(157, 23, 77, .44) 100%);
}

/* ============================================================
 * 第四批：会呼吸的玻璃（十套）
 * ------------------------------------------------------------
 * 和前三批的区别只有一处：背景色雾在**慢慢动**。
 *
 * 每套给三条专属变量：
 *   --mesh          这一套的色雾构图（整条 background 值），
 *                   色团数量/位置/方向都不一样，否则十套只换颜色会撞脸
 *   --breath-name   动画名，对应 app.css 里的十组 keyframes
 *   --breath-dur    周期，22s~34s。用户明确要求「慢一点」，
 *                   低于 20s 就能看出是在「动」，不像在「呼吸」
 *
 * 每套的 keyframes 形态都不同，不是同一个缩放换个速度：
 *   缩放 / 潮汐 / 漂移 / 明暗 / 环流 / 心跳 / 摆荡 / 光晕 / 涟漪 / 斜波
 * ============================================================ */

/* 主题二十九：薄荷呼吸（浅色）—— 冷薄荷色团，整层极缓鼓缩，像深吸一口气 */
[data-theme="glass-breath-mint"] {
  --bg: #e3f5ef;
  --bg-deco: #cfeade;
  --blob-1: #34d399;
  --blob-2: #22d3ee;
  --blob-3: #a7f3d0;
  --blob-4: #5eead4;
  --blob-5: #86efac;
  --surface: rgba(255, 255, 255, .32);
  --surface-2: rgba(255, 255, 255, .58);
  --surface-3: rgba(255, 255, 255, .72);
  --text: #08251f;
  --text-2: rgba(8, 37, 31, .76);
  --text-3: rgba(8, 37, 31, .52);
  --border: rgba(255, 255, 255, .70);
  --border-2: rgba(255, 255, 255, .92);
  --accent: #0f766e;
  --accent-2: #115e59;
  --accent-soft: rgba(15, 118, 110, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .42);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 24px;
  --glass-sat: 1.48;
  --glass-bright: 1.05;
  --glass-sheen: rgba(255, 255, 255, .30);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-hi2: rgba(255, 255, 255, .55);
  --glass-lo: rgba(8, 37, 31, .10);
  --glass-shadow: 0 18px 44px -18px rgba(18, 62, 54, .40), 0 2px 6px rgba(18, 62, 54, .10);
  --glass-grain: .033;
  --mesh-opacity: .78;
  /* 五团错开的色晕，比默认版更靠四周，中间留着给卡片 */
  --mesh:
    radial-gradient(40% 36% at 15% 8%, var(--blob-1) 0%, transparent 68%),
    radial-gradient(32% 30% at 86% 20%, var(--blob-2) 0%, transparent 70%),
    radial-gradient(46% 38% at 82% 94%, var(--blob-3) 0%, transparent 68%),
    radial-gradient(24% 22% at 20% 80%, var(--blob-4) 0%, transparent 72%),
    radial-gradient(30% 26% at 50% 50%, var(--blob-5) 0%, transparent 76%);
  --breath-name: breathScale;
  --breath-dur: 22s;
  --breath-delay: -4s;
}

/* 主题三十：蜜桃呼吸（浅色）—— 三团大色块上下涨落，像潮水推过来又退回去 */
[data-theme="glass-breath-peach"] {
  --bg: #fdece3;
  --bg-deco: #f7dccd;
  --blob-1: #fb923c;
  --blob-2: #f472b6;
  --blob-3: #fcd34d;
  --blob-4: #fdba74;
  --blob-5: #fda4af;
  --surface: rgba(255, 255, 255, .34);
  --surface-2: rgba(255, 255, 255, .60);
  --surface-3: rgba(255, 255, 255, .74);
  --text: #3a1a0e;
  --text-2: rgba(58, 26, 14, .74);
  --text-3: rgba(58, 26, 14, .50);
  --border: rgba(255, 255, 255, .72);
  --border-2: rgba(255, 255, 255, .94);
  --accent: #b45309;
  --accent-2: #92400e;
  --accent-soft: rgba(180, 83, 9, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .44);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 22px;
  --glass-sat: 1.42;
  --glass-bright: 1.05;
  --glass-sheen: rgba(255, 255, 255, .32);
  --glass-hi: rgba(255, 255, 255, .96);
  --glass-hi2: rgba(255, 255, 255, .56);
  --glass-lo: rgba(58, 26, 14, .10);
  --glass-shadow: 0 18px 44px -18px rgba(120, 60, 32, .38), 0 2px 6px rgba(120, 60, 32, .10);
  --glass-grain: .033;
  --mesh-opacity: .76;
  /* 只有三团，每团都比默认大一圈，边缘糊成一片暖雾 */
  --mesh:
    radial-gradient(58% 52% at 22% 16%, var(--blob-1) 0%, transparent 72%),
    radial-gradient(54% 50% at 84% 80%, var(--blob-2) 0%, transparent 74%),
    radial-gradient(42% 40% at 50% 52%, var(--blob-3) 0%, transparent 78%);
  --breath-name: breathTide;
  --breath-dur: 26s;
  --breath-delay: -8s;
}

/* 主题三十一：薰衣草呼吸（浅色）—— 斜向光带横向游移，像云在窗前慢慢过 */
[data-theme="glass-breath-lilac"] {
  --bg: #efeaf9;
  --bg-deco: #e2daf4;
  --blob-1: #a78bfa;
  --blob-2: #f0abfc;
  --blob-3: #818cf8;
  --blob-4: #c4b5fd;
  --blob-5: #e879f9;
  --surface: rgba(255, 255, 255, .32);
  --surface-2: rgba(255, 255, 255, .58);
  --surface-3: rgba(255, 255, 255, .72);
  --text: #241a3d;
  --text-2: rgba(36, 26, 61, .76);
  --text-3: rgba(36, 26, 61, .52);
  --border: rgba(255, 255, 255, .70);
  --border-2: rgba(255, 255, 255, .92);
  --accent: #6d28d9;
  --accent-2: #5b21b6;
  --accent-soft: rgba(109, 40, 217, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .42);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 25px;
  --glass-sat: 1.45;
  --glass-bright: 1.05;
  --glass-sheen: rgba(255, 255, 255, .31);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-hi2: rgba(255, 255, 255, .55);
  --glass-lo: rgba(36, 26, 61, .10);
  --glass-shadow: 0 18px 44px -18px rgba(70, 50, 120, .36), 0 2px 6px rgba(70, 50, 120, .10);
  --glass-grain: .033;
  --mesh-opacity: .74;
  /* 两条斜向光带 + 一团压角，和「五团圆斑」是完全不同的构图 */
  --mesh:
    linear-gradient(118deg, transparent 6%, var(--blob-1) 24%, var(--blob-4) 34%, transparent 52%),
    linear-gradient(118deg, transparent 48%, var(--blob-2) 64%, transparent 84%),
    radial-gradient(64% 56% at 84% 92%, var(--blob-3) 0%, transparent 74%);
  --breath-name: breathDrift;
  --breath-dur: 30s;
  --breath-delay: -6s;
}

/* 主题三十二：象牙呼吸（浅色）—— 只有一团中心暖光，一呼一吸之间几乎察觉不到位移 */
[data-theme="glass-breath-ivory"] {
  --bg: #f1eade;
  --bg-deco: #e4d9c5;
  --blob-1: #f7d9ad;
  --blob-2: #e3d6c0;
  --blob-3: #d9bf9c;
  --blob-4: #fbe8cd;
  --blob-5: #c9b79c;
  --surface: rgba(255, 255, 255, .33);
  --surface-2: rgba(255, 255, 255, .60);
  --surface-3: rgba(255, 255, 255, .74);
  --text: #3a2f1e;
  --text-2: rgba(58, 47, 30, .74);
  --text-3: rgba(58, 47, 30, .50);
  --border: rgba(255, 255, 255, .72);
  --border-2: rgba(255, 255, 255, .94);
  --accent: #8a5a2b;
  --accent-2: #6f4620;
  --accent-soft: rgba(138, 90, 43, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .46);
  --radius: 24px;
  --radius-lg: 32px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 26px;
  --glass-sat: 1.30;
  --glass-bright: 1.04;
  --glass-sheen: rgba(255, 255, 255, .34);
  --glass-hi: rgba(255, 255, 255, .97);
  --glass-hi2: rgba(255, 255, 255, .58);
  --glass-lo: rgba(58, 47, 30, .10);
  --glass-shadow: 0 20px 48px -18px rgba(90, 72, 46, .40), 0 3px 8px rgba(90, 72, 46, .14);
  --glass-grain: .030;
  --mesh-opacity: .70;
  /* 一大一小两层同心暖光，四周留白，像纸上一盏灯 */
  --mesh:
    radial-gradient(46% 40% at 50% 44%, var(--blob-1) 0%, transparent 76%),
    radial-gradient(78% 68% at 50% 50%, var(--blob-3) 0%, transparent 84%);
  --breath-name: breathLum;
  --breath-dur: 34s;
  --breath-delay: -12s;
}

/* 主题三十三：深海呼吸（深色）—— 四角幽光绕小环转，最沉静的一套深色 */
[data-theme="glass-breath-deep"] {
  --bg: #04121b;
  --bg-deco: #0a2230;
  --blob-1: #0891b2;
  --blob-2: #1e3a8a;
  --blob-3: #0d9488;
  --blob-4: #38bdf8;
  --blob-5: #155e75;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .13);
  --surface-3: rgba(255, 255, 255, .19);
  --text: #e6f6fb;
  --text-2: rgba(230, 246, 251, .78);
  --text-3: rgba(230, 246, 251, .55);
  --border: rgba(255, 255, 255, .18);
  --border-2: rgba(255, 255, 255, .30);
  --accent: #67e8f9;
  --accent-2: #a5f3fc;
  --accent-soft: rgba(103, 232, 249, .20);
  --on-accent: #04202b;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 26px;
  --glass-sat: 1.60;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .11);
  --glass-hi: rgba(255, 255, 255, .38);
  --glass-hi2: rgba(255, 255, 255, .20);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 22px 54px -18px rgba(0, 0, 0, .74), 0 2px 8px rgba(0, 0, 0, .30);
  --glass-grain: .050;
  --mesh-opacity: .70;
  /* 四角各一团，中间留一个暗洞，像深水里远处的生物光 */
  --mesh:
    radial-gradient(30% 28% at 8% 6%, var(--blob-2) 0%, transparent 70%),
    radial-gradient(34% 30% at 94% 12%, var(--blob-1) 0%, transparent 72%),
    radial-gradient(38% 34% at 88% 94%, var(--blob-3) 0%, transparent 70%),
    radial-gradient(26% 24% at 10% 88%, var(--blob-4) 0%, transparent 72%),
    radial-gradient(20% 18% at 50% 50%, var(--blob-5) 0%, transparent 76%);
  --breath-name: breathOrbit;
  --breath-dur: 32s;
  --breath-delay: -10s;
}

/* 主题三十四：余烬呼吸（深色）—— 火光从底边往上烘，一次循环两下明暗 */
[data-theme="glass-breath-ember"] {
  --bg: #170b06;
  --bg-deco: #2a130a;
  --blob-1: #f97316;
  --blob-2: #dc2626;
  --blob-3: #f59e0b;
  --blob-4: #7c2d12;
  --blob-5: #ea580c;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .13);
  --surface-3: rgba(255, 255, 255, .19);
  --text: #fdf0e6;
  --text-2: rgba(253, 240, 230, .78);
  --text-3: rgba(253, 240, 230, .55);
  --border: rgba(255, 255, 255, .18);
  --border-2: rgba(255, 255, 255, .30);
  --accent: #fdba74;
  --accent-2: #fed7aa;
  --accent-soft: rgba(253, 186, 116, .20);
  --on-accent: #3a1200;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 24px;
  --glass-sat: 1.55;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .34);
  --glass-hi2: rgba(255, 255, 255, .18);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 20px 50px -18px rgba(0, 0, 0, .72), 0 2px 8px rgba(0, 0, 0, .32);
  --glass-grain: .050;
  --mesh-opacity: .72;
  /* 重头压在底边，越往下越亮，像炉膛里的余烬 */
  --mesh:
    radial-gradient(64% 46% at 50% 104%, var(--blob-1) 0%, transparent 72%),
    radial-gradient(38% 30% at 22% 88%, var(--blob-2) 0%, transparent 70%),
    radial-gradient(34% 28% at 80% 82%, var(--blob-3) 0%, transparent 72%),
    radial-gradient(26% 22% at 50% 38%, var(--blob-5) 0%, transparent 74%);
  --breath-name: breathBeat;
  --breath-dur: 22s;
  --breath-delay: -2s;
}

/* 主题三十五：苔林呼吸（深色）—— 上下两条绿带，整层极慢轻摆 */
[data-theme="glass-breath-moss"] {
  --bg: #0a1410;
  --bg-deco: #14251c;
  --blob-1: #4d7c0f;
  --blob-2: #15803d;
  --blob-3: #65a30d;
  --blob-4: #0f766e;
  --blob-5: #84cc16;
  --surface: rgba(255, 255, 255, .09);
  --surface-2: rgba(255, 255, 255, .13);
  --surface-3: rgba(255, 255, 255, .19);
  --text: #eef7e6;
  --text-2: rgba(238, 247, 230, .78);
  --text-3: rgba(238, 247, 230, .55);
  --border: rgba(255, 255, 255, .17);
  --border-2: rgba(255, 255, 255, .29);
  --accent: #bef264;
  --accent-2: #d9f99d;
  --accent-soft: rgba(190, 242, 100, .18);
  --on-accent: #14210a;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 20px;
  --radius-lg: 28px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 24px;
  --glass-sat: 1.50;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .10);
  --glass-hi: rgba(255, 255, 255, .34);
  --glass-hi2: rgba(255, 255, 255, .18);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 20px 50px -18px rgba(0, 0, 0, .72), 0 2px 8px rgba(0, 0, 0, .32);
  --glass-grain: .050;
  --mesh-opacity: .66;
  /* 拉扁的横向色带：上沿一条、下沿一条，中间偏侧再补一团 */
  --mesh:
    radial-gradient(88% 32% at 50% 2%, var(--blob-2) 0%, transparent 76%),
    radial-gradient(80% 30% at 50% 98%, var(--blob-1) 0%, transparent 78%),
    radial-gradient(40% 30% at 78% 46%, var(--blob-4) 0%, transparent 74%),
    radial-gradient(28% 24% at 16% 56%, var(--blob-5) 0%, transparent 76%);
  --breath-name: breathSway;
  --breath-dur: 28s;
  --breath-delay: -7s;
}

/* 主题三十六：霓虹呼吸（深色）—— 紫青两道光交叉，整层沿对角线来回推 */
[data-theme="glass-breath-neon"] {
  --bg: #0b0616;
  --bg-deco: #170a2b;
  --blob-1: #a855f7;
  --blob-2: #06b6d4;
  --blob-3: #ec4899;
  --blob-4: #6366f1;
  --blob-5: #22d3ee;
  --surface: rgba(255, 255, 255, .11);
  --surface-2: rgba(255, 255, 255, .14);
  --surface-3: rgba(255, 255, 255, .20);
  --text: #f6ecff;
  --text-2: rgba(246, 236, 255, .78);
  --text-3: rgba(246, 236, 255, .55);
  --border: rgba(255, 255, 255, .19);
  --border-2: rgba(255, 255, 255, .31);
  --accent: #f0abfc;
  --accent-2: #f5d0fe;
  --accent-soft: rgba(240, 171, 252, .20);
  --on-accent: #2a0b3d;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .09);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 26px;
  --glass-sat: 1.70;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .12);
  --glass-hi: rgba(255, 255, 255, .38);
  --glass-hi2: rgba(255, 255, 255, .20);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 24px 58px -18px rgba(0, 0, 0, .78), 0 3px 10px rgba(0, 0, 0, .34);
  --glass-grain: .055;
  --mesh-opacity: .62;
  /* 交叉光束：一横一斜，交出十字感，再压一团品红在右下 */
  --mesh:
    linear-gradient(98deg, transparent 8%, var(--blob-2) 34%, transparent 62%),
    linear-gradient(8deg, transparent 30%, var(--blob-1) 62%, transparent 90%),
    radial-gradient(34% 28% at 84% 88%, var(--blob-3) 0%, transparent 74%);
  --breath-name: breathWave;
  --breath-dur: 24s;
  --breath-delay: -5s;
}

/* 主题三十七：光晕呼吸（深色）—— 中心一团光软软撑开再收回，最像「吸气」 */
[data-theme="glass-breath-halo"] {
  --bg: #060a14;
  --bg-deco: #0d1526;
  --blob-1: #38bdf8;
  --blob-2: #4f46e5;
  --blob-3: #c7d2fe;
  --blob-4: #0ea5e9;
  --blob-5: #3730a3;
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .13);
  --surface-3: rgba(255, 255, 255, .19);
  --text: #eef4ff;
  --text-2: rgba(238, 244, 255, .78);
  --text-3: rgba(238, 244, 255, .55);
  --border: rgba(255, 255, 255, .18);
  --border-2: rgba(255, 255, 255, .30);
  --accent: #7dd3fc;
  --accent-2: #bae6fd;
  --accent-soft: rgba(125, 211, 252, .20);
  --on-accent: #04202e;
  --ok: #6ee7b7;
  --ok-soft: rgba(110, 231, 183, .20);
  --warn: #fcd34d;
  --warn-soft: rgba(252, 211, 77, .20);
  --bad: #fca5a5;
  --bad-soft: rgba(252, 165, 165, .20);
  --pic-bg: rgba(255, 255, 255, .08);
  --radius: 24px;
  --radius-lg: 32px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 26px;
  --glass-sat: 1.55;
  --glass-bright: 1;
  --glass-sheen: rgba(255, 255, 255, .11);
  --glass-hi: rgba(255, 255, 255, .36);
  --glass-hi2: rgba(255, 255, 255, .20);
  --glass-lo: rgba(255, 255, 255, .05);
  --glass-shadow: 0 22px 54px -18px rgba(0, 0, 0, .74), 0 2px 8px rgba(0, 0, 0, .30);
  --glass-grain: .048;
  --mesh-opacity: .64;
  /* 三层同心光，一层比一层淡、一层比一层大 */
  --mesh:
    radial-gradient(30% 26% at 50% 40%, var(--blob-1) 0%, transparent 78%),
    radial-gradient(54% 48% at 50% 42%, var(--blob-2) 0%, transparent 82%),
    radial-gradient(80% 72% at 50% 46%, var(--blob-5) 0%, transparent 88%);
  --breath-name: breathHalo;
  --breath-dur: 26s;
  --breath-delay: -9s;
}

/* 主题三十八：流光呼吸（浅色）—— 冷灰蓝三层弧光，另有一道高光在卡面上缓缓扫过 */
[data-theme="glass-breath-sheen"] {
  --bg: #dee8f5;
  --bg-deco: #cbd8ea;
  --blob-1: #60a5fa;
  --blob-2: #818cf8;
  --blob-3: #22d3ee;
  --blob-4: #93c5fd;
  --blob-5: #a78bfa;
  --surface: rgba(255, 255, 255, .32);
  --surface-2: rgba(255, 255, 255, .58);
  --surface-3: rgba(255, 255, 255, .74);
  --text: #10243a;
  --text-2: rgba(16, 36, 58, .76);
  --text-3: rgba(16, 36, 58, .52);
  --border: rgba(255, 255, 255, .70);
  --border-2: rgba(255, 255, 255, .92);
  --accent: #1d4ed8;
  --accent-2: #1e40af;
  --accent-soft: rgba(29, 78, 216, .13);
  --on-accent: #ffffff;
  --ok: #0f7a4a;
  --ok-soft: rgba(15, 122, 74, .14);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, .14);
  --bad: #b3261e;
  --bad-soft: rgba(179, 38, 30, .12);
  --pic-bg: rgba(255, 255, 255, .44);
  --radius: 22px;
  --radius-lg: 30px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --glass-blur: 24px;
  --glass-sat: 1.35;
  --glass-bright: 1.06;
  --glass-sheen: rgba(255, 255, 255, .34);
  --glass-hi: rgba(255, 255, 255, .96);
  --glass-hi2: rgba(255, 255, 255, .58);
  --glass-lo: rgba(16, 36, 58, .10);
  --glass-shadow: 0 20px 50px -20px rgba(24, 50, 86, .46), 0 2px 8px rgba(24, 50, 86, .12);
  --glass-grain: .030;
  --mesh-opacity: .90;
  /* 上下两道大弧 + 左上一点冷青，构图偏「天光」，和别的都不同 */
  --mesh:
    radial-gradient(112% 58% at 50% 4%, var(--blob-1) 0%, transparent 66%),
    radial-gradient(96% 54% at 50% 98%, var(--blob-2) 0%, transparent 70%),
    radial-gradient(44% 36% at 16% 46%, var(--blob-3) 0%, transparent 72%),
    radial-gradient(38% 32% at 88% 66%, var(--blob-4) 0%, transparent 74%);
  --breath-name: breathRipple;
  --breath-dur: 30s;
  --breath-delay: -3s;
}