/* 点绛官网 · 演示样式包（脚本生成，勿手改）
 * 包含 starry / hud / neon / crt / quantum / venom / abyss / amber / mono / crimson / daylight / frost / sky / slate / celadon / violet / paper / sand 四套皮肤变量 + 全部组件样式（scoped，只打包一次）
 * 重新生成：npm run assets */
@layer dianjiang {

/* 兜底：未指定 data-skin 时按 daylight 渲染 */
:root {
  color-scheme: light;
  --cf-bg: hsl(214 3.3% 96.5%);
  --cf-bg-panel: hsl(214 4.4% 100%);
  --cf-bg-elev: hsl(214 4.4% 100%);
  --cf-bg-sunken: hsl(214 3.03% 93%);
  --cf-border: hsl(214 7.7% 88%);
  --cf-border-strong: hsl(214 7.7% 76%);
  --cf-text: hsl(214 8.8% 18%);
  --cf-text-muted: hsl(214 6.6% 42%);
  --cf-text-dim: hsl(214 5.5% 56%);
  --cf-accent: hsl(176 78% 38%);
  --cf-accent-soft: hsl(176 78% 38% / 0.1);
  --cf-accent-dim: hsl(176 78% 38% / 0.42);
  --cf-accent-ink: hsl(176 46.8% 99%);
  --cf-danger: hsl(350 74% 47%);
  --cf-danger-soft: hsl(350 74% 47% / 0.09);
  --cf-danger-dim: hsl(350 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(176 78% 38%);
  --cf-s2: hsl(218 63.96% 50%);
  --cf-s3: hsl(116 51.48% 54%);
  --cf-s4: hsl(336 42.9% 46%);
  --cf-s5: hsl(214 14% 56%);
  --cf-r: 2px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --cf-glow: 0 2px 15px 2px hsl(176 78% 38% / 0.14);
  --cf-glow-sm: 0 1px 5px 1.5px hsl(176 78% 38% / 0.26);
  --cf-glow-inset: inset 0 0 0 1px hsl(176 78% 38% / 0.18), inset 0 0 14px hsl(176 78% 38% / 0.09);
  --cf-elev-shadow: 0 12px 28px -14px hsl(214 11% 30% / 0.22), 0 2px 6px -2px hsl(214 11% 30% / 0.1);
  --cf-scrim: hsl(214 8.8% 22% / 0.26);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.1em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(214 11% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(214 11% 30% / 0.18), 0 1px 3px -1px hsl(214 11% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(214 11% 30% / 0.22), 0 2px 6px -2px hsl(214 11% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(214 11% 30% / 0.26), 0 4px 12px -4px hsl(214 11% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(214 11% 30% / 0.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(214 11% 30% / 0.05) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="starry"],
.cf-root[data-skin="starry"] {
  color-scheme: dark;
  --cf-bg: hsl(258 26.4% 4.2%);
  --cf-bg-panel: hsl(258 35.2% 6.8%);
  --cf-bg-elev: hsl(258 35.2% 9.5%);
  --cf-bg-sunken: hsl(258 24.2% 3%);
  --cf-border: hsl(258 61.6% 14%);
  --cf-border-strong: hsl(258 61.6% 23%);
  --cf-text: hsl(258 14% 90%);
  --cf-text-muted: hsl(258 10% 60%);
  --cf-text-dim: hsl(258 9% 48%);
  --cf-accent: hsl(302 84% 58%);
  --cf-accent-soft: hsl(302 84% 58% / 0.13);
  --cf-accent-dim: hsl(302 84% 58% / 0.42);
  --cf-accent-ink: hsl(302 50.4% 9%);
  --cf-danger: hsl(26 82% 62%);
  --cf-danger-soft: hsl(26 82% 62% / 0.11);
  --cf-danger-dim: hsl(26 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(302 84% 58%);
  --cf-s2: hsl(344 68.88% 64%);
  --cf-s3: hsl(242 55.44% 68%);
  --cf-s4: hsl(102 46.2% 62%);
  --cf-s5: hsl(258 10% 48%);
  --cf-r: 14px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: 0 0 30px -3px hsl(302 84% 58% / 0.7);
  --cf-glow-sm: 0 0 8px 4px hsl(302 84% 58% / 0.385);
  --cf-glow-inset: inset 0 0 21px hsl(302 84% 58% / 0.35);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.04em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1.06;
  --cf-row-h: 38px;
  --cf-pad: 20px;
  --cf-gap: 18px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="hud"],
.cf-root[data-skin="hud"] {
  color-scheme: dark;
  --cf-bg: hsl(214 9.6% 4.2%);
  --cf-bg-panel: hsl(214 12.8% 6.8%);
  --cf-bg-elev: hsl(214 12.8% 9.5%);
  --cf-bg-sunken: hsl(214 8.8% 3%);
  --cf-border: hsl(214 22.4% 14%);
  --cf-border-strong: hsl(214 22.4% 23%);
  --cf-text: hsl(214 14% 90%);
  --cf-text-muted: hsl(214 10% 60%);
  --cf-text-dim: hsl(214 9% 48%);
  --cf-accent: hsl(174 76% 58%);
  --cf-accent-soft: hsl(174 76% 58% / 0.13);
  --cf-accent-dim: hsl(174 76% 58% / 0.42);
  --cf-accent-ink: hsl(174 45.6% 9%);
  --cf-danger: hsl(338 82% 62%);
  --cf-danger-soft: hsl(338 82% 62% / 0.11);
  --cf-danger-dim: hsl(338 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(174 76% 58%);
  --cf-s2: hsl(216 62.32% 64%);
  --cf-s3: hsl(114 50.16% 68%);
  --cf-s4: hsl(334 41.8% 62%);
  --cf-s5: hsl(214 10% 48%);
  --cf-r: 2px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --cf-glow: 0 0 10px -3px hsl(174 76% 58% / 0.4);
  --cf-glow-sm: 0 0 8px 2px hsl(174 76% 58% / 0.22);
  --cf-glow-inset: inset 0 0 11px hsl(174 76% 58% / 0.2);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.1em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.15px;
  --cf-lw-thin: 0.85px;
  --cf-linecap: butt;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(214 20% 60% / 0.025) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(214 20% 60% / 0.025) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="neon"],
.cf-root[data-skin="neon"] {
  color-scheme: dark;
  --cf-bg: hsl(275 15.6% 4.2%);
  --cf-bg-panel: hsl(275 20.8% 6.8%);
  --cf-bg-elev: hsl(275 20.8% 9.5%);
  --cf-bg-sunken: hsl(275 14.3% 3%);
  --cf-border: hsl(275 36.4% 14%);
  --cf-border-strong: hsl(275 36.4% 23%);
  --cf-text: hsl(275 14% 90%);
  --cf-text-muted: hsl(275 10% 60%);
  --cf-text-dim: hsl(275 9% 48%);
  --cf-accent: hsl(332 100% 58%);
  --cf-accent-soft: hsl(332 100% 58% / 0.13);
  --cf-accent-dim: hsl(332 100% 58% / 0.42);
  --cf-accent-ink: hsl(332 60% 9%);
  --cf-danger: hsl(8 82% 62%);
  --cf-danger-soft: hsl(8 82% 62% / 0.11);
  --cf-danger-dim: hsl(8 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(332 100% 58%);
  --cf-s2: hsl(14 82% 64%);
  --cf-s3: hsl(272 66% 68%);
  --cf-s4: hsl(132 55% 62%);
  --cf-s5: hsl(275 10% 48%);
  --cf-r: 6px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: 0 0 30px -3px hsl(332 100% 58% / 0.7);
  --cf-glow-sm: 0 0 8px 4px hsl(332 100% 58% / 0.385);
  --cf-glow-inset: inset 0 0 21px hsl(332 100% 58% / 0.35);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 380ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.04em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 2.2px;
  --cf-lw-thin: 1.45px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="crt"],
.cf-root[data-skin="crt"] {
  color-scheme: dark;
  --cf-bg: hsl(150 10.8% 4.2%);
  --cf-bg-panel: hsl(150 14.4% 6.8%);
  --cf-bg-elev: hsl(150 14.4% 9.5%);
  --cf-bg-sunken: hsl(150 9.9% 3%);
  --cf-border: hsl(150 25.2% 14%);
  --cf-border-strong: hsl(150 25.2% 23%);
  --cf-text: hsl(150 14% 90%);
  --cf-text-muted: hsl(150 10% 60%);
  --cf-text-dim: hsl(150 9% 48%);
  --cf-accent: hsl(138 100% 58%);
  --cf-accent-soft: hsl(138 100% 58% / 0.13);
  --cf-accent-dim: hsl(138 100% 58% / 0.42);
  --cf-accent-ink: hsl(138 60% 9%);
  --cf-danger: hsl(20 82% 62%);
  --cf-danger-soft: hsl(20 82% 62% / 0.11);
  --cf-danger-dim: hsl(20 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(138 100% 58%);
  --cf-s2: hsl(180 82% 64%);
  --cf-s3: hsl(78 66% 68%);
  --cf-s4: hsl(298 55% 62%);
  --cf-s5: hsl(150 10% 48%);
  --cf-r: 0px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: 0 0 18px -3px hsl(138 100% 58% / 0.55);
  --cf-glow-sm: 0 0 8px 3px hsl(138 100% 58% / 0.303);
  --cf-glow-inset: inset 0 0 16px hsl(138 100% 58% / 0.275);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.18em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: butt;
  --cf-linejoin: round;
  --cf-scale: 0.92;
  --cf-row-h: 28px;
  --cf-pad: 12px;
  --cf-gap: 10px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(150 20% 60% / 0.09) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(150 20% 60% / 0.09) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="quantum"],
.cf-root[data-skin="quantum"] {
  color-scheme: dark;
  --cf-bg: hsl(216 4.2% 4.2%);
  --cf-bg-panel: hsl(216 5.6% 6.8%);
  --cf-bg-elev: hsl(216 5.6% 9.5%);
  --cf-bg-sunken: hsl(216 3.85% 3%);
  --cf-border: hsl(216 9.8% 14%);
  --cf-border-strong: hsl(216 9.8% 23%);
  --cf-text: hsl(216 14% 90%);
  --cf-text-muted: hsl(216 10% 60%);
  --cf-text-dim: hsl(216 9% 48%);
  --cf-accent: hsl(196 44% 58%);
  --cf-accent-soft: hsl(196 44% 58% / 0.13);
  --cf-accent-dim: hsl(196 44% 58% / 0.42);
  --cf-accent-ink: hsl(196 26.4% 9%);
  --cf-danger: hsl(352 82% 62%);
  --cf-danger-soft: hsl(352 82% 62% / 0.11);
  --cf-danger-dim: hsl(352 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(196 44% 58%);
  --cf-s2: hsl(238 36.08% 64%);
  --cf-s3: hsl(136 29.04% 68%);
  --cf-s4: hsl(356 25% 62%);
  --cf-s5: hsl(216 10% 48%);
  --cf-r: 4px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: 0 0 10px -3px hsl(196 44% 58% / 0.4);
  --cf-glow-sm: 0 0 8px 2px hsl(196 44% 58% / 0.22);
  --cf-glow-inset: inset 0 0 11px hsl(196 44% 58% / 0.2);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.06em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.15px;
  --cf-lw-thin: 0.85px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(216 20% 60% / 0.025) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(216 20% 60% / 0.025) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="venom"],
.cf-root[data-skin="venom"] {
  color-scheme: dark;
  --cf-bg: hsl(96 12% 4.2%);
  --cf-bg-panel: hsl(96 16% 6.8%);
  --cf-bg-elev: hsl(96 16% 9.5%);
  --cf-bg-sunken: hsl(96 11% 3%);
  --cf-border: hsl(96 28% 14%);
  --cf-border-strong: hsl(96 28% 23%);
  --cf-text: hsl(96 14% 90%);
  --cf-text-muted: hsl(96 10% 60%);
  --cf-text-dim: hsl(96 9% 48%);
  --cf-accent: hsl(82 100% 58%);
  --cf-accent-soft: hsl(82 100% 58% / 0.13);
  --cf-accent-dim: hsl(82 100% 58% / 0.42);
  --cf-accent-ink: hsl(82 60% 9%);
  --cf-danger: hsl(300 82% 62%);
  --cf-danger-soft: hsl(300 82% 62% / 0.11);
  --cf-danger-dim: hsl(300 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(82 100% 58%);
  --cf-s2: hsl(124 82% 64%);
  --cf-s3: hsl(22 66% 68%);
  --cf-s4: hsl(242 55% 62%);
  --cf-s5: hsl(96 10% 48%);
  --cf-r: 0px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  --cf-glow: 0 0 30px -3px hsl(82 100% 58% / 0.7);
  --cf-glow-sm: 0 0 8px 4px hsl(82 100% 58% / 0.385);
  --cf-glow-inset: inset 0 0 21px hsl(82 100% 58% / 0.35);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 380ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.14em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 2.2px;
  --cf-lw-thin: 1.45px;
  --cf-linecap: butt;
  --cf-linejoin: round;
  --cf-scale: 0.92;
  --cf-row-h: 28px;
  --cf-pad: 12px;
  --cf-gap: 10px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(96 20% 60% / 0.055) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(96 20% 60% / 0.055) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="abyss"],
.cf-root[data-skin="abyss"] {
  color-scheme: dark;
  --cf-bg: hsl(232 14.4% 4.2%);
  --cf-bg-panel: hsl(232 19.2% 6.8%);
  --cf-bg-elev: hsl(232 19.2% 9.5%);
  --cf-bg-sunken: hsl(232 13.2% 3%);
  --cf-border: hsl(232 33.6% 14%);
  --cf-border-strong: hsl(232 33.6% 23%);
  --cf-text: hsl(232 14% 90%);
  --cf-text-muted: hsl(232 10% 60%);
  --cf-text-dim: hsl(232 9% 48%);
  --cf-accent: hsl(205 92% 58%);
  --cf-accent-soft: hsl(205 92% 58% / 0.13);
  --cf-accent-dim: hsl(205 92% 58% / 0.42);
  --cf-accent-ink: hsl(205 55.2% 9%);
  --cf-danger: hsl(355 82% 62%);
  --cf-danger-soft: hsl(355 82% 62% / 0.11);
  --cf-danger-dim: hsl(355 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(205 92% 58%);
  --cf-s2: hsl(247 75.44% 64%);
  --cf-s3: hsl(145 60.72% 68%);
  --cf-s4: hsl(5 50.6% 62%);
  --cf-s5: hsl(232 10% 48%);
  --cf-r: 8px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: 0 0 18px -3px hsl(205 92% 58% / 0.55);
  --cf-glow-sm: 0 0 8px 3px hsl(205 92% 58% / 0.303);
  --cf-glow-inset: inset 0 0 16px hsl(205 92% 58% / 0.275);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.02em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="amber"],
.cf-root[data-skin="amber"] {
  color-scheme: dark;
  --cf-bg: hsl(30 13.2% 4.2%);
  --cf-bg-panel: hsl(30 17.6% 6.8%);
  --cf-bg-elev: hsl(30 17.6% 9.5%);
  --cf-bg-sunken: hsl(30 12.1% 3%);
  --cf-border: hsl(30 30.8% 14%);
  --cf-border-strong: hsl(30 30.8% 23%);
  --cf-text: hsl(30 14% 90%);
  --cf-text-muted: hsl(30 10% 60%);
  --cf-text-dim: hsl(30 9% 48%);
  --cf-accent: hsl(38 92% 58%);
  --cf-accent-soft: hsl(38 92% 58% / 0.13);
  --cf-accent-dim: hsl(38 92% 58% / 0.42);
  --cf-accent-ink: hsl(38 55.2% 9%);
  --cf-danger: hsl(0 82% 62%);
  --cf-danger-soft: hsl(0 82% 62% / 0.11);
  --cf-danger-dim: hsl(0 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(38 92% 58%);
  --cf-s2: hsl(80 75.44% 64%);
  --cf-s3: hsl(338 60.72% 68%);
  --cf-s4: hsl(198 50.6% 62%);
  --cf-s5: hsl(30 10% 48%);
  --cf-r: 2px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  --cf-glow: 0 0 18px -3px hsl(38 92% 58% / 0.55);
  --cf-glow-sm: 0 0 8px 3px hsl(38 92% 58% / 0.303);
  --cf-glow-inset: inset 0 0 16px hsl(38 92% 58% / 0.275);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.12em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1.06;
  --cf-row-h: 38px;
  --cf-pad: 20px;
  --cf-gap: 18px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(30 20% 60% / 0.025) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(30 20% 60% / 0.025) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="mono"],
.cf-root[data-skin="mono"] {
  color-scheme: dark;
  --cf-bg: hsl(220 3% 4.2%);
  --cf-bg-panel: hsl(220 4% 6.8%);
  --cf-bg-elev: hsl(220 4% 9.5%);
  --cf-bg-sunken: hsl(220 2.75% 3%);
  --cf-border: hsl(220 7% 14%);
  --cf-border-strong: hsl(220 7% 23%);
  --cf-text: hsl(220 14% 90%);
  --cf-text-muted: hsl(220 10% 60%);
  --cf-text-dim: hsl(220 9% 48%);
  --cf-accent: hsl(210 10% 58%);
  --cf-accent-soft: hsl(210 10% 58% / 0.13);
  --cf-accent-dim: hsl(210 10% 58% / 0.42);
  --cf-accent-ink: hsl(210 6% 9%);
  --cf-danger: hsl(0 82% 62%);
  --cf-danger-soft: hsl(0 82% 62% / 0.11);
  --cf-danger-dim: hsl(0 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(210 10% 58%);
  --cf-s2: hsl(252 30% 64%);
  --cf-s3: hsl(150 28% 68%);
  --cf-s4: hsl(10 25% 62%);
  --cf-s5: hsl(220 10% 48%);
  --cf-r: 6px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.02em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 1.15px;
  --cf-lw-thin: 0.85px;
  --cf-linecap: butt;
  --cf-linejoin: round;
  --cf-scale: 1.06;
  --cf-row-h: 38px;
  --cf-pad: 20px;
  --cf-gap: 18px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="crimson"],
.cf-root[data-skin="crimson"] {
  color-scheme: dark;
  --cf-bg: hsl(350 9% 4.2%);
  --cf-bg-panel: hsl(350 12% 6.8%);
  --cf-bg-elev: hsl(350 12% 9.5%);
  --cf-bg-sunken: hsl(350 8.25% 3%);
  --cf-border: hsl(350 21% 14%);
  --cf-border-strong: hsl(350 21% 23%);
  --cf-text: hsl(350 14% 90%);
  --cf-text-muted: hsl(350 10% 60%);
  --cf-text-dim: hsl(350 9% 48%);
  --cf-accent: hsl(356 92% 58%);
  --cf-accent-soft: hsl(356 92% 58% / 0.13);
  --cf-accent-dim: hsl(356 92% 58% / 0.42);
  --cf-accent-ink: hsl(356 55.2% 9%);
  --cf-danger: hsl(28 82% 62%);
  --cf-danger-soft: hsl(28 82% 62% / 0.11);
  --cf-danger-dim: hsl(28 82% 62% / 0.4);
  --cf-warn: hsl(42 68% 56%);
  --cf-success: hsl(152 55% 50%);
  --cf-s1: hsl(356 92% 58%);
  --cf-s2: hsl(38 75.44% 64%);
  --cf-s3: hsl(296 60.72% 68%);
  --cf-s4: hsl(156 50.6% 62%);
  --cf-s5: hsl(350 10% 48%);
  --cf-r: 2px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --cf-glow: 0 0 18px -3px hsl(356 92% 58% / 0.55);
  --cf-glow-sm: 0 0 8px 3px hsl(356 92% 58% / 0.303);
  --cf-glow-inset: inset 0 0 16px hsl(356 92% 58% / 0.275);
  --cf-elev-shadow: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-scrim: hsl(0 0% 0% / 0.55);
  --cf-dur: 380ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.1em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(0 0% 0% / 0.55);
  --cf-elev-2: 0 6px 16px -10px hsl(0 0% 0% / 0.72);
  --cf-elev-3: 0 18px 44px -24px hsl(0 0% 0% / 0.9);
  --cf-elev-4: 0 28px 70px -30px hsl(0 0% 0% / 0.95);
  --cf-lw: 2.2px;
  --cf-lw-thin: 1.45px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 0.92;
  --cf-row-h: 28px;
  --cf-pad: 12px;
  --cf-gap: 10px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(350 20% 60% / 0.055) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(350 20% 60% / 0.055) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="daylight"],
.cf-root[data-skin="daylight"] {
  color-scheme: light;
  --cf-bg: hsl(214 3.3% 96.5%);
  --cf-bg-panel: hsl(214 4.4% 100%);
  --cf-bg-elev: hsl(214 4.4% 100%);
  --cf-bg-sunken: hsl(214 3.03% 93%);
  --cf-border: hsl(214 7.7% 88%);
  --cf-border-strong: hsl(214 7.7% 76%);
  --cf-text: hsl(214 8.8% 18%);
  --cf-text-muted: hsl(214 6.6% 42%);
  --cf-text-dim: hsl(214 5.5% 56%);
  --cf-accent: hsl(176 78% 38%);
  --cf-accent-soft: hsl(176 78% 38% / 0.1);
  --cf-accent-dim: hsl(176 78% 38% / 0.42);
  --cf-accent-ink: hsl(176 46.8% 99%);
  --cf-danger: hsl(350 74% 47%);
  --cf-danger-soft: hsl(350 74% 47% / 0.09);
  --cf-danger-dim: hsl(350 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(176 78% 38%);
  --cf-s2: hsl(218 63.96% 50%);
  --cf-s3: hsl(116 51.48% 54%);
  --cf-s4: hsl(336 42.9% 46%);
  --cf-s5: hsl(214 14% 56%);
  --cf-r: 2px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --cf-glow: 0 2px 15px 2px hsl(176 78% 38% / 0.14);
  --cf-glow-sm: 0 1px 5px 1.5px hsl(176 78% 38% / 0.26);
  --cf-glow-inset: inset 0 0 0 1px hsl(176 78% 38% / 0.18), inset 0 0 14px hsl(176 78% 38% / 0.09);
  --cf-elev-shadow: 0 12px 28px -14px hsl(214 11% 30% / 0.22), 0 2px 6px -2px hsl(214 11% 30% / 0.1);
  --cf-scrim: hsl(214 8.8% 22% / 0.26);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.1em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(214 11% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(214 11% 30% / 0.18), 0 1px 3px -1px hsl(214 11% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(214 11% 30% / 0.22), 0 2px 6px -2px hsl(214 11% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(214 11% 30% / 0.26), 0 4px 12px -4px hsl(214 11% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(214 11% 30% / 0.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(214 11% 30% / 0.05) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="frost"],
.cf-root[data-skin="frost"] {
  color-scheme: light;
  --cf-bg: hsl(232 2.64% 96.5%);
  --cf-bg-panel: hsl(232 3.52% 100%);
  --cf-bg-elev: hsl(232 3.52% 100%);
  --cf-bg-sunken: hsl(232 2.42% 93%);
  --cf-border: hsl(232 6.16% 88%);
  --cf-border-strong: hsl(232 6.16% 76%);
  --cf-text: hsl(232 8.8% 18%);
  --cf-text-muted: hsl(232 6.6% 42%);
  --cf-text-dim: hsl(232 5.5% 56%);
  --cf-accent: hsl(248 70% 38%);
  --cf-accent-soft: hsl(248 70% 38% / 0.1);
  --cf-accent-dim: hsl(248 70% 38% / 0.42);
  --cf-accent-ink: hsl(248 42% 99%);
  --cf-danger: hsl(352 74% 47%);
  --cf-danger-soft: hsl(352 74% 47% / 0.09);
  --cf-danger-dim: hsl(352 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(248 70% 38%);
  --cf-s2: hsl(290 57.4% 50%);
  --cf-s3: hsl(188 46.2% 54%);
  --cf-s4: hsl(48 38.5% 46%);
  --cf-s5: hsl(232 14% 56%);
  --cf-r: 10px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 12px 28px -14px hsl(232 8.8% 30% / 0.22), 0 2px 6px -2px hsl(232 8.8% 30% / 0.1);
  --cf-scrim: hsl(232 7.04% 22% / 0.26);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.01em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(232 8.8% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(232 8.8% 30% / 0.18), 0 1px 3px -1px hsl(232 8.8% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(232 8.8% 30% / 0.22), 0 2px 6px -2px hsl(232 8.8% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(232 8.8% 30% / 0.26), 0 4px 12px -4px hsl(232 8.8% 30% / 0.1);
  --cf-lw: 1.15px;
  --cf-lw-thin: 0.85px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 0.92;
  --cf-row-h: 28px;
  --cf-pad: 12px;
  --cf-gap: 10px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="sky"],
.cf-root[data-skin="sky"] {
  color-scheme: light;
  --cf-bg: hsl(216 1.98% 96.5%);
  --cf-bg-panel: hsl(216 2.64% 100%);
  --cf-bg-elev: hsl(216 2.64% 100%);
  --cf-bg-sunken: hsl(216 1.82% 93%);
  --cf-border: hsl(216 4.62% 88%);
  --cf-border-strong: hsl(216 4.62% 76%);
  --cf-text: hsl(216 8.8% 18%);
  --cf-text-muted: hsl(216 6.6% 42%);
  --cf-text-dim: hsl(216 5.5% 56%);
  --cf-accent: hsl(217 92% 38%);
  --cf-accent-soft: hsl(217 92% 38% / 0.1);
  --cf-accent-dim: hsl(217 92% 38% / 0.42);
  --cf-accent-ink: hsl(217 55.2% 99%);
  --cf-danger: hsl(356 74% 47%);
  --cf-danger-soft: hsl(356 74% 47% / 0.09);
  --cf-danger-dim: hsl(356 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(217 92% 38%);
  --cf-s2: hsl(259 75.44% 50%);
  --cf-s3: hsl(157 60.72% 54%);
  --cf-s4: hsl(17 50.6% 46%);
  --cf-s5: hsl(216 14% 56%);
  --cf-r: 6px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 12px 28px -14px hsl(216 6.6% 30% / 0.22), 0 2px 6px -2px hsl(216 6.6% 30% / 0.1);
  --cf-scrim: hsl(216 5.28% 22% / 0.26);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.02em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(216 6.6% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(216 6.6% 30% / 0.18), 0 1px 3px -1px hsl(216 6.6% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(216 6.6% 30% / 0.22), 0 2px 6px -2px hsl(216 6.6% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(216 6.6% 30% / 0.26), 0 4px 12px -4px hsl(216 6.6% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="slate"],
.cf-root[data-skin="slate"] {
  color-scheme: light;
  --cf-bg: hsl(222 1.32% 96.5%);
  --cf-bg-panel: hsl(222 1.76% 100%);
  --cf-bg-elev: hsl(222 1.76% 100%);
  --cf-bg-sunken: hsl(222 1.21% 93%);
  --cf-border: hsl(222 3.08% 88%);
  --cf-border-strong: hsl(222 3.08% 76%);
  --cf-text: hsl(222 8.8% 18%);
  --cf-text-muted: hsl(222 6.6% 42%);
  --cf-text-dim: hsl(222 5.5% 56%);
  --cf-accent: hsl(222 9% 38%);
  --cf-accent-soft: hsl(222 9% 38% / 0.1);
  --cf-accent-dim: hsl(222 9% 38% / 0.42);
  --cf-accent-ink: hsl(222 5.4% 99%);
  --cf-danger: hsl(0 74% 47%);
  --cf-danger-soft: hsl(0 74% 47% / 0.09);
  --cf-danger-dim: hsl(0 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(222 9% 38%);
  --cf-s2: hsl(264 30% 50%);
  --cf-s3: hsl(162 28% 54%);
  --cf-s4: hsl(22 25% 46%);
  --cf-s5: hsl(222 14% 56%);
  --cf-r: 10px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 12px 28px -14px hsl(222 4.4% 30% / 0.22), 0 2px 6px -2px hsl(222 4.4% 30% / 0.1);
  --cf-scrim: hsl(222 3.52% 22% / 0.26);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(222 4.4% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(222 4.4% 30% / 0.18), 0 1px 3px -1px hsl(222 4.4% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(222 4.4% 30% / 0.22), 0 2px 6px -2px hsl(222 4.4% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(222 4.4% 30% / 0.26), 0 4px 12px -4px hsl(222 4.4% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: butt;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="celadon"],
.cf-root[data-skin="celadon"] {
  color-scheme: light;
  --cf-bg: hsl(168 3.3% 96.5%);
  --cf-bg-panel: hsl(168 4.4% 100%);
  --cf-bg-elev: hsl(168 4.4% 100%);
  --cf-bg-sunken: hsl(168 3.03% 93%);
  --cf-border: hsl(168 7.7% 88%);
  --cf-border-strong: hsl(168 7.7% 76%);
  --cf-text: hsl(168 8.8% 18%);
  --cf-text-muted: hsl(168 6.6% 42%);
  --cf-text-dim: hsl(168 5.5% 56%);
  --cf-accent: hsl(172 50% 38%);
  --cf-accent-soft: hsl(172 50% 38% / 0.1);
  --cf-accent-dim: hsl(172 50% 38% / 0.42);
  --cf-accent-ink: hsl(172 30% 99%);
  --cf-danger: hsl(356 74% 47%);
  --cf-danger-soft: hsl(356 74% 47% / 0.09);
  --cf-danger-dim: hsl(356 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(172 50% 38%);
  --cf-s2: hsl(214 41% 50%);
  --cf-s3: hsl(112 33% 54%);
  --cf-s4: hsl(332 27.5% 46%);
  --cf-s5: hsl(168 14% 56%);
  --cf-r: 8px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 12px 28px -14px hsl(168 11% 30% / 0.22), 0 2px 6px -2px hsl(168 11% 30% / 0.1);
  --cf-scrim: hsl(168 8.8% 22% / 0.26);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.02em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(168 11% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(168 11% 30% / 0.18), 0 1px 3px -1px hsl(168 11% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(168 11% 30% / 0.22), 0 2px 6px -2px hsl(168 11% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(168 11% 30% / 0.26), 0 4px 12px -4px hsl(168 11% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1.06;
  --cf-row-h: 38px;
  --cf-pad: 20px;
  --cf-gap: 18px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="violet"],
.cf-root[data-skin="violet"] {
  color-scheme: light;
  --cf-bg: hsl(262 7.92% 96.5%);
  --cf-bg-panel: hsl(262 10.56% 100%);
  --cf-bg-elev: hsl(262 10.56% 100%);
  --cf-bg-sunken: hsl(262 7.26% 93%);
  --cf-border: hsl(262 18.48% 88%);
  --cf-border-strong: hsl(262 18.48% 76%);
  --cf-text: hsl(262 8.8% 18%);
  --cf-text-muted: hsl(262 6.6% 42%);
  --cf-text-dim: hsl(262 5.5% 56%);
  --cf-accent: hsl(262 50% 38%);
  --cf-accent-soft: hsl(262 50% 38% / 0.1);
  --cf-accent-dim: hsl(262 50% 38% / 0.42);
  --cf-accent-ink: hsl(262 30% 99%);
  --cf-danger: hsl(352 74% 47%);
  --cf-danger-soft: hsl(352 74% 47% / 0.09);
  --cf-danger-dim: hsl(352 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(262 50% 38%);
  --cf-s2: hsl(304 41% 50%);
  --cf-s3: hsl(202 33% 54%);
  --cf-s4: hsl(62 27.5% 46%);
  --cf-s5: hsl(262 14% 56%);
  --cf-r: 12px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 12px 28px -14px hsl(262 26.4% 30% / 0.22), 0 2px 6px -2px hsl(262 26.4% 30% / 0.1);
  --cf-scrim: hsl(262 21.12% 22% / 0.26);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.02em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(262 26.4% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(262 26.4% 30% / 0.18), 0 1px 3px -1px hsl(262 26.4% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(262 26.4% 30% / 0.22), 0 2px 6px -2px hsl(262 26.4% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(262 26.4% 30% / 0.26), 0 4px 12px -4px hsl(262 26.4% 30% / 0.1);
  --cf-lw: 2.2px;
  --cf-lw-thin: 1.45px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1.06;
  --cf-row-h: 38px;
  --cf-pad: 20px;
  --cf-gap: 18px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="paper"],
.cf-root[data-skin="paper"] {
  color-scheme: light;
  --cf-bg: hsl(218 1.98% 96.5%);
  --cf-bg-panel: hsl(218 2.64% 100%);
  --cf-bg-elev: hsl(218 2.64% 100%);
  --cf-bg-sunken: hsl(218 1.82% 93%);
  --cf-border: hsl(218 4.62% 88%);
  --cf-border-strong: hsl(218 4.62% 76%);
  --cf-text: hsl(218 8.8% 18%);
  --cf-text-muted: hsl(218 6.6% 42%);
  --cf-text-dim: hsl(218 5.5% 56%);
  --cf-accent: hsl(208 62% 38%);
  --cf-accent-soft: hsl(208 62% 38% / 0.1);
  --cf-accent-dim: hsl(208 62% 38% / 0.42);
  --cf-accent-ink: hsl(208 37.2% 99%);
  --cf-danger: hsl(354 74% 47%);
  --cf-danger-soft: hsl(354 74% 47% / 0.09);
  --cf-danger-dim: hsl(354 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(208 62% 38%);
  --cf-s2: hsl(250 50.84% 50%);
  --cf-s3: hsl(148 40.92% 54%);
  --cf-s4: hsl(8 34.1% 46%);
  --cf-s5: hsl(218 14% 56%);
  --cf-r: 4px;
  --cf-bw: 1px;
  --cf-clip: none;
  --cf-glow: none;
  --cf-glow-sm: none;
  --cf-glow-inset: none;
  --cf-elev-shadow: 0 12px 28px -14px hsl(218 6.6% 30% / 0.22), 0 2px 6px -2px hsl(218 6.6% 30% / 0.1);
  --cf-scrim: hsl(218 5.28% 22% / 0.26);
  --cf-dur: 120ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-font-data: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --cf-track: 0.02em;
  --cf-tt: none;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(218 6.6% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(218 6.6% 30% / 0.18), 0 1px 3px -1px hsl(218 6.6% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(218 6.6% 30% / 0.22), 0 2px 6px -2px hsl(218 6.6% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(218 6.6% 30% / 0.26), 0 4px 12px -4px hsl(218 6.6% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: butt;
  --cf-linejoin: round;
  --cf-scale: 1.06;
  --cf-row-h: 38px;
  --cf-pad: 20px;
  --cf-gap: 18px;
  --cf-grid: none;
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

:root[data-skin="sand"],
.cf-root[data-skin="sand"] {
  color-scheme: light;
  --cf-bg: hsl(34 4.62% 96.5%);
  --cf-bg-panel: hsl(34 6.16% 100%);
  --cf-bg-elev: hsl(34 6.16% 100%);
  --cf-bg-sunken: hsl(34 4.24% 93%);
  --cf-border: hsl(34 10.78% 88%);
  --cf-border-strong: hsl(34 10.78% 76%);
  --cf-text: hsl(34 8.8% 18%);
  --cf-text-muted: hsl(34 6.6% 42%);
  --cf-text-dim: hsl(34 5.5% 56%);
  --cf-accent: hsl(30 84% 38%);
  --cf-accent-soft: hsl(30 84% 38% / 0.1);
  --cf-accent-dim: hsl(30 84% 38% / 0.42);
  --cf-accent-ink: hsl(30 50.4% 99%);
  --cf-danger: hsl(4 74% 47%);
  --cf-danger-soft: hsl(4 74% 47% / 0.09);
  --cf-danger-dim: hsl(4 74% 47% / 0.4);
  --cf-warn: hsl(42 78% 42%);
  --cf-success: hsl(152 58% 36%);
  --cf-s1: hsl(30 84% 38%);
  --cf-s2: hsl(72 68.88% 50%);
  --cf-s3: hsl(330 55.44% 54%);
  --cf-s4: hsl(190 46.2% 46%);
  --cf-s5: hsl(34 14% 56%);
  --cf-r: 2px;
  --cf-bw: 1px;
  --cf-clip: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  --cf-glow: 0 2px 15px 2px hsl(30 84% 38% / 0.14);
  --cf-glow-sm: 0 1px 5px 1.5px hsl(30 84% 38% / 0.26);
  --cf-glow-inset: inset 0 0 0 1px hsl(30 84% 38% / 0.18), inset 0 0 14px hsl(30 84% 38% / 0.09);
  --cf-elev-shadow: 0 12px 28px -14px hsl(34 15.4% 30% / 0.22), 0 2px 6px -2px hsl(34 15.4% 30% / 0.1);
  --cf-scrim: hsl(34 12.32% 22% / 0.26);
  --cf-dur: 220ms;
  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-font-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cf-track: 0.12em;
  --cf-tt: uppercase;
  --cf-fs-glyph: 8px;
  --cf-fs-micro: 9px;
  --cf-fs-caption: 10px;
  --cf-fs-label: 11px;
  --cf-fs-body: 12px;
  --cf-fs-body-lg: 13px;
  --cf-fs-title: 14px;
  --cf-fs-title-lg: 16px;
  --cf-elev-1: 0 1px 2px -1px hsl(34 15.4% 30% / 0.14);
  --cf-elev-2: 0 6px 16px -10px hsl(34 15.4% 30% / 0.18), 0 1px 3px -1px hsl(34 15.4% 30% / 0.08);
  --cf-elev-3: 0 12px 28px -14px hsl(34 15.4% 30% / 0.22), 0 2px 6px -2px hsl(34 15.4% 30% / 0.1);
  --cf-elev-4: 0 26px 60px -22px hsl(34 15.4% 30% / 0.26), 0 4px 12px -4px hsl(34 15.4% 30% / 0.1);
  --cf-lw: 1.6px;
  --cf-lw-thin: 1.1px;
  --cf-linecap: round;
  --cf-linejoin: round;
  --cf-scale: 1;
  --cf-row-h: 32px;
  --cf-pad: 16px;
  --cf-gap: 14px;
  --cf-grid: repeating-linear-gradient(0deg, hsl(34 11% 30% / 0.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, hsl(34 11% 30% / 0.05) 0 1px, transparent 1px 40px);
  --cf-z-raised: 1;
  --cf-z-sticky: 100;
  --cf-z-dropdown: 200;
  --cf-z-overlay: 2000;
  --cf-z-toast: 3000;
}

/* 键盘焦点环：只在键盘导航时出现，鼠标点击不触发 */
.cf-root :where(a[href],
.cf-root button,
.cf-root summary,
.cf-root [role="button"],
.cf-root [role="tab"],
.cf-root [role="menuitem"],
.cf-root [role="option"],
.cf-root [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 2px;
}
/* 表单控件的焦点由各自的内描边 + 光晕表达，不再叠一圈外框 */
.cf-root :where(input,
.cf-root textarea,
.cf-root select):focus-visible { outline: none; }
/* Panel · 面板容器 */
.cf-root .cf-panel {
  position: relative;
  background: var(--cf-bg-panel);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
  padding: var(--cf-pad);
  transition: border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-panel:hover { border-color: var(--cf-border-strong); }
.cf-root .cf-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: var(--cf-gap);
}
.cf-root .cf-panel__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); font-weight: 500;
  letter-spacing: var(--cf-track); text-transform: var(--cf-tt);
  color: var(--cf-text-muted);
}
.cf-root .cf-panel__act {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .08em;
  color: var(--cf-accent); cursor: pointer; text-transform: var(--cf-tt);
}
.cf-root .cf-panel--bracket::before,
.cf-root .cf-panel--bracket::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border-color: var(--cf-accent); border-style: solid; pointer-events: none;
}
.cf-root .cf-panel--bracket::before {
  top: calc(var(--cf-bw) * -1); left: calc(var(--cf-bw) * -1);
  border-width: var(--cf-bw) 0 0 var(--cf-bw);
}
.cf-root .cf-panel--bracket::after {
  bottom: calc(var(--cf-bw) * -1); right: calc(var(--cf-bw) * -1);
  border-width: 0 var(--cf-bw) var(--cf-bw) 0;
}
.cf-root .cf-panel__body {
  font-family: var(--cf-font); font-size: var(--cf-fs-body); line-height: 1.7;
  color: var(--cf-text-muted);
}
/* Button · 按钮 */
.cf-root .cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(var(--cf-row-h) + 4px); padding: 0 14px;
  font-family: var(--cf-font); font-size: var(--cf-fs-body);
  letter-spacing: .08em; text-transform: var(--cf-tt);
  color: var(--cf-text); background: transparent; cursor: pointer;
  border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  transition: background var(--cf-dur) var(--cf-ease),
              border-color var(--cf-dur) var(--cf-ease),
              color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-btn--primary {
  background: var(--cf-accent-soft);
  border-color: var(--cf-accent);
  color: var(--cf-accent);
  box-shadow: var(--cf-glow-inset);
}
.cf-root .cf-btn--primary:hover { background: var(--cf-accent); color: var(--cf-accent-ink); }
.cf-root .cf-btn--ghost:hover { border-color: var(--cf-accent); color: var(--cf-accent); }
.cf-root .cf-btn--danger {
  background: var(--cf-danger-soft);
  border-color: var(--cf-danger-dim);
  color: var(--cf-danger);
}
.cf-root .cf-btn--danger:hover { background: var(--cf-danger); color: var(--cf-bg); }
/* disabled 必须连同 hover 一起按住：:hover 的底色规则仍会命中 disabled 元素，
   而这里的浅灰字会和 accent 底叠在一起——浅底浅字，谁也看不清谁 */
.cf-root .cf-btn:disabled,
.cf-root .cf-btn:disabled:hover {
  color: var(--cf-text-dim);
  border-color: var(--cf-border);
  background: transparent;
  box-shadow: none;
  cursor: not-allowed;
}
.cf-root .cf-btn--primary:disabled,
.cf-root .cf-btn--primary:disabled:hover {
  background: var(--cf-accent-soft);
  border-color: var(--cf-accent-dim);
  color: var(--cf-accent);
  box-shadow: none;
}
.cf-root .cf-btn--danger:disabled,
.cf-root .cf-btn--danger:disabled:hover {
  background: var(--cf-danger-soft);
  border-color: var(--cf-border);
  color: var(--cf-text-dim);
  box-shadow: none;
}
.cf-root .cf-btn__dot { width: 5px; height: 5px; background: currentColor; display: inline-block; }
/* StatCard · 指标卡 */
.cf-root .cf-stat {
  position: relative; padding: var(--cf-pad);
  background: var(--cf-bg-panel);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
}
.cf-root .cf-stat__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-stat__row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.cf-root .cf-stat__value {
  font-family: var(--cf-font-data); font-weight: 500;
  font-size: calc(26px * var(--cf-scale));
  letter-spacing: -.02em; line-height: 1.1; color: var(--cf-text);
}
.cf-root .cf-stat__unit { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-stat__delta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-accent); }
.cf-root .cf-stat__delta.is-down { color: var(--cf-danger); }
.cf-root .cf-stat__spark { display: block; width: 100%; height: 18px; margin-top: 10px; color: var(--cf-accent); }
.cf-root .cf-stat__spark polyline,
.cf-root .cf-stat__spark path { fill: none; stroke-width: var(--cf-lw-thin, 1.1px); stroke-linecap: var(--cf-linecap, round); stroke-linejoin: var(--cf-linejoin, round); }
.cf-root .cf-stat--alert { border-color: var(--cf-danger-dim); background: var(--cf-danger-soft); }
.cf-root .cf-stat--alert .cf-stat__label,
.cf-root .cf-stat--alert .cf-stat__delta { color: var(--cf-danger); }
/* DataTable · 数据表 */
.cf-root .cf-table { width: 100%; border-collapse: collapse; font-family: var(--cf-font-data); font-size: var(--cf-fs-body); }
.cf-root .cf-table th {
  height: calc(var(--cf-row-h) - 4px); padding: 0 10px; text-align: left; white-space: nowrap;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); font-weight: 500;
  letter-spacing: .12em; text-transform: var(--cf-tt); color: var(--cf-text-muted);
  border-bottom: var(--cf-bw) solid var(--cf-border-strong);
}
.cf-root .cf-table td {
  height: var(--cf-row-h); padding: 0 10px; color: var(--cf-text);
  border-bottom: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-table tbody tr { transition: background var(--cf-dur) var(--cf-ease); }
.cf-root .cf-table tbody tr:hover { background: var(--cf-accent-soft); box-shadow: inset 2px 0 0 var(--cf-accent); }
.cf-root .cf-table .is-mono { color: var(--cf-text-muted); }
.cf-root .cf-table .is-accent { color: var(--cf-accent); }
.cf-root .cf-table .is-danger { color: var(--cf-danger); }
.cf-root .cf-table .is-err { color: var(--cf-danger); font-family: var(--cf-font-data); }
/* FrozenTable · 冻结列宽表 */
.cf-root .cf-tablewrap {
  position: relative; overflow: auto; max-width: 100%;
  background: var(--cf-bg-panel);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
  scrollbar-width: thin;
}
.cf-root .cf-tablewrap--h { max-height: var(--cf-table-h, 300px); }
.cf-root .cf-tablebar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-tablebar__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); font-weight: 500;
  letter-spacing: var(--cf-track); text-transform: var(--cf-tt);
  color: var(--cf-text-muted);
}
.cf-root .cf-tablebar__sep { flex: 1 1 auto; }
.cf-root .cf-tablebar__count {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}
/* collapse 模式下边框由 table 统一绘制，sticky 吸顶/吸附时边框会留在原地——
   冻结表必须 separate，边框随单元格走 */
.cf-root .cf-table--frozen {
  border-collapse: separate;
  border-spacing: 0;
  min-width: var(--cf-table-min, 1080px);
}
.cf-root .cf-table--frozen th,
.cf-root .cf-table--frozen td { white-space: nowrap; }
.cf-root .cf-table--frozen th,
.cf-root .cf-table--frozen td {
  border-right: var(--cf-bw) solid color-mix(in srgb, var(--cf-border) 76%, transparent);
}
.cf-root .cf-table--frozen th:last-child,
.cf-root .cf-table--frozen td:last-child { border-right: none; }
.cf-root .cf-table--frozen thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--cf-bg-elev);
}
.cf-root .cf-table--frozen .is-frozen { position: sticky; left: 0; z-index: 2; background: var(--cf-bg-panel); }
.cf-root .cf-table--frozen .is-frozen-2 { left: var(--cf-fz2, 44px); }
.cf-root .cf-table--frozen .is-frozen-3 { left: var(--cf-fz3, 200px); }
/* 尾部操作列右吸附：滚到右侧时「能对这一行做什么」始终在手边 */
.cf-root .cf-table--frozen .is-frozen-r { position: sticky; right: 0; z-index: 2; background: var(--cf-bg-panel); }
.cf-root .cf-table--frozen thead .is-frozen,
.cf-root .cf-table--frozen thead .is-frozen-r { position: sticky; z-index: 4; background: var(--cf-bg-elev); }
.cf-root .cf-table--frozen .is-frozen::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: var(--cf-border-strong);
}
.cf-root .cf-table--frozen .is-frozen-r::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: var(--cf-border-strong);
}
.cf-root .cf-table--frozen tbody tr:hover .is-frozen,
.cf-root .cf-table--frozen tbody tr:hover .is-frozen-r {
  background: color-mix(in srgb, var(--cf-accent) 8%, var(--cf-bg-panel));
}
.cf-root .cf-table--frozen tbody tr.is-sel .is-frozen,
.cf-root .cf-table--frozen tbody tr.is-sel .is-frozen-r {
  background: color-mix(in srgb, var(--cf-accent) 12%, var(--cf-bg-panel));
}
.cf-root .cf-table--frozen tbody tr.is-sel { background: color-mix(in srgb, var(--cf-accent) 9%, transparent); }
.cf-root .cf-table__pick { width: 34px; padding: 0 0 0 10px !important; }
.cf-root .cf-table__pick input {
  width: 12px; height: 12px; margin: 0; cursor: pointer;
  accent-color: var(--cf-accent); vertical-align: middle;
}
.cf-root .cf-table__sort {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
}
.cf-root .cf-table__sort::after {
  content: ""; width: 0; height: 0; opacity: .3;
  border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 4px solid currentColor;
  transition: opacity var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-table__sort.is-sorted { color: var(--cf-accent); }
.cf-root .cf-table__sort.is-sorted::after { opacity: 1; }
.cf-root .cf-table__sort.is-desc::after { transform: rotate(180deg); }
.cf-root .cf-table__act {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .04em;
  color: var(--cf-accent); cursor: pointer; white-space: nowrap;
}
.cf-root .cf-table__act.is-danger { color: var(--cf-danger); }
.cf-root .cf-table__act + .cf-table__act { margin-left: 10px; }
.cf-root .cf-tablefoot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 8px 10px;
  border-top: var(--cf-bw) solid var(--cf-border);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}
.cf-root .cf-tablefoot__sel { color: var(--cf-accent); }
/* Badge · 状态徽章 */
.cf-root .cf-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .08em;
  text-transform: var(--cf-tt); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); color: var(--cf-text-muted);
}
.cf-root .cf-badge__dot { width: 4px; height: 4px; background: currentColor; }
.cf-root .cf-badge--ok { color: var(--cf-accent); background: var(--cf-accent-soft); border-color: var(--cf-accent-dim); }
.cf-root .cf-badge--warn { color: var(--cf-warn); border-color: var(--cf-warn); }
.cf-root .cf-badge--danger { color: var(--cf-danger); background: var(--cf-danger-soft); border-color: var(--cf-danger-dim); }
/* Progress · 分段进度 */
.cf-root .cf-prog { display: flex; gap: 3px; height: 8px; width: 100%; }
.cf-root .cf-prog__seg {
  flex: 1; background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border);
  transition: background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-prog__seg.is-on { background: var(--cf-accent); border-color: var(--cf-accent); }
.cf-root .cf-prog__seg.is-warn { background: var(--cf-warn); border-color: var(--cf-warn); }
.cf-root .cf-prog__meta {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim);
}
/* LogStream · 日志流 */
.cf-root .cf-log {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); line-height: 1.9;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); padding: 10px 12px;
}
.cf-root .cf-log__row { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.cf-root .cf-log__t { color: var(--cf-text-dim); flex: none; }
.cf-root .cf-log__lv { flex: none; width: 34px; }
.cf-root .cf-log__msg { color: var(--cf-text-muted); overflow: hidden; text-overflow: ellipsis; }
.cf-root .cf-log__row:hover { background: var(--cf-accent-soft); }
.cf-root .cf-log .lv-err { color: var(--cf-danger); }
.cf-root .cf-log .lv-sys { color: var(--cf-accent); }
.cf-root .cf-log .lv-wrn { color: var(--cf-warn); }
.cf-root .cf-log .lv-inf { color: var(--cf-text-dim); }
.cf-root .cf-log__cursor { color: var(--cf-accent); }
/* KpiBar · KPI 条 */
.cf-root .cf-kpibar {
  display: flex; flex-wrap: wrap;
  background: var(--cf-bg-panel);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
}
.cf-root .cf-kpibar__item {
  flex: 1 1 0; min-width: 108px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  border-right: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-kpibar__item:last-child { border-right: none; }
.cf-root .cf-kpibar__l {
  font-family: var(--cf-font); font-size: var(--cf-fs-caption);
  letter-spacing: var(--cf-track); text-transform: var(--cf-tt);
  color: var(--cf-text-dim);
}
.cf-root .cf-kpibar__v {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-title);
  letter-spacing: -.01em; color: var(--cf-text); white-space: nowrap;
}
.cf-root .cf-kpibar__item.is-alert { background: var(--cf-danger-soft); }
.cf-root .cf-kpibar__item.is-alert .cf-kpibar__l,
.cf-root .cf-kpibar__item.is-alert .cf-kpibar__v { color: var(--cf-danger); }
/* Avatar · 头像 */
.cf-root .cf-avatar {
  --cf-av-size: 32px;
  width: var(--cf-av-size); height: var(--cf-av-size); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; position: relative;
  font-family: var(--cf-font-data); font-size: calc(var(--cf-av-size) * 0.36);
  letter-spacing: .04em; color: var(--cf-accent-ink);
  background: var(--cf-accent-dim);
  border: var(--cf-bw) solid var(--cf-border-strong);
  user-select: none; overflow: visible;
}
.cf-root .cf-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.cf-root .cf-avatar--sm { --cf-av-size: 24px; }
.cf-root .cf-avatar--lg { --cf-av-size: 40px; }
.cf-root .cf-avatar.is-dim { color: var(--cf-text-muted); background: var(--cf-bg-sunken); }
.cf-root .cf-avatar.is-danger { color: var(--cf-danger); background: var(--cf-danger-dim); }
.cf-root .cf-avatar__dot {
  position: absolute; right: -1px; bottom: -1px;
  width: calc(var(--cf-av-size) * 0.28); height: calc(var(--cf-av-size) * 0.28);
  border-radius: 50%; background: var(--cf-success);
  border: 2px solid var(--cf-bg-panel);
}
.cf-root .cf-avatar__dot.is-off { background: var(--cf-text-dim); }
.cf-root .cf-avatar__dot.is-away { background: var(--cf-warn); }
.cf-root .cf-avatars { display: inline-flex; --cf-av-size: 32px; }
.cf-root .cf-avatars .cf-avatar:not(:first-child) { margin-left: calc(var(--cf-av-size) * -0.28); }
.cf-root .cf-avatars .cf-avatar { border-color: var(--cf-bg-panel); }
.cf-root .cf-avatars__more {
  width: var(--cf-av-size); height: var(--cf-av-size); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cf-font-data); font-size: calc(var(--cf-av-size) * 0.3);
  color: var(--cf-text-muted); background: var(--cf-bg-sunken);
  border: var(--cf-bw) dashed var(--cf-border-strong);
  margin-left: calc(var(--cf-av-size) * -0.28); flex: none;
}
/* Tag · 标签 */
.cf-root .cf-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); letter-spacing: .04em;
  color: var(--cf-text-muted);
  background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
  white-space: nowrap; user-select: none;
  transition: border-color var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-tag:hover { border-color: var(--cf-border-strong); }
.cf-root .cf-tag__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-right: -3px;
  border: 0; padding: 0; border-radius: 50%;
  background: transparent; color: var(--cf-text-dim);
  font-size: var(--cf-fs-label); line-height: 1; cursor: pointer;
}
.cf-root .cf-tag__x:hover { color: var(--cf-danger); background: var(--cf-danger-soft); }
.cf-root .cf-tag.is-accent { color: var(--cf-accent); border-color: var(--cf-accent-dim); background: var(--cf-accent-soft); }
.cf-root .cf-tag.is-checked { color: var(--cf-accent-ink); background: var(--cf-accent); border-color: var(--cf-accent); }
.cf-root .cf-tag.is-danger { color: var(--cf-danger); border-color: var(--cf-danger-dim); background: var(--cf-danger-soft); }
.cf-root .cf-tag.is-checkable { cursor: pointer; }
.cf-root .cf-tag.is-checkable[aria-pressed='true'] { color: var(--cf-accent-ink); background: var(--cf-accent); border-color: var(--cf-accent); }
/* Divider · 分割线 */
.cf-root .cf-divider {
  border: 0; margin: var(--cf-gap) 0;
  height: var(--cf-bw); background: var(--cf-border);
}
.cf-root .cf-divider--dashed {
  background: none; border-top: var(--cf-bw) dashed var(--cf-border);
  border-left: 0; border-right: 0; border-bottom: 0; height: 0;
}
.cf-root .cf-divider--text {
  display: flex; align-items: center; gap: 12px;
  height: auto; background: none; border: 0;
  font-family: var(--cf-font); font-size: var(--cf-fs-label);
  letter-spacing: var(--cf-track); text-transform: var(--cf-tt);
  color: var(--cf-text-dim); white-space: nowrap;
}
.cf-root .cf-divider--text::before,
.cf-root .cf-divider--text::after {
  content: ''; height: var(--cf-bw); background: var(--cf-border); flex: 1;
}
.cf-root .cf-divider--v {
  display: inline-block; width: var(--cf-bw); height: 1.2em;
  margin: 0 var(--cf-gap); vertical-align: -0.25em;
}
/* Input · 输入框 */
.cf-root .cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-field__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-input {
  height: calc(var(--cf-row-h) + 4px); width: 100%; padding: 0 12px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
  background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  outline: none;
  transition: border-color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-input::placeholder { color: var(--cf-text-dim); }
.cf-root .cf-input:focus {
  border-color: var(--cf-accent);
  box-shadow: inset 0 0 0 1px var(--cf-accent-soft), var(--cf-glow-inset);
}
/* 前后缀与清除：把裸 input 包进 .cf-input-wrap，修饰类让位 padding */
.cf-root .cf-input-wrap { position: relative; display: flex; align-items: center; }
.cf-root .cf-input--ico { padding-left: 32px; }
.cf-root .cf-input--clear { padding-right: 30px; }
.cf-root .cf-input__ico {
  position: absolute; left: 10px; width: 14px; height: 14px;
  display: grid; place-items: center; pointer-events: none;
  color: var(--cf-text-dim);
}
.cf-root .cf-input__ico svg { width: 13px; height: 13px; }
.cf-root .cf-input__clear {
  position: absolute; right: 8px; width: 16px; height: 16px; padding: 0;
  display: none; place-items: center;
  border: 0; background: var(--cf-bg-panel); color: var(--cf-text-dim);
  border-radius: 50%; cursor: pointer; font-size: var(--cf-fs-caption); line-height: 1;
}
.cf-root .cf-input__clear:hover { color: var(--cf-text); }
.cf-root .cf-input-wrap.has-val .cf-input__clear { display: grid; }
.cf-root .cf-field__hint { font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
/* Segmented · 分段控制器 */
.cf-root .cf-seg {
  display: inline-flex; gap: 2px; padding: 2px; max-width: 100%;
  background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
}
.cf-root .cf-seg__opt {
  height: calc(var(--cf-row-h) - 2px); padding: 0 14px;
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); letter-spacing: .04em;
  color: var(--cf-text-muted);
  border-radius: calc(var(--cf-r) - 2px);
  transition: color var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-seg__opt:hover { color: var(--cf-text); }
.cf-root .cf-seg__opt.is-on {
  color: var(--cf-accent); background: var(--cf-accent-soft);
  box-shadow: inset 0 0 0 var(--cf-bw) var(--cf-accent-dim), var(--cf-glow-inset);
}
.cf-root .cf-seg__opt:disabled { color: var(--cf-text-dim); cursor: not-allowed; }
/* Switch · 开关 */
.cf-root .cf-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cf-root .cf-switch-row__label { font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-switch-row__desc { font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim); margin-top: 2px; }
.cf-root .cf-switch {
  position: relative; flex: none; width: 38px; height: 18px; padding: 0; cursor: pointer;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r);
  transition: background var(--cf-dur) var(--cf-ease), border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-switch__knob {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 10px;
  background: var(--cf-text-dim);
  transition: transform var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-switch.is-on { background: var(--cf-accent-soft); border-color: var(--cf-accent); }
.cf-root .cf-switch.is-on .cf-switch__knob { transform: translateX(18px); background: var(--cf-accent); box-shadow: var(--cf-glow-sm); }
/* Slider · 滑块 */
.cf-root .cf-slider { width: 100%; }
.cf-root .cf-slider__top {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-slider__val { font-family: var(--cf-font-data); color: var(--cf-accent); }
.cf-root .cf-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; background: transparent; cursor: pointer;
}
.cf-root .cf-range::-webkit-slider-runnable-track { height: 3px; background: var(--cf-border-strong); }
.cf-root .cf-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 9px; height: 14px; margin-top: -5.5px;
  background: var(--cf-accent); border: 0; border-radius: 1px;
  transition: box-shadow var(--cf-dur) var(--cf-ease);
}
/* 值类控件的发光绑「交互中」而非常亮：静态常亮发光即装饰，违反项目自己的状态语义。
   拖动 = :active，悬停 = :hover，两者用同档 glow-sm（9×14 正是它的标定尺寸）。 */
.cf-root .cf-range:hover::-webkit-slider-thumb,
.cf-root .cf-range:active::-webkit-slider-thumb { box-shadow: var(--cf-glow-sm); }
.cf-root .cf-slider__ticks { display: flex; justify-content: space-between; margin-top: 4px; }
.cf-root .cf-slider__ticks span { width: 1px; height: 3px; background: var(--cf-border); }
/* Select · 下拉选择 */
.cf-root .cf-select { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-select__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-select__box {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--cf-row-h) + 4px); padding: 0 12px;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-accent);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
  cursor: pointer; box-shadow: var(--cf-glow-inset);
}
.cf-root .cf-select__caret { color: var(--cf-accent); font-size: var(--cf-fs-caption); }
.cf-root .cf-select__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--cf-z-dropdown);
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); overflow: hidden;
}
.cf-root .cf-select__opt {
  padding: 0 12px; height: var(--cf-row-h); display: flex; align-items: center;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
  cursor: pointer;
}
.cf-root .cf-select__opt:hover { background: var(--cf-accent-soft); color: var(--cf-text); }
.cf-root .cf-select__opt.is-on { color: var(--cf-accent); box-shadow: inset 2px 0 0 var(--cf-accent); }
/* FormItem · 表单项 */
.cf-root .cf-form-item { display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-form-item__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-form-item__label .req { color: var(--cf-danger); margin-left: 2px; }
.cf-root .cf-form-item__hint { font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-form-item__error {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-danger);
}
.cf-root .cf-form-item__error::before { content: '!'; flex: none; width: 12px; height: 12px; display: grid; place-items: center;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-micro); color: var(--cf-danger);
  border: var(--cf-bw) solid var(--cf-danger-dim); border-radius: 50%; }
/* 错误态传染给常见控件：边框与内发光转危险色 */
.cf-root .cf-form-item.is-error .cf-input,
.cf-root .cf-form-item.is-error .cf-select__box,
.cf-root .cf-form-item.is-error .cf-textarea {
  border-color: var(--cf-danger);
  box-shadow: inset 0 0 0 1px var(--cf-danger-soft);
}
.cf-root .cf-form-item.is-error .cf-input:focus { box-shadow: inset 0 0 0 1px var(--cf-danger-soft); }
/* 横排变体：label 定宽，控件区弹性伸展 */
.cf-root .cf-form-item--horizontal { flex-direction: row; align-items: flex-start; gap: 14px; }
.cf-root .cf-form-item--horizontal > .cf-form-item__label { flex: none; width: 108px; padding-top: 9px; }
.cf-root .cf-form-item--horizontal > .cf-form-item__ctrl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Textarea · 文本域 */
.cf-root .cf-textarea {
  width: 100%; min-height: 88px; padding: 9px 12px; resize: vertical;
  font-family: var(--cf-font); font-size: var(--cf-fs-body); line-height: 1.7; color: var(--cf-text);
  background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  outline: none;
  transition: border-color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-textarea::placeholder { color: var(--cf-text-dim); }
.cf-root .cf-textarea:focus {
  border-color: var(--cf-accent);
  box-shadow: inset 0 0 0 1px var(--cf-accent-soft), var(--cf-glow-inset);
}
.cf-root .cf-field__count {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); text-align: right;
  color: var(--cf-text-dim);
}
.cf-root .cf-field__count.is-over { color: var(--cf-danger); }
/* InputNumber · 数字输入 */
.cf-root .cf-num { display: inline-flex; align-items: stretch; }
.cf-root .cf-num__btn {
  width: 30px; cursor: pointer; padding: 0;
  background: var(--cf-bg-sunken); color: var(--cf-text-muted);
  border: var(--cf-bw) solid var(--cf-border);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-title); line-height: 1;
}
.cf-root .cf-num__btn:hover:not(:disabled) { color: var(--cf-accent); border-color: var(--cf-accent-dim); }
.cf-root .cf-num__btn:disabled { color: var(--cf-text-dim); cursor: not-allowed; opacity: .6; }
.cf-root .cf-num__btn:first-child { border-radius: var(--cf-r) 0 0 var(--cf-r); }
.cf-root .cf-num__btn:last-child { border-radius: 0 var(--cf-r) var(--cf-r) 0; }
.cf-root .cf-num__in {
  width: 76px; text-align: center; padding: 0 8px; height: calc(var(--cf-row-h) + 4px);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-left: 0; border-right: 0; outline: none; -moz-appearance: textfield;
}
.cf-root .cf-num__in::-webkit-outer-spin-button,
.cf-root .cf-num__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf-root .cf-num__in:focus { border-color: var(--cf-accent); box-shadow: inset 0 0 0 1px var(--cf-accent-soft); }
/* Rate · 评分 */
.cf-root .cf-rate { display: inline-flex; gap: 2px; }
.cf-root .cf-rate__star {
  padding: 0 2px; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--cf-border-strong);
  transition: color var(--cf-dur) var(--cf-ease), transform var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-rate__star:hover { transform: scale(1.15); }
.cf-root .cf-rate__star.is-on { color: var(--cf-accent); text-shadow: 0 0 6px var(--cf-accent-dim); }
.cf-root .cf-rate__star:disabled { cursor: default; }
.cf-root .cf-rate__star.is-half { background: linear-gradient(90deg, var(--cf-accent) 50%, var(--cf-border-strong) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cf-root .cf-rate__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); margin-left: 10px; vertical-align: middle; }
/* Combobox · 关联搜索下拉 */
.cf-root .cf-cbx { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-cbx__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-cbx__box {
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--cf-row-h) + 4px); padding: 0 10px;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  transition: border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-cbx__box:focus-within { border-color: var(--cf-accent); box-shadow: var(--cf-glow-inset); }
.cf-root .cf-cbx__icon { flex: none; width: 9px; height: 9px; border: var(--cf-bw) solid var(--cf-text-dim); border-radius: 50%; }
.cf-root .cf-cbx__box.is-open .cf-cbx__icon { border-color: var(--cf-accent); }
.cf-root .cf-cbx__input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
  background: transparent; border: 0; outline: none;
}
.cf-root .cf-cbx__input::placeholder { color: var(--cf-text-dim); }
.cf-root .cf-cbx__spin {
  flex: none; width: 9px; height: 9px; border: var(--cf-bw) solid var(--cf-border-strong);
  border-top-color: var(--cf-accent); border-radius: 50%;
  animation: cf-spin 640ms linear infinite;
}

@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf-root .cf-cbx__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--cf-z-dropdown);
  max-height: 208px; overflow: auto;
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); box-shadow: var(--cf-elev-2);
}
.cf-root .cf-cbx__group {
  padding: 6px 10px 4px; font-family: var(--cf-font); font-size: var(--cf-fs-caption);
  letter-spacing: .1em; text-transform: var(--cf-tt); color: var(--cf-text-dim);
}
.cf-root .cf-cbx__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: var(--cf-row-h); padding: 0 10px; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
}
.cf-root .cf-cbx__opt.is-hi { background: var(--cf-accent-soft); color: var(--cf-text); box-shadow: inset 2px 0 0 var(--cf-accent); }
.cf-root .cf-cbx__opt.is-on { color: var(--cf-accent); }
.cf-root .cf-cbx__opt small { font-size: var(--cf-fs-caption); color: var(--cf-text-dim); }
.cf-root .cf-cbx__empty {
  padding: 18px 10px; text-align: center;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim);
}
.cf-root .cf-cbx__hint { font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
/* MultiSelect · 多选下拉 */
.cf-root .cf-multi { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-multi__label {
  display: flex; justify-content: space-between;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-multi__label b { font-family: var(--cf-font-data); font-weight: 400; color: var(--cf-accent); }
.cf-root .cf-multi__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: calc(var(--cf-row-h) + 4px); padding: 4px 8px;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); cursor: text;
  transition: border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-multi__box.is-open { border-color: var(--cf-accent); box-shadow: var(--cf-glow-inset); }
.cf-root .cf-multi__chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 4px 0 6px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-accent);
  background: var(--cf-accent-soft); border: var(--cf-bw) solid var(--cf-accent-dim);
  border-radius: var(--cf-r);
}
.cf-root .cf-multi__x { cursor: pointer; color: var(--cf-accent-dim); line-height: 1; padding: 0 2px; }
.cf-root .cf-multi__x:hover { color: var(--cf-accent); }
.cf-root .cf-multi__input {
  flex: 1; min-width: 60px; height: 20px; border: 0; outline: none; padding: 0 2px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text); background: transparent;
}
.cf-root .cf-multi__input::placeholder { color: var(--cf-text-dim); }
.cf-root .cf-multi__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--cf-z-dropdown);
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); box-shadow: var(--cf-elev-2); overflow: hidden;
}
.cf-root .cf-multi__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; height: 28px; border-bottom: var(--cf-bw) solid var(--cf-border);
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim);
}
.cf-root .cf-multi__bar span { cursor: pointer; }
.cf-root .cf-multi__bar span:hover { color: var(--cf-accent); }
.cf-root .cf-multi__opt {
  display: flex; align-items: center; gap: 8px;
  height: var(--cf-row-h); padding: 0 10px; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
}
.cf-root .cf-multi__opt:hover { background: var(--cf-accent-soft); }
.cf-root .cf-multi__opt.is-on { color: var(--cf-text); }
.cf-root .cf-multi__mark {
  flex: none; width: 11px; height: 11px; display: grid; place-items: center;
  border: var(--cf-bw) solid var(--cf-border-strong); border-radius: 0;
  font-size: var(--cf-fs-micro); line-height: 1; color: transparent;
}
.cf-root .cf-multi__opt.is-on .cf-multi__mark {
  background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-accent-ink);
}
/* Cascader · 级联选择 */
.cf-root .cf-casc { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-casc__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-casc__box {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: calc(var(--cf-row-h) + 4px); padding: 0 10px; cursor: pointer;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
}
.cf-root .cf-casc__box.is-open { border-color: var(--cf-accent); box-shadow: var(--cf-glow-inset); }
.cf-root .cf-casc__path {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
}
.cf-root .cf-casc__path i { color: var(--cf-text-dim); font-style: normal; }
.cf-root .cf-casc__path em { color: var(--cf-accent); font-style: normal; }
.cf-root .cf-casc__caret { color: var(--cf-text-dim); font-size: var(--cf-fs-micro); }
.cf-root .cf-casc__menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--cf-z-dropdown);
  display: flex; min-width: 100%;
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); box-shadow: var(--cf-elev-2); overflow: hidden;
}
.cf-root .cf-casc__col { min-width: 116px; padding: 4px 0; }
.cf-root .cf-casc__col + .cf-casc__col { border-left: var(--cf-bw) solid var(--cf-border); }
.cf-root .cf-casc__opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--cf-row-h); padding: 0 10px 0 12px; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
  white-space: nowrap;
}
.cf-root .cf-casc__opt:hover { background: var(--cf-accent-soft); color: var(--cf-text); }
.cf-root .cf-casc__opt.is-on { color: var(--cf-accent); box-shadow: inset 2px 0 0 var(--cf-accent); }
.cf-root .cf-casc__opt span { color: var(--cf-text-dim); font-size: var(--cf-fs-micro); }
.cf-root .cf-casc__opt.is-leaf.is-on span { color: var(--cf-accent); }
/* TreeSelect · 树形选择 */
.cf-root .cf-treesel { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-treesel__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-treesel__box {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--cf-row-h) + 4px); padding: 0 10px; cursor: pointer;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
}
.cf-root .cf-treesel__box.is-open { border-color: var(--cf-accent); box-shadow: var(--cf-glow-inset); }
.cf-root .cf-treesel__val { font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-treesel__caret { color: var(--cf-text-dim); font-size: var(--cf-fs-micro); }
.cf-root .cf-treesel__menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--cf-z-dropdown);
  max-height: 220px; overflow: auto; padding: 4px 0;
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); box-shadow: var(--cf-elev-2);
}
.cf-root .cf-tree__node {
  display: flex; align-items: center; gap: 6px;
  height: var(--cf-row-h); padding-right: 10px; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
  white-space: nowrap;
}
.cf-root .cf-tree__node:hover { background: var(--cf-accent-soft); }
.cf-root .cf-tree__node.is-on { color: var(--cf-accent); }
.cf-root .cf-tree__node.is-on .cf-tree__ico { border-color: var(--cf-accent); background: var(--cf-accent-soft); }
.cf-root .cf-tree__twist {
  flex: none; width: 14px; text-align: center; font-size: var(--cf-fs-glyph);
  color: var(--cf-text-dim);
}
.cf-root .cf-tree__ico {
  flex: none; width: 8px; height: 8px;
  border: var(--cf-bw) solid var(--cf-border-strong);
  transition: all var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-tree__node.is-leaf .cf-tree__ico { border-radius: 50%; }
/* DateRange · 日期区间 */
.cf-root .cf-date { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-date__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-date__box {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--cf-row-h) + 4px); padding: 0 10px; cursor: pointer;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
}
.cf-root .cf-date__box.is-open { border-color: var(--cf-accent); box-shadow: var(--cf-glow-inset); }
.cf-root .cf-date__val { font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-date__val i { font-style: normal; color: var(--cf-text-dim); padding: 0 4px; }
.cf-root .cf-date__caret { color: var(--cf-text-dim); font-size: var(--cf-fs-micro); }
.cf-root .cf-date__menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--cf-z-dropdown); display: flex;
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); box-shadow: var(--cf-elev-2); overflow: hidden;
}
.cf-root .cf-date__presets {
  width: 96px; padding: 4px 0; border-right: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-date__preset {
  height: 26px; padding: 0 10px; cursor: pointer;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
  display: flex; align-items: center;
}
.cf-root .cf-date__preset:hover { background: var(--cf-accent-soft); color: var(--cf-accent); }
.cf-root .cf-date__cal { width: 212px; padding: 8px 10px 10px; }
.cf-root .cf-date__mhead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text);
}
.cf-root .cf-date__mhead span { cursor: pointer; color: var(--cf-text-dim); }
.cf-root .cf-date__mhead span:hover { color: var(--cf-accent); }
.cf-root .cf-date__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cf-root .cf-date__dow {
  text-align: center; font-family: var(--cf-font); font-size: var(--cf-fs-micro);
  color: var(--cf-text-dim); padding: 2px 0 4px;
}
.cf-root .cf-date__d {
  height: 24px; display: grid; place-items: center; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
  border: var(--cf-bw) solid transparent;
}
.cf-root .cf-date__d:hover { border-color: var(--cf-border-strong); color: var(--cf-text); }
.cf-root .cf-date__d.is-out { color: var(--cf-text-dim); opacity: .45; cursor: default; }
.cf-root .cf-date__d.is-in { background: var(--cf-accent-soft); color: var(--cf-text); }
.cf-root .cf-date__d.is-edge { background: var(--cf-accent); color: var(--cf-accent-ink); }
.cf-root .cf-date__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 0; margin-top: 6px; border-top: var(--cf-bw) solid var(--cf-border);
  font-family: var(--cf-font); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}
/* Checkbox · Radio · 复选 / 单选 */
.cf-root .cf-choice { display: flex; flex-direction: column; gap: 10px; }
.cf-root .cf-choice__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cf-root .cf-choice__item {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; cursor: pointer;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); transition: all var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-choice__item:hover { border-color: var(--cf-border-strong); }
.cf-root .cf-choice__item.is-on { border-color: var(--cf-accent); background: var(--cf-accent-soft); }
.cf-root .cf-choice__item.is-off { opacity: .45; cursor: not-allowed; }
.cf-root .cf-choice__mark {
  flex: none; width: 12px; height: 12px; margin-top: 1px;
  display: grid; place-items: center;
  border: var(--cf-bw) solid var(--cf-border-strong);
  font-size: var(--cf-fs-micro); line-height: 1; color: transparent;
  transition: all var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-choice__item.is-on .cf-choice__mark {
  background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-accent-ink);
}
.cf-root .cf-choice__mark.is-radio { border-radius: 50%; }
.cf-root .cf-choice__mark.is-radio::after {
  content: ""; width: 5px; height: 5px; background: transparent; border-radius: 50%;
}
.cf-root .cf-choice__item.is-on .cf-choice__mark.is-radio::after { background: var(--cf-accent-ink); }
.cf-root .cf-choice__name { font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-choice__note { font-family: var(--cf-font); font-size: var(--cf-fs-caption); color: var(--cf-text-dim); margin-top: 2px; }
/* TagInput · 标签录入 */
.cf-root .cf-tagin { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-tagin__label {
  display: flex; justify-content: space-between;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-tagin__label b { font-family: var(--cf-font-data); font-weight: 400; color: var(--cf-text-dim); }
.cf-root .cf-tagin__box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: calc(var(--cf-row-h) + 4px); padding: 4px 8px;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r); cursor: text;
  transition: border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-tagin__box:focus-within { border-color: var(--cf-accent); box-shadow: var(--cf-glow-inset); }
.cf-root .cf-tagin__box.is-err { border-color: var(--cf-danger); }
.cf-root .cf-tagin__chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 4px 0 6px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text);
  background: var(--cf-bg-panel); border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r);
}
.cf-root .cf-tagin__chip::before { content: "#"; color: var(--cf-text-dim); }
.cf-root .cf-tagin__x { cursor: pointer; color: var(--cf-text-dim); padding: 0 2px; line-height: 1; }
.cf-root .cf-tagin__x:hover { color: var(--cf-danger); }
.cf-root .cf-tagin__input {
  flex: 1; min-width: 70px; height: 20px; padding: 0 2px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
  background: transparent; border: 0; outline: none;
}
.cf-root .cf-tagin__input::placeholder { color: var(--cf-text-dim); }
.cf-root .cf-tagin__msg { font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-tagin__msg.is-err { color: var(--cf-danger); }
/* Upload · 拖拽上传 */
.cf-root .cf-upload { display: flex; flex-direction: column; gap: 8px; }
.cf-root .cf-upload__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px; cursor: pointer; text-align: center;
  background: var(--cf-bg-sunken);
  border: var(--cf-bw) dashed var(--cf-border-strong);
  border-radius: var(--cf-r);
  transition: all var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-upload__drop:hover,
.cf-root .cf-upload__drop.is-over {
  border-color: var(--cf-accent); background: var(--cf-accent-soft);
}
.cf-root .cf-upload__ico {
  width: 18px; height: 18px; border: var(--cf-bw) solid var(--cf-text-dim);
  position: relative;
}
.cf-root .cf-upload__ico::before {
  content: ""; position: absolute; left: 50%; top: 3px; width: var(--cf-bw); height: 8px;
  background: var(--cf-text-dim); transform: translateX(-50%);
}
.cf-root .cf-upload__ico::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 7px; height: var(--cf-bw);
  background: var(--cf-text-dim); transform: translateX(-50%);
}
.cf-root .cf-upload__t { font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-upload__s { font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim); }
.cf-root .cf-upload__file {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center;
  padding: 6px 8px; background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r);
}
.cf-root .cf-upload__name { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text); }
.cf-root .cf-upload__size { font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim); }
.cf-root .cf-upload__del { cursor: pointer; color: var(--cf-text-dim); font-size: var(--cf-fs-body); }
.cf-root .cf-upload__del:hover { color: var(--cf-danger); }
.cf-root .cf-upload__track {
  grid-column: 1 / -1; height: 2px; background: var(--cf-border);
}
.cf-root .cf-upload__bar { height: 100%; background: var(--cf-accent); transition: width 200ms linear; }
.cf-root .cf-upload__bar.is-done { background: var(--cf-success); }
.cf-root .cf-upload__bar.is-err { background: var(--cf-danger); }
/* Transfer · 穿梭框 */
.cf-root .cf-transfer { display: inline-flex; align-items: center; gap: 10px; }
.cf-root .cf-transfer__panel {
  width: 200px; background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r);
  overflow: hidden;
}
.cf-root .cf-transfer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-bottom: var(--cf-bw) solid var(--cf-border);
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-transfer__head b { font-family: var(--cf-font-data); color: var(--cf-accent); font-weight: 500; }
.cf-root .cf-transfer__list { max-height: 168px; overflow: auto; margin: 0; padding: 4px 0; list-style: none; }
.cf-root .cf-transfer__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px; height: 28px; cursor: pointer;
  font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text);
}
.cf-root .cf-transfer__opt:hover { background: var(--cf-accent-soft); }
.cf-root .cf-transfer__opt input { accent-color: var(--cf-accent); }
.cf-root .cf-transfer__mid { display: flex; flex-direction: column; gap: 6px; }
.cf-root .cf-transfer__act {
  width: 30px; height: 26px; padding: 0; cursor: pointer;
  background: var(--cf-bg-sunken); color: var(--cf-text-muted);
  border: var(--cf-bw) solid var(--cf-border-strong); border-radius: var(--cf-r);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); line-height: 1;
  transition: color var(--cf-dur) var(--cf-ease), border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-transfer__act:hover:not(:disabled) { color: var(--cf-accent); border-color: var(--cf-accent); }
.cf-root .cf-transfer__act:disabled { color: var(--cf-text-dim); cursor: not-allowed; opacity: .6; }
.cf-root .cf-transfer__empty {
  padding: 20px 10px; text-align: center;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim);
}
/* Descriptions · 详情键值 */
.cf-root .cf-desc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.cf-root .cf-desc__item {
  padding: 8px 10px; border-bottom: var(--cf-bw) solid var(--cf-border);
  min-width: 0;
}
.cf-root .cf-desc__item:nth-child(odd) { border-right: var(--cf-bw) solid var(--cf-border); }
.cf-root .cf-desc__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-caption); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-dim);
}
.cf-root .cf-desc__value {
  margin-top: 3px; font-family: var(--cf-font-data); font-size: var(--cf-fs-body);
  color: var(--cf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-root .cf-desc__value.is-accent { color: var(--cf-accent); }
.cf-root .cf-desc__value.is-dim { color: var(--cf-text-dim); }
.cf-root .cf-desc__value.is-dangr { color: var(--cf-danger); }
.cf-root .cf-desc__full { grid-column: 1 / -1; border-right: 0; }
.cf-root .cf-desc__full .cf-desc__value { white-space: normal; }
/* Timeline · 时间线 */
.cf-root .cf-timeline { display: flex; flex-direction: column; }
.cf-root .cf-tl {
  position: relative; display: grid; grid-template-columns: 14px 1fr;
  gap: 0 10px; padding-bottom: 14px;
}
.cf-root .cf-tl:last-child { padding-bottom: 0; }
.cf-root .cf-tl::before {
  content: ""; position: absolute; left: 4px; top: 12px; bottom: 0;
  width: var(--cf-bw); background: var(--cf-border);
}
.cf-root .cf-tl:last-child::before { display: none; }
.cf-root .cf-tl__dot {
  position: relative; z-index: var(--cf-z-raised); width: 9px; height: 9px; margin-top: 3px;
  background: var(--cf-bg-panel); border: var(--cf-bw) solid var(--cf-border-strong);
}
.cf-root .cf-tl.is-ok .cf-tl__dot { background: var(--cf-success); border-color: var(--cf-success); }
.cf-root .cf-tl.is-run .cf-tl__dot {
  background: var(--cf-accent); border-color: var(--cf-accent);
  box-shadow: var(--cf-glow-sm);
}
.cf-root .cf-tl.is-err .cf-tl__dot { background: var(--cf-danger); border-color: var(--cf-danger); }
.cf-root .cf-tl__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cf-root .cf-tl__title { font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-tl__time {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
  letter-spacing: .04em;
}
.cf-root .cf-tl__body {
  margin-top: 3px; font-family: var(--cf-font); font-size: var(--cf-fs-label);
  color: var(--cf-text-muted); line-height: 1.6;
}
.cf-root .cf-tl__tag {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); padding: 0 4px;
  border: var(--cf-bw) solid var(--cf-border-strong); border-radius: 1px;
  color: var(--cf-text-dim); text-transform: uppercase; letter-spacing: .06em;
}
.cf-root .cf-tl.is-err .cf-tl__tag { color: var(--cf-danger); border-color: var(--cf-danger-dim); }
/* Tree · 目录树 */
.cf-root .cf-tree { display: flex; flex-direction: column; }
.cf-root .cf-tree__row {
  display: flex; align-items: center; gap: 7px; height: var(--cf-row-h);
  padding: 0 8px; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
  border-left: 2px solid transparent;
}
.cf-root .cf-tree__row:hover { background: var(--cf-accent-soft); color: var(--cf-text); }
.cf-root .cf-tree__row.is-on {
  color: var(--cf-accent); background: var(--cf-accent-soft);
  border-left-color: var(--cf-accent);
}
.cf-root .cf-tree__tw { width: 12px; font-size: var(--cf-fs-glyph); color: var(--cf-text-dim); text-align: center; flex: none; }
.cf-root .cf-tree__box {
  flex: none; width: 11px; height: 11px; display: grid; place-items: center;
  border: var(--cf-bw) solid var(--cf-border-strong);
  font-size: var(--cf-fs-glyph); line-height: 1; color: transparent; position: relative;
}
.cf-root .cf-tree__row.is-checked .cf-tree__box {
  background: var(--cf-accent); border-color: var(--cf-accent); color: var(--cf-accent-ink);
}
.cf-root .cf-tree__row.is-half .cf-tree__box { border-color: var(--cf-accent); }
.cf-root .cf-tree__row.is-half .cf-tree__box::after {
  content: ""; width: 5px; height: 2px; background: var(--cf-accent);
}
.cf-root .cf-tree__ico {
  flex: none; width: 8px; height: 8px; border: var(--cf-bw) solid var(--cf-text-dim);
}
.cf-root .cf-tree__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-root .cf-tree__cnt { font-size: var(--cf-fs-caption); color: var(--cf-text-dim); }
/* Empty · 空态 */
.cf-root .cf-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 22px 16px; text-align: center;
}
.cf-root .cf-empty__ico {
  position: relative; width: 34px; height: 26px; margin-bottom: 8px;
  border: var(--cf-bw) solid var(--cf-border-strong);
}
.cf-root .cf-empty__ico::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: var(--cf-bw);
  background: var(--cf-border-strong);
}
.cf-root .cf-empty__ico::after {
  content: ""; position: absolute; left: 6px; right: 12px; top: 13px; height: var(--cf-bw);
  background: var(--cf-border);
}
.cf-root .cf-empty__t { font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text); }
.cf-root .cf-empty__s {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim);
  max-width: 260px; line-height: 1.6;
}
.cf-root .cf-empty__acts { display: flex; gap: 8px; margin-top: 10px; }
.cf-root .cf-empty__btn {
  height: 26px; padding: 0 10px; cursor: pointer;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .06em;
  color: var(--cf-text-muted); background: transparent;
  border: var(--cf-bw) solid var(--cf-border-strong); border-radius: var(--cf-r);
}
.cf-root .cf-empty__btn:hover { color: var(--cf-accent); border-color: var(--cf-accent); }
.cf-root .cf-empty__btn.is-primary {
  color: var(--cf-accent); background: var(--cf-accent-soft); border-color: var(--cf-accent-dim);
}
/* Collapse · 折叠面板 */
.cf-root .cf-collapse { border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r); }
.cf-root .cf-collapse__item + .cf-collapse__item { border-top: var(--cf-bw) solid var(--cf-border); }
.cf-root .cf-collapse__head {
  display: flex; align-items: center; gap: 8px; height: calc(var(--cf-row-h) + 6px);
  padding: 0 10px; cursor: pointer;
  font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
  letter-spacing: var(--cf-track); text-transform: var(--cf-tt);
}
.cf-root .cf-collapse__head:hover { color: var(--cf-text); background: var(--cf-accent-soft); }
.cf-root .cf-collapse__item.is-open .cf-collapse__head { color: var(--cf-text); }
.cf-root .cf-collapse__tw { font-size: var(--cf-fs-glyph); color: var(--cf-text-dim); width: 10px; }
.cf-root .cf-collapse__n {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
  border: var(--cf-bw) solid var(--cf-border); padding: 0 4px; border-radius: 1px;
}
.cf-root .cf-collapse__body {
  padding: 0 10px 10px 28px; font-family: var(--cf-font); font-size: var(--cf-fs-label);
  color: var(--cf-text-muted); line-height: 1.75;
}
.cf-root .cf-collapse__kv { display: flex; justify-content: space-between; border-bottom: var(--cf-bw) dotted var(--cf-border); padding: 3px 0; }
.cf-root .cf-collapse__kv b { font-family: var(--cf-font-data); font-weight: 400; color: var(--cf-text); }
/* Result · 结果页 */
.cf-root .cf-result { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; text-align: center; }
.cf-root .cf-result__mark {
  width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 8px;
  border: var(--cf-bw) solid var(--cf-success); color: var(--cf-success);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body-lg);
  box-shadow: var(--cf-glow);
}
.cf-root .cf-result.is-err .cf-result__mark { border-color: var(--cf-danger); color: var(--cf-danger); }
.cf-root .cf-result.is-run .cf-result__mark {
  border-color: var(--cf-accent); color: var(--cf-accent); border-style: dashed;
}
.cf-root .cf-result__t { font-family: var(--cf-font); font-size: var(--cf-fs-body-lg); color: var(--cf-text); letter-spacing: var(--cf-track); }
.cf-root .cf-result__s { font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-dim); line-height: 1.7; max-width: 300px; }
.cf-root .cf-result__meta {
  display: flex; gap: 14px; margin-top: 10px; padding-top: 8px;
  border-top: var(--cf-bw) solid var(--cf-border); flex-wrap: wrap; justify-content: center;
}
.cf-root .cf-result__cell { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cf-root .cf-result__k { font-family: var(--cf-font); font-size: var(--cf-fs-caption); color: var(--cf-text-dim); text-transform: var(--cf-tt); letter-spacing: .06em; }
.cf-root .cf-result__v { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text); }
.cf-root .cf-result__acts { display: flex; gap: 8px; margin-top: 12px; }
.cf-root .cf-result__btn {
  height: 26px; padding: 0 10px; cursor: pointer;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
  border: var(--cf-bw) solid var(--cf-border-strong); border-radius: var(--cf-r); background: transparent;
}
.cf-root .cf-result__btn.is-primary { color: var(--cf-accent); background: var(--cf-accent-soft); border-color: var(--cf-accent-dim); }
/* Gallery · 图片集合 */
.cf-root .cf-gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--cf-tile-w, 146px), 1fr));
}
.cf-root .cf-tile {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--cf-tile-ratio, 4 / 3);
  background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: calc(var(--cf-r) - 1px);
  transition: border-color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-tile:hover { border-color: var(--cf-border-strong); }
