:root {
  /* 主色调 - 信任蓝 */
  --color-primary: #2563EB;
  --color-primary-light: #3B82F6;
  --color-primary-dark: #1D4ED8;

  /* 辅色调 - 温暖橙 */
  --color-accent: #F59E0B;
  --color-accent-light: #FBBF24;

  /* 功能色 */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* 背景 */
  --bg-page: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-input: #F1F5F9;
  --bg-hover: #EFF6FF;

  /* 文字 */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --text-inverse: #FFFFFF;

  /* 边框 */
  --border-color: #E2E8F0;
  --border-focus: #3B82F6;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;

  /* 字体 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;

  /* 兼容旧版变量名 */
  --jst-theme: var(--color-primary);
  --jst-theme-light: var(--bg-hover);
  --jst-bg: var(--bg-card);
  --jst-bg-secondary: var(--bg-page);
  --jst-card: var(--bg-card);
  --jst-text: var(--text-primary);
  --jst-text-secondary: var(--text-secondary);
  --jst-text-tertiary: var(--text-tertiary);
  --jst-border: var(--border-color);
  --jst-success-bg: #DCFCE7;
  --jst-success-light: #BBF7D0;
  --jst-warn: var(--color-warning);
  --jst-warn-light: #FEF3C7;
  --jst-warn-bg: #FDE68A;
  --jst-info-bg: #DBEAFE;
  --jst-info-light: #BFDBFE;
  --jst-accent-bg: #FCE7F3;
  --jst-accent-light: #F9A8D4;
  --jst-menu-bg: #1E293B;
}

/* 深色模式 */
[data-theme="dark"] {
  --bg-page: #0F172A;
  --bg-card: #1E293B;
  --bg-input: #334155;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --border-color: #334155;
}

/* 通用按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--text-inverse);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.btn-secondary:hover {
  background: var(--bg-hover);
}

.btn-success {
  background: var(--color-success);
  color: var(--text-inverse);
}

.btn-danger {
  background: var(--color-error);
  color: var(--text-inverse);
}

/* 通用卡片 */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-lg);
}

/* 通用输入框 */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.input::placeholder {
  color: var(--text-tertiary);
}

/* 徽标 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-error);
  color: var(--text-inverse);
}

.badge-primary {
  background: var(--color-primary);
}

.badge-success {
  background: var(--color-success);
}

/* 标签 */
.tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

.tag-primary {
  background: var(--bg-hover);
  color: var(--color-primary);
}

.tag-success {
  background: #DCFCE7;
  color: #15803D;
}

.tag-warning {
  background: #FEF3C7;
  color: #B45309;
}

/* 在线状态 */
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--bg-card);
}