:root {
  /* ===== 颜色系统设计 - 蓝紫渐变主题 ===== */
  /* 主色系 - 从浅薰衣草紫到清透深空蓝 */
  --color-primary-50: #F5F3FF;    /* 超浅薰衣草 */
  --color-primary-100: #EDE9FE;   /* 浅薰衣草 */
  --color-primary-200: #DDD6FE;   /* 柔雾紫 */
  --color-primary-300: #C4B5FD;   /* 薰衣草紫 */
  --color-primary-400: #A78BFA;   /* 柔雾蓝紫 */
  --color-primary-500: #8B5CF6;   /* 主色 - 薰衣草紫 */
  --color-primary-600: #7C3AED;   /* 深薰衣草紫 */
  --color-primary-700: #6D28D9;   /* 深紫 */
  --color-primary-800: #5B21B6;   /* 深紫蓝 */
  --color-primary-900: #4C1D95;   /* 深蓝紫 */

  /* 次色系 - 清透深空蓝 */
  --color-secondary-50: #EFF6FF;  /* 超浅蓝 */
  --color-secondary-100: #DBEAFE; /* 浅蓝 */
  --color-secondary-200: #BFDBFE; /* 柔雾蓝 */
  --color-secondary-300: #93C5FD; /* 浅空蓝 */
  --color-secondary-400: #60A5FA; /* 柔雾深空蓝 */
  --color-secondary-500: #3B82F6; /* 主色 - 清透深空蓝 */
  --color-secondary-600: #2563EB; /* 深空蓝 */
  --color-secondary-700: #1D4ED8; /* 深蓝 */
  --color-secondary-800: #1E40AF; /* 深海蓝 */
  --color-secondary-900: #1E3A8A; /* 深夜蓝 */

  /* 语义化颜色 */
  --color-bg-primary: var(--color-primary-50);      /* 主背景 */
  --color-bg-secondary: var(--color-secondary-50);  /* 次背景 */
  --color-bg-surface: #FFFFFF;                      /* 表面背景 */
  --color-bg-overlay: rgba(255, 255, 255, 0.92);    /* 叠加层 */

  --color-text-primary: #1F2937;                    /* 主要文本 */
  --color-text-secondary: #4B5563;                  /* 次要文本 */
  --color-text-tertiary: #6B7280;                   /* 辅助文本 */
  --color-text-inverse: #FFFFFF;                    /* 反色文本 */

  --color-border-light: rgba(139, 92, 246, 0.12);   /* 浅边框 */
  --color-border-medium: rgba(139, 92, 246, 0.2);   /* 中边框 */
  --color-border-strong: rgba(139, 92, 246, 0.3);   /* 强边框 */

  /* ===== 间距系统设计（基于8px基准） ===== */
  --space-0: 0px;
  --space-1: 4px;     /* 超小间距 */
  --space-2: 8px;     /* 基准间距 */
  --space-3: 12px;    /* 小间距 */
  --space-4: 16px;    /* 中间距 */
  --space-5: 24px;    /* 大间距 */
  --space-6: 32px;    /* 超大间距 */
  --space-7: 48px;    /* 特大间距 */

  /* ===== 圆角系统设计（基于8px基准） ===== */
  --radius-none: 0px;
  --radius-sm: 4px;      /* 小圆角 */
  --radius-md: 8px;      /* 基准圆角 */
  --radius-lg: 12px;     /* 大圆角 */
  --radius-xl: 16px;     /* 特大圆角 */
  --radius-2xl: 20px;    /* 超大圆角 */
  --radius-full: 9999px; /* 圆形 */

  /* ===== 阴影系统设计（弥散微阴影） ===== */
  /* 外阴影 - 蓝紫色系弥散阴影 */
  --shadow-xs: 0 1px 2px rgba(139, 92, 246, 0.05);
  --shadow-sm: 0 2px 4px rgba(139, 92, 246, 0.08);
  --shadow-md: 0 4px 8px rgba(139, 92, 246, 0.12);
  --shadow-lg: 0 8px 16px rgba(139, 92, 246, 0.16);
  --shadow-xl: 0 12px 24px rgba(139, 92, 246, 0.2);
  --shadow-2xl: 0 20px 40px rgba(139, 92, 246, 0.24);

  /* 内阴影 */
  --shadow-inner: inset 0 2px 4px rgba(139, 92, 246, 0.06);
  --shadow-inner-md: inset 0 4px 8px rgba(139, 92, 246, 0.1);

  /* 特殊阴影 */
  --shadow-card: 0 8px 24px rgba(139, 92, 246, 0.12);
  --shadow-button: 0 4px 12px rgba(139, 92, 246, 0.18);
  --shadow-floating: 0 20px 40px rgba(139, 92, 246, 0.15);

  /* ===== 全局基础样式 ===== */
  --color-primary-50: #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #2563EB;
  --color-primary-600: #1D4ED8;
  --color-primary-700: #1E40AF;
  --color-primary-800: #1E3A8A;
  --color-primary-900: #172554;
  --color-bg-primary: #F8FAFC;
  --color-bg-secondary: #F1F5F9;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748B;
  --color-border-light: rgba(148, 163, 184, 0.22);
  --color-border-medium: rgba(148, 163, 184, 0.34);
  --color-border-strong: rgba(96, 165, 250, 0.46);
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 14px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 18px 36px rgba(15, 23, 42, 0.1);
  --shadow-2xl: 0 24px 48px rgba(15, 23, 42, 0.12);
  --shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-inner-md: inset 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 10px 24px rgba(15, 23, 42, 0.06);
  --shadow-button: 0 8px 16px rgba(37, 99, 235, 0.18);
  --shadow-floating: 0 20px 40px rgba(15, 23, 42, 0.1);

  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #root {
  margin: 0;
  height: 100%;
}
body {
  min-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}
button, input, textarea, select { font: inherit; }
button {
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
  color: var(--color-text-inverse);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: all 0.2s ease;
}
button:hover:not(:disabled) {
  transform: none;
  box-shadow: var(--shadow-md);
}
button.secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-medium);
  box-shadow: var(--shadow-sm);
}
button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}
textarea {
  min-height: 128px;
  resize: vertical;
  max-height: 220px;
  overflow: auto;
  overscroll-behavior: contain;
}
label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: 13px;
}
p, h1, h2, h3, strong, span { margin: 0; }
strong { font-weight: 600; }
