/* ============================================================
   爱查查 · 设计令牌（Design Tokens）· 去 AI 味改造版
   基准：资料库《02-界面去AI味改造规范》第二节
   APP端 /admin 共用同源变量，改一处两端生效。
   引入顺序：本文件必须在该端自身样式（app.css / admin.css）之前加载。

   治理要点：
   - 主色亮蓝 #2563eb → 深藏蓝 #1E3A5F；图表 AI 紫蓝 #667eea/#764ba2 清除
   - 渐变令牌删除（渐变只允许出现在插画/logo），按钮一律纯色
   - 阴影收敛为两档（shadow-1 / shadow-2）
   - 间距 4pt 网格；字阶 8 级（12 起步）；圆角 sm/md/lg/full 四档
   - 存量变量名全部保留为别名，旧样式文件零改动即换新基准
   ============================================================ */

:root {
  /* ===== 中性色阶（8 阶，同一色相派生） ===== */
  --gray-900: #101828;   /* 主文字 */
  --gray-700: #344054;   /* 次级文字、图标 */
  --gray-500: #667085;   /* 辅助说明、占位符 */
  --gray-400: #98A2B3;   /* 禁用文字 */
  --gray-300: #D0D5DD;   /* 描边、分隔线 */
  --gray-200: #E4E7EC;   /* 输入框描边（浅）、禁用底 */
  --gray-100: #F2F4F7;   /* 嵌套容器底、hover 态 */
  --gray-50:  #F9FAFB;   /* 页面底色 */
  --white:    #FFFFFF;

  /* ===== 主色 + 强调色（各 1 个，到此为止） ===== */
  --primary: #1E3A5F;        /* 深藏蓝：导航、主按钮、选中态 */
  --primary-600: #2A4A75;    /* 主按钮 hover */
  --accent: #2EC4B6;         /* 薄荷绿：只用于强调、成功、进度，不大面积用 */

  /* ===== 功能色 ===== */
  --success: #12B76A;
  --warning: #F79009;
  --danger:  #F04438;
  --info:    #2E90FA;

  /* ===== 功能色文本（浅底上的可读色，标签/徽章/状态文字） ===== */
  --success-ink: #067047;
  --warning-ink: #B54708;
  --danger-ink:  #B42318;
  --info-ink:    #175CD3;

  /* ===== 存量别名：品牌色（值已切换为深藏蓝体系） ===== */
  --primary-light: #2A4A75;              /* 原亮蓝 → 主色 hover 档 */
  --primary-dark: #152A45;               /* 原深蓝 → 按压态 */
  --primary-soft: rgba(30, 58, 95, 0.08);

  /* ===== 存量别名：意向色 ===== */
  --high: #F04438;      /* 高意向 → danger */
  --medium: #F79009;    /* 准意向 → warning */
  --none: #98A2B3;      /* 无意向 → gray-400 */

  /* ===== 功能色浅底（标签/徽章用，8-12% 透明度） ===== */
  --success-soft: rgba(18, 183, 106, 0.10);
  --warning-soft: rgba(247, 144, 9, 0.12);
  --danger-soft: rgba(240, 68, 56, 0.10);
  --info-soft: rgba(46, 144, 250, 0.10);
  --accent-soft: rgba(46, 196, 182, 0.12);

  /* ===== 存量别名：表面与文字 ===== */
  --bg: #F9FAFB;            /* 页面底色 gray-50 */
  --bg-elevated: #FFFFFF;
  --card-bg: #FFFFFF;
  --surface-2: #F2F4F7;     /* 嵌套容器底 gray-100 */
  --surface-3: #E4E7EC;     /* 禁用/灰底 gray-200 */
  --text: #101828;          /* gray-900 主文字 */
  --text-secondary: #344054;/* gray-700 次级 */
  --text-light: #667085;    /* gray-500 辅助 */
  --border: #D0D5DD;        /* gray-300 描边 */
  --divider: #E4E7EC;       /* gray-200 分隔线 */
  --overlay: rgba(16, 24, 40, 0.45);
  --text-on-primary: #FFFFFF;

  /* ===== 管理端侧边栏（深藏蓝纯色，渐变已清除） ===== */
  --sidebar-bg: #1E3A5F;
  --sidebar-hover: #2A4A75;
  --sidebar-active: #2A4A75;
  --sidebar-active-bar: #2EC4B6;   /* 选中态薄荷绿指示条（唯一强调位） */
  --sidebar-text: #D0D5DD;

  /* ===== 圆角（sm/md/lg/full 四档，full 仅限头像与状态 pill） ===== */
  --radius-sm: 6px;     /* 输入框、小按钮 */
  --radius-md: 10px;    /* 卡片 */
  --radius-lg: 16px;    /* 弹窗、底部抽屉 */
  --radius-full: 999px;
  --radius-pill: 999px; /* 存量别名 */
  --radius: 10px;       /* 存量别名 = md */

  /* ===== 阴影（只两档，替代到处发光） ===== */
  --shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.10);  /* 卡片常态 */
  --shadow-2: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06); /* 弹窗/浮层 */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.10);  /* 存量别名 = 1 */
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.10);     /* 存量别名 = 1 */
  --shadow-lg: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06); /* 存量别名 = 2 */
  --shadow-xl: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06); /* 存量别名 = 2 */

  /* ===== 间距（4pt 网格，出现其他数值一律视为 bug） ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== 字阶（8 级封顶，行高统一 1.5） ===== */
  --text-xs: 12px;    /* 辅助标签 */
  --text-sm: 13px;    /* 次要信息 */
  --text-base: 14px;  /* 正文基准 */
  --text-md: 16px;    /* 卡片标题 */
  --text-lg: 18px;    /* 区块标题 */
  --text-xl: 22px;    /* 页面标题 */
  --text-2xl: 28px;   /* 数字大屏 */
  --text-hero: 36px;  /* 仅首屏一次 */
  /* 存量别名（值已归位到字阶） */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* ===== 交互与组件 ===== */
  --tap-min: 44px;
  --btn-h: 40px;                     /* 主/次按钮基准高度 */
  --skeleton-base: #F2F4F7;          /* 骨架屏灰底 gray-100 */
  --skeleton-shine: rgba(255, 255, 255, 0.55);
  --chart-line: #1E3A5F;             /* 原 AI 紫蓝 #667eea → 深藏蓝 */
  --chart-bar: #2A4A75;              /* 原 AI 紫蓝 #764ba2 → 主色 hover 档 */
  --chart-grid: #E4E7EC;
  --chart-label: #667085;
  --chart-bg: #FFFFFF;

  color-scheme: light;
}

/* ============================================================
   深色模式：跟随系统 prefers-color-scheme（同色相派生）
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #3D5A80;
    --primary-600: #4E6E96;
    --accent: #2EC4B6;

    --success: #22C55E;
    --warning: #FBBF24;
    --danger: #F87171;
    --info: #38BDF8;

    --primary-light: #4E6E96;
    --primary-dark: #2A4A75;
    --primary-soft: rgba(61, 90, 128, 0.22);

    --high: #F87171;
    --medium: #FBBF24;
    --none: #94A3B8;

    --success-soft: rgba(34, 197, 94, 0.16);
    --warning-soft: rgba(251, 191, 36, 0.16);
    --danger-soft: rgba(248, 113, 113, 0.16);
    --info-soft: rgba(56, 189, 248, 0.16);
    --accent-soft: rgba(46, 196, 182, 0.16);

    --bg: #0F172A;
    --bg-elevated: #1E293B;
    --card-bg: #1E293B;
    --surface-2: #172033;
    --surface-3: #24324A;
    --text: #E8EDF5;
    --text-secondary: #A3B0C2;
    --text-light: #7C8AA0;
    --border: #2C3A52;
    --divider: #22304A;
    --overlay: rgba(2, 6, 23, 0.66);

    --sidebar-bg: #111C2E;
    --sidebar-hover: #1E2C44;
    --sidebar-active: #2A3C58;
    --sidebar-active-bar: #2EC4B6;
    --sidebar-text: #C7D2E0;

    --skeleton-base: #25324A;
    --skeleton-shine: rgba(255, 255, 255, 0.09);
    --chart-line: #6B8CB8;
    --chart-bar: #3D5A80;
    --chart-grid: #2C3A52;
    --chart-label: #A3B0C2;
    --chart-bg: #1E293B;

    color-scheme: dark;
  }
}

/* ============================================================
   线性图标（Lucide 风格 · 内联 SVG · CSP 安全无外链）
   ============================================================ */
svg.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex: 0 0 auto;
}
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }

/* ============================================================
   共用组件：标签（4 色封顶：蓝/绿/橙/红/灰，purple 已清除）
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;   /* v3.72 标签 Pill 化：浅底深字全圆角，替代小圆角矩形 */
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.tag-blue { background: var(--primary-soft); color: var(--primary); }
.tag-green { background: var(--success-soft); color: #067047; }
.tag-orange { background: var(--warning-soft); color: #B54708; }
.tag-red { background: var(--danger-soft); color: #B42318; }
.tag-gray { background: rgba(102, 112, 133, 0.10); color: #475467; }

/* ---------- 风险语义标签（天机情报中心 / 风险等级） ----------
   success = 正常 / warning = 异常 / danger = 失联
   与 .tag-green/.tag-orange/.tag-red 同色系，独立命名以表达业务语义 */
.tag-success { background: var(--success-soft); color: #067047; }
.tag-warning { background: var(--warning-soft); color: #B54708; }
.tag-danger  { background: var(--danger-soft); color: #B42318; }

@media (prefers-color-scheme: dark) {
  .tag-blue { background: var(--primary-soft); color: #A8BFD8; }
  .tag-green { background: var(--success-soft); color: #86EFAC; }
  .tag-orange { background: var(--warning-soft); color: #FDBA74; }
  .tag-red { background: var(--danger-soft); color: #FCA5A5; }
  .tag-gray { background: rgba(148, 163, 184, 0.18); color: #CBD5E1; }
  .tag-success { background: var(--success-soft); color: #86EFAC; }
  .tag-warning { background: var(--warning-soft); color: #FDBA74; }
  .tag-danger  { background: var(--danger-soft); color: #FCA5A5; }
}

/* ============================================================
   共用组件：骨架屏（加载态，灰底块非转圈白屏）
   ============================================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--radius-sm);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.skeleton-line { height: 12px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.skeleton-line.w-30 { width: 30%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-title { height: 16px; width: 55%; border-radius: var(--radius-sm); margin-bottom: 10px; }
.skeleton-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-1);
}
.skeleton-row { display: flex; gap: var(--space-3); align-items: flex-start; }
.skeleton-circle { width: 40px; height: 40px; border-radius: var(--radius-full); flex: 0 0 auto; }
.skeleton-grow { flex: 1; }
.skeleton-table-row { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--divider); }

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ============================================================
   共用组件：空状态（图标 + 一句话 + 引导按钮）
   ============================================================ */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}
.empty-state .empty-icon {
  color: var(--gray-400, #98A2B3);
  margin-bottom: var(--space-3);
  display: inline-flex;
}
.empty-state .empty-icon svg { width: 40px; height: 40px; }
.empty-state .empty-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.empty-state .empty-desc {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.empty-state .empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--btn-h);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--dur-fast, 0.15s);
}
.empty-state .empty-action:hover { background: var(--primary-600); }
.empty-state.compact { padding: var(--space-8) var(--space-4); }
.empty-state.compact .empty-icon svg { width: 32px; height: 32px; }

/* ============================================================
   共用组件：错误态（说明原因 + 重试按钮）
   ============================================================ */
.error-state {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  color: var(--text-secondary);
}
.error-state .error-icon {
  color: var(--danger);
  margin-bottom: var(--space-3);
  display: inline-flex;
}
.error-state .error-icon svg { width: 36px; height: 36px; }
.error-state .error-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.error-state .error-desc {
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.error-state .error-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--btn-h);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast, 0.15s);
}
.error-state .error-retry:hover { background: var(--surface-2); color: var(--text); }
.error-state.compact { padding: var(--space-6) var(--space-4); }

/* ============================================================
   共用组件：高意向呼吸圆点
   ============================================================ */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(240, 68, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 68, 56, 0); }
}
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--high);
  margin-right: var(--space-1);
  vertical-align: middle;
  animation: pulse-dot 1.8s ease-out infinite;
}
.pulse-dot.medium { background: var(--medium); animation-name: pulse-dot-amber; }
@keyframes pulse-dot-amber {
  0%   { box-shadow: 0 0 0 0 rgba(247, 144, 9, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(247, 144, 9, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 144, 9, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* ============================================================
   共用工具类
   ============================================================ */
.tap-target {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.text-secondary { color: var(--text-secondary); }

/* ============================================================
   运动曲线 / 焦点环（可访问性）
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur: 0.22s;
  --dur-slow: 0.35s;
  --focus-ring: 0 0 0 3px rgba(30, 58, 95, 0.25);
  --lift-sm: translateY(-1px);
  --lift: translateY(-2px);
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}