.cf-root .cf-tile__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--cf-ease);
}
.cf-root .cf-tile:hover .cf-tile__img { transform: scale(1.05); }
.cf-root .cf-tile__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--cf-bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--cf-bg) 30%, transparent) 40%,
    transparent 70%);
}
.cf-root .cf-tile__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px 9px; }
.cf-root .cf-tile__name {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); line-height: 1.4; color: var(--cf-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-root .cf-tile__sub {
  margin-top: 1px; font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  letter-spacing: .04em; color: var(--cf-text-dim);
}
.cf-root .cf-tile__tag {
  position: absolute; top: 7px; left: 7px; padding: 1px 6px;
  font-family: var(--cf-font); font-size: var(--cf-fs-micro); letter-spacing: .1em; text-transform: var(--cf-tt);
  color: var(--cf-accent); background: color-mix(in srgb, var(--cf-bg) 72%, transparent);
  border: var(--cf-bw) solid color-mix(in srgb, var(--cf-accent) 34%, transparent);
  border-radius: 2px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cf-root .cf-tile__pick {
  position: absolute; top: 7px; right: 7px; width: 16px; height: 16px;
  display: grid; place-items: center; cursor: pointer; opacity: 0;
  background: color-mix(in srgb, var(--cf-bg) 76%, transparent);
  border: var(--cf-bw) solid var(--cf-border-strong); border-radius: 3px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-tile:hover .cf-tile__pick,
.cf-root .cf-tile:focus-within .cf-tile__pick,
.cf-root .cf-tile.is-picked .cf-tile__pick { opacity: 1; }
.cf-root .cf-tile.is-picked { border-color: var(--cf-accent); box-shadow: 0 0 0 2px var(--cf-accent-soft); }
.cf-root .cf-tile.is-picked .cf-tile__pick { background: var(--cf-accent); border-color: var(--cf-accent); }
.cf-root .cf-tile.is-picked .cf-tile__pick::after {
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border-left: 1.5px solid var(--cf-accent-ink); border-bottom: 1.5px solid var(--cf-accent-ink);
  transform: rotate(-45deg);
}
.cf-root .cf-tile--add {
  display: grid; place-items: center; cursor: pointer;
  border-style: dashed; background: transparent;
}
.cf-root .cf-tile--add:hover { border-color: var(--cf-accent); }
.cf-root .cf-tile__addin { text-align: center; color: var(--cf-text-dim); }
.cf-root .cf-tile__addin b {
  display: block; margin-bottom: 5px;
  font-family: var(--cf-font); font-weight: 400; font-size: 18px; line-height: 1;
  color: var(--cf-text-muted);
}
.cf-root .cf-tile__addin span { font-size: var(--cf-fs-caption); letter-spacing: .1em; text-transform: var(--cf-tt); }
/* Workflow · 工作流画布 */
.cf-root .cf-flow {
  position: relative; border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r);
  background:
    radial-gradient(var(--cf-border) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--cf-bg-sunken);
  overflow: hidden;
}
.cf-root .cf-flow__svg { display: block; width: 100%; height: auto; }
.cf-root .cf-flow__edge { fill: none; stroke: var(--cf-accent-dim); stroke-width: calc(var(--cf-lw) + 1px); }
.cf-root .cf-flow__edge-label { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); fill: var(--cf-text-muted); text-anchor: middle; dominant-baseline: middle; }
.cf-root .cf-flow__node { cursor: grab; }
.cf-root .cf-flow__node.is-dragging { cursor: grabbing; }
.cf-root .cf-flow__node-box { fill: var(--cf-bg-elev); stroke: var(--cf-border-strong); stroke-width: var(--cf-bw); transition: stroke var(--cf-dur) var(--cf-ease); }
.cf-root .cf-flow__node:hover .cf-flow__node-box,
.cf-root .cf-flow__node.is-dragging .cf-flow__node-box { stroke: var(--cf-accent); }
.cf-root .cf-flow__node:focus-visible { outline: none; }
.cf-root .cf-flow__node:focus-visible .cf-flow__node-box { stroke: var(--cf-accent); stroke-width: 2px; }
.cf-root .cf-flow__dot { fill: var(--cf-text-muted); }
.cf-root .cf-flow__node.is-accent .cf-flow__dot { fill: var(--cf-accent); }
.cf-root .cf-flow__node.is-success .cf-flow__dot { fill: var(--cf-success); }
.cf-root .cf-flow__node.is-danger .cf-flow__dot { fill: var(--cf-danger); }
.cf-root .cf-flow__label { font-family: var(--cf-font); font-size: var(--cf-fs-body-lg); font-weight: 600; fill: var(--cf-text); }
.cf-root .cf-flow__sub { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); fill: var(--cf-text-muted); }
.cf-root .cf-flow__port { fill: var(--cf-bg-elev); stroke: var(--cf-accent-dim); stroke-width: 1.5; }
/* GlassPanel · 玻璃面板 */
.cf-root .cf-glass {
  position: relative;
  padding: calc(var(--cf-pad) * 1.15);
  border-radius: calc(var(--cf-r) + 6px);
  background: color-mix(in srgb, var(--cf-bg-panel) 82%, transparent);
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--cf-bg-elev) 86%, transparent),
    color-mix(in srgb, var(--cf-bg-panel) 48%, transparent));
  border: var(--cf-bw) solid color-mix(in srgb, var(--cf-border-strong) 52%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cf-text) 12%, transparent),
    var(--cf-elev-1);
  overflow: hidden;
}
.cf-root .cf-glass--flat { backdrop-filter: none; -webkit-backdrop-filter: none; }
.cf-root .cf-glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140% 90% at 0% 0%,
    color-mix(in srgb, var(--cf-accent) 22%, transparent), transparent 58%);
}
.cf-root .cf-glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.cf-root .cf-glass > * { position: relative; z-index: var(--cf-z-raised); }
.cf-root .cf-glass__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.cf-root .cf-glass__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .14em;
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-glass__tag {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: .12em;
  padding: 2px 6px; border-radius: 999px;
  color: var(--cf-accent); background: var(--cf-accent-soft);
  border: var(--cf-bw) solid color-mix(in srgb, var(--cf-accent) 34%, transparent);
}
.cf-root .cf-glass__body {
  font-family: var(--cf-font); font-size: var(--cf-fs-body); line-height: 1.7;
  color: var(--cf-text-muted);
}
/* MediaBanner · 背景图横幅 */
.cf-root .cf-media {
  position: relative; display: flex; align-items: flex-end;
  min-height: 186px; overflow: hidden; isolation: isolate;
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: calc(var(--cf-r) + 6px);
  background: var(--cf-bg-sunken);
}
.cf-root .cf-media__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  filter: saturate(.9) contrast(1.04);
  transition: transform 900ms var(--cf-ease);
}
.cf-root .cf-media:hover .cf-media__img { transform: scale(1.09); }
.cf-root .cf-media__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--cf-bg) 86%, transparent) 4%,
      color-mix(in srgb, var(--cf-bg) 34%, transparent) 52%,
      transparent 86%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--cf-bg) 62%, transparent), transparent 64%);
}
.cf-root .cf-media__scan {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(0deg,
    color-mix(in srgb, var(--cf-bg) 26%, transparent) 0 1px, transparent 1px 3px);
}
.cf-root .cf-media__body { position: relative; z-index: 2; width: 100%; padding: 16px 18px 15px; }
.cf-root .cf-media__meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: .16em;
  text-transform: uppercase; color: var(--cf-accent);
}
.cf-root .cf-media__meta i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--cf-accent);
  box-shadow: var(--cf-glow-sm);
}
.cf-root .cf-media__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-title-lg); line-height: 1.35;
  color: var(--cf-text); letter-spacing: .01em;
}
.cf-root .cf-media__desc {
  margin-top: 3px; font-family: var(--cf-font); font-size: var(--cf-fs-label);
  color: var(--cf-text-muted); max-width: 42ch;
}
.cf-root .cf-media__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px;
  border-top: var(--cf-bw) solid color-mix(in srgb, var(--cf-border-strong) 44%, transparent);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}
