@import "tailwindcss";
@import "./components/settings/shared.css"; /* 设置页样式（外移自 SettingsView.vue，规则带 .settings-view 前缀） */

:root {
  /* 用户强调色：JS 注入 inline --accent 时按级联优先级覆盖（用户强调色 > 预设 > 默认） */
  --accent: #5b5bf5;
  /* 品牌色：由 --accent 公式推导，预设/用户强调色只需改 --accent 即可整体换色相 */
  --brand-500: var(--accent);
  --brand-600: color-mix(in srgb, var(--accent) 78%, #000);
  --brand-50: color-mix(in srgb, var(--accent) 12%, transparent);
  --brand-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --pro-bg: #e0ebff;
  --pro-text: #1e40af;
  --bg-page: #eceff6;
  --bg-sidebar: rgba(255, 255, 255, 0.62);
  --bg-card: rgba(255, 255, 255, 0.74);
  --bg-card-solid: rgba(255, 255, 255, 0.88);
  --bg-card-soft: rgba(255, 255, 255, 0.55);
  --input-bg: rgba(255, 255, 255, 0.86);
  --bg-chat-panel: rgba(255, 255, 255, 0.97);
  /* 伪毛玻璃：把"被模糊后的背景色"烘焙进卡片自身，静态渐变零 blur 计算；
     色相层 tint 与中性玻璃基底 base 拆分，预设只换 tint 不动中性色 */
  --frost-tint-a: rgba(91, 91, 245, 0.10);
  --frost-tint-b: rgba(236, 72, 153, 0.07);
  --frost-tint-c: rgba(59, 130, 246, 0.09);
  /* 卡片玻璃透明度：--glass-dim（0.4–1.0）乘进基底 alpha，调小即透出壁纸/渐变背景 */
  --frost-base-a: rgba(255, 255, 255, calc(0.76 * var(--glass-dim, 1)));
  --frost-base-b: rgba(255, 255, 255, calc(0.66 * var(--glass-dim, 1)));
  --frost-surface:
    radial-gradient(180% 130% at 0% -12%, var(--frost-tint-a), transparent 55%),
    radial-gradient(150% 120% at 105% 6%, var(--frost-tint-b), transparent 55%),
    radial-gradient(170% 130% at 50% 116%, var(--frost-tint-c), transparent 55%),
    linear-gradient(150deg, var(--frost-base-a) 0%, var(--frost-base-b) 100%);
  --frost-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* 页面背景光晕：品牌色相与中性底色分离，预设可单独覆盖 */
  --glow-a: rgba(91, 91, 245, 0.18);
  --glow-b: rgba(236, 72, 153, 0.12);
  --glow-c: rgba(59, 130, 246, 0.16);
  --bg-base-a: #edf0fa;
  --bg-base-b: #f6f2ea;
  /* 页面默认背景（body）：渐变预设通过覆盖 --app-bg 整体替换，未设置时回退到这里 */
  --bg-page-surface:
    radial-gradient(1200px 800px at 12% -8%, var(--glow-a), transparent 55%),
    radial-gradient(1000px 700px at 100% 4%, var(--glow-b), transparent 55%),
    radial-gradient(1200px 900px at 55% 118%, var(--glow-c), transparent 55%),
    linear-gradient(150deg, var(--bg-base-a) 0%, var(--bg-base-b) 100%);
  --border-soft: rgba(255, 255, 255, 0.55);
  --border-strong: rgba(40, 35, 60, 0.22);
  --text-1: #26231d;
  --text-2: #57524a;
  --text-3: #8d877d;
  --text-4: #6f6a63;
  --text-on-accent: #ffffff;
  --c-yellow: #facc15;
  --c-red: #ef4444;
  --c-blue: #3b82f6;
  --c-green: #22c55e;
  --c-pink: #ec4899;
  --c-orange: #f59e0b;
  --c-purple: #a78bfa;
  --c-gray: #9ca3af;
  --c-yellow-ink: #806600;
  --c-red-ink: #b91c1c;
  --c-blue-ink: #1d4ed8;
  --c-green-ink: #15803d;
  --c-pink-ink: #be185d;
  --c-orange-ink: #b45309;
  --c-purple-ink: #6d28d9;
  --c-gray-ink: #4b5563;
  --c-yellow-soft: #fde68a;
  --c-red-soft: #fecaca;
  --c-blue-soft: #bfdbfe;
  --c-green-soft: #bbf7d0;
  --c-pink-soft: #fbcfe8;
  --c-orange-soft: #fde68a;
  --c-purple-soft: #ddd6fe;
  --c-gray-soft: #e5e7eb;
  --note-yellow-bg: #fef3c7;
  --note-yellow-text: #92400e;
  --note-pink-bg: #fce7f3;
  --note-pink-text: #9d174d;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(72, 62, 46, 0.05), 0 8px 24px rgba(72, 62, 46, 0.06);
  --shadow-item: 0 1px 2px rgba(72, 62, 46, 0.06), 0 2px 6px rgba(72, 62, 46, 0.05);
  --shadow-hover: 0 8px 20px rgba(72, 62, 46, 0.09), 0 20px 44px rgba(72, 62, 46, 0.09);
  --shadow-dock: 0 12px 32px rgba(72, 62, 46, 0.13), 0 28px 64px rgba(72, 62, 46, 0.1);
  --shadow-focus: 0 0 0 3px var(--brand-glow);
  --scrim: rgba(38, 35, 29, 0.48);
  --titlebar-h: 48px;
  --window-close: #e81123;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  /* 代码块（Markdown 代码/结构块）：跟随系统主题——亮色浅白打底，暗色深灰，能看出独立块即可 */
  --bg-code: #f6f8fa;
  --bg-code-head: #eef1f4;
  --code-text: #1f2328;
  --code-text-dim: #59636e;
  --code-border: rgba(31, 35, 40, 0.12);
  --code-inline-bg: rgba(13, 17, 23, 0.06);
  --code-inline-fg: #c7254e;
  /* 字体缩放：--fs-global 控制根字号（rem 基准），--fs-* 控制各内容模块（默认 1，由 JS 注入 inline 覆盖） */
  --fs-global: 1;
  --fs-sticky: 1;
  --fs-notes: 1;
  --fs-prompt: 1;
  --fs-todo: 1;
}

[data-theme="dark"] {
  --accent: #8b8bff;
  --brand-500: var(--accent);
  --brand-600: color-mix(in srgb, var(--accent) 70%, #fff);
  --brand-50: color-mix(in srgb, var(--accent) 16%, #16161f);
  --brand-glow: color-mix(in srgb, var(--accent) 28%, transparent);
  --pro-bg: #1e3a6e;
  --pro-text: #93c5fd;
  --bg-page: #12131b;
  --bg-sidebar: rgba(255, 255, 255, 0.08);
  --bg-card: rgba(255, 255, 255, 0.12);
  --bg-card-solid: rgba(255, 255, 255, 0.2);
  --bg-card-soft: rgba(255, 255, 255, 0.1);
  --input-bg: #1d1e29;
  --bg-chat-panel: rgba(28, 29, 41, 0.97);
  --frost-tint-a: rgba(139, 139, 255, 0.16);
  --frost-tint-b: rgba(236, 72, 153, 0.10);
  --frost-tint-c: rgba(59, 130, 246, 0.13);
  --frost-base-a: rgba(255, 255, 255, calc(0.14 * var(--glass-dim, 1)));
  --frost-base-b: rgba(255, 255, 255, calc(0.08 * var(--glass-dim, 1)));
  --frost-surface:
    radial-gradient(180% 130% at 0% -12%, var(--frost-tint-a), transparent 55%),
    radial-gradient(150% 120% at 105% 6%, var(--frost-tint-b), transparent 55%),
    radial-gradient(170% 130% at 50% 116%, var(--frost-tint-c), transparent 55%),
    linear-gradient(150deg, var(--frost-base-a) 0%, var(--frost-base-b) 100%);
  --frost-edge: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  /* 页面背景光晕（暗色） */
  --glow-a: rgba(139, 139, 255, 0.22);
  --glow-b: rgba(236, 72, 153, 0.14);
  --glow-c: rgba(59, 130, 246, 0.20);
  --bg-base-a: #141520;
  --bg-base-b: #1a1814;
  --border-soft: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --text-1: #f2efe8;
  --text-2: #ccc8bf;
  /* 暗色灰阶（2026-10-14 提亮一档）：--text-4 旧值 #817c73 在卡片表面（12% 白叠加，比页面底亮）
     对比度 ~4:1 低于 AA 小字线，市场卡片作者/安装量/更新说明等 11px 灰字看不清；
     新值在页面底 ~6.2:1、卡片面 ~4.5:1，--text-3 同步微提保持阶梯间距（页面 ~7.5:1 / 卡片 ~5.4:1） */
  --text-3: #a8a39a;
  --text-4: #99948b;
  --text-on-accent: #20232b;
  --c-yellow-soft: #3b3208;
  --c-red-soft: #3f1d1d;
  --c-blue-soft: #1d2b4a;
  --c-green-soft: #14331f;
  --c-pink-soft: #3a1d31;
  --c-orange-soft: #3b2a08;
  --c-purple-soft: #2a2440;
  --c-gray-soft: #2e2e38;
  --c-yellow-ink: #fcd34d;
  --c-red-ink: #fca5a5;
  --c-blue-ink: #93c5fd;
  --c-green-ink: #86efac;
  --c-pink-ink: #f9a8d4;
  --c-orange-ink: #fcd34d;
  --c-purple-ink: #c4b5fd;
  --c-gray-ink: #d1d5db;
  --note-yellow-bg: #3b3208;
  --note-yellow-text: #fcd34d;
  --note-pink-bg: #3a1d31;
  --note-pink-text: #f9a8d4;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-item: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.4), 0 24px 52px rgba(0, 0, 0, 0.3);
  --shadow-dock: 0 14px 36px rgba(0, 0, 0, 0.5), 0 30px 72px rgba(0, 0, 0, 0.36);
  --scrim: rgba(0, 0, 0, 0.55);
  --window-close: #f05a67;
  /* 暗色下代码块用深灰底 + 亮字，行内 code 用浅色半透明底 + 亮红字 */
  --bg-code: #161b22;
  --bg-code-head: #1c2129;
  --code-text: #e6edf3;
  --code-text-dim: #8b949e;
  --code-border: rgba(255, 255, 255, 0.1);
  --code-inline-bg: rgba(240, 246, 252, 0.12);
  --code-inline-fg: #ff9e9e;
}

/* ===== 预设层（色相 + 氛围）：只覆盖色相/光晕/底色 tint，中性令牌（--bg-card/text/border/--c-* 等）不动 =====
   亮色预设用 :root[data-preset=...]（优先级 0,2,0 > [data-theme=dark] 的 0,1,0），暗色预设块放最后再覆盖。
   中性玻璃基底 --frost-base-* 各预设沿用亮/暗默认值，无需重复声明。 */
/* 预设 · 护眼绿：自然低饱和绿，柔和护眼氛围 */
:root[data-preset="green"] {
  --accent: #059669;
  --glow-a: rgba(16, 185, 129, 0.18);
  --glow-b: rgba(132, 204, 22, 0.12);
  --glow-c: rgba(20, 184, 166, 0.16);
  --bg-base-a: #eef4ee;
  --bg-base-b: #f4f0e3;
  --frost-tint-a: rgba(16, 185, 129, 0.10);
  --frost-tint-b: rgba(132, 204, 22, 0.07);
  --frost-tint-c: rgba(20, 184, 166, 0.09);
  --pro-bg: #d6ede3;
  --pro-text: #0b6b52;
}
/* 预设 · 莫兰迪：低饱和灰紫，极低透明度光晕，沉静柔和 */
:root[data-preset="morandi"] {
  --accent: #7c7c8a;
  --glow-a: rgba(124, 124, 138, 0.10);
  --glow-b: rgba(167, 139, 170, 0.08);
  --glow-c: rgba(136, 132, 160, 0.09);
  --bg-base-a: #efefe9;
  --bg-base-b: #f5f3ee;
  --frost-tint-a: rgba(124, 124, 138, 0.06);
  --frost-tint-b: rgba(167, 139, 170, 0.05);
  --frost-tint-c: rgba(136, 132, 160, 0.05);
  --pro-bg: #e7e2ea;
  --pro-text: #686271;
}
/* 预设 · 午夜蓝：深邃皇家蓝 */
:root[data-preset="midnight"] {
  --accent: #2f54eb;
  --glow-a: rgba(47, 84, 235, 0.16);
  --glow-b: rgba(99, 102, 241, 0.10);
  --glow-c: rgba(59, 130, 246, 0.14);
  --bg-base-a: #e8edfb;
  --bg-base-b: #f0eff6;
  --frost-tint-a: rgba(47, 84, 235, 0.10);
  --frost-tint-b: rgba(99, 102, 241, 0.07);
  --frost-tint-c: rgba(59, 130, 246, 0.09);
  --pro-bg: #dbe4ff;
  --pro-text: #2a4bd0;
}
/* 预设 · 玫瑰红：热情玫瑰红 */
:root[data-preset="rose"] {
  --accent: #e11d48;
  --glow-a: rgba(225, 29, 72, 0.16);
  --glow-b: rgba(236, 72, 153, 0.12);
  --glow-c: rgba(244, 114, 182, 0.14);
  --bg-base-a: #fbedf1;
  --bg-base-b: #f6f0ec;
  --frost-tint-a: rgba(225, 29, 72, 0.09);
  --frost-tint-b: rgba(236, 72, 153, 0.07);
  --frost-tint-c: rgba(244, 114, 182, 0.08);
  --pro-bg: #fde3ea;
  --pro-text: #be123c;
}
/* 预设 · 琥珀金：暖调琥珀橙 */
:root[data-preset="amber"] {
  --accent: #d97706;
  --glow-a: rgba(217, 119, 6, 0.16);
  --glow-b: rgba(245, 158, 11, 0.12);
  --glow-c: rgba(251, 191, 36, 0.13);
  --bg-base-a: #fbf3e8;
  --bg-base-b: #f7f0e6;
  --frost-tint-a: rgba(217, 119, 6, 0.09);
  --frost-tint-b: rgba(245, 158, 11, 0.07);
  --frost-tint-c: rgba(251, 191, 36, 0.08);
  --pro-bg: #fbe8c9;
  --pro-text: #b45309;
}
/* 预设 · 青碧：清透青绿 */
:root[data-preset="teal"] {
  --accent: #0d9488;
  --glow-a: rgba(13, 148, 136, 0.16);
  --glow-b: rgba(20, 184, 166, 0.12);
  --glow-c: rgba(45, 212, 191, 0.13);
  --bg-base-a: #e8f4f2;
  --bg-base-b: #eff3ee;
  --frost-tint-a: rgba(13, 148, 136, 0.09);
  --frost-tint-b: rgba(20, 184, 166, 0.07);
  --frost-tint-c: rgba(45, 212, 191, 0.08);
  --pro-bg: #d2efe9;
  --pro-text: #0f766e;
}
/* 预设 · 紫罗兰：亮眼紫 */
:root[data-preset="violet"] {
  --accent: #7c3aed;
  --glow-a: rgba(124, 58, 237, 0.16);
  --glow-b: rgba(139, 92, 246, 0.12);
  --glow-c: rgba(167, 139, 250, 0.13);
  --bg-base-a: #f0ecfb;
  --bg-base-b: #f5f0f6;
  --frost-tint-a: rgba(124, 58, 237, 0.09);
  --frost-tint-b: rgba(139, 92, 246, 0.07);
  --frost-tint-c: rgba(167, 139, 250, 0.08);
  --pro-bg: #e4dbfb;
  --pro-text: #6d28d9;
}
/* 预设 · 天蓝：澄澈天空蓝 */
:root[data-preset="sky"] {
  --accent: #0284c7;
  --glow-a: rgba(2, 132, 199, 0.16);
  --glow-b: rgba(14, 165, 233, 0.12);
  --glow-c: rgba(56, 189, 248, 0.13);
  --bg-base-a: #e8f2f9;
  --bg-base-b: #eff3f6;
  --frost-tint-a: rgba(2, 132, 199, 0.09);
  --frost-tint-b: rgba(14, 165, 233, 0.07);
  --frost-tint-c: rgba(56, 189, 248, 0.08);
  --pro-bg: #d8eaf9;
  --pro-text: #0369a1;
}
/* 预设 · 墨石：沉稳石墨灰蓝 */
:root[data-preset="slate"] {
  --accent: #475569;
  --glow-a: rgba(71, 85, 105, 0.13);
  --glow-b: rgba(100, 116, 139, 0.10);
  --glow-c: rgba(148, 163, 184, 0.11);
  --bg-base-a: #eef0f3;
  --bg-base-b: #f4f2ee;
  --frost-tint-a: rgba(71, 85, 105, 0.08);
  --frost-tint-b: rgba(100, 116, 139, 0.06);
  --frost-tint-c: rgba(148, 163, 184, 0.07);
  --pro-bg: #e0e5eb;
  --pro-text: #334155;
}
/* ===== 渐变背景预设 =====
   仅覆盖 --app-bg（body 整块背景）+ 主色/氛围，UI 强调色仍是单色 --accent；
   渐变不能作为 color stop 喂给 glow/tint 变量，故这些仍用主色系单色 */
/* 预设 · 星夜渐变：靛蓝→紫跨色 */
:root[data-preset="grad-star"] {
  --accent: #6d5dfc;
  --app-bg: linear-gradient(150deg, #e0e7ff 0%, #ede9fe 50%, #fae8ff 100%);
  --glow-a: rgba(109, 93, 252, 0.18);
  --glow-b: rgba(124, 58, 237, 0.12);
  --glow-c: rgba(99, 102, 241, 0.15);
  --bg-base-a: #e0e7ff;
  --bg-base-b: #fae8ff;
  --frost-tint-a: rgba(109, 93, 252, 0.10);
  --frost-tint-b: rgba(124, 58, 237, 0.07);
  --frost-tint-c: rgba(99, 102, 241, 0.08);
  --pro-bg: #ddd6fe;
  --pro-text: #5b21b6;
}
/* 预设 · 落日渐变：橙→粉暖调 */
:root[data-preset="grad-sunset"] {
  --accent: #f4572e;
  --app-bg: linear-gradient(150deg, #ffe8d9 0%, #fff1ef 50%, #fde7f0 100%);
  --glow-a: rgba(244, 87, 46, 0.17);
  --glow-b: rgba(236, 72, 153, 0.12);
  --glow-c: rgba(245, 158, 11, 0.13);
  --bg-base-a: #ffe8d9;
  --bg-base-b: #fde7f0;
  --frost-tint-a: rgba(244, 87, 46, 0.09);
  --frost-tint-b: rgba(236, 72, 153, 0.07);
  --frost-tint-c: rgba(245, 158, 11, 0.08);
  --pro-bg: #ffd6c2;
  --pro-text: #c2410c;
}
/* 预设 · 极光渐变：青→紫跨色 */
:root[data-preset="grad-aurora"] {
  --accent: #0891b2;
  --app-bg: linear-gradient(150deg, #cffafe 0%, #e0f2fe 50%, #ede9fe 100%);
  --glow-a: rgba(8, 145, 178, 0.16);
  --glow-b: rgba(59, 130, 246, 0.12);
  --glow-c: rgba(20, 184, 166, 0.13);
  --bg-base-a: #cffafe;
  --bg-base-b: #ede9fe;
  --frost-tint-a: rgba(8, 145, 178, 0.09);
  --frost-tint-b: rgba(59, 130, 246, 0.07);
  --frost-tint-c: rgba(20, 184, 166, 0.08);
  --pro-bg: #c7f0e9;
  --pro-text: #0f766e;
}
/* 预设 · 玫瑰渐变：玫红→紫浪漫 */
:root[data-preset="grad-rose"] {
  --accent: #e11d48;
  --app-bg: linear-gradient(150deg, #fde8ec 0%, #f9ecf5 50%, #f3e8ff 100%);
  --glow-a: rgba(225, 29, 72, 0.17);
  --glow-b: rgba(124, 58, 237, 0.13);
  --glow-c: rgba(244, 114, 182, 0.13);
  --bg-base-a: #fde8ec;
  --bg-base-b: #f3e8ff;
  --frost-tint-a: rgba(225, 29, 72, 0.09);
  --frost-tint-b: rgba(124, 58, 237, 0.07);
  --frost-tint-c: rgba(244, 114, 182, 0.08);
  --pro-bg: #fbd5e0;
  --pro-text: #be123c;
}
/* 预设 · 森林渐变：绿→蓝跨色 */
:root[data-preset="grad-forest"] {
  --accent: #059669;
  --app-bg: linear-gradient(150deg, #d1fae5 0%, #dbeafe 50%, #e0f2fe 100%);
  --glow-a: rgba(5, 150, 105, 0.17);
  --glow-b: rgba(16, 185, 129, 0.12);
  --glow-c: rgba(13, 148, 136, 0.13);
  --bg-base-a: #d1fae5;
  --bg-base-b: #e0f2fe;
  --frost-tint-a: rgba(5, 150, 105, 0.09);
  --frost-tint-b: rgba(16, 185, 129, 0.07);
  --frost-tint-c: rgba(13, 148, 136, 0.08);
  --pro-bg: #c8ecdb;
  --pro-text: #047857;
}
/* 预设 · 鎏金渐变：金→红跨色 */
:root[data-preset="grad-gold"] {
  --accent: #d97706;
  --app-bg: linear-gradient(150deg, #fef3c7 0%, #fee2e2 50%, #ffedd5 100%);
  --glow-a: rgba(217, 119, 6, 0.16);
  --glow-b: rgba(245, 158, 11, 0.13);
  --glow-c: rgba(180, 83, 9, 0.12);
  --bg-base-a: #fef3c7;
  --bg-base-b: #ffedd5;
  --frost-tint-a: rgba(217, 119, 6, 0.09);
  --frost-tint-b: rgba(245, 158, 11, 0.07);
  --frost-tint-c: rgba(180, 83, 9, 0.07);
  --pro-bg: #fbe3bb;
  --pro-text: #b45309;
}
/* 预设 · 深海渐变：蓝→青跨色 */
:root[data-preset="grad-ocean"] {
  --accent: #2563eb;
  --app-bg: linear-gradient(150deg, #dbeafe 0%, #cffafe 50%, #ccfbf1 100%);
  --glow-a: rgba(37, 99, 235, 0.17);
  --glow-b: rgba(6, 182, 212, 0.13);
  --glow-c: rgba(59, 130, 246, 0.14);
  --bg-base-a: #dbeafe;
  --bg-base-b: #ccfbf1;
  --frost-tint-a: rgba(37, 99, 235, 0.09);
  --frost-tint-b: rgba(6, 182, 212, 0.07);
  --frost-tint-c: rgba(59, 130, 246, 0.08);
  --pro-bg: #c7dafe;
  --pro-text: #1d4ed8;
}
/* 预设 · 葡萄渐变：紫→粉跨色 */
:root[data-preset="grad-grape"] {
  --accent: #8b5cf6;
  --app-bg: linear-gradient(150deg, #ede9fe 0%, #fce7f3 50%, #fdf2f8 100%);
  --glow-a: rgba(139, 92, 246, 0.17);
  --glow-b: rgba(99, 102, 241, 0.13);
  --glow-c: rgba(167, 139, 250, 0.13);
  --bg-base-a: #ede9fe;
  --bg-base-b: #fdf2f8;
  --frost-tint-a: rgba(139, 92, 246, 0.09);
  --frost-tint-b: rgba(99, 102, 241, 0.07);
  --frost-tint-c: rgba(167, 139, 250, 0.08);
  --pro-bg: #ddd6fe;
  --pro-text: #6d28d9;
}
/* 预设 · 焰火渐变：红→黄跨色 */
:root[data-preset="grad-flame"] {
  --accent: #ef4444;
  --app-bg: linear-gradient(150deg, #fee2e2 0%, #fef3c7 50%, #fef9c3 100%);
  --glow-a: rgba(239, 68, 68, 0.16);
  --glow-b: rgba(249, 115, 22, 0.13);
  --glow-c: rgba(244, 63, 94, 0.13);
  --bg-base-a: #fee2e2;
  --bg-base-b: #fef9c3;
  --frost-tint-a: rgba(239, 68, 68, 0.09);
  --frost-tint-b: rgba(249, 115, 22, 0.07);
  --frost-tint-c: rgba(244, 63, 94, 0.08);
  --pro-bg: #fecaca;
  --pro-text: #b91c1c;
}
/* 预设 · 石墨渐变：灰→蓝跨色 */
:root[data-preset="grad-graphite"] {
  --accent: #64748b;
  --app-bg: linear-gradient(150deg, #e2e8f0 0%, #dbeafe 50%, #bfdbfe 100%);
  --glow-a: rgba(100, 116, 139, 0.14);
  --glow-b: rgba(71, 85, 105, 0.10);
  --glow-c: rgba(148, 163, 184, 0.11);
  --bg-base-a: #e2e8f0;
  --bg-base-b: #bfdbfe;
  --frost-tint-a: rgba(100, 116, 139, 0.08);
  --frost-tint-b: rgba(71, 85, 105, 0.06);
  --frost-tint-c: rgba(148, 163, 184, 0.07);
  --pro-bg: #dbe1e8;
  --pro-text: #475569;
}
/* 暗色预设：与亮色预设同级 (0,2,0) 但定义在后，暗色主题下优先 */
[data-theme="dark"][data-preset="green"] {
  --accent: #34d399;
  --glow-a: rgba(52, 211, 153, 0.22);
  --glow-b: rgba(74, 222, 128, 0.12);
  --glow-c: rgba(45, 212, 191, 0.18);
  --bg-base-a: #0f231a;
  --bg-base-b: #131a14;
  --frost-tint-a: rgba(52, 211, 153, 0.16);
  --frost-tint-b: rgba(74, 222, 128, 0.10);
  --frost-tint-c: rgba(45, 212, 191, 0.13);
  --pro-bg: #123229;
  --pro-text: #6ee7b7;
}
[data-theme="dark"][data-preset="morandi"] {
  --accent: #a3a3b3;
  --glow-a: rgba(163, 163, 179, 0.14);
  --glow-b: rgba(176, 152, 176, 0.10);
  --glow-c: rgba(150, 148, 168, 0.12);
  --bg-base-a: #17171d;
  --bg-base-b: #1d1c20;
  --frost-tint-a: rgba(163, 163, 179, 0.10);
  --frost-tint-b: rgba(176, 152, 176, 0.07);
  --frost-tint-c: rgba(150, 148, 168, 0.08);
  --pro-bg: #2b2932;
  --pro-text: #bcb6c7;
}
[data-theme="dark"][data-preset="midnight"] {
  --accent: #6c8cff;
  --glow-a: rgba(108, 140, 255, 0.22);
  --glow-b: rgba(99, 102, 241, 0.14);
  --glow-c: rgba(56, 132, 255, 0.20);
  --bg-base-a: #0d1428;
  --bg-base-b: #121623;
  --frost-tint-a: rgba(108, 140, 255, 0.16);
  --frost-tint-b: rgba(99, 102, 241, 0.10);
  --frost-tint-c: rgba(56, 132, 255, 0.13);
  --pro-bg: #182249;
  --pro-text: #a9c2ff;
}
[data-theme="dark"][data-preset="rose"] {
  --accent: #fb7185;
  --glow-a: rgba(251, 113, 133, 0.20);
  --glow-b: rgba(236, 72, 153, 0.14);
  --glow-c: rgba(244, 114, 182, 0.16);
  --bg-base-a: #221017;
  --bg-base-b: #1e1413;
  --frost-tint-a: rgba(251, 113, 133, 0.14);
  --frost-tint-b: rgba(236, 72, 153, 0.10);
  --frost-tint-c: rgba(244, 114, 182, 0.11);
  --pro-bg: #3a1622;
  --pro-text: #fda4af;
}
[data-theme="dark"][data-preset="amber"] {
  --accent: #fbbf24;
  --glow-a: rgba(251, 191, 36, 0.20);
  --glow-b: rgba(245, 158, 11, 0.14);
  --glow-c: rgba(217, 119, 6, 0.14);
  --bg-base-a: #221a0d;
  --bg-base-b: #1f1912;
  --frost-tint-a: rgba(251, 191, 36, 0.14);
  --frost-tint-b: rgba(245, 158, 11, 0.10);
  --frost-tint-c: rgba(217, 119, 6, 0.10);
  --pro-bg: #3a2b10;
  --pro-text: #fcd34d;
}
[data-theme="dark"][data-preset="teal"] {
  --accent: #2dd4bf;
  --glow-a: rgba(45, 212, 191, 0.20);
  --glow-b: rgba(20, 184, 166, 0.14);
  --glow-c: rgba(13, 148, 136, 0.14);
  --bg-base-a: #0c201e;
  --bg-base-b: #111c1a;
  --frost-tint-a: rgba(45, 212, 191, 0.14);
  --frost-tint-b: rgba(20, 184, 166, 0.10);
  --frost-tint-c: rgba(13, 148, 136, 0.10);
  --pro-bg: #12312c;
  --pro-text: #5eead4;
}
[data-theme="dark"][data-preset="violet"] {
  --accent: #a78bfa;
  --glow-a: rgba(167, 139, 250, 0.20);
  --glow-b: rgba(139, 92, 246, 0.14);
  --glow-c: rgba(124, 58, 237, 0.14);
  --bg-base-a: #171024;
  --bg-base-b: #1a1420;
  --frost-tint-a: rgba(167, 139, 250, 0.14);
  --frost-tint-b: rgba(139, 92, 246, 0.10);
  --frost-tint-c: rgba(124, 58, 237, 0.10);
  --pro-bg: #2b2140;
  --pro-text: #c4b5fd;
}
[data-theme="dark"][data-preset="sky"] {
  --accent: #38bdf8;
  --glow-a: rgba(56, 189, 248, 0.20);
  --glow-b: rgba(14, 165, 233, 0.14);
  --glow-c: rgba(2, 132, 199, 0.14);
  --bg-base-a: #0b1b28;
  --bg-base-b: #101820;
  --frost-tint-a: rgba(56, 189, 248, 0.14);
  --frost-tint-b: rgba(14, 165, 233, 0.10);
  --frost-tint-c: rgba(2, 132, 199, 0.10);
  --pro-bg: #12334d;
  --pro-text: #7dd3fc;
}
[data-theme="dark"][data-preset="slate"] {
  --accent: #94a3b8;
  --glow-a: rgba(148, 163, 184, 0.16);
  --glow-b: rgba(100, 116, 139, 0.12);
  --glow-c: rgba(71, 85, 105, 0.12);
  --bg-base-a: #14171c;
  --bg-base-b: #1a1a1c;
  --frost-tint-a: rgba(148, 163, 184, 0.11);
  --frost-tint-b: rgba(100, 116, 139, 0.08);
  --frost-tint-c: rgba(71, 85, 105, 0.08);
  --pro-bg: #232830;
  --pro-text: #cbd5e1;
}
/* 渐变背景预设 · 暗色 */
[data-theme="dark"][data-preset="grad-star"] {
  --accent: #a08cff;
  --app-bg: linear-gradient(150deg, #16132e 0%, #1e1740 50%, #141b36 100%);
  --glow-a: rgba(160, 140, 255, 0.22);
  --glow-b: rgba(124, 58, 237, 0.15);
  --glow-c: rgba(99, 102, 241, 0.18);
  --bg-base-a: #16132e;
  --bg-base-b: #141b36;
  --frost-tint-a: rgba(160, 140, 255, 0.15);
  --frost-tint-b: rgba(124, 58, 237, 0.10);
  --frost-tint-c: rgba(99, 102, 241, 0.12);
  --pro-bg: #2a2350;
  --pro-text: #c4b5fd;
}
[data-theme="dark"][data-preset="grad-sunset"] {
  --accent: #ff7a50;
  --app-bg: linear-gradient(150deg, #2b1310 0%, #331427 50%, #2a1018 100%);
  --glow-a: rgba(255, 122, 80, 0.20);
  --glow-b: rgba(236, 72, 153, 0.15);
  --glow-c: rgba(245, 158, 11, 0.14);
  --bg-base-a: #2b1310;
  --bg-base-b: #2a1018;
  --frost-tint-a: rgba(255, 122, 80, 0.14);
  --frost-tint-b: rgba(236, 72, 153, 0.10);
  --frost-tint-c: rgba(245, 158, 11, 0.09);
  --pro-bg: #47201a;
  --pro-text: #fdba74;
}
[data-theme="dark"][data-preset="grad-aurora"] {
  --accent: #22d3ee;
  --app-bg: linear-gradient(150deg, #0b1f26 0%, #0e1e33 50%, #101a2e 100%);
  --glow-a: rgba(34, 211, 238, 0.20);
  --glow-b: rgba(59, 130, 246, 0.15);
  --glow-c: rgba(20, 184, 166, 0.15);
  --bg-base-a: #0b1f26;
  --bg-base-b: #101a2e;
  --frost-tint-a: rgba(34, 211, 238, 0.14);
  --frost-tint-b: rgba(59, 130, 246, 0.10);
  --frost-tint-c: rgba(20, 184, 166, 0.10);
  --pro-bg: #12333e;
  --pro-text: #67e8f9;
}
[data-theme="dark"][data-preset="grad-rose"] {
  --accent: #fb7185;
  --app-bg: linear-gradient(150deg, #241019 0%, #251425 50%, #1e1330 100%);
  --glow-a: rgba(251, 113, 133, 0.20);
  --glow-b: rgba(124, 58, 237, 0.15);
  --glow-c: rgba(244, 114, 182, 0.15);
  --bg-base-a: #241019;
  --bg-base-b: #1e1330;
  --frost-tint-a: rgba(251, 113, 133, 0.14);
  --frost-tint-b: rgba(124, 58, 237, 0.10);
  --frost-tint-c: rgba(244, 114, 182, 0.10);
  --pro-bg: #3a1622;
  --pro-text: #fda4af;
}
[data-theme="dark"][data-preset="grad-forest"] {
  --accent: #34d399;
  --app-bg: linear-gradient(150deg, #0b2018 0%, #0c1b2e 50%, #0e1626 100%);
  --glow-a: rgba(52, 211, 153, 0.20);
  --glow-b: rgba(16, 185, 129, 0.15);
  --glow-c: rgba(13, 148, 136, 0.15);
  --bg-base-a: #0b2018;
  --bg-base-b: #0e1626;
  --frost-tint-a: rgba(52, 211, 153, 0.14);
  --frost-tint-b: rgba(16, 185, 129, 0.10);
  --frost-tint-c: rgba(13, 148, 136, 0.10);
  --pro-bg: #12322a;
  --pro-text: #6ee7b7;
}
[data-theme="dark"][data-preset="grad-gold"] {
  --accent: #fbbf24;
  --app-bg: linear-gradient(150deg, #241a0a 0%, #261511 50%, #2a0f14 100%);
  --glow-a: rgba(251, 191, 36, 0.19);
  --glow-b: rgba(245, 158, 11, 0.14);
  --glow-c: rgba(180, 83, 9, 0.13);
  --bg-base-a: #241a0a;
  --bg-base-b: #2a0f14;
  --frost-tint-a: rgba(251, 191, 36, 0.13);
  --frost-tint-b: rgba(245, 158, 11, 0.10);
  --frost-tint-c: rgba(180, 83, 9, 0.09);
  --pro-bg: #3a2b10;
  --pro-text: #fcd34d;
}
[data-theme="dark"][data-preset="grad-ocean"] {
  --accent: #60a5fa;
  --app-bg: linear-gradient(150deg, #0b1526 0%, #0c1b2b 50%, #0c1f28 100%);
  --glow-a: rgba(96, 165, 250, 0.20);
  --glow-b: rgba(6, 182, 212, 0.15);
  --glow-c: rgba(59, 130, 246, 0.17);
  --bg-base-a: #0b1526;
  --bg-base-b: #0c1f28;
  --frost-tint-a: rgba(96, 165, 250, 0.14);
  --frost-tint-b: rgba(6, 182, 212, 0.10);
  --frost-tint-c: rgba(59, 130, 246, 0.12);
  --pro-bg: #12264a;
  --pro-text: #93c5fd;
}
[data-theme="dark"][data-preset="grad-grape"] {
  --accent: #a78bfa;
  --app-bg: linear-gradient(150deg, #171029 0%, #191230 50%, #131a33 100%);
  --glow-a: rgba(167, 139, 250, 0.20);
  --glow-b: rgba(99, 102, 241, 0.15);
  --glow-c: rgba(139, 92, 246, 0.16);
  --bg-base-a: #171029;
  --bg-base-b: #131a33;
  --frost-tint-a: rgba(167, 139, 250, 0.14);
  --frost-tint-b: rgba(99, 102, 241, 0.10);
  --frost-tint-c: rgba(139, 92, 246, 0.11);
  --pro-bg: #2a2146;
  --pro-text: #c4b5fd;
}
[data-theme="dark"][data-preset="grad-flame"] {
  --accent: #f87171;
  --app-bg: linear-gradient(150deg, #251014 0%, #261d0f 50%, #262008 100%);
  --glow-a: rgba(248, 113, 113, 0.20);
  --glow-b: rgba(249, 115, 22, 0.15);
  --glow-c: rgba(244, 63, 94, 0.15);
  --bg-base-a: #251014;
  --bg-base-b: #262008;
  --frost-tint-a: rgba(248, 113, 113, 0.14);
  --frost-tint-b: rgba(249, 115, 22, 0.10);
  --frost-tint-c: rgba(244, 63, 94, 0.10);
  --pro-bg: #3d1618;
  --pro-text: #fca5a5;
}
[data-theme="dark"][data-preset="grad-graphite"] {
  --accent: #94a3b8;
  --app-bg: linear-gradient(150deg, #14181f 0%, #141b2e 50%, #131c38 100%);
  --glow-a: rgba(148, 163, 184, 0.16);
  --glow-b: rgba(100, 116, 139, 0.12);
  --glow-c: rgba(71, 85, 105, 0.12);
  --bg-base-a: #14181f;
  --bg-base-b: #131c38;
  --frost-tint-a: rgba(148, 163, 184, 0.11);
  --frost-tint-b: rgba(100, 116, 139, 0.08);
  --frost-tint-c: rgba(71, 85, 105, 0.08);
  --pro-bg: #232830;
  --pro-text: #cbd5e1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { width: 100%; height: 100%; overflow: hidden; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* 便签浮窗：窗口透明无边框，body 透明，只显示卡片本体 */
html[data-sticky-window] body {
  background: transparent !important;
}
html[data-sticky-window] #app {
  padding: 0;
}
html[data-sticky-window] .floating-sticky {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card-solid);
  box-shadow: var(--shadow-dock);
}
/* 倒计时浮窗：窗口透明无边框，body 透明，只显示圆形水位罐本体 */
html[data-countdown-float] body {
  background: transparent !important;
}
html[data-countdown-float] #app {
  padding: 0;
}
/* 剪贴板浮层：窗口透明无边框，body 透明，只显示历史面板本体 */
html[data-clipboard-window] body {
  background: transparent !important;
}
html[data-clipboard-window] #app {
  padding: 0;
}
/* 提示词 / 待办浮窗：窗口透明，body 透明，只显示卡片本体 */
html[data-prompt-float] body,
html[data-todo-float] body {
  background: transparent !important;
}
html[data-prompt-float] #app,
html[data-todo-float] #app {
  padding: 0;
}
/* 桌面悬浮球：窗口透明无边框，body 透明，只显示球体/环形菜单本体 */
html[data-floating-ball] body {
  background: transparent !important;
}
html[data-floating-ball] #app {
  padding: 0;
  background: transparent !important;
}
/* 右下角通知弹窗：窗口透明无边框，body 透明，只显示通知卡片堆叠本体 */
html[data-notice-window] body {
  background: transparent !important;
}
html[data-notice-window] #app {
  padding: 0;
  background: transparent !important;
}
/* AI 对话独立窗口：窗口透明无边框，body 透明，只渲染圆角玻璃窗本体（四周留白给落影） */
html[data-chat-window] body {
  background: transparent !important;
}
html[data-chat-window] #app {
  padding: 0;
  background: transparent !important;
  height: 100vh;
  overflow: hidden;
}
html[data-prompt-float] .pf-root,
html[data-todo-float] .tf-root {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-card-solid);
  box-shadow: var(--shadow-dock);
}
/* 根字号基准：全局字体缩放通过 --fs-global 调整 rem 基准（1rem = 16px × 缩放） */
html {
  font-size: calc(16px * var(--fs-global, 1));
}
body {
  background: var(--app-bg, var(--bg-page-surface));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text-1);
  user-select: none;
  cursor: default;
}
h1, h2, h3, p { text-wrap: pretty; }
button, input, textarea { font: inherit; }
input, textarea { user-select: text; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* ===== 全局滚动条：默认完全隐藏（thumb/track/容器全透明），悬停可滚动区域时才显示 ===== */
/* WebKit 滚动条（Chrome/Edge/Safari） */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-track-piece { background: transparent; }
::-webkit-scrollbar-button { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
  min-height: 40px;
  min-width: 40px;
  transition: background-color .15s ease;
}
/* 悬停到滚动条轨道（滑块外的区域）：显示淡色轨道，提示滚动条位置 */
::-webkit-scrollbar-track:hover {
  background-color: color-mix(in srgb, var(--text-3) 14%, transparent);
}
/* 悬停到滚动条滑块：显示滑块 */
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--text-3) 50%, transparent);
}
/* 鼠标在可滚动内容区域上（JS 给滚动容器加 .scrollbar-hover）：也显示滑块 */
.scrollbar-hover::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--text-3) 40%, transparent);
}
/* Firefox 滚动条支持：scrollbar-width 不继承（Applies to scrolling boxes），
   必须作用于所有元素才能覆盖内部滚动容器；scrollbar-color 继承，root 声明即可 */
html, body, * {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.card { background: var(--frost-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--frost-edge), var(--shadow-card); }

/* 模块标题隐藏态（.hd-float）：表头整条不再占布局高度，只把右侧动作按钮悬浮在卡片右上角。
   默认透明且不可点，hover / 键盘聚焦（focus-within）/ 触屏点击时才显形 —— 内容因此真正顶上，
   而「新建 / 打开 / 脱离」等功能按钮一个不少。定位基准是 .dash-cell / .le-cell（二者 position: relative）。 */
.hd-float {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  /* 悬浮在内容之上时给一层实心胶囊底，避免按钮与下方文字叠在一起看不清 */
  padding: 2px;
  border-radius: 8px;
  background: var(--bg-card-solid);
  box-shadow: var(--shadow-item);
  transition: opacity 0.15s ease-out;
}
.dash-cell:hover .hd-float,
.dash-cell:focus-within .hd-float,
.le-cell:hover .hd-float,
.le-cell:focus-within .hd-float,
.hd-float:focus-within {
  opacity: 1;
  pointer-events: auto;
}
/* 沉浸模式（ADR 0003 受控例外）：卡片基底大幅降 alpha 并启用 backdrop-filter 局部取景模糊，
   壁纸在卡片间隙完整清晰展示。仅作用于静态 .card 表面，动画/滚动密集元素仍然禁用 backdrop-filter */
html[data-immersive='1'] .card {
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
html[data-immersive='1'] {
  --frost-base-a: rgba(255, 255, 255, calc(0.18 * var(--glass-dim, 1)));
  --frost-base-b: rgba(255, 255, 255, calc(0.12 * var(--glass-dim, 1)));
}
html[data-theme='dark'][data-immersive='1'] {
  --frost-base-a: rgba(255, 255, 255, calc(0.10 * var(--glass-dim, 1)));
  --frost-base-b: rgba(255, 255, 255, calc(0.06 * var(--glass-dim, 1)));
}
/* ===== 壁纸态可读性增强（html data-wallpaper 开关，ADR 0003） =====
   墨色阶梯向 ink 端压两档：半透明中灰压在任意照片上必然发虚，靠近实色墨才能保底对比；
   无壁纸时不生效，图标 currentColor 自动跟随 */
html[data-wallpaper='1'] .sidebar,
html[data-wallpaper='1'] .title-bar,
html[data-wallpaper='1'] main {
  --text-2: #2e2a24;
  --text-3: #3f3a31;
  --text-4: #4a453c;
}
html[data-theme='dark'][data-wallpaper='1'] .sidebar,
html[data-theme='dark'][data-wallpaper='1'] .title-bar,
html[data-theme='dark'][data-wallpaper='1'] main {
  --text-2: #eeeae1;
  --text-3: #e8e4db;
  --text-4: #cfcabf;
}
/* 铬件文字光晕：描边级（四向 1px + 柔光），任意照片上文字有连续对比边（亮色白晕托深墨/暗色黑晕托浅墨）；
   仅作用于文字，图标不带光晕（见下方图标规则） */
html[data-wallpaper='1'] .sidebar,
html[data-wallpaper='1'] .title-bar {
  text-shadow:
    1px 0 0 rgba(255, 255, 255, 0.75),
    -1px 0 0 rgba(255, 255, 255, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 -1px 0 rgba(255, 255, 255, 0.75),
    0 1px 3px rgba(255, 255, 255, 0.4);
}
html[data-theme='dark'][data-wallpaper='1'] .sidebar,
html[data-theme='dark'][data-wallpaper='1'] .title-bar {
  text-shadow:
    1px 0 0 rgba(0, 0, 0, 0.75),
    -1px 0 0 rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 -1px 0 rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
/* 铬件图标：仅暗色/白墨态保留黑色光晕（浅色图标叠浅色照片需要对比边）；
   亮色壁纸态不加白色描边——白晕在图标上呈粉笔白框（用户反馈去掉） */
html[data-theme='dark'][data-wallpaper='1'] .sidebar svg,
html[data-theme='dark'][data-wallpaper='1'] .title-bar svg {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* 侧栏固定扩展的 logo 是位图（xhub-ext 协议）：既不跟随 currentColor，也无法按主题极性选光晕——
   黑白 logo 都存在，单极必漏一边。暗色主题无壁纸时侧栏是深色渐变底、壁纸态则直接叠在照片上，
   黑 logo 都会糊，故两种条件同一套双极光晕：四层白影叠出 ~2px 实心轮廓 + 渐弱外发光（顺带提亮
   logo 周边背景，实心黑盘不能只靠一条细边，用户实测 1px 半透明白边看不出），黑柔光托住浅色 logo。
   亮色主题无壁纸是浅色实底，黑 logo 天然可读，保持「按图片原样显示」不加光晕 */
html[data-theme='dark'] .sidebar .sidebar-ext-img,
html[data-wallpaper='1'] .sidebar .sidebar-ext-img {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.32))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* 卡片文字光晕：仅在卡片真实透底时启用（data-wallpaper-clear = 低玻璃透明度或沉浸模式），
   柔光一档弱于铬件文字描边，玻璃面不透底时保持锐利 */
html[data-wallpaper-clear='1'] .card,
html[data-wallpaper-clear='1'] .sv-content,
html[data-wallpaper-clear='1'] .extension-center,
html[data-wallpaper-clear='1'] .le-root {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 4px rgba(255, 255, 255, 0.3);
}
html[data-theme='dark'][data-wallpaper-clear='1'] .card,
html[data-theme='dark'][data-wallpaper-clear='1'] .sv-content,
html[data-theme='dark'][data-wallpaper-clear='1'] .extension-center,
html[data-theme='dark'][data-wallpaper-clear='1'] .le-root {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3);
}
/* 卡片图标不加白色柔光（白晕呈粉笔边）；黑晕由下方白墨形态的统一规则承担 */
/* 商标文字（左上角 X-Hub）不吃铬件描边光晕：四向 1px 光晕落在 700 字重的短文本上，
   看上去就是商标外面「一圈白」（用户反馈去掉）；仅商标，侧栏文字标签维持原样 */
html[data-wallpaper='1'] .title-bar .title-text {
  text-shadow: none;
}
/* ===== 实验：壁纸 + 真实透底（data-wallpaper-clear）→ 全量白墨形态 =====
   文字/图标统一转白色系、光晕统一换黑色描边，浅色表面令牌同步翻转为深玻璃
   （白字在输入框/菜单/弹窗等近白表面上必须有着落）；需在上方规则之后声明以赢得同权重级联 */
html[data-wallpaper-clear='1'] .sidebar,
html[data-wallpaper-clear='1'] .title-bar,
html[data-wallpaper-clear='1'] main {
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.92);
  --text-3: rgba(255, 255, 255, 0.74);
  --text-4: rgba(255, 255, 255, 0.58);
}
html[data-wallpaper-clear='1'] .sidebar,
html[data-wallpaper-clear='1'] .title-bar,
html[data-wallpaper-clear='1'] main {
  --bg-card: rgba(255, 255, 255, 0.12);
  --bg-card-solid: rgba(255, 255, 255, 0.2);
  --bg-card-soft: rgba(255, 255, 255, 0.1);
  /* 烟玻璃而非黑块：便签/待办输入区大面积使用，过重会与半透卡面割裂 */
  --input-bg: rgba(20, 22, 32, 0.3);
  --bg-chat-panel: rgba(28, 29, 41, 0.97);
  --brand-50: color-mix(in srgb, var(--accent) 16%, #16161f);
  /* 描边墨阶同步翻白墨：--border-strong 亮色默认是深墨，透底态在照片上
     呈"黑色圈"看不清（用户反馈：待办复选框），与输入框白描边同极性 */
  --border-strong: rgba(255, 255, 255, 0.35);
}
html[data-wallpaper-clear='1'] .sidebar,
html[data-wallpaper-clear='1'] .title-bar {
  text-shadow:
    1px 0 0 rgba(0, 0, 0, 0.75),
    -1px 0 0 rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(0, 0, 0, 0.75),
    0 -1px 0 rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-wallpaper-clear='1'] .sidebar svg,
html[data-wallpaper-clear='1'] .title-bar svg {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
html[data-wallpaper-clear='1'] .card,
html[data-wallpaper-clear='1'] .sv-content,
html[data-wallpaper-clear='1'] .extension-center,
html[data-wallpaper-clear='1'] .le-root {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.3);
}
html[data-wallpaper-clear='1'] .card svg,
html[data-wallpaper-clear='1'] .sv-content svg,
html[data-wallpaper-clear='1'] .extension-center svg,
html[data-wallpaper-clear='1'] .le-root svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}
/* 透底态卡片去白边：55% 白描边 + 顶部白高光叠在壁纸上呈粉笔白框，收敛为透明只留落影；
   亮色 --shadow-card 仅 5–6% 暖影，去边后在照片上等于零阴影，补一档中性落影保住卡片层次 */
html[data-wallpaper-clear='1'] .card {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
html:not([data-theme='dark'])[data-wallpaper-clear='1'] .card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* 壁纸态弹窗/右键菜单：root 的 --bg-card-solid 在暗色主题是 20% 白，弹窗又被 Teleport 到
   body（不在 main 子树里，拿不到透底态对卡面令牌的深玻璃覆盖）——20% 白叠在照片上就是
   浅底配浅字，正文/灰字全部失读。瞬态表面改用主题实底 95% + 已有的 backdrop-filter 取景
   模糊：保住玻璃质感，同时保证任何壁纸上正文对比度。无壁纸时保持原外观不变。 */
html[data-wallpaper='1'] .modal-card,
html[data-wallpaper='1'] .ctx-menu {
  background: rgba(255, 255, 255, 0.95);
}
html[data-theme='dark'][data-wallpaper='1'] .modal-card,
html[data-theme='dark'][data-wallpaper='1'] .ctx-menu {
  background: rgba(28, 29, 41, 0.95);
}

/* toast 背景取 --text-1 的反转技巧在白墨下会白底白字，固定为深底 */
html[data-wallpaper-clear='1'] .toast {
  background: rgba(20, 21, 32, 0.92);
  color: #ffffff;
}
/* 壁纸蒙版同步翻转为深色罩层：白墨 + 暗罩才成立（亮色模式的近白蒙版会抵消白字） */
html[data-wallpaper-clear='1'] .wallpaper-veil {
  background: linear-gradient(150deg, #141520 0%, #1a1814 100%);
}
/* 透底态输入框打磨：边界收敛为低透明白（原 border-soft 亮色 .55 显粉笔感）、
   悬停微亮给反馈、placeholder 显式定色防 UA 默认灰发闷 */
html[data-wallpaper-clear='1'] .field-input,
html[data-wallpaper-clear='1'] .todo-input,
html[data-wallpaper-clear='1'] .sticky-input,
html[data-wallpaper-clear='1'] .ed-content,
html[data-wallpaper-clear='1'] .ed-title-input,
html[data-wallpaper-clear='1'] .tag-input {
  border-color: rgba(255, 255, 255, 0.32);
  transition: border-color 0.15s;
}
html[data-wallpaper-clear='1'] .field-input:hover,
html[data-wallpaper-clear='1'] .todo-input:hover,
html[data-wallpaper-clear='1'] .sticky-input:hover,
html[data-wallpaper-clear='1'] .ed-content:hover,
html[data-wallpaper-clear='1'] .ed-title-input:hover,
html[data-wallpaper-clear='1'] .tag-input:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
html[data-wallpaper-clear='1'] .field-input::placeholder,
html[data-wallpaper-clear='1'] .todo-input::placeholder,
html[data-wallpaper-clear='1'] .sticky-input::placeholder,
html[data-wallpaper-clear='1'] .ed-content::placeholder,
html[data-wallpaper-clear='1'] .ed-title-input::placeholder,
html[data-wallpaper-clear='1'] .tag-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
/* 待办复选框圈环：圈大文字小、仅 0.35 白描边在照片上仍偏弱，
   提亮一档并加暗晕，明暗照片都可见；勾选后为实色 accent 底不受影响 */
html[data-wallpaper-clear='1'] .todo-check,
html[data-wallpaper-clear='1'] .tf-check {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* 倒计时条目类型底（icon 圆盘/类型徽章）：基底是 --bg-card-solid 的 color-mix，
   透底态该令牌只剩 ~0.2 alpha，类型色底压不住壁纸、深墨图标/文字随之发虚 →
   白墨态统一转烟玻璃深底 + 浅墨（同上方 toast 固定深底的处理逻辑） */
html[data-wallpaper-clear='1'] .cc-mode-icon {
  background: color-mix(in srgb, var(--accent) 34%, rgba(16, 18, 28, 0.62));
  color: #e3e0ff;
  border-color: rgba(255, 255, 255, 0.3);
}
html[data-wallpaper-clear='1'] .cc-mode-icon.interval {
  background: color-mix(in srgb, var(--c-green) 32%, rgba(16, 18, 28, 0.62));
  color: #a7f3c9;
}
html[data-wallpaper-clear='1'] .cc-mode-icon.finished {
  background: rgba(16, 18, 28, 0.55);
  color: rgba(255, 255, 255, 0.62);
}
html[data-wallpaper-clear='1'] .cc-badge {
  background: rgba(16, 18, 28, 0.55);
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.26);
}
html[data-wallpaper-clear='1'] .cc-badge.daily {
  background: color-mix(in srgb, var(--accent) 34%, rgba(16, 18, 28, 0.62));
  color: #e3e0ff;
}
html[data-wallpaper-clear='1'] .cc-badge.interval {
  background: color-mix(in srgb, var(--c-green) 32%, rgba(16, 18, 28, 0.62));
  color: #a7f3c9;
}
/* 待办悬浮操作条：透底白墨态下 --bg-card-solid 只剩 ~0.2 alpha（近乎透明），而图标是白的，
   长标题换行后小条浮在白字上 → 白图标叠白字完全看不清。固定深烟玻璃实底（同 .toast/.cc-badge 口径），
   白图标在实底上稳定可读；边框压一档低透明白避免白框 */
html[data-wallpaper-clear='1'] .todo-actions {
  background: rgba(20, 21, 32, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
/* 速达卡片左上角的类型/小类标签：透底白墨态下卡片近乎透明（--bg-card-solid ~0.2 alpha），
   10px 彩色小字直接压在壁纸上对比度不足。迭代记录：① 深玻璃胶囊底——丑、撞图标，撤；
   ② 四向 1px 黑描边——糊成暗块，撤；③ .card 透底态的深色柔光晕会经继承糊在 10px 彩字
   笔画上（「文字后面一坨粗色」），显式 text-shadow:none，要纯文字；④ 蓝紫粉三色在
   蓝紫调壁纸（最常见的渐变壁纸色系）上色相直接撞车——蓝溶进蓝底、紫溶进紫底（用户实测
   只有绿看得清，绿与壁纸互补）。终版口径：每个大类一个颜色，且全部避开蓝-紫-粉区间——
   琥珀/绿/橙三个暖-冷互补色，任意常见壁纸上都不与背景撞色相；标签常显示小类名，颜色是
   区分大类的唯一信号。长名重叠由 Suda.vue 的 max-width + 省略号解决 */
html[data-wallpaper-clear='1'] .suda-kind {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: none;
}
html[data-wallpaper-clear='1'] .suda-kind.app {
  color: #fbbf24;
}
html[data-wallpaper-clear='1'] .suda-kind.web {
  color: #4ade80;
}
/* 文件 = 亮青：橙两版（浅 #fb923c 亮区发虚、深 #f97316 被否要亮色）后换。
   候选淘汰：亮黄撞琥珀（应用）、亮粉/亮紫撞壁纸主体色；亮青与早前失败的湖蓝
   #60a5fa 的差别在亮度高一大截（深蓝紫底上靠明度差立住）且色相偏绿远离壁纸紫蓝 */
html[data-wallpaper-clear='1'] .suda-kind.file {
  color: #22d3ee;
}
/* 玻璃拟态：常驻表面用烘焙渐变（--frost-surface）实现伪毛玻璃；仅弹层/下拉/菜单等瞬态表面保留真 blur */
.modal-card,
.ctx-menu {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.field-input,
.todo-input,
.sticky-input,
.ed-content,
.ed-title-input,
.tag-input {
  background: var(--input-bg);
}
.icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--text-3); cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.icon-btn:hover { background: var(--bg-card-soft); color: var(--text-1); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); }
.pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 18px; border: none; border-radius: var(--radius-pill); background: var(--brand-500); color: var(--text-on-accent); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.pill-btn:hover:not(:disabled) { background: var(--brand-600); box-shadow: 0 6px 16px var(--brand-glow); transform: translateY(-1px); }
.pill-btn:active:not(:disabled) { transform: scale(.96); }
.pill-btn:disabled { opacity: .55; cursor: default; }
.pill-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-card-solid); color: var(--text-2); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; }
.ghost-btn:hover { background: var(--brand-50); color: var(--brand-500); border-color: color-mix(in srgb, var(--brand-500) 45%, transparent); transform: translateY(-1px); }
.ghost-btn:active { transform: scale(.96); }
.ghost-btn:disabled { opacity: .55; cursor: default; transform: none; }
.ghost-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.filter-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { flex-shrink: 0; border: none; background: transparent; padding: 5px 12px; border-radius: var(--radius-pill); font: inherit; font-size: 0.75rem; font-weight: 500; color: var(--text-3); cursor: pointer; transition: background .18s, color .18s, transform .18s; white-space: nowrap; }
.filter-tab:hover { background: var(--brand-50); color: var(--brand-500); }
.filter-tab:active { transform: scale(.96); }
.filter-tab--primary.active { background: var(--brand-500); color: var(--text-on-accent); font-weight: 600; }
.filter-tab--tag { padding: 4px 10px; font-size: 0.6875rem; }
.filter-tab--tag.active { background: var(--brand-50); color: var(--brand-500); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.modal-mask { position: fixed; inset: 0; z-index: 100; background: var(--scrim); display: flex; align-items: center; justify-content: center; animation: mask-in .18s ease-out; }
@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card { width: 400px; max-width: calc(100vw - 48px); background: var(--bg-card-solid); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-dock); padding: 24px; animation: card-in .2s cubic-bezier(.16, 1, .3, 1); }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.field-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.field-input { width: 100%; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--input-bg); color: var(--text-1); font-size: 0.8125rem; font-family: inherit; padding: 9px 12px; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; }
.field-input:focus { border-color: var(--brand-500); box-shadow: var(--shadow-focus); background: color-mix(in srgb, var(--input-bg) 88%, #fff); }
.field-input::placeholder { color: var(--text-4); }
/* WebView2（Edge 内核）会在 type=password 输入框右侧自带「显示明文」原装小眼睛（::-ms-reveal），
   与应用自绘的明文切换重复，全局隐藏；::-ms-clear 是文本框右侧的同源清除叉，一并去掉 */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
/* 原生下拉选项：显式着色，避免暗色下 color-scheme 退化导致白底白字 */
select option { background: var(--input-bg); color: var(--text-1); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--text-3); font-size: 0.8125rem; }