/**
 * V21 设计系统 - 全局样式
 * 核心设计规范：Indigo 主色 / 大圆角 / 毛玻璃 / 渐变背景
 *
 * 变量命名规范：
 *   --{类别}-{语义}-{层级}
 *   例: --color-primary-500, --space-md, --radius-lg, --shadow-card
 *
 * 分类索引：
 *   1. 主色 / 辅色 / 强调色
 *   2. 状态色（success / warning / error / info）
 *   3. 中性色 / 灰阶
 *   4. 文字色
 *   5. 背景色
 *   6. 边框色
 *   7. 间距
 *   8. 字体
 *   9. 圆角
 *  10. 阴影
 *  11. 过渡动画
 *  12. 响应式断点
 *  13. 层级（z-index）
 *  14. 兼容别名（映射旧变量名 → 标准名）
 */

/* ============================================================
   浅色主题（默认）
   ============================================================ */
:root {
  /* ── 1. 主色 / 辅色 / 强调色 ─────────────────────────────── */
  --color-primary-50: #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;

  /* 主色快捷别名 */
  --primary-color: var(--color-primary-600);
  --primary-hover: var(--color-primary-500);
  --primary-dark: var(--color-primary-700);
  --primary-soft: var(--color-primary-50);
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));

  /* 辅色 — Emerald */
  --color-secondary-50: #ecfdf5;
  --color-secondary-100: #d1fae5;
  --color-secondary-200: #a7f3d0;
  --color-secondary-300: #6ee7b7;
  --color-secondary-400: #34d399;
  --color-secondary-500: #10b981;
  --color-secondary-600: #059669;
  --color-secondary-700: #047857;
  --color-secondary-800: #065f46;
  --color-secondary-900: #064e3b;

  --secondary-color: var(--color-secondary-500);
  --secondary-hover: var(--color-secondary-400);
  --secondary-dark: var(--color-secondary-600);
  --secondary-soft: var(--color-secondary-50);

  /* 强调色 — Amber */
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;
  --color-accent-800: #92400e;
  --color-accent-900: #78350f;

  --accent-color: var(--color-accent-500);
  --accent-hover: var(--color-accent-400);
  --accent-dark: var(--color-accent-600);
  --accent-soft: var(--color-accent-50);

  /* ── 2. 状态色 ───────────────────────────────────────────── */
  --success-color: var(--color-secondary-500);
  --success-hover: var(--color-secondary-400);
  --success-soft: var(--color-secondary-50);
  --success-border: var(--color-secondary-200);

  --warning-color: var(--color-accent-500);
  --warning-hover: var(--color-accent-400);
  --warning-soft: var(--color-accent-50);
  --warning-border: var(--color-accent-200);

  --error-color: #ef4444;
  --error-hover: #f87171;
  --error-soft: #fef2f2;
  --error-border: #fecaca;

  --info-color: var(--color-primary-600);
  --info-hover: var(--color-primary-500);
  --info-soft: var(--color-primary-50);
  --info-border: var(--color-primary-200);

  /* ── 3. 中性色 / 灰阶 ────────────────────────────────────── */
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* ── 4. 文字色 ───────────────────────────────────────────── */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-500);
  --text-tertiary: var(--color-gray-400);
  --text-disabled: var(--color-gray-300);
  --text-inverse: #ffffff;
  --text-link: var(--color-primary-600);
  --text-link-hover: var(--color-primary-500);

  /* ── 5. 背景色 ───────────────────────────────────────────── */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(15, 23, 42, 0.45);
  --bg-glass: rgba(255, 255, 255, 0.86);
  --bg-glass-border: rgba(255, 255, 255, 0.2);

  /* ── 6. 边框色 ───────────────────────────────────────────── */
  --border-color: var(--color-gray-200);
  --border-light: var(--color-gray-100);
  --border-dark: var(--color-gray-300);
  --divider-color: #f0f0f0;

  /* ── 7. 间距 ─────────────────────────────────────────────── */
  --space-0: 0;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── 8. 字体 ─────────────────────────────────────────────── */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 850;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-base: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.04em;

  /* ── 9. 圆角 ─────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* ── 10. 阴影 ────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 20px 58px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.15);
  --shadow-xl: 0 40px 120px rgba(15, 23, 42, 0.2);
  --shadow-hover: 0 18px 34px rgba(79, 70, 229, 0.28);
  --shadow-card: 0 24px 70px rgba(15, 23, 42, 0.09);
  --shadow-primary: 0 14px 26px rgba(79, 70, 229, 0.22);
  --shadow-inner: inset 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.08);

  /* ── 11. 过渡动画 ────────────────────────────────────────── */
  --transition-fastest: 100ms ease;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --transition-shadow: box-shadow 200ms ease;
  --transition-transform: transform 200ms ease;
  --transition-all: all 200ms ease;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 12. 响应式断点（仅做记录，媒体查询中直接使用像素值） ── */
  /* xs: 480px | sm: 576px | md: 768px | lg: 992px | xl: 1200px | 2xl: 1400px */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* ── 13. 层级 ────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ── 14. 兼容别名（旧变量名 → 标准名，后续逐步迁移） ─────── */
  --slate: var(--color-gray-900);
  --muted: var(--color-gray-500);
  --indigo: var(--color-primary-600);
  --indigo-soft: var(--color-primary-50);
  --line: var(--color-gray-200);
  --bg: var(--color-gray-50);
  --green: var(--color-secondary-500);
  --amber: var(--color-accent-500);
  --ant-color-primary: var(--color-primary-600);

  /* ── 15. 文档规范快捷别名 ─────────────────────────────────── */
  /* 主色快捷方式 */
  --primary: var(--color-primary-600);
  --primary-light: var(--color-primary-400);

  /* 辅色快捷方式 */
  --secondary: var(--color-secondary-500);
  --secondary-light: var(--color-secondary-400);

  /* 强调色快捷方式 */
  --accent: var(--color-accent-500);
  --accent-light: var(--color-accent-400);

  /* 状态色快捷方式 */
  --success: var(--color-secondary-500);
  --warning: var(--color-accent-500);
  --error: #ef4444;
  --info: var(--color-primary-600);

  /* 功能色 */
  --red: #ef4444;
}

