/**
 * Lingjing Core - CSS Variables (Design Tokens)
 *
 * 灵境核心设计令牌 - CSS变量定义
 * 基于 design-tokens.csv 生成
 *
 * @version 2.6.2
 * @see ../../../data/design-tokens.csv
 */

/* -------------------------- */
/* CSS Reset - 基础重置 */
/* -------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--theme-bg-base);
  color: var(--text-primary);
  transition: background-color var(--anim-duration-normal) ease;
}

/* ============================================================================
  Light Mode (Default)
  ========================================================================= */


:root {
  /* Core Brand Colors - 核心品牌?*/
  --color-aero-blue: #0066CC;
  --color-aero-blue-rgb: 0, 102, 204;
  --color-pulse-cyan: #0099AA;
  --color-pulse-cyan-rgb: 0, 153, 170;
  --color-signal-green: #00A383;
  --color-signal-green-rgb: 0, 163, 131;
  --color-warning-amber: #D97706;
  --color-warning-amber-rgb: 217, 119, 6;
  --color-error-red: #DC2626;
  --color-error-red-rgb: 220, 38, 38;
  --color-info-indigo: #4338CA;
  --color-info-indigo-rgb: 67, 56, 202;

  /* Semantic Feedback Colors - 语义化反馈色 */
  --success-base: var(--color-signal-green);
  --warning-base: var(--color-warning-amber);
  --error-base: var(--color-error-red);
  --danger-base: var(--color-error-red);
  --info-base: var(--color-info-indigo);

  /* Neutral Colors - 中性色梯度 (浅色主题) */
  /* 用于背景、边框、文本等中性元素，从浅到深 */
  --neutral-50: #F8FAFC;   /* 最?- 用于表格表头、次要背?*/
  --neutral-100: #F1F5F9;  /* 很浅 - 用于悬停背景 */
  --neutral-200: #E2E8F0;  /* ?- 用于禁用背景、分割线 */
  --neutral-300: #CBD5E1;  /* 稍浅 - 用于边框、图?*/
  --neutral-400: #94A3B8;  /* 中等偏浅 - 用于占位符文?*/
  --neutral-500: #64748B;  /* 中等 - 用于次要文字 */
  --neutral-600: #475569;  /* 中等偏深 - 用于正文 */
  --neutral-700: #334155;  /* ?- 用于标题 */
  --neutral-800: #1E293B;  /* 很深 - 用于强调标题 */
  --neutral-900: #0F172A;  /* 最?- 用于主标题、重要文?*/

  /* Neutral RGB 通道 (浅色主题) - 供 rgba() 组合透明度使用 */
  --neutral-100-rgb: 241, 245, 249;
  --neutral-200-rgb: 226, 232, 240;
  --neutral-300-rgb: 203, 213, 225;

  /* Neutral Colors with Alpha - 带透明度的中性色 (浅色主题) */
  /* 用于玻璃拟态效果、叠加层等需要透明度的场景 */
  --neutral-white-alpha-90: rgba(255, 255, 255, 0.9);   /* 高透明白色背景 */
  --neutral-white-alpha-95: rgba(255, 255, 255, 0.95);  /* 中透明白色背景 */
  --neutral-white-alpha-98: rgba(255, 255, 255, 0.98);  /* 低透明白色背景 */
  --neutral-50-alpha-10: rgba(248, 250, 252, 0.1);      /* 极浅背景叠加 */
  --neutral-300-alpha-10: rgba(203, 213, 225, 0.1);     /* 浅色边框叠加 */
  --neutral-300-alpha-15: rgba(203, 213, 225, 0.15);    /* 浅色背景叠加 */

  /* Core Base Colors - 核心基础?(浅色模式) */
  --color-bg-light: #EFF6FF;             /* 页面背景?*/
  --color-text-primary-light: #0F172A;   /* 主文字颜?*/
  --color-text-secondary-light: #475569; /* 次要文字颜色 */
  --color-bg-nav-light: rgba(255, 255, 255, 0.95); /* 导航栏背?*/

  /* Theme Colors - 主题?*/
  --theme-primary: var(--color-aero-blue);
  --theme-secondary: var(--color-pulse-cyan);
  --theme-accent: var(--color-signal-green);
  --theme-bg-base: var(--color-bg-light);
  --theme-text-primary: var(--color-text-primary-light);
  --theme-text-secondary: var(--color-text-secondary-light);

  /* Background - 背景 */
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.98);
  --bg-input: #FFFFFF;
  --bg-nav: var(--color-bg-nav-light);
  --bg-base: var(--theme-bg-base);
  --bg-secondary: var(--neutral-100);
  --bg-elevated: var(--bg-card);

  /* Border - 边框 */
  --theme-border-base: rgba(28, 102, 196, 0.4);
  --glass-border: 1px solid rgba(28, 102, 196, 0.15);
  --border-glass: 1px solid rgba(28, 102, 196, 0.15);

  /* Shadow - 阴影 */
  --glass-shadow: 0 8px 32px rgba(28, 102, 196, 0.08);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 12px 24px rgba(0, 132, 255, 0.2);

  /* Typography - 字体 */
  --font-h1: "Kingsoft Cloud", "Noto Sans SC", sans-serif;
  --font-h2: "Source Han Mono CN Bold", "Noto Sans SC", sans-serif;
  --font-body: "Source Han Mono CN Regular", "Noto Sans SC", sans-serif;
  --font-mono: "Source Han Mono CN", "JetBrains Mono", monospace;

  /* Font Size - 字号 */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 0.9375rem; /* 15px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-2xl: 2rem;     /* 32px */
  --font-size-3xl: 2.5rem;   /* 40px */

  /* Font Weight - 字重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing - 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;

  /* Radius - 圆角 */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Breakpoints - 响应式断点 */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Glass Effect - 玻璃拟?*/

  --glass-opacity: 0.98;
  --glass-blur: 16px;

  /* Animation - 动画 */
  --anim-duration-fast: 150ms;
  --anim-duration-normal: 300ms;
  --anim-duration-slow: 500ms;
  --anim-ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --anim-ease-out: cubic-bezier(0.2, 0.0, 0, 1.0);
  --anim-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* 背景补充 - Additional Backgrounds */
  --bg-card-light: rgba(245, 248, 255, 0.9);
  --bg-card-heavy: rgba(255, 255, 255, 0.95);
  --bg-card-solid: rgba(255, 255, 255, 1);
  --bg-glass-hover: rgba(255, 255, 255, 0.92);
  --bg-glass-accent: rgba(0, 102, 204, 0.05);
  --bg-primary: rgba(239, 246, 255, 1);

  /* 模糊效果 - Blur Effects */
  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 16px;

  /* 玻璃边框细化 - Glass Border Variants */
  --glass-border-light: rgba(28, 102, 196, 0.1);
  --glass-border-medium: rgba(28, 102, 196, 0.2);
  --glass-border-heavy: rgba(28, 102, 196, 0.3);
  --glass-border-hover: rgba(0, 102, 204, 0.3);

  /* 玻璃叠加?- Glass Overlays */
  --glass-overlay-light: rgba(255, 255, 255, 0.1);
  --glass-overlay-medium: rgba(0, 132, 255, 0.05);
  --glass-overlay-dark: rgba(0, 0, 0, 0.05);

  /* 玻璃阴影细化 - Glass Shadow Variants */
  --glass-shadow-light: 0 4px 16px rgba(28, 102, 196, 0.08);
  --glass-shadow-heavy: 0 16px 48px rgba(28, 102, 196, 0.2);
  --glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --glass-inset-shadow-heavy: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* 光晕效果 - Glow Effects */
  --glow-primary: 0 0 20px rgba(0, 102, 204, 0.2);
  --glow-secondary: 0 0 20px rgba(0, 153, 170, 0.15);

  /* 输入和表?- Input & Forms */
  --input-bg: rgba(255, 255, 255, 1);
  --input-border: 1px solid rgba(28, 102, 196, 0.2);
  --input-placeholder: #9CA3AF;

  /* 渐变 - Gradients */
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.95));

  /* 导航 - Navigation */
  --nav-bg-light: rgba(255, 255, 255, 0.95);
  --nav-border-light: rgba(28, 102, 196, 0.1);
  --nav-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* 边框 - Borders */
  --border-primary: rgba(28, 102, 196, 0.2);
  --card-border-dark: rgba(0, 102, 204, 0.15);

  /* 文本颜色 - Text Colors */
  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-500);
  --text-tertiary: var(--neutral-400);
  --text-placeholder: var(--neutral-400);

  /* 按钮 - Buttons */
  --btn-padding-sm: 0 12px;
  --btn-padding-md: 0 16px;
  --btn-padding-lg: 0 24px;
  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  --btn-font-sm: 0.75rem;
  --btn-font-md: 0.875rem;
  --btn-font-lg: 1rem;
  --btn-icon-size-sm: 14px;
  --btn-icon-size-md: 16px;
  --btn-icon-size-lg: 18px;

  /* 交互控件 - Interactive Controls */
  --control-height-sm: var(--btn-height-sm);
  --control-height-md: var(--btn-height-md);
  --control-height-lg: var(--btn-height-lg);
  --control-font-sm: var(--btn-font-sm);
  --control-font-md: var(--btn-font-md);
  --control-font-lg: var(--btn-font-lg);
  --control-padding-inline-sm: 12px;
  --control-padding-inline-md: 16px;
  --control-padding-inline-lg: 24px;

  /* 表单控件高度 - Form Control Height */
  --form-select-height: var(--control-height-md); /* 36px，与 md 按钮高度对齐 */
  --form-input-height: var(--control-height-md);  /* 36px，与 md 按钮高度对齐 */

  /* 顶部筛选区 / 查询工具栏 - Toolbar Combo */
  --toolbar-gap: var(--spacing-md);
  --toolbar-action-gap: var(--spacing-sm);
  --toolbar-search-basis: 320px;
  --toolbar-search-min: 240px;
  --toolbar-search-max: 560px;
  --toolbar-filter-basis: 180px;
  --toolbar-field-basis: 180px;
  --toolbar-field-min: 140px;
  --toolbar-field-max: 240px;

  /* 滚动条与状态标签 - Scrollbar & Badge */
  --scrollbar-size: 6px;
  --badge-height-sm: 24px;
  --badge-padding-inline-sm: 10px;

  /* 容器 - Containers */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* 状态背景 - Status Backgrounds (10% Opacity) */
  --bg-status-info: rgba(0, 102, 204, 0.1);
  --bg-status-success: rgba(0, 163, 131, 0.1);
  --bg-status-warning: rgba(217, 119, 6, 0.1);
  --bg-status-error: rgba(220, 38, 38, 0.1);
  --bg-status-neutral: rgba(100, 116, 139, 0.1);

  /* 表格 - Table */
  --bg-table-zebra: rgba(0, 102, 204, 0.005);

  /* UE 专用变量 - UE Specific */
  --ue-bg-glass: rgba(0, 0, 0, 0.7);
  --ue-border-glow: 1px solid rgba(0, 229, 255, 0.3);
  --ue-shadow-prism: 0 8px 32px rgba(0, 132, 255, 0.2),
                     inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --ue-gradient-data-highlight: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6));
  --ue-text-highlight: #00E5FF;

  /* 网格 - Grid */
  --grid-gap-sm: 12px;
  --grid-gap-md: 16px;
  --grid-gap-lg: 24px;
}

/* ============================================================================
   Dark Mode
   ========================================================================= */

[data-theme="dark"] {
  /* 告知浏览器当前为深色环境，使原生控件（日期选择器图标等）自动切换为浅色 */
  color-scheme: dark;

  /* Core Brand Colors - 核心品牌?*/
  --color-aero-blue: #0084FF;
  --color-aero-blue-rgb: 0, 132, 255;
  --color-pulse-cyan: #00E5FF;
  --color-pulse-cyan-rgb: 0, 229, 255;
  --color-signal-green: #00FFC8;
  --color-signal-green-rgb: 0, 255, 200;
  --color-warning-amber: #FFB020;
  --color-warning-amber-rgb: 255, 176, 32;
  --color-error-red: #FF4D4F;
  --color-error-red-rgb: 255, 77, 79;
  --color-info-indigo: #818CF8;
  --color-info-indigo-rgb: 129, 140, 248;

  /* Semantic Feedback Colors - 语义化反馈色 */
  --success-base: var(--color-signal-green);
  --warning-base: var(--color-warning-amber);
  --error-base: var(--color-error-red);
  --danger-base: var(--color-error-red);
  --info-base: var(--color-info-indigo);

  /* Neutral Colors - 中性色梯度 (深色主题) */
  /* 用于背景、边框、文本等中性元素，从浅到深 */
  --neutral-50: #F8FAFC;   /* 最?- 用于高亮文字、强调文?*/
  --neutral-100: #E5E7EB;  /* 很浅 - 用于主文?*/
  --neutral-200: #D1D5DB;  /* ?- 用于次要内容 */
  --neutral-300: #9CA3AF;  /* 稍浅 - 用于辅助文字 */
  --neutral-400: #6B7280;  /* 中等偏浅 - 用于占位符、图?*/
  --neutral-500: #4B5563;  /* 中等 - 用于禁用文字 */
  --neutral-600: #374151;  /* 中等偏深 - 用于边框 */
  --neutral-700: #1F2937;  /* ?- 用于分割线、深色边?*/
  --neutral-800: #111827;  /* 很深 - 用于深色背景 */
  --neutral-900: #030712;  /* 最?- 用于最深背景元?*/

  /* Neutral RGB 通道 (深色主题) - 供 rgba() 组合透明度使用 */
  --neutral-100-rgb: 229, 231, 235;
  --neutral-200-rgb: 209, 213, 219;
  --neutral-300-rgb: 156, 163, 175;

  /* Neutral Colors with Alpha - 带透明度的中性色 (深色主题) */
  /* 用于玻璃拟态效果、叠加层等需要透明度的场景 */
  --neutral-900-alpha-40: rgba(3, 7, 18, 0.4);      /* 深色背景叠加 */
  --neutral-900-alpha-60: rgba(3, 7, 18, 0.6);      /* 深色卡片背景 */
  --neutral-900-alpha-80: rgba(3, 7, 18, 0.8);      /* 深色实心背景 */
  --neutral-800-alpha-60: rgba(17, 24, 39, 0.6);    /* 深色玻璃背景 */
  --neutral-700-alpha-70: rgba(31, 41, 55, 0.7);    /* 浅深色背?*/
  --neutral-black-alpha-05: rgba(0, 0, 0, 0.05);    /* 极浅黑色叠加 */
  --neutral-black-alpha-20: rgba(0, 0, 0, 0.2);     /* 浅黑色叠?*/

  /* Core Base Colors - 核心基础?(深色模式) */
  --color-bg-dark: #000000;              /* 页面背景?- 纯黑 */
  --color-text-primary-dark: #F8FAFC;    /* 主文字颜?*/
  --color-text-secondary-dark: #94A3B8;  /* 次要文字颜色 */
  --color-bg-nav-dark: rgba(5, 10, 20, 0.85); /* 导航栏背?*/
  --bg-secondary: rgba(30, 41, 59, 0.5);   /* 次要背景 */

  /* Theme Colors - 主题?*/
  --theme-primary: var(--color-aero-blue);
  --theme-secondary: var(--color-pulse-cyan);
  --theme-accent: var(--color-signal-green);
  --theme-bg-base: var(--color-bg-dark);
  --theme-text-primary: var(--color-text-primary-dark);
  --theme-text-secondary: var(--color-text-secondary-dark);

  /* Background - 背景 */
  --bg-card: rgba(15, 30, 60, 0.8);
  --bg-glass: rgba(10, 20, 40, 0.85);
  --bg-input: rgba(30, 41, 59, 0.5);
  --bg-nav: var(--color-bg-nav-dark);
  --bg-base: var(--theme-bg-base);
  --bg-elevated: var(--bg-card-heavy);

  /* Border - 边框 (深色主题边框规范：默认通透蓝色，hover 高亮蓝色) */
  --theme-border-base: rgba(0, 132, 255, 0.4);
  --glass-border: 1px solid rgba(0, 132, 255, 0.12);
  --border-glass: 1px solid rgba(0, 132, 255, 0.12);

  /* Shadow - 阴影 (深色主题默认无投影，hover 时才显示) */
  --glass-shadow: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-hover: 0 12px 40px rgba(0, 132, 255, 0.3),
                  0 2px 4px rgba(0, 0, 0, 0.4),
                  inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Glass Effect - 玻璃拟?*/
  --glass-opacity: 0.85;
  --glass-blur: 24px;

  /* 背景补充 - Additional Backgrounds */
  --bg-card-light: rgba(30, 41, 59, 0.7);
  --bg-card-heavy: rgba(15, 30, 60, 0.95);
  --bg-card-solid: rgba(10, 20, 40, 1);
  --bg-glass-hover: rgba(10, 20, 40, 0.88);
  --bg-glass-accent: rgba(0, 132, 255, 0.08);
  --bg-primary: rgba(2, 4, 10, 1);

  /* 模糊效果 - Blur Effects */
  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 24px;

  /* 玻璃边框细化 - Glass Border Variants */
  --glass-border-light: rgba(0, 132, 255, 0.08);
  --glass-border-medium: rgba(0, 132, 255, 0.12);
  --glass-border-heavy: rgba(0, 132, 255, 0.18);
  --glass-border-hover: rgba(0, 132, 255, 0.4);

  /* 玻璃叠加?- Glass Overlays */
  --glass-overlay-light: rgba(0, 132, 255, 0.08);
  --glass-overlay-medium: rgba(0, 132, 255, 0.1);
  --glass-overlay-dark: rgba(0, 0, 0, 0.2);

  /* 玻璃阴影细化 - Glass Shadow Variants (默认无投? */
  --glass-shadow-light: none;
  --glass-shadow-heavy: none;
  --glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-inset-shadow-heavy: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* 光晕效果 - Glow Effects */
  --glow-primary: 0 0 25px rgba(0, 132, 255, 0.3);
  --glow-secondary: 0 0 25px rgba(0, 229, 255, 0.2);

  /* 输入和表?- Input & Forms */
  --input-bg: rgba(15, 30, 60, 0.9);
  --input-border: 1px solid rgba(0, 132, 255, 0.12);
  --input-placeholder: #6B7280;

  /* 渐变 - Gradients */
  --gradient-glass: linear-gradient(135deg, rgba(10, 20, 40, 0.85), rgba(15, 30, 60, 0.8));

  /* 导航 - Navigation */
  --nav-bg-light: rgba(15, 30, 60, 0.95);
  --nav-border-light: rgba(0, 132, 255, 0.2);
  --nav-shadow-light: 0 1px 3px rgba(0, 132, 255, 0.1);

  /* 边框 - Borders */
  --border-primary: rgba(0, 132, 255, 0.3);
  --card-border-dark: rgba(0, 132, 255, 0.2);

  /* 文本颜色 - Text Colors */
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-300);
  --text-placeholder: var(--neutral-400);

  /* 状态背景 - Status Backgrounds (15% Opacity) */
  --bg-status-info: rgba(0, 132, 255, 0.15);
  --bg-status-success: rgba(0, 255, 200, 0.15);
  --bg-status-warning: rgba(255, 176, 32, 0.15);
  --bg-status-error: rgba(255, 77, 79, 0.15);
  --bg-status-neutral: rgba(148, 163, 184, 0.15);

  /* 表格 - Table */
  --bg-table-zebra: rgba(0, 132, 255, 0.01);

  /* UE 专用变量 - UE Specific */
  --ue-bg-glass: rgba(0, 0, 0, 0.8);
  --ue-border-glow: 1px solid rgba(0, 229, 255, 0.4);
  --ue-shadow-prism: 0 8px 32px rgba(0, 132, 255, 0.3),
                     inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --ue-gradient-data-highlight: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7));
  --ue-text-highlight: #00E5FF;
}

/* ============================================================================
   Usage Example
   ========================================================================= */

/*
## 中性色梯度使用指南

### 基础中性色 (--neutral-50 ?--neutral-900)
用于文本、图标、边框等不需要透明度的元素?
浅色主题?- --neutral-50 ?--neutral-300: 浅色背景、分割线
- --neutral-400 ?--neutral-500: 次要文字、占位符
- --neutral-600 ?--neutral-900: 正文、标题、重要文?
深色主题?- --neutral-50 ?--neutral-300: 文字内容（从强调到辅助）
- --neutral-400 ?--neutral-500: 占位符、禁用文?- --neutral-600 ?--neutral-900: 边框、背景元素（从浅到深?
示例?.text-primary {
  color: var(--neutral-800);  // 浅色主题：深色文字，深色主题：浅色文字（通过 --text-primary 语义化变量）
}

.divider {
  background: var(--neutral-200);
}

### 带透明度的中性色 (--neutral-*-alpha-*)
用于玻璃拟态效果、叠加层、半透明背景等场景：

浅色主题?- --neutral-white-alpha-*: 白色透明背景
- --neutral-50-alpha-*: 浅色叠加?- --neutral-300-alpha-*: 浅色边框、背景叠?
深色主题?- --neutral-900-alpha-*: 深色背景叠加
- --neutral-800-alpha-*: 深色玻璃背景
- --neutral-black-alpha-*: 黑色叠加?
示例?.glass-card {
  background: var(--neutral-white-alpha-90);  // 浅色主题
}

[data-theme="dark"] .glass-card {
  background: var(--neutral-900-alpha-60);    // 深色主题
}

### 语义化变量引?推荐通过语义化变量来使用中性色，这样可以在不同主题下自动适配?
--text-primary: var(--neutral-800);     // 主文字颜?--text-secondary: var(--neutral-500);   // 次要文字颜色
--text-placeholder: var(--neutral-400); // 占位符颜?
## 玻璃拟态卡片示?
.card {
  background: var(--bg-glass);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: all var(--anim-duration-normal) var(--anim-ease-emphasized);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
*/



/**
 * Lingjing Core - Token Aliases
 *
 * 语义兼容层：用于桥接旧变量命名与当前主题令牌，优先保证 v3.1
 * 架构收敛阶段的稳定性，避免未定义变量继续进入正式产物。
 */

:root {
  /* Brand aliases */
  --brand-primary: var(--theme-primary);
  --brand-secondary: var(--theme-secondary);
  --brand-success: var(--success-base);
  --brand-warning: var(--warning-base);
  --brand-error: var(--error-base);
  --brand-info: var(--info-base);

  /* Background aliases */
  --bg-base: var(--theme-bg-base);
  --bg-secondary: var(--bg-card-light);
  --bg-elevated: var(--bg-card-heavy);
  --bg-tertiary: var(--bg-card-solid);
  --bg-card-dark: var(--bg-card-heavy);
  --bg-hover: var(--glass-overlay-light);
  --bg-active: var(--glass-overlay-medium);
  --theme-bg-secondary: var(--bg-card-light);
  --theme-bg-tertiary: var(--bg-card-solid);
  --color-background-dark: var(--neutral-900);

  /* Text aliases */
  --text-tertiary: var(--text-placeholder);
  --text-disabled: var(--neutral-400);
  --text-primary-dark: var(--theme-text-primary);
  --text-secondary-dark: var(--theme-text-secondary);


  /* Border aliases */
  --border-secondary: var(--nav-border-light);
  --theme-border-light: var(--nav-border-light);

  /* Effect aliases */
  --shadow-dialog: var(--shadow-lg);

  /* Radius aliases */
  --border-radius-sm: var(--radius-sm);
  --border-radius-md: var(--radius-md);
  --border-radius-lg: var(--radius-lg);

  /* Spacing aliases */
  --spacing-xxl: var(--spacing-2xl);

  /* Layer aliases */
  --z-tooltip: 1080;
}

[data-theme="dark"] {
  --bg-card-dark: var(--bg-card-heavy);
  --bg-hover: var(--glass-overlay-light);
  --bg-active: var(--glass-overlay-medium);
  --theme-bg-secondary: var(--bg-card-light);
  --theme-bg-tertiary: var(--bg-card-solid);
  --color-background-dark: var(--neutral-900);
  --border-secondary: var(--nav-border-light);
  --theme-border-light: var(--nav-border-light);
  --text-disabled: var(--neutral-500);
  --text-primary-dark: var(--theme-text-primary);
  --text-secondary-dark: var(--theme-text-secondary);
  --shadow-dialog: var(--shadow-lg);
}



/**
 * Scrollbar - 全局滚动条样式
 * 低干扰、主题自适应（浅色偏灰，深色偏暗）
 */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.62);
}

[data-theme="dark"] * {
  scrollbar-color: rgba(71, 85, 105, 0.42) transparent;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.42);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.52);
}


/**
 * Lingjing Core - Utility Classes
 *
 * @version 2.6.2
 * @description 常用实用工具类，提供快速布局和样式调整能?
 * @author Lingjing Core Team
 * @license MIT
 * @update 2026-02-21 - 优化CSS文件复制指引，明确建议使用RunCommand直接复制文件，避免Read工具截断
 *
 * 包含?
 * - 布局工具类（Flexbox, Grid?
 * - 间距工具类（Gap, Margin, Padding?
 * - 对齐工具类（Alignment?
 * - 尺寸工具类（Width, Height?
 * - 显示工具类（Display, Visibility?
 * - 文本工具类（Text alignment, Color?
 * - v2.0.3新增：常用辅助类?stats-grid, .charts-grid, .chart-placeholder, .action-buttons?
 */

/* ============================================================================
   布局工具?- Layout Utilities
   ========================================================================= */

/**
 * Flexbox 布局
 */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

/**
 * Grid 布局
 * .grid-cols-* 为自包含类，自带 display:grid 和默认 gap。
 * 无需额外添加 .grid，可直接单独使用。
 */

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

/* 所有 grid-cols-* 共享：激活 grid 容器 + 默认列间距 */
.grid-cols-1,
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-5,
.grid-cols-6,
.grid-cols-7,
.grid-cols-8,
.grid-cols-9,
.grid-cols-10,
.grid-cols-11,
.grid-cols-12,
.grid-cols-auto {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}



/* ============================================================================
   间距工具?- Spacing Utilities
   ========================================================================= */

/**
 * Gap（用?Flexbox ?Grid?
 */
.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-2xl {
  gap: var(--spacing-2xl);
}

/**
 * Margin
 */
.m-0 {
  margin: 0;
}