.cf-root .cf-media__go {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .1em;
  text-transform: var(--cf-tt); color: var(--cf-accent);
}
/* MetricTile · 指标磁贴 */
.cf-root .cf-metric {
  position: relative; overflow: hidden;
  padding: 14px 16px 12px;
  background: var(--cf-bg-panel);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
}
.cf-root .cf-metric::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--cf-accent); opacity: .85;
}
.cf-root .cf-metric__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cf-root .cf-metric__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-metric__delta {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px;
  color: var(--cf-accent); background: var(--cf-accent-soft);
}
.cf-root .cf-metric__delta.is-down { color: var(--cf-danger); background: var(--cf-danger-soft); }
.cf-root .cf-metric__row { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }
.cf-root .cf-metric__value {
  font-family: var(--cf-font-data); font-size: calc(28px * var(--cf-scale));
  font-weight: 500; line-height: 1.06; letter-spacing: -.03em; color: var(--cf-text);
}
.cf-root .cf-metric__unit { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-metric__spark polyline,
.cf-root .cf-metric__spark path { fill: none; stroke-width: var(--cf-lw-thin, 1.1px); stroke-linecap: var(--cf-linecap, round); stroke-linejoin: var(--cf-linejoin, round); }
.cf-root .cf-metric__spark { display: block; width: 100%; height: 22px; margin-top: 4px; color: var(--cf-accent); }
.cf-root .cf-metric__foot {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 6px;
  font-family: var(--cf-font); font-size: var(--cf-fs-caption); letter-spacing: .06em;
  color: var(--cf-text-dim);
}
.cf-root .cf-metric--alert { border-color: var(--cf-danger-dim); background: var(--cf-danger-soft); }
.cf-root .cf-metric--alert::before { background: var(--cf-danger); }
.cf-root .cf-metric--alert .cf-metric__label { color: var(--cf-danger); }
/* SpotlightCard · 光斑卡 */
.cf-root .cf-spot {
  --cf-mx: 50%; --cf-my: 0%;
  position: relative; overflow: hidden;
  padding: var(--cf-pad);
  background: var(--cf-bg-panel);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: calc(var(--cf-r) + 4px);
  transition: border-color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 320ms var(--cf-ease);
  background: radial-gradient(260px circle at var(--cf-mx) var(--cf-my),
    color-mix(in srgb, var(--cf-accent) 24%, transparent), transparent 66%);
}
.cf-root .cf-spot:hover::before { opacity: 1; }
.cf-root .cf-spot:hover { border-color: color-mix(in srgb, var(--cf-accent) 46%, var(--cf-border)); }
.cf-root .cf-spot > * { position: relative; z-index: var(--cf-z-raised); }
.cf-root .cf-spot__eyebrow {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: .18em;
  text-transform: uppercase; color: var(--cf-accent);
}
.cf-root .cf-spot__title {
  margin-top: 6px; font-family: var(--cf-font); font-size: var(--cf-fs-title-lg); color: var(--cf-text);
}
.cf-root .cf-spot__desc {
  margin-top: 6px; font-family: var(--cf-font); font-size: var(--cf-fs-body); line-height: 1.65;
  color: var(--cf-text-muted);
}
/* AuroraBackground · 极光背景 */
.cf-root .cf-aurora {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.cf-root .cf-aurora__blob {
  position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: .42;
}
.cf-root .cf-aurora__b1 {
  width: 52%; height: 64%; left: -10%; top: -16%;
  background: radial-gradient(circle, var(--cf-accent) 0%, transparent 68%);
  animation: cf-aurora-a 22s var(--cf-ease) infinite;
}
.cf-root .cf-aurora__b2 {
  width: 46%; height: 58%; right: -8%; top: 4%;
  background: radial-gradient(circle, var(--cf-s3) 0%, transparent 70%);
  animation: cf-aurora-b 27s var(--cf-ease) infinite;
}
.cf-root .cf-aurora__b3 {
  width: 56%; height: 52%; left: 22%; bottom: -22%;
  background: radial-gradient(circle, var(--cf-s5) 0%, transparent 70%);
  animation: cf-aurora-c 31s var(--cf-ease) infinite;
}
.cf-root .cf-aurora__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--cf-text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--cf-text) 7%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}
.cf-root .cf-aurora__grain {
  position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@keyframes cf-aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(14%, 10%, 0) scale(1.16); }
}