/* ============================================================
   深色主题
   通过 .dark 类或 data-theme="dark" 属性手动激活（已禁用系统自动跟随）
   ============================================================ */
.dark,
[data-theme="dark"] {
  /* 主色保持，提高亮度 */
  --color-primary-50: #2e2b5e;
  --color-primary-500: #818cf8;
  --color-primary-600: #6366f1;
  --color-primary-700: #4f46e5;

  --primary-color: var(--color-primary-500);
  --primary-hover: var(--color-primary-400, #a5b4fc);
  --primary-dark: var(--color-primary-600);
  --primary-soft: rgba(99, 102, 241, 0.15);
  --gradient-primary: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));

  /* 辅色 */
  --secondary-color: var(--color-secondary-400, #34d399);
  --secondary-hover: var(--color-secondary-300, #6ee7b7);
  --secondary-soft: rgba(16, 185, 129, 0.15);

  /* 强调色 */
  --accent-color: var(--color-accent-400, #fbbf24);
  --accent-hover: var(--color-accent-300, #fcd34d);
  --accent-soft: rgba(245, 158, 11, 0.15);

  /* 状态色 */
  --success-color: var(--color-secondary-400, #34d399);
  --success-soft: rgba(16, 185, 129, 0.15);
  --warning-color: var(--color-accent-400, #fbbf24);
  --warning-soft: rgba(245, 158, 11, 0.15);
  --error-color: #f87171;
  --error-soft: rgba(239, 68, 68, 0.15);
  --info-color: var(--color-primary-500);
  --info-soft: rgba(99, 102, 241, 0.15);

  /* 文字 */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-disabled: #475569;
  --text-inverse: var(--color-gray-900);
  --text-link: var(--color-primary-400, #818cf8);
  --text-link-hover: var(--color-primary-300, #a5b4fc);

  /* 背景 */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-elevated: #1e293b;
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --bg-glass: rgba(15, 23, 42, 0.8);
  --bg-glass-border: rgba(255, 255, 255, 0.08);

  /* 边框 */
  --border-color: #334155;
  --border-light: #1e293b;
  --border-dark: #475569;
  --divider-color: #1e293b;

  /* 阴影 */
  --shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 20px 58px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 18px 34px rgba(99, 102, 241, 0.35);
  --shadow-primary: 0 14px 26px rgba(99, 102, 241, 0.3);

  /* 兼容别名 */
  --slate: #f1f5f9;
  --muted: #94a3b8;
  --indigo: #6366f1;
  --indigo-soft: rgba(99, 102, 241, 0.15);
  --line: #334155;
  --bg: #1e293b;
  --green: #34d399;
  --amber: #fbbf24;
  --ant-color-primary: #6366f1;
}

/* [已禁用] 跟随系统深色模式 — V21 UI 仅适配浅色主题，强制浅色 */
/* 如需手动深色，仍可通过 .dark 类或 data-theme="dark" 激活 */

/* ========== 全局背景装饰层 ========== */
body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(79, 70, 229, 0.11), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(16, 185, 129, 0.08), transparent 28%),
    radial-gradient(circle at 48% 80%, rgba(99, 102, 241, 0.08), transparent 34%), #f8fafc;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(79, 70, 229, 0.1) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.32;
}

#root {
  position: relative;
  z-index: 1;
}

/* ========== 页面通用布局 ========== */
.xx-page {
  padding: var(--space-xl);
  min-height: 100vh;
}

.xx-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.xx-page-head h2 {
  font-size: 26px;
  font-weight: 850;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.xx-page-head p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 14px;
}

/* ========== V21 按钮样式 ========== */
.xx-primary-btn,
.ant-btn-primary {
  background: var(--gradient-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: 850 !important;
  box-shadow: var(--shadow-primary) !important;
  padding: 12px 22px !important;
  transition: all 0.2s ease !important;
  height: auto !important;
}

.xx-primary-btn:hover,
.ant-btn-primary:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-1px);
  background: var(--gradient-primary) !important;
}

.xx-ghost-btn,
.ant-btn-default {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 850 !important;
  padding: 12px 22px !important;
  transition: all 0.2s ease !important;
  color: var(--text-primary) !important;
  height: auto !important;
}

.xx-ghost-btn:hover,
.ant-btn-default:hover {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

/* Ant Design Button 圆角覆盖 */
.ant-btn {
  border-radius: var(--radius-md) !important;
}

/* ========== V21 卡片样式 ========== */
.xx-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  transition: all 0.25s ease;
}

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

.xx-card h3 {
  font-size: 20px;
  font-weight: 850;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}

/* ========== 上传区域 ========== */
.xx-upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.xx-upload-zone:hover {
  border-color: var(--primary-color);
  background: var(--primary-soft);
}

.xx-upload-zone .icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.xx-upload-zone p {
  color: var(--text-secondary);
  margin: var(--space-sm) 0;
  font-size: 14px;
}

.xx-upload-btn {
  margin-top: var(--space-md);
}

/* ========== 空状态 ========== */
.xx-empty-state {
  text-align: center;
  padding: 48px;
  color: var(--text-secondary);
}

.xx-empty-state .icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
}

/* ========== 工具类 ========== */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-primary {
  color: var(--primary-color);
}
.text-muted {
  color: var(--text-secondary);
}

.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}

/* ========== 卡片悬浮效果 ========== */
.card-hover {
  transition: all 0.3s ease;
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ========== 选中态 ========== */
.selected-plan,
.selected-item {
  border: 2px solid var(--primary-color) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ========== 网格布局 ========== */
.xx-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.xx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.xx-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

@media (max-width: 1200px) {
  .xx-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xx-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .xx-grid-4,
  .xx-grid-3,
  .xx-grid-2 {
    grid-template-columns: 1fr;
  }
}