.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.my-2xl {
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-auto {
  margin-left: auto;
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-auto {
  margin-right: auto;
}

/**
 * Padding
 */
.p-0 {
  padding: 0;
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

/* ============================================================================
   对齐工具?- Alignment Utilities
   ========================================================================= */

/**
 * Flexbox 对齐
 */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.content-start {
  align-content: flex-start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-stretch {
  align-content: stretch;
}

/**
 * 自对?
 */

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.self-end {
  align-self: flex-end;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}


/* ============================================================================
   尺寸工具?- Size Utilities
   ========================================================================= */

/**
 * Width
 */
.w-full {
  width: 100%;
}

.w-3\/4 {
  width: 75%;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333%;
}

.w-1\/4 {
  width: 25%;
}

.w-auto {
  width: auto;
}

.w-screen {
  width: 100vw;
}

.w-fit {
  width: fit-content;
}

.max-w-xs {
  max-width: 20rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.min-w-0 {
  min-width: 0;
}

.min-w-full {
  min-width: 100%;
}


/**
 * Height
 */
.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-screen {
  height: 100vh;
}

.h-fit {
  height: fit-content;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}


/* ============================================================================
   显示工具?- Display Utilities
   ========================================================================= */

/**
 * Display
 */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.hidden {
  display: none;
}

/* Legacy display utilities (迁移自 components.css) */
.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.d-block {
  display: block;
}

.d-inline-block {
  display: inline-block;
}

.d-grid {
  display: grid;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

/**
 * Visibility
 */

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/**
 * Overflow
 */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* ============================================================================
   文本工具?- Text Utilities
   ========================================================================= */

/**
 * Text Alignment
 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-break-spaces {
  white-space: break-spaces;
}

/**
 * Text Color
 */

.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-placeholder {
  color: var(--text-placeholder);
}

.text-blue {
  color: var(--color-aero-blue);
}

.text-cyan {
  color: var(--color-pulse-cyan);
}

.text-green {
  color: var(--color-signal-green);
}

.text-amber {
  color: var(--color-warning-amber);
}

.text-red {
  color: var(--color-error-red);
}

/* Legacy text color aliases (迁移自 components.css) */
.text-aero-blue {
  color: var(--color-aero-blue);
}

.text-pulse-cyan {
  color: var(--color-pulse-cyan);
}

.text-signal-green {
  color: var(--color-signal-green);
}

/**
 * Font Weight
 */

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/**
 * Font Size
 */
.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-md);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

/**
 * Line Height
 */
.leading-tight {
  line-height: 1.25;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.75;
}

/**
 * Text Transform
 */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

/**
 * Text Decoration
 */
.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

/* Legacy text-* variants (迁移自 components.css) */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-normal-case {
  text-transform: none;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-decoration-overline {
  text-decoration: overline;
}

.text-indent-0 {
  text-indent: 0;
}

.text-indent-1 {
  text-indent: 0.25rem;
}

.text-indent-2 {
  text-indent: 0.5rem;
}

.text-indent-3 {
  text-indent: 0.75rem;
}

.text-indent-4 {
  text-indent: 1rem;
}

.text-indent-5 {
  text-indent: 1.25rem;
}

.text-indent-6 {
  text-indent: 1.5rem;
}

.text-indent-7 {
  text-indent: 1.75rem;
}

.text-indent-8 {
  text-indent: 2rem;
}

.list-none {
  list-style-type: none;
}

.list-disc {
  list-style-type: disc;
}

.list-circle {
  list-style-type: circle;
}

.list-square {
  list-style-type: square;
}

.list-decimal {
  list-style-type: decimal;
}

.list-decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

.list-lower-roman {
  list-style-type: lower-roman;
}

.list-upper-roman {
  list-style-type: upper-roman;
}

.list-lower-alpha {
  list-style-type: lower-alpha;
}

.list-upper-alpha {
  list-style-type: upper-alpha;
}

.list-inside {
  list-style-position: inside;
}

.list-outside {
  list-style-position: outside;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clear-both {
  clear: both;
}

.clear-none {
  clear: none;
}

/* ============================================================================
   背景工具?- Background Utilities
   ========================================================================= */


/**
 * Background Color
 */
.bg-transparent {
  background-color: transparent;
}

.bg-card {
  background-color: var(--bg-card);
}

.bg-base {
  background-color: var(--theme-bg-base);
}

.bg-blue {
  background-color: var(--color-aero-blue);
}

.bg-cyan {
  background-color: var(--color-pulse-cyan);
}

.bg-green {
  background-color: var(--color-signal-green);
}

/* Legacy background aliases (迁移自 components.css) */
.bg-aero-blue {
  background: var(--color-aero-blue);
}

.bg-pulse-cyan {
  background: var(--color-pulse-cyan);
}

.bg-signal-green {
  background: var(--color-signal-green);
}

.bg-warning-amber {
  background: var(--color-warning-amber);
}

.bg-error-red {
  background: var(--color-error-red);
}

.bg-card-light {
  background: var(--bg-card-light);
}

.bg-card-heavy {
  background: var(--bg-card-heavy);
}

.bg-card-solid {
  background: var(--bg-card-solid);
}

.bg-glass {
  background: var(--bg-glass);
}

.bg-glass-hover {
  background: var(--bg-glass-hover);
}

.bg-glass-accent {
  background: var(--bg-glass-accent);
}

/* 透明度工具类（迁移自 components.css） */

.opacity-0 {
  opacity: 0;
}

.opacity-5 {
  opacity: 0.05;
}

.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.opacity-95 {
  opacity: 0.95;
}

.opacity-100 {
  opacity: 1;
}

/* 混合模式工具类（迁移自 components.css） */
.mix-blend-normal {
  mix-blend-mode: normal;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.mix-blend-screen {
  mix-blend-mode: screen;
}

.mix-blend-overlay {
  mix-blend-mode: overlay;
}

.mix-blend-darken {
  mix-blend-mode: darken;
}

.mix-blend-lighten {
  mix-blend-mode: lighten;
}

.mix-blend-color-dodge {
  mix-blend-mode: color-dodge;
}

.mix-blend-color-burn {
  mix-blend-mode: color-burn;
}

.mix-blend-hard-light {
  mix-blend-mode: hard-light;
}

.mix-blend-soft-light {
  mix-blend-mode: soft-light;
}

.mix-blend-difference {
  mix-blend-mode: difference;
}

.mix-blend-exclusion {
  mix-blend-mode: exclusion;
}

.mix-blend-hue {
  mix-blend-mode: hue;
}

.mix-blend-saturation {
  mix-blend-mode: saturation;
}

.mix-blend-color {
  mix-blend-mode: color;
}

.mix-blend-luminosity {
  mix-blend-mode: luminosity;
}

.mix-blend-plus-lighter {
  mix-blend-mode: plus-lighter;
}

/* 过滤工具类（迁移自 components.css） */
.filter-none {
  filter: none;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* 模糊工具类（迁移自 components.css） */
.blur-none {
  --tw-blur: blur(0);
}

.blur-sm {
  --tw-blur: blur(4px);
}

.blur {
  --tw-blur: blur(8px);
}

.blur-md {
  --tw-blur: blur(12px);
}

.blur-lg {
  --tw-blur: blur(16px);
}

.blur-xl {
  --tw-blur: blur(24px);
}

.blur-2xl {
  --tw-blur: blur(40px);
}

.blur-3xl {
  --tw-blur: blur(64px);
}

/* 亮度工具类（迁移自 components.css） */
.brightness-0 {
  --tw-brightness: brightness(0);
}

.brightness-50 {
  --tw-brightness: brightness(0.5);
}

.brightness-75 {
  --tw-brightness: brightness(0.75);
}

.brightness-90 {
  --tw-brightness: brightness(0.9);
}

.brightness-95 {
  --tw-brightness: brightness(0.95);
}

.brightness-100 {
  --tw-brightness: brightness(1);
}

.brightness-105 {
  --tw-brightness: brightness(1.05);
}

.brightness-110 {
  --tw-brightness: brightness(1.1);
}

.brightness-125 {
  --tw-brightness: brightness(1.25);
}

.brightness-150 {
  --tw-brightness: brightness(1.5);
}

.brightness-200 {
  --tw-brightness: brightness(2);
}

/* 对比度工具类（迁移自 components.css） */
.contrast-0 {
  --tw-contrast: contrast(0);
}

.contrast-50 {
  --tw-contrast: contrast(0.5);
}

.contrast-75 {
  --tw-contrast: contrast(0.75);
}

.contrast-100 {
  --tw-contrast: contrast(1);
}

.contrast-125 {
  --tw-contrast: contrast(1.25);
}

.contrast-150 {
  --tw-contrast: contrast(1.5);
}

.contrast-200 {
  --tw-contrast: contrast(2);
}

/* 灰度工具类（迁移自 components.css） */
.grayscale-0 {
  --tw-grayscale: grayscale(0);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
}

/* 色相旋转工具类（迁移自 components.css） */
.hue-rotate-0 {
  --tw-hue-rotate: hue-rotate(0deg);
}

.hue-rotate-15 {
  --tw-hue-rotate: hue-rotate(15deg);
}

.hue-rotate-30 {
  --tw-hue-rotate: hue-rotate(30deg);
}

.hue-rotate-60 {
  --tw-hue-rotate: hue-rotate(60deg);
}

.hue-rotate-90 {
  --tw-hue-rotate: hue-rotate(90deg);
}

.hue-rotate-180 {
  --tw-hue-rotate: hue-rotate(180deg);
}

/* 反转工具类（迁移自 components.css） */
.invert-0 {
  --tw-invert: invert(0);
}

.invert {
  --tw-invert: invert(100%);
}

/* 饱和度工具类（迁移自 components.css） */
.saturate-0 {
  --tw-saturate: saturate(0);
}

.saturate-50 {
  --tw-saturate: saturate(0.5);
}

.saturate-100 {
  --tw-saturate: saturate(1);
}

.saturate-150 {
  --tw-saturate: saturate(1.5);
}

.saturate-200 {
  --tw-saturate: saturate(2);
}

/* 褐色工具类（迁移自 components.css） */
.sepia-0 {
  --tw-sepia: sepia(0);
}

.sepia {
  --tw-sepia: sepia(100%);
}

/* 投影工具类（迁移自 components.css） */
.drop-shadow-none {
  --tw-drop-shadow: drop-shadow(0 0 #0000);
}

.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.05));
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.06));
}

.drop-shadow-md {
  --tw-drop-shadow: drop-shadow(0 4px 6px rgb(0 0 0 / 0.1)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.06));
}

.drop-shadow-lg {
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.drop-shadow-xl {
  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

.drop-shadow-2xl {
  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
}

/* 过渡持续时间工具类（迁移自 components.css） */
.duration-75 {
  transition-duration: 75ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.duration-1000 {
  transition-duration: 1000ms;
}

/* ============================================================================
   边框工具?- Border Utilities
   ========================================================================= */


/**
 * Border Radius
 */
.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded {
  border-radius: var(--radius-md);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

/**
 * Border Width
 */
.border-0 {
  border: 0;
}

.border {
  border: var(--glass-border);
}


.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-8 {
  border-width: 8px;
}

/* Legacy border side utilities (迁移自 components.css) */
.border-t {
  border-top: 1px solid var(--glass-border);
}

.border-r {
  border-right: 1px solid var(--glass-border);
}

.border-b {
  border-bottom: 1px solid var(--glass-border);
}

.border-l {
  border-left: 1px solid var(--glass-border);
}

.border-t-2 {
  border-top-width: 2px;
}

.border-r-2 {
  border-right-width: 2px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-r-4 {
  border-right-width: 4px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-t-8 {
  border-top-width: 8px;
}

.border-r-8 {
  border-right-width: 8px;
}

.border-b-8 {
  border-bottom-width: 8px;
}

.border-l-8 {
  border-left-width: 8px;
}

/**
 * Border Color
 */
.border-primary {
  border-color: var(--border-primary);
}

.border-blue {
  border-color: var(--color-aero-blue);
}

/* Legacy border color aliases (迁移自 components.css) */
.border-aero-blue {
  border-color: var(--color-aero-blue);
}

.border-pulse-cyan {
  border-color: var(--color-pulse-cyan);
}

.border-signal-green {
  border-color: var(--color-signal-green);
}

.border-warning-amber {
  border-color: var(--color-warning-amber);
}

.border-error-red {
  border-color: var(--color-error-red);
}

.border-transparent {
  border-color: transparent;
}

/* Legacy border style utilities (迁移自 components.css) */
.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-double {
  border-style: double;
}

.border-hidden {
  border-style: hidden;
}

.border-none {
  border-style: none;
}

/* Legacy outline utilities (迁移自 components.css) */
.outline-none {
  outline: none;
}

.outline {
  outline: 2px solid currentColor;
}

.outline-0 {
  outline-width: 0;
}

.outline-1 {
  outline-width: 1px;
}

.outline-2 {
  outline-width: 2px;
}

.outline-4 {
  outline-width: 4px;
}

.outline-8 {
  outline-width: 8px;
}

.outline-offset-0 {
  outline-offset: 0;
}

.outline-offset-1 {
  outline-offset: 1px;
}

.outline-offset-2 {
  outline-offset: 2px;
}

.outline-offset-4 {
  outline-offset: 4px;
}

.outline-offset-8 {
  outline-offset: 8px;
}

/* ============================================================================
   阴影工具?- Shadow Utilities
   ========================================================================= */


.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: var(--shadow-soft);
}

.shadow {
  box-shadow: var(--shadow-card);
}

.shadow-md {
  box-shadow: var(--shadow-hover);
}

.shadow-lg {
  box-shadow: var(--shadow-elevated);
}

.shadow-glow {
  box-shadow: var(--glow-primary);
}

/* ============================================================================
   位置工具?- Position Utilities
   ========================================================================= */


.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.static {
  position: static;
}

/* Legacy position utilities (迁移自 components.css) */
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-static {
  position: static;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

/* Legacy z-index utilities (迁移自 components.css) */
.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

/* ============================================================================
   指针工具?- Cursor Utilities
   ========================================================================= */


.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ============================================================================
   选择工具?- Select Utilities
   ========================================================================= */

.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

/* ============================================================================
   过渡工具?- Transition Utilities
   ========================================================================= */

.transition-none {
  transition: none;
}

.transition-all {
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.transition-colors {
  transition: color var(--anim-duration-fast) var(--anim-ease-out),
              background-color var(--anim-duration-fast) var(--anim-ease-out),
              border-color var(--anim-duration-fast) var(--anim-ease-out);
}

.transition-transform {
  transition: transform var(--anim-duration-fast) var(--anim-ease-out);
}

/* Legacy transition speeds (迁移自 components.css) */
.transition-fast {
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.transition-normal {
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.transition-slow {
  transition: all var(--anim-duration-slow) var(--anim-ease-out);
}

/* ============================================================================
   动画工具?- Animation Utilities
   ========================================================================= */


.animate-breathe {
  animation: breathe 3s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   响应式断?- Responsive Breakpoints
   ========================================================================= */


/**
 * 在移动端隐藏
 */
@media (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }
}

/**
 * 在桌面端隐藏
 */
@media (min-width: 769px) {
  .hidden-desktop {
    display: none;
  }
}

/* ============================================================================
   常用辅助?- Common Helper Classes
   ========================================================================= */

/**
 * 统计卡片网格布局
 * 自适应列数，最?50px，自动填?
 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

/**
 * 图表网格布局
 * 自适应列数，最?00px，自动填?
 */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  min-width: 0;
}

/**
 * 图表占位?
 * 用于数据可视化的占位区域
 */
.chart-placeholder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 153, 170, 0.05));
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  overflow: hidden;
  min-width: 0;
}

/* 图表高度变体：覆盖默认 300px */
.chart--xxs { height: 128px; }
.chart--xs { height: 150px; }
.chart--sm { height: 160px; }
.chart--so { height: 168px; }
.chart--md { height: 180px; }
.chart--rg { height: 196px; }
.chart--lg { height: 240px; }

.chart-placeholder__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.4;
  font-size: var(--font-size-xs);
}

[data-theme="dark"] .chart-placeholder {
  background: linear-gradient(135deg, rgba(0, 132, 255, 0.08), rgba(0, 229, 255, 0.08));
}

/**
 * 操作按钮?
 * 用于表格操作列等场景
 */
.action-buttons {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* 分隔线工具类（迁移自 forms-b.css） */
.divider {
  height: 1px;
  background: var(--glass-border);
  margin: var(--spacing-lg) 0;
  border: none;
}

.divider-vertical {
  width: 1px;
  height: auto;
  background: var(--glass-border);
  margin: 0 var(--spacing-md);
  border: none;
}

[data-theme="dark"] .divider,
[data-theme="dark"] .divider-vertical {
  background: rgba(0, 132, 255, 0.15);
}


/* ============================================================================
   Demo演示专用?- Demo-specific Classes
   ========================================================================= */

/**
 * 演示说明卡片
 * 用于examples中展示说明信?
 */
.demo-info-card {
  background: var(--bg-card);
  border: 1px solid var(--theme-border-base);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.demo-info-card h3 {
  color: var(--color-aero-blue);
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.demo-info-card ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.demo-info-card li {
  margin: var(--spacing-sm) 0;
  color: var(--text-secondary);
}

.demo-info-card li strong {
  color: var(--text-primary);
}

/**
 * 网站演示说明区块
 * 用于website-complete.html?
 */
.demo-info {
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-2xl) 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.demo-info h3 {
  color: var(--color-aero-blue);
  margin-top: 0;
}

.demo-info ul {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

.demo-info li {
  margin: var(--spacing-sm) 0;
  color: var(--text-secondary);
}



/* Lingjing Core UE Components CSS */

/* -------------------------- */
/* UE 渐变与颜色工具类（迁移自 components.css） */
/* -------------------------- */

.ue-gradient-dark {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6));
}

.ue-bg-slate-medium {
  background: rgba(148, 163, 184, 0.5);
}

.ue-text-slate-light {
  color: #CBD5E1;
}

/* -------------------------- */
/* UE 重点操作/建议提示 (Focus Banner) */
/* -------------------------- */

.ue-focus-banner {
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: rgba(var(--ue5-overlay-brand-rgb), 0.18);
  border: 1px solid rgba(var(--ue5-overlay-brand-rgb), 0.42);
  border-left-width: 3px;
  box-shadow: none;
}

.ue-focus-banner__title {
  display: block;
  margin-bottom: 6px;
  color: #4f8df5;
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ue-focus-banner__content {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--ue5-overlay-text-base);
}

/* -------------------------- */
/* UE 重点操作/建议提示 (Focus Banner) */
/* -------------------------- */

.ue-focus-banner {
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background: rgba(var(--ue5-overlay-brand-rgb), 0.18);
  border: 1px solid rgba(var(--ue5-overlay-brand-rgb), 0.42);
  border-left: 3px solid #4f8df5;
  box-shadow: none;
}

.ue-focus-banner__title {
  display: block;
  margin-bottom: 6px;
  color: #4f8df5;
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ue-focus-banner__content {
  margin: 0;
  color: var(--ue5-overlay-text-base);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* -------------------------- */
/* UE卡片样式增强 */
/* -------------------------- */




/* 高级UE拟态卡?*/
.card-ue-advanced {
  background: var(--ue-bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-xl);
  box-shadow: var(--ue-shadow-prism), 0 0 30px rgba(0, 132, 255, 0.2);
  padding: var(--spacing-xl);
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.card-ue-advanced::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(0, 132, 255, 0.15),
    transparent,
    rgba(0, 229, 255, 0.1),
    transparent
  );
  border-radius: var(--radius-xl);
  pointer-events: none;
  animation: ue-advanced-border-glow 4s ease-in-out infinite;
}

.card-ue-advanced::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 20% 80%,
    rgba(0, 132, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.card-ue-advanced:hover {
  transform: translateY(-8px);
  box-shadow: 
    var(--ue-shadow-prism), 
    0 0 50px rgba(0, 132, 255, 0.4),
    0 0 100px rgba(0, 229, 255, 0.2);
  border-color: rgba(0, 229, 255, 0.6);
}

.card-ue-advanced .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.card-ue-advanced .card-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--ue-text-highlight);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
  margin: 0;
}

.card-ue-advanced .card-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px var(--spacing-sm);
  background: rgba(0, 132, 255, 0.2);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--ue-text-highlight);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card-ue-advanced .card-status::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-signal-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-signal-green);
  animation: ue-status-pulse 2s ease-in-out infinite;
}

.card-ue-advanced .card-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.card-ue-advanced .card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(0, 229, 255, 0.2);
  position: relative;
  z-index: 1;
}

/* Legacy UE拟态卡片（迁移自 components.css） */
.card-ue-mimetic {
  background: var(--ue-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-lg);
  box-shadow: var(--ue-shadow-prism);
  padding: var(--spacing-lg);
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
}

.card-ue-mimetic::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(45deg, transparent, rgba(0, 132, 255, 0.1), transparent);
  border-radius: var(--radius-lg);
  pointer-events: none;
  animation: ue-border-glow 3s ease-in-out infinite;
}

.card-ue-mimetic:hover {
  transform: translateY(-6px);
  box-shadow: var(--ue-shadow-prism), 0 0 40px rgba(0, 132, 255, 0.3);
  border-color: rgba(0, 229, 255, 0.5);
}

/* UE数据卡片 */
.card-ue-data {
  background: var(--ue-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-lg);
  box-shadow: var(--ue-shadow-prism);
  padding: var(--spacing-lg);
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.card-ue-data::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.05),
    transparent
  );
  pointer-events: none;
  animation: ue-data-flow 6s linear infinite;
}

.card-ue-data:hover {
  transform: translateY(-4px);
  box-shadow: var(--ue-shadow-prism), 0 0 25px rgba(0, 132, 255, 0.3);
  border-color: rgba(0, 229, 255, 0.4);
}

.card-ue-data .data-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.card-ue-data .data-icon {
  width: 48px;
  height: 48px;
  background: var(--ue-gradient-data-highlight);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

.card-ue-data .data-title {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--ue-text-highlight);
  margin: 0;
}

.card-ue-data .data-value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--ue-text-highlight);
  margin: var(--spacing-sm) 0;
  text-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
  font-family: var(--font-mono);
}

.card-ue-data .data-trend {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.card-ue-data .trend-up {
  color: var(--color-signal-green);
}

.card-ue-data .trend-down {
  color: var(--color-error-red);
}

/* UE控制面板 */
.ue-control-panel {
  background: var(--ue-bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-xl);
  box-shadow: var(--ue-shadow-prism), 0 0 40px rgba(0, 132, 255, 0.25);
  padding: var(--spacing-xl);
  position: relative;
  overflow: hidden;
}

.ue-control-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), transparent);
  pointer-events: none;
}

.ue-control-panel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), transparent);
  pointer-events: none;
}

.ue-control-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.ue-control-panel .panel-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--ue-text-highlight);
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.ue-control-panel .panel-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.ue-control-panel .control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.ue-control-panel .control-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ue-control-panel .control-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ue-control-panel .control-value {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--ue-text-highlight);
  font-family: var(--font-mono);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.ue-control-panel .control-slider {
  width: 100%;
  height: 6px;
  background: rgba(0, 132, 255, 0.2);
  border-radius: var(--radius-full);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}

.ue-control-panel .control-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.8), rgba(0, 132, 255, 0.6));
  border: 2px solid rgba(0, 229, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.ue-control-panel .control-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.7);
}

.ue-control-panel .control-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.8), rgba(0, 132, 255, 0.6));
  border: 2px solid rgba(0, 229, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.ue-control-panel .control-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.7);
}

/* UE导航面板 */
.ue-nav-panel {
  background: var(--ue-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-lg);
  box-shadow: var(--ue-shadow-prism);
  padding: var(--spacing-lg);
  min-width: 240px;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
}

.ue-nav-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 132, 255, 0.1),
    transparent,
    rgba(0, 132, 255, 0.05)
  );
  pointer-events: none;
}

.ue-nav-panel:hover {
  box-shadow: var(--ue-shadow-prism), 0 0 30px rgba(0, 132, 255, 0.3);
  transform: translateX(4px);
}

.ue-nav-panel .nav-header {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
}

.ue-nav-panel .nav-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--ue-text-highlight);
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.ue-nav-panel .nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.ue-nav-panel .nav-item {
  margin: 0;
}

.ue-nav-panel .nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.ue-nav-panel .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-pulse-cyan);
  transform: scaleY(0);
  transition: transform var(--anim-duration-fast) var(--anim-ease-out);
  box-shadow: 0 0 10px var(--color-pulse-cyan);
}

.ue-nav-panel .nav-link:hover {
  background: rgba(0, 132, 255, 0.1);
  color: var(--ue-text-highlight);
  transform: translateX(4px);
}

.ue-nav-panel .nav-link:hover::before {
  transform: scaleY(1);
}

.ue-nav-panel .nav-link.active {
  background: rgba(0, 132, 255, 0.2);
  color: var(--ue-text-highlight);
  box-shadow: 0 0 15px rgba(0, 132, 255, 0.3);
}

.ue-nav-panel .nav-link.active::before {
  transform: scaleY(1);
}

.ue-nav-panel .nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* -------------------------- */
/* Legacy UE primitives (迁移自 components.css) */
/* -------------------------- */

.ue-viewport {
  background: var(--ue-bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-lg);
  box-shadow: var(--ue-shadow-prism);
  padding: var(--spacing-xl);
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ue-viewport::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, transparent 60%, rgba(0, 132, 255, 0.1) 100%);
  pointer-events: none;
}

.ue-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 49%, rgba(0, 229, 255, 0.1) 50%, transparent 51%);
  background-size: 20px 20px;
  animation: ue-grid-move 20s linear infinite;
  pointer-events: none;
  opacity: 0.3;
}

.ue-stats-hud {
  background: var(--ue-gradient-data-highlight);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  color: white;
}

.ue-stats-hud::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.ue-stats-hud .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.ue-stats-hud .stat-item:last-child {
  margin-bottom: 0;
}

.ue-stats-hud .stat-value {
  color: var(--ue-text-highlight);
  font-weight: 600;
  font-family: var(--font-mono);
}

.ue-toggle {
  position: relative;
  width: 60px;
  height: 32px;
  cursor: pointer;
}

.ue-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ue-toggle .toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 32px;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ue-toggle .toggle-slider::before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 2px;
  bottom: 2px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(0, 132, 255, 0.5));
  border-radius: 50%;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 229, 255, 0.3);
}

.ue-toggle input:checked + .toggle-slider {
  background: rgba(0, 132, 255, 0.3);
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

.ue-toggle input:checked + .toggle-slider::before {
  transform: translateX(28px);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.8), rgba(0, 132, 255, 0.6));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 229, 255, 0.5);
}

.vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
  z-index: 1;
}

.table-ue {
  width: 100%;
  border-collapse: collapse;
  background: var(--ue-bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--ue-shadow-prism);
}

.table-ue th,
.table-ue td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: var(--font-size-sm);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.table-ue th {
  background: rgba(0, 132, 255, 0.2);
  font-weight: 600;
  color: var(--ue-text-highlight);
  position: relative;
}

.table-ue th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
}

.table-ue tr:hover {
  background: rgba(0, 132, 255, 0.1);
}

.table-ue tr:hover td {
  color: var(--ue-text-highlight);
}

/* UE状态指示器 */
.ue-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px var(--spacing-sm);
  background: rgba(0, 132, 255, 0.15);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--ue-text-highlight);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
}

.ue-status-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
  animation: ue-status-sweep 2s ease-in-out infinite;
}

.ue-status-indicator:hover {
  background: rgba(0, 132, 255, 0.25);
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
  transform: translateY(-1px);
}

.ue-status-indicator .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: ue-status-pulse 2s ease-in-out infinite;
}

.ue-status-indicator .status-dot.active {
  background: var(--color-signal-green);
  box-shadow: 0 0 10px var(--color-signal-green);
}

.ue-status-indicator .status-dot.warning {
  background: var(--color-warning-amber);
  box-shadow: 0 0 10px var(--color-warning-amber);
}

.ue-status-indicator .status-dot.error {
  background: var(--color-error-red);
  box-shadow: 0 0 10px var(--color-error-red);
}

.ue-status-indicator .status-dot.idle {
  background: var(--text-secondary);
  box-shadow: 0 0 10px var(--text-secondary);
}

/* UE加载动画 */
.ue-loader {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px;
}

.ue-loader::div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid rgba(0, 229, 255, 0.3);
  border-top: 4px solid var(--ue-text-highlight);
  border-radius: 50%;
  animation: ue-spin 1s linear infinite;
}

.ue-loader.small {
  width: 24px;
  height: 24px;
}

.ue-loader.small::div {
  border-width: 2px;
}

.ue-loader.large {
  width: 64px;
  height: 64px;
}

.ue-loader.large::div {
  border-width: 6px;
}

/* UE提示?*/
.ue-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.ue-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ue-bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--ue-border-glow);
  border-radius: var(--radius-md);
  box-shadow: var(--ue-shadow-prism), 0 0 20px rgba(0, 132, 255, 0.3);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--ue-text-highlight);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  z-index: 1000;
  min-width: 120px;
  text-align: center;
}

.ue-tooltip::before {
  content: '';
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--ue-border-glow) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  z-index: 1001;
}

.ue-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  bottom: 135%;
}

.ue-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  bottom: 125%;
}

/* -------------------------- */
/* UE动画增强 */
/* -------------------------- */

@keyframes ue-border-glow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes ue-grid-move {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(-20px) translateY(-20px);
  }
}

@keyframes ue-advanced-border-glow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

@keyframes ue-data-flow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes ue-status-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

@keyframes ue-status-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes ue-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------------- */
/* 响应式设?*/
/* -------------------------- */

@media (max-width: 639px) {
  .card-ue-mimetic {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .card-ue-mimetic {
    padding: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .card-ue-advanced,
  .card-ue-data,
  .ue-control-panel,
  .ue-nav-panel {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  
  .card-ue-advanced .card-title,
  .ue-control-panel .panel-title,
  .ue-nav-panel .nav-title {
    font-size: var(--font-size-md);
  }
  
  .card-ue-data .data-value {
    font-size: var(--font-size-2xl);
  }
  
  .ue-control-panel .control-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .ue-viewport {
    min-height: 300px;
    padding: var(--spacing-md);
  }

  .ue-nav-panel {
    min-width: auto;
    width: 100%;
    padding: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .card-ue-advanced,
  .card-ue-data,
  .ue-control-panel,
  .ue-nav-panel {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
  }
  
  .card-ue-advanced .card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }
  
  .ue-control-panel .control-value {
    font-size: var(--font-size-xl);
  }
}

/* -------------------------- */
/* 工具?*/
/* -------------------------- */

/* UE边框发光 */
.ue-border-glow {
  border: var(--ue-border-glow);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
  animation: ue-advanced-border-glow 3s ease-in-out infinite;
}

/* UE文本发光 */
.ue-text-glow {
  color: var(--ue-text-highlight);
  text-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
}

/* UE背景渐变 */
.ue-bg-gradient {
  background: var(--ue-gradient-data-highlight);
}

/* UE悬停效果 */
.ue-hover-effect {
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.ue-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: var(--ue-shadow-prism), 0 0 30px rgba(0, 132, 255, 0.3);
}

/* UE状态工具类 */
.ue-status-active {
  color: var(--color-signal-green);
  text-shadow: 0 0 10px var(--color-signal-green);
}

.ue-status-warning {
  color: var(--color-warning-amber);
  text-shadow: 0 0 10px var(--color-warning-amber);
}

.ue-status-error {
  color: var(--color-error-red);
  text-shadow: 0 0 10px var(--color-error-red);
}

.ue-status-idle {
  color: var(--text-secondary);
  text-shadow: 0 0 5px var(--text-secondary);
}

/* -------------------------- */
/* Tailwind CSS 替代?*/
/* 这些类替代了之前?components.csv 中的 Tailwind CSS 语法 */
/* -------------------------- */

/*
 * .card-ue-data-highlight
 * 替代: .bg-gradient-to-br.from-black/90.to-black/60
 * 描述: UE 数据高亮卡片，深色渐变背? */
.card-ue-data-highlight {
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 12px);
  padding: var(--spacing-md, 16px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--anim-duration-normal) ease;
}

.card-ue-data-highlight:hover {
  border-color: rgba(0, 132, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 132, 255, 0.15);
}

/*
 * .panel-row-clean
 * 替代: .panel-row.!ring-0
 * 描述: 无边框的面板行，用于 UE 场景中的干净列表
 */
.panel-row-clean {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  background: transparent;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  transition: background var(--anim-duration-normal) ease;
}

.panel-row-clean:hover {
  background: rgba(255, 255, 255, 0.05);
}

/*
 * .timeline-histogram
 * 替代: .ue-bg-slate-medium
 * 描述: 时间分布柱状图，中等深度?slate 背景? */
.timeline-histogram {
  background-color: rgba(148, 163, 184, 0.5); /* slate-400/50 */
  border-radius: var(--radius-sm, 4px);
  height: 100%;
  min-height: 4px;
  transition: all var(--anim-duration-fast) ease;
}

.timeline-histogram:hover {
  background-color: rgba(148, 163, 184, 0.7); /* slate-400/70 */
}

/*
 * .timeline-label
 * 替代: .ue-text-slate-light
 * 描述: 时间轴文本标签，浅色 slate 文本
 */
.timeline-label {
  color: rgb(203, 213, 225); /* slate-300 */
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.025em;
  user-select: none;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .card-ue-data-highlight {
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7));
}

[data-theme="dark"] .panel-row-clean:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .timeline-histogram {
  background-color: rgba(100, 116, 139, 0.6); /* darker slate */
}

[data-theme="dark"] .timeline-label {
  color: rgb(226, 232, 240); /* lighter slate-200 */
}


/* Lingjing Core Glass Effects CSS */

/* -------------------------- */
/* 标准玻璃卡片 */
/* -------------------------- */

.card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount, 16px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--spacing-lg);
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
}

.card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-light), transparent);
  pointer-events: none;
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover), var(--glow-primary);
  border-color: var(--glass-border-hover);
}

[data-theme="dark"] .card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-amount, 24px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 24px));
  border: var(--glass-border);
  box-shadow: none;
}

[data-theme="dark"] .card-glass:hover {
  box-shadow: var(--glass-shadow-light);
  border-color: var(--glass-border-hover);
}

/* -------------------------- */
/* 流动玻璃效果 */
/* -------------------------- */


/* 旧流动玻璃效果兼容类（迁移自 components.css） */
.effect-glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.effect-glass::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(0, 132, 255, 0.1),
    transparent,
    rgba(0, 229, 255, 0.05),
    transparent
  );
  animation: flow 8s linear infinite;
  pointer-events: none;
}

/* 高级流动玻璃 */
.glass-flowing {

  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.glass-flowing::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    var(--glass-overlay-medium),
    transparent,
    var(--glass-overlay-light),
    transparent,
    var(--glass-overlay-dark),
    transparent
  );
  animation: glass-flow 15s linear infinite;
  pointer-events: none;
}

.glass-flowing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--glass-overlay-light) 0%,
    transparent 50%,
    var(--glass-overlay-medium) 100%
  );
  pointer-events: none;
  border-radius: var(--radius-lg);
}

.glass-flowing:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover), var(--glow-primary);
  border-color: var(--glass-border-hover);
}

.glass-flowing:hover::before {
  animation-duration: 10s;
}

/* -------------------------- */
/* 磨砂玻璃效果 */
/* -------------------------- */

.glass-frosted {
  background: var(--glass-bg-90);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 var(--glass-border-medium);
  position: relative;
  overflow: hidden;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.glass-frosted::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--glass-overlay-light) 0%,
    var(--glass-overlay-medium) 100%
  );
  pointer-events: none;
}

.glass-frosted:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 var(--glass-border-heavy);
}

