/* 背景（12）：颜色变量，挂到 document.documentElement data-bg */
:root[data-bg='0'] {
  --app-bg: #f3f4f6;
  --panel-bg: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --border: #d1d5db;
  --accent: #2563eb;
  --btn-bg: #ffffff;
  --hover: rgba(0, 0, 0, 0.06);
  --preview-bg: #ffffff;
  --preview-text: #111827;
  --preview-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --code-bg: #f9fafb;
}
:root[data-bg='1'] {
  --app-bg: #f4ecd8;
  --panel-bg: #e8dfc8;
  --text: #3e3428;
  --muted: #7a6a58;
  --border: #d2c7b2;
  --accent: #8b4513;
  --btn-bg: #fffaf0;
  --hover: rgba(62, 52, 40, 0.08);
  --preview-bg: #fffaf0;
  --preview-text: #3e3428;
  --preview-shadow: 0 8px 24px rgba(62, 52, 40, 0.12);
  --code-bg: #f0e6d6;
}
:root[data-bg='2'] {
  --app-bg: #0f172a;
  --panel-bg: #111c33;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #1e293b;
  --accent: #38bdf8;
  --btn-bg: #1e293b;
  --hover: rgba(148, 163, 184, 0.12);
  --preview-bg: #111827;
  --preview-text: #e5e7eb;
  --preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --code-bg: #0b1224;
}
:root[data-bg='3'] {
  --app-bg: #102216;
  --panel-bg: #143220;
  --text: #e7f7ec;
  --muted: #8fb39a;
  --border: #1f3b2a;
  --accent: #4ade80;
  --btn-bg: #163527;
  --hover: rgba(74, 222, 128, 0.12);
  --preview-bg: #132a1f;
  --preview-text: #e7f7ec;
  --preview-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  --code-bg: #0d1f16;
}
:root[data-bg='4'] {
  --app-bg: linear-gradient(160deg, #e0f2fe 0%, #eef2ff 45%, #fdf4ff 100%);
  --panel-bg: rgba(255, 255, 255, 0.72);
  --text: #0f172a;
  --muted: #475569;
  --border: #cbd5f5;
  --accent: #4f46e5;
  --btn-bg: rgba(255, 255, 255, 0.9);
  --hover: rgba(79, 70, 229, 0.1);
  --preview-bg: rgba(255, 255, 255, 0.92);
  --preview-text: #0f172a;
  --preview-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  --code-bg: #f8fafc;
}
:root[data-bg='5'] {
  --app-bg: #fafafa;
  --panel-bg: #ffffff;
  --text: #111111;
  --muted: #737373;
  --border: #e5e5e5;
  --accent: #db2777;
  --btn-bg: #ffffff;
  --hover: rgba(219, 39, 119, 0.08);
  --preview-bg: #ffffff;
  --preview-text: #111111;
  --preview-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --code-bg: #f5f5f5;
}
:root[data-bg='6'] {
  --app-bg: #121212;
  --panel-bg: #1a1a1a;
  --text: #fafafa;
  --muted: #a3a3a3;
  --border: #262626;
  --accent: #f97316;
  --btn-bg: #171717;
  --hover: rgba(249, 115, 22, 0.15);
  --preview-bg: #0a0a0a;
  --preview-text: #fafafa;
  --preview-shadow: 0 0 0 1px #262626;
  --code-bg: #000000;
}
:root[data-bg='7'] {
  --app-bg: #f5f3ff;
  --panel-bg: #ede9fe;
  --text: #312e81;
  --muted: #6d28d9;
  --border: #ddd6fe;
  --accent: #7c3aed;
  --btn-bg: #ffffff;
  --hover: rgba(124, 58, 237, 0.1);
  --preview-bg: #ffffff;
  --preview-text: #312e81;
  --preview-shadow: 0 10px 32px rgba(49, 46, 129, 0.12);
  --code-bg: #f5f3ff;
}
:root[data-bg='8'] {
  --app-bg: #1c1917;
  --panel-bg: #292524;
  --text: #fafaf9;
  --muted: #a8a29e;
  --border: #44403c;
  --accent: #fbbf24;
  --btn-bg: #292524;
  --hover: rgba(251, 191, 36, 0.12);
  --preview-bg: #1c1917;
  --preview-text: #fafaf9;
  --preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --code-bg: #0c0a09;
}
:root[data-bg='9'] {
  --app-bg: #1a1033;
  --panel-bg: #221547;
  --text: #f3e8ff;
  --muted: #c4b5fd;
  --border: #3b2a6b;
  --accent: #a78bfa;
  --btn-bg: #2a185f;
  --hover: rgba(167, 139, 250, 0.15);
  --preview-bg: #120c24;
  --preview-text: #f3e8ff;
  --preview-shadow: 0 14px 48px rgba(0, 0, 0, 0.55);
  --code-bg: #0f0820;
}
:root[data-bg='10'] {
  --app-bg: #e8f4fc;
  --panel-bg: #d7eaf8;
  --text: #0c4a6e;
  --muted: #0369a1;
  --border: #bae6fd;
  --accent: #0284c7;
  --btn-bg: #f0f9ff;
  --hover: rgba(2, 132, 199, 0.12);
  --preview-bg: #ffffff;
  --preview-text: #0c4a6e;
  --preview-shadow: 0 10px 28px rgba(12, 74, 110, 0.1);
  --code-bg: #e0f2fe;
}
:root[data-bg='11'] {
  --app-bg: #fdf2f4;
  --panel-bg: #fce7eb;
  --text: #881337;
  --muted: #9f1239;
  --border: #fbcfe8;
  --accent: #db2777;
  --btn-bg: #fff1f2;
  --hover: rgba(219, 39, 119, 0.1);
  --preview-bg: #ffffff;
  --preview-text: #881337;
  --preview-shadow: 0 10px 28px rgba(136, 19, 55, 0.08);
  --code-bg: #ffe4e6;
}
:root[data-bg='12'] {
  --app-bg: #18181b;
  --panel-bg: #27272a;
  --text: #fafafa;
  --muted: #a1a1aa;
  --border: #3f3f46;
  --accent: #22d3ee;
  --btn-bg: #27272a;
  --hover: rgba(34, 211, 238, 0.12);
  --preview-bg: #18181b;
  --preview-text: #fafafa;
  --preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --code-bg: #09090b;
}
:root[data-bg='13'] {
  --app-bg: #ecfeff;
  --panel-bg: #cffafe;
  --text: #0e7490;
  --muted: #0891b2;
  --border: #a5f3fc;
  --accent: #0d9488;
  --btn-bg: #f0fdfa;
  --hover: rgba(13, 148, 136, 0.12);
  --preview-bg: #ffffff;
  --preview-text: #134e4a;
  --preview-shadow: 0 10px 28px rgba(8, 145, 178, 0.1);
  --code-bg: #ccfbf1;
}
:root[data-bg='14'] {
  --app-bg: #faf5f0;
  --panel-bg: #ede4d8;
  --text: #422006;
  --muted: #92400e;
  --border: #d6c4b0;
  --accent: #b45309;
  --btn-bg: #fffbeb;
  --hover: rgba(180, 83, 9, 0.1);
  --preview-bg: #fffbeb;
  --preview-text: #422006;
  --preview-shadow: 0 10px 28px rgba(66, 32, 6, 0.08);
  --code-bg: #fef3c7;
}
:root[data-bg='15'] {
  --app-bg: #f0fdfa;
  --panel-bg: #ccfbf1;
  --text: #115e59;
  --muted: #0f766e;
  --border: #99f6e4;
  --accent: #0d9488;
  --btn-bg: #ecfdf5;
  --hover: rgba(13, 148, 136, 0.12);
  --preview-bg: #ffffff;
  --preview-text: #134e4a;
  --preview-shadow: 0 10px 28px rgba(17, 94, 89, 0.08);
  --code-bg: #d1fae5;
}
:root[data-bg='16'] {
  --app-bg: #f5f3ff;
  --panel-bg: #ede9fe;
  --text: #4c1d95;
  --muted: #6d28d9;
  --border: #ddd6fe;
  --accent: #7c3aed;
  --btn-bg: #faf5ff;
  --hover: rgba(124, 58, 237, 0.1);
  --preview-bg: #ffffff;
  --preview-text: #4c1d95;
  --preview-shadow: 0 10px 28px rgba(76, 29, 149, 0.08);
  --code-bg: #ede9fe;
}
:root[data-bg='17'] {
  --app-bg: #faf8f5;
  --panel-bg: #f3efe8;
  --text: #44403c;
  --muted: #78716c;
  --border: #e7e5e4;
  --accent: #d97706;
  --btn-bg: #ffffff;
  --hover: rgba(217, 119, 6, 0.1);
  --preview-bg: #ffffff;
  --preview-text: #44403c;
  --preview-shadow: 0 10px 28px rgba(68, 64, 60, 0.08);
  --code-bg: #f5f5f4;
}
:root[data-bg='18'] {
  --app-bg: #1c1917;
  --panel-bg: #292524;
  --text: #fafaf9;
  --muted: #a8a29e;
  --border: #44403c;
  --accent: #eab308;
  --btn-bg: #292524;
  --hover: rgba(234, 179, 8, 0.12);
  --preview-bg: #1c1917;
  --preview-text: #fafaf9;
  --preview-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --code-bg: #0c0a09;
}
:root[data-bg='19'] {
  --app-bg: #fdf4f8;
  --panel-bg: #fce7f3;
  --text: #831843;
  --muted: #be185d;
  --border: #fbcfe8;
  --accent: #db2777;
  --btn-bg: #fff1f2;
  --hover: rgba(219, 39, 119, 0.1);
  --preview-bg: #ffffff;
  --preview-text: #831843;
  --preview-shadow: 0 10px 28px rgba(131, 24, 67, 0.08);
  --code-bg: #ffe4e6;
}
:root[data-bg='20'] {
  --app-bg: #f1f5f9;
  --panel-bg: #e2e8f0;
  --text: #1e293b;
  --muted: #64748b;
  --border: #cbd5e1;
  --accent: #475569;
  --btn-bg: #ffffff;
  --hover: rgba(71, 85, 105, 0.12);
  --preview-bg: #ffffff;
  --preview-text: #1e293b;
  --preview-shadow: 0 10px 28px rgba(30, 41, 59, 0.1);
  --code-bg: #f8fafc;
}
:root[data-bg='21'] {
  --app-bg: #ecfdf5;
  --panel-bg: #d1fae5;
  --text: #14532d;
  --muted: #166534;
  --border: #bbf7d0;
  --accent: #15803d;
  --btn-bg: #f0fdf4;
  --hover: rgba(21, 128, 61, 0.12);
  --preview-bg: #ffffff;
  --preview-text: #14532d;
  --preview-shadow: 0 10px 28px rgba(20, 83, 45, 0.08);
  --code-bg: #dcfce7;
}

/* Kindle 风格：暖灰纸面 + 轻微颗粒感（纯 CSS） */
:root[data-bg='22'] {
  --app-bg: #e8e2d8;
  --panel-bg: rgba(245, 241, 234, 0.94);
  --text: #2d2a26;
  --muted: #6b6560;
  --border: #c9c2b8;
  --accent: #c2410c;
  --btn-bg: #faf6ef;
  --hover: rgba(194, 65, 12, 0.08);
  --preview-bg: #f7f3eb;
  --preview-text: #1f1c18;
  --preview-shadow: 0 10px 28px rgba(45, 42, 38, 0.1);
  --code-bg: #ede8df;
}

/* 字体：仅字体栈 */
:root[data-font='0'] {
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-editor: ui-monospace, Menlo, Consolas, monospace;
  --font-preview: Georgia, 'Times New Roman', 'Noto Serif SC', serif;
}
:root[data-font='1'] {
  --font-ui: Georgia, 'Times New Roman', serif;
  --font-editor: Consolas, 'Courier New', monospace;
  --font-preview: 'Palatino Linotype', Palatino, 'Noto Serif SC', serif;
}
:root[data-font='2'] {
  --font-ui: system-ui, sans-serif;
  --font-editor: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --font-preview: 'Source Serif 4', Cambria, Georgia, serif;
}
:root[data-font='3'] {
  --font-ui: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-editor: 'Sarasa Mono SC', Consolas, monospace;
  --font-preview: 'Songti SC', SimSun, 'Noto Serif SC', serif;
}
:root[data-font='4'] {
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-editor: 'IBM Plex Mono', Consolas, monospace;
  --font-preview: 'IBM Plex Serif', Georgia, serif;
}
:root[data-font='5'] {
  --font-ui: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-editor: Menlo, Monaco, Consolas, monospace;
  --font-preview: 'Helvetica Neue', Arial, sans-serif;
}
:root[data-font='6'] {
  --font-ui: Verdana, Geneva, sans-serif;
  --font-editor: 'Lucida Console', monospace;
  --font-preview: Georgia, Cambria, serif;
}
:root[data-font='7'] {
  --font-ui: 'Trebuchet MS', sans-serif;
  --font-editor: 'Courier New', Courier, monospace;
  --font-preview: 'Book Antiqua', Palatino, serif;
}
:root[data-font='8'] {
  --font-ui: 'Segoe UI', system-ui, sans-serif;
  --font-editor: 'Cascadia Code', 'Cascadia Mono', Consolas, monospace;
  --font-preview: Constantia, 'Times New Roman', serif;
}
:root[data-font='9'] {
  --font-ui: 'Segoe UI Variable', 'Segoe UI', sans-serif;
  --font-editor: 'Cascadia Mono', Consolas, monospace;
  --font-preview: 'Sitka Text', Georgia, serif;
}
:root[data-font='10'] {
  --font-ui: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-editor: 'Noto Sans Mono CJK SC', 'Sarasa Mono SC', Consolas, monospace;
  --font-preview: 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
}
:root[data-font='11'] {
  --font-ui: 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-editor: ui-monospace, monospace;
  --font-preview: 'STKaiti', KaiTi, 'Noto Serif SC', serif;
}
:root[data-font='12'] {
  --font-ui: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-editor: 'Menlo', 'Monaco', Consolas, monospace;
  --font-preview: 'Songti SC', SimSun, 'Noto Serif SC', serif;
}
:root[data-font='13'] {
  --font-ui: 'Hiragino Sans GB', 'PingFang SC', sans-serif;
  --font-editor: 'SF Mono', Menlo, Consolas, monospace;
  --font-preview: 'Hiragino Mincho ProN', 'Songti SC', serif;
}
:root[data-font='14'] {
  --font-ui: 'LXGW WenKai', 'KaiTi', 'Microsoft YaHei', sans-serif;
  --font-editor: 'JetBrains Mono', Consolas, monospace;
  --font-preview: 'LXGW WenKai', 'KaiTi', 'Noto Serif SC', serif;
}
:root[data-font='15'] {
  --font-ui: 'HarmonyOS Sans', 'Microsoft YaHei', system-ui, sans-serif;
  --font-editor: 'HarmonyOS Sans Mono', Consolas, monospace;
  --font-preview: 'HarmonyOS Serif', 'Noto Serif SC', serif;
}
:root[data-font='16'] {
  --font-ui: 'OPPO Sans', 'Microsoft YaHei', system-ui, sans-serif;
  --font-editor: 'OPPO Sans Mono', Consolas, monospace;
  --font-preview: 'Source Han Serif SC', SimSun, serif;
}
:root[data-font='17'] {
  --font-ui: 'MiSans', 'Microsoft YaHei', system-ui, sans-serif;
  --font-editor: 'MiSans Mono', Consolas, monospace;
  --font-preview: 'Noto Serif SC', 'Source Han Serif SC', serif;
}
:root[data-font='18'] {
  --font-ui: 'Alibaba PuHuiTi', 'Microsoft YaHei', sans-serif;
  --font-editor: 'JetBrains Mono', Consolas, monospace;
  --font-preview: 'Alibaba PuHuiTi', 'Noto Serif SC', serif;
}
:root[data-font='19'] {
  --font-ui: 'Smiley Sans', 'Microsoft YaHei', sans-serif;
  --font-editor: 'JetBrains Mono', Consolas, monospace;
  --font-preview: 'Smiley Sans', 'Noto Serif SC', serif;
}
:root[data-font='20'] {
  --font-ui: system-ui, sans-serif;
  --font-editor: 'Maple Mono', 'Cascadia Code', Consolas, monospace;
  --font-preview: 'Source Serif 4', Georgia, serif;
}
:root[data-font='21'] {
  --font-ui: 'Fira Sans', system-ui, sans-serif;
  --font-editor: 'Fira Code', 'Fira Mono', Consolas, monospace;
  --font-preview: 'Fira Sans', Georgia, serif;
}
:root[data-font='22'] {
  --font-ui: 'Roboto', system-ui, sans-serif;
  --font-editor: 'Roboto Mono', Consolas, monospace;
  --font-preview: 'Roboto Slab', Georgia, serif;
}
:root[data-font='23'] {
  --font-ui: 'Open Sans', system-ui, sans-serif;
  --font-editor: 'Source Code Pro', Consolas, monospace;
  --font-preview: 'Merriweather', Georgia, serif;
}
:root[data-font='24'] {
  --font-ui: 'Lato', system-ui, sans-serif;
  --font-editor: 'Ubuntu Mono', Consolas, monospace;
  --font-preview: 'Lora', Georgia, serif;
}
:root[data-font='25'] {
  --font-ui: 'Montserrat', system-ui, sans-serif;
  --font-editor: 'Space Mono', Consolas, monospace;
  --font-preview: 'Playfair Display', Georgia, serif;
}
:root[data-font='26'] {
  --font-ui: 'Merriweather Sans', system-ui, sans-serif;
  --font-editor: 'Inconsolata', Consolas, monospace;
  --font-preview: 'Merriweather', Georgia, serif;
}
:root[data-font='27'] {
  --font-ui: system-ui, sans-serif;
  --font-editor: 'Source Code Pro', monospace;
  --font-preview: 'Crimson Text', 'Times New Roman', serif;
}
:root[data-font='28'] {
  --font-ui: 'Literata', Georgia, serif;
  --font-editor: 'IBM Plex Mono', Consolas, monospace;
  --font-preview: 'Literata', Georgia, serif;
}
:root[data-font='29'] {
  --font-ui: system-ui, sans-serif;
  --font-editor: 'Inconsolata', 'Consolas', monospace;
  --font-preview: Georgia, 'Noto Serif SC', serif;
}
:root[data-font='30'] {
  --font-ui: system-ui, sans-serif;
  --font-editor: 'Anonymous Pro', 'Courier New', monospace;
  --font-preview: 'Palatino Linotype', Palatino, serif;
}
:root[data-font='31'] {
  --font-ui: system-ui, sans-serif;
  --font-editor: 'Fantasque Sans Mono', Consolas, monospace;
  --font-preview: 'Charter', 'Noto Serif SC', serif;
}

:root[data-bg='4'] .toolbar,
:root[data-bg='4'] .tab-bar,
:root[data-bg='4'] .sidebar {
  backdrop-filter: blur(8px);
}