@keyframes cf-aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-12%, 14%, 0) scale(1.1); }
}

@keyframes cf-aurora-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, -12%, 0) scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
.cf-root .cf-aurora__blob { animation: none; }

}
/* Ticker · 滚动播报 */
.cf-root .cf-ticker {
  position: relative; overflow: hidden; display: flex;
  border-top: var(--cf-bw) solid var(--cf-border);
  border-bottom: var(--cf-bw) solid var(--cf-border);
  background: var(--cf-bg-sunken);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.cf-root .cf-ticker__track {
  display: flex; flex: none; min-width: 200%;
  animation: cf-ticker-roll 30s linear infinite;
}
.cf-root .cf-ticker:hover .cf-ticker__track { animation-play-state: paused; }
.cf-root .cf-ticker__group { display: flex; flex: none; align-items: center; padding: 9px 0; }
.cf-root .cf-ticker__item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0 18px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: .04em;
  color: var(--cf-text-muted);
}
.cf-root .cf-ticker__item i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--cf-accent);
  opacity: .8; flex: none;
}
.cf-root .cf-ticker__item b { color: var(--cf-text); font-weight: 500; }
.cf-root .cf-ticker__item.is-warn i { background: var(--cf-warn); }
.cf-root .cf-ticker__item.is-warn b { color: var(--cf-warn); }

@keyframes cf-ticker-roll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.cf-root .cf-ticker__track { animation: none; }

}
/* SideNav · 侧栏导航 */
.cf-root .cf-sidenav {
  --cf-sidenav-w: 232px;
  --cf-sidenav-w-fold: 56px;
  width: var(--cf-sidenav-w);
  /* 高度契约：宿主必须给定确定高度（100vh 或 flex stretch 的确定高）。
     注意：父级只有 min-height 时，height:100% 与 align-self:stretch 均不生效
     （百分比解析为 auto，且计算值非 auto 不触发 stretch）——这是 CSS 规范行为 */
  height: 100%;
  align-self: stretch;
  flex: none; /* 侧栏绝不允许被内容区压缩 */
  display: flex; flex-direction: column;
  background: var(--cf-bg-sunken);
  border-right: var(--cf-bw) solid var(--cf-border);
  font-family: var(--cf-font);
  overflow: hidden;
  transition: width var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-sidenav__brand {
  display: flex; align-items: center; gap: 10px;
  min-height: 62px; padding: 14px 14px;
  border-bottom: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-sidenav__mark {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: var(--cf-accent); color: var(--cf-bg);
  border-radius: var(--cf-r); box-shadow: var(--cf-glow);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-title); font-weight: 700;
}
.cf-root .cf-sidenav__brandmeta { min-width: 0; }
.cf-root .cf-sidenav__name {
  display: block; font-size: var(--cf-fs-title); font-weight: 700; line-height: 1.2;
  color: var(--cf-text); letter-spacing: var(--cf-track);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-root .cf-sidenav__sub {
  display: block; margin-top: 2px; font-size: var(--cf-fs-label); color: var(--cf-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-root .cf-sidenav__nav { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.cf-root .cf-sidenav__glabel {
  padding: 14px 18px 5px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  letter-spacing: .16em; text-transform: var(--cf-tt);
  color: var(--cf-text-dim); white-space: nowrap;
}
/* 可折叠分组头：语义是 button + aria-expanded；glabel 是纯展示版的兜底 */
.cf-root .cf-sidenav__ghead {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 18px 5px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  letter-spacing: .16em; text-transform: var(--cf-tt);
  color: var(--cf-text-dim); white-space: nowrap;
}
.cf-root .cf-sidenav__ghead:hover { color: var(--cf-text-muted); }
.cf-root .cf-sidenav__chev { flex: none; font-size: var(--cf-fs-glyph); transition: transform var(--cf-dur) var(--cf-ease); }
.cf-root .cf-sidenav__ghead[aria-expanded="false"] .cf-sidenav__chev { transform: rotate(-90deg); }
/* 组内容：grid-rows 动画收展；收起时组内条目不可聚焦 */
.cf-root .cf-sidenav__items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--cf-dur) var(--cf-ease); }
.cf-root .cf-sidenav__group[data-open="false"] .cf-sidenav__items { grid-template-rows: 0fr; }
.cf-root .cf-sidenav__items > div { overflow: hidden; min-height: 0; }
.cf-root .cf-sidenav__group[data-open="false"] .cf-sidenav__item { visibility: hidden; }
.cf-root .cf-sidenav__item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  height: 35px; margin: 2px 8px; padding: 0 10px;
  border-radius: var(--cf-r);
  color: var(--cf-text-muted); font-size: var(--cf-fs-body-lg); text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: color var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-sidenav__item:hover { color: var(--cf-text); background: color-mix(in srgb, var(--cf-text) 7%, transparent); }
.cf-root .cf-sidenav__item.is-on {
  color: var(--cf-accent); background: var(--cf-accent-soft);
  box-shadow: inset 2px 0 0 var(--cf-accent), var(--cf-glow-inset);
}
.cf-root .cf-sidenav__ico { width: 16px; flex: none; display: grid; place-items: center; font-size: var(--cf-fs-body-lg); }
.cf-root .cf-sidenav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cf-root .cf-sidenav__badge {
  margin-left: auto; min-width: 17px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  color: var(--cf-accent); background: var(--cf-accent-soft);
  border: var(--cf-bw) solid var(--cf-accent-dim); border-radius: 999px;
}
.cf-root .cf-sidenav__foot {
  display: flex; align-items: center; gap: 9px;
  padding: 10px; border-top: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-sidenav__avatar {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--cf-accent-soft);
  border: var(--cf-bw) solid var(--cf-accent-dim); color: var(--cf-accent);
  font-size: var(--cf-fs-body); font-weight: 700;
}
.cf-root .cf-sidenav__footmeta { flex: 1; min-width: 0; }
.cf-root .cf-sidenav__footname {
  font-size: var(--cf-fs-body); font-weight: 600; color: var(--cf-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cf-root .cf-sidenav__footrole { margin-top: 1px; font-size: var(--cf-fs-caption); color: var(--cf-text-dim); }
/* 折叠态：只留图标列。开关由宿主放，组件只认 data-fold */
.cf-root .cf-sidenav[data-fold="true"] { width: var(--cf-sidenav-w-fold); }
.cf-root .cf-sidenav[data-fold="true"] :is(.cf-sidenav__brandmeta,
.cf-root .cf-sidenav__glabel,
.cf-root .cf-sidenav__ghead,
.cf-root .cf-sidenav__label,
.cf-root .cf-sidenav__badge,
.cf-root .cf-sidenav__footmeta) { display: none; }
/* 折叠窄栏下忽略分组收展：条目全部铺开，靠组间细线分隔 */
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__items { grid-template-rows: 1fr; }
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__item { visibility: visible; }
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__brand { justify-content: center; padding: 14px 0; }
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__item { justify-content: center; margin: 2px 10px; padding: 0; }
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__item.is-on { box-shadow: var(--cf-glow-inset); }
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__foot { justify-content: center; padding: 10px 0; }
.cf-root .cf-sidenav[data-fold="true"] .cf-sidenav__group + .cf-sidenav__group::before {
  content: ''; display: block; height: var(--cf-bw);
  margin: 7px 14px 8px; background: var(--cf-border);
}
/* Tabs · 标签页 */
.cf-root .cf-tabs { display: flex; gap: 2px; border-bottom: var(--cf-bw) solid var(--cf-border); }
.cf-root .cf-tab {
  padding: 7px 14px; cursor: pointer; background: transparent; border: 0;
  font-family: var(--cf-font); font-size: var(--cf-fs-body); letter-spacing: .08em;
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--cf-dur) var(--cf-ease), box-shadow var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-tab:hover { color: var(--cf-text); }
.cf-root .cf-tab.is-active {
  color: var(--cf-accent);
  box-shadow: inset 0 -2px 0 var(--cf-accent), var(--cf-glow-inset);
}
.cf-root .cf-tab__count { margin-left: 6px; font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
/* 等分变体：tab 铺满整行（登录/注册这类双面板切换） */
.cf-root .cf-tabs--stretch .cf-tab { flex: 1; text-align: center; }
/* Steps · 步骤条 */
.cf-root .cf-steps { display: flex; align-items: flex-start; }
.cf-root .cf-step { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; }
.cf-root .cf-step__rail { display: flex; align-items: center; gap: 6px; }
.cf-root .cf-step__dot {
  width: 9px; height: 9px; flex: none; background: var(--cf-bg-sunken);
  border: var(--cf-bw) solid var(--cf-border-strong);
}
.cf-root .cf-step__line { flex: 1; height: var(--cf-bw); background: var(--cf-border); }
.cf-root .cf-step:last-child .cf-step__line { display: none; }
.cf-root .cf-step__label {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-dim); padding-right: 8px;
}
.cf-root .cf-step.is-done .cf-step__dot { background: var(--cf-accent); border-color: var(--cf-accent); }
.cf-root .cf-step.is-done .cf-step__line { background: var(--cf-accent-dim); }
.cf-root .cf-step.is-done .cf-step__label { color: var(--cf-text-muted); }
.cf-root .cf-step.is-now .cf-step__dot {
  background: var(--cf-accent); border-color: var(--cf-accent);
  box-shadow: var(--cf-glow-sm);
}
.cf-root .cf-step.is-now .cf-step__label { color: var(--cf-accent); }
/* Pagination · 分页 */
.cf-root .cf-pager { display: flex; align-items: center; gap: 3px; }
.cf-root .cf-pager__btn {
  min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label);
  color: var(--cf-text-muted); background: transparent;
  border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r);
  cursor: pointer; transition: all var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-pager__btn:hover { color: var(--cf-text); border-color: var(--cf-border-strong); }
.cf-root .cf-pager__btn.is-on {
  color: var(--cf-accent); border-color: var(--cf-accent-dim);
  background: var(--cf-accent-soft); box-shadow: var(--cf-glow-inset);
}
.cf-root .cf-pager__btn:disabled { color: var(--cf-text-dim); cursor: not-allowed; }
.cf-root .cf-pager__gap { color: var(--cf-text-dim); font-size: var(--cf-fs-label); padding: 0 2px; }
/* Breadcrumb · 面包屑 */
.cf-root .cf-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--cf-font); font-size: var(--cf-fs-label); }
.cf-root .cf-crumb__link { color: var(--cf-text-muted); cursor: pointer; transition: color var(--cf-dur) var(--cf-ease); }
.cf-root .cf-crumb__link:hover { color: var(--cf-accent); }
.cf-root .cf-crumb__sep { color: var(--cf-text-dim); font-size: var(--cf-fs-caption); }
.cf-root .cf-crumb__now { color: var(--cf-text); letter-spacing: var(--cf-track); text-transform: var(--cf-tt); }
/* Dropdown · 下拉菜单 */
.cf-root .cf-drop { position: relative; display: inline-flex; }
.cf-root .cf-drop__caret { margin-left: 7px; font-size: var(--cf-fs-glyph); color: var(--cf-text-dim); transition: transform var(--cf-dur) var(--cf-ease); }
.cf-root .cf-drop[data-open="true"] .cf-drop__caret { transform: rotate(180deg); }
.cf-root .cf-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 212px; padding: 5px;
  display: flex; flex-direction: column;
  background: var(--cf-bg-elev);
  border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  box-shadow: var(--cf-elev-2);
  z-index: var(--cf-z-dropdown);
}
.cf-root .cf-menu[hidden] { display: none; }
.cf-root .cf-menu__label {
  padding: 8px 10px 5px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  letter-spacing: .16em; text-transform: var(--cf-tt);
  color: var(--cf-text-dim); white-space: nowrap;
}
.cf-root .cf-menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  height: 32px; padding: 0 10px; border: 0; background: transparent;
  border-radius: calc(var(--cf-r) - 2px);
  color: var(--cf-text-muted); font-family: var(--cf-font); font-size: var(--cf-fs-body-lg);
  text-align: left; cursor: pointer; white-space: nowrap;
  transition: background var(--cf-dur) var(--cf-ease), color var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-menu__item:hover,
.cf-root .cf-menu__item:focus-visible {
  background: var(--cf-accent-soft); color: var(--cf-text); outline: none;
}
.cf-root .cf-menu__ico { width: 14px; flex: none; display: grid; place-items: center; font-size: var(--cf-fs-body); color: var(--cf-text-dim); }
.cf-root .cf-menu__item:hover .cf-menu__ico,
.cf-root .cf-menu__item:focus-visible .cf-menu__ico { color: var(--cf-accent); }
.cf-root .cf-menu__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cf-root .cf-menu__key { flex: none; font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: .06em; color: var(--cf-text-dim); }
.cf-root .cf-menu__item[aria-checked="true"] { color: var(--cf-accent); }
.cf-root .cf-menu__item[aria-checked="true"] .cf-menu__ico { color: var(--cf-accent); }
.cf-root .cf-menu__sep { height: var(--cf-bw); margin: 4px 8px; background: var(--cf-border); }
.cf-root .cf-menu__item.is-danger { color: var(--cf-danger); }
.cf-root .cf-menu__item.is-danger .cf-menu__ico { color: var(--cf-danger); }
.cf-root .cf-menu__item.is-danger:hover,
.cf-root .cf-menu__item.is-danger:focus-visible { background: var(--cf-danger-soft); color: var(--cf-danger); }
/* Menu · 导航菜单 */
.cf-root .cf-navmenu { width: 232px; display: flex; flex-direction: column; padding: 6px 0; }
.cf-root .cf-navmenu__label {
  padding: 12px 16px 5px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  letter-spacing: .16em; text-transform: var(--cf-tt);
  color: var(--cf-text-dim); white-space: nowrap;
}
.cf-root .cf-navmenu__item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  height: 34px; margin: 1px 8px; padding: 0 10px;
  border: 0; background: transparent; width: calc(100% - 16px);
  border-radius: var(--cf-r);
  color: var(--cf-text-muted); font-family: var(--cf-font); font-size: var(--cf-fs-body-lg);
  text-align: left; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color var(--cf-dur) var(--cf-ease), background var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-navmenu__item:hover { color: var(--cf-text); background: color-mix(in srgb, var(--cf-text) 7%, transparent); }
.cf-root .cf-navmenu__item.is-on {
  color: var(--cf-accent); background: var(--cf-accent-soft);
  box-shadow: inset 2px 0 0 var(--cf-accent), var(--cf-glow-inset);
}
.cf-root .cf-navmenu__ico { width: 15px; flex: none; display: grid; place-items: center; font-size: var(--cf-fs-body-lg); color: var(--cf-text-dim); }
.cf-root .cf-navmenu__item:hover .cf-navmenu__ico { color: var(--cf-text); }
.cf-root .cf-navmenu__item.is-on .cf-navmenu__ico { color: var(--cf-accent); }
.cf-root .cf-navmenu__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cf-root .cf-navmenu__badge {
  flex: none; min-width: 17px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption);
  color: var(--cf-accent); background: var(--cf-accent-soft);
  border: var(--cf-bw) solid var(--cf-accent-dim); border-radius: 999px;
}
.cf-root .cf-navmenu__item.is-danger { color: var(--cf-danger); }
.cf-root .cf-navmenu__item.is-danger .cf-navmenu__ico { color: var(--cf-danger); }
.cf-root .cf-navmenu__item.is-danger:hover { background: var(--cf-danger-soft); }
.cf-root .cf-navmenu--compact .cf-navmenu__item { height: 28px; font-size: var(--cf-fs-body); }
.cf-root .cf-navmenu--compact .cf-navmenu__label { padding-top: 8px; }
/* Alert · 告警条 */
.cf-root .cf-alert {
  display: flex; gap: 10px; padding: 10px 12px;
  background: var(--cf-danger-soft);
  border: var(--cf-bw) solid var(--cf-danger-dim);
  border-radius: var(--cf-r);
  font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text);
}
.cf-root .cf-alert__bar { flex: none; width: 2px; background: var(--cf-danger); }
.cf-root .cf-alert__title { font-weight: 500; letter-spacing: var(--cf-track); text-transform: var(--cf-tt); }
.cf-root .cf-alert__desc { font-size: var(--cf-fs-label); color: var(--cf-text-muted); margin-top: 3px; line-height: 1.6; }
.cf-root .cf-alert__close { margin-left: auto; color: var(--cf-text-dim); cursor: pointer; font-size: var(--cf-fs-label); }
/* Modal · 模态框 */
.cf-root .cf-modal-stage {
  position: relative; height: 190px; display: flex; align-items: center; justify-content: center;
  background: var(--cf-scrim);
  border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
  overflow: hidden;
}
.cf-root .cf-modal {
  width: 84%; max-width: 340px;
  background: var(--cf-bg-elev);
  border: var(--cf-bw) solid var(--cf-accent-dim);
  border-radius: var(--cf-r);
  box-shadow: var(--cf-elev-3);
}
.cf-root .cf-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-modal__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-body); font-weight: 500;
  letter-spacing: var(--cf-track); text-transform: var(--cf-tt); color: var(--cf-text);
}
.cf-root .cf-modal__x { color: var(--cf-text-dim); cursor: pointer; font-size: var(--cf-fs-label); }
.cf-root .cf-modal__body {
  padding: 12px; font-family: var(--cf-font); font-size: var(--cf-fs-body);
  line-height: 1.7; color: var(--cf-text-muted);
}
.cf-root .cf-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 12px; border-top: var(--cf-bw) solid var(--cf-border);
}
/* Toast · 轻提示 */
.cf-root .cf-toasts { display: flex; flex-direction: column; gap: 8px; }
.cf-root .cf-toast {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-border-strong);
  border-left: 2px solid var(--cf-accent);
  border-radius: var(--cf-r);
  font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text);
  box-shadow: var(--cf-elev-4);
}
.cf-root .cf-toast__tag {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: .1em;
  color: var(--cf-accent);
}
.cf-root .cf-toast__msg { color: var(--cf-text-muted); }
.cf-root .cf-toast--err { border-left-color: var(--cf-danger); }
.cf-root .cf-toast--err .cf-toast__tag { color: var(--cf-danger); }
.cf-root .cf-toast--warn { border-left-color: var(--cf-warn); }
.cf-root .cf-toast--warn .cf-toast__tag { color: var(--cf-warn); }
/* Skeleton · 骨架屏 */
.cf-root .cf-skel { display: flex; flex-direction: column; gap: 9px; }
.cf-root .cf-skel__row { display: flex; gap: 9px; align-items: center; }
.cf-root .cf-skel__block {
  position: relative; overflow: hidden;
  background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border);
  border-radius: var(--cf-r);
}
.cf-root .cf-skel__block::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--cf-accent-soft), transparent);
  transform: translateX(-100%);
  animation: cf-scan 1.4s var(--cf-ease) infinite;
}
.cf-root .cf-skel__avatar { width: 30px; height: 30px; flex: none; }
.cf-root .cf-skel__line { height: 10px; }
.cf-root .cf-skel__w40 { width: 40%; }
.cf-root .cf-skel__w70 { width: 70%; }
.cf-root .cf-skel__w100 { width: 100%; }

@keyframes cf-scan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
.cf-root .cf-skel__block::after { animation: none; }

}
/* Tooltip · 气泡提示 */
.cf-root .cf-tip-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cf-root .cf-tip__trigger {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--cf-font); font-size: var(--cf-fs-body); color: var(--cf-text-muted);
  border-bottom: 1px dashed var(--cf-border-strong); padding-bottom: 2px;
}
.cf-root .cf-tip {
  position: relative; display: inline-block; padding: 6px 9px;
  background: var(--cf-bg-elev); border: var(--cf-bw) solid var(--cf-accent-dim);
  border-radius: var(--cf-r);
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text);
  box-shadow: var(--cf-elev-2);
}
.cf-root .cf-tip::before {
  content: ""; position: absolute; top: -4px; left: 14px;
  width: 6px; height: 6px; background: var(--cf-bg-elev);
  border-left: var(--cf-bw) solid var(--cf-accent-dim);
  border-top: var(--cf-bw) solid var(--cf-accent-dim);
  transform: rotate(45deg);
}
.cf-root .cf-tip__key { font-family: var(--cf-font-data); color: var(--cf-accent); }
/* Popconfirm · 气泡确认 */
.cf-root .cf-pop-wrap { position: relative; display: inline-flex; }
.cf-root .cf-pop {
  position: absolute; top: calc(100% + 8px); left: 0; width: 262px; padding: 14px 14px 12px;
  background: var(--cf-bg-elev);
  border: var(--cf-bw) solid var(--cf-border-strong);
  border-radius: var(--cf-r); clip-path: var(--cf-clip);
  box-shadow: var(--cf-elev-2);
  z-index: var(--cf-z-dropdown);
}
.cf-root .cf-pop[hidden] { display: none; }
.cf-root .cf-pop__head { display: flex; align-items: flex-start; gap: 9px; }
.cf-root .cf-pop__ico {
  flex: none; width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--cf-warn); font-size: var(--cf-fs-body);
}
.cf-root .cf-pop--danger .cf-pop__ico { color: var(--cf-danger); }
.cf-root .cf-pop__title { font-family: var(--cf-font); font-size: var(--cf-fs-body-lg); font-weight: 700; color: var(--cf-text); }
.cf-root .cf-pop__body { margin-top: 4px; font-family: var(--cf-font); font-size: var(--cf-fs-body); line-height: 1.65; color: var(--cf-text-muted); }
.cf-root .cf-pop__body code {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text);
  background: var(--cf-bg-sunken); padding: 1px 4px; border-radius: 3px;
}
.cf-root .cf-pop__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.cf-root .cf-pop__acts .cf-btn { height: 28px; padding: 0 11px; font-size: var(--cf-fs-body); }
/* Drawer · 抽屉 */
.cf-root .cf-drawer { position: fixed; inset: 0; z-index: var(--cf-z-overlay); background: var(--cf-scrim); }
.cf-root .cf-drawer[hidden] { display: none; }
.cf-root .cf-drawer__panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: 380px; max-width: 88vw;
  display: flex; flex-direction: column;
  background: var(--cf-bg-elev);
  border-left: var(--cf-bw) solid var(--cf-border-strong);
  box-shadow: var(--cf-elev-3);
  animation: cf-drawer-in var(--cf-dur) var(--cf-ease);
}
.cf-root .cf-drawer[data-side="left"] .cf-drawer__panel {
  right: auto; left: 0; border-left: 0; border-right: var(--cf-bw) solid var(--cf-border-strong);
}

@keyframes cf-drawer-in { from { transform: translateX(24px); opacity: 0; } }
.cf-root .cf-drawer[data-side="left"] .cf-drawer__panel { animation-name: cf-drawer-in-l; }

@keyframes cf-drawer-in-l { from { transform: translateX(-24px); opacity: 0; } }
.cf-root .cf-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px 13px; border-bottom: var(--cf-bw) solid var(--cf-border);
}
.cf-root .cf-drawer__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-body-lg); font-weight: 700;
  letter-spacing: var(--cf-track); color: var(--cf-text);
}
.cf-root .cf-drawer__close {
  border: 0; background: transparent; cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: calc(var(--cf-r) - 2px); color: var(--cf-text-dim); font-size: var(--cf-fs-body);
}
.cf-root .cf-drawer__close:hover { background: var(--cf-bg-sunken); color: var(--cf-text); }
.cf-root .cf-drawer__body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.cf-root .cf-drawer__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 13px 18px 16px; border-top: var(--cf-bw) solid var(--cf-border);
}
/* AreaChart · 面积趋势 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
.cf-root .cf-area__mark { fill: var(--cf-bg-panel); stroke: var(--cf-s1); stroke-width: var(--cf-lw, 1.6px); }
/* BarChart · 分组柱状 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
/* StackedBar · 堆叠柱 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
/* Donut · 环形占比 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
.cf-root .cf-donut__track { fill: none; stroke: var(--cf-border); stroke-width: 14; }
.cf-root .cf-donut__ring { fill: none; stroke-width: 14; }
.cf-root .cf-donut__num { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: 22px; font-weight: 500; }
.cf-root .cf-donut__cap { fill: var(--cf-text-dim); font-family: var(--cf-font); font-size: var(--cf-fs-caption); letter-spacing: .12em; }
/* Gauge · 半环仪表 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
.cf-root .cf-gauge__track { fill: none; stroke: var(--cf-border); stroke-width: 12; }
.cf-root .cf-gauge__bar { fill: none; stroke-width: 12; stroke-linecap: butt; }
.cf-root .cf-gauge__tick { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-gauge__num { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: 26px; font-weight: 500; }
.cf-root .cf-gauge__cap { fill: var(--cf-text-dim); font-family: var(--cf-font); font-size: var(--cf-fs-caption); letter-spacing: .14em; }
/* Heatmap · 热力矩阵 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
.cf-root .cf-heat__cell { stroke: var(--cf-bg-panel); stroke-width: 1; }
/* Radar · 雷达图 */
/* 线宽/端点由皮肤给基准（--cf-lw / --cf-lw-thin / --cf-linecap，在推导层产出），
   组件这里不再写死数值，只用 --cf-lw-mul 做「单张图相对整体粗细微调」。
   注意：绝不能在这里重新声明 --cf-lw，否则会盖掉皮肤的值。 */
.cf-root .cf-chart { width: 100%; height: auto; display: block; overflow: visible; --cf-lw-mul: 1; }
.cf-root .cf-chart--thin { --cf-lw-mul: .78; }
.cf-root .cf-chart--bold { --cf-lw-mul: 1.35; }
.cf-root .cf-chart__line {
  fill: none;
  stroke-width: calc(var(--cf-lw, 1.6px) * var(--cf-lw-mul, 1));
  stroke-linecap: var(--cf-linecap, round);
  stroke-linejoin: var(--cf-linejoin, round);
}
/* 双走法：标记里同时有圆滑与折线两条 path，默认显示圆滑。
   切折线有两条路：① 皮肤级规则（导出 CSS 里按 data-skin 注入，见 curveRule）
   ② 任意祖先写 data-curve="linear"（工作室实时预览、单页局部覆盖用）。
   规则写在属性自身而不是 .cf-chart 后代，这样迷你走势线（不在 .cf-chart 里）也一并生效。 */
.cf-root [data-cf-c] { display: none; }
.cf-root [data-cf-c="smooth"] { display: inline; }
.cf-root [data-curve="linear"] [data-cf-c="smooth"] { display: none; }
.cf-root [data-curve="linear"] [data-cf-c="linear"] { display: inline; }
.cf-root .cf-chart__line--thin { stroke-width: calc(var(--cf-lw-thin, 1.1px) * var(--cf-lw-mul, 1)); }
.cf-root .cf-chart__mark { fill: var(--cf-bg-panel); stroke-width: var(--cf-lw, 1.6px); }
.cf-root .cf-chart__grid { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-chart__grid--dash { stroke-dasharray: 2 4; }
.cf-root .cf-chart__base { stroke: var(--cf-border-strong); stroke-width: 1; }
.cf-root .cf-chart__axis { fill: var(--cf-text-dim); font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); }
.cf-root .cf-chart__val { fill: var(--cf-text); font-family: var(--cf-font-data); font-size: var(--cf-fs-label); font-weight: 500; }
.cf-root .cf-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cf-root .cf-chart__title {
  font-family: var(--cf-font); font-size: var(--cf-fs-label); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-text-muted);
}
.cf-root .cf-chart__meta { font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-dim); }
.cf-root .cf-chart__legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-family: var(--cf-font); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-chart__key { display: inline-flex; align-items: center; gap: 6px; }
.cf-root .cf-chart__sw { width: 8px; height: 8px; flex: none; }
.cf-root .cf-s1 { stroke: var(--cf-s1); }
.cf-root .cf-f1 { fill: var(--cf-s1); }
.cf-root .cf-b1 { background: var(--cf-s1); }
.cf-root .cf-s2 { stroke: var(--cf-s2); }
.cf-root .cf-f2 { fill: var(--cf-s2); }
.cf-root .cf-b2 { background: var(--cf-s2); }
.cf-root .cf-s3 { stroke: var(--cf-s3); }
.cf-root .cf-f3 { fill: var(--cf-s3); }
.cf-root .cf-b3 { background: var(--cf-s3); }
.cf-root .cf-s4 { stroke: var(--cf-s4); }
.cf-root .cf-f4 { fill: var(--cf-s4); }
.cf-root .cf-b4 { background: var(--cf-s4); }
.cf-root .cf-s5 { stroke: var(--cf-s5); }
.cf-root .cf-f5 { fill: var(--cf-s5); }
.cf-root .cf-b5 { background: var(--cf-s5); }
.cf-root .cf-radar__ring { fill: none; stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-radar__axis { stroke: var(--cf-border); stroke-width: 1; }
.cf-root .cf-radar__area { stroke-width: var(--cf-lw-thin, 1.1px); }
.cf-root .cf-radar__label { fill: var(--cf-text-muted); font-family: var(--cf-font); font-size: var(--cf-fs-caption); }
/* RankList · 排行列表 */
.cf-root .cf-rank { display: flex; flex-direction: column; gap: 2px; }
.cf-root .cf-rank__row {
  display: grid; grid-template-columns: 22px 78px 1fr 58px;
  align-items: center; gap: 8px; height: var(--cf-row-h);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text);
}
.cf-root .cf-rank__no { color: var(--cf-text-dim); }
.cf-root .cf-rank__row.is-top .cf-rank__no { color: var(--cf-accent); }
.cf-root .cf-rank__name { color: var(--cf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-root .cf-rank__track { height: 6px; background: var(--cf-bg-sunken); border: var(--cf-bw) solid var(--cf-border); }
.cf-root .cf-rank__bar { height: 100%; background: var(--cf-accent); }
.cf-root .cf-rank__row.is-top .cf-rank__bar { box-shadow: var(--cf-glow-sm); }
.cf-root .cf-rank__val { text-align: right; color: var(--cf-text-muted); }
/* ParticleField · 粒子场背景 */
.cf-root .cf-pf {
  position: relative; overflow: hidden;
  border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r);
  min-height: 230px;
  background:
    radial-gradient(120% 130% at 28% 18%, var(--cf-accent-soft), transparent 62%),
    var(--cf-bg-sunken);
}
.cf-root .cf-pf__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-root .cf-pf__content { position: relative; padding: 28px 30px; }
.cf-root .cf-pf__kicker {
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); letter-spacing: var(--cf-track);
  text-transform: var(--cf-tt); color: var(--cf-accent);
}
.cf-root .cf-pf__title { margin-top: 8px; font-family: var(--cf-font); font-size: 21px; font-weight: 700; color: var(--cf-text); }
.cf-root .cf-pf__sub { margin-top: 6px; font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-text-muted); }
.cf-root .cf-pf__cta {
  display: inline-flex; margin-top: 18px; padding: 7px 16px;
  border: var(--cf-bw) solid var(--cf-accent-dim); border-radius: calc(var(--cf-r) - 2px);
  font-family: var(--cf-font-data); font-size: var(--cf-fs-body); color: var(--cf-accent);
  background: var(--cf-accent-soft);
}
/* 降级兜底：背景渐变本身就是无 WebGL 时的全部效果，角标只作提示 */
.cf-root .cf-pf[data-dj3d-fallback]::after {
  content: '2D 兜底'; position: absolute; right: 10px; bottom: 8px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}
/* SurfaceChart · 3D 折线/曲面图 */
.cf-root .cf-s3d {
  position: relative; overflow: hidden;
  border: var(--cf-bw) solid var(--cf-border); border-radius: var(--cf-r);
  min-height: 300px;
  background:
    radial-gradient(120% 100% at 72% 0%, var(--cf-accent-soft), transparent 55%),
    var(--cf-bg-sunken);
}
.cf-root .cf-s3d__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; cursor: grab; }
.cf-root .cf-s3d__canvas.is-dragging { cursor: grabbing; }
.cf-root .cf-s3d__legend {
  position: absolute; left: 14px; top: 12px; z-index: 1;
  display: flex; gap: 14px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-label); color: var(--cf-text-muted);
}
.cf-root .cf-s3d__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--cf-accent); }
.cf-root .cf-s3d__hint {
  position: absolute; right: 12px; bottom: 8px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}
.cf-root .cf-s3d[data-dj3d-fallback]::after {
  content: '2D 兜底'; position: absolute; right: 10px; bottom: 8px;
  font-family: var(--cf-font-data); font-size: var(--cf-fs-caption); color: var(--cf-text-dim);
}


/* 图表线型必须排在组件样式之后：scoped 前缀会把 [data-cf-c] 抬成 .cf-root [data-cf-c]，
   与皮肤规则同权重，只能靠顺序取胜。 */
/* 图表线型：冷科幻 HUD 走折线 */
:root[data-skin="hud"] [data-cf-c="smooth"],
.cf-root[data-skin="hud"] [data-cf-c="smooth"] { display: none; }
:root[data-skin="hud"] [data-cf-c="linear"],
.cf-root[data-skin="hud"] [data-cf-c="linear"] { display: inline; }

/* 图表线型：工业终端 走折线 */
:root[data-skin="crt"] [data-cf-c="smooth"],
.cf-root[data-skin="crt"] [data-cf-c="smooth"] { display: none; }
:root[data-skin="crt"] [data-cf-c="linear"],
.cf-root[data-skin="crt"] [data-cf-c="linear"] { display: inline; }

/* 图表线型：毒液 走折线 */
:root[data-skin="venom"] [data-cf-c="smooth"],
.cf-root[data-skin="venom"] [data-cf-c="smooth"] { display: none; }
:root[data-skin="venom"] [data-cf-c="linear"],
.cf-root[data-skin="venom"] [data-cf-c="linear"] { display: inline; }

/* 图表线型：极简灰 走折线 */
:root[data-skin="mono"] [data-cf-c="smooth"],
.cf-root[data-skin="mono"] [data-cf-c="smooth"] { display: none; }
:root[data-skin="mono"] [data-cf-c="linear"],
.cf-root[data-skin="mono"] [data-cf-c="linear"] { display: inline; }

/* 图表线型：石墨 走折线 */
:root[data-skin="slate"] [data-cf-c="smooth"],
.cf-root[data-skin="slate"] [data-cf-c="smooth"] { display: none; }
:root[data-skin="slate"] [data-cf-c="linear"],
.cf-root[data-skin="slate"] [data-cf-c="linear"] { display: inline; }

/* 图表线型：纸面 走折线 */
:root[data-skin="paper"] [data-cf-c="smooth"],
.cf-root[data-skin="paper"] [data-cf-c="smooth"] { display: none; }
:root[data-skin="paper"] [data-cf-c="linear"],
.cf-root[data-skin="paper"] [data-cf-c="linear"] { display: inline; }

}