/* -------------------------- */
/* 彩色玻璃效果 */
/* -------------------------- */

.glass-colored {
  background: linear-gradient(
    135deg,
    var(--glass-overlay-light),
    var(--glass-overlay-medium),
    var(--glass-overlay-dark)
  );
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.glass-colored::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    var(--glass-overlay-medium),
    var(--glass-overlay-light),
    var(--glass-overlay-dark),
    transparent
  );
  animation: glass-color-flow 12s linear infinite;
  pointer-events: none;
}

.glass-colored:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover), var(--glow-primary);
  border-color: var(--glass-border-hover);
}

/* -------------------------- */
/* 深色主题玻璃效果增强 */
/* -------------------------- */

[data-theme="dark"] .glass-flowing {
  background: var(--bg-glass);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none;
}

[data-theme="dark"] .glass-flowing::after {
  background: linear-gradient(
    135deg,
    var(--glass-overlay-medium) 0%,
    transparent 50%,
    var(--glass-overlay-dark) 100%
  );
}

[data-theme="dark"] .glass-frosted {
  background: var(--bg-glass);
  border: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-border-light);
}

[data-theme="dark"] .glass-frosted::before {
  background: linear-gradient(
    135deg,
    var(--glass-overlay-light) 0%,
    var(--glass-overlay-dark) 100%
  );
}

[data-theme="dark"] .glass-colored {
  background: linear-gradient(
    135deg,
    rgba(0, 132, 255, 0.1),
    rgba(0, 229, 255, 0.08),
    rgba(0, 163, 131, 0.05)
  );
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none;
}

/* 深色主题?hover 状态的投影效果 */
[data-theme="dark"] .glass-flowing:hover {
  box-shadow: 0 8px 32px rgba(0, 132, 255, 0.2);
  border-color: rgba(0, 132, 255, 0.4);
}

[data-theme="dark"] .glass-frosted:hover {
  box-shadow:
    0 12px 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 var(--glass-border-heavy);
  border-color: rgba(0, 132, 255, 0.4);
}

[data-theme="dark"] .glass-colored:hover {
  box-shadow: 0 12px 40px rgba(0, 132, 255, 0.2), 0 0 25px rgba(0, 229, 255, 0.2);
  border-color: rgba(0, 132, 255, 0.4);
}

/* -------------------------- */
/* 动画定义 */
/* -------------------------- */

@keyframes flow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glass-flow {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes glass-color-flow {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(0deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(360deg);
  }
}

/* -------------------------- */
/* 响应式设?*/
/* -------------------------- */

@media (max-width: 768px) {
  .card-glass {
    padding: var(--spacing-md);
  }

  .glass-flowing,
  .glass-frosted,
  .glass-colored {
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  .card-glass {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
  }

  .glass-flowing,
  .glass-frosted,
  .glass-colored {
    border-radius: var(--radius-sm);
  }
}


/* -------------------------- */
/* 工具?*/
/* -------------------------- */

/* 玻璃效果尺寸 */
.glass-sm {
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.glass-md {
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.glass-lg {
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.glass-xl {
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
}

/* 玻璃效果强度 */
.glass-light {
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  box-shadow: var(--glass-shadow-light);
}

.glass-medium {
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  box-shadow: var(--glass-shadow);
}

.glass-strong {
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  box-shadow: var(--glass-shadow-heavy);
}

/* 玻璃效果交互 */
.glass-interactive {
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.glass-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover), var(--glow-primary);
}

.glass-interactive:active {
  transform: translateY(0);
  box-shadow: var(--glass-shadow);
}

/* 玻璃效果定位 */
.glass-fixed {
  position: fixed;
  z-index: 100;
}

.glass-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* 玻璃效果叠加 */
.glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

/* 玻璃效果边框 */
.glass-border {
  border: var(--glass-border);
}

.glass-border-thick {
  border: 2px solid var(--glass-border);
}

.glass-border-accent {
  border: 1px solid var(--glass-border-medium);
}

/* 玻璃效果阴影 */
.glass-shadow-sm {
  box-shadow: var(--glass-shadow-light);
}

.glass-shadow-md {
  box-shadow: var(--glass-shadow);
}

.glass-shadow-lg {
  box-shadow: var(--glass-shadow-heavy);
}

/* 玻璃效果透明?*/
.glass-opacity-low {
  background: var(--glass-bg-80);
}

.glass-opacity-medium {
  background: var(--glass-bg-90);
}

.glass-opacity-high {
  background: var(--glass-bg-95);
}

[data-theme="dark"] .glass-opacity-low {
  background: var(--glass-bg-80);
}

[data-theme="dark"] .glass-opacity-medium {
  background: var(--glass-bg-90);
}

[data-theme="dark"] .glass-opacity-high {
  background: var(--glass-bg-95);
}


/* Lingjing Core Buttons & Interactions CSS */

/* -------------------------- */
/* 核心按钮（从 components.css 迁移） */
/* -------------------------- */

/* B端基础按钮兼容（迁移自 forms-b.css） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border-radius: var(--radius-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  border: 1px solid transparent;
  background: var(--neutral-100);
  color: var(--text-primary);
}

.btn:hover {
  background: var(--neutral-200);
}

.btn :is(i, svg),
.btn-text :is(i, svg),
.btn-outline :is(i, svg),
.btn-icon :is(i, svg),
.btn-primary :is(i, svg),
.btn-secondary :is(i, svg),
.btn-ghost :is(i, svg),
.btn-accent :is(i, svg),
.btn-success :is(i, svg),
.btn-warning :is(i, svg),
.btn-danger :is(i, svg),
.btn-glass :is(i, svg),
.btn-glass-primary :is(i, svg),
.btn-glass-accent :is(i, svg),
.btn-ue :is(i, svg),
.btn-primary-enhanced :is(i, svg),
.btn-secondary-enhanced :is(i, svg),
.btn-ghost-enhanced :is(i, svg),
.btn-text-enhanced :is(i, svg),
.btn-icon-enhanced :is(i, svg),
.btn-circle-enhanced :is(i, svg) {
  width: var(--btn-icon-size-md);
  height: var(--btn-icon-size-md);
  flex-shrink: 0;
}

.btn-text {
  background: transparent;
  color: var(--color-aero-blue);
  border: none;
  border-radius: var(--radius-md);
  min-height: var(--btn-height-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.btn-text:hover {
  background: var(--bg-status-info);
  color: var(--color-pulse-cyan);
  transform: translateY(-1px);
}

.btn-text:active {
  transform: translateY(0);
  background: var(--glass-overlay-medium);
}

.btn-outline {
  background: transparent;
  color: var(--color-aero-blue);
  border: 1px solid var(--color-aero-blue);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--btn-height-md);
}

.btn-outline:hover {
  background: var(--color-aero-blue);
  color: white;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-outline:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-icon {
  width: var(--btn-height-md);
  height: var(--btn-height-md);
  padding: 0;
  background: transparent;
  border: 1px solid var(--theme-border-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-height-md);
  min-height: var(--btn-height-md);
}

.btn-icon:hover {
  background: var(--bg-secondary);
  border-color: var(--color-aero-blue);
  color: var(--color-aero-blue);
  transform: translateY(-1px);
}

.btn-icon:active {
  transform: translateY(0);
}

.btn-primary {

  background: var(--color-aero-blue);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--glass-overlay-light), transparent);
  transition: left var(--anim-duration-slow) ease;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  background: var(--color-pulse-cyan);
  box-shadow: var(--shadow-md), var(--glow-secondary);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: transparent;
  color: var(--color-aero-blue);
  border: 1px solid var(--color-aero-blue);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.btn-secondary:hover {
  background: var(--bg-status-info);
  border-color: var(--color-pulse-cyan);
  color: var(--color-pulse-cyan);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--color-aero-blue);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  position: relative;
}

.btn-ghost:hover {
  background: var(--bg-glass-accent);
  color: var(--color-pulse-cyan);
}

.btn-accent {
  background: var(--color-signal-green);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.btn-accent:hover {
  background: var(--color-pulse-cyan);
  box-shadow: var(--shadow-md), var(--glow-secondary);
  transform: translateY(-1px);
}

.btn-accent:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-success {
  background: var(--color-signal-green);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.btn-success:hover {
  background: var(--color-signal-green);
  opacity: 0.9;
  box-shadow: var(--shadow-md), var(--glow-secondary);
  transform: translateY(-1px);
}

.btn-success:active {
  transform: translateY(0);
}

.btn-warning {
  background: var(--color-warning-amber);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.btn-warning:hover {
  background: var(--color-warning-amber);
  opacity: 0.9;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-warning:active {
  transform: translateY(0);
}

.btn-error,
.btn-danger {
  background: var(--color-error-red);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.btn-error:hover,
.btn-danger:hover {
  background: var(--color-error-red);
  opacity: 0.9;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-error:active,
.btn-danger:active {
  transform: translateY(0);
}

.btn-glass {
  background: var(--bg-glass);
  color: var(--theme-text-primary);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--glass-shadow);
}

.btn-glass:hover {
  background: var(--bg-glass-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.btn-glass:active {
  transform: translateY(0);
}

.btn-glass-primary {
  background: linear-gradient(135deg, var(--bg-glass), var(--bg-glass-accent));
  color: var(--theme-primary);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--glass-shadow);
}

.btn-glass-primary:hover {
  background: linear-gradient(135deg, var(--bg-glass-hover), var(--bg-glass-accent));
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-hover), var(--glow-primary);
  transform: translateY(-1px);
}

.btn-glass-primary:active {
  transform: translateY(0);
}

.btn-glass-accent {
  background: linear-gradient(135deg, var(--bg-glass), var(--bg-status-success));
  color: var(--color-signal-green);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--glass-shadow);
}

.btn-glass-accent:hover {
  background: linear-gradient(135deg, var(--bg-glass-hover), var(--bg-status-success));
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-hover), 0 0 20px rgba(0, 163, 131, 0.2);
  transform: translateY(-1px);
}

.btn-glass-accent:active {
  transform: translateY(0);
}

.btn-ue {
  background: linear-gradient(135deg, var(--glass-overlay-medium), var(--bg-glass-accent));
  color: var(--ue-text-highlight);
  border: var(--ue-border-glow);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
}

.btn-ue::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, var(--ue-text-highlight), transparent);
  opacity: 0.1;
  animation: ue-btn-glow 2s ease-in-out infinite;
  pointer-events: none;
}

.btn-ue:hover {
  background: linear-gradient(135deg, var(--glass-overlay-light), var(--bg-glass-accent));
  border-color: var(--ue-text-highlight);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
  transform: translateY(-2px);
}

@keyframes ue-btn-glow {
  0%, 100% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 按钮尺寸变体 */
.btn-sm,
.btn-outline.btn-sm,
.btn-text.btn-sm,
.btn-icon.btn-sm,
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-ghost.btn-sm,
.btn-accent.btn-sm,
.btn-glass.btn-sm,
.btn-glass-primary.btn-sm,
.btn-glass-accent.btn-sm {
  height: var(--btn-height-sm);
  font-size: var(--btn-font-sm);
}

.btn-sm,
.btn-outline.btn-sm,
.btn-text.btn-sm,
.btn-primary.btn-sm,
.btn-secondary.btn-sm,
.btn-ghost.btn-sm,
.btn-accent.btn-sm,
.btn-glass.btn-sm,
.btn-glass-primary.btn-sm,
.btn-glass-accent.btn-sm {
  padding: var(--btn-padding-sm);
}

.btn-sm :is(i, svg),
.btn-outline.btn-sm :is(i, svg),
.btn-text.btn-sm :is(i, svg),
.btn-icon.btn-sm :is(i, svg),
.btn-primary.btn-sm :is(i, svg),
.btn-secondary.btn-sm :is(i, svg),
.btn-ghost.btn-sm :is(i, svg),
.btn-accent.btn-sm :is(i, svg),
.btn-glass.btn-sm :is(i, svg),
.btn-glass-primary.btn-sm :is(i, svg),
.btn-glass-accent.btn-sm :is(i, svg) {
  width: var(--btn-icon-size-sm);
  height: var(--btn-icon-size-sm);
}

.btn-icon.btn-sm {
  width: var(--btn-height-sm);
  min-width: var(--btn-height-sm);
  min-height: var(--btn-height-sm);
  padding: 0;
}

.btn-md,
.btn-outline.btn-md,
.btn-text.btn-md,
.btn-icon.btn-md,
.btn-primary.btn-md,
.btn-secondary.btn-md,
.btn-ghost.btn-md,
.btn-accent.btn-md,
.btn-glass.btn-md,
.btn-glass-primary.btn-md,
.btn-glass-accent.btn-md {
  height: var(--btn-height-md);
  font-size: var(--btn-font-md);
}

.btn-md,
.btn-outline.btn-md,
.btn-text.btn-md,
.btn-primary.btn-md,
.btn-secondary.btn-md,
.btn-ghost.btn-md,
.btn-accent.btn-md,
.btn-glass.btn-md,
.btn-glass-primary.btn-md,
.btn-glass-accent.btn-md {
  padding: var(--btn-padding-md);
}

.btn-md :is(i, svg),
.btn-outline.btn-md :is(i, svg),
.btn-text.btn-md :is(i, svg),
.btn-icon.btn-md :is(i, svg),
.btn-primary.btn-md :is(i, svg),
.btn-secondary.btn-md :is(i, svg),
.btn-ghost.btn-md :is(i, svg),
.btn-accent.btn-md :is(i, svg),
.btn-glass.btn-md :is(i, svg),
.btn-glass-primary.btn-md :is(i, svg),
.btn-glass-accent.btn-md :is(i, svg) {
  width: var(--btn-icon-size-md);
  height: var(--btn-icon-size-md);
}

.btn-icon.btn-md {
  width: var(--btn-height-md);
  min-width: var(--btn-height-md);
  min-height: var(--btn-height-md);
  padding: 0;
}

.btn-lg,
.btn-outline.btn-lg,
.btn-text.btn-lg,
.btn-icon.btn-lg,
.btn-primary.btn-lg,
.btn-secondary.btn-lg,
.btn-ghost.btn-lg,
.btn-accent.btn-lg,
.btn-glass.btn-lg,
.btn-glass-primary.btn-lg,
.btn-glass-accent.btn-lg {
  height: var(--btn-height-lg);
  font-size: var(--btn-font-lg);
}

.btn-lg,
.btn-outline.btn-lg,
.btn-text.btn-lg,
.btn-primary.btn-lg,
.btn-secondary.btn-lg,
.btn-ghost.btn-lg,
.btn-accent.btn-lg,
.btn-glass.btn-lg,
.btn-glass-primary.btn-lg,
.btn-glass-accent.btn-lg {
  padding: var(--btn-padding-lg);
}

.btn-lg :is(i, svg),
.btn-outline.btn-lg :is(i, svg),
.btn-text.btn-lg :is(i, svg),
.btn-icon.btn-lg :is(i, svg),
.btn-primary.btn-lg :is(i, svg),
.btn-secondary.btn-lg :is(i, svg),
.btn-ghost.btn-lg :is(i, svg),
.btn-accent.btn-lg :is(i, svg),
.btn-glass.btn-lg :is(i, svg),
.btn-glass-primary.btn-lg :is(i, svg),
.btn-glass-accent.btn-lg :is(i, svg) {
  width: var(--btn-icon-size-lg);
  height: var(--btn-icon-size-lg);
}

.btn-icon.btn-lg {
  width: var(--btn-height-lg);
  min-width: var(--btn-height-lg);
  min-height: var(--btn-height-lg);
  padding: 0;
}

/* -------------------------- */
/* 按钮样式增强 */
/* -------------------------- */

/* 主按钮增?*/
.btn-primary-enhanced {
  background: var(--color-aero-blue);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  font-weight: 500;
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--glass-overlay-light), transparent);
  transition: left var(--anim-duration-slow) ease;
}

.btn-primary-enhanced::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--glass-overlay-light) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.btn-primary-enhanced:hover {
  background: var(--color-pulse-cyan);
  box-shadow: var(--shadow-md), var(--glow-secondary);
  transform: translateY(-2px);
}

.btn-primary-enhanced:hover::before {
  left: 100%;
}

.btn-primary-enhanced:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-primary-enhanced:active::after {
  width: 100px;
  height: 100px;
  opacity: 0;
}

/* 次要按钮增强 */
.btn-secondary-enhanced {
  background: transparent;
  color: var(--color-aero-blue);
  border: 1px solid var(--color-aero-blue);
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}

.btn-secondary-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--bg-glass-accent), transparent);
  transition: left var(--anim-duration-slow) ease;
}

.btn-secondary-enhanced:hover {
  background: var(--bg-status-info);
  border-color: var(--color-pulse-cyan);
  color: var(--color-pulse-cyan);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-secondary-enhanced:hover::before {
  left: 100%;
}

.btn-secondary-enhanced:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* 幽灵按钮增强 */
.btn-ghost-enhanced {
  background: transparent;
  color: var(--color-aero-blue);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--btn-padding-md);
  font-size: var(--btn-font-md);
  height: var(--btn-height-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}

.btn-ghost-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-glass-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anim-duration-fast) var(--anim-ease-out);
  border-radius: var(--radius-md);
}

.btn-ghost-enhanced:hover {
  color: var(--color-pulse-cyan);
  transform: translateY(-1px);
}

.btn-ghost-enhanced:hover::before {
  transform: scaleX(1);
}

.btn-ghost-enhanced:active {
  transform: translateY(0);
}

/* 文本按钮增强 */
.btn-text-enhanced {
  background: transparent;
  color: var(--color-aero-blue);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}

.btn-text-enhanced::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-aero-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anim-duration-fast) var(--anim-ease-out);
}

/* 修复按钮文字下划线问?*/
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-text,
.btn-icon,
.btn-circle {
  text-decoration: none;
}

.btn-text-enhanced:hover {
  color: var(--color-pulse-cyan);
  transform: translateY(-1px);
}

.btn-text-enhanced:hover::after {
  transform: scaleX(1);
  background: var(--color-pulse-cyan);
}

.btn-text-enhanced:active {
  transform: translateY(0);
}

/* 图标按钮增强 */
.btn-icon-enhanced {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  color: var(--text-secondary);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
  width: 40px;
  height: 40px;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
}

.btn-icon-enhanced::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--bg-glass-accent) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.btn-icon-enhanced:hover {
  background: var(--bg-hover);
  color: var(--theme-primary);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.16);
}

.btn-icon-enhanced:hover::before {
  width: 60px;
  height: 60px;
  opacity: 0;
}

.btn-icon-enhanced:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}


/* 圆形按钮增强 */
.btn-circle-enhanced {
  background: var(--color-aero-blue);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  padding: 0;
  width: 48px;
  height: 48px;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.btn-circle-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--glass-overlay-light), transparent);
  transition: left var(--anim-duration-slow) ease;
  border-radius: var(--radius-full);
}

.btn-circle-enhanced:hover {
  background: var(--color-pulse-cyan);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md), var(--glow-secondary);
}

.btn-circle-enhanced:hover::before {
  left: 100%;
}

.btn-circle-enhanced:active {
  transform: translateY(0) scale(0.95);
  box-shadow: var(--shadow-sm);
}

/* 大按?*/
.btn-large-enhanced {
  padding: var(--btn-padding-lg);
  font-size: var(--btn-font-lg);
  height: var(--btn-height-lg);
  border-radius: var(--radius-lg);
}

/* 小按?*/
.btn-small-enhanced {
  padding: var(--btn-padding-sm);
  font-size: var(--btn-font-sm);
  height: var(--btn-height-sm);
  border-radius: var(--radius-sm);
}

/* 全宽按钮 */
.btn-full-enhanced {
  width: 100%;
  justify-content: center;
}

/* -------------------------- */
/* 交互元素增强 */
/* -------------------------- */

/* 链接样式 */
.link-enhanced {
  color: var(--color-aero-blue);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  display: inline-block;
}

.link-enhanced::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-aero-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anim-duration-fast) var(--anim-ease-out);
}

.link-enhanced:hover {
  color: var(--color-pulse-cyan);
  transform: translateY(-1px);
}

.link-enhanced:hover::after {
  transform: scaleX(1);
  background: var(--color-pulse-cyan);
}

/* 输入框增?*/
.input-enhanced {
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-md);
  height: 40px;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  outline: none;
  position: relative;
  z-index: 1;
}

.input-enhanced::placeholder {
  color: var(--input-placeholder);
}

.input-enhanced:focus {
  border-color: var(--color-pulse-cyan);
  box-shadow: 0 0 0 3px rgba(0, 153, 170, 0.1), var(--glow-secondary);
  transform: translateY(-1px);
}

.input-enhanced:hover {
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.1);
}

.input-enhanced:focus:hover {
  border-color: var(--color-pulse-cyan);
}

/* 文本域增?*/
.textarea-enhanced {
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  outline: none;
  resize: vertical;
  min-height: 120px;
  position: relative;
  z-index: 1;
}

.textarea-enhanced::placeholder {
  color: var(--input-placeholder);
}

.textarea-enhanced:focus {
  border-color: var(--color-pulse-cyan);
  box-shadow: 0 0 0 3px rgba(0, 153, 170, 0.1), var(--glow-secondary);
  transform: translateY(-1px);
}

.textarea-enhanced:hover {
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.1);
}

/* 选择框增?*/
.select-enhanced {
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-md);
  padding: 0 calc(var(--spacing-md) * 2.5) 0 var(--spacing-md);
  height: 40px;
  line-height: 40px;
  font-size: var(--font-size-md);
  color: var(--text-primary);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 下拉箭头颜色 #6B7280 对应设计令牌 --text-secondary (浅色主题)
     注：SVG data URI 无法使用 CSS 变量，需要硬编码颜色值以匹配设计令牌 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 16px;
}

.select-enhanced:focus {
  border-color: var(--color-pulse-cyan);
  box-shadow: 0 0 0 3px rgba(0, 153, 170, 0.1), var(--glow-secondary);
  transform: translateY(-1px);
}

.select-enhanced:hover {
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 1px rgba(0, 102, 204, 0.1);
}

/* 下拉选项样式 */
.select-enhanced option {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

.select-enhanced option:hover,
.select-enhanced option:focus {
  background: var(--bg-glass-accent) !important;
  color: var(--theme-primary) !important;
}

.select-enhanced option:checked {
  background: var(--theme-primary) !important;
  color: white !important;
  font-weight: var(--font-weight-medium);
}

/* 复选框增强 */
.checkbox-enhanced {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkbox-enhanced input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.checkbox-enhanced::after {
  content: '✔';
  color: white;
  font-size: var(--font-size-xs);
  font-weight: bold;
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.checkbox-enhanced:hover {
  border-color: var(--color-aero-blue);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--bg-glass-accent);
}

.checkbox-enhanced input:checked + .checkbox-enhanced {
  background: var(--color-aero-blue);
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 2px var(--bg-glass-accent), var(--glow-primary);
}

.checkbox-enhanced input:checked + .checkbox-enhanced::after {
  opacity: 1;
  transform: scale(1);
}

/* 单选框增强 */
.radio-enhanced {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-full);
  cursor: pointer;
  position: relative;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.radio-enhanced input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.radio-enhanced::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--color-aero-blue);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.radio-enhanced:hover {
  border-color: var(--color-aero-blue);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--bg-glass-accent);
}

.radio-enhanced input:checked + .radio-enhanced {
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 2px var(--bg-glass-accent), var(--glow-primary);
}

.radio-enhanced input:checked + .radio-enhanced::after {
  opacity: 1;
  transform: scale(1);
}

/* 开关增?*/
.switch-enhanced {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
  display: inline-block;
}

.switch-enhanced input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-enhanced .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-overlay-light);
  border-radius: 28px;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  border: 1px solid var(--border-primary);
}

.switch-enhanced .slider::before {
  position: absolute;
  content: '';
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-enhanced input:checked + .slider {
  background: var(--color-aero-blue);
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 2px var(--bg-glass-accent), var(--glow-primary);
}

.switch-enhanced input:checked + .slider::before {
  transform: translateX(24px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.switch-enhanced:hover .slider {
  border-color: var(--color-aero-blue);
}

/* 滑块增强 */
.slider-enhanced {
  width: 100%;
  height: 6px;
  background: var(--glass-overlay-light);
  border-radius: var(--radius-full);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
}

.slider-enhanced:hover {
  background: var(--bg-glass-accent);
}

.slider-enhanced::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-aero-blue);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-enhanced::-webkit-slider-thumb:hover {
  background: var(--color-pulse-cyan);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 153, 170, 0.3), var(--glow-secondary);
}

.slider-enhanced::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-aero-blue);
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider-enhanced::-moz-range-thumb:hover {
  background: var(--color-pulse-cyan);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 153, 170, 0.3), var(--glow-secondary);
}

/* -------------------------- */
/* 深色主题 */
/* -------------------------- */

[data-theme="dark"] .btn-outline {
  color: var(--color-aero-blue);
  border-color: var(--color-aero-blue);
}

[data-theme="dark"] .btn-outline:hover {
  background: var(--color-aero-blue);
  color: white;
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] .btn-ghost {
  color: var(--color-aero-blue);
}

[data-theme="dark"] .btn-ghost:hover {
  background: var(--bg-glass-accent);
  color: var(--color-aero-blue);
}

[data-theme="dark"] .btn-text {
  color: var(--color-aero-blue);
}

[data-theme="dark"] .btn-text:hover {
  background: var(--bg-status-info);
  color: var(--color-aero-blue);
}

[data-theme="dark"] .btn-icon {
  border-color: var(--glass-border-medium);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-icon:hover {
  background: var(--bg-status-info);
  border-color: var(--color-aero-blue);
  color: var(--color-aero-blue);
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn {
  background: var(--neutral-800);
  color: var(--neutral-100);
  border-color: var(--neutral-700);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn:hover {
  background: var(--neutral-700);
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}

[data-theme="dark"] .btn-primary {
  box-shadow: none;
}


[data-theme="dark"] .btn-primary:hover {
  box-shadow: var(--shadow-hover), var(--glow-primary);
}

[data-theme="dark"] .btn-accent {
  box-shadow: none;
}

[data-theme="dark"] .btn-accent:hover {
  box-shadow: var(--shadow-hover), var(--glow-secondary);
}

[data-theme="dark"] .btn-success:hover {
  box-shadow: var(--shadow-hover), var(--glow-secondary);
}

[data-theme="dark"] .btn-warning:hover {
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] .btn-error:hover,
[data-theme="dark"] .btn-danger:hover {
  box-shadow: var(--shadow-hover);
}

[data-theme="dark"] .btn-glass,
[data-theme="dark"] .btn-glass-primary,
[data-theme="dark"] .btn-glass-accent {
  box-shadow: none;
}

[data-theme="dark"] .btn-glass:hover,
[data-theme="dark"] .btn-glass-primary:hover,
[data-theme="dark"] .btn-glass-accent:hover {
  box-shadow: var(--shadow-hover);
}


[data-theme="dark"] .btn-primary-enhanced {
  box-shadow: none;
}

[data-theme="dark"] .btn-primary-enhanced:hover {
  box-shadow: var(--shadow-hover), var(--glow-secondary);
}

[data-theme="dark"] .btn-secondary-enhanced {
  border-color: var(--glass-border-heavy);
  color: var(--color-aero-blue);
  opacity: 0.8;
}

[data-theme="dark"] .btn-secondary-enhanced:hover {
  border-color: var(--color-pulse-cyan);
  color: var(--color-pulse-cyan);
  background: var(--bg-status-info);
  opacity: 1;
}

[data-theme="dark"] .btn-ghost-enhanced {
  color: var(--color-aero-blue);
  opacity: 0.8;
}

[data-theme="dark"] .btn-ghost-enhanced:hover {
  color: var(--color-pulse-cyan);
  opacity: 1;
}

[data-theme="dark"] .btn-ghost-enhanced::before {
  background: var(--bg-status-info);
}

[data-theme="dark"] .btn-text-enhanced {
  color: var(--color-aero-blue);
  opacity: 0.8;
}

[data-theme="dark"] .btn-text-enhanced:hover {
  color: var(--color-pulse-cyan);
  opacity: 1;
}

[data-theme="dark"] .btn-icon-enhanced {
  background: var(--bg-glass);
  border-color: var(--glass-border);
  color: var(--text-secondary);
}

[data-theme="dark"] .btn-icon-enhanced:hover {
  background: var(--bg-hover);
  color: var(--theme-primary);
  border-color: var(--glass-border-heavy);
}


[data-theme="dark"] .link-enhanced {
  color: var(--color-aero-blue);
  opacity: 0.8;
}

[data-theme="dark"] .link-enhanced:hover {
  color: var(--color-pulse-cyan);
  opacity: 1;
}

[data-theme="dark"] .input-enhanced,
[data-theme="dark"] .textarea-enhanced,
[data-theme="dark"] .select-enhanced {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
  box-shadow: none;
}

[data-theme="dark"] .select-enhanced {
  /* 下拉箭头颜色 #9CA3AF 对应设计令牌 --text-secondary (深色主题)
     注：SVG data URI 无法使用 CSS 变量，需要硬编码颜色值以匹配设计令牌 */
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 16px;
}

/* 深色主题下拉选项样式 */
[data-theme="dark"] .select-enhanced option {
  background: var(--neutral-800) !important;
  color: var(--text-primary) !important;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
}

[data-theme="dark"] .select-enhanced option:hover,
[data-theme="dark"] .select-enhanced option:focus {
  background: var(--bg-status-info) !important;
  color: var(--color-pulse-cyan) !important;
}

[data-theme="dark"] .select-enhanced option:checked {
  background: var(--theme-primary) !important;
  color: white !important;
  font-weight: var(--font-weight-medium);
}

[data-theme="dark"] .input-enhanced:hover,
[data-theme="dark"] .textarea-enhanced:hover,
[data-theme="dark"] .select-enhanced:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 0 1px var(--bg-status-info);
}

[data-theme="dark"] .input-enhanced:focus,
[data-theme="dark"] .textarea-enhanced:focus,
[data-theme="dark"] .select-enhanced:focus {
  border-color: var(--color-pulse-cyan);
  box-shadow: 0 0 0 3px var(--bg-status-info), var(--glow-secondary);
}

[data-theme="dark"] .checkbox-enhanced {
  border-color: var(--glass-border-medium);
  background: var(--input-bg);
}

[data-theme="dark"] .radio-enhanced {
  border-color: var(--glass-border-medium);
  background: var(--input-bg);
}

[data-theme="dark"] .switch-enhanced .slider {
  background: var(--bg-status-info);
  border-color: var(--glass-border-medium);
}

[data-theme="dark"] .switch-enhanced .slider::before {
  background: rgba(255, 255, 255, 0.9);
}

/* -------------------------- */
/* 响应式设?*/
/* -------------------------- */

@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-ue {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
    height: var(--btn-height-sm);
  }

  .btn-primary-enhanced,
  .btn-secondary-enhanced,
  .btn-ghost-enhanced,
  .btn-text-enhanced {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
    height: var(--btn-height-sm);
  }
  
  .btn-icon-enhanced {
    width: 36px;
    height: 36px;
    padding: var(--spacing-xs);
  }

  .btn-primary :is(i, svg),
  .btn-secondary :is(i, svg),
  .btn-ghost :is(i, svg),
  .btn-ue :is(i, svg),
  .btn-primary-enhanced :is(i, svg),
  .btn-secondary-enhanced :is(i, svg),
  .btn-ghost-enhanced :is(i, svg),
  .btn-text-enhanced :is(i, svg),
  .btn-icon-enhanced :is(i, svg) {
    width: var(--btn-icon-size-sm);
    height: var(--btn-icon-size-sm);
  }
  
  .btn-circle-enhanced {
    width: 40px;
    height: 40px;
  }

  .btn-circle-enhanced :is(i, svg) {
    width: var(--btn-icon-size-md);
    height: var(--btn-icon-size-md);
  }
  
  .input-enhanced,
  .select-enhanced {
    height: 36px;
    font-size: var(--font-size-sm);
    padding: 0 var(--spacing-sm);
  }
  
  .textarea-enhanced {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    min-height: 100px;
  }
  
  .switch-enhanced {
    width: 48px;
    height: 26px;
  }
  
  .switch-enhanced .slider::before {
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
  }
  
  .switch-enhanced input:checked + .slider::before {
    transform: translateX(22px);
  }
}

@media (max-width: 480px) {
  .btn-primary-enhanced,
  .btn-secondary-enhanced,
  .btn-ghost-enhanced {
    width: 100%;
    justify-content: center;
  }
  
  .input-enhanced,
  .select-enhanced,
  .textarea-enhanced {
    width: 100%;
  }
}

/* -------------------------- */
/* 工具?*/
/* -------------------------- */

/* 按钮状?*/
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:active {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  background: var(--text-disabled) !important;
  color: white !important;
  border-color: var(--text-disabled) !important;
}

.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.btn-loading.btn-secondary-enhanced::after,
.btn-loading.btn-ghost-enhanced::after {
  border-color: rgba(0, 102, 204, 0.3);
  border-top-color: var(--color-aero-blue);
}

/* 输入框状?*/
.input-error {
  border-color: var(--color-error-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.input-success {
  border-color: var(--color-signal-green) !important;
  box-shadow: 0 0 0 3px rgba(0, 163, 131, 0.1) !important;
}

.input-warning {
  border-color: var(--color-warning-amber) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1) !important;
}

/* 动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* v3.1 legacy feedback bridge — inline from feedback.css to prevent nested @import in dist */

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --feedback-success: var(--success-base);
  --feedback-error: var(--error-base);
  --feedback-warning: var(--warning-base);
  --feedback-info: var(--theme-primary);

  --feedback-success-bg: rgba(0, 163, 131, 0.1);
  --feedback-error-bg: rgba(255, 71, 87, 0.1);
  --feedback-warning-bg: rgba(255, 167, 38, 0.1);
  --feedback-info-bg: rgba(0, 132, 255, 0.1);

  --alert-padding: var(--spacing-md, 16px);
  --drawer-width: 400px;
}

/* ========================================
   Alert
   ======================================== */
.feedback-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm, 8px);
  padding: var(--alert-padding);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-left-width: 4px;
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-base, 16px);
  line-height: 1.5;
  position: relative;
}
.feedback-alert-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.feedback-alert-content { flex: 1; color: var(--text-primary); }
.feedback-alert-title { font-weight: 600; margin-bottom: var(--spacing-xs, 4px); }
.feedback-alert-description { color: var(--text-secondary); }
.feedback-alert-close { flex-shrink: 0; width: 20px; height: 20px; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--text-tertiary); transition: color 0.2s ease; }
.feedback-alert-close:hover { color: var(--text-primary); }
.feedback-alert-success { background: var(--feedback-success-bg); border-left-color: var(--feedback-success); }
.feedback-alert-success .feedback-alert-icon { color: var(--feedback-success); }
.feedback-alert-error { background: var(--feedback-error-bg); border-left-color: var(--feedback-error); }
.feedback-alert-error .feedback-alert-icon { color: var(--feedback-error); }
.feedback-alert-warning { background: var(--feedback-warning-bg); border-left-color: var(--feedback-warning); }
.feedback-alert-warning .feedback-alert-icon { color: var(--feedback-warning); }
.feedback-alert-info { background: var(--feedback-info-bg); border-left-color: var(--feedback-info); }
.feedback-alert-info .feedback-alert-icon { color: var(--feedback-info); }
[data-theme="dark"] .feedback-alert { background: var(--bg-elevated); border-color: var(--nav-border-light); }
[data-theme="dark"] .feedback-drawer-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .feedback-drawer { background: var(--bg-elevated); }

/* ========================================
   Drawer
   ======================================== */
.feedback-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 10000; animation: modal-overlay-in 0.2s ease; }
.feedback-drawer { position: fixed; top: 0; bottom: 0; width: var(--drawer-width); max-width: 90vw; background: var(--bg-base); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); z-index: 10001; display: flex; flex-direction: column; }
.feedback-drawer-right { right: 0; animation: drawer-slide-in-right 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes drawer-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
.feedback-drawer-left { left: 0; animation: drawer-slide-in-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes drawer-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.feedback-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg, 24px); border-bottom: 1px solid var(--border-primary); }
.feedback-drawer-title { font-size: var(--font-size-lg, 20px); font-weight: 600; color: var(--text-primary); }
.feedback-drawer-close { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-sm, 4px); cursor: pointer; color: var(--text-tertiary); transition: all 0.2s ease; }
.feedback-drawer-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.feedback-drawer-body { flex: 1; padding: var(--spacing-lg, 24px); overflow-y: auto; }
.feedback-drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm, 8px); padding: var(--spacing-lg, 24px); border-top: 1px solid var(--border-primary); }
[data-theme="dark"] .feedback-drawer { background: var(--bg-elevated); }

/* Status Shortcuts */
.feedback-success { color: var(--feedback-success); }
.feedback-error { color: var(--feedback-error); }
.feedback-warning { color: var(--feedback-warning); }
.feedback-info { color: var(--feedback-info); }
body.feedback-no-scroll { overflow: hidden; }

@media (max-width: 768px) {
  .feedback-modal { max-width: 100%; border-radius: var(--radius-md, 8px); }
  .feedback-drawer { width: 100%; max-width: 100%; }
  .feedback-modal-header, .feedback-modal-body, .feedback-modal-footer,
  .feedback-drawer-header, .feedback-drawer-body, .feedback-drawer-footer { padding: var(--spacing-md, 16px); }
}

.feedback-alert-close:focus-visible, .feedback-modal-close:focus-visible, .feedback-drawer-close:focus-visible { outline: 2px solid var(--brand-primary, #0084FF); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .feedback-modal, .feedback-drawer-right, .feedback-drawer-left, .feedback-modal-overlay, .feedback-drawer-overlay { animation: none; }
}

@media (prefers-contrast: high) {
  .feedback-alert, .feedback-modal, .feedback-drawer { border-width: 2px; }
}


/* v3.1 legacy navigation bridge: migrated from components.css */

/* -------------------------- */
/* 导航组件（旧 API 兼容层） */
/* -------------------------- */

/* 说明：基础导航结构已迁移至 02-components/navigation.css */

/* 面包屑旧链接与当前项 */
.nav-breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.nav-breadcrumb-link:hover {
  color: var(--color-aero-blue);
  background: rgba(0, 102, 204, 0.08);
}

.nav-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

/* 旧版标签页项 */
.nav-tabs-item {
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  position: relative;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-tabs-item:hover {
  color: var(--color-aero-blue);
  background: rgba(0, 102, 204, 0.05);
}

.nav-tabs-item.active {
  color: var(--color-aero-blue);
  border-bottom-color: var(--color-aero-blue);
  background: rgba(0, 102, 204, 0.05);
}

.nav-tabs-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-aero-blue);
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.4);
}

/* 旧版顶部导航项 */
.nav-top-item {
  padding: var(--spacing-md) var(--spacing-md);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  border-radius: var(--radius-sm);
  position: relative;
}

.nav-top-item:hover {
  color: var(--color-aero-blue);
  background: rgba(0, 102, 204, 0.08);
}

.nav-top-item.active {
  color: var(--color-aero-blue);
}

.nav-top-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--spacing-md);
  right: var(--spacing-md);
  height: 2px;
  background: var(--color-aero-blue);
  box-shadow: 0 0 8px rgba(0, 102, 204, 0.4);
}

/* 分页旧版禁用态补丁（保留 :disabled 兼容） */
.nav-pagination-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.05);
}


/* Legacy Breadcrumb & Pagination (迁移自 forms-b.css) */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-aero-blue);
  text-decoration: none;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.breadcrumb a:hover {
  color: var(--color-pulse-cyan);
  text-decoration: underline;
}

[data-theme="dark"] .breadcrumb a {
  color: var(--color-aero-blue);
}

[data-theme="dark"] .breadcrumb a:hover {
  color: var(--color-aero-blue);
  filter: brightness(1.2);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.pagination button {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pagination button:hover:not(:disabled) {
  background: var(--color-aero-blue);
  color: white;
  border-color: var(--color-aero-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button.active {
  background: var(--color-aero-blue);
  color: white;
  border-color: var(--color-aero-blue);
  font-weight: 600;
}

[data-theme="dark"] .pagination button {
  background: rgba(10, 20, 40, 0.6);
  border-color: rgba(0, 132, 255, 0.2);
}

[data-theme="dark"] .pagination button:hover:not(:disabled) {
  background: var(--color-aero-blue);
  border-color: var(--color-aero-blue);
}

[data-theme="dark"] .pagination button.active {
  background: var(--color-aero-blue);
  border-color: var(--color-aero-blue);
}

/* 深色模式导航 */
[data-theme="dark"] .nav-breadcrumb-link:hover {
  background: rgba(0, 132, 255, 0.15);
}

[data-theme="dark"] .nav-tabs-item:hover {
  background: rgba(0, 132, 255, 0.1);
}

[data-theme="dark"] .nav-tabs-item.active {
  background: rgba(0, 132, 255, 0.15);
}





@media (max-width: 768px) {
  .breadcrumb {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 480px) {
  .pagination {
    gap: var(--spacing-xs);
  }

  .pagination button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
}

/* -------------------------- */
/* 旧布局导航壳已迁移至 layout-system.css */
/* navigation-legacy.css 仅保留导航组件旧 API 兼容层 */
/* -------------------------- */





/**
 * Navigation Components
 * LingJing Core Design System v1.5.1+
 *
 * 包含导航组件:
 * - Breadcrumb (面包?
 * - Top Nav (顶部导航)
 * - Tab Navigation (标签导航)
 * - Pagination (分页?
 */

/* ========================================
   Breadcrumb (面包?
   ======================================== */

/**
 * .nav-breadcrumb
 * 描述: 面包屑导?
 * 用法: <nav class="nav-breadcrumb"><a>首页</a> / <a>列表</a> / <span>详情</span></nav>
 */
.nav-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 4px);
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary);
}

.nav-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  text-decoration: none;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.nav-breadcrumb-item:hover {
  color: var(--brand-primary);
}

.nav-breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: 500;
  cursor: default;
}

.nav-breadcrumb-separator {
  color: var(--text-tertiary);
  user-select: none;
}

/* ========================================
   Top Nav (顶部导航)
   ======================================== */

/**
 * .nav-top
 * 描述: 顶部主导航栏
 * 用法: <nav class="nav-top">...</nav>
 */
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-primary);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-top-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  font-size: var(--font-size-lg, 20px);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.nav-top-logo {
  width: 32px;
  height: 32px;
}

.nav-top-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 16px);
}

.nav-top-link {
  position: relative;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-top-link:hover {
  color: var(--text-primary);
}

.nav-top-link.active {
  color: var(--brand-primary);
}

.nav-top-link.active::after {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-primary);
}

.nav-top-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

/* Dark Mode */
[data-theme="dark"] .nav-top {
  background: var(--bg-elevated);
}

/* ========================================
  User Menu (用户菜单)
  ======================================== */

.user-menu-dropdown {
  position: relative;
  display: inline-block;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-glass);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.user-menu-trigger:hover {
  background: var(--bg-glass-accent);
  border-color: var(--color-aero-blue);
}

.user-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-aero-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.user-menu-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.user-menu-dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  padding: var(--spacing-sm);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.user-menu-dropdown.open .user-menu-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.user-menu-item:hover {
  background: var(--bg-glass-accent);
  color: var(--color-aero-blue);
}

.user-menu-divider {
  height: 1px;
  background: var(--glass-border-light);
  margin: var(--spacing-sm) 0;
}

[data-theme="dark"] .user-menu-item:hover {
  background: var(--bg-status-info);
}

/* ========================================
  Tab Navigation (标签导航)
  ======================================== */

/**
 * .nav-tabs
 * 描述: 标签页导?
 * 用法: <div class="nav-tabs">...</div>
 */
.nav-tabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  border-bottom: 1px solid var(--border-primary);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-tabs::-webkit-scrollbar {
  display: none;
}

.nav-tab {
  position: relative;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nav-tab:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.nav-tab.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.nav-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: var(--spacing-xs, 4px);
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  background: var(--bg-card-solid);
  color: var(--text-secondary);
  border-radius: var(--radius-full, 999px);
}


.nav-tab.active .nav-tab-badge {
  background: var(--brand-primary);
  color: white;
}

/* ========================================
   Pagination (分页?
   ======================================== */

/**
 * .nav-pagination
 * 描述: 分页导航
 * 用法: <div class="nav-pagination">...</div>
 */
.nav-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 4px);
}

.nav-pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-height-md);
  min-height: var(--btn-height-md);
  height: var(--btn-height-md);
  padding: 0 var(--control-padding-inline-sm);
  font-size: var(--control-font-md);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  user-select: none;
}

.nav-pagination-item:hover:not(.disabled):not(.active) {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--bg-secondary);
}

.nav-pagination-item.active {
  color: white;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  cursor: default;
}

.nav-pagination-item.disabled {
  color: var(--text-placeholder);
  cursor: not-allowed;
  opacity: 0.5;
}


.nav-pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-height-md);
  min-height: var(--btn-height-md);
  height: var(--btn-height-md);
  color: var(--text-tertiary);
  user-select: none;
}

.nav-pagination-prev,
.nav-pagination-next {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
}

/* Pagination Variants */
.nav-pagination-simple {
  gap: var(--spacing-md, 16px);
}

.nav-pagination-simple .nav-pagination-info {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary);
}

/* Dark Mode */
[data-theme="dark"] .nav-pagination-item {
  background: var(--bg-card-heavy);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  .nav-top {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  }

  .nav-top-links {
    display: none;
  }

  .nav-top-mobile-menu {
    display: flex;
  }

  .nav-tabs {
    gap: var(--spacing-xs, 4px);
  }

  .nav-tab {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 14px);
  }

  .nav-pagination {
    gap: 2px;
  }

  .nav-pagination-item {
    min-width: var(--btn-height-sm);
    min-height: var(--btn-height-sm);
    height: var(--btn-height-sm);
    padding: 0 var(--spacing-sm, 8px);
    font-size: var(--control-font-sm);
  }

  /* Hide some pagination items on mobile */
  .nav-pagination-item:not(.active):not(.nav-pagination-prev):not(.nav-pagination-next) {
    display: none;
  }

  .nav-pagination-item.active {
    display: flex;
  }
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus Visible */
.nav-breadcrumb-item:focus-visible,
.nav-top-link:focus-visible,
.nav-tab:focus-visible,
.nav-pagination-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .nav-breadcrumb-item,
  .nav-top-link,
  .nav-tab,
  .nav-pagination-item {
    transition: none;
  }
}


/**
 * Data Display Components
 * LingJing Core Design System v1.5.1+
 *
 * 包含数据展示组件:
 * - Accordion (手风琴)
 * - Tabs (标签页)
 * - List Group (列表组)
 */

/* ========================================
   Segmented Control (分段控制)
   ======================================== */

/**
 * .segmented-control
 * 描述: 分段控制器，用于在多个选项间切换
 * 用法: <div class="segmented-control">...</div>
 */
.segmented-control {
  display: inline-flex;
  padding: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  user-select: none;
}

.segmented-control-item {
  position: relative;
  padding: 6px 16px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  transition: all 0.2s ease;
  white-space: nowrap;
  z-index: 1;
}

.segmented-control-item:hover:not(.active) {
  color: var(--text-primary);
}

.segmented-control-item.active {
  background: var(--bg-base);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .segmented-control {
  background: var(--bg-secondary);
}

[data-theme="dark"] .segmented-control-item.active {
  background: var(--bg-card-light);
  box-shadow: var(--shadow-md);
}

/* ========================================
   Accordion (手风琴)
   ======================================== */


/**
 * .data-accordion
 * 描述: 可折叠的内容面板
 * 用法: <div class="data-accordion">...</div>
 */
.data-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  border-radius: var(--radius-lg, 12px);
}

.data-accordion-item {
  background: var(--bg-base);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  transition: all 0.2s ease;
}

.data-accordion-item.active {
  border-color: var(--brand-primary);
}

.data-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md, 16px);
  font-size: var(--font-size-base, 16px);
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.data-accordion-header:hover {
  background: var(--bg-secondary);
}

.data-accordion-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.data-accordion-item.active .data-accordion-icon {
  transform: rotate(180deg);
}

.data-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.data-accordion-item.active .data-accordion-content {
  max-height: 1000px; /* Large enough for most content */
}

.data-accordion-body {
  padding: 0 var(--spacing-md, 16px) var(--spacing-md, 16px);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Dark Mode */
[data-theme="dark"] .data-accordion-item {
  background: var(--bg-elevated);
}

/* ========================================
   Tabs (标签页)
   ======================================== */

/**
 * .data-tabs
 * 描述: 标签页内容容器
 * 用法: <div class="data-tabs">...</div>
 */
.data-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 16px);
}

.data-tabs-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  border-bottom: 1px solid var(--border-primary);
  overflow-x: auto;
  scrollbar-width: none;
}

.data-tabs-nav::-webkit-scrollbar {
  display: none;
}

.data-tab-trigger {
  position: relative;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.data-tab-trigger:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.data-tab-trigger.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.data-tabs-content {
  padding: var(--spacing-md, 16px) 0;
}

.data-tab-panel {
  display: none;
  animation: tab-fade-in 0.2s ease;
}

.data-tab-panel.active {
  display: block;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tabs Variants - Pills */
.data-tabs-pills .data-tabs-nav {
  border-bottom: none;
  gap: var(--spacing-sm, 8px);
}

.data-tabs-pills .data-tab-trigger {
  border-radius: var(--radius-md, 8px);
  border-bottom: none;
  margin-bottom: 0;
}

.data-tabs-pills .data-tab-trigger.active {
  background: var(--brand-primary);
  color: white;
}

/* ========================================
   List Group (列表组)
   ======================================== */

/**
 * .data-list-group
 * 描述: 结构化列表容器
 * 用法: <ul class="data-list-group">...</ul>
 */
.data-list-group {
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}

.data-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md, 16px);
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-primary);
  text-align: left;
  transition: all 0.2s ease;
  cursor: default;
}

.data-list-item:last-child {
  border-bottom: none;
}

.data-list-item-interactive {
  cursor: pointer;
}

.data-list-item-interactive:hover {
  background: var(--bg-secondary);
}

.data-list-item-interactive:active {
  background: var(--bg-tertiary);
}

.data-list-item.active {
  background: var(--bg-secondary);
  color: var(--brand-primary);
  border-left: 3px solid var(--brand-primary);
  padding-left: calc(var(--spacing-md, 16px) - 3px);
}

.data-list-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.data-list-item-title {
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  color: var(--text-primary);
}

.data-list-item-description {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary);
}

.data-list-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs, 4px);
  font-size: var(--font-size-sm, 14px);
  color: var(--text-tertiary);
}

.data-list-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-full, 999px);
}

.data-list-item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: var(--spacing-sm, 8px);
  color: var(--text-secondary);
}

/* List Group Variants */
.data-list-group-flush {
  border: none;
  border-radius: 0;
}

.data-list-group-flush .data-list-item:first-child {
  border-top: none;
}

/* Dark Mode */
[data-theme="dark"] .data-list-group {
  background: var(--bg-elevated);
}

/* ========================================
   Badges / Tags / Chart Container (迁移自 components.css)
   ======================================== */

.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--badge-height-sm);
  gap: var(--spacing-xs);
  padding: 0 var(--badge-padding-inline-sm);
  border-radius: var(--radius-sm);
  font-size: var(--control-font-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  border: 1px solid transparent;
}


.badge-primary,
.badge-info {
  background: var(--bg-status-info);
  color: var(--color-aero-blue);
  border-color: var(--glass-border-medium);
}

.badge-secondary {
  background: var(--bg-status-info);
  color: var(--color-pulse-cyan);
  border-color: var(--glass-border-medium);
}

.badge-success {
  background: var(--bg-status-success);
  color: var(--color-signal-green);
  border-color: var(--glass-border-medium);
}

.badge-warning {
  background: var(--bg-status-warning);
  color: var(--color-warning-amber);
  border-color: var(--color-warning-amber);
}


.badge-error,
.badge-danger {
  background: var(--bg-status-error);
  color: var(--color-error-red);
  border-color: var(--color-error-red);
}


.badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Legacy badge variants (迁移自 forms-b.css) */
.badge.success {
  background: var(--bg-status-success);
  color: var(--color-signal-green);
}

.badge.warning {
  background: var(--bg-status-warning);
  color: var(--color-warning-amber);
}

.badge.error {
  background: var(--bg-status-error);
  color: var(--color-alert-red);
}

.badge.info {
  background: var(--bg-status-info);
  color: var(--color-aero-blue);
}

.badge.neutral {
  background: var(--bg-status-neutral);
  color: var(--text-secondary);
}

[data-theme="dark"] .badge.success {
  background: var(--bg-status-success);
}

[data-theme="dark"] .badge.warning {
  background: var(--bg-status-warning);
}

[data-theme="dark"] .badge.error {
  background: var(--bg-status-error);
}

[data-theme="dark"] .badge.info {
  background: var(--bg-status-info);
  color: var(--color-aero-blue);
}


.data-tag {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-status-info);
  color: var(--color-aero-blue);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  border: 1px solid var(--glass-border-light);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.data-tag:hover {
  background: var(--bg-glass-accent);
  border-color: var(--glass-border-medium);
}

.chart-container {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--glass-shadow-light);
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.chart-container:hover {
  box-shadow: var(--glass-shadow), var(--glow-primary);
  transform: translateY(-2px);
}

/* ========================================
  Data Table (迁移自 forms-b.css)
  ======================================== */

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead {
  background: var(--bg-secondary);
}

.data-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--theme-border-base);
  white-space: nowrap;
}

.data-table td {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--theme-border-light);
  white-space: nowrap;
}

.data-table tbody tr {
  background: var(--bg-card-solid);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.data-table tbody tr:nth-child(even) {
  background: var(--bg-table-zebra);
}







.data-table tbody tr:hover {
  background: var(--bg-glass-accent);
  box-shadow: inset 0 0 0 1px var(--glass-border-light);
}

[data-theme="dark"] .data-table thead {
  background: var(--bg-glass-accent);
}

[data-theme="dark"] .data-table th {
  border-bottom-color: var(--glass-border-medium);
}

[data-theme="dark"] .data-table td {
  border-bottom-color: var(--glass-border-light);
}

[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--bg-glass-accent);
  box-shadow: 0 1px 3px var(--glass-border-medium);
}

/* ========================================
  Responsive Design
  ======================================== */


@media (max-width: 768px) {
  .data-accordion-header {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    font-size: var(--font-size-sm, 14px);
  }

  .data-accordion-body {
    padding: 0 var(--spacing-md, 16px) var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 14px);
  }

  .data-tab-trigger {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 14px);
  }

  .data-list-item {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm, 8px);
  }

  .data-list-item-meta {
    align-items: flex-start;
    width: 100%;
  }

  .data-table {
    font-size: var(--font-size-xs);
  }

  .data-table th,
  .data-table td {
    padding: var(--spacing-sm);
  }
}


@media (max-width: 480px) {
  .data-table th,
  .data-table td {
    padding: var(--spacing-xs);
  }
}

/* ========================================
  Accessibility
  ======================================== */


/* Focus Visible */
.data-accordion-header:focus-visible,
.data-tab-trigger:focus-visible,
.data-list-item-interactive:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .data-accordion-icon,
  .data-accordion-content,
  .data-tab-panel,
  .data-list-item {
    transition: none;
    animation: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .data-accordion-item,
  .data-list-group {
    border-width: 2px;
  }
}

/* ========================================
   Desc List（描述列表 / 只读详情字段）
   用于详情页展示只读 label:value 对，
   自适应多列，空间充裕时一行展示 2-4 项。
   禁止在可编辑表单中使用，表单请用 form-group。
   ======================================== */

/**
 * .desc-list
 * 外层容器，自适应列数（最小列宽 200px）
 */
.desc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md) var(--spacing-xl);
}

/**
 * .desc-list-item
 * 单个字段，label 在上，value 在下
 */
.desc-list-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

/**
 * .desc-list-label
 * 字段标签，次要色小字
 */
.desc-list-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}

/**
 * .desc-list-value
 * 字段值，主色正文
 */
.desc-list-value {
  font-size: var(--font-size-md);
  color: var(--text-primary);
  font-weight: 400;
  line-height: 1.5;
  word-break: break-word;
}

[data-theme="dark"] .desc-list-label {
  color: var(--text-secondary);
}

[data-theme="dark"] .desc-list-value {
  color: var(--text-primary);
}

/* ========================================
   Status Timeline（状态时间线 / 审批流时间线）
   迁移自 advanced-data-table.css，独立为通用组件。

   HTML 结构：
   <ol class="status-timeline">
     <li class="status-timeline-item completed">
       <div class="status-timeline-dot"></div>
       <div class="status-timeline-time">2026-04-02 09:18</div>
       <div class="status-timeline-content">
         <div class="status-timeline-title">步骤标题</div>
         <div class="status-timeline-meta">操作人：张三</div>
       </div>
     </li>
     <!-- 状态类：completed | active | pending -->
   </ol>

   兼容别名：activity-timeline（来自 UX 规范）
   ======================================== */

.status-timeline,
.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* 连接竖线 */
.status-timeline::before,
.activity-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 12px;
  width: 2px;
  background: var(--theme-border-light);
  border-radius: var(--radius-full);
}

/* 每个节点：2列 grid，左列固定 16px 放圆点，右列放内容 */
.status-timeline-item,
.activity-timeline-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-xs);
  align-items: start;
  padding-bottom: var(--spacing-xl);
  position: relative;
}

.status-timeline-item:last-child,
.activity-timeline-item:last-child {
  padding-bottom: 0;
}

/* 非圆点子元素全部进入第 2 列 */
.status-timeline-item > :not(.status-timeline-dot):not(.activity-timeline-dot),
.activity-timeline-item > :not(.status-timeline-dot):not(.activity-timeline-dot) {
  grid-column: 2;
}

/* ---- 圆点 ---- */
.status-timeline-dot,
.activity-timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--theme-bg-base);
  border: 2px solid var(--theme-border-base);
  position: relative;
  top: 2px;
  z-index: 1;
  transition: background var(--anim-duration-fast) ease,
              border-color var(--anim-duration-fast) ease;
}

/* completed：实心填充 */
.status-timeline-item.completed .status-timeline-dot,
.activity-timeline-item.completed .activity-timeline-dot {
  background: var(--theme-primary);
  border-color: var(--theme-primary);
}

/* active：当前步骤，蓝边 + 光晕 */
.status-timeline-item.active .status-timeline-dot,
.activity-timeline-item.active .activity-timeline-dot {
  background: var(--theme-bg-base);
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}

/* pending：未来步骤，灰边空心 */
.status-timeline-item.pending .status-timeline-dot,
.activity-timeline-item.pending .activity-timeline-dot {
  background: var(--theme-bg-base);
  border-color: var(--theme-border-light);
}

/* ---- 时间戳 ---- */
.status-timeline-time,
.activity-timeline-time {
  font-size: var(--font-size-xs);
  color: var(--theme-text-tertiary);
  line-height: 1.4;
}

.status-timeline-item.pending .status-timeline-time,
.activity-timeline-item.pending .activity-timeline-time {
  color: var(--theme-text-quaternary, var(--text-placeholder));
}

/* ---- 内容区 ---- */
.status-timeline-content,
.activity-timeline-content {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* 标题 */
.status-timeline-title,
.activity-timeline-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--theme-text-primary);
  line-height: 1.4;
}

.status-timeline-item.pending .status-timeline-title,
.activity-timeline-item.pending .activity-timeline-title {
  color: var(--theme-text-secondary);
  font-weight: 400;
}

/* 次要信息（操作人、备注等） */
.status-timeline-meta,
.activity-timeline-meta {
  font-size: var(--font-size-xs);
  color: var(--theme-text-secondary);
  line-height: 1.5;
}

.status-timeline-item.pending .status-timeline-meta,
.activity-timeline-item.pending .activity-timeline-meta {
  color: var(--theme-text-tertiary);
}

/* 深色模式 */
[data-theme="dark"] .status-timeline::before,
[data-theme="dark"] .activity-timeline::before {
  background: rgba(0, 132, 255, 0.15);
}

[data-theme="dark"] .status-timeline-item.active .status-timeline-dot,
[data-theme="dark"] .activity-timeline-item.active .activity-timeline-dot {
  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.2);
}


/**
 * Forms - Advanced Components
 * LingJing Core Design System v1.5.1+
 *
 * 包含高级表单组件:
 * - Form Input & Label (基础输入框和标签) ?全局统一规范
 * - Checkbox (多选框)
 * - Switch (开?
 * - Radio Button (单选框)
 * - Select Dropdown (下拉选择)
 * - Textarea (多行文本)
 * - Range Slider (滑块)
 * - Time Picker (12H/24H 时间选择?
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
  /* Form Advanced Colors */
  --form-checkbox-size: 18px;
  --form-switch-width: 44px;
  --form-switch-height: 24px;
  --form-switch-dot-size: 18px;
  --form-radio-size: 20px;
  --form-radio-dot-size: 10px;
  --form-select-height: var(--control-height-md);
  --form-textarea-min-height: 100px;
  --form-slider-height: 6px;
  --form-slider-thumb-size: 18px;
  --form-timepicker-width: 280px;
}

/* ========================================
   Form Group & Label (全局统一)
   ======================================== */

/**
 * .form-group
 * 描述: 表单组容?
 * 用法: <div class="form-group">...</div>
 */
.form-group {
  margin-bottom: var(--spacing-lg, 24px);
}

/**
 * .form-label
 * 描述: 表单标签
 * 用法: <label class="form-label">标签文本</label>
 */
.form-label {
  display: block;
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs, 4px);
}

/* ========================================
   Form Input (全局统一规范)
   ======================================== */

/**
 * .form-input
 * 描述: 基础文本输入?- 全局统一标准
 * 用法: <input type="text" class="form-input">
 * 规范: 圆角8px, 内边?px 16px, 边框1px语义化颜? 白色填充背景
 */
.form-input,
input[type="text"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="tel"].form-input,
input[type="url"].form-input,
input[type="number"].form-input {
  display: block;
  width: 100%;
  height: var(--form-input-height);
  padding: 0 var(--control-padding-inline-md);
  font-size: var(--control-font-md);
  font-family: inherit;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-input, #FFFFFF);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 8px);
  outline: none;
  transition: all 0.2s ease;
}

/* Hover State */
.form-input:hover {
  border-color: var(--brand-primary, #0084FF);
}

/* Focus State */
.form-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--bg-status-info);
}

/* Disabled State */
.form-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: var(--bg-secondary);
}

/* Placeholder */
.form-input::placeholder {
  color: var(--text-tertiary);
}

/* Legacy input-field (兼容旧类名) */
.input-field {
  background: var(--input-bg);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 0 var(--spacing-md);
  height: 36px;
  font-size: var(--font-size-sm);
  color: var(--color-aero-blue);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  outline: none;
}

.input-field:focus {
  border-color: var(--color-pulse-cyan);
  box-shadow: 0 0 0 3px var(--bg-status-info), var(--glow-secondary);
}

.input-field:hover {
  border-color: var(--color-aero-blue);
}

.input-field::placeholder {
  color: var(--text-placeholder);
}

/* Dark Mode - 深色模式使用半透明背景确保分割效果 */
[data-theme="dark"] .form-input {
  background-color: var(--bg-input, rgba(30, 41, 59, 0.5));
}


/* ========================================
   Checkbox (多选框)
   ======================================== */

/**
 * .form-checkbox
 * 描述: 多选框组件
 * 用法: <label class="form-checkbox"><input type="checkbox"><span>选项</span></label>
 */
.form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  cursor: pointer;
  user-select: none;
  position: relative;
  font-size: var(--font-size-base, 16px);
  color: var(--text-primary);
  transition: all 0.2s ease;
  padding-left: calc(var(--form-checkbox-size) + var(--spacing-sm, 8px));
  min-height: var(--form-checkbox-size);
}

.form-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  margin: 0;
  cursor: pointer;
}

.form-checkbox::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-xs, 4px);
  background: var(--bg-input, #FFFFFF);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.form-checkbox::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg) scale(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Checked State */
.form-checkbox input[type="checkbox"]:checked ~ ::before,
.form-checkbox:has(input[type="checkbox"]:checked)::before {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.form-checkbox input[type="checkbox"]:checked ~ ::after,
.form-checkbox:has(input[type="checkbox"]:checked)::after {
  transform: translateY(-60%) rotate(45deg) scale(1);
}

/* Hover State */
.form-checkbox:hover::before {
  border-color: var(--brand-primary);
}

/* Disabled State */
.form-checkbox input[type="checkbox"]:disabled ~ *,
.form-checkbox:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Indeterminate State */
.form-checkbox input[type="checkbox"]:indeterminate ~ ::before,
.form-checkbox:has(input[type="checkbox"]:indeterminate)::before {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.form-checkbox input[type="checkbox"]:indeterminate ~ ::after,
.form-checkbox:has(input[type="checkbox"]:indeterminate)::after {
  width: 8px;
  height: 0;
  border-width: 0 0 2px 0;
  transform: translateY(-50%) rotate(0deg) scale(1);
  left: 5px;
}

/* Dark Mode - 深色模式使用半透明背景确保分割效果 */
[data-theme="dark"] .form-checkbox::before {
  background: var(--bg-input);
}

[data-theme="dark"] .form-checkbox input[type="checkbox"]:checked ~ ::before,
[data-theme="dark"] .form-checkbox:has(input[type="checkbox"]:checked)::before {
  background: var(--brand-primary);
}

/* ========================================
   Checkbox Group (多选框?
   ======================================== */

.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}

.form-checkbox-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-md, 12px);
}

/* ========================================
   Switch (开?
   ======================================== */

/**
 * .form-switch
 * 描述: 开关组?
 * 用法: <label class="form-switch"><input type="checkbox"><span>开?/span></label>
 */
.form-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  cursor: pointer;
  user-select: none;
  position: relative;
  font-size: var(--font-size-base, 16px);
  color: var(--text-primary);
  padding-left: calc(var(--form-switch-width) + var(--spacing-sm, 8px));
  min-height: var(--form-switch-height);
}

.form-switch input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  width: var(--form-switch-width);
  height: var(--form-switch-height);
  margin: 0;
  cursor: pointer;
}

.form-switch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--form-switch-width);
  height: var(--form-switch-height);
  background: var(--glass-overlay-dark);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border: 1px solid var(--border-primary);
}

[data-theme="dark"] .form-switch::before {
  background: var(--glass-overlay-light);
}

.form-switch::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  width: var(--form-switch-dot-size);
  height: var(--form-switch-dot-size);
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%) translateX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Checked State */
.form-switch input[type="checkbox"]:checked ~ ::before,
.form-switch:has(input[type="checkbox"]:checked)::before {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.form-switch input[type="checkbox"]:checked ~ ::after,
.form-switch:has(input[type="checkbox"]:checked)::after {
  transform: translateY(-50%) translateX(20px);
}

/* Hover State */
.form-switch:hover::before {
  opacity: 0.8;
}

/* Disabled State */
.form-switch input[type="checkbox"]:disabled ~ span,
.form-switch:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Small Variant */
.form-switch.small {
  font-size: var(--font-size-sm, 14px);
  --form-switch-width: 36px;
  --form-switch-height: 20px;
  --form-switch-dot-size: 14px;
}

.form-switch.small input[type="checkbox"]:checked ~ ::after,
.form-switch.small:has(input[type="checkbox"]:checked)::after {
  transform: translateY(-50%) translateX(16px);
}

/* Large Variant */
.form-switch.large {
  font-size: var(--font-size-lg, 18px);
  --form-switch-width: 52px;
  --form-switch-height: 28px;
  --form-switch-dot-size: 22px;
}

.form-switch.large input[type="checkbox"]:checked ~ ::after,
.form-switch.large:has(input[type="checkbox"]:checked)::after {
  transform: translateY(-50%) translateX(24px);
}

/* ========================================
   Radio Button
   ======================================== */

/**
 * .form-radio
 * 描述: 单选按钮组?
 * 用法: <label class="form-radio"><input type="radio"><span>选项</span></label>
 */
.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  cursor: pointer;
  user-select: none;
  position: relative;
  font-size: var(--font-size-base, 16px);
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.form-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-radio::before {
  content: '';
  display: inline-block;
  width: var(--form-radio-size);
  height: var(--form-radio-size);
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  background: var(--bg-input, #FFFFFF);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.form-radio::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: var(--form-radio-dot-size);
  height: var(--form-radio-dot-size);
  border-radius: 50%;
  background: var(--brand-primary);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked State */
.form-radio input[type="radio"]:checked + span::before,
.form-radio:has(input[type="radio"]:checked)::before {
  border-color: var(--brand-primary);
  background: var(--bg-input, #FFFFFF);
}

.form-radio input[type="radio"]:checked ~ *::after,
.form-radio:has(input[type="radio"]:checked)::after {
  transform: translateY(-50%) scale(1);
}

/* Hover State */
.form-radio:hover::before {
  border-color: var(--brand-primary);
}

/* Disabled State */
.form-radio input[type="radio"]:disabled ~ *,
.form-radio:has(input[type="radio"]:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Focus State */
.form-radio input[type="radio"]:focus-visible ~ *::before,
.form-radio:has(input[type="radio"]:focus-visible)::before {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Radio Group */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}

.form-radio-group-inline {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md, 16px);
  flex-wrap: wrap;
}

/* Dark Mode - 深色模式使用半透明背景确保分割效果 */
[data-theme="dark"] .form-radio::before {
  background: var(--bg-input, rgba(30, 41, 59, 0.5));
  border-color: var(--border-secondary);
}

[data-theme="dark"] .form-radio input[type="radio"]:checked + span::before,
[data-theme="dark"] .form-radio:has(input[type="radio"]:checked)::before {
  background: var(--bg-input, rgba(30, 41, 59, 0.5));
}

/* ========================================
   Select Dropdown
   ======================================== */

/**
 * .form-select
 * 描述: 下拉选择?
 * 用法: <select class="form-select"><option>选项</option></select>
 */
.form-select {
  display: block;
  width: 100%;
  height: var(--form-select-height);
  padding: 0 var(--control-padding-inline-md);
  padding-right: 40px;
  font-size: var(--control-font-md);
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--bg-input, #FFFFFF);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md, 16px) center;
  background-size: 12px 8px;
  border: 1px solid var(--border-primary);

  border-radius: var(--radius-md, 8px);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Hover State */
.form-select:hover {
  border-color: var(--brand-primary);
}

/* Focus State */
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--bg-status-info);
}

/* Disabled State */
.form-select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: var(--bg-secondary);
}

/* Dark Mode - 深色模式使用半透明背景确保分割效果 */
[data-theme="dark"] .form-select {
  background-color: var(--bg-input);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300E5FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md, 16px) center;
  background-size: 12px 8px;
}


/* Select with Label */
.form-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.form-select-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--text-primary);
}

/* ========================================
   Textarea
   ======================================== */

/**
 * .form-textarea
 * 描述: 多行文本输入?- 全局统一标准
 * 用法: <textarea class="form-textarea"></textarea>
 * 规范: 圆角8px, 内边?px 16px, 边框1px语义化颜? 最小高?00px, 白色填充背景
 */
.form-textarea {
  display: block;
  width: 100%;
  min-height: var(--form-textarea-min-height);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-size: var(--font-size-base, 16px);
  font-family: inherit;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-input, #FFFFFF);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 8px);
  outline: none;
  resize: vertical;
  transition: all 0.2s ease;
}

/* Hover State */
.form-textarea:hover {
  border-color: var(--brand-primary);
}

/* Focus State */
.form-textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--bg-status-info);
}

/* Disabled State */
.form-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  background-color: var(--bg-secondary);
  resize: none;
}

/* Placeholder */
.form-textarea::placeholder {
  color: var(--text-tertiary);
}

/* Dark Mode - 深色模式使用半透明背景确保分割效果 */
[data-theme="dark"] .form-textarea {
  background-color: var(--bg-input);
}

/* Textarea with Counter */
.form-textarea-wrapper {
  position: relative;
}

.form-textarea-counter {
  position: absolute;
  bottom: var(--spacing-xs, 4px);
  right: var(--spacing-sm, 8px);
  font-size: var(--font-size-xs, 12px);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ========================================
   Range Slider
   ======================================== */

/**
 * .form-slider
 * 描述: 范围滑块
 * 用法: <input type="range" class="form-slider">
 */
.form-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--form-slider-height);
  background: var(--bg-secondary);
  border-radius: var(--radius-full, 999px);
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* Hover State */
.form-slider:hover {
  background: var(--bg-tertiary);
}

/* Track - Webkit */
.form-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--form-slider-thumb-size);
  height: var(--form-slider-thumb-size);
  background: var(--brand-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.form-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* Track - Firefox */
.form-slider::-moz-range-thumb {
  width: var(--form-slider-thumb-size);
  height: var(--form-slider-thumb-size);
  background: var(--brand-primary);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.form-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* Focus State */
.form-slider:focus::-webkit-slider-thumb {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.form-slider:focus::-moz-range-thumb {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Disabled State */
.form-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.form-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  background: var(--text-disabled);
}

.form-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
  background: var(--text-disabled);
}

/* Slider with Labels */
.form-slider-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}

.form-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary);
}

/* Dark Mode */
[data-theme="dark"] .form-slider {
  background: var(--bg-tertiary);
}

/* ========================================
   Time Picker (12H)
   ======================================== */

/**
 * .time-picker-12h
 * 描述: 12小时制时间选择?
 * 用法: <div class="time-picker-12h">...</div>
 */
.time-picker-12h,
.time-picker-24h {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  background: var(--bg-base);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md, 8px);
  width: var(--form-timepicker-width);
}

.time-picker-input {
  width: 50px;
  padding: var(--spacing-xs, 4px);
  text-align: center;
  font-size: var(--font-size-base, 16px);
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
}

.time-picker-input:focus {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm, 4px);
}

.time-picker-separator {
  font-size: var(--font-size-lg, 20px);
  font-weight: 600;
  color: var(--text-secondary);
}

.time-picker-period {
  display: flex;
  gap: var(--spacing-xs, 4px);
  margin-left: var(--spacing-sm, 8px);
}

.time-picker-period-btn {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-size: var(--font-size-sm, 14px);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.time-picker-period-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.time-picker-period-btn.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* Dark Mode */
[data-theme="dark"] .time-picker-12h,
[data-theme="dark"] .time-picker-24h {
  background: var(--bg-card-heavy);
}

/* ========================================
   Time Picker (24H)
   ======================================== */

/**
 * .time-picker-24h
 * 描述: 24小时制时间选择器（无需 AM/PM?
 * 用法: <div class="time-picker-24h">...</div>
 */
/* 样式?12H 相同，但没有 period 按钮 */

/* ========================================
  Search & Filter Inputs (迁移自 forms-b.css)
  ======================================== */

.search-input,
.filter-select,
.filter-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
textarea,
select {
  background: var(--input-bg);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border: var(--input-border);
  border-radius: var(--radius-md);
  padding: 0 var(--control-padding-inline-md);
  font-size: var(--control-font-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.5;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  outline: none;
  width: 100%;
}

.search-input,
.filter-select,
.filter-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
select {
  min-height: var(--form-input-height);
}

.search-input {
  flex: 1 1 auto;
  min-width: var(--toolbar-search-min);
  max-width: var(--toolbar-search-max);
}

.filter-select {
  width: auto; /* 覆盖通用的width: 100% */
  flex: 0 0 auto; /* 不扩展也不收缩，保持内容宽度 */
  min-width: var(--toolbar-field-min);
}

.filter-input {
  min-width: var(--toolbar-field-min);
}

.search-input:focus,
.filter-select:focus,
.filter-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 3px var(--bg-status-info);
  background: var(--bg-card);
}

.search-input:hover,
.filter-select:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: var(--glass-border-hover);
}

.search-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
}

select.filter-select,
select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 12px 8px;
  padding-right: calc(var(--spacing-md) * 2.5);
}

textarea {
  min-height: 80px;
  resize: vertical;
  padding: var(--spacing-sm) var(--spacing-md);
  line-height: 1.6;
}

[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--input-bg);
  border: var(--input-border);
  color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .filter-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--color-aero-blue);
  box-shadow: 0 0 0 3px var(--bg-status-info);
  background: var(--bg-card-heavy);
}

[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2300E5FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  background-size: 12px 8px;
}

/* ========================================
  Responsive Design
  ======================================== */


@media (max-width: 768px) {
  .form-radio-group-inline {
    flex-direction: column;
  }

  .time-picker-12h,
  .time-picker-24h {
    width: 100%;
  }
}

/* ========================================
   Accessibility
   ======================================== */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .form-radio::before,
  .form-select,
  .form-textarea,
  .form-slider,
  .time-picker-12h,
  .time-picker-24h {
    border-width: 2px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .form-radio,
  .form-radio::before,
  .form-radio::after,
  .form-select,
  .form-textarea,
  .form-slider,
  .form-slider::-webkit-slider-thumb,
  .form-slider::-moz-range-thumb,
  .time-picker-period-btn {
    transition: none;
  }
}


/**
 * Icon System - CSS纯图标系?
 * LingJing Core Design System v2.0.4
 *
 * 使用CSS绘制的图标，无需字体或SVG
 * 支持深色主题、可自定义大小和颜色
 *
 * @update 2026-02-21 - 优化CSS文件复制指引，明确建议使用RunCommand直接复制文件，避免Read工具截断
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
}

/* ========================================
   Base Icon Container
   ======================================== */

.css-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.css-icon.small {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.css-icon.large {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.css-icon.xlarge {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

/* ========================================
   Stat Icons (统计卡片图标)
   ======================================== */

/* 用户图标 */
.icon-users {
  position: relative;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-users::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 8px;
}

.icon-users::after {
  content: '';
  width: 18px;
  height: 12px;
  border-radius: 50% 50% 0 0;
  background: white;
  position: absolute;
  bottom: 6px;
}

/* 趋势图标 */
.icon-trending {
  position: relative;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-trending::before {
  content: '';
  width: 16px;
  height: 2px;
  background: white;
  position: absolute;
  transform: rotate(45deg);
}

.icon-trending::after {
  content: '';
  width: 6px;
  height: 6px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  position: absolute;
  right: 8px;
  top: 10px;
  transform: rotate(45deg);
}

/* 目标图标 */
.icon-target {
  position: relative;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border-radius: 50%;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-target::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
}

.icon-target::after {
  content: '';
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  position: absolute;
}

/* 星星图标 */
.icon-star {
  position: relative;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-star::before {
  content: '★';
  color: white;
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* ========================================
   Feature Icons (特性卡片图标)
   ======================================== */

/* 火箭图标 */
.icon-rocket {
  position: relative;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0, 132, 255, 0.1), rgba(99, 102, 241, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-rocket::before {
  content: '';
  width: 12px;
  height: 20px;
  background: var(--brand-primary);
  clip-path: polygon(50% 0, 100% 100%, 50% 85%, 0 100%);
  position: absolute;
}

.icon-rocket::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  opacity: 0.5;
}

/* 画板图标 */
.icon-palette {
  position: relative;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(219, 39, 119, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-palette::before {
  content: '';
  width: 24px;
  height: 24px;
  border: 3px solid #EC4899;
  border-radius: 50% 50% 0 50%;
  transform: rotate(-45deg);
  position: absolute;
}

/* 移动设备图标 */
.icon-mobile {
  position: relative;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-mobile::before {
  content: '';
  width: 16px;
  height: 24px;
  border: 3px solid #10B981;
  border-radius: 4px;
  position: absolute;
}

.icon-mobile::after {
  content: '';
  width: 6px;
  height: 2px;
  background: #10B981;
  border-radius: 1px;
  position: absolute;
  bottom: 10px;
}

/* 无障碍图?*/
.icon-accessibility {
  position: relative;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-accessibility::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #8B5CF6;
  border-radius: 50%;
  position: absolute;
  top: 10px;
}

.icon-accessibility::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 3px solid #8B5CF6;
  border-radius: 50%;
  border-top-color: transparent;
  position: absolute;
  bottom: 8px;
}

/* 工具图标 */
.icon-tool {
  position: relative;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-tool::before {
  content: '';
  width: 20px;
  height: 3px;
  background: #F59E0B;
  position: absolute;
  transform: rotate(-45deg);
}

.icon-tool::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 3px solid #F59E0B;
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-radius: 2px;
}

/* 包裹图标 */
.icon-package {
  position: relative;
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-package::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 3px solid #6366F1;
  border-radius: 4px;
  position: absolute;
}

.icon-package::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #6366F1;
  position: absolute;
  top: 14px;
}

/* ========================================
   Action Icons (操作图标)
   ======================================== */

/* 搜索图标 */
.icon-search {
  position: relative;
  width: 20px;
  height: 20px;
}

.icon-search::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.icon-search::after {
  content: '';
  width: 6px;
  height: 2px;
  background: currentColor;
  position: absolute;
  bottom: 1px;
  right: 0;
  transform: rotate(45deg);
}

/* 设置图标 */
.icon-settings {
  position: relative;
  width: 20px;
  height: 20px;
}

.icon-settings::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-settings::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(
    0 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 100% 40%,
    100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%
  );
}

/* 编辑图标 */
.icon-edit {
  position: relative;
  width: 18px;
  height: 18px;
}

.icon-edit::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-right: none;
  border-bottom: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(45deg);
}

.icon-edit::after {
  content: '';
  width: 6px;
  height: 2px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 删除图标 */
.icon-delete {
  position: relative;
  width: 16px;
  height: 18px;
}

.icon-delete::before {
  content: '';
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  border-top: none;
  border-radius: 0 0 3px 3px;
  position: absolute;
  bottom: 0;
  left: 1px;
}

.icon-delete::after {
  content: '';
  width: 16px;
  height: 2px;
  background: currentColor;
  position: absolute;
  top: 3px;
  left: 0;
}

/* 更多图标 */
.icon-more {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.icon-more::before,
.icon-more::after {
  content: '';
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  position: absolute;
}

.icon-more::before {
  left: 3px;
}

.icon-more::after {
  right: 3px;
}

/* 添加中间的点 */
.icon-more {
  background: radial-gradient(circle, currentColor 1.5px, transparent 1.5px) center / 3px 3px no-repeat;
}

/* ========================================
   Badge Icons (徽章图标 - 用于按钮)
   ======================================== */

.icon-badge {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger-base);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--spacing-xs);
}

/* ========================================
   Dark Theme Adjustments
   ======================================== */

[data-theme="dark"] .css-icon {
  opacity: 0.95;
}

[data-theme="dark"] .icon-rocket::before,
[data-theme="dark"] .icon-palette::before,
[data-theme="dark"] .icon-mobile::before,
[data-theme="dark"] .icon-accessibility::after,
[data-theme="dark"] .icon-tool::before,
[data-theme="dark"] .icon-package::before {
  filter: brightness(1.2);
}


/**
 * Lingjing Core - Progress Components (进度条组?
 *
 * @version 2.6.2
 * @description 进度指示器组件，用于展示任务完成度、加载状态等
 * @usage 文件上传、任务进度、加载状态、步骤指?
 *
 * 组件列表?
 * - .progress-linear         线性进度条（默认）
 * - .progress-circle         圆形进度?
 * - .progress-steps          步骤进度?
 * - .progress-dashboard      仪表盘进度条
 */

/* ============================================================================
   Linear Progress - 线性进度条
   ========================================================================= */

.progress-linear {
  /* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  width: 100%;
}

.progress-linear-track {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px; /* 遵循 ?2px 规则 */
  overflow: hidden;
}

[data-theme="dark"] .progress-linear-track {
  background: rgba(255, 255, 255, 0.1);
}

.progress-linear-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary, #0066FF), var(--brand-secondary, #00A3FF));
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* MD3 easing */
}

/* Progress States - 进度状?*/
.progress-linear-fill[data-status="success"] {
  background: linear-gradient(90deg, #52C41A, #73D13D);
}

.progress-linear-fill[data-status="warning"] {
  background: linear-gradient(90deg, #FAAD14, #FFC53D);
}

.progress-linear-fill[data-status="error"] {
  background: linear-gradient(90deg, #F5222D, #FF4D4F);
}

/* Progress Info - 进度信息 */
.progress-linear-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
}

[data-theme="dark"] .progress-linear-info {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

.progress-linear-label {
  font-weight: 500;
}

.progress-linear-percentage {
  font-weight: 600;
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
}

[data-theme="dark"] .progress-linear-percentage {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
}

/* Size Variants - 尺寸变体 */
.progress-linear.small .progress-linear-track {
  height: 4px;
}

.progress-linear.large .progress-linear-track {
  height: 12px;
}

/* Indeterminate Animation - 不确定进度动?*/
.progress-linear-fill.indeterminate {
  width: 30% !important;
  animation: progress-indeterminate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes progress-indeterminate {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}

/* Striped Pattern - 条纹样式 */
.progress-linear-fill.striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 0;
  }
}

/* ============================================================================
   Circle Progress - 圆形进度?
   ========================================================================= */

.progress-circle {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-circle svg {
  transform: rotate(-90deg); /* 从顶部开?*/
  width: 100%;
  height: 100%;
}

.progress-circle-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 8;
}

[data-theme="dark"] .progress-circle-track {
  stroke: rgba(255, 255, 255, 0.1);
}

.progress-circle-fill {
  fill: none;
  stroke: var(--brand-primary, #0066FF);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* MD3 easing */
}

/* Circle States - 圆形进度状?*/
.progress-circle-fill[data-status="success"] {
  stroke: #52C41A;
}

.progress-circle-fill[data-status="warning"] {
  stroke: #FAAD14;
}

.progress-circle-fill[data-status="error"] {
  stroke: #F5222D;
}

/* Circle Content - 圆形进度内容 */
.progress-circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-circle-percentage {
  font-size: var(--font-size-xl, 24px);
  font-weight: 600;
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  line-height: 1;
}

[data-theme="dark"] .progress-circle-percentage {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
}

.progress-circle-label {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
  margin-top: 4px;
}

[data-theme="dark"] .progress-circle-label {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

/* Size Variants - 圆形尺寸变体 */
.progress-circle.small {
  width: 80px;
  height: 80px;
}

.progress-circle.small .progress-circle-track,
.progress-circle.small .progress-circle-fill {
  stroke-width: 6;
}

.progress-circle.small .progress-circle-percentage {
  font-size: var(--font-size-lg, 18px);
}

.progress-circle.large {
  width: 160px;
  height: 160px;
}

.progress-circle.large .progress-circle-track,
.progress-circle.large .progress-circle-fill {
  stroke-width: 10;
}

.progress-circle.large .progress-circle-percentage {
  font-size: var(--font-size-xxl, 32px);
}

/* ============================================================================
   Steps Progress - 步骤进度?
   ========================================================================= */

.progress-steps {
  /* Layout */
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.progress-step {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  top: 16px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 0;
}

[data-theme="dark"] .progress-step:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.15);
}

.progress-step.completed::after {
  background: var(--brand-primary, #0066FF);
}

.progress-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

/* Step Circle - 步骤圆圈 */
.progress-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  border: 2px solid rgba(0, 0, 0, 0.15);
  color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
  font-weight: 600;
  font-size: var(--font-size-sm, 14px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .progress-step-circle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-tertiary-dark, rgba(255, 255, 255, 0.45));
}

/* Active Step */
.progress-step.active .progress-step-circle {
  background: var(--brand-primary, #0066FF);
  border-color: var(--brand-primary, #0066FF);
  color: white;
  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}

/* Completed Step */
.progress-step.completed .progress-step-circle {
  background: var(--brand-primary, #0066FF);
  border-color: var(--brand-primary, #0066FF);
  color: white;
}

.progress-step.completed .progress-step-circle::before {
  content: "\2713";
}

/* Error Step */
.progress-step.error .progress-step-circle {
  background: #F5222D;
  border-color: #F5222D;
  color: white;
}

.progress-step.error .progress-step-circle::before {
  content: "\2717";
}

/* Step Label - 步骤标签 */
.progress-step-label {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
  text-align: center;
  max-width: 120px;
  word-wrap: break-word;
}

[data-theme="dark"] .progress-step-label {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

.progress-step.active .progress-step-label,
.progress-step.completed .progress-step-label {
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  font-weight: 500;
}

[data-theme="dark"] .progress-step.active .progress-step-label,
[data-theme="dark"] .progress-step.completed .progress-step-label {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
}

.progress-step-description {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
  text-align: center;
  max-width: 120px;
}

[data-theme="dark"] .progress-step-description {
  color: var(--text-tertiary-dark, rgba(255, 255, 255, 0.45));
}

/* Vertical Steps - 垂直步骤 */
.progress-steps.vertical {
  flex-direction: column;
  align-items: flex-start;
}

.progress-steps.vertical .progress-step {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.progress-steps.vertical .progress-step:not(:last-child)::after {
  left: 16px;
  right: auto;
  top: calc(50% + 16px);
  bottom: calc(-50% + 16px);
  width: 2px;
  height: auto;
}

.progress-steps.vertical .progress-step-content {
  flex-direction: row;
  gap: var(--spacing-md, 12px);
}

.progress-steps.vertical .progress-step-label,
.progress-steps.vertical .progress-step-description {
  text-align: left;
  max-width: none;
}

/* ============================================================================
   Dashboard Progress - 仪表盘进度条
   ========================================================================= */

.progress-dashboard {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
}

.progress-dashboard svg {
  transform: rotate(135deg); /* 仪表盘起始角?*/
  width: 100%;
  height: 100%;
}

.progress-dashboard-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 10;
  stroke-linecap: round;
}

[data-theme="dark"] .progress-dashboard-track {
  stroke: rgba(255, 255, 255, 0.1);
}

.progress-dashboard-fill {
  fill: none;
  stroke: url(#progressGradient);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-dashboard-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-dashboard-percentage {
  font-size: var(--font-size-xxl, 32px);
  font-weight: 700;
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  line-height: 1;
}

[data-theme="dark"] .progress-dashboard-percentage {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
}

.progress-dashboard-label {
  font-size: var(--font-size-sm, 14px);
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
  margin-top: 4px;
}

[data-theme="dark"] .progress-dashboard-label {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 768px) {
  .progress-circle,
  .progress-dashboard {
    width: 100px;
    height: 100px;
  }

  .progress-circle .progress-circle-percentage,
  .progress-dashboard .progress-dashboard-percentage {
    font-size: var(--font-size-lg, 18px);
  }

  .progress-steps {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress-step {
    width: 100%;
  }

  .progress-step:not(:last-child)::after {
    left: 16px;
    right: auto;
    top: calc(50% + 16px);
    bottom: calc(-50% + 16px);
    width: 2px;
    height: auto;
  }

  .progress-step-content {
    flex-direction: row;
    gap: var(--spacing-md, 12px);
  }

  .progress-step-label,
  .progress-step-description {
    text-align: left;
    max-width: none;
  }
}

/* ============================================================================
   Accessibility - 无障碍访?
   ========================================================================= */

/* Focus Styles */
.progress-linear:focus-visible,
.progress-circle:focus-visible,
.progress-step:focus-visible {
  outline: 2px solid var(--brand-primary, #0066FF);
  outline-offset: 2px;
}

/* Screen Reader */
.progress-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .progress-linear-fill,
  .progress-circle-fill,
  .progress-dashboard-fill,
  .progress-step-circle {
    transition: none;
  }

  .progress-linear-fill.indeterminate,
  .progress-linear-fill.striped {
    animation: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .progress-linear-track,
  .progress-circle-track,
  .progress-dashboard-track {
    border: 1px solid currentColor;
  }

  .progress-step-circle {
    border-width: 3px;
  }
}


/**
 * Lingjing Core - Date Picker Components (日期选择器组?
 *
 * @version 2.6.2
 * @description 日期选择器组件，用于日期、日期范围、月份、年份选择
 * @usage 表单日期输入、数据筛选、报表查询、日程管?
 *
 * 组件列表?
 * - .date-picker           基础日期选择?
 * - .date-picker-range     日期范围选择?
 * - .date-picker-month     月份选择?
 * - .date-picker-year      年份选择?
 */

/* ============================================================================
   Date Picker Base - 日期选择器基础样式
   ========================================================================= */

.date-picker {
  /* Layout */
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}

/* Input Field - 输入?*/
.date-picker-input {
  width: 100%;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  padding-right: 36px; /* 为图标留空间 */
  font-size: var(--font-size-md, 16px);
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm, 6px);
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.date-picker-input::placeholder {
  color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
}

.date-picker-input:hover {
  border-color: var(--brand-primary, #0066FF);
}

.date-picker-input:focus {
  border-color: var(--brand-primary, #0066FF);
  box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.1);
}

[data-theme="dark"] .date-picker-input {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Calendar Icon - 日历图标 */
.date-picker-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

[data-theme="dark"] .date-picker-icon {
  color: var(--text-tertiary-dark, rgba(255, 255, 255, 0.45));
}

/* ============================================================================
   Date Picker Panel - 日期选择面板
   ========================================================================= */

.date-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 280px;
  padding: var(--spacing-md, 12px);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.date-picker-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="dark"] .date-picker-panel {
  background: rgba(20, 20, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Panel Header - 面板头部 */
.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md, 12px);
  padding-bottom: var(--spacing-sm, 8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .date-picker-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.date-picker-header-label {
  font-size: var(--font-size-md, 16px);
  font-weight: 600;
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  cursor: pointer;
  transition: color 0.3s ease;
}

.date-picker-header-label:hover {
  color: var(--brand-primary, #0066FF);
}

[data-theme="dark"] .date-picker-header-label {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
}

/* Navigation Buttons - 导航按钮 */
.date-picker-nav {
  display: flex;
  gap: var(--spacing-xs, 4px);
}

.date-picker-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: var(--font-size-sm);
}

.date-picker-nav-btn:hover {
  background: rgba(0, 102, 255, 0.1);
  border-color: var(--brand-primary, #0066FF);
  color: var(--brand-primary, #0066FF);
}

[data-theme="dark"] .date-picker-nav-btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

/* ============================================================================
   Calendar Grid - 日历网格
   ========================================================================= */

.date-picker-calendar {
  width: 100%;
}

/* Weekday Headers - 星期标题 */
.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--spacing-xs, 4px);
}

.date-picker-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: var(--font-size-sm, 14px);
  font-weight: 600;
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
}

[data-theme="dark"] .date-picker-weekday {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

/* Date Cells Grid - 日期单元格网?*/
.date-picker-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: var(--font-size-sm, 14px);
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.date-picker-cell:hover {
  background: rgba(0, 102, 255, 0.1);
  border-color: rgba(0, 102, 255, 0.3);
}

[data-theme="dark"] .date-picker-cell {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
}

/* Cell States - 单元格状?*/

/* Today - 今天 */
.date-picker-cell.today {
  border-color: var(--brand-primary, #0066FF);
  font-weight: 600;
}

/* Selected - 选中 */
.date-picker-cell.selected {
  background: var(--brand-primary, #0066FF);
  color: white;
  font-weight: 600;
}

.date-picker-cell.selected:hover {
  background: var(--brand-secondary, #0052CC);
}

/* Disabled - 禁用 */
.date-picker-cell.disabled {
  color: var(--text-tertiary, rgba(0, 0, 0, 0.25));
  cursor: not-allowed;
  opacity: 0.5;
}

.date-picker-cell.disabled:hover {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] .date-picker-cell.disabled {
  color: var(--text-tertiary-dark, rgba(255, 255, 255, 0.25));
}

/* Other Month - 其他月份 */
.date-picker-cell.other-month {
  color: var(--text-tertiary, rgba(0, 0, 0, 0.45));
}

[data-theme="dark"] .date-picker-cell.other-month {
  color: var(--text-tertiary-dark, rgba(255, 255, 255, 0.45));
}

/* ============================================================================
   Date Range Picker - 日期范围选择?
   ========================================================================= */

.date-picker-range {
  max-width: 640px; /* 两个日历并排 */
}

.date-picker-range .date-picker-panel {
  min-width: 580px;
}

.date-picker-range-calendars {
  display: flex;
  gap: var(--spacing-lg, 16px);
}

/* Range Selection - 范围选择 */
.date-picker-cell.in-range {
  background: rgba(0, 102, 255, 0.1);
  border-radius: 0;
}

.date-picker-cell.range-start {
  background: var(--brand-primary, #0066FF);
  color: white;
  border-top-left-radius: var(--radius-sm, 4px);
  border-bottom-left-radius: var(--radius-sm, 4px);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.date-picker-cell.range-end {
  background: var(--brand-primary, #0066FF);
  color: white;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-sm, 4px);
  border-bottom-right-radius: var(--radius-sm, 4px);
}

.date-picker-cell.range-start.range-end {
  border-radius: var(--radius-sm, 4px);
}

/* ============================================================================
   Month Picker - 月份选择?
   ========================================================================= */

.date-picker-month .date-picker-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm, 8px);
}

.date-picker-month-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: var(--font-size-md, 16px);
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.date-picker-month-cell:hover {
  background: rgba(0, 102, 255, 0.1);
  border-color: var(--brand-primary, #0066FF);
}

.date-picker-month-cell.selected {
  background: var(--brand-primary, #0066FF);
  border-color: var(--brand-primary, #0066FF);
  color: white;
  font-weight: 600;
}

[data-theme="dark"] .date-picker-month-cell {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
  border-color: rgba(255, 255, 255, 0.15);
}

/* ============================================================================
   Year Picker - 年份选择?
   ========================================================================= */

.date-picker-year .date-picker-years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm, 8px);
  max-height: 280px;
  overflow-y: auto;
}

.date-picker-year-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: var(--font-size-md, 16px);
  color: var(--text-primary, rgba(0, 0, 0, 0.85));
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.date-picker-year-cell:hover {
  background: rgba(0, 102, 255, 0.1);
  border-color: var(--brand-primary, #0066FF);
}

.date-picker-year-cell.selected {
  background: var(--brand-primary, #0066FF);
  border-color: var(--brand-primary, #0066FF);
  color: white;
  font-weight: 600;
}

[data-theme="dark"] .date-picker-year-cell {
  color: var(--text-primary-dark, rgba(255, 255, 255, 0.85));
  border-color: rgba(255, 255, 255, 0.15);
}

/* Scrollbar Styling */
.date-picker-years::-webkit-scrollbar {
  width: 6px;
}

.date-picker-years::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.date-picker-years::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.date-picker-years::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .date-picker-years::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .date-picker-years::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .date-picker-years::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   Panel Footer - 面板底部
   ========================================================================= */

.date-picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-md, 12px);
  padding-top: var(--spacing-sm, 8px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .date-picker-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.date-picker-today-btn {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-size: var(--font-size-sm, 14px);
  color: var(--brand-primary, #0066FF);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.date-picker-today-btn:hover {
  background: rgba(0, 102, 255, 0.1);
}

.date-picker-actions {
  display: flex;
  gap: var(--spacing-sm, 8px);
}

.date-picker-btn {
  padding: var(--spacing-xs, 4px) var(--spacing-md, 12px);
  font-size: var(--font-size-sm, 14px);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.date-picker-btn-cancel {
  background: transparent;
  color: var(--text-secondary, rgba(0, 0, 0, 0.65));
}

.date-picker-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.25);
}

.date-picker-btn-confirm {
  background: var(--brand-primary, #0066FF);
  color: white;
  border-color: var(--brand-primary, #0066FF);
}

.date-picker-btn-confirm:hover {
  background: var(--brand-secondary, #0052CC);
}

[data-theme="dark"] .date-picker-btn {
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .date-picker-btn-cancel {
  color: var(--text-secondary-dark, rgba(255, 255, 255, 0.65));
}

[data-theme="dark"] .date-picker-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 768px) {
  .date-picker {
    max-width: 100%;
  }

  .date-picker-panel {
    min-width: 100%;
    left: 0;
    right: 0;
  }

  .date-picker-range .date-picker-panel {
    min-width: 100%;
  }

  .date-picker-range-calendars {
    flex-direction: column;
  }

  .date-picker-months {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .date-picker-years {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ============================================================================
   Accessibility - 无障碍访?
   ========================================================================= */

/* Focus Styles */
.date-picker-input:focus-visible,
.date-picker-nav-btn:focus-visible,
.date-picker-cell:focus-visible,
.date-picker-month-cell:focus-visible,
.date-picker-year-cell:focus-visible {
  outline: 2px solid var(--brand-primary, #0066FF);
  outline-offset: 2px;
}

/* Keyboard Navigation */
.date-picker-cell:focus,
.date-picker-month-cell:focus,
.date-picker-year-cell:focus {
  background: rgba(0, 102, 255, 0.1);
  border-color: var(--brand-primary, #0066FF);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .date-picker-panel,
  .date-picker-cell,
  .date-picker-nav-btn,
  .date-picker-input {
    transition: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .date-picker-input,
  .date-picker-panel,
  .date-picker-cell,
  .date-picker-nav-btn {
    border-width: 2px;
  }

  .date-picker-cell.selected,
  .date-picker-month-cell.selected,
  .date-picker-year-cell.selected {
    font-weight: 700;
  }
}

/* Screen Reader Only */
.date-picker-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/**
 * Lingjing Core - Dropdown Menu Component
 * 
 * @version 2.6.2
 * @description 下拉菜单组件 - 用于操作菜单、用户菜单、筛选器
 * @usage 所有场景通用的核心交互组?
 * 
 * Components:
 * - .dropdown           下拉容器
 * - .dropdown-trigger   触发按钮
 * - .dropdown-menu      菜单列表
 * - .dropdown-item      菜单?
 * - .dropdown-divider   分割?
 * - .dropdown-header    分组标题
 * 
 * Positions:
 * - .dropdown-bottom-left    底部左对齐（默认?
 * - .dropdown-bottom-right   底部右对?
 * - .dropdown-top-left       顶部左对?
 * - .dropdown-top-right      顶部右对?
 */

/* ============================================================================
   Dropdown Container - 下拉容器
   ========================================================================= */

.dropdown {
  /* Layout */
  position: relative;
  display: inline-block;
}

/* Trigger Button - 触发按钮 */
.dropdown-trigger {
  /* 使用现有按钮样式，不额外定义 */
  cursor: pointer;
}

/* ============================================================================
   Dropdown Menu - 菜单列表
   ========================================================================= */

.dropdown-menu {
  /* Positioning */
  position: absolute;
  z-index: 1000;
  
  /* Layout */
  min-width: 160px;
  padding: var(--spacing-xs) 0;
  margin: 0;
  list-style: none;
  
  /* Style - 玻璃拟态效?*/
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--anim-duration-fast) var(--anim-ease-out),
              visibility var(--anim-duration-fast) var(--anim-ease-out),
              transform var(--anim-duration-fast) var(--anim-ease-out);
  
  /* Overflow */
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 深色主题 */
[data-theme="dark"] .dropdown-menu {
  background: var(--bg-card-dark);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Show on hover/active */
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Scrollbar */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 102, 204, 0.3);
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 102, 204, 0.5);
}

/* ============================================================================
   Dropdown Positions - 位置变体
   ========================================================================= */

/* Bottom Left - 底部左对齐（默认?*/
.dropdown-bottom-left .dropdown-menu,
.dropdown .dropdown-menu {
  top: calc(100% + 4px);
  left: 0;
}

/* Bottom Right - 底部右对?*/
.dropdown-bottom-right .dropdown-menu {
  top: calc(100% + 4px);
  right: 0;
}

/* Top Left - 顶部左对?*/
.dropdown-top-left .dropdown-menu {
  bottom: calc(100% + 4px);
  left: 0;
  transform: translateY(8px);
}

.dropdown-top-left:hover .dropdown-menu,
.dropdown-top-left.active .dropdown-menu {
  transform: translateY(0);
}

/* Top Right - 顶部右对?*/
.dropdown-top-right .dropdown-menu {
  bottom: calc(100% + 4px);
  right: 0;
  transform: translateY(8px);
}

.dropdown-top-right:hover .dropdown-menu,
.dropdown-top-right.active .dropdown-menu {
  transform: translateY(0);
}

/* ============================================================================
   Dropdown Item - 菜单?
   ========================================================================= */

.dropdown-item {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  
  /* Style */
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  
  /* Remove default styles */
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-primary-dark);
}

/* Hover State */
.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--brand-primary);
}

/* Active State */
.dropdown-item:active {
  background: var(--bg-active);
}

/* Selected State */
.dropdown-item.selected {
  background: rgba(0, 102, 204, 0.1);
  color: var(--brand-primary);
  font-weight: 500;
}

/* Disabled State */
.dropdown-item.disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
}

[data-theme="dark"] .dropdown-item.disabled {
  color: var(--text-tertiary-dark);
}

/* Icon in Item */
.dropdown-item i,
.dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ============================================================================
   Dropdown Divider - 分割?
   ========================================================================= */

.dropdown-divider {
  height: 1px;
  margin: var(--spacing-xs) 0;
  background: var(--border-primary);
  border: none;
}

[data-theme="dark"] .dropdown-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   Dropdown Header - 分组标题
   ========================================================================= */

.dropdown-header {
  /* Layout */
  padding: var(--spacing-xs) var(--spacing-md);
  
  /* Style */
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="dark"] .dropdown-header {
  color: var(--text-tertiary-dark);
}

/* ============================================================================
   Dropdown Variants - 变体样式
   ========================================================================= */

/* Danger Item - 危险操作 */
.dropdown-item.danger {
  color: #F5222D;
}

.dropdown-item.danger:hover {
  background: rgba(245, 34, 45, 0.1);
  color: #F5222D;
}

/* Success Item - 成功操作 */
.dropdown-item.success {
  color: #52C41A;
}

.dropdown-item.success:hover {
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
}

/* Large Menu - 大号菜单 */
.dropdown-menu.large {
  min-width: 240px;
}

.dropdown-menu.large .dropdown-item {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
}

/* Small Menu - 小号菜单 */
.dropdown-menu.small {
  min-width: 120px;
}

.dropdown-menu.small .dropdown-item {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

/* ============================================================================
   Dropdown with Icons - 带图标的菜单
   ========================================================================= */

.dropdown-item-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dropdown-item-icon i,
.dropdown-item-icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================================================
   Dropdown with Badges - 带徽章的菜单
   ========================================================================= */

.dropdown-item-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.dropdown-item-badge .badge {
  margin-left: auto;
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 768px) {
  .dropdown-menu {
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }
  
  .dropdown-menu.large {
    min-width: 240px;
  }
}

/* ============================================================================
   Accessibility - 无障碍访?
   ========================================================================= */

/* Focus State */
.dropdown-item:focus {
  outline: none;
  background: var(--bg-hover);
}

.dropdown-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

/* Keyboard Navigation */
.dropdown-item[aria-selected="true"] {
  background: var(--bg-hover);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu {
    transition: none;
  }
  
  .dropdown:hover .dropdown-menu,
  .dropdown.active .dropdown-menu {
    transform: none;
  }
}

/* ============================================================================
   Usage Examples - 使用示例
   ========================================================================= */

/**
 * 基础用法?
 * 
 * <div class="dropdown">
 *   <button class="btn-icon dropdown-trigger">
 *     <i data-lucide="more-horizontal"></i>
 *   </button>
 *   <ul class="dropdown-menu">
 *     <li><button class="dropdown-item">编辑</button></li>
 *     <li><button class="dropdown-item">复制</button></li>
 *     <li><hr class="dropdown-divider"></li>
 *     <li><button class="dropdown-item danger">删除</button></li>
 *   </ul>
 * </div>
 * 
 * 带图标的菜单?
 * 
 * <div class="dropdown">
 *   <button class="btn-outline dropdown-trigger">
 *     <span>操作</span>
 *     <i data-lucide="chevron-down"></i>
 *   </button>
 *   <ul class="dropdown-menu">
 *     <li>
 *       <button class="dropdown-item">
 *         <i data-lucide="edit"></i>
 *         <span>编辑</span>
 *       </button>
 *     </li>
 *     <li>
 *       <button class="dropdown-item">
 *         <i data-lucide="copy"></i>
 *         <span>复制</span>
 *       </button>
 *     </li>
 *     <li><hr class="dropdown-divider"></li>
 *     <li>
 *       <button class="dropdown-item danger">
 *         <i data-lucide="trash-2"></i>
 *         <span>删除</span>
 *       </button>
 *     </li>
 *   </ul>
 * </div>
 * 
 * 用户菜单（右对齐）：
 * 
 * <div class="dropdown dropdown-bottom-right">
 *   <button class="btn-icon dropdown-trigger">
 *     <i data-lucide="user"></i>
 *   </button>
 *   <ul class="dropdown-menu">
 *     <li class="dropdown-header">账户设置</li>
 *     <li>
 *       <a href="#profile" class="dropdown-item">
 *         <i data-lucide="user"></i>
 *         <span>个人资料</span>
 *       </a>
 *     </li>
 *     <li>
 *       <a href="#settings" class="dropdown-item">
 *         <i data-lucide="settings"></i>
 *         <span>系统设置</span>
 *       </a>
 *     </li>
 *     <li><hr class="dropdown-divider"></li>
 *     <li>
 *       <button class="dropdown-item danger">
 *         <i data-lucide="log-out"></i>
 *         <span>退出登?/span>
 *       </button>
 *     </li>
 *   </ul>
 * </div>
 * 
 * JavaScript控制（点击切换）?
 * 
 * const dropdown = document.querySelector('.dropdown');
 * const trigger = dropdown.querySelector('.dropdown-trigger');
 * 
 * trigger.addEventListener('click', () => {
 *   dropdown.classList.toggle('active');
 * });
 * 
 * // 点击外部关闭
 * document.addEventListener('click', (e) => {
 *   if (!dropdown.contains(e.target)) {
 *     dropdown.classList.remove('active');
 *   }
 * });
 */


/**
 * Lingjing Core - Tooltip Component
 * 
 * @version 2.6.2
 * @description 提示组件 - 用于图标说明、帮助信息、简短提?
 * @usage 所有场景通用的核心交互组?
 * 
 * Components:
 * - .tooltip            提示容器（悬停触发）
 * - .tooltip-trigger    触发元素（按钮、图标等?
 * - .tooltip-content    提示内容（自动定位）
 * - .tooltip-arrow      箭头指示?
 * 
 * Positions:
 * - .tooltip-top        顶部（默认）
 * - .tooltip-bottom     底部
 * - .tooltip-left       左侧
 * - .tooltip-right      右侧
 * 
 * Themes:
 * - .tooltip-dark       深色主题（默认）
 * - .tooltip-light      浅色主题
 */

/* ============================================================================
   Tooltip Container - 提示容器
   ========================================================================= */

.tooltip {
  /* Layout */
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger Element - 触发元素 */
.tooltip-trigger {
  /* 无需特殊样式，使用原有元素样?*/
  cursor: help;
}

/* ============================================================================
   Tooltip Content - 提示内容
   ========================================================================= */

.tooltip-content {
  /* Positioning */
  position: absolute;
  z-index: 10000;
  pointer-events: none;
  
  /* Layout */
  padding: var(--spacing-xs) var(--spacing-sm);
  max-width: 320px;
  
  /* Style - 深色主题（默认） */
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* Animation */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--anim-duration-fast) var(--anim-ease-out),
              visibility var(--anim-duration-fast) var(--anim-ease-out),
              transform var(--anim-duration-fast) var(--anim-ease-out);
}

/* Show on hover */
.tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* ============================================================================
   Attribute based Tooltip - 属性触发式提示 (v2.0.6 新增)
   用法: <button class="tooltip" data-tooltip="提示文字">
   ========================================================================= */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 10000;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  pointer-events: none;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Position variants for attribute tooltip */
[data-position="bottom"]::after {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateX(-50%) translateY(-4px);
}

[data-position="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

[data-position="left"]::after {
  right: calc(100% + 8px);
  left: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}

[data-position="left"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

[data-position="right"]::after {
  left: calc(100% + 8px);
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

[data-position="right"]:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* Dark theme support for attribute tooltip */
[data-theme="dark"] [data-tooltip]::after {
  background: var(--neutral-800);
  color: var(--neutral-100);
  border: 1px solid var(--neutral-700);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Light Theme */

.tooltip-light .tooltip-content {
  background: white;
  color: var(--text-primary);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .tooltip-light .tooltip-content {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================================
   Tooltip Arrow - 箭头指示?
   ========================================================================= */

.tooltip-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0.85);
  transform: rotate(45deg);
}

/* Light Theme Arrow */
.tooltip-light .tooltip-arrow {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .tooltip-light .tooltip-arrow {
  background: var(--bg-card);
  border-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================================
   Tooltip Positions - 位置变体
   ========================================================================= */

/* Top Position - 顶部（默认） */
.tooltip-top .tooltip-content,
.tooltip .tooltip-content {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.tooltip-top:hover .tooltip-content,
.tooltip:hover .tooltip-content {
  transform: translateX(-50%) translateY(0);
}

.tooltip-top .tooltip-arrow,
.tooltip .tooltip-arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  margin-top: -4px;
}

/* Bottom Position - 底部 */
.tooltip-bottom .tooltip-content {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.tooltip-bottom:hover .tooltip-content {
  transform: translateX(-50%) translateY(0);
}

.tooltip-bottom .tooltip-arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  margin-bottom: -4px;
}

/* Left Position - 左侧 */
.tooltip-left .tooltip-content {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}

.tooltip-left:hover .tooltip-content {
  transform: translateY(-50%) translateX(0);
}

.tooltip-left .tooltip-arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  margin-left: -4px;
}

/* Right Position - 右侧 */
.tooltip-right .tooltip-content {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

.tooltip-right:hover .tooltip-content {
  transform: translateY(-50%) translateX(0);
}

.tooltip-right .tooltip-arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  margin-right: -4px;
}

/* ============================================================================
   Tooltip Variants - 变体样式
   ========================================================================= */

/* Multiline Tooltip - 多行提示 */
.tooltip-multiline .tooltip-content {
  max-width: 240px;
  text-align: left;
  white-space: normal;
}

/* Large Tooltip - 大号提示 */
.tooltip-large .tooltip-content {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  max-width: 400px;
}

/* Success Tooltip - 成功提示 */
.tooltip-success .tooltip-content {
  background: #52C41A;
  color: white;
}

.tooltip-success .tooltip-arrow {
  background: #52C41A;
}

/* Warning Tooltip - 警告提示 */
.tooltip-warning .tooltip-content {
  background: #FAAD14;
  color: white;
}

.tooltip-warning .tooltip-arrow {
  background: #FAAD14;
}

/* Error Tooltip - 错误提示 */
.tooltip-error .tooltip-content {
  background: #F5222D;
  color: white;
}

.tooltip-error .tooltip-arrow {
  background: #F5222D;
}

/* Info Tooltip - 信息提示 */
.tooltip-info .tooltip-content {
  background: var(--brand-primary);
  color: white;
}

.tooltip-info .tooltip-arrow {
  background: var(--brand-primary);
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 768px) {
  .tooltip-content {
    max-width: 240px;
    font-size: var(--font-size-xs);
  }
  
  .tooltip-large .tooltip-content {
    max-width: 280px;
  }
}

/* ============================================================================
   Accessibility - 无障碍访?
   ========================================================================= */

/* Focus State */
.tooltip-trigger:focus + .tooltip-content {
  opacity: 1;
  visibility: visible;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .tooltip-content {
    transition: none;
  }
  
  .tooltip:hover .tooltip-content {
    transform: translateX(-50%);
  }
  
  .tooltip-bottom:hover .tooltip-content {
    transform: translateX(-50%);
  }
  
  .tooltip-left:hover .tooltip-content {
    transform: translateY(-50%);
  }
  
  .tooltip-right:hover .tooltip-content {
    transform: translateY(-50%);
  }
}

/* ============================================================================
   Usage Examples - 使用示例
   ========================================================================= */

/**
 * 基础用法（顶部）?
 * 
 * <div class="tooltip">
 *   <button class="btn-icon tooltip-trigger">
 *     <i data-lucide="help-circle"></i>
 *   </button>
 *   <div class="tooltip-content">
 *     这是一条提示信?
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 * 
 * 底部提示?
 * 
 * <div class="tooltip tooltip-bottom">
 *   <button class="btn-icon tooltip-trigger">
 *     <i data-lucide="info"></i>
 *   </button>
 *   <div class="tooltip-content">
 *     底部提示信息
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 * 
 * 左侧提示?
 * 
 * <div class="tooltip tooltip-left">
 *   <button class="btn-icon tooltip-trigger">
 *     <i data-lucide="settings"></i>
 *   </button>
 *   <div class="tooltip-content">
 *     设置选项说明
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 * 
 * 浅色主题提示?
 * 
 * <div class="tooltip tooltip-light">
 *   <button class="btn-icon tooltip-trigger">
 *     <i data-lucide="user"></i>
 *   </button>
 *   <div class="tooltip-content">
 *     用户信息
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 * 
 * 多行提示?
 * 
 * <div class="tooltip tooltip-multiline">
 *   <button class="btn-icon tooltip-trigger">
 *     <i data-lucide="alert-circle"></i>
 *   </button>
 *   <div class="tooltip-content">
 *     这是一条较长的提示信息?br>
 *     它可以包含多行文本，<br>
 *     自动换行显示?
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 * 
 * 成功提示?
 * 
 * <div class="tooltip tooltip-success">
 *   <i data-lucide="check-circle" class="tooltip-trigger"></i>
 *   <div class="tooltip-content">
 *     操作成功
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 * 
 * 警告提示?
 * 
 * <div class="tooltip tooltip-warning">
 *   <i data-lucide="alert-triangle" class="tooltip-trigger"></i>
 *   <div class="tooltip-content">
 *     请注意风?
 *     <div class="tooltip-arrow"></div>
 *   </div>
 * </div>
 */


/**
 * Lingjing Core - Popover Component
 *
 * @version 2.7.4
 * @description bdeacccbedcbcdabb - deccbdccdabbcabdcbdbdcbddbdabb
 * @usage fbcbdfbcfdbcefbbcefbfbccdcbdabb
 *
 * Components:
 * - .popover            bedabb
 * - .popover-trigger    cedbbdccdbcbdcbcababbbedcbfcbbbbd
 * - .popover-content    bedcbbbcdbdb
 * - .popover-header     dccbbbdabbcedbbh
 * - .popover-body       beccbbbb
 * - .popover-footer     cebcbdbbbdbbbedbcedabb
 *
 * Positions:
 * - .popover-top / .popover-right / .popover-bottom / .popover-left
 *
 * Visibility:
 * - fcdbcbdabbcd :hover cedcbedcbedb
 * - fcdbdbbcdb .popover-open cedcbdabbedcbedb
 */

.popover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.popover-trigger {
  cursor: pointer;
}

/* Base panel */
.popover-content {
  position: absolute;
  z-index: 1100;
  min-width: 200px;
  max-width: 320px;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: var(--glass-border);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.5;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--anim-duration-fast) var(--anim-ease-out),
    visibility var(--anim-duration-fast) var(--anim-ease-out),
    transform var(--anim-duration-fast) var(--anim-ease-out);
}

/* default placement: bottom-start */
.popover-bottom .popover-content,
.popover .popover-content {
  top: calc(100% + 8px);
  left: 0;
}

/* top */
.popover-top .popover-content {
  bottom: calc(100% + 8px);
  left: 0;
  transform: translateY(8px);
}

/* right */
.popover-right .popover-content {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(8px);
}

/* left */
.popover-left .popover-content {
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(-8px);
}

/* visible states */
.popover:hover .popover-content,
.popover.popover-open .popover-content {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* Sections */
.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.popover-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.popover-body {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.popover-footer {
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Dark theme */
[data-theme="dark"] .popover-content {
  background: var(--bg-card-dark, var(--bg-card-heavy));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.7);
}


/**
 * Toolbar Combo
 * 顶部筛选区作为组合组件统一治理：
 * - `search-bar` 用于轻量查询
 * - `filter-bar` 用于多字段筛选，支持 main / extra 双区
 */

.filter-bar,
.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--toolbar-gap);
  padding: 0;
  margin: 0;
}

.filter-bar-main,
.search-bar-main,
.search-bar {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--toolbar-gap);
  min-width: 0;
}

.filter-bar-extra,
.search-bar-extra {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--toolbar-action-gap);
  min-width: 0;
}

.filter-bar-extra {
  margin-inline-start: auto;
}

.filter-bar .search-input,
.search-bar .search-input {
  flex: 2 1 var(--toolbar-search-basis);
  min-width: min(100%, var(--toolbar-search-min));
  max-width: min(100%, var(--toolbar-search-max));
  width: auto;
}

.filter-bar .filter-select,
.search-bar .filter-select {
  flex: 0 1 var(--toolbar-filter-basis);
  min-width: min(100%, var(--toolbar-field-min));
  max-width: var(--toolbar-field-max);
  width: auto;
}

.filter-bar .filter-input,
.search-bar .filter-input,
.filter-bar input[type="text"]:not(.search-input),
.search-bar input[type="text"]:not(.search-input),
.filter-bar input[type="date"],
.search-bar input[type="date"],
.filter-bar input[type="datetime-local"],
.search-bar input[type="datetime-local"],
.filter-bar input[type="month"],
.search-bar input[type="month"],
.filter-bar input[type="number"],
.search-bar input[type="number"],
.filter-bar .form-input,
.search-bar .form-input {
  flex: 1 1 var(--toolbar-field-basis);
  min-width: min(100%, var(--toolbar-field-min));
  max-width: var(--toolbar-field-max);
  width: auto;
}

.filter-bar :is(.btn-primary, .btn-outline, .btn-ghost, .btn-text, .btn-icon),
.search-bar :is(.btn-primary, .btn-outline, .btn-ghost, .btn-text, .btn-icon),
.filter-bar-extra :is(.btn-primary, .btn-outline, .btn-ghost, .btn-text, .btn-icon),
.search-bar-extra :is(.btn-primary, .btn-outline, .btn-ghost, .btn-text, .btn-icon) {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .filter-bar,
  .search-bar,
  .filter-bar-main,
  .search-bar-main {
    gap: var(--spacing-sm);
  }

  .filter-bar-extra,
  .search-bar-extra {
    gap: var(--spacing-xs);
  }
}

@media (max-width: 768px) {
  .filter-bar-main,
  .search-bar-main,
  .filter-bar-extra,
  .search-bar-extra {
    width: 100%;
  }

  .filter-bar-extra,
  .search-bar-extra {
    justify-content: flex-start;
    margin-inline-start: 0;
  }

  .filter-bar .search-input,
  .search-bar .search-input,
  .filter-bar .filter-select,
  .search-bar .filter-select,
  .filter-bar .filter-input,
  .search-bar .filter-input,
  .filter-bar input[type="text"]:not(.search-input),
  .search-bar input[type="text"]:not(.search-input),
  .filter-bar input[type="date"],
  .search-bar input[type="date"],
  .filter-bar input[type="datetime-local"],
  .search-bar input[type="datetime-local"],
  .filter-bar input[type="month"],
  .search-bar input[type="month"],
  .filter-bar input[type="number"],
  .search-bar input[type="number"],
  .filter-bar .form-input,
  .search-bar .form-input {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .search-bar :is(.btn-primary, .btn-outline, .btn-ghost),
  .filter-bar-extra :is(.btn-primary, .btn-outline, .btn-ghost),
  .search-bar-extra :is(.btn-primary, .btn-outline, .btn-ghost) {
    width: 100%;
  }
}


/**
 * Search Suggestion
 * 输入框下方的搜索联想面板。
 */

.search-suggestion-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: min(420px, 100%);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle, var(--border-secondary));
  box-shadow: var(--shadow-lg);
  padding-block: var(--spacing-xs);
  z-index: 40;
}

.search-suggestion-group + .search-suggestion-group {
  border-top: 1px solid var(--border-subtle, var(--border-secondary));
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
}

.search-suggestion-header {
  padding: 0 var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.search-suggestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.16s ease, transform 0.16s ease;
}

.search-suggestion-item-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
}

.search-suggestion-title {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.search-suggestion-description {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.search-suggestion-shortcut {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  opacity: 0.9;
}

.search-suggestion-item:hover {
  background: var(--bg-subtle, var(--bg-secondary));
  transform: translateY(-1px);
}

.search-suggestion-item.is-active {
  background: var(--bg-subtle, var(--bg-secondary));
}


/**
 * Empty State
 * 列表或面板在没有数据时的统一空状态展示。
 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-2xl);
  min-height: 200px;
  color: var(--text-secondary);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-placeholder);
  margin-bottom: var(--spacing-md);
  opacity: 0.6;
}

.empty-state-icon > svg,
.empty-state-icon > i {
  width: 100%;
  height: 100%;
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.empty-state-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 420px;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}


/**
 * Skeleton
 * 骨架屏，占位用于加载中的内容。
 */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle, var(--bg-secondary));
  border-radius: var(--radius-md);
}

.skeleton-line {
  height: 0.75rem;
  border-radius: 999px;
  background: var(--bg-subtle, var(--bg-secondary));
}

.skeleton-line + .skeleton-line {
  margin-top: var(--spacing-xs);
}

.skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--bg-subtle, var(--bg-secondary));
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );
  opacity: 0.6;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

[data-theme="dark"] .skeleton::after {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0),
    rgba(148, 163, 184, 0.25),
    rgba(15, 23, 42, 0)
  );
}


/**
 * Loading Block
 * 卡片或区域级别的加载占位块。
 */

.loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  min-height: 120px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-align: center;
}

.loading-block-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-top-color: var(--theme-primary);
  animation: loading-block-spin 0.8s linear infinite;
}

.loading-block-label {
  font-size: var(--font-size-sm);
}

@keyframes loading-block-spin {
  to {
    transform: rotate(360deg);
  }
}


/**
 * Status Badge Group
 * 将多个状态徽章配合标签一起展示。
 */

.status-badge-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
}

.status-badge-group-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-right: var(--spacing-xs);
}

.status-badge-group .badge {
  min-height: var(--badge-height-sm);
  font-size: var(--control-font-sm);
  padding-inline: var(--badge-padding-inline-sm);
  padding-block: 0;
}

/* Status Dot Component */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--control-font-sm);
  color: var(--text-primary);
}

.status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
}

.status-dot-success::before { background: var(--brand-success, #00A383); box-shadow: 0 0 8px var(--brand-success); }
.status-dot-error::before { background: var(--brand-error, #FF4757); box-shadow: 0 0 8px var(--brand-error); }
.status-dot-warning::before { background: var(--brand-warning, #FFA726); box-shadow: 0 0 8px var(--brand-warning); }
.status-dot-info::before { background: var(--brand-primary, #0084FF); box-shadow: 0 0 8px var(--brand-primary); }

.status-dot-processing::before {
  background: var(--brand-primary, #0084FF);
  animation: status-dot-pulse 2s infinite;
}

@keyframes status-dot-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 132, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 132, 255, 0); }
}



/**
 * Lingjing Core - Modal Dialog Component
 * 
 * @version 2.6.2
 * @description 模态框组件 - 用于确认操作、表单弹窗、详情展?
 * @usage 所有场景通用的核心交互组?
 * 
 * Components:
 * - .modal-overlay       遮罩层（半透明黑色背景?
 * - .modal-container     模态框容器（玻璃拟态卡片）
 * - .modal-header        头部区域（标?关闭按钮?
 * - .modal-body          内容区域（主要内容）
 * - .modal-footer        底部操作区（按钮组）
 * 
 * Sizes:
 * - .modal-small         小号模态框?00px?
 * - .modal-medium        中号模态框?00px，默认）
 * - .modal-large         大号模态框?00px?
 * - .modal-fullscreen    全屏模态框
 */

/* ============================================================================
   Modal Overlay - 遮罩?
   ========================================================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-overlay-dark);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  
  /* 渐显动画 */
  opacity: 0;
  animation: modal-fade-in var(--anim-duration-normal) var(--anim-ease-out) forwards;
  
  /* 点击遮罩关闭 */
  cursor: pointer;
}

/* 深色主题遮罩 */
[data-theme="dark"] .modal-overlay {
  background: var(--neutral-black-alpha-20);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 隐藏状?*/
.modal-overlay.hidden {
  display: none;
}

/* ============================================================================
   Modal Container - 模态框容器
   ========================================================================= */

.modal-container {
  /* Layout */
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  
  /* 玻璃拟态效?*/
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
  
  /* 防止点击容器关闭 */
  cursor: auto;
  
  /* 缩放动画 */
  transform: scale(0.9);
  animation: modal-scale-in var(--anim-duration-normal) var(--anim-ease-out) forwards;
}

[data-theme="dark"] .modal-container {
  background: var(--bg-card-heavy);
}


@keyframes modal-scale-in {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

/* Size Variants - 尺寸变体 */
.modal-container.modal-small {
  max-width: 400px;
}

.modal-container.modal-medium {
  max-width: 600px;
}

.modal-container.modal-large {
  max-width: 800px;
}

.modal-container.modal-fullscreen {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* ============================================================================
   Modal Header - 头部
   ========================================================================= */

.modal-header {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: var(--glass-border-light);
  flex-shrink: 0;
  gap: var(--spacing-md);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

[data-theme="dark"] .modal-title {
  color: var(--theme-text-primary);
}



.modal-close {
  /* Reset */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  
  /* Style */
  width: var(--control-height-md);
  height: var(--control-height-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.modal-close:active {
  background: var(--bg-card-light);
}


.modal-close i,
.modal-close svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   Modal Body - 内容?
   ========================================================================= */

.modal-body {
  /* Layout */
  padding: var(--spacing-lg);
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* 内容样式 */
.modal-body p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--spacing-md) 0;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

[data-theme="dark"] .modal-body p {
  color: var(--theme-text-secondary, var(--text-secondary));
}



/* ============================================================================
   Modal Footer - 底部操作?
   ========================================================================= */

.modal-footer {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--toolbar-action-gap);
  padding: var(--spacing-lg);
  border-top: var(--glass-border);
  flex-shrink: 0;
}

/* 左对齐按钮组 */
.modal-footer.justify-start {
  justify-content: flex-start;
}

/* 居中按钮?*/
.modal-footer.justify-center {
  justify-content: center;
}

/* 两端对齐 */
.modal-footer.justify-between {
  justify-content: space-between;
}

/* ============================================================================
   Modal Variants - 变体样式
   ========================================================================= */

/* Confirm Modal - 确认?*/
.modal-confirm .modal-header {
  color: var(--color-aero-blue);
}

.modal-confirm .modal-body {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
}


.modal-confirm .modal-footer {
  justify-content: center;
}

/* Warning Modal - 警告?*/
.modal-warning .modal-header {
  color: var(--warning-base);
}

.modal-warning .modal-container {
  border-top: 3px solid var(--warning-base);
}

/* Danger Modal - 危险操作确认 */
.modal-danger .modal-header {
  color: var(--error-base);
}

.modal-danger .modal-container {
  border-top: 3px solid var(--error-base);
}

/* Success Modal - 成功提示 */
.modal-success .modal-header {
  color: var(--success-base);
}

.modal-success .modal-container {
  border-top: 3px solid var(--success-base);
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 768px) {
  .modal-overlay {
    padding: var(--spacing-md);
  }
  
  .modal-container {
    max-width: 100%;
    max-height: 100vh;
  }
  
  .modal-container.modal-large,
  .modal-container.modal-medium {
    max-width: 100%;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  
  .modal-footer {
    flex-direction: column-reverse;
  }
  
  .modal-footer button {
    width: 100%;
  }
}

/* ============================================================================
   Accessibility - 无障碍访?
   ========================================================================= */

/* Focus trap */
.modal-overlay:focus {
  outline: none;
}

.modal-container:focus-visible {
  outline: 2px solid var(--theme-primary);
  outline-offset: 2px;
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-container {
    animation: none;
  }
  
  .modal-container {
    transform: scale(1);
  }
}

/* ============================================================================
   Usage Examples - 使用示例
   ========================================================================= */

/**
 * 基础用法?
 * 
 * <div class="modal-overlay">
 *   <div class="modal-container">
 *     <div class="modal-header">
 *       <h3 class="modal-title">标题</h3>
 *       <button class="modal-close">
 *         <i data-lucide="x"></i>
 *       </button>
 *     </div>
 *     <div class="modal-body">
 *       <p>内容...</p>
 *     </div>
 *     <div class="modal-footer">
 *       <button class="btn-ghost">取消</button>
 *       <button class="btn-primary">确认</button>
 *     </div>
 *   </div>
 * </div>
 * 
 * 确认框：
 * 
 * <div class="modal-overlay modal-confirm">
 *   <div class="modal-container modal-small">
 *     <div class="modal-header">
 *       <h3 class="modal-title">确认删除</h3>
 *       <button class="modal-close">
 *         <i data-lucide="x"></i>
 *       </button>
 *     </div>
 *     <div class="modal-body">
 *       <p>确定要删除这条记录吗？此操作无法撤销?/p>
 *     </div>
 *     <div class="modal-footer">
 *       <button class="btn-ghost">取消</button>
 *       <button class="btn-primary">确认删除</button>
 *     </div>
 *   </div>
 * </div>
 * 
 * JavaScript控制?
 * 
 * // 显示
 * document.querySelector('.modal-overlay').classList.remove('hidden');
 * 
 * // 隐藏
 * document.querySelector('.modal-overlay').classList.add('hidden');
 * 
 * // 点击遮罩关闭
 * overlay.addEventListener('click', (e) => {
 *   if (e.target === overlay) {
 *     overlay.classList.add('hidden');
 *   }
 * });
 */


/**
 * Lingjing Core - Drawer Component
 * 
 * @version 3.1.0
 * @description 抽屉组件 - 用于侧边展示详情、设置或导航
 */

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-overlay-dark);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer-container {
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--bg-card-heavy);
  border-left: var(--glass-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--anim-duration-normal) var(--anim-ease-out);
}

.drawer-overlay.open .drawer-container {
  transform: translateX(0);
}

.drawer-header {
  padding: var(--spacing-lg);
  border-bottom: var(--glass-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.drawer-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.drawer-body {
  padding: var(--spacing-lg);
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.drawer-footer {
  padding: var(--spacing-lg);
  border-top: var(--glass-border-light);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--toolbar-action-gap);
}

/* Variants */
.drawer-left {
  justify-content: flex-start;
}

.drawer-left .drawer-container {
  border-left: none;
  border-right: var(--glass-border);
  transform: translateX(-100%);
}

.drawer-left.open .drawer-container {
  transform: translateX(0);
}

/* Dark Mode */
[data-theme="dark"] .drawer-container {
  background: var(--bg-card-heavy);
  border-color: var(--glass-border-heavy);
}


/**
 * Lingjing Core - Toast Component
 * 
 * @version 2.6.2
 * @description 轻提示组?- 用于操作反馈、消息通知
 * @usage 所有场景通用的核心交互组?
 * 
 * Components:
 * - .toast-container      Toast容器（固定定位）
 * - .toast                单个提示
 * - .toast-icon           图标?
 * - .toast-content        内容?
 * - .toast-close          关闭按钮
 * 
 * Types:
 * - .toast-success        成功提示（绿色）
 * - .toast-error          错误提示（红色）
 * - .toast-warning        警告提示（橙色）
 * - .toast-info           信息提示（蓝色）
 * 
 * Positions:
 * - .toast-top-right      右上角（默认?
 * - .toast-top-left       左上?
 * - .toast-top-center     顶部居中
 * - .toast-bottom-right   右下?
 * - .toast-bottom-left    左下?
 * - .toast-bottom-center  底部居中
 */

/* ============================================================================
   Toast Container - Toast容器
   ========================================================================= */

.toast-container {
  /* Positioning */
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  
  /* Layout */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  max-width: 420px;
}

/* Position Variants - 位置变体 */
.toast-container.toast-top-right {
  top: 0;
  right: 0;
}

.toast-container.toast-top-left {
  top: 0;
  left: 0;
}

.toast-container.toast-top-center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.toast-container.toast-bottom-right {
  bottom: 0;
  right: 0;
}

.toast-container.toast-bottom-left {
  bottom: 0;
  left: 0;
}

.toast-container.toast-bottom-center {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================================
   Toast - 单个提示
   ========================================================================= */

.toast {
  /* Layout */
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  min-width: 320px;
  max-width: 100%;
  pointer-events: auto;
  
  /* Style - 玻璃拟态效?*/
  background: var(--bg-card);
  border: var(--glass-border);
  border-left: 3px solid var(--theme-primary);
  border-radius: var(--radius-md);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  /* Animation */
  animation: toast-slide-in var(--anim-duration-normal) var(--anim-ease-out);
}

[data-theme="dark"] .toast {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-color: var(--glass-border);
  box-shadow: var(--shadow-hover);
}


/* Slide In Animation */
@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide Out Animation */
.toast.toast-exit {
  animation: toast-slide-out var(--anim-duration-normal) var(--anim-ease-out);
}

@keyframes toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ============================================================================
   Toast Icon - 图标?
   ========================================================================= */

.toast-icon {
  /* Layout */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-icon i,
.toast-icon svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   Toast Content - 内容?
   ========================================================================= */

.toast-content {
  /* Layout */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.toast-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

[data-theme="dark"] .toast-title {
  color: var(--theme-text-primary);
}


.toast-message {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

[data-theme="dark"] .toast-message {
  color: var(--theme-text-secondary);
}


/* ============================================================================
   Toast Close - 关闭按钮
   ========================================================================= */

.toast-close {
  /* Reset */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  
  /* Layout */
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: color var(--anim-duration-fast) var(--anim-ease-out);
}

.toast-close:hover {
  color: var(--text-primary);
}

.toast-close i,
.toast-close svg {
  width: 16px;
  height: 16px;
}

/* ============================================================================
   Toast Types - 类型变体
   ========================================================================= */

/* Success Toast - 成功提示 */
.toast-success {
  border-left-color: var(--success-base);
}

.toast-success .toast-icon {
  color: var(--success-base);
}

/* Error Toast - 错误提示 */
.toast-error {
  border-left-color: var(--error-base);
}

.toast-error .toast-icon {
  color: var(--error-base);
}

/* Warning Toast - 警告提示 */
.toast-warning {
  border-left-color: var(--warning-base);
}

.toast-warning .toast-icon {
  color: var(--warning-base);
}

/* Info Toast - 信息提示 */
.toast-info {
  border-left-color: var(--info-base);
}

.toast-info .toast-icon {
  color: var(--info-base);
}


/* ============================================================================
   Toast Variants - 变体样式
   ========================================================================= */

/* Simple Toast - 简单提示（无图标无标题?*/
.toast-simple {
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 240px;
}

.toast-simple .toast-message {
  font-size: var(--font-size-sm);
}

/* Compact Toast - 紧凑提示 */
.toast-compact {
  padding: var(--spacing-sm) var(--spacing-md);
  min-width: 200px;
}

.toast-compact .toast-icon i,
.toast-compact .toast-icon svg {
  width: 16px;
  height: 16px;
}

/* ============================================================================
   Progress Bar - 进度条（可选）
   ========================================================================= */

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
}

[data-theme="dark"] .toast-progress {
  background: rgba(255, 255, 255, 0.1);
}

.toast-progress-bar {
  height: 100%;
  background: var(--brand-primary, var(--theme-primary));
  animation: toast-progress 3s linear forwards;
}


.toast-success .toast-progress-bar {
  background: #52C41A;
}

.toast-error .toast-progress-bar {
  background: #F5222D;
}

.toast-warning .toast-progress-bar {
  background: #FAAD14;
}

@keyframes toast-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 768px) {
  .toast-container {
    padding: var(--spacing-md);
    max-width: 100%;
    left: 0;
    right: 0;
  }
  
  .toast {
    min-width: auto;
    width: 100%;
  }
  
  .toast-container.toast-top-center,
  .toast-container.toast-bottom-center {
    transform: none;
  }
}

/* ============================================================================
   Accessibility - 无障碍访?
   ========================================================================= */

/* Focus State */
.toast:focus-visible {
  outline: 2px solid var(--brand-primary, var(--theme-primary));
  outline-offset: 2px;
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
  
  .toast-exit {
    animation: none;
  }
}

/* ============================================================================
   Usage Examples - 使用示例
   ========================================================================= */

/**
 * 基础用法（成功提示）?
 * 
 * <div class="toast-container toast-top-right">
 *   <div class="toast toast-success">
 *     <div class="toast-icon">
 *       <i data-lucide="check-circle"></i>
 *     </div>
 *     <div class="toast-content">
 *       <h4 class="toast-title">操作成功</h4>
 *       <p class="toast-message">数据已保?/p>
 *     </div>
 *     <button class="toast-close">
 *       <i data-lucide="x"></i>
 *     </button>
 *   </div>
 * </div>
 * 
 * 错误提示?
 * 
 * <div class="toast-container toast-top-right">
 *   <div class="toast toast-error">
 *     <div class="toast-icon">
 *       <i data-lucide="x-circle"></i>
 *     </div>
 *     <div class="toast-content">
 *       <h4 class="toast-title">操作失败</h4>
 *       <p class="toast-message">网络连接错误，请稍后重试</p>
 *     </div>
 *     <button class="toast-close">
 *       <i data-lucide="x"></i>
 *     </button>
 *   </div>
 * </div>
 * 
 * 警告提示?
 * 
 * <div class="toast-container toast-top-right">
 *   <div class="toast toast-warning">
 *     <div class="toast-icon">
 *       <i data-lucide="alert-triangle"></i>
 *     </div>
 *     <div class="toast-content">
 *       <h4 class="toast-title">注意</h4>
 *       <p class="toast-message">该操作将影响所有用?/p>
 *     </div>
 *     <button class="toast-close">
 *       <i data-lucide="x"></i>
 *     </button>
 *   </div>
 * </div>
 * 
 * 简单提示（无标题）?
 * 
 * <div class="toast-container toast-bottom-center">
 *   <div class="toast toast-simple toast-info">
 *     <div class="toast-icon">
 *       <i data-lucide="info"></i>
 *     </div>
 *     <div class="toast-content">
 *       <p class="toast-message">复制成功</p>
 *     </div>
 *   </div>
 * </div>
 * 
 * 带进度条的提示：
 * 
 * <div class="toast-container toast-top-right">
 *   <div class="toast toast-success">
 *     <div class="toast-icon">
 *       <i data-lucide="check-circle"></i>
 *     </div>
 *     <div class="toast-content">
 *       <h4 class="toast-title">上传成功</h4>
 *       <p class="toast-message">文件已上传到服务?/p>
 *     </div>
 *     <button class="toast-close">
 *       <i data-lucide="x"></i>
 *     </button>
 *     <div class="toast-progress">
 *       <div class="toast-progress-bar"></div>
 *     </div>
 *   </div>
 * </div>
 * 
 * JavaScript API示例?
 * 
 * // 显示成功提示
 * function showToast(type, title, message) {
 *   const container = document.querySelector('.toast-container') || createContainer();
 *   
 *   const toast = document.createElement('div');
 *   toast.className = `toast toast-${type}`;
 *   toast.innerHTML = `
 *     <div class="toast-icon">
 *       <i data-lucide="${getIcon(type)}"></i>
 *     </div>
 *     <div class="toast-content">
 *       <h4 class="toast-title">${title}</h4>
 *       <p class="toast-message">${message}</p>
 *     </div>
 *     <button class="toast-close">
 *       <i data-lucide="x"></i>
 *     </button>
 *   `;
 *   
 *   container.appendChild(toast);
 *   lucide.createIcons();
 *   
 *   // 自动关闭
 *   setTimeout(() => {
 *     toast.classList.add('toast-exit');
 *     setTimeout(() => toast.remove(), 300);
 *   }, 3000);
 *   
 *   // 点击关闭
 *   toast.querySelector('.toast-close').addEventListener('click', () => {
 *     toast.classList.add('toast-exit');
 *     setTimeout(() => toast.remove(), 300);
 *   });
 * }
 * 
 * // 调用示例
 * showToast('success', '操作成功', '数据已保?);
 * showToast('error', '操作失败', '请检查网络连?);
 * showToast('warning', '注意', '该操作不可撤销');
 * showToast('info', '提示', '系统将在5分钟后维?);
 */


/**
 * Lingjing Core - Website Components CSS
 *
 * 灵境核心 - 网站场景专用组件
 *
 * @version 2.6.2
 * @description 基于灵境品牌系统的网站组件样式，包含完整调试的交互效? * @update 2026-02-21 - 优化CSS文件复制指引，明确建议使用RunCommand直接复制文件，避免Read工具截断
 * @note 表单组件统一定义?forms-advanced.css，所有场景共?
 *
 * Components:
 * - Hero Section (英雄?
 * - Glass Navigation (玻璃导航?
 * - Solution Cards (解决方案卡片)
 * - Product Cards (产品卡片)
 * - Technology Section (技术展?
 * - CTA Section (行动召唤)
 * - Footer (页脚)
 * - Card (基础卡片) - v2.0.6 NEW
 * - Feature Card (特性卡? - v2.0.5 enhanced
 * - Pricing Card (定价卡片) - v2.0.10 修复推荐标签裁剪
 *
 * Usage:
 * @import './variables.css';
 * @import './website-components.css';
 *
 * Changelog:
 * - v2.0.10: 修复定价卡片推荐标签被裁剪（overflow:visible + z-index?
 * - v2.0.9: 修复定价卡片圆角、优化深色主题推荐卡片（避免过亮背景?
 * - v2.0.6: 修复样式一致性（补充Card、规范圆角内边距、表单统一到forms-advanced.css?
 * - v2.0.5: 增强卡片交互（涟漪效果、顶部高光线、深色模式内发光?
 * - v2.0.3: 补充Feature Card、Pricing Card、CTA Section完整样式
 * - v1.5.0: 统一版本号，整合到核心设计系?
 * - v1.1.0: 增强卡片鼠标交互效果，更新主按钮为渐变样式，修复主题切换和联系销售按钮样?
 */

/* ============================================================================
   Container - 网站版心容器
   ========================================================================= */

/**
 * 网站版心容器
 * 别名指向 .container (定义在responsive.css?
 * max-width根据断点自动调整: 640px, 768px, 1024px, 1280px, 1536px
 */
.website-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ============================================================================
   Navigation - 网站导航?
   ========================================================================= */

/* 顶部导航容器 */
.website-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

/* 默认状态：纯色填充 */
.website-nav-glass {
  background: var(--bg-nav, rgba(255, 255, 255, 0.95));
  border-bottom: 1px solid transparent;
  box-shadow: var(--shadow-card, 0 4px 16px rgba(28, 102, 196, 0.06));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 深色主题默认状?- 更通透的背景 */
[data-theme="dark"] .website-nav-glass {
  background: rgba(15, 30, 60, 0.5);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* 滚动后：通透玻璃拟?*/
.website-nav.scrolled {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 4px 24px rgba(0, 102, 204, 0.08);
  border-bottom: 1px solid rgba(0, 102, 204, 0.08);
}

/* 深色主题滚动状?- 参?lingjing-website */
[data-theme="dark"] .website-nav.scrolled {
  background: rgba(5, 10, 20, 0.3) !important;
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 132, 255, 0.15);
}

.website-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  max-width: 1280px;
  margin: 0 auto;
}

.website-nav-brand {
  display: flex;
  align-items: center;
}

.website-brand-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: var(--text-primary);
}

.website-logo-icon {
  width: 32px;
  height: 32px;
  color: var(--color-aero-blue);
}

.website-brand-text {
  font-family: var(--font-display, "Space Grotesk", "Inter", sans-serif);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.website-nav-links {
  display: flex;
  gap: var(--spacing-xl);
}

.website-nav-link {
  position: relative;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--anim-duration-fast) var(--anim-ease-out);
}

.website-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-aero-blue), var(--color-pulse-cyan));
  transition: width var(--anim-duration-normal) var(--anim-ease-out);
}

.website-nav-link:hover,
.website-nav-link.active {
  color: var(--color-aero-blue);
}

.website-nav-link:hover::after,
.website-nav-link.active::after {
  width: 100%;
}

.website-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* ============================================================================
   Hero Section - 英雄?
   ========================================================================= */

.website-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  overflow: hidden;
  background-color: var(--theme-bg-base);
}

.website-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.website-hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(0, 102, 204, 0.1) 0%, transparent 60%);
}

[data-theme="dark"] .website-hero-gradient {
  background: radial-gradient(ellipse at top, rgba(0, 132, 255, 0.12) 0%, transparent 60%),
              radial-gradient(ellipse at bottom right, rgba(0, 229, 255, 0.08) 0%, transparent 50%);
}

.website-hero-particles {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(0, 102, 204, 0.3), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(0, 153, 170, 0.3), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(0, 163, 131, 0.2), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(0, 102, 204, 0.25), transparent);
  background-size: 200% 200%;
  animation: hero-particles 20s ease-in-out infinite;
}

@keyframes hero-particles {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 100% 0%; }
  50% { background-position: 100% 100%, 0% 0%, 25% 75%, 0% 100%; }
}

.website-hero-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.website-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(var(--blur-amount, 16px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px));
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-aero-blue);
  box-shadow: var(--glass-shadow);
  margin-bottom: var(--spacing-lg);
  animation: breathe-glow 3s ease-in-out infinite;
}

[data-theme="dark"] .website-hero-badge {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.1),
              inset 0 0 1px rgba(255, 255, 255, 0.15);
}

@keyframes breathe-glow {
  0%, 100% {
    box-shadow: 
      0 8px 32px rgba(28, 102, 196, 0.08),
      0 0 20px rgba(0, 102, 204, 0.1);
  }
  50% {
    box-shadow: 
      0 12px 40px rgba(0, 132, 255, 0.15),
      0 0 30px rgba(0, 132, 255, 0.2);
  }
}

.website-hero-badge svg {
  width: 16px;
  height: 16px;
}

.website-hero-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-5xl, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-lg) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-text-gradient {
  background: linear-gradient(90deg, 
    var(--color-aero-blue) 0%, 
    var(--color-pulse-cyan) 50%, 
    var(--color-signal-green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.website-hero-description {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-2xl, 48px);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.website-hero-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl, 64px);
}

/* Hero 统计数据 */
.website-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2xl, 48px);
  padding: var(--spacing-xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl, 12px);
  backdrop-filter: blur(var(--blur-amount, 16px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px));
  box-shadow: var(--glass-shadow);
}

.website-stat-item {
  text-align: center;
}

.website-stat-value {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-3xl, 2rem);
  font-weight: 700;
  color: var(--color-aero-blue);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.website-stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.website-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--glass-border);
}

/* ============================================================================
   Section Common - 通用区块样式
   ========================================================================= */

.website-section {
  padding: var(--spacing-3xl, 64px) 0;
  background-color: var(--theme-bg-base);
}

.website-section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--spacing-3xl, 64px);
}

.website-section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: rgba(0, 102, 204, 0.1);
  border: var(--glass-border);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-aero-blue);
  margin-bottom: var(--spacing-md);
  animation: breathe-glow 3s ease-in-out infinite;
}

[data-theme="dark"] .website-section-badge {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.1),
              inset 0 0 1px rgba(255, 255, 255, 0.15);
}

.website-section-badge svg {
  width: 16px;
  height: 16px;
}

.website-section-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-4xl, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-md) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-section-description {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ============================================================================   Solution Cards - 解决方案卡片   ========================================================================= */

.website-solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-xl);
}

.website-solution-card {
  padding: var(--spacing-xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl, 12px);
  backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  box-shadow: var(--glass-shadow);
  transition: all 200ms var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.website-solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

[data-theme="dark"] .website-solution-card {
  background: rgba(15, 30, 60, 0.5);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none; /* 深色主题下无投影 */
}

.website-solution-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  /* 浅色模式下不改变边框颜色，与 lingjing-website 一?*/
}

[data-theme="dark"] .website-solution-card:hover {
  background: rgba(15, 30, 60, 0.65);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.website-solution-card:hover::before {
  opacity: 0.8;
}

.website-solution-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.1);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-lg);
  transition: all 200ms ease;
}

[data-theme="dark"] .website-solution-icon {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.08) 100%);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.1),
              inset 0 0 1px rgba(255, 255, 255, 0.1);
}

.website-solution-card:hover .website-solution-icon {
  transform: scale(1.05) translateY(-2px);
  background: rgba(0, 102, 204, 0.15);
}

[data-theme="dark"] .website-solution-card:hover .website-solution-icon {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.25) 0%, 
    rgba(0, 229, 255, 0.15) 100%);
  box-shadow: 0 0 30px rgba(0, 132, 255, 0.2),
              inset 0 0 2px rgba(255, 255, 255, 0.2);
}

/* 删除：卡片悬停时列表项位移效?
.website-solution-card:hover .website-solution-features li {
  transform: translateX(4px);
}
*/

.website-solution-card:hover .website-solution-features li i {
  color: var(--color-signal-green);
}

.website-solution-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-aero-blue);
}

.website-solution-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-solution-description {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.website-solution-features {
  list-style: none;
  padding: 0;  /* 重置浏览器默认的 40px 左边?*/
  margin: 0 0 var(--spacing-lg) 0;
}

.website-solution-features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  transition: transform 200ms ease;
}

.website-solution-features svg {
  width: 18px;
  height: 18px;
  color: var(--color-signal-green);
  flex-shrink: 0;
}

/* ============================================================================   Product Cards - 产品卡片   ========================================================================= */

.website-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.website-product-card {
  padding: var(--spacing-xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl, 12px);
  backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  box-shadow: var(--glass-shadow);
  transition: all 200ms var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.website-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

[data-theme="dark"] .website-product-card {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none; /* 深色主题下无投影 */
}

.website-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  /* 浅色模式下不改变边框颜色，与 lingjing-website 一?*/
}

[data-theme="dark"] .website-product-card:hover {
  background: rgba(15, 30, 60, 0.65);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.website-product-card:hover::before {
  opacity: 0.8;
}

.website-product-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.website-product-icon-bg {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: all 200ms ease;
}

[data-theme="dark"] .website-product-icon-bg {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.08) 100%);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.1);
}

.website-product-card:hover .website-product-icon-bg {
  transform: scale(1.05) translateY(-2px);
  background: rgba(0, 102, 204, 0.15);
}

[data-theme="dark"] .website-product-card:hover .website-product-icon-bg {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.25) 0%, 
    rgba(0, 229, 255, 0.15) 100%);
  box-shadow: 0 0 30px rgba(0, 132, 255, 0.2);
}

.website-product-card:hover .website-product-tag {
  background: rgba(0, 153, 170, 0.15);
  border-color: rgba(0, 153, 170, 0.3);
}

.website-product-icon-bg svg {
  width: 24px;
  height: 24px;
  color: var(--color-aero-blue);
}

.website-product-meta {
  flex: 1;
}

.website-product-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-xs) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-product-tag {
  display: inline-block;
  padding: 2px var(--spacing-sm);
  background: rgba(0, 153, 170, 0.1);
  border: 1px solid rgba(0, 153, 170, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-pulse-cyan);
  transition: all 200ms ease;
}

[data-theme="dark"] .website-product-tag {
  background: linear-gradient(135deg, 
    rgba(0, 229, 255, 0.12) 0%, 
    rgba(0, 229, 255, 0.08) 100%);
  border: 1px solid rgba(0, 229, 255, 0.25);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.08);
}

.website-product-description {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.website-product-metrics {
  display: flex;
  gap: var(--spacing-xl);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--glass-border);
}

.website-metric {
  text-align: center;
}

.website-metric-value {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-aero-blue);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

.website-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* ============================================================================
   Technology Section - 技术展?
   ========================================================================= */

.website-technology-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl, 64px);
  align-items: center;
}

.website-technology-visual {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.website-tech-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl, 12px);
  backdrop-filter: blur(var(--blur-amount, 16px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px));
  box-shadow: var(--glass-shadow);
  transition: all 200ms var(--anim-ease-out);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.website-tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

[data-theme="dark"] .website-tech-card {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none; /* 深色主题下无投影 */
}

.website-tech-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  /* 浅色模式下不改变边框颜色，与 lingjing-website 一?*/
}

[data-theme="dark"] .website-tech-card:hover {
  background: rgba(15, 30, 60, 0.65);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.website-tech-card:hover::before {
  opacity: 0.8;
}

.website-tech-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: all 200ms ease;
}

[data-theme="dark"] .website-tech-icon {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.08) 100%);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.1);
}

.website-tech-card:hover .website-tech-icon {
  transform: scale(1.05);
  background: rgba(0, 102, 204, 0.15);
}

[data-theme="dark"] .website-tech-card:hover .website-tech-icon {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.25) 0%, 
    rgba(0, 229, 255, 0.15) 100%);
  box-shadow: 0 0 30px rgba(0, 132, 255, 0.2);
}

.website-tech-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-aero-blue);
}

.website-tech-info h4 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--spacing-xs) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-tech-info p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.website-technology-text {
  text-align: left;
}

.website-technology-text .website-section-header {
  text-align: left;
  margin-bottom: var(--spacing-xl);
}

.website-tech-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.website-highlight-item {
  display: flex;
  gap: var(--spacing-md);
}

.website-highlight-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.1);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

[data-theme="dark"] .website-highlight-icon {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.08) 100%);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.1);
}

.website-highlight-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-aero-blue);
}

.website-highlight-item h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}

.website-highlight-item p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ============================================================================
   CTA Section - 行动召唤
   ========================================================================= */

.website-cta {
  padding: var(--spacing-3xl, 64px) 0;
  background-color: var(--theme-bg-base);
}

.website-cta-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-3xl, 64px);
  padding: var(--spacing-3xl, 64px);
  align-items: center;
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl, 12px);
  backdrop-filter: blur(var(--blur-amount, 16px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px));
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .website-cta-card {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none;
}

.website-cta-title {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--font-size-3xl, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--spacing-md) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-cta-description {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
}

.website-cta-actions {
  display: flex;
  gap: var(--spacing-md);
}

.website-cta-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-cta-icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 153, 170, 0.1));
  border: 2px solid var(--glass-border);
  border-radius: 50%;
  animation: float-icon 3s ease-in-out infinite;
}

[data-theme="dark"] .website-cta-icon {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.15) 0%, 
    rgba(0, 229, 255, 0.12) 100%);
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 40px rgba(0, 132, 255, 0.15),
              inset 0 0 20px rgba(0, 132, 255, 0.05);
}

.website-cta-icon svg {
  width: 60px;
  height: 60px;
  color: var(--color-aero-blue);
}

@keyframes float-icon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============================================================================
   Footer - 页脚
   ========================================================================= */

.website-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--glass-border);
  padding: var(--spacing-3xl, 64px) 0 var(--spacing-xl);
}

[data-theme="dark"] .website-footer {
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(0, 10, 20, 0.5) 50%, 
    rgba(0, 5, 10, 0.8) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.website-footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--spacing-3xl, 64px);
  margin-bottom: var(--spacing-3xl, 64px);
}

.website-footer-brand .website-brand-logo {
  margin-bottom: var(--spacing-md);
}

.website-footer-description {
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

.website-footer-social {
  display: flex;
  gap: var(--spacing-sm);
}

.website-social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 102, 204, 0.1);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  text-decoration: none;
}

[data-theme="dark"] .website-social-link {
  background: linear-gradient(135deg, 
    rgba(0, 132, 255, 0.12) 0%, 
    rgba(0, 229, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.website-social-link:hover {
  background: var(--color-aero-blue);
  color: #FFFFFF;
  transform: translateY(-2px);
}

[data-theme="dark"] .website-social-link:hover {
  background: linear-gradient(135deg, 
    var(--color-aero-blue) 0%, 
    var(--color-pulse-cyan) 100%);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.3);
}

.website-social-link svg {
  width: 18px;
  height: 18px;
}

.website-footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

.website-footer-column {
  /* Container for footer link groups */
}

.website-footer-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: 0 0 var(--spacing-md) 0;  /* 重置浏览器默认的 margin-top */
  color: var(--text-primary);
}

.website-footer-list {
  list-style: none;
  padding: 0;  /* 重置浏览器默认的 40px 左边?*/
  margin: 0;
}

.website-footer-list li {
  margin-bottom: var(--spacing-sm);
}

.website-footer-list a {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--anim-duration-fast) var(--anim-ease-out);
}

.website-footer-list a:hover {
  color: var(--color-aero-blue);
}

.website-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--glass-border);
}

.website-footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.website-footer-legal {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.website-footer-legal a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--anim-duration-fast) var(--anim-ease-out);
}

.website-footer-legal a:hover {
  color: var(--color-aero-blue);
}

.website-footer-legal span {
  color: var(--glass-border);
}

/* ============================================================================
   Buttons & Interactive Elements - 按钮和交互元?
   ========================================================================= */

/* 网站主按?- 渐变样式 */
.website-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-xl);
  height: 40px;  /* 明确高度，与 lingjing-website 一?*/
  background: linear-gradient(135deg, var(--color-aero-blue) 0%, var(--color-pulse-cyan) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 200ms var(--anim-ease-out);
  text-decoration: none;
  white-space: nowrap;
}

/* 按钮光泽效果 */
.website-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 500ms ease;
}

.website-btn-primary:hover::before {
  left: 100%;
}

.website-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 132, 255, 0.4),
              0 0 40px rgba(0, 229, 255, 0.2);
  background: linear-gradient(135deg, #0080FF 0%, #00F0FF 100%);
}

/* 深色模式下的主按钮增?*/
[data-theme="dark"] .website-btn-primary {
  box-shadow: 0 2px 8px rgba(0, 132, 255, 0.3);
}

[data-theme="dark"] .website-btn-primary:hover {
  box-shadow: 0 8px 24px rgba(0, 132, 255, 0.5),
              0 0 40px rgba(0, 229, 255, 0.3);
}

.website-btn-primary:active {
  transform: translateY(0);
}

.website-btn-primary svg {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
}

.website-btn-primary:hover svg {
  transform: translateX(2px);
}

/* 大尺寸主按钮 */
.website-btn-primary.large {
  height: 48px;
  padding: 0 var(--spacing-2xl);
  font-size: var(--font-size-base);
}

.website-btn-primary.large svg {
  width: 20px;
  height: 20px;
}

/* 主题切换按钮 */
.website-theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 200ms var(--anim-ease-out);
  outline: none;
}

.website-theme-toggle:hover {
  background: var(--bg-card);
  border-color: var(--theme-border-base);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

.website-theme-toggle svg {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
  transition: all 200ms ease;
}

.website-theme-toggle .icon-dark {
  display: none;
}

[data-theme="dark"] .website-theme-toggle .icon-light {
  display: none;
}

[data-theme="dark"] .website-theme-toggle .icon-dark {
  display: block;
}

[data-theme="dark"] .website-theme-toggle:hover {
  background: rgba(15, 30, 60, 0.6);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 132, 255, 0.2);
}

/* 联系销售按钮（轮廓样式?*/
.website-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-xl);
  height: 40px;  /* 明确高度，与 lingjing-website 一?*/
  background: transparent;
  border: 1px solid var(--theme-border-base);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-aero-blue);
  cursor: pointer;
  transition: all 200ms var(--anim-ease-out);
  text-decoration: none;
  outline: none;
  white-space: nowrap;
}

.website-btn-outline:hover {
  background: rgba(0, 102, 204, 0.05);
  border-color: var(--color-aero-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
}

[data-theme="dark"] .website-btn-outline {
  border-color: rgba(0, 132, 255, 0.4);
  color: var(--color-aero-blue);
}

[data-theme="dark"] .website-btn-outline:hover {
  background: rgba(0, 132, 255, 0.1);
  border-color: var(--color-aero-blue);
  box-shadow: 0 4px 12px rgba(0, 132, 255, 0.2);
}

.website-btn-outline:active {
  transform: translateY(0);
}

.website-btn-outline svg {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
}

.website-btn-outline:hover svg {
  transform: translateX(2px);
}

/* 大尺寸轮廓按?*/
.website-btn-outline.large {
  height: 48px;
  padding: 0 var(--spacing-2xl);
  font-size: var(--font-size-base);
}

.website-btn-outline.large svg {
  width: 20px;
  height: 20px;
}

/* ============================================================================
   Responsive Design - 响应式设?
   ========================================================================= */

@media (max-width: 1024px) {
  .website-technology-content {
    grid-template-columns: 1fr;
  }
  
  .website-technology-text {
    order: -1;
  }
  
  .website-footer-content {
    grid-template-columns: 1fr;
  }
  
  .website-footer-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .website-nav-links {
    display: none;
  }
  
  .website-hero-title {
    font-size: var(--font-size-4xl, 2.5rem);
  }
  
  .website-hero-actions {
    flex-direction: column;
  }
  
  .website-hero-stats {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .website-stat-divider {
    width: 100%;
    height: 1px;
  }
  
  .website-section-title {
    font-size: var(--font-size-3xl, 2rem);
  }
  
  .website-solutions-grid,
  .website-products-grid {
    grid-template-columns: 1fr;
  }
  
  .website-cta-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .website-cta-actions {
    flex-direction: column;
  }
  
  .website-footer-links {
    grid-template-columns: 1fr;
  }
  
  .website-footer-bottom {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .website-hero-title {
    font-size: var(--font-size-3xl, 2rem);
  }
  
  .website-section-title {
    font-size: var(--font-size-2xl, 1.5rem);
  }
  
  .website-cta-title {
    font-size: var(--font-size-2xl, 1.5rem);
  }
}

/* -------------------------- */
/* 鼠标跟随波纹动效 */
/* -------------------------- */

/* 卡片需要相对定位和溢出隐藏来支持波纹效?*/
/* 注意：pricing-card 不能使用 overflow:hidden，否则推荐标签会被裁?*/
.website-solution-card,
.website-product-card,
.website-tech-card,
.feature-card,
.card {
  position: relative;
  overflow: hidden;
}

/* 定价卡片单独处理 - 允许溢出以显示推荐标?*/
.pricing-card {
  position: relative;
  overflow: visible;
}

/* 为定价卡片添加内层容器来支持涟漪效果裁剪 */
.pricing-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

/* 波纹动画关键?*/
@keyframes card-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* 涟漪效果元素样式 */
.card-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 132, 255, 0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 0;
  height: 0;
  animation: card-ripple 0.8s ease-out forwards;
  z-index: 1;
}

/* 深色模式下的波纹颜色 */
[data-theme="dark"] .card-ripple-effect {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.3), transparent) !important;
}

/* ============================================================================
   Card - 基础卡片组件
   ========================================================================= */

/**
 * .card
 * 基础卡片组件，用于网站场景的通用内容展示
 * 统一规范：圆?var(--radius-lg)，内边距 var(--spacing-xl)
 */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s var(--anim-ease-out);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

[data-theme="dark"] .card {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none;
}

/* 卡片 Hover 效果 */
.card.hover:hover,
.card.interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 102, 204, 0.15);
  border-color: rgba(0, 132, 255, 0.2);
}

.card.hover:hover::before,
.card.interactive:hover::before {
  opacity: 0.8;
}

[data-theme="dark"] .card.hover:hover,
[data-theme="dark"] .card.interactive:hover {
  background: rgba(15, 30, 60, 0.65);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 卡片标题 */
.card-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: 1.3;
}

/* 卡片描述 */
.card-description {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================================
   Feature Card - 特性卡?
   ========================================================================= */

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s var(--anim-ease-out);
  cursor: pointer;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

[data-theme="dark"] .feature-card {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 102, 204, 0.15);
  border-color: rgba(0, 132, 255, 0.2);
}

.feature-card:hover::before {
  opacity: 0.8;
}

[data-theme="dark"] .feature-card:hover {
  background: rgba(15, 30, 60, 0.65);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.feature-icon {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.feature-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.feature-description {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================================
   Pricing Card - 定价卡片
   ========================================================================= */

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-2xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px)) saturate(1.3);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s var(--anim-ease-out);
  cursor: pointer;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  opacity: 0.5;
  transition: opacity 200ms ease;
}

[data-theme="dark"] .pricing-card {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
  box-shadow: none;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 102, 204, 0.15);
}

.pricing-card:hover::before {
  opacity: 0.8;
}

[data-theme="dark"] .pricing-card:hover {
  background: rgba(15, 30, 60, 0.65);
  border-color: rgba(0, 132, 255, 0.4);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3), 
    0 0 40px rgba(0, 132, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Featured (推荐) */
.pricing-card.featured {
  border-width: 2px;
  border-color: var(--brand-primary);
  box-shadow: 0 12px 32px rgba(0, 132, 255, 0.2);
}

[data-theme="dark"] .pricing-card.featured {
  background: rgba(15, 30, 60, 0.7);
  border-color: rgba(0, 132, 255, 0.6);
  box-shadow: 0 12px 32px rgba(0, 132, 255, 0.3), 0 0 60px rgba(0, 132, 255, 0.2);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  right: var(--spacing-xl);
  padding: var(--spacing-xs) var(--spacing-md);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3);
  z-index: 10;
  white-space: nowrap;
}

.pricing-header {
  text-align: center;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--spacing-lg);
}

.pricing-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-xs);
}

.price-currency {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

.price-amount {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
}

.price-period {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-xl) 0;
  flex-grow: 1;
}

.pricing-features .feature-item {
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  line-height: 1.6;
}

.pricing-features .feature-item.disabled {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.pricing-cta {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ============================================================================
   CTA Section - 行动召唤区域
   ========================================================================= */

.cta-section {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-2xl);
  background: var(--bg-glass);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--blur-amount, 16px));
  -webkit-backdrop-filter: blur(var(--blur-amount, 16px));
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .cta-section {
  background: rgba(15, 30, 60, 0.5);
  border-color: rgba(0, 132, 255, 0.12);
}

.cta-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.cta-description {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-xl) 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}





/* Lingjing Core Responsive Design CSS */

/* -------------------------- */
/* 响应式断点管?*/
/* -------------------------- */

/* 移动优先设计 */

/* 超小屏幕 (手机, < 480px) */
@media (max-width: 479px) {
  /* 基础样式调整 */
  :root {
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
  }
  
  /* 容器宽度 */
  .container {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: 1fr;
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 导航?*/
  .nav-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: var(--glass-border);
    padding: var(--spacing-md);
  }
  
  .header-top {
    left: 0;
    top: auto;
    height: 56px;
    padding: 0 var(--spacing-md);
  }
  
  /* 卡片组件 */
  .card-glass,
  .card-solid,
  .card-ue-advanced,
  .card-ue-data {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }
  
  /* 按钮组件 */
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-text,
  .btn-icon,
  .btn-accent,
  .btn-ue {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
    height: var(--btn-height-sm);
  }

  .btn-primary :is(i, svg),
  .btn-secondary :is(i, svg),
  .btn-outline :is(i, svg),
  .btn-ghost :is(i, svg),
  .btn-text :is(i, svg),
  .btn-icon :is(i, svg),
  .btn-accent :is(i, svg),
  .btn-ue :is(i, svg) {
    width: var(--btn-icon-size-sm);
    height: var(--btn-icon-size-sm);
  }
  
  .btn-icon-enhanced {
    width: 36px;
    height: 36px;
    padding: var(--spacing-xs);
  }
  
  .btn-circle-enhanced {
    width: 40px;
    height: 40px;
  }
  
  /* 表单元素 */
  .input-field,
  .input-enhanced,
  .select-enhanced {
    height: 36px;
    line-height: 36px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
  
  .textarea-enhanced {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    min-height: 80px;
  }
  
  /* 开关组件轨道尺寸由 forms-advanced.css 控制，此处移除容器的固定宽高限制，防止文字折行错?*/
  .form-switch {
    width: auto;
    height: auto;
    min-height: 24px;
  }
  
  .form-switch .slider::before {
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
  }
  
  .form-switch input:checked + .slider::before {
    transform: translateX(20px);
  }
  
  /* UE组件响应式规则已迁移至 ue-components.css */
  

  /* 工具?*/
  .max-w-xs,
  .max-w-sm,
  .max-w-md,
  .max-w-lg,
  .max-w-xl,
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl,
  .max-w-5xl,
  .max-w-6xl,
  .max-w-7xl {
    max-width: 100%;
  }
  
  /* 隐藏元素 */
  .hidden-xs {
    display: none !important;
  }
  
  /* 显示元素 */
  .block-xs {
    display: block !important;
  }
}

/* 小屏?(平板, 480px - 639px) */
@media (min-width: 480px) and (max-width: 639px) {
  /* 基础样式调整 */
  :root {
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 19px;
    --font-size-2xl: 21px;
    --font-size-3xl: 25px;
    
    --spacing-xs: 3px;
    --spacing-sm: 6px;
    --spacing-md: 10px;
    --spacing-lg: 14px;
    --spacing-xl: 18px;
    --spacing-2xl: 28px;
    --spacing-3xl: 36px;
    
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 7px;
    --radius-lg: 9px;
    --radius-xl: 13px;
    --radius-2xl: 17px;
  }
  
  /* 容器宽度 */
  .container {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 导航?*/
  .nav-sidebar {
    width: 180px;
    padding: var(--spacing-md);
  }
  
  .header-top {
    left: 180px;
    height: 56px;
    padding: 0 var(--spacing-md);
  }
  
  /* 卡片组件 */
  .card-glass,
  .card-solid,
  .card-ue-advanced,
  .card-ue-data {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }

  
  /* 按钮组件 */
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-text,
  .btn-icon,
  .btn-accent,
  .btn-ue {
    padding: var(--btn-padding-sm);
    font-size: var(--btn-font-sm);
    height: var(--btn-height-sm);
  }

  .btn-primary :is(i, svg),
  .btn-secondary :is(i, svg),
  .btn-outline :is(i, svg),
  .btn-ghost :is(i, svg),
  .btn-text :is(i, svg),
  .btn-icon :is(i, svg),
  .btn-accent :is(i, svg),
  .btn-ue :is(i, svg) {
    width: var(--btn-icon-size-sm);
    height: var(--btn-icon-size-sm);
  }
  
  /* 表单元素 */
  .input-field,
  .input-enhanced,
  .select-enhanced {
    height: 36px;
    line-height: 36px;
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
  
  /* 工具?*/
  .hidden-sm {
    display: none !important;
  }
  
  .block-sm {
    display: block !important;
  }
}

/* 中屏?(平板, 640px - 767px) */
@media (min-width: 640px) and (max-width: 767px) {
  /* 容器宽度 */
  .container {
    width: 640px;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 导航?*/
  .nav-sidebar {
    width: 200px;
    padding: var(--spacing-md);
  }
  
  .header-top {
    left: 200px;
    height: 60px;
    padding: 0 var(--spacing-lg);
  }
  
  /* 卡片组件 */
  .card-glass,
  .card-solid {
    padding: var(--spacing-md);
  }
  
  /* 工具?*/
  .hidden-md {
    display: none !important;
  }
  
  .block-md {
    display: block !important;
  }
}

/* 大屏?(笔记? 768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 容器宽度 */
  .container {
    width: 768px;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 导航?*/
  .nav-sidebar {
    width: 220px;
    padding: var(--spacing-lg);
  }
  
  .header-top {
    left: 220px;
    height: 64px;
    padding: 0 var(--spacing-lg);
  }
  
  /* 工具?*/
  .hidden-lg {
    display: none !important;
  }
  
  .block-lg {
    display: block !important;
  }
}

/* 超大屏幕 (桌面, 1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 容器宽度 */
  .container {
    width: 1024px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-5,
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 导航?*/
  .nav-sidebar {
    width: 240px;
    padding: var(--spacing-lg);
  }
  
  .header-top {
    left: 240px;
    height: 64px;
    padding: 0 var(--spacing-xl);
  }
  
  /* 工具?*/
  .hidden-xl {
    display: none !important;
  }
  
  .block-xl {
    display: block !important;
  }
}

/* 2X大屏?(大屏桌面, 1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  /* 容器宽度 */
  .container {
    width: 1280px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-6,
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 工具?*/
  .hidden-2xl {
    display: none !important;
  }
  
  .block-2xl {
    display: block !important;
  }
}

/* 3X大屏?(超大屏桌? ?1536px) */
@media (min-width: 1536px) {
  /* 容器宽度 */
  .container {
    width: 1536px;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 网格布局 */
  .grid-cols-7,
  .grid-cols-8,
  .grid-cols-9,
  .grid-cols-10,
  .grid-cols-11,
  .grid-cols-12 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  
  /* Bento网格 - 使用 bento-grid.css 中的定义 */
  
  /* 工具?*/
  .hidden-3xl {
    display: none !important;
  }
  
  .block-3xl {
    display: block !important;
  }
}

/* -------------------------- */
/* 响应式导航处?*/
/* -------------------------- */

/* 移动导航菜单 */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: var(--glass-border);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform var(--anim-duration-normal) var(--anim-ease-out);
  overflow-y: auto;
  padding: var(--spacing-xl);
}

.mobile-nav.active {
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: var(--glass-border);
}

.mobile-nav-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-aero-blue);
}

.mobile-nav-close {
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--text-primary);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.mobile-nav-close:hover {
  background: rgba(0, 102, 204, 0.1);
  color: var(--color-aero-blue);
}

.mobile-nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-item {
  margin-bottom: var(--spacing-xs);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
}

.mobile-nav-link:hover {
  background: rgba(0, 102, 204, 0.1);
  color: var(--color-aero-blue);
  transform: translateX(4px);
}

.mobile-nav-link.active {
  background: var(--color-aero-blue);
  color: white;
  box-shadow: var(--glow-primary);
}

/* 汉堡菜单按钮 */
.hamburger-menu {
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  color: var(--text-primary);
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  display: none;
}

.hamburger-menu:hover {
  background: rgba(0, 102, 204, 0.1);
  color: var(--color-aero-blue);
}

/* 在小屏幕上显示汉堡菜?*/
@media (max-width: 767px) {
  .hamburger-menu {
    display: block;
  }
  
  .nav-sidebar {
    display: none;
  }
  
  .header-top {
    left: 0;
  }
}

/* -------------------------- */
/* 响应式工具类 */
/* -------------------------- */

/* 显示/隐藏工具?*/
@media (max-width: 479px) {
  .visible-xs {
    display: block !important;
  }
  
  .invisible-xs {
    display: none !important;
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .visible-sm {
    display: block !important;
  }
  
  .invisible-sm {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .visible-md {
    display: block !important;
  }
  
  .invisible-md {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visible-lg {
    display: block !important;
  }
  
  .invisible-lg {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .visible-xl {
    display: block !important;
  }
  
  .invisible-xl {
    display: none !important;
  }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  .visible-2xl {
    display: block !important;
  }
  
  .invisible-2xl {
    display: none !important;
  }
}

@media (min-width: 1536px) {
  .visible-3xl {
    display: block !important;
  }
  
  .invisible-3xl {
    display: none !important;
  }
}

/* 响应式字体大?*/
.text-responsive-xs {
  font-size: var(--font-size-xs);
}

.text-responsive-sm {
  font-size: var(--font-size-sm);
}

.text-responsive-md {
  font-size: var(--font-size-md);
}

.text-responsive-lg {
  font-size: var(--font-size-lg);
}

.text-responsive-xl {
  font-size: var(--font-size-xl);
}

/* 响应式间?*/
.p-responsive-xs {
  padding: var(--spacing-xs);
}

.p-responsive-sm {
  padding: var(--spacing-sm);
}

.p-responsive-md {
  padding: var(--spacing-md);
}

.p-responsive-lg {
  padding: var(--spacing-lg);
}

.p-responsive-xl {
  padding: var(--spacing-xl);
}

.m-responsive-xs {
  margin: var(--spacing-xs);
}

.m-responsive-sm {
  margin: var(--spacing-sm);
}

.m-responsive-md {
  margin: var(--spacing-md);
}

.m-responsive-lg {
  margin: var(--spacing-lg);
}

.m-responsive-xl {
  margin: var(--spacing-xl);
}

/* 响应式边框半?*/
.rounded-responsive-xs {
  border-radius: var(--radius-xs);
}

.rounded-responsive-sm {
  border-radius: var(--radius-sm);
}

.rounded-responsive-md {
  border-radius: var(--radius-md);
}

.rounded-responsive-lg {
  border-radius: var(--radius-lg);
}

.rounded-responsive-xl {
  border-radius: var(--radius-xl);
}

/* 响应式网?*/
.grid-responsive-1 {
  grid-template-columns: 1fr;
}

.grid-responsive-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-responsive-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-responsive-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-responsive-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-responsive-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 响应式对?*/
.flex-responsive-column {
  flex-direction: column;
}

.flex-responsive-row {
  flex-direction: row;
}

@media (max-width: 767px) {
  .flex-responsive-column-md {
    flex-direction: column;
  }
  
  .grid-responsive-2,
  .grid-responsive-3,
  .grid-responsive-4,
  .grid-responsive-5,
  .grid-responsive-6 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  .flex-responsive-column-sm {
    flex-direction: column;
  }
}

/* 响应式容?*/
.container-fluid {
  width: 100%;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

.container-sm {
  width: 100%;
  max-width: var(--container-sm);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

.container-md {
  width: 100%;
  max-width: var(--container-md);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

.container-lg {
  width: 100%;
  max-width: var(--container-lg);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

.container-xl {
  width: 100%;
  max-width: var(--container-xl);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

.container-2xl {
  width: 100%;
  max-width: var(--container-2xl);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------- */
/* 响应式交互优?*/
/* -------------------------- */

/* 触摸目标优化 */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  .btn-icon-enhanced {
    width: 44px;
    height: 44px;
  }
  
  .btn-circle-enhanced {
    width: 48px;
    height: 48px;
  }
  
  input.form-checkbox,
  .checkbox-enhanced {
    width: 20px;
    height: 20px;
  }
  
  /* 开关轨道尺寸由 forms-advanced.css 中的变量控制，这里不再限制容器宽?*/
  /* .form-switch { }
  */
}

/* 减少动画效果在移动设备上 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  :root {
    --glass-border: 2px solid var(--color-aero-blue);
    --text-primary: #000000;
    --text-secondary: #333333;
  }
  
  [data-theme="dark"] {
    --glass-border: 2px solid var(--color-pulse-cyan);
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
  }
}

/* 深色模式媒体查询 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

/* -------------------------- */
/* 网站场景版心规则（覆盖） */
/* -------------------------- */

/*
 * 根据 LAYOUT_SCENARIOS.md 规范:
 * 网站场景需要有版心约束 (max-width: 1200px-1440px)
 * 以下规则覆盖上述固定宽度定义，改为使?max-width
 */

/* 网站容器 - 适用所有屏?>= 640px */
@media (min-width: 640px) {
  .container {
    width: 100% !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 大屏幕扩展至 1440px */
@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}


/* Lingjing Core Theme Switcher CSS */

/* 主题切换按钮样式 */
.theme-switcher {
  position: fixed;
  top: calc(var(--spacing-3xl) + var(--spacing-lg));
  right: var(--spacing-lg);
  z-index: 1080;

  background: var(--bg-glass);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: all var(--anim-duration-normal) var(--anim-ease-out);
}

.theme-switcher:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover), var(--glow-primary);
  border-color: var(--glass-border-hover);
}

.theme-btn {
  width: var(--btn-height-lg);
  height: var(--btn-height-lg);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--bg-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--anim-duration-fast) var(--anim-ease-out);
  font-size: var(--font-size-lg);
}

.theme-btn:hover {
  background: var(--glass-overlay-light);
  transform: scale(1.05);
}

.theme-btn.active {
  border-color: var(--color-aero-blue);
  background: var(--glass-overlay-light);
  box-shadow: var(--glow-primary);
}

/* 主题切换器移动端适配 */
@media (max-width: var(--breakpoint-md)) {
  .theme-switcher {
    top: auto;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
  }
}

/* 深色主题下的主题切换器样?*/
[data-theme="dark"] .theme-switcher {
  background: var(--bg-glass);
  border-color: var(--glass-border);
  box-shadow: var(--glow-primary);
}

[data-theme="dark"] .theme-switcher:hover {
  box-shadow: var(--glass-shadow-light);
}

[data-theme="dark"] .theme-btn {
  background: var(--glass-overlay-light);
}

[data-theme="dark"] .theme-btn:hover {
  background: var(--glass-overlay-medium);
}

[data-theme="dark"] .theme-btn.active {
  border-color: var(--color-pulse-cyan);
  background: var(--glass-overlay-medium);
  box-shadow: none;
}

[data-theme="dark"] .theme-btn.active:hover {
  box-shadow: var(--glow-secondary);
}

/* 主题切换动画 */
@keyframes theme-switch {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.theme-switching {
  animation: theme-switch var(--anim-duration-normal) var(--anim-ease-in-out);
}

/* 页面过渡效果 */
body.theme-transition {
  transition: background-color var(--anim-duration-normal) var(--anim-ease-out),
              color var(--anim-duration-normal) var(--anim-ease-out);
}

/* 主题切换提示 */
.theme-tooltip {
  position: absolute;
  right: calc(var(--btn-height-lg) + var(--spacing-md));
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme-primary);
  color: #fff;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--anim-duration-fast) var(--anim-ease-out);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-tooltip {
  background: var(--theme-primary);
  color: #fff;
}


.theme-switcher:hover .theme-tooltip {
  opacity: 1;
}

/* 主题切换器容?*/
.theme-switcher-container {
  position: relative;
}

/* 主题切换器图标样?*/
.theme-icon {
  width: var(--spacing-lg);
  height: var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 浅色主题图标 */
.theme-icon-light::before {
  content: '☀';
}


/* 深色主题图标 */
.theme-icon-dark::before {
  content: '🌙';
}

/* 系统主题图标 */
.theme-icon-system::before {
  content: '💻';
}