/* ===== 12 套主题：通过 实时切换 ===== */
/* 1. 水墨丹青（宣纸浅色 · 传统） */
[data-theme="shuimo"] {
--bg: #f3efe4; --bg2: #ebe6d7; --card: #fbf9f2; --card-edge: #d9d2bd;
--text: #2b2b28; --muted: #8a8474;
--accent: #a4342a; --accent2: #a4342a; --jade: #4a6b4f;
--font: "STKaiti", "KaiTi", "Noto Serif SC", "Songti SC", serif;
--bg-image: radial-gradient(1000px 700px at 50% -80px, #ffffff, var(--bg));
--btn-text: #fbf9f2;
--coin-a: #d9c68f; --coin-b: #b09a55; --coin-ring: #8f7a3c; --coin-glyph: #4a3d14;
--coin-a2: #c4b27e; --coin-b2: #96824a; --coin-ring2: #7d6a34; --coin-glyph2: #3a300f;
--seg: #3a3a36; --seg-off: #b5ad97;
}
/* 2. 朱漆鎏金（宫殿红金 · 传统） */
[data-theme="zhuqi"] {
--bg: #3f0f0a; --bg2: #521710; --card: #5a1c13; --card-edge: #8a3a24;
--text: #f7e8d0; --muted: #c9a98a;
--accent: #e6b34c; --accent2: #ff8a65; --jade: #7fc8a9;
--font: "STKaiti", "KaiTi", "Noto Serif SC", serif;
--bg-image: radial-gradient(1200px 800px at 50% -100px, #6b2415, var(--bg));
--btn-text: #3f0f0a;
--coin-a: #f2d47c; --coin-b: #c9992f; --coin-ring: #b98a2f; --coin-glyph: #5b3d05;
--coin-a2: #d8b563; --coin-b2: #9a7422; --coin-ring2: #a37c26; --coin-glyph2: #3d2a04;
--seg: linear-gradient(90deg, #f2d47c, #c9992f); --seg-off: #8a5a3a;
}
/* 3. 青花瓷（白地蓝花 · 传统） */
[data-theme="qinghua"] {
--bg: #eaf1f8; --bg2: #dce8f4; --card: #ffffff; --card-edge: #bfd4e8;
--text: #1c3a5e; --muted: #6d8aa8;
--accent: #2456a6; --accent2: #b03a5e; --jade: #2e7d6b;
--font: "STKaiti", "KaiTi", "Noto Serif SC", serif;
--bg-image: radial-gradient(1000px 700px at 50% -80px, #ffffff, var(--bg));
--btn-text: #ffffff;
--coin-a: #cfe0f0; --coin-b: #8fb0d4; --coin-ring: #5a82b0; --coin-glyph: #1c3a5e;
--coin-a2: #b8cde4; --coin-b2: #7a9cc4; --coin-ring2: #4a72a0; --coin-glyph2: #16304e;
--seg: #2456a6; --seg-off: #c3d6ea;
}
/* 4. 敦煌壁画（土黄石绿 · 传统） */
[data-theme="dunhuang"] {
--bg: #2b1d12; --bg2: #3a291a; --card: #45311e; --card-edge: #6b4a2a;
--text: #f0dfc0; --muted: #b39a76;
--accent: #d9913b; --accent2: #b3402f; --jade: #4fa08a;
--font: "STKaiti", "KaiTi", "Noto Serif SC", serif;
--bg-image: radial-gradient(1200px 800px at 50% -100px, #4d3820, var(--bg));
--btn-text: #2b1d12;
--coin-a: #e8c98a; --coin-b: #b98d42; --coin-ring: #9a7030; --coin-glyph: #4a3410;
--coin-a2: #d4b476; --coin-b2: #a37a36; --coin-ring2: #8a6228; --coin-glyph2: #3c2a0c;
--seg: linear-gradient(90deg, #e8c98a, #b98d42); --seg-off: #7a5a38;
}
/* 5. 竹简青（浅竹绿 · 传统） */
[data-theme="zhuqing"] {
--bg: #eef3e8; --bg2: #e2ebd8; --card: #fcfdf8; --card-edge: #c4d2b4;
--text: #2f3d28; --muted: #7d8a6d;
--accent: #55783a; --accent2: #a45a3a; --jade: #3a7a6a;
--font: "STKaiti", "KaiTi", "Noto Serif SC", "Songti SC", serif;
--bg-image: radial-gradient(1000px 700px at 50% -80px, #ffffff, var(--bg));
--btn-text: #fcfdf8;
--coin-a: #d9d2a8; --coin-b: #ada572; --coin-ring: #8a8254; --coin-glyph: #3c3814;
--coin-a2: #c6bf96; --coin-b2: #9a9262; --coin-ring2: #7c744a; --coin-glyph2: #302c0e;
--seg: #55783a; --seg-off: #b8c6a6;
}
/* 6. 现代简约（白底蓝调 · 现代） */
[data-theme="modern"] {
--bg: #fafafa; --bg2: #f0f0f0; --card: #ffffff; --card-edge: #e6e6e6;
--text: #141414; --muted: #8a8a8a;
--accent: #2563eb; --accent2: #dc2626; --jade: #059669;
--radius: 10px;
--bg-image: var(--bg);
--btn-text: #ffffff;
--coin-a: #e8e8e8; --coin-b: #b8b8b8; --coin-ring: #8a8a8a; --coin-glyph: #333;
--coin-a2: #d4d4d4; --coin-b2: #a0a0a0; --coin-ring2: #767676; --coin-glyph2: #2a2a2a;
--seg: #2563eb; --seg-off: #dcdcdc;
}
/* 7. 暗夜极简（黑白灰 · 现代） */
[data-theme="dark"] {
--bg: #0e0e10; --bg2: #17171a; --card: #1b1b1f; --card-edge: #2c2c31;
--text: #ededf0; --muted: #8f8f96;
--accent: #f2c94c; --accent2: #eb5757; --jade: #6fcf97;
--radius: 8px;
--bg-image: var(--bg);
--btn-text: #0e0e10;
--coin-a: #d8d8dc; --coin-b: #9a9aa2; --coin-ring: #6e6e76; --coin-glyph: #26262c;
--coin-a2: #bcbcc4; --coin-b2: #80808a; --coin-ring2: #5a5a64; --coin-glyph2: #1e1e24;
--seg: linear-gradient(90deg, #e8e8ec, #c0c0c8); --seg-off: #3a3a42;
}
/* 8. 科技赛博（霓虹蓝紫 · 科技） */
[data-theme="cyber"] {
--bg: #05070f; --bg2: #0b1120; --card: #0d1424; --card-edge: #1d3a5f;
--text: #d8e8ff; --muted: #6a86ac;
--accent: #00e5ff; --accent2: #ff2d78; --jade: #00ffa3;
--radius: 4px;
--font: "PingFang SC", "Microsoft YaHei", sans-serif;
--bg-image: radial-gradient(900px 600px at 80% -100px, rgba(0,229,255,.12), transparent),
radial-gradient(800px 600px at 10% 110%, rgba(122,44,255,.14), transparent),
var(--bg);
--btn-text: #05070f;
--coin-a: #16324f; --coin-b: #0a1a30; --coin-ring: #00e5ff; --coin-glyph: #00e5ff;
--coin-a2: #101f38; --coin-b2: #081426; --coin-ring2: #3a6ea8; --coin-glyph2: #6a86ac;
--seg: linear-gradient(90deg, #00e5ff, #7a2cff); --seg-off: #16233c;
}
/* 9. 苹果浅色（iOS Light） */
[data-theme="ios"] {
--bg: #f2f2f7; --bg2: #e5e5ea; --card: #ffffff; --card-edge: rgba(60,60,67,.12);
--text: #1c1c1e; --muted: #8e8e93;
--accent: #007aff; --accent2: #ff3b30; --jade: #34c759;
--radius: 16px;
--font: -apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif;
--bg-image: var(--bg);
--btn-text: #ffffff;
--coin-a: #ffe082; --coin-b: #e0b34c; --coin-ring: #c49a2e; --coin-glyph: #5b420a;
--coin-a2: #f0cf6e; --coin-b2: #c49a34; --coin-ring2: #a8842a; --coin-glyph2: #4a3608;
--seg: #007aff; --seg-off: #e0e0e6;
}
/* 10. 苹果深色（iOS Dark） */
[data-theme="ios-dark"] {
--bg: #000000; --bg2: #1c1c1e; --card: #1c1c1e; --card-edge: #38383a;
--text: #f5f5f7; --muted: #98989e;
--accent: #0a84ff; --accent2: #ff453a; --jade: #30d158;
--radius: 16px;
--font: -apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", sans-serif;
--bg-image: var(--bg);
--btn-text: #ffffff;
--coin-a: #e8c860; --coin-b: #b08828; --coin-ring: #8a681e; --coin-glyph: #3a2c06;
--coin-a2: #d0b050; --coin-b2: #987422; --coin-ring2: #7a5a1a; --coin-glyph2: #302404;
--seg: #0a84ff; --seg-off: #3a3a3c;
}
/* 11. 莫兰迪（灰调柔和 · 现代艺术） */
[data-theme="morandi"] {
--bg: #e9e5de; --bg2: #ded9d0; --card: #f5f2ec; --card-edge: #d3cdc2;
--text: #47453f; --muted: #918c81;
--accent: #a3766f; --accent2: #8f6b5a; --jade: #7f9a8b;
--radius: 18px;
--font: "PingFang SC", "Noto Sans SC", sans-serif;
--bg-image: radial-gradient(1000px 700px at 50% -80px, #f4f1ea, var(--bg));
--btn-text: #f5f2ec;
--coin-a: #d9cfc0; --coin-b: #b3a68f; --coin-ring: #948872; --coin-glyph: #4a4436;
--coin-a2: #c8bcae; --coin-b2: #a0937c; --coin-ring2: #837760; --coin-glyph2: #3e382c;
--seg: #a3766f; --seg-off: #d3ccc0;
}
/* 12. 极光（渐变发光 · 科技艺术） */
[data-theme="aurora"] {
--bg: #0a0a1a; --bg2: #141432; --card: rgba(24,24,52,.82); --card-edge: rgba(255,255,255,.14);
--text: #f0f0ff; --muted: #9d9dc4;
--accent: #7ef0d4; --accent2: #ff7edb; --jade: #7ef0d4;
--radius: 20px;
--bg-image: radial-gradient(800px 500px at 15% -50px, rgba(46,230,180,.25), transparent),
radial-gradient(900px 600px at 90% 10%, rgba(122,90,248,.28), transparent),
radial-gradient(700px 500px at 50% 115%, rgba(255,126,219,.18), transparent),
var(--bg);
--btn-text: #0a0a1a;
--coin-a: #2ee6b4; --coin-b: #147a8a; --coin-ring: #7ef0d4; --coin-glyph: #062a24;
--coin-a2: #8a7af0; --coin-b2: #4a3aa8; --coin-ring2: #b8a8ff; --coin-glyph2: #140a3a;
--seg: linear-gradient(90deg, #2ee6b4, #7a5af8); --seg-off: rgba(255,255,255,.14);
}
/* 霓虹主题的字面发光 */
[data-theme="cyber"] .face svg, [data-theme="aurora"] .face svg {
filter: drop-shadow(0 0 10px rgba(0,229,255,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
[data-theme="cyber"] .yao-bar .seg, [data-theme="aurora"] .yao-bar .seg {
box-shadow: 0 0 10px rgba(0,229,255,.45);
}
/* ===== 主题切换器 ===== */
.theme-fab {
position: fixed; right: 16px; bottom: 20px; z-index: 40;
width: 52px; height: 52px; border-radius: 50%;
background: var(--card); border: 1px solid var(--card-edge);
box-shadow: 0 4px 16px rgba(0,0,0,.3);
font-size: 22px; display: flex; align-items: center; justify-content: center;
}
.theme-sheet { z-index: 55; align-items: flex-end; }
.theme-sheet .modal-box { max-width: 480px; max-height: 72vh; overflow-y: auto; border-radius: 18px 18px 0 0; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.theme-item {
border: 2px solid var(--card-edge); background: var(--bg2); border-radius: 12px;
padding: 12px 6px 10px; text-align: center; color: var(--text); font-size: 13px;
display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 84px;
}
.theme-item.active { border-color: var(--accent); color: var(--accent); }
.theme-item .dots { display: flex; gap: 4px; }
.theme-item .dots i { width: 14px; height: 14px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.15); }
@media (max-width: 380px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } }