/* ============================================================
   DouYinSparkFlow 前端 v32 — Cloud Milk Glass
   设计语言：液态玻璃 Liquid Glass（克制版）+ 云雾留白
   · 默认淡雅雾灰白，主题可切换（奶油天空蓝/白/红/绿/黄/夜）
   · 半透明磨砂表面 + 镜面顶边高光 + 环境色慢浮动
   · 8pt 间距 / 大圆角 / 柔和多层阴影 / 弹性微动效
   ============================================================ */
:root {
  /* === 云雾中性色板（默认主题 = 淡雅雾灰） === */
  --bg: #eef0f4;
  --bg-subtle: #e4e8ee;
  /* 悬停态底色：从文字色派生，各主题自动适配（老浏览器不支持 color-mix 时透明降级） */
  --bg-hover: color-mix(in srgb, var(--text) 7%, transparent);
  --bg-gradient: linear-gradient(160deg, #f6f8fb 0%, #edf1f6 45%, #e9edf3 100%);
  /* 环境光斑：在页面底层缓慢漂浮，给玻璃提供可折射的色彩 */
  --ambient-1: rgba(186, 214, 240, 0.55);
  --ambient-2: rgba(255, 244, 224, 0.50);
  --ambient-3: rgba(216, 226, 240, 0.45);
  /* 玻璃材质（浅色系） */
  --card: rgba(255, 255, 255, 0.72);
  --card-elevated: rgba(255, 255, 255, 0.86);
  --card-hover: rgba(255, 255, 255, 0.92);
  --glass-blur: 28px;
  --glass-saturate: 1.7;
  --glass-tint: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-edge-bottom: rgba(255, 255, 255, 0.35);
  --hairline: rgba(23, 31, 44, 0.075);
  --specular: rgba(255, 255, 255, 0.85);
  /* 文字 */
  --text: #1f2530;
  --text-2: #525c6b;
  --text-3: #8b94a3;
  --text-4: #b3bac6;
  --line: rgba(23, 31, 44, 0.09);
  --line-2: rgba(23, 31, 44, 0.13);
  --line-3: rgba(23, 31, 44, 0.18);
  /* 品牌色（雾灰主题 = 墨青灰，克制单色） */
  --brand: #3d6b96;
  --brand-deep: #2c5278;
  --brand-light: #7ea6cc;
  --brand-soft: rgba(61, 107, 150, 0.08);
  --brand-soft-2: rgba(61, 107, 150, 0.16);
  --brand-cyan: #8fc3e8;
  --brand-glow: rgba(93, 150, 201, 0.22);
  --brand-gradient: linear-gradient(135deg, #4a7ba8 0%, #35608c 100%);
  --brand-gradient-2: linear-gradient(135deg, #5b8dbf 0%, #2c5278 100%);
  --on-accent: #ffffff;
  /* 控制台 */
  --console-bg: #161b22;
  --console-text: #dce3ec;
  --console-border: rgba(255,255,255,0.09);
  /* 语义色（柔和但可辨识） */
  --ok: #12a378;
  --ok-light: #3dcf9f;
  --ok-soft: rgba(18, 163, 120, 0.10);
  --ok-glow: rgba(18, 163, 120, 0.22);
  --warn: #dd9a1f;
  --warn-light: #f4bd55;
  --warn-soft: rgba(221, 154, 31, 0.10);
  --warn-glow: rgba(221, 154, 31, 0.22);
  --err: #e05260;
  --err-deep: #c63a49;
  --err-light: #f0818c;
  --err-soft: rgba(224, 82, 96, 0.09);
  --err-glow: rgba(224, 82, 96, 0.20);
  --info: #4a90d9;
  --info-soft: rgba(74, 144, 217, 0.10);
  /* === 间距（8pt 网格） === */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  /* === 圆角 === */
  --r-xs: 8px;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-xl: 22px;
  --r-2xl: 26px;
  --r-3xl: 32px;
  --r-full: 9999px;
  /* === 阴影（冷调中性、多层柔影） === */
  --shadow-xs: 0 1px 2px rgba(26, 33, 46, 0.05);
  --shadow-sm: 0 1px 2px rgba(26, 33, 46, 0.04), 0 4px 10px rgba(26, 33, 46, 0.05);
  --shadow: 0 1px 2px rgba(26, 33, 46, 0.04), 0 8px 24px rgba(26, 33, 46, 0.07);
  --shadow-md: 0 2px 6px rgba(26, 33, 46, 0.05), 0 14px 36px rgba(26, 33, 46, 0.09);
  --shadow-lg: 0 4px 12px rgba(26, 33, 46, 0.06), 0 24px 56px rgba(26, 33, 46, 0.12);
  --shadow-xl: 0 8px 20px rgba(26, 33, 46, 0.08), 0 32px 72px rgba(26, 33, 46, 0.14);
  --shadow-brand: 0 2px 6px rgba(44, 82, 120, 0.18), 0 10px 24px rgba(61, 107, 150, 0.20);
  --shadow-brand-lg: 0 6px 14px rgba(44, 82, 120, 0.22), 0 18px 40px rgba(61, 107, 150, 0.28);
  --shadow-glass: 0 10px 36px rgba(26, 33, 46, 0.08), inset 0 1px 0 var(--glass-edge);
  --shadow-inset: inset 0 1px 2px rgba(26, 33, 46, 0.05);
  /* === 动效曲线 === */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
  --t-fast: 130ms;
  --t-mid: 220ms;
  --t-slow: 340ms;
  --t-xslow: 520ms;
  --t-page: 420ms;
  /* === 字体（macOS 原生：SF Pro + 苹方，克制高级） === */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", system-ui, sans-serif;
  /* === 字号（1.2 比例） === */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  /* === 实用间距 === */
  --g-sm: 10px;
  --g-md: 12px;
  --g-lg: 20px;
  --g-xl: 32px;
  /* === 侧边栏 === */
  --sidebar-w: 228px;
  --sidebar-w-mini: 64px;
  /* === 内容宽度 === */
  --content-max-w: 1400px;
}

/* === 奶油天空蓝主题 === */
[data-theme="sky"] {
  --bg: #eaf3fb;
  --bg-subtle: #dfeef9;
  --bg-gradient: linear-gradient(160deg, #f7fbff 0%, #ebf4fc 45%, #e7f1fa 100%);
  --ambient-1: rgba(157, 205, 242, 0.65);
  --ambient-2: rgba(255, 241, 219, 0.60);
  --ambient-3: rgba(198, 227, 248, 0.55);
  --card: rgba(255, 255, 255, 0.68);
  --card-elevated: rgba(255, 255, 255, 0.84);
  --card-hover: rgba(255, 255, 255, 0.92);
  --glass-tint: rgba(255, 255, 255, 0.52);
  --text: #20303f;
  --text-2: #516478;
  --text-3: #8ba0b4;
  --text-4: #b4c4d3;
  --line: rgba(38, 74, 104, 0.10);
  --line-2: rgba(38, 74, 104, 0.15);
  --line-3: rgba(38, 74, 104, 0.20);
  --brand: #4f93ce;
  --brand-deep: #3577b4;
  --brand-light: #85b9e4;
  --brand-soft: rgba(79, 147, 206, 0.10);
  --brand-soft-2: rgba(79, 147, 206, 0.18);
  --brand-cyan: #a8d8f0;
  --brand-glow: rgba(110, 178, 230, 0.30);
  --brand-gradient: linear-gradient(135deg, #5fa0d9 0%, #3b7fc4 100%);
  --brand-gradient-2: linear-gradient(135deg, #77b3e2 0%, #2f6ea8 100%);
  --shadow-brand: 0 2px 6px rgba(53, 119, 180, 0.18), 0 10px 26px rgba(79, 147, 206, 0.26);
  --shadow-brand-lg: 0 6px 14px rgba(53, 119, 180, 0.22), 0 18px 42px rgba(79, 147, 206, 0.32);
  --console-bg: #132333;
  --console-border: rgba(143, 196, 240, 0.18);
}

/* === 雾灰主题（与默认一致，供显式选择） === */
[data-theme="gray"] {
  --bg: #eef0f4;
  --bg-subtle: #e4e8ee;
  --bg-gradient: linear-gradient(160deg, #f6f8fb 0%, #edf1f6 45%, #e9edf3 100%);
  --ambient-1: rgba(186, 214, 240, 0.55);
  --ambient-2: rgba(255, 244, 224, 0.50);
  --ambient-3: rgba(216, 226, 240, 0.45);
  --card: rgba(255, 255, 255, 0.72);
  --card-elevated: rgba(255, 255, 255, 0.86);
  --brand: #3d6b96;
  --brand-deep: #2c5278;
  --brand-light: #7ea6cc;
  --brand-soft: rgba(61, 107, 150, 0.08);
  --brand-soft-2: rgba(61, 107, 150, 0.16);
  --brand-cyan: #8fc3e8;
  --brand-glow: rgba(93, 150, 201, 0.22);
  --brand-gradient: linear-gradient(135deg, #4a7ba8 0%, #35608c 100%);
  --brand-gradient-2: linear-gradient(135deg, #5b8dbf 0%, #2c5278 100%);
}

/* === 纯白主题 === */
[data-theme="white"] {
  --bg: #fbfbfd;
  --bg-subtle: #f2f3f6;
  --bg-gradient: linear-gradient(160deg, #ffffff 0%, #f7f9fc 100%);
  --ambient-1: rgba(205, 222, 240, 0.42);
  --ambient-2: rgba(244, 238, 226, 0.40);
  --ambient-3: rgba(228, 233, 242, 0.40);
  --card: rgba(255, 255, 255, 0.82);
  --card-elevated: rgba(255, 255, 255, 0.94);
  --card-hover: #ffffff;
  --glass-tint: rgba(255, 255, 255, 0.66);
  --text: #1c1e24;
  --text-2: #555b68;
  --text-3: #9399a5;
  --text-4: #bcc1ca;
  --line: rgba(20, 24, 32, 0.08);
  --line-2: rgba(20, 24, 32, 0.12);
  --brand: #3a4252;
  --brand-deep: #262c38;
  --brand-light: #6b7484;
  --brand-soft: rgba(58, 66, 82, 0.07);
  --brand-soft-2: rgba(58, 66, 82, 0.14);
  --brand-cyan: #9fc0de;
  --brand-glow: rgba(70, 80, 98, 0.16);
  --brand-gradient: linear-gradient(135deg, #454e60 0%, #262c38 100%);
  --brand-gradient-2: linear-gradient(135deg, #5a6474 0%, #262c38 100%);
  --shadow-brand: 0 2px 6px rgba(30, 36, 48, 0.14), 0 10px 24px rgba(40, 48, 64, 0.14);
  --shadow-brand-lg: 0 6px 14px rgba(30, 36, 48, 0.18), 0 18px 40px rgba(40, 48, 64, 0.20);
}

/* === 抖音红主题（保留品牌色可选） === */
[data-theme="red"] {
  --bg: #f7f5f6;
  --bg-subtle: #f0eaec;
  --bg-gradient: linear-gradient(160deg, #fdfbfb 0%, #f6f0f2 50%, #f2ebed 100%);
  --ambient-1: rgba(255, 158, 178, 0.40);
  --ambient-2: rgba(255, 224, 230, 0.55);
  --ambient-3: rgba(200, 235, 238, 0.35);
  --card: rgba(255, 255, 255, 0.74);
  --card-elevated: rgba(255, 255, 255, 0.88);
  --card-hover: rgba(255, 255, 255, 0.94);
  --text: #23191c;
  --text-2: #5f4f54;
  --text-3: #97858b;
  --text-4: #bdaeb3;
  --line: rgba(60, 24, 32, 0.08);
  --line-2: rgba(60, 24, 32, 0.13);
  --brand: #fe2c55;
  --brand-deep: #dd1c45;
  --brand-light: #ff7290;
  --brand-soft: rgba(254, 44, 85, 0.08);
  --brand-soft-2: rgba(254, 44, 85, 0.15);
  --brand-cyan: #25d4d0;
  --brand-glow: rgba(254, 44, 85, 0.22);
  --brand-gradient: linear-gradient(135deg, #ff4d70 0%, #e51f49 100%);
  --brand-gradient-2: linear-gradient(135deg, #fe2c55 0%, #c81640 100%);
  --shadow-brand: 0 2px 6px rgba(221, 28, 69, 0.18), 0 10px 26px rgba(254, 44, 85, 0.24);
  --shadow-brand-lg: 0 6px 14px rgba(221, 28, 69, 0.22), 0 18px 42px rgba(254, 44, 85, 0.30);
}

/* === 浅绿主题 === */
[data-theme="green"] {
  --bg: #f0f6f1;
  --bg-subtle: #e3eee6;
  --bg-gradient: linear-gradient(160deg, #f8fcf9 0%, #edf5ef 100%);
  --ambient-1: rgba(178, 224, 190, 0.5);
  --ambient-2: rgba(255, 246, 226, 0.45);
  --ambient-3: rgba(214, 236, 222, 0.45);
  --card: rgba(255, 255, 255, 0.74);
  --card-elevated: rgba(255, 255, 255, 0.88);
  --text: #1c2820;
  --text-2: #4c6053;
  --text-3: #83968a;
  --line: rgba(28, 72, 40, 0.10);
  --line-2: rgba(28, 72, 40, 0.15);
  --brand: #2e9e5b;
  --brand-deep: #1f7d45;
  --brand-light: #6ec892;
  --brand-soft: rgba(46, 158, 91, 0.09);
  --brand-soft-2: rgba(46, 158, 91, 0.17);
  --brand-cyan: #7ddcc0;
  --brand-glow: rgba(46, 158, 91, 0.22);
  --brand-gradient: linear-gradient(135deg, #3aaf68 0%, #1f7d45 100%);
  --brand-gradient-2: linear-gradient(135deg, #4cc27c 0%, #196b3a 100%);
  --shadow-brand: 0 2px 6px rgba(31, 125, 69, 0.16), 0 10px 24px rgba(46, 158, 91, 0.22);
  --shadow-brand-lg: 0 6px 14px rgba(31, 125, 69, 0.20), 0 18px 40px rgba(46, 158, 91, 0.28);
}

/* === 奶油黄主题 === */
[data-theme="yellow"] {
  --bg: #faf6ec;
  --bg-subtle: #f2ebd8;
  --bg-gradient: linear-gradient(160deg, #fefbf4 0%, #f7f0e0 100%);
  --ambient-1: rgba(247, 213, 140, 0.45);
  --ambient-2: rgba(255, 240, 205, 0.6);
  --ambient-3: rgba(240, 226, 190, 0.45);
  --card: rgba(255, 255, 255, 0.72);
  --card-elevated: rgba(255, 255, 255, 0.88);
  --text: #2a2310;
  --text-2: #65572c;
  --text-3: #9b8d5f;
  --line: rgba(92, 72, 20, 0.10);
  --line-2: rgba(92, 72, 20, 0.15);
  --brand: #d99317;
  --brand-deep: #b8770a;
  --brand-light: #f0bb4e;
  --brand-soft: rgba(217, 147, 23, 0.10);
  --brand-soft-2: rgba(217, 147, 23, 0.18);
  --brand-cyan: #f6cf7d;
  --brand-glow: rgba(217, 147, 23, 0.24);
  --brand-gradient: linear-gradient(135deg, #e9a62a 0%, #c4810b 100%);
  --brand-gradient-2: linear-gradient(135deg, #f4bc4c 0%, #a86a06 100%);
  --shadow-brand: 0 2px 6px rgba(184, 119, 10, 0.16), 0 10px 24px rgba(217, 147, 23, 0.24);
  --shadow-brand-lg: 0 6px 14px rgba(184, 119, 10, 0.20), 0 18px 40px rgba(217, 147, 23, 0.30);
}

/* === 深夜主题（深色液态玻璃） === */
[data-theme="dark"] {
  --bg: #0c0e12;
  --bg-subtle: #151921;
  --bg-gradient: linear-gradient(160deg, #11141a 0%, #0c0e12 60%, #0a0c10 100%);
  --ambient-1: rgba(70, 110, 160, 0.22);
  --ambient-2: rgba(150, 70, 110, 0.16);
  --ambient-3: rgba(60, 90, 120, 0.18);
  --card: rgba(28, 33, 42, 0.62);
  --card-elevated: rgba(34, 40, 51, 0.82);
  --card-hover: rgba(40, 47, 60, 0.88);
  --glass-tint: rgba(255, 255, 255, 0.06);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-edge-bottom: rgba(255, 255, 255, 0.05);
  --hairline: rgba(255, 255, 255, 0.08);
  --specular: rgba(255, 255, 255, 0.16);
  --text: #eef1f6;
  --text-2: #b4bdca;
  --text-3: #7d8796;
  --text-4: #565f6d;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.20);
  --brand: #6aa9e9;
  --brand-deep: #4486cc;
  --brand-light: #9cc6f2;
  --brand-soft: rgba(106, 169, 233, 0.14);
  --brand-soft-2: rgba(106, 169, 233, 0.24);
  --brand-cyan: #67d4e6;
  --brand-glow: rgba(106, 169, 233, 0.30);
  --brand-gradient: linear-gradient(135deg, #7bb6ef 0%, #4486cc 100%);
  --brand-gradient-2: linear-gradient(135deg, #93c7f6 0%, #2f6db0 100%);
  --on-accent: #0c1118;
  --console-bg: #080a0e;
  --console-text: #cdd6e2;
  --console-border: rgba(106, 169, 233, 0.18);
  --ok: #2dd4a0;
  --ok-light: #5ff0c4;
  --ok-soft: rgba(45, 212, 160, 0.13);
  --ok-glow: rgba(45, 212, 160, 0.28);
  --warn: #fbbf48;
  --warn-light: #ffd678;
  --warn-soft: rgba(251, 191, 72, 0.13);
  --warn-glow: rgba(251, 191, 72, 0.26);
  --err: #ff6b78;
  --err-deep: #e04858;
  --err-light: #ff98a2;
  --err-soft: rgba(255, 107, 120, 0.13);
  --err-glow: rgba(255, 107, 120, 0.28);
  --info: #6aa9e9;
  --info-soft: rgba(106, 169, 233, 0.14);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.35);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.45);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 14px rgba(0,0,0,0.5), 0 28px 64px rgba(0,0,0,0.55);
  --shadow-brand: 0 2px 8px rgba(68, 134, 204, 0.35), 0 10px 28px rgba(68, 134, 204, 0.30);
  --shadow-brand-lg: 0 6px 16px rgba(68, 134, 204, 0.4), 0 20px 44px rgba(68, 134, 204, 0.38);
  --shadow-glass: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.12);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 浅色主题控制台适配 */
[data-theme="green"] .console-v2,
[data-theme="yellow"] .console-v2,
[data-theme="gray"] .console-v2,
[data-theme="white"] .console-v2,
[data-theme="sky"] .console-v2,
[data-theme="red"] .console-v2 {
  --console-bg: #f4f6f9;
  --console-text: #2b333e;
  --console-border: rgba(23, 31, 44, 0.1);
}

/* === 主题切换过渡 === */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.35s ease, color 0.25s ease, border-color 0.25s ease,
              box-shadow 0.35s ease, fill 0.25s ease !important;
}

/* === 主题选择器（色点） === */
.theme-picker {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-m);
  background: var(--bg-subtle); border: 1px solid var(--line);
  width: 100%; margin-top: var(--s2);
}
.theme-picker .theme-dot {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: transform 0.2s var(--ease-bounce), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.theme-picker .theme-dot:hover { transform: scale(1.2); }
.theme-picker .theme-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--brand-glow); }
.theme-picker .theme-dot[data-t="gray"]   { background: linear-gradient(135deg, #aebfce, #6f8499); }
.theme-picker .theme-dot[data-t="sky"]    { background: linear-gradient(135deg, #aed7f4, #5fa0d9); }
.theme-picker .theme-dot[data-t="white"]  { background: #ffffff; border: 1px solid #d6dae2; }
.theme-picker .theme-dot[data-t="red"]    { background: linear-gradient(135deg, #ff6b88, #e51f49); }
.theme-picker .theme-dot[data-t="green"]  { background: linear-gradient(135deg, #6ec892, #1f7d45); }
.theme-picker .theme-dot[data-t="yellow"] { background: linear-gradient(135deg, #f6cf7d, #d99317); }
.theme-picker .theme-dot[data-t="dark"]   { background: linear-gradient(135deg, #3a4252, #10131a); }
.theme-picker .theme-label { font-size: 11px; color: var(--text-3); margin-left: auto; }
.theme-toggle:hover .theme-icon { transform: rotate(20deg) scale(1.1); }
.theme-toggle .theme-label { flex: 1; }

/* === 基础重置 === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font: 14px/1.7 var(--font-sans);
  background:
    radial-gradient(800px 400px at 80% -80px, var(--brand-glow), transparent 60%),
    radial-gradient(600px 300px at 10% -60px, var(--brand-glow), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 88px;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: var(--text); }
::selection { background: var(--brand); color: #fff; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-s);
  box-shadow: 0 0 0 4px var(--brand-glow);
}
[role="tabpanel"]:focus-visible { outline-style: dashed; outline-color: var(--text-3); outline-offset: 6px; box-shadow: none; }
.num { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.tab-hidden { display: none !important; }

/* === v31 滚动条美化 === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--t-mid) var(--ease);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: padding-box;
  border: 2px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* === v31 动画关键帧 === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes popOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 5px var(--brand-glow); } 50% { box-shadow: 0 0 20px var(--brand-glow); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bounce-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* === v31 动画工具类 === */
.anim-fade-in { animation: fadeIn var(--t-slow) var(--ease) both; }
.anim-slide-up { animation: slideUp var(--t-slow) var(--ease) both; }
.anim-slide-down { animation: slideDown var(--t-slow) var(--ease) both; }
.anim-pop-in { animation: popIn var(--t-mid) var(--ease-bounce) both; }
.anim-shake { animation: shake 0.4s var(--ease) both; }
.anim-pulse { animation: pulse 2s var(--ease-in-out) infinite; }
.anim-float { animation: float 3s var(--ease-in-out) infinite; }
.anim-spin { animation: spin 1s linear infinite; }

/* === v31 骨架屏加载 === */
.skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--card) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s var(--ease-in-out) infinite;
  border-radius: var(--r-s);
}

/* === v31 减少动画偏好 === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ 顶栏 ============ */
.topbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
  flex-direction: column;
}
.logo {
  display: flex; align-items: center; gap: var(--s3);
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
}
.logo svg { display: block; filter: drop-shadow(0 1px 2px var(--brand-glow)); }
.topbar .spacer { flex: 1; }
.acct-chip {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  background: var(--bg-subtle); border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 99px;
  max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.conn .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);
  transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.conn.online .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow), 0 0 8px var(--ok-glow); }
.conn.offline .dot { background: var(--err); box-shadow: 0 0 0 3px var(--err-glow), 0 0 8px var(--err-glow); }

/* 说明书按钮 */
.help-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 12px;
  border: 1px solid var(--line); background-color: var(--bg-subtle);
  font-size: 16px; cursor: pointer; color: var(--text-2);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  flex: none;
}
.help-btn:hover { transform: translateY(-1px); border-color: var(--brand); box-shadow: 0 2px 10px var(--brand-glow); }
.sidebar .help-btn { margin-top: var(--s3); }

/* ============ 布局 ============ */
.wrap { flex: 1; max-width: 860px; margin: 0 auto; padding: var(--s6) var(--s5) 0; }
/* ============ 侧边栏（玻璃质感升级） ============ */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 228px; z-index: 60;
  display: flex; flex-direction: column;
  padding: var(--s4) var(--s3);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(1.8) blur(24px) brightness(1.02);
  -webkit-backdrop-filter: saturate(1.8) blur(24px) brightness(1.02);
  border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: var(--shadow-glass);
}
.sidebar .logo {
  justify-content: center; width: 100%;
  padding: var(--s3) 0 var(--s5);
  font-size: 17px;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar .spacer { flex: 1; position: relative; }
.sidebar .acct-chip {
  max-width: 100%; width: 100%; text-align: center;
  margin-bottom: var(--s3);
}
.sidebar .conn { justify-content: center; padding: var(--s2) 0; }

/* 侧边栏内的 tabs 改为纵向导航 */
.sidebar .tabs {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; background: transparent; border: none;
  padding: 0; box-shadow: none;
}
.sidebar .tabs button {
  flex: none; text-align: left; padding: 12px 16px;
  border-radius: var(--r-m); font-size: 14px;
  position: relative;
}
.sidebar .tabs button.active {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.sidebar .tabs button.active::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 99px;
  background: var(--brand-cyan);
  box-shadow: 0 0 10px var(--brand-cyan);
}

/* ============ KPI 统计卡片（玻璃质感升级） ============ */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s3); margin-bottom: var(--s5);
}
.kpi {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: var(--s4) var(--s5);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi::after {
  content: ""; position: absolute; right: -18px; top: -18px;
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 70%);
  pointer-events: none;
}
.kpi .k-label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.kpi .k-value {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); margin-top: 4px;
  font-variant-numeric: tabular-nums;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi .k-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.kpi.k-run .k-value { background: none; -webkit-text-fill-color: var(--ok); }
.kpi.k-run[data-s="running"] .k-value { -webkit-text-fill-color: var(--ok); text-shadow: 0 0 12px var(--ok-glow); }

/* 侧边栏占用左侧空间 → body 加左 padding */
body { padding-left: 228px; }

@media (max-width: 860px) {
  /* 双类提特异性：.kpi-grid-v2 在文件后面以 0,1,0 强制 4 列，普通媒体查询压不住 */
  .kpi-grid, .kpi-grid.kpi-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* 侧栏变顶部横条：整行换行，分三行（顶栏 / 导航 / 活动状态） */
  .sidebar {
    width: 100%; height: auto; position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .sidebar .spacer { display: none; }
  .sidebar .theme-picker { display: none; }   /* 旧规则写的是不存在的 .theme-toggle，等于没隐藏；设置页里还有一份主题选择器 */
  .topbar { flex: 1 1 100%; flex-wrap: wrap; }
  .sidebar .tabs {
    flex: 1 1 100%;
    flex-direction: row; flex-wrap: wrap;
    justify-content: center; gap: 6px;
  }
  .sidebar .tabs button {
    flex: 1 1 auto; min-width: 92px;
    text-align: center; padding: 10px 8px;
  }
  .sidebar .activity-strip { width: 100%; }
  body { padding-left: 0; }
  .kpi-grid, .kpi-grid.kpi-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}


/* ============ Tabs ============ */
.tabs {
  display: flex; gap: 3px; margin-bottom: var(--s6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 5px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tabs button {
  flex: 1; padding: 10px 0; border-radius: var(--r-m);
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tabs button:hover { color: var(--text); background: var(--bg-subtle); }
.tabs button.active {
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}

/* ============ 卡片（玻璃质感升级） ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow var(--t-mid) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); }
.card h3 {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
}
.card h3 .cnt {
  font-size: 11px; font-weight: 700; color: var(--brand);
  background: var(--brand-soft); padding: 2px 10px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
}

/* ============ 按钮（v31 更精致） ============ */
.btn {
  position: relative;
  padding: 10px 22px; border-radius: var(--r-m); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--text-2);
  transition: all var(--t-mid) var(--ease);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.01em;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
  border-radius: var(--r-m) var(--r-m) 0 0;
}
.btn:hover {
  color: var(--text);
  border-color: var(--text-3);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--brand-soft-2);
}
.btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-sm);
  transition-duration: var(--t-fast);
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: var(--shadow-md), 0 0 0 4px var(--brand-glow);
}
.btn.primary {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn.primary::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
}
.btn.primary:hover {
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.btn.primary:active {
  box-shadow: var(--shadow-brand);
  transform: translateY(0) scale(0.97);
  filter: brightness(0.95);
}
.btn.danger {
  background: linear-gradient(135deg, var(--err) 0%, var(--err-deep) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px var(--err-glow);
}
.btn.danger:hover {
  box-shadow: 0 6px 20px var(--err-glow);
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.btn.success {
  background: linear-gradient(135deg, var(--ok) 0%, var(--ok-light) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px var(--ok-glow);
}
.btn.success:hover {
  box-shadow: 0 6px 20px var(--ok-glow);
  transform: translateY(-2px);
}
.btn.warn {
  background: linear-gradient(135deg, var(--warn) 0%, var(--warn-light) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px var(--warn-glow);
}
.btn.warn:hover {
  box-shadow: 0 6px 20px var(--warn-glow);
  transform: translateY(-2px);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-2);
}
.btn.ghost:hover {
  background: var(--brand-soft);
  color: var(--brand);
  transform: none;
}
.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.btn.loading {
  pointer-events: none;
  color: transparent !important;
}
.btn.loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
#btnRun:disabled { animation: busy-breathe 1.8s var(--ease) infinite; }
@keyframes busy-breathe { 50% { opacity: .6; } }

/* ============ v31 仪表盘大改版样式 ============ */

/* 顶部欢迎区域（紧凑版 - 冷色系混色） */
.dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
  background: linear-gradient(135deg, var(--brand-soft) 0%, transparent 100%);
  border-radius: var(--r-xl);
  border: 1px solid var(--brand-soft-2, var(--line));
  position: relative;
  overflow: hidden;
}
.dashboard-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-left { position: relative; z-index: 1; }
.hero-greeting {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 2px;
  font-weight: 500;
}
.hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hero-subtitle {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 400;
}
.hero-right {
  text-align: right;
  position: relative;
  z-index: 1;
}
.hero-time {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-date {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}
.hero-weather {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* KPI 卡片 v2（修复排版 - 紧凑布局，文字不截断） */
.kpi-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.kpi-v2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-xl);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: all var(--t-mid) var(--ease);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 0;
}
.kpi-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.kpi-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-soft-2);
}
.kpi-v2:hover::before { opacity: 1; }
.kpi-v2 .kpi-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--r-m);
  background: var(--brand-soft);
  flex-shrink: 0;
}
.kpi-friends .kpi-icon { background: var(--brand-soft); }
.kpi-messages .kpi-icon { background: var(--brand-soft); }
.kpi-schedule .kpi-icon { background: var(--brand-soft); }
.kpi-run .kpi-icon { background: var(--brand-soft); }
.kpi-v2 .kpi-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.kpi-v2 .k-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.kpi-v2 .k-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-v2 .k-sub {
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.kpi-trend {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}
.kpi-trend.up { background: var(--ok-soft); color: var(--ok); }
.kpi-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
  transition: all var(--t-mid) var(--ease);
}
.kpi-run[data-s="running"] .kpi-status-dot {
  background: var(--ok);
  box-shadow: 0 0 10px var(--ok-glow);
  animation: pulse 1.5s var(--ease-in-out) infinite;
}
.kpi-run[data-s="done"] .kpi-status-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok-glow); }
.kpi-run[data-s="error"] .kpi-status-dot, .kpi-run[data-s="stopped"] .kpi-status-dot { background: var(--err); box-shadow: 0 0 8px var(--err-glow); }
.kpi-run[data-s="idle"] .kpi-status-dot { background: var(--ok); box-shadow: 0 0 6px var(--ok-glow); }

/* 运行控制卡片 v2（紧凑版 - 统一色调） */
.run-card-v2 {
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s4);
  border-radius: var(--r-xl);
  background: var(--card-elevated);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.run-card-v2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand);
  opacity: 0.8;
}
.run-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s3);
}
.run-card-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}
.run-card-icon { font-size: 20px; }
.run-state-v2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
}
.run-state-v2 .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-3);
  transition: all var(--t-mid) var(--ease);
}
.run-state-v2[data-s="running"] { color: var(--ok); background: var(--ok-soft); }
.run-state-v2[data-s="running"] .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok-glow); animation: pulse 1.3s infinite; }
.run-state-v2[data-s="done"] { color: var(--ok); background: var(--ok-soft); }
.run-state-v2[data-s="done"] .dot { background: var(--ok); }
.run-state-v2[data-s="error"], .run-state-v2[data-s="stopped"] { color: var(--err); background: var(--err-soft); }
.run-state-v2[data-s="error"] .dot, .run-state-v2[data-s="stopped"] .dot { background: var(--err); }
.run-meta-v2 {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--s4);
  font-variant-numeric: tabular-nums;
}
.run-btns-v2 {
  display: flex;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.btn-v2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
}
.btn-v2 .btn-icon { font-size: 16px; }
.btn-v2-primary {
  background: var(--brand-gradient);
  box-shadow: var(--shadow-brand);
}
.run-progress-v2 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.run-progress-bar-v2 {
  flex: 1;
  height: 10px;
  background: var(--bg-subtle);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.run-progress-fill-v2 {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: var(--r-full);
  width: 0%;
  transition: width var(--t-mid) var(--ease);
  position: relative;
}
.run-progress-fill-v2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
  border-radius: var(--r-full) var(--r-full) 0 0;
}
.run-progress-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.5));
  filter: blur(4px);
}
.run-progress-text-v2 {
  font-size: var(--text-xs);
  color: var(--text-2);
  font-weight: 600;
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.console-v2 {
  background: var(--console-bg, #1a1614);
  color: var(--console-text, #e8e4dc);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  padding: var(--s3);
  border-radius: var(--r-m);
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--console-border, rgba(255,255,255,0.1));
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.console-v2 .ln-error { color: var(--err-light, #ff6b6b); }
.console-v2 .ln-done { color: var(--ok-light, #51cf66); }
.console-v2::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

/* 仪表盘网格 v2（紧凑版） */
.dashboard-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
/* 仪表盘内所有卡片紧凑化 */
#tab-dashboard .card {
  padding: var(--s4) var(--s5);
  margin-bottom: 0;
  border-radius: var(--r-xl);
}
#tab-dashboard .card h3 {
  font-size: 14px;
  margin-bottom: var(--s3);
}
.card-title-v2 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.card-icon { font-size: 18px; }

/* 快捷操作 v2 */
.quick-actions-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}
.quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s2);
  border-radius: var(--r-l);
  background-color: var(--bg-subtle);
  border: 1px solid transparent;
  transition: all var(--t-mid) var(--ease);
  cursor: pointer;
}
.quick-action-btn:hover {
  background-color: var(--brand-soft);
  border-color: var(--brand-soft-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.quick-action-btn:active { transform: translateY(0) scale(0.97); }
.qa-icon { font-size: 24px; }
.qa-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); }
.quick-action-btn:hover .qa-label { color: var(--brand); }

/* 火花预警 v2 */
.spark-warn-list-v2 { min-height: 120px; }
.spark-empty-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
  text-align: center;
}
.spark-empty-icon { font-size: 36px; margin-bottom: var(--s2); }
.spark-empty-v2 p { font-size: var(--text-sm); color: var(--text-3); }
.hint-v2 { font-size: 11px; color: var(--text-3); margin-top: var(--s3); text-align: right; }
.btn-refresh-v2 {
  margin-left: auto;
  padding: 4px 12px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 最近活动 v2 */
.recent-activity-v2 { min-height: 160px; }
.activity-empty-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
  text-align: center;
}
.activity-empty-icon { font-size: 36px; margin-bottom: var(--s2); opacity: 0.5; }
.activity-empty-v2 p { font-size: var(--text-sm); color: var(--text-3); }

/* 今日概览 v2 */
.today-overview-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.overview-item-v2 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-l);
  background: var(--bg-subtle);
  transition: all var(--t-mid) var(--ease);
}
.overview-item-v2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.overview-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--r-m);
  background: var(--card);
  flex-shrink: 0;
}
.overview-today .overview-icon { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05)); }
.overview-success .overview-icon { background: linear-gradient(135deg, var(--ok-soft), rgba(0, 184, 124, 0.05)); }
.overview-week .overview-icon { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.05)); }
.overview-total .overview-icon { background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05)); }
.overview-content { display: flex; flex-direction: column; gap: 2px; }
.overview-label { font-size: var(--text-xs); color: var(--text-3); font-weight: 500; }
.overview-value { font-size: var(--text-xl); font-weight: 700; color: var(--text); line-height: 1.2; }
.trend-box-v2 {
  padding: var(--s4);
  background: var(--bg-subtle);
  border-radius: var(--r-l);
}
.trend-title-v2 {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s3);
}
.trend-bars-v2 {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
}
.trend-bars-v2 .trend-bar {
  flex: 1;
  background: var(--brand-gradient);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: all var(--t-mid) var(--ease);
  position: relative;
}
.trend-bars-v2 .trend-bar:hover { opacity: 0.8; }

/* 响应式 */
@media (max-width: 1024px) {
  .kpi-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid-v2 { grid-template-columns: 1fr; }
  .quick-actions-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dashboard-hero { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .hero-right { text-align: left; }
  .kpi-grid-v2 { grid-template-columns: 1fr; }
  .today-overview-v2 { grid-template-columns: 1fr; }
  .run-btns-v2 { flex-direction: column; }
}

/* ============ 运行面板 ============ */
.run-hero { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.run-state {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
}
.run-state .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-3); flex: none;
  transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.run-state[data-s="running"] { color: var(--ok); }
.run-state[data-s="running"] .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok-glow); animation: pulse 1.3s var(--ease) infinite; }
.run-state[data-s="done"] { color: var(--ok); }
.run-state[data-s="done"] .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok-glow); }
.run-state[data-s="error"], .run-state[data-s="stopped"] { color: var(--err); }
.run-state[data-s="error"] .dot, .run-state[data-s="stopped"] .dot { background: var(--err); box-shadow: 0 0 6px var(--err-glow); }
@keyframes pulse { 50% { opacity: .3; transform: scale(1.15); } }
.run-meta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.run-btns { display: flex; gap: var(--s3); flex-wrap: wrap; margin-left: auto; }

/* ============ 运行进度条 ============ */
.run-progress {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4);
}
.run-progress-bar {
  flex: 1; height: 8px; background: var(--bg-subtle);
  border: 1px solid var(--line-2); border-radius: 99px; overflow: hidden;
}
.run-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--ok));
  border-radius: 99px;
  transition: width 0.4s var(--ease);
}
.run-progress-text {
  font: 12px var(--font-mono); font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums; flex: none; min-width: 70px; text-align: right;
}

/* ============ 控制台 ============
   注意：#console 同时带 .console 和 .console-v2；这里必须排除 v2，
   否则同特异性下后写的浅底规则覆盖 .console-v2 的深色控制台主题变量。 */
.console:not(.console-v2) {
  margin-top: var(--s4);
  background: var(--bg-subtle);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  padding: var(--s4); height: 232px; overflow-y: auto;
  font: 12px/1.8 var(--font-mono); white-space: pre-wrap; word-break: break-all;
  color: var(--text-2); overscroll-behavior: contain;
}
.console:not(.console-v2) .ln-error { color: var(--err); font-weight: 500; }
.console:not(.console-v2) .ln-done { color: var(--ok); }

/* ============ 定时 ============ */
.sched-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: 14px; }
.sched-row-toggle { margin-left: auto; }
.sched-times { display: flex; flex-direction: column; gap: 10px; margin-top: var(--g-sm); }
.sched-time {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2);
  padding: 6px 10px; border-radius: var(--r-s); background-color: var(--bg-subtle);
}
.sched-time input {
  width: 56px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--card); text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sched-time .del { margin-left: 4px; }
.sched-time input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sched-actions { margin-top: var(--g-sm); }
.badge {
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge.on { background: var(--ok-soft); color: var(--ok); }
.badge.off { background: var(--err-soft); color: var(--err); }

/* ============ 好友管理 ============ */
.toolbar { display: flex; gap: var(--s3); margin-bottom: var(--s4); }
.toolbar.mt { margin-top: var(--g-md); }
.toolbar input {
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--card); outline: none; min-width: 0;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.toolbar input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.toolbar input.grow { flex: 1; }
.friend-list { display: flex; flex-direction: column; }
.friend-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 4px var(--s3); border-radius: var(--r-s);
  transition: background var(--t-fast) var(--ease);
}
.friend-item:hover { background-color: var(--bg-subtle); }
.friend-item input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.friend-item .idx { width: 28px; font-size: 11px; color: var(--text-3); text-align: right; flex: none; font-variant-numeric: tabular-nums; font-weight: 500; }
.friend-item .fid { font: 13px var(--font-mono); flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.friend-item .fid-main { font: 13px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.friend-item .fid-sub { font: 11px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.friend-item mark { background: var(--brand-soft); color: var(--brand); border-radius: 3px; padding: 0 2px; font-weight: 600; }
.friend-item .del { color: var(--text-3); font-size: 12px; padding: 5px 10px; border-radius: var(--r-s); flex: none; font-weight: 500; }
.friend-item .del:hover { color: var(--err); background: var(--err-soft); }
.friend-item .nick-btn { color: var(--text-3); font-size: 12px; padding: 5px 8px; border-radius: var(--r-s); flex: none; font-weight: 500; background: transparent; border: none; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.friend-item .nick-btn:hover { color: var(--brand); background: var(--brand-soft); }
.friend-item .nick-btn:disabled { opacity: 0.5; cursor: wait; }
.friend-item .remark-btn { color: var(--text-3); font-size: 12px; padding: 5px 8px; border-radius: var(--r-s); flex: none; font-weight: 500; background: transparent; border: none; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); opacity: 0.5; }
.friend-item .remark-btn:hover { color: var(--brand); background: var(--brand-soft); opacity: 1; }
.friend-item:hover .remark-btn { opacity: 0.8; }
.friend-item .group-btn, .friend-item .bday-btn { color: var(--text-3); font-size: 12px; padding: 5px 6px; border-radius: var(--r-s); flex: none; font-weight: 500; background: transparent; border: none; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); opacity: 0.5; }
.friend-item .group-btn:hover, .friend-item .bday-btn:hover { color: var(--brand); background: var(--brand-soft); opacity: 1; }
.friend-item:hover .group-btn, .friend-item:hover .bday-btn { opacity: 0.8; }
.fid-badge {
  display: inline-block; font: 10px var(--font-mono); font-weight: 600;
  padding: 1px 6px; border-radius: 99px; margin-left: 4px; vertical-align: 1px;
}
.fid-badge.g { color: var(--brand); background: var(--brand-soft); }
.fid-badge.b { color: var(--ok); background: var(--ok-glow); }
.fid-main { cursor: pointer; transition: color var(--t-fast) var(--ease); }
.fid-main:hover { color: var(--brand); }
.fid-main:active { opacity: 0.7; }
.friend-item .fid.has-remark .fid-main { color: var(--brand); font-weight: 700; }
.friend-item .fid.has-remark .fid-main::before { content: "📌 "; font-size: 11px; }

/* 统计条 */
.stats-bar {
  display: flex; gap: var(--s4); padding: 10px 14px; margin-bottom: 12px;
  background: var(--bg-subtle); border-radius: 10px; border: 1px solid var(--line-2);
}
.stats-bar .stat-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.stats-bar .stat-label { font-size: 11px; color: var(--text-3); font-weight: 500; }
.stats-bar .stat-val { font-size: 18px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }

/* 成就徽章 */
.achievements {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 26px;
}

/* 统计扩展：趋势图 + 好友活跃 */
.stats-extra {
  display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.trend-box, .top-box {
  flex: 1; min-width: 220px; background: var(--bg-subtle);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px;
}
.stats-extra-title { font-size: 11px; color: var(--text-3); font-weight: 600; margin-bottom: 8px; }
.trend-bars {
  display: flex; align-items: flex-end; gap: 6px; height: 56px;
}
.trend-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 2px; cursor: default;
}
.trend-bar {
  width: 100%; max-width: 26px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 55%, transparent));
  min-height: 2px; transition: height 0.4s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.trend-bar span {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--text-2); font-weight: 600;
}
.trend-day { font-size: 9px; color: var(--text-3); }
.top-list { display: flex; flex-direction: column; gap: 4px; max-height: 56px; overflow: hidden; }
.top-row {
  display: flex; align-items: center; gap: 8px; font-size: 11px;
}
.top-row .top-rank { width: 16px; font-weight: 700; color: var(--brand); flex: none; }
.top-row .top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.top-row .top-n { color: var(--text-3); font-weight: 600; flex: none; }
.top-row .top-bar-bg { flex: 1; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; max-width: 70px; }
.top-row .top-bar-fill { height: 100%; background: var(--brand); border-radius: 3px; }

/* ============ 操作状态条（活动面板） ============ */
.activity-strip {
  position: relative; width: 100%;
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  background: var(--bg-subtle); margin: var(--s3) 0; overflow: visible;
}
.activity-now {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-size: 12px; color: var(--text-2); cursor: pointer;
  min-height: 36px; user-select: none;
}
.activity-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.activity-pulse {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--ok); transition: background var(--t-mid) var(--ease);
  box-shadow: 0 0 6px var(--ok-glow);
}
.activity-strip.busy .activity-pulse { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); animation: actPulse 1.2s ease-in-out infinite; }
.activity-strip.done .activity-pulse { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow); }
.activity-strip.error .activity-pulse { background: var(--err); box-shadow: 0 0 0 3px var(--err-glow); }
@keyframes actPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.activity-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background-color: transparent; cursor: pointer; font-size: 13px;
  color: var(--text-3); padding: 4px; border-radius: 8px; opacity: 0.8;
}
.activity-toggle:hover { background-color: var(--bg-hover); opacity: 1; }
.activity-history {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 70;
  max-height: 220px; overflow-y: auto; border-radius: var(--r-m);
  background: var(--card); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.act-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px;
  font-size: 12px; border-radius: 8px; color: var(--text-2);
}
.act-item:hover { background: var(--bg-hover); }
.act-item .act-time { flex: none; font-size: 10px; color: var(--text-3); margin-top: 1px; }
.act-item .act-txt { flex: 1; word-break: break-all; }
.act-item.busy .act-dot { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.act-item.done .act-dot { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-glow); }
.act-item.error .act-dot { background: var(--err); box-shadow: 0 0 0 2px var(--err-glow); }
.act-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--text-3); }

/* ============ 说明书弹窗 ============ */
.modal-mask {
  position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: modalIn 0.25s var(--ease);
}
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 560px; max-height: 84vh;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column;
  animation: modalPop 0.28s var(--ease);
}
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.modal-close {
  width: 30px; height: 30px; border-radius: 10px; border: none; cursor: pointer;
  background-color: var(--bg-subtle); color: var(--text-2); font-size: 14px;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.modal-close:hover { background-color: var(--bg-hover); transform: scale(1.05); }
.modal-body { padding: 8px 20px 12px; overflow-y: auto; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.help-sec { margin: 14px 0; }
.help-sec h4 { font-size: 13px; font-weight: 700; color: var(--brand); margin: 0 0 6px; }
.help-sec p, .help-sec li { font-size: 13px; line-height: 1.7; color: var(--text-2); margin: 0 0 4px; }
.help-sec ol, .help-sec ul { margin: 0; padding-left: 20px; }
.help-sec code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--bg-subtle); border: 1px solid var(--line); padding: 1px 6px;
  border-radius: 6px; color: var(--brand);
}
.help-sec table { width: 100%; border-collapse: collapse; font-size: 13px; }
.help-sec table td { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.help-sec table td:first-child { width: 92px; font-weight: 600; color: var(--text); white-space: nowrap; }
.field.full { grid-column: 1 / -1; }

/* 审美升级：卡片渐变描边 + 更柔和质感 */
.card {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--line-2) 55%, transparent), color-mix(in srgb, var(--line) 30%, transparent)) border-box;
  border: 1px solid transparent;
}
.achievement {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid transparent;
  cursor: default; transition: transform 0.15s ease; animation: achPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.achievement:hover { transform: translateY(-2px); }
.achievement .ach-icon { font-size: 13px; }
.achievement.locked {
  background: var(--bg-subtle); color: var(--text-3); border: 1px dashed var(--line-2);
  filter: grayscale(1); opacity: 0.7; animation: none;
}
.achievement.locked .ach-icon { opacity: 0.5; }
.achievement.locked:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px; font-size: 11px; font-weight: 400;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.12); color: var(--text-2); z-index: 20;
}
@keyframes achPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 消息预览框 */
.msg-preview {
  margin-top: 10px; padding: 12px 14px; background: var(--bg-subtle);
  border: 1px solid var(--line-2); border-radius: 10px; font-size: 13px;
  line-height: 1.8; color: var(--text); white-space: pre-wrap; word-break: break-all;
}
.msg-preview .pv-label {
  display: block; font-size: 11px; color: var(--text-3); font-weight: 600;
  margin-bottom: 6px;
}
.msg-preview .pv-send {
  color: var(--text-3); font-size: 12px; margin-top: 6px; border-top: 1px dashed var(--line-2);
  padding-top: 6px;
}
.msg-preview .pv-send b { color: var(--brand); }
.empty { padding: var(--s7) var(--s5); text-align: center; color: var(--text-3); font-size: 13px; line-height: 2.2; }

/* 批量操作栏 */
.batch-bar {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  display: flex; align-items: center; gap: var(--s4);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-glass);
  padding: 12px 20px; border-radius: var(--r-xl); z-index: 40; font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.batch-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.batch-bar .n { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============ 消息预设 ============ */
.preset-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 4px var(--s3); border-radius: var(--r-s);
  transition: background var(--t-fast) var(--ease);
}
.preset-item:hover { background-color: var(--bg-subtle); }
.preset-item input[type=radio] { accent-color: var(--brand); flex: none; width: 16px; height: 16px; }
.preset-item .txt { flex: 1; min-width: 0; font: 13px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-item .op { color: var(--text-3); font-size: 12px; padding: 5px 10px; border-radius: var(--r-s); flex: none; font-weight: 500; }
.preset-item .op.edit:hover { color: var(--brand); background: var(--brand-soft); }
.preset-item .op.del:hover { color: var(--err); background: var(--err-soft); }
.mode-row { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); flex-wrap: wrap; }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow-sm); }
.seg button {
  padding: 7px 18px; font-size: 13px; font-weight: 500; color: var(--text-2);
  background-color: var(--card); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.seg button:hover { background-color: var(--bg-subtle); }
.seg button.active { background-color: var(--brand-soft); color: var(--brand); font-weight: 600; }
.hint { font-size: 12px; color: var(--text-3); }
.hint.mb { margin-bottom: var(--g-sm); }
.hint.light { font-weight: 400; }
.hint code { font: 11px var(--font-mono); background: var(--bg-subtle); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2); }
.var-hint { line-height: 2; }
.var-hint code { cursor: pointer; transition: background 0.15s ease; }
.var-hint code:hover { background: var(--brand-soft); color: var(--brand); }

/* 一言类型 */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--text-2); background-color: var(--card);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.chip.on { background-color: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; box-shadow: 0 0 0 2px var(--brand-glow); }

/* ============ 表单 ============ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--card); outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}
.field textarea { font: 13px var(--font-mono); resize: vertical; min-height: 80px; }
.save-bar { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s5); }
textarea.tpl {
  font: 13px var(--font-mono); min-height: 90px; resize: vertical; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--card); outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
textarea.tpl:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

/* Cookies */
.ck-count {
  font-size: 11px; font-weight: 700; color: var(--ok);
  background: var(--ok-soft); padding: 2px 12px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ck-count.zero { color: var(--err); background: var(--err-soft); }
textarea.ck { font: 12px var(--font-mono); min-height: 140px; }

/* ============ 日志 ============ */
.log-file { border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: var(--s3); overflow: hidden; }
.log-file .head {
  display: flex; align-items: center; gap: var(--s4); padding: 10px 14px;
  background: var(--bg-subtle); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.log-file .head .name { font: 12px var(--font-mono); font-weight: 600; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-refresh { margin-left: auto; }
.log-file pre {
  padding: 12px 14px; max-height: 260px; overflow-y: auto;
  font: 11px/1.7 var(--font-mono); white-space: pre-wrap; word-break: break-all; color: var(--text-2);
}

/* ============ Toast ============ */
#toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--text); color: var(--bg); font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: 99px; z-index: 99;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  box-shadow: var(--shadow-glass);
  max-width: min(86vw, 480px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--err); color: #fff; }

/* ============ 动效 ============ */
.card.entering, .tabpanel.entering, .friend-item.entering, .preset-item.entering, .sched-time.entering {
  will-change: transform, opacity;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ 触摸设备悬停保护 ============ */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--text); border-color: var(--text-3); box-shadow: var(--shadow); transform: translateY(-1px); }
  .btn.primary:hover { box-shadow: 0 6px 20px rgba(255,45,85,0.3); transform: translateY(-1px); }
  .kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
  .card:hover { box-shadow: var(--shadow-md); }
  .tabs button:hover { color: var(--text); background-color: var(--bg-subtle); }
  .friend-item:hover { background-color: var(--bg-subtle); }
  .preset-item:hover { background-color: var(--bg-subtle); }
  .chip:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
  .seg button:hover { background-color: var(--bg-subtle); }
  .emotion-float:hover { filter: drop-shadow(0 6px 20px rgba(255,45,85,0.25)); }
  .theme-picker .theme-dot:hover { transform: scale(1.2); }
}

/* ============ 动效降级 ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ 响应式 ============ */
@media (max-width: 640px) {
  .topbar { padding: 0 16px; height: 52px; }
  .acct-chip { display: none; }
  .wrap { padding: var(--s4) 14px 0; }
  .form-grid { grid-template-columns: 1fr; }
  .card { padding: var(--s4) var(--s5); border-radius: var(--r-l); }
  .run-btns { margin-left: 0; width: 100%; }
  .run-btns .btn { flex: 1; min-height: 44px; }
  .tabs button { padding: 13px 0; }
  .toolbar { flex-wrap: wrap; }
  .toolbar input.grow { flex: 1 1 100%; }
  .toolbar input:not(.grow) { flex: 1; min-width: 0; }
  .toolbar .btn { min-height: 44px; padding: 10px 20px; }
  .friend-item .del, .preset-item .op { padding: 10px 14px; min-height: 40px; }
  .friend-item, .preset-item { padding-top: 4px; padding-bottom: 4px; }
  .chip { padding: 9px 18px; }
  .sched-time input { width: 64px; padding: 9px 8px; }
  .sched-time .del { min-height: 40px; }
  .batch-bar {
    left: 14px; right: 14px; bottom: 14px;
    transform: translateY(14px);
    justify-content: center; flex-wrap: wrap;
    border-radius: var(--r-l);
  }
  .batch-bar.show { transform: translateY(0); }
  body { padding-bottom: 108px; }
}
@media (max-width: 420px) {
  .tabs button { font-size: 13px; padding: 11px 0; }
  .run-state { font-size: 16px; }
  .card { padding: 14px; }
  #toast { bottom: 16px; font-size: 12px; max-width: 92vw; }
  .btn { padding: 8px 16px; font-size: 12px; }
}

/* ============ Emotion Ball 悬浮球 ============ */
.emotion-float {
  position: fixed; top: 84px; right: 20px;
  width: 88px; height: 88px; z-index: 50;
  cursor: grab; user-select: none; touch-action: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  transition: filter 0.3s ease;
}
.emotion-float:hover { filter: drop-shadow(0 6px 20px var(--brand-glow)); }
.emotion-float:active { cursor: grabbing; }
.emotion-float.dragging { cursor: grabbing; opacity: 0.92; transition: none; }
.emotion-float .emotion-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--card); color: var(--text); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
  margin-bottom: 8px;
}
.emotion-float .emotion-tip.show { opacity: 1; }

/* === 拟生化生命态 === */
@keyframes emoBreath {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(var(--breath-top, 1.04)); }
  65%      { transform: scale(calc(1 - (var(--breath-top, 1.04) - 1) * 0.3)); }
}
@keyframes emoLook {
  0%, 85%, 100% { transform: translateX(0); }
  90%           { transform: translateX(3px); }
  95%           { transform: translateX(-2px); }
}
@keyframes emoBounce {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.1, 0.9) translateY(8px); }
  50%  { transform: scale(0.95, 1.08) translateY(-12px); }
  70%  { transform: scale(1.03, 0.97) translateY(3px); }
  100% { transform: scale(1) translateY(0); }
}
.emotion-float {
  --breath-dur: 3.6s;
  --breath-top: 1.04;
  --breath-ease: cubic-bezier(0.4, 0, 0.2, 1);
  transition: filter 0.3s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.emotion-float.idle-breath {
  animation:
    emoBreath var(--breath-dur) var(--breath-ease) infinite,
    emoLook 8s ease-in-out infinite;
  animation-delay: var(--breath-delay, 0s), var(--look-delay, 2s);
}
.emotion-float.idle-breath:hover { animation-play-state: paused, paused; }
.emotion-float.pressed   { transform: scale(0.88); transition: transform 0.12s cubic-bezier(.34,1.56,.64,1); }
.emotion-float.pop       { transition: transform 0.35s cubic-bezier(.175,.885,.32,1.275) !important; }
.emotion-float.bounce-anim { animation: emoBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; }

/* === 表情巡演态：球外环缓慢旋转的彩虹光圈 + 呼吸明暗，提示「表演中，点我停止」 === */
@keyframes emoTourSpin  { to { transform: rotate(360deg); } }
@keyframes emoTourPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.emotion-float.touring { cursor: pointer; }
.emotion-float.touring::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0deg, #ff2d55, #ff9500, #ffcc00, #34c759, #5ac8fa, #af52de, #ff2d55);
  /* 只保留 3px 宽的一圈环，其余遮住 */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  animation: emoTourSpin 4s linear infinite, emoTourPulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .emotion-float.touring::before { animation: emoTourPulse 2.4s ease-in-out infinite; }
}

@media (max-width: 720px) {
  /* top:auto 让默认位置落到右下角；否则默认 top:84 与移动端顶部导航条重叠 */
  .emotion-float { width: 64px; height: 64px; top: auto; bottom: 16px; right: 16px; }
}
@media (max-width: 420px) {
  .emotion-float { width: 56px; height: 56px; top: auto; bottom: 12px; right: 12px; }
}

/* === Emotion Ball 升级：进度环 === */
.emotion-float .emo-progress-ring {
  position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  transform: rotate(-90deg);
}
.emotion-float.running .emo-progress-ring { opacity: 1; }
.emotion-float .emo-progress-bg { stroke: var(--line); opacity: 0.4; }
.emotion-float .emo-progress-fg {
  stroke: var(--brand); transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 4px var(--brand-glow));
}
.emotion-float.running .emo-progress-fg {
  animation: emoProgressSpin 2s linear infinite;
}
@keyframes emoProgressSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
   v30 新增样式：仪表盘、统计、新功能模块
   ============================================================ */

/* 仪表盘网格布局 */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-md);
  margin-top: var(--g-md);
}
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

/* 快捷操作 */
.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s2);
}
.quick-btn {
  padding: var(--s3) var(--s2);
  font-size: 13px;
  text-align: center;
  border-radius: var(--r-m);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.quick-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 768px) {
  .quick-actions { grid-template-columns: 1fr 1fr; }
}

/* 火花预警 */
.spark-warn-list {
  max-height: 200px;
  overflow-y: auto;
}
.spark-warn-item {
  display: flex;
  align-items: center;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
  background-color: var(--warn-soft);
  border: 1px solid rgba(255, 145, 0, 0.2);
  margin-bottom: var(--s2);
}
.spark-warn-item .warn-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: var(--s3);
  flex-shrink: 0;
}
.spark-warn-item .warn-info {
  flex: 1;
  min-width: 0;
}
.spark-warn-item .warn-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.spark-warn-item .warn-desc {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.spark-warn-item .warn-days {
  font-size: 18px;
  font-weight: 700;
  color: var(--warn);
  margin-left: var(--s3);
}
/* 火花已断掉 - 红色警示 */
.spark-warn-item.broken {
  background: var(--err-soft);
  border-color: rgba(239, 68, 68, 0.3);
}
.spark-warn-item.broken .warn-avatar {
  background: var(--err);
}
.spark-warn-item.broken .warn-days {
  color: var(--err);
}
/* 火花即将断掉 - 橙色警示 */
.spark-warn-item.urgent {
  background: var(--warn-soft);
  border-color: rgba(245, 158, 11, 0.3);
}
.spark-warn-item.urgent .warn-avatar {
  background: var(--warn);
}
.spark-warn-item.urgent .warn-days {
  color: var(--warn);
}
/* v2 容器优化 */
.spark-warn-list-v2 {
  min-height: 120px;
  max-height: 200px;
  overflow-y: auto;
}
.spark-warn-list-v2 .hint {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  padding: 24px 0;
}

/* 最近活动 */
.recent-activity {
  max-height: 240px;
  overflow-y: auto;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.activity-item:last-child { border-bottom: none; }
.activity-item .activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-right: var(--s3);
  flex-shrink: 0;
}
.activity-item .activity-content {
  flex: 1;
  min-width: 0;
}
.activity-item .activity-text {
  font-size: 13px;
  color: var(--text);
}
.activity-item .activity-time {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* 今日概览 */
.today-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.overview-item {
  padding: var(--s3);
  border-radius: var(--r-m);
  background: var(--bg-subtle);
  text-align: center;
}
.overview-label {
  display: block;
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: var(--s1);
}
.overview-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand);
}

/* 统计概览网格 */
.stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--g-md);
  margin-bottom: var(--g-md);
}
@media (max-width: 768px) {
  .stats-overview-grid { grid-template-columns: 1fr 1fr; }
}
.stat-card {
  display: flex;
  align-items: center;
  padding: var(--s4);
  border-radius: var(--r-l);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: var(--s3);
  flex-shrink: 0;
}
.stat-card .stat-info {
  flex: 1;
  min-width: 0;
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 2px;
}
.stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

/* 趋势周期标签 */
.trend-period-tabs {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.trend-period-btn {
  padding: var(--s2) var(--s4);
  font-size: 12px;
  border-radius: var(--r-s);
  background-color: var(--bg-subtle);
  border: 1px solid var(--line);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.trend-period-btn:hover {
  background-color: var(--brand-soft);
  color: var(--brand);
}
.trend-period-btn.active {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* 大趋势图 */
.trend-chart {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: var(--s3) 0;
}
.trend-bars-large {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.trend-bar-large {
  flex: 1;
  background: var(--brand-gradient);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.trend-bar-large:hover {
  opacity: 0.8;
  transform: scaleY(1.02);
}
.trend-bar-large .bar-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 4px;
}
.trend-bar-large:hover .bar-tooltip { opacity: 1; }

/* 排行列表 */
.ranking-list {
  max-height: 280px;
  overflow-y: auto;
}
.ranking-item {
  display: flex;
  align-items: center;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
  margin-bottom: var(--s2);
  background: var(--bg-subtle);
  transition: all 0.2s var(--ease);
}
.ranking-item:hover {
  background: var(--brand-soft);
}
.ranking-item .rank-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-right: var(--s3);
  flex-shrink: 0;
}
.ranking-item:nth-child(1) .rank-num { background: #ffd700; color: #333; }
.ranking-item:nth-child(2) .rank-num { background: #c0c0c0; color: #333; }
.ranking-item:nth-child(3) .rank-num { background: #cd7f32; color: #fff; }
.ranking-item .rank-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranking-item .rank-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  margin-left: var(--s3);
}

/* 时段分布 */
.hour-distribution {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.hour-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-2);
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}
.hour-cell:hover {
  transform: scale(1.1);
  z-index: 1;
}
.hour-cell .hour-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 4px;
}
.hour-cell:hover .hour-tooltip { opacity: 1; }

/* 模板统计 */
.template-stats {
  max-height: 200px;
  overflow-y: auto;
}
.template-stat-item {
  display: flex;
  align-items: center;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
  background: var(--bg-subtle);
  margin-bottom: var(--s2);
}
.template-stat-item .tpl-text {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-stat-item .tpl-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  margin-left: var(--s3);
}

/* 徽章样式增强 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge.warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.badge.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

/* 好友分组标签 */
.friend-group-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.group-tag {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  color: var(--text-2);
  transition: all 0.2s var(--ease);
}
.group-tag:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.group-tag.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.group-tag .group-count {
  margin-left: 4px;
  opacity: 0.7;
}

/* 生日提醒 */
.birthday-reminder {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-m);
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8e53 100%);
  color: #fff;
  margin-bottom: var(--s3);
  display: flex;
  align-items: center;
}
.birthday-reminder .bd-icon {
  font-size: 24px;
  margin-right: var(--s3);
}
.birthday-reminder .bd-text {
  flex: 1;
}
.birthday-reminder .bd-title {
  font-size: 14px;
  font-weight: 600;
}
.birthday-reminder .bd-desc {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}

/* 系统健康检查 */
.health-check-item {
  display: flex;
  align-items: center;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-m);
  background: var(--bg-subtle);
  margin-bottom: var(--s2);
  border: 1px solid var(--line);
}
.health-check-item .hc-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-right: var(--s3);
  flex-shrink: 0;
}
.health-check-item .hc-icon.ok { background: var(--ok-soft); }
.health-check-item .hc-icon.warn { background: var(--warn-soft); }
.health-check-item .hc-icon.err { background: var(--err-soft); }
.health-check-item .hc-info {
  flex: 1;
  min-width: 0;
}
.health-check-item .hc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.health-check-item .hc-desc {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.health-check-item .hc-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
}
.health-check-item .hc-status.ok { background: var(--ok-soft); color: var(--ok); }
.health-check-item .hc-status.warn { background: var(--warn-soft); color: var(--warn); }
.health-check-item .hc-status.err { background: var(--err-soft); color: var(--err); }

/* 消息模板库 */
.template-library-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}
@media (max-width: 768px) {
  .template-library-grid { grid-template-columns: 1fr; }
}
.template-card {
  padding: var(--s4);
  border-radius: var(--r-l);
  background: var(--card);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.template-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand);
}
.template-card .tpl-category {
  font-size: 11px;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: var(--s2);
}
.template-card .tpl-preview {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: var(--s3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-card .tpl-actions {
  display: flex;
  gap: var(--s2);
}
.template-card .tpl-btn {
  flex: 1;
  padding: var(--s2);
  font-size: 12px;
  border-radius: var(--r-s);
  border: 1px solid var(--line);
  background: var(--bg-subtle);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.2s;
}
.template-card .tpl-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.template-card .tpl-btn.primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* 节日列表 */
.festival-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
}
@media (max-width: 768px) {
  .festival-list { grid-template-columns: 1fr 1fr; }
}
.festival-item {
  padding: var(--s3);
  border-radius: var(--r-m);
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  text-align: center;
  transition: all 0.2s;
}
.festival-item:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.festival-item .fest-icon {
  font-size: 20px;
  margin-bottom: var(--s1);
}
.festival-item .fest-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.festival-item .fest-date {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}
.festival-item.upcoming {
  border-color: var(--warn);
  background: var(--warn-soft);
}


/* 全局 Cookie 警告条关闭按钮（由内联 style 沉淀） */
.cookie-warn-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.cookie-warn-close:hover { background: rgba(255,255,255,0.32); }

/* ============================================================
   v32 · Cloud Milk Glass —— 液态玻璃视觉层
   覆盖/增强旧版表面质感，全部走主题变量
   ============================================================ */

/* ---------- 环境：缓慢漂浮的云雾光斑，供玻璃折射 ---------- */
body {
  background: var(--bg-gradient);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(32% 40% at 16% 18%, var(--ambient-1), transparent 70%),
    radial-gradient(28% 36% at 84% 8%, var(--ambient-2), transparent 70%),
    radial-gradient(38% 46% at 72% 88%, var(--ambient-3), transparent 72%),
    radial-gradient(26% 32% at 8% 82%, var(--ambient-2), transparent 72%);
  filter: blur(26px) saturate(1.1);
  animation: ambient-drift 36s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(20, 28, 40, 0.05) 100%);
}
[data-theme="dark"] body::after,
:root[data-theme="dark"] body::after {
  background: radial-gradient(120% 90% at 50% 0%, transparent 50%, rgba(0, 0, 0, 0.28) 100%);
}
@keyframes ambient-drift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  50%  { transform: translate3d(1.5%, 1%, 0) scale(1.05); }
  100% { transform: translate3d(-1%, 1.5%, 0) scale(1.02); }
}

/* ---------- 液态玻璃通用材质（全局所有按钮/卡片/胶囊） ---------- */
.sidebar,
.card,
.kpi,
.ui-modal,
.theme-picker,
.run-panel,
.preset-pill,
.batch-bar,
.btn,
.btn-v2,
.btn-refresh-v2,
.chip,
.seg button,
.friend-item,
.preset-item,
.sched-time,
.spark-warn-item,
.quick-action-btn,
.trend-period-btn,
.log-subtab,
.tab-btn,
.help-btn,
.activity-toggle,
.modal-close,
.acct-chip,
.theme-dot {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    var(--glass-tint) 0%,
    rgba(255, 255, 255, 0) 46%);
  border-color: transparent;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-edge-bottom),
    inset 1px 0 0 var(--hairline),
    inset -1px 0 0 var(--hairline);
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .card,
[data-theme="dark"] .kpi,
[data-theme="dark"] .ui-modal,
[data-theme="dark"] .theme-picker,
[data-theme="dark"] .run-panel,
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-v2,
[data-theme="dark"] .btn-refresh-v2,
[data-theme="dark"] .chip,
[data-theme="dark"] .seg button,
[data-theme="dark"] .friend-item,
[data-theme="dark"] .preset-item,
[data-theme="dark"] .sched-time,
[data-theme="dark"] .spark-warn-item,
[data-theme="dark"] .quick-action-btn,
[data-theme="dark"] .trend-period-btn,
[data-theme="dark"] .log-subtab,
[data-theme="dark"] .tab-btn,
[data-theme="dark"] .help-btn,
[data-theme="dark"] .activity-toggle,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .acct-chip,
[data-theme="dark"] .theme-dot {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0) 46%);
}
.sidebar,
.card,
.kpi,
.ui-modal,
.run-panel,
.btn,
.btn-v2,
.btn-refresh-v2,
.chip,
.seg button,
.friend-item,
.preset-item,
.sched-time,
.spark-warn-item,
.quick-action-btn,
.trend-period-btn,
.log-subtab,
.tab-btn,
.help-btn,
.activity-toggle,
.modal-close,
.acct-chip,
.theme-dot {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.03);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(1.03);
}
.card:hover, .kpi:hover,
.friend-item:hover, .preset-item:hover,
.chip:hover, .seg button:hover,
.sched-time:hover, .spark-warn-item:hover,
.quick-action-btn:hover, .trend-period-btn:hover,
.log-subtab:hover, .tab-btn:hover,
.help-btn:hover, .activity-toggle:hover,
.modal-close:hover, .theme-dot:hover {
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-edge-bottom);
}
/* primary/danger/success 按钮保留各自品牌底色，叠加玻璃高光 */
.btn.primary, .btn.danger, .btn.success, .btn.warn {
  background-color: var(--brand);
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0) 50%);
}
.btn.primary { background-color: var(--brand); }
.btn.danger { background-color: var(--err); }
.btn.success { background-color: var(--ok); }
.btn.warn { background-color: var(--warn); }
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .btn.danger,
[data-theme="dark"] .btn.success,
[data-theme="dark"] .btn.warn {
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0) 50%);
}

/* ---------- 侧栏导航：玻璃胶囊替代重渐变 ---------- */
.sidebar { border-right: 1px solid var(--hairline); }
.sidebar .logo {
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(120deg, var(--text) 0%, var(--brand) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar .tabs button {
  margin: 0 4px;
  padding: 10px 14px;
  color: var(--text-2);
  transition: color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.sidebar .tabs button:hover {
  color: var(--text);
  background: var(--brand-soft);
  transform: translateX(2px);
}
.sidebar .tabs button.active {
  background: var(--card-elevated);
  color: var(--brand);
  font-weight: 650;
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
.sidebar .tabs button.active::before {
  width: 3px;
  background: var(--brand-gradient);
  box-shadow: 0 0 10px var(--brand-glow);
}

/* === v32.1 侧栏液态玻璃增强 === */
/* 顶边流光：一条品牌色光线沿侧栏顶边缓慢扫过 */
@keyframes sideTopGlow {
  0%   { opacity: 0; transform: translateX(-100%); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
.sidebar::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
  opacity: 0; pointer-events: none;
  animation: sideTopGlow 6s ease-in-out infinite;
  animation-delay: 2s;
}
/* 背景柔光斑：两个半透明渐变圆缓慢漂移，营造液态流动感 */
@keyframes sideOrbA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,-30px); } }
@keyframes sideOrbB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-15px,25px); } }
.sidebar::before {
  content: ''; position: absolute; top: 15%; left: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, var(--glass-tint) 0%, transparent 70%);
  filter: blur(20px); pointer-events: none; z-index: -1;
  animation: sideOrbA 12s ease-in-out infinite;
}
/* 第二个光斑放底部 */
.sidebar .spacer::after {
  content: ''; position: absolute; bottom: 10%; right: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 70%);
  filter: blur(16px); pointer-events: none;
  animation: sideOrbB 10s ease-in-out infinite;
}
/* tab 悬停：玻璃光晕从底部升起 + 文字微亮 */
.sidebar .tabs button {
  overflow: hidden; position: relative;
}
.sidebar .tabs button::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, transparent, var(--glass-tint));
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.sidebar .tabs button:hover::after { opacity: 1; }
.sidebar .tabs button:hover {
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 2px 12px color-mix(in srgb, var(--brand) 12%, transparent);
}
/* active 态柔光脉动 */
@keyframes sideActivePulse {
  0%, 100% { box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge), 0 0 0 0 color-mix(in srgb, var(--brand) 20%, transparent); }
  50%      { box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge), 0 0 12px 2px color-mix(in srgb, var(--brand) 15%, transparent); }
}
.sidebar .tabs button.active {
  animation: sideActivePulse 3.5s ease-in-out infinite;
}
/* 动画降级 */
@media (prefers-reduced-motion: reduce) {
  .sidebar::after, .sidebar::before, .sidebar .spacer::after,
  .sidebar .tabs button.active { animation: none; }
  .sidebar .tabs button::after { transition: none; }
  .btn::after, .btn-v2::after, .btn-refresh-v2::after, .friend-item::after, .preset-item::after, .quick-action-btn::after, .trend-period-btn::after, .chip::after, .help-btn::after, .activity-toggle::after, .modal-close::after, .theme-dot::after, .acct-chip::after, .seg button::after, .sched-time::after, .spark-warn-item::after, .log-subtab::after, .tab-btn::after { transition: none; }
}

/* === 全局按钮玻璃光泽滑过（hover 时一道光从左到右扫过） === */
@keyframes glassShine {
  0%   { left: -60%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}
.btn::after, .btn-v2::after, .btn-refresh-v2::after,
.friend-item::after, .preset-item::after,
.chip::after, .seg button::after, .sched-time::after,
.spark-warn-item::after, .quick-action-btn::after,
.trend-period-btn::after, .log-subtab::after,
.tab-btn::after, .help-btn::after, .activity-toggle::after,
.modal-close::after, .theme-dot::after, .acct-chip::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  pointer-events: none; opacity: 0;
}
.btn:hover::after, .btn-v2:hover::after, .btn-refresh-v2:hover::after,
.friend-item:hover::after, .preset-item:hover::after,
.chip:hover::after, .seg button:hover::after, .sched-time:hover::after,
.spark-warn-item:hover::after, .quick-action-btn:hover::after,
.trend-period-btn:hover::after, .log-subtab:hover::after,
.tab-btn:hover::after, .help-btn:hover::after, .activity-toggle:hover::after,
.modal-close:hover::after, .theme-dot:hover::after, .acct-chip:hover::after {
  opacity: 1; animation: glassShine 0.7s ease-out;
}
/* primary/danger 按钮光泽更亮 */
.btn.primary:hover::after, .btn.danger:hover::after,
.btn.success:hover::after, .btn.warn:hover::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
}
/* 确保 ::after 伪元素定位正确 */
.btn-v2, .btn-refresh-v2, .friend-item, .preset-item,
.chip, .seg button, .sched-time, .spark-warn-item,
.quick-action-btn, .trend-period-btn, .log-subtab,
.tab-btn, .help-btn, .activity-toggle, .modal-close,
.theme-dot, .acct-chip { position: relative; overflow: hidden; }

/* 账号胶囊 */
.acct-chip {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--glass-tint), rgba(255,255,255,0) 60%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  letter-spacing: 0.01em;
}
.acct-chip.is-guest { color: var(--text-3); }

/* ---------- KPI 卡片（v32 的大卡风格只作用于非 v2 结构；
   kpi-v2 是 v31 的紧凑横版：图标+内容、k-value 20px，不能被这里覆盖） ---------- */
.kpi:not(.kpi-v2) {
  border-radius: var(--r-xl);
  padding: 18px 20px;
}
.kpi:not(.kpi-v2)::after {
  width: 96px; height: 96px; right: -28px; top: -28px;
  opacity: 0.55;
  background: radial-gradient(circle, var(--brand-soft-2), transparent 70%);
}
.kpi:not(.kpi-v2) .k-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-3);
}
.kpi:not(.kpi-v2) .k-value {
  font-size: 30px;
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -0.03em;
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
.kpi { transform: translateY(0); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }

/* ---------- 卡片与欢迎区 ---------- */
.card { border-radius: var(--r-2xl); }
.card h3 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.dashboard-hero {
  background:
    linear-gradient(135deg, var(--brand-soft) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--glass-tint) 0%, rgba(255,255,255,0) 50%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-radius: var(--r-2xl);
}
.dashboard-hero::before { opacity: 0.7; }

/* ---------- 按钮：保留结构，细化高光 ---------- */
.btn {
  border-radius: var(--r-m);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn.primary {
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,0.35);
  color: var(--on-accent);
}
.btn.primary:hover { box-shadow: var(--shadow-brand-lg), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn.danger { box-shadow: 0 4px 14px var(--err-glow), inset 0 1px 0 rgba(255,255,255,0.25); }

/* ---------- 表单：玻璃输入面 ---------- */
input:not([type=checkbox]):not([type=radio]):not(.ui-modal-input),
select, textarea,
.ui-modal-input {
  background: var(--card-elevated);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 2px rgba(20, 28, 40, 0.04);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus,
.ui-modal-input:focus {
  outline: none;
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px var(--brand-soft), inset 0 1px 2px rgba(20,28,40,0.03);
}

/* ---------- 运行控制台 ---------- */
.console-v2 {
  border: 1px solid var(--console-border);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), var(--shadow-sm);
  border-radius: var(--r-l);
}

/* ============================================================
   v32 · 玻璃模态系统（confirm / prompt / choice）
   ============================================================ */
.ui-modal-mask {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(24, 30, 42, 0.30);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  animation: mask-in 0.2s var(--ease) both;
}
.ui-modal-mask.closing { animation: mask-out 0.18s var(--ease) both; }
@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mask-out { from { opacity: 1; } to { opacity: 0; } }
.ui-modal {
  width: min(430px, 100%);
  padding: 22px 22px 18px;
  border-radius: var(--r-2xl);
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--glass-tint), rgba(255,255,255,0) 40%);
  animation: modal-in 0.26s var(--ease-bounce) both;
}
.ui-modal.closing { animation: modal-out 0.16s var(--ease-in) both; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes modal-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.97); }
}
.ui-modal-title {
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); margin-bottom: 8px;
}
.ui-modal-msg {
  font-size: 13px; line-height: 1.7; color: var(--text-2);
  margin-bottom: 16px; white-space: pre-line;
}
.ui-modal-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-m);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.ui-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}
.ui-modal-actions .btn { padding: 9px 18px; }
.ui-modal.danger .ui-modal-ok {
  background: linear-gradient(135deg, var(--err) 0%, var(--err-deep) 100%);
  border-color: transparent;
  box-shadow: 0 4px 14px var(--err-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.ui-modal.danger .ui-modal-ok:focus-visible {
  outline-color: var(--err-light);
  outline-offset: 2px;
}
.ui-choice-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ui-choice-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left;
  padding: 12px 16px;
  border-radius: var(--r-m);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs), inset 0 1px 0 var(--glass-edge);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ui-choice-item:hover {
  transform: translateY(-1px);
  border-color: var(--brand-light);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
}
.ui-choice-item:active { transform: translateY(0) scale(0.99); }
.ui-choice-item.danger:hover { border-color: var(--err-light); box-shadow: 0 6px 18px var(--err-glow); }
.ui-choice-label { font-size: 13.5px; font-weight: 650; color: var(--text); }
.ui-choice-item.danger .ui-choice-label { color: var(--err); }
.ui-choice-desc { font-size: 11.5px; color: var(--text-3); }

/* ============================================================
   v32 · 新数据组件（发送记录 / 好友统计 / 时段图 / 模板统计）
   ============================================================ */
.send-record-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-m);
  transition: background var(--t-fast) var(--ease);
}
.send-record-item:last-child { border-bottom: none; }
.send-record-item:hover { background: var(--brand-soft); }
.sr-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 5px;
}
.sr-name { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-uid { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); flex: none; }
.sr-msg {
  font-size: 12.5px; color: var(--text-2); line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

.friend-stat-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-m);
}
.friend-stat-item:last-child { border-bottom: none; }
.fs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fs-name { font-size: 13px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-count { font-size: 15px; font-weight: 720; color: var(--brand); font-variant-numeric: tabular-nums; flex: none; }
.fs-bar-bg { height: 7px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; box-shadow: inset 0 1px 2px rgba(20,28,40,0.06); }
.fs-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--brand-gradient);
  box-shadow: 0 0 8px var(--brand-glow);
  transition: width 0.7s var(--ease);
}
.fs-meta { font-size: 10.5px; color: var(--text-3); margin-top: 5px; font-family: var(--font-mono); }

.hd-empty { padding: 24px 12px; text-align: center; }
.hd-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 128px; padding: 4px 2px 0;
}
.hd-col {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 4px; min-width: 0;
}
.hd-bar {
  width: 100%; max-width: 14px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 6px var(--brand-glow);
  transition: height 0.8s var(--ease);
  min-height: 3px;
}
.hd-col.zero .hd-bar {
  background: var(--line-2);
  box-shadow: none;
  opacity: 0.45;
}
.hd-tick { font-size: 9px; color: var(--text-3); height: 12px; line-height: 12px; font-variant-numeric: tabular-nums; }
.hd-legend {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding: 0 2px;
  font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.tpl-list { display: flex; flex-direction: column; gap: 12px; }
.tpl-row { transition: transform var(--t-fast) var(--ease); }
.tpl-row:hover { transform: translateX(2px); }
.tpl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tpl-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-meta { font-size: 10.5px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
.tpl-bar-bg { height: 7px; border-radius: 99px; background: var(--bg-subtle); overflow: hidden; box-shadow: inset 0 1px 2px rgba(20,28,40,0.06); }
.tpl-bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand));
  box-shadow: 0 0 8px var(--brand-glow);
  transition: width 0.7s var(--ease);
}

/* ============================================================
   v32 · 动效：面板入场、列表 stagger、KPI 入场
   ============================================================ */
[role="tabpanel"]:not(.tab-hidden) {
  /* backwards 而非 both：动画结束后不再保留终态 transform，否则会永久压住 hover 位移 */
  animation: panel-in var(--t-slow) var(--ease) backwards;
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kpi-grid .kpi { animation: kpi-in 0.5s var(--ease) backwards; }
.kpi-grid .kpi:nth-child(1) { animation-delay: 0.03s; }
.kpi-grid .kpi:nth-child(2) { animation-delay: 0.09s; }
.kpi-grid .kpi:nth-child(3) { animation-delay: 0.15s; }
.kpi-grid .kpi:nth-child(4) { animation-delay: 0.21s; }
@keyframes kpi-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.friend-item, .preset-item, .send-record-item, .friend-stat-item, .tpl-row {
  animation: item-in 0.38s var(--ease) backwards;
}
.friend-item:nth-child(odd) { animation-delay: 0.02s; }
@keyframes item-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 主题选择器玻璃化微调 */
.theme-picker {
  background-color: transparent;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  gap: 8px;
  padding: 9px 12px;
}
.theme-picker .theme-dot {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.55), 0 1px 3px rgba(20,28,40,0.12);
}
.theme-picker .theme-dot.active {
  border-color: var(--card-elevated);
  box-shadow: 0 0 0 2px var(--brand), inset 0 1px 1px rgba(255,255,255,0.5);
}

/* 文本选中与滚动条微调 */
::selection { background: var(--brand-soft-2); color: var(--text); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-3) 45%, transparent);
}

/* 动效降级：环境漂浮与入场全部归位 */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  [role="tabpanel"]:not(.tab-hidden),
  .kpi-grid .kpi,
  .friend-item, .preset-item, .send-record-item, .friend-stat-item, .tpl-row {
    animation: none !important;
  }
  .fs-bar-fill, .tpl-bar-fill, .hd-bar { transition: none; }
}

/* 移动端：环境光斑缩小开销 */
@media (max-width: 720px) {
  body::before { filter: blur(18px); }
  .hd-chart { height: 96px; }
}

/* ============================================================
   v32.1 · 外观设置生效样式（mini/隐藏侧栏、密度、动画开关与速度）
   ============================================================ */

/* 侧栏按钮内部「图标 + 文字」结构（mini 模式下文字可整体隐藏） */
.sidebar .tabs button {
  display: inline-flex; align-items: center; gap: 7px;
}
.sidebar .tabs button .tab-ico { flex: none; }

/* 界面密度：整体缩放（Chromium/Safari/FF126+ 支持 zoom；老浏览器忽略即为 1） */
body { zoom: var(--density-scale, 1); }

/* 动画总开关（外观设置里「关闭」时 body 得到 .anim-off；跟随系统降级另有 prefers-reduced-motion） */
body.anim-off *,
body.anim-off *::before,
body.anim-off *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* 常见交互元素的过渡时长跟随「动画速度」设置（长属性列表保留，只覆盖 duration） */
.btn, .chip, .seg button, .friend-item, .preset-item,
.sidebar .tabs button, .kpi, .card, .theme-picker .theme-dot,
.batch-bar, #toast {
  transition-duration: var(--anim-speed, 0.3s);
}

/* mini / 隐藏侧栏只在桌面布局（>720px）下生效；移动端侧栏本身是顶部横条 */
@media (min-width: 721px) {
  body:has(.sidebar-mini) { padding-left: var(--sidebar-w-mini); }
  body:has(.sidebar-hidden) { padding-left: 0; }

  .sidebar { transition: width var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
  .sidebar.sidebar-mini {
    width: var(--sidebar-w-mini);
    padding-left: 8px; padding-right: 8px;
    align-items: center;
  }
  .sidebar.sidebar-hidden {
    transform: translateX(-100%);
    pointer-events: none;
  }
  /* mini：只留图标 */
  .sidebar.sidebar-mini .logo { padding: var(--s3) 0 var(--s3); }
  .sidebar.sidebar-mini .logo span,
  .sidebar.sidebar-mini .acct-chip,
  .sidebar.sidebar-mini .activity-strip,
  .sidebar.sidebar-mini .conn #connText { display: none; }
  .sidebar.sidebar-mini .conn { padding: 4px 0; }
  .sidebar.sidebar-mini .tabs { align-items: center; }
  .sidebar.sidebar-mini .tabs button {
    justify-content: center;
    width: 42px; margin: 0 auto;
    padding: 10px 0;
  }
  .sidebar.sidebar-mini .tabs button .tab-txt { display: none; }
  /* mini：主题点折行居中、略微缩小 */
  .sidebar.sidebar-mini .theme-picker {
    flex-wrap: wrap; justify-content: center;
    gap: 6px; padding: 8px 4px;
  }
  .sidebar.sidebar-mini .theme-picker .theme-dot { flex: 0 0 auto; width: 16px; height: 16px; }
  .sidebar.sidebar-mini .theme-label { display: none; }
}

/* 批量操作栏出现时，toast 上移避让，不再互相遮挡 */
body:has(.batch-bar.show) #toast { bottom: 84px; }

/* 日志页子 tab 的选中态（之前只切 .active 没有任何视觉样式） */
.log-subtab.active {
  background-color: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  font-weight: 650;
}