/* ============================================================================
   客小帮 AI 智慧拓客平台 · 设计令牌
   设计语言：科技蓝 · 浅色玻璃拟态
   来源：参考项目「创想工作台」admin.shuziai.net 的视觉规范（theme.css / layout.css / ui.css）
   ----------------------------------------------------------------------------
   五条准则：
     1. 中性色一律偏蓝（边框/文字/背景都是蓝调），不要纯灰纯黑 —— 这是「科技感」的根
     2. 大圆角：控件 10px、卡片 14px、弹层 20px
     3. 层次来自「玻璃半透明 + 蓝调投影 + 渐变强调」，不用生硬描边
     4. 主色 #2563eb 只用于「主按钮 / 选中态 / 链接 / 图标」，强调处用渐变
     5. 背景带星点网格底纹 + 蓝色光晕，营造纵深（.kx-starfield）
   ========================================================================== */

:root {
  /* ================================================================ 背景 */
  --kx-bg-deep: #e9eef7;             /* 最底层深一点的蓝灰 */
  --kx-bg: #f2f5fb;                  /* 内容区基础背景（蓝调浅灰） */
  --kx-bg-base: #f2f5fb;
  --kx-surface: rgba(255, 255, 255, .66);   /* 卡片：玻璃半透明白（对齐参考 .card 的 .6，略提以保小字可读） */
  --kx-surface-solid: #ffffff;              /* 需要不透明时使用（弹窗等） */
  --kx-surface-2: rgba(255, 255, 255, .55); /* 次级面板 */
  --kx-surface-3: rgba(13, 25, 52, .04);    /* 内嵌区域：极淡深蓝叠加 */
  --kx-bg-panel: #ffffff;
  /* 表格固定列 / 吸顶表头专用：必须是**不透明**色（sticky 元素用半透明会透出下层内容叠字）
     取值等于「玻璃卡(.66 白)叠在页面底纹上」的等效色，视觉上与卡片一致 */
  --kx-surface-fixed: #fbfcfe;
  --kx-surface-fixed-hover: #f3f6fb;
  --kx-surface-fixed-selected: #e7eefb;
  --kx-surface-fixed-zebra: #f7f9fd;
  --kx-bg-float: rgba(255, 255, 255, .92);  /* 浮层（下拉/弹窗） */
  --kx-bg-glass: rgba(255, 255, 255, .6);

  /* ================================================================ 边框（淡蓝） */
  --kx-border-soft: rgba(37, 74, 138, .09);
  --kx-border: rgba(37, 74, 138, .14);
  --kx-border-2: rgba(37, 74, 138, .10);
  --kx-border-strong: rgba(37, 74, 138, .28);

  /* ================================================================ 文字（蓝黑，不用纯黑） */
  --kx-text: #101b33;
  --kx-text-2: #41527a;
  --kx-text-3: #6b7da2;   /* 参考项目为 #8796b8，但 12px 小字实测对比度仅 2.82:1，
                             这里压深一档到约 3.9:1，保证表头/标签可读 */
  --kx-text-4: #b6c2da;
  --kx-text-placeholder: #96a4c2;

  /* ================================================================ 品牌色（科技蓝）
     · 这整套只是**默认兜底**：OEM 换品牌时由 /assets/js/core/brand.js 运行时
       注入一份同样的变量表（含派生色与主按钮渐变）覆盖掉，组件代码不用改。
     · 带 -rgb 的两个是「逗号分隔的 RGB 三元组」，专供需要透明度的地方写
       `rgba(var(--kx-primary-rgb), .18)` —— 否则半透明色没法跟随品牌色。 */
  --kx-primary-rgb: 37, 99, 235;
  --kx-accent-rgb: 56, 189, 248;
  --kx-primary: #2563eb;             /* 主色 */
  --kx-primary-hover: #1d4ed8;
  --kx-primary-active: #1e40af;
  --kx-primary-light: #3b82f6;
  --kx-primary-dark: #1e40af;
  --kx-primary-soft: rgba(37, 99, 235, .10);
  --kx-primary-soft-hover: rgba(37, 99, 235, .18);
  --kx-primary-border: rgba(37, 99, 235, .22);
  --kx-primary-50: rgba(37, 99, 235, .06);
  --kx-primary-100: rgba(37, 99, 235, .12);
  --kx-primary-200: rgba(37, 99, 235, .22);

  /* 次强调色（青蓝） */
  --kx-accent: #38bdf8;
  --kx-accent-deep: #0284c7;
  --kx-accent-light: #7dd3fc;
  --kx-accent-50: rgba(56, 189, 248, .12);

  /* ================================================================ 功能色（参考项目取值） */
  --kx-success: #10b981;
  --kx-success-text: #059669;
  --kx-success-soft: rgba(16, 185, 129, .12);
  --kx-success-bg: rgba(16, 185, 129, .12);
  --kx-success-border: rgba(16, 185, 129, .28);

  --kx-warning: #f59e0b;
  --kx-warning-text: #b45309;
  --kx-warning-soft: rgba(245, 158, 11, .14);
  --kx-warning-bg: rgba(245, 158, 11, .14);
  --kx-warning-border: rgba(245, 158, 11, .30);

  --kx-danger: #ef4444;
  --kx-danger-text: #dc2626;
  --kx-danger-soft: rgba(239, 68, 68, .12);
  --kx-danger-bg: rgba(239, 68, 68, .12);
  --kx-danger-border: rgba(239, 68, 68, .28);

  --kx-info: #0ea5e9;
  --kx-info-text: #0284c7;
  --kx-info-soft: rgba(14, 165, 233, .12);
  --kx-info-bg: rgba(14, 165, 233, .12);
  --kx-info-border: rgba(14, 165, 233, .28);

  --kx-violet: #8b5cf6;
  --kx-violet-text: #7c3aed;
  --kx-violet-soft: rgba(139, 92, 246, .12);
  --kx-violet-bg: rgba(139, 92, 246, .12);
  --kx-violet-border: rgba(139, 92, 246, .28);

  --kx-cyan: #0ea5e9;
  --kx-cyan-text: #0284c7;
  --kx-cyan-soft: rgba(14, 165, 233, .12);
  --kx-cyan-bg: rgba(14, 165, 233, .12);
  --kx-cyan-border: rgba(14, 165, 233, .28);

  /* ================================================================ 多色预设（标签 / 图表）
     统一为「半透明浅底 + 同色描边 + 深色文字」，与参考项目的 chip 一致
     ---------------------------------------------------------------------- */
  --kx-c-blue:      #2563eb;  --kx-c-blue-deep:      #1e40af;
  --kx-c-blue-soft: rgba(37, 99, 235, .12);   --kx-c-blue-border: rgba(37, 99, 235, .28);
  --kx-c-blue-grad: linear-gradient(135deg, #38bdf8 0%, #2563eb 48%, #4f46e5 100%);
  --kx-c-blue-igrad: none;  --kx-c-blue-glow: 0 6px 26px rgba(59, 130, 246, .22);

  --kx-c-cyan:      #0ea5e9;  --kx-c-cyan-deep:      #0369a1;
  --kx-c-cyan-soft: rgba(14, 165, 233, .12);  --kx-c-cyan-border: rgba(14, 165, 233, .28);
  --kx-c-cyan-grad: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
  --kx-c-cyan-igrad: none;  --kx-c-cyan-glow: 0 6px 26px rgba(34, 211, 238, .22);

  --kx-c-violet:      #8b5cf6;  --kx-c-violet-deep:      #6d28d9;
  --kx-c-violet-soft: rgba(139, 92, 246, .12); --kx-c-violet-border: rgba(139, 92, 246, .28);
  --kx-c-violet-grad: linear-gradient(135deg, #f472b6 0%, #8b5cf6 100%);
  --kx-c-violet-igrad: none;  --kx-c-violet-glow: 0 6px 26px rgba(139, 92, 246, .22);

  --kx-c-green:      #10b981;  --kx-c-green-deep:      #047857;
  --kx-c-green-soft: rgba(16, 185, 129, .12);  --kx-c-green-border: rgba(16, 185, 129, .28);
  --kx-c-green-grad: linear-gradient(135deg, #34d399 0%, #16a085 100%);
  --kx-c-green-igrad: none;  --kx-c-green-glow: 0 6px 26px rgba(16, 185, 129, .22);

  --kx-c-orange:      #f59e0b;  --kx-c-orange-deep:      #b45309;
  --kx-c-orange-soft: rgba(245, 158, 11, .14); --kx-c-orange-border: rgba(245, 158, 11, .30);
  --kx-c-orange-grad: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
  --kx-c-orange-igrad: none;  --kx-c-orange-glow: 0 6px 26px rgba(245, 158, 11, .22);

  --kx-c-pink:      #ec4899;  --kx-c-pink-deep:      #be185d;
  --kx-c-pink-soft: rgba(236, 72, 153, .12);   --kx-c-pink-border: rgba(236, 72, 153, .28);
  --kx-c-pink-grad: linear-gradient(135deg, #f472b6 0%, #8b5cf6 100%);
  --kx-c-pink-igrad: none;  --kx-c-pink-glow: 0 6px 26px rgba(236, 72, 153, .22);

  --kx-c-red:      #ef4444;  --kx-c-red-deep:      #b91c1c;
  --kx-c-red-soft: rgba(239, 68, 68, .12);     --kx-c-red-border: rgba(239, 68, 68, .28);
  --kx-c-red-grad: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
  --kx-c-red-igrad: none;  --kx-c-red-glow: 0 6px 26px rgba(239, 68, 68, .22);

  --kx-c-magenta:      #ec4899;  --kx-c-magenta-soft: rgba(236, 72, 153, .12);  --kx-c-magenta-border: rgba(236, 72, 153, .28);
  --kx-c-gold:         #f59e0b;  --kx-c-gold-soft:    rgba(245, 158, 11, .14);  --kx-c-gold-border:    rgba(245, 158, 11, .30);
  --kx-c-lime:         #84cc16;  --kx-c-lime-soft:    rgba(132, 204, 22, .14);  --kx-c-lime-border:    rgba(132, 204, 22, .30);
  --kx-c-geekblue:     #4f46e5;  --kx-c-geekblue-soft:rgba(79, 70, 229, .12);   --kx-c-geekblue-border:rgba(79, 70, 229, .28);
  --kx-c-volcano:      #f97316;  --kx-c-volcano-soft: rgba(249, 115, 22, .12);  --kx-c-volcano-border: rgba(249, 115, 22, .28);

  /* 卡片装饰：允许渐变描边与光晕（玻璃拟态风） */
  --kx-card-topline: linear-gradient(90deg, rgba(56, 189, 248, .9), rgba(37, 99, 235, .55), transparent);
  --kx-card-glow: 0 8px 30px rgba(31, 60, 120, .14);

  /* ================================================================ 叠加层（深蓝半透明，白底上使用） */
  --kx-overlay-rgb: 13, 25, 52;
  --kx-star-rgb: 56, 132, 255;

  /* ================================================================ 侧边栏（浅色渐变） */
  --kx-sidebar-w: 238px;
  --kx-sidebar-w-collapsed: 64px;
  --kx-sidebar-bg: linear-gradient(180deg, #ffffff, #f1f5fd);
  --kx-sidebar-text: #41527a;
  --kx-sidebar-text-active: #2563eb;
  --kx-sidebar-hover: rgba(13, 25, 52, .05);
  --kx-sidebar-active: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(37, 99, 235, .03));
  --kx-sidebar-border: rgba(37, 74, 138, .14);
  --kx-sidebar-group: #8796b8;
  --kx-sidebar-badge-bg: rgba(37, 99, 235, .13);
  --kx-sidebar-active-grad: linear-gradient(90deg, rgba(37, 99, 235, .12), rgba(37, 99, 235, .03));
  --kx-sidebar-active-glow: inset 3px 0 0 var(--kx-primary);
  /* 二级菜单左侧引导线 */
  --kx-sidebar-guide: rgba(37, 99, 235, .18);

  /* 顶栏（毛玻璃） */
  --kx-topbar-h: 64px;
  --kx-topbar-bg: rgba(255, 255, 255, .85);
  --kx-topbar-line: rgba(37, 74, 138, .14);

  --kx-gradient-sidebar: linear-gradient(180deg, #ffffff, #f1f5fd);
  --kx-gradient-deep: linear-gradient(135deg, #0b1a3a 0%, #102a5c 50%, #0b1a3a 100%);
  /* 参考项目的三条品牌渐变 */
  --kx-gradient-primary: linear-gradient(135deg, #38bdf8 0%, #2563eb 48%, #4f46e5 100%);
  --kx-gradient-accent: linear-gradient(135deg, #f472b6 0%, #8b5cf6 100%);
  --kx-gradient-cyan: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
  --kx-gradient-green: linear-gradient(135deg, #34d399 0%, #16a085 100%);

  /* ================================================================ 圆角（大圆角语言） */
  --kx-radius-xs: 6px;
  --kx-radius-sm: 8px;
  --kx-radius: 10px;      /* 控件：输入 / 按钮 / 下拉 */
  --kx-radius-lg: 14px;   /* 卡片 / 面板 */
  --kx-radius-xl: 20px;   /* 弹窗 / 大容器 */
  --kx-radius-full: 999px;

  /* ================================================================ 阴影（全部蓝调） */
  --kx-shadow-xs: 0 2px 10px rgba(31, 60, 120, .08);
  --kx-shadow-sm: 0 2px 10px rgba(31, 60, 120, .08);
  --kx-shadow: 0 8px 30px rgba(31, 60, 120, .14);
  --kx-shadow-md: 0 8px 30px rgba(31, 60, 120, .14);
  --kx-shadow-lg: 0 24px 80px rgba(31, 60, 120, .22);
  --kx-shadow-primary: 0 6px 26px rgba(59, 130, 246, .22);
  --kx-shadow-accent: 0 6px 26px rgba(139, 92, 246, .22);
  --kx-shadow-btn: 0 6px 26px rgba(59, 130, 246, .22);

  /* ================================================================ 字号 */
  --kx-fs-2xs: 11px;
  --kx-fs-xs: 12px;
  --kx-fs-sm: 13px;
  --kx-fs: 14px;
  --kx-fs-md: 15px;
  --kx-fs-lg: 16px;
  --kx-fs-xl: 18px;
  --kx-fs-2xl: 20px;
  --kx-fs-3xl: 22px;      /* 页面标题 */
  --kx-fs-4xl: 26px;      /* 统计数值 */

  --kx-lh: 1.6;

  /* ================================================================ 字重 */
  --kx-fw-normal: 400;
  --kx-fw-medium: 500;
  --kx-fw-semibold: 600;
  --kx-fw-bold: 700;

  /* ================================================================ 间距 */
  --kx-sp-1: 4px;
  --kx-sp-2: 8px;
  --kx-sp-3: 12px;
  --kx-sp-4: 16px;
  --kx-sp-5: 18px;
  --kx-sp-6: 20px;
  --kx-sp-7: 24px;
  --kx-sp-8: 28px;
  --kx-sp-9: 36px;
  --kx-sp-10: 48px;

  /* ================================================================ 控件高度 */
  --kx-control-h-sm: 30px;
  --kx-control-h: 38px;
  --kx-control-h-lg: 44px;

  /* ================================================================ 字体 */
  --kx-font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --kx-font-mono: Consolas, "SF Mono", "Liberation Mono", Menlo, monospace;

  /* ================================================================ 动效 */
  --kx-ease: cubic-bezier(.4, 0, .2, 1);
  --kx-ease-out: cubic-bezier(.215, .61, .355, 1);
  --kx-dur-fast: .15s;
  --kx-dur: .2s;
  --kx-dur-slow: .3s;

  /* ================================================================ 布局尺寸 */
  --kx-page-padding: 28px;
  --kx-page-padding-top: 24px;
  --kx-page-gap: 16px;

  /* ================================================================ 层级 */
  --kx-z-dropdown: 60;
  --kx-z-modal: 100;
  --kx-z-toast: 300;

  /* ================================================================ 滚动条 */
  --kx-scrollbar-thumb: rgba(56, 110, 220, .20);
  --kx-scrollbar-thumb-hover: rgba(56, 110, 220, .36);
}

/* ============================================================================
   暗色模式：沿用同一套蓝调语言，压深背景与边框
   ========================================================================== */
[data-theme="dark"] {
  --kx-bg-deep: #070d1c;
  --kx-bg: #0b1428;
  --kx-bg-base: #0b1428;
  --kx-surface: rgba(20, 32, 58, .72);
  --kx-surface-solid: #101b33;
  --kx-surface-2: rgba(26, 40, 70, .6);
  --kx-surface-3: rgba(255, 255, 255, .05);
  --kx-bg-panel: #101b33;
  --kx-surface-fixed: #16203a;
  --kx-surface-fixed-hover: #1b2743;
  --kx-surface-fixed-selected: #1a2946;
  --kx-surface-fixed-zebra: #18223c;
  --kx-bg-float: rgba(16, 27, 51, .95);
  --kx-bg-glass: rgba(20, 32, 58, .6);

  --kx-border-soft: rgba(120, 160, 230, .12);
  --kx-border: rgba(120, 160, 230, .18);
  --kx-border-2: rgba(120, 160, 230, .14);
  --kx-border-strong: rgba(120, 160, 230, .32);

  --kx-text: #e8eefc;
  --kx-text-2: #a9bde0;
  --kx-text-3: #6f85ab;
  --kx-text-4: #4d6285;
  --kx-text-placeholder: #64799f;

  --kx-primary-rgb: 59, 130, 246;
  --kx-primary: #3b82f6;
  --kx-primary-hover: #60a5fa;
  --kx-primary-active: #2563eb;
  --kx-primary-soft: rgba(59, 130, 246, .18);
  --kx-primary-soft-hover: rgba(59, 130, 246, .28);
  --kx-primary-border: rgba(59, 130, 246, .34);
  --kx-primary-50: rgba(59, 130, 246, .10);
  --kx-primary-100: rgba(59, 130, 246, .18);
  --kx-primary-200: rgba(59, 130, 246, .34);

  --kx-overlay-rgb: 255, 255, 255;
  --kx-star-rgb: 120, 170, 255;

  --kx-sidebar-bg: linear-gradient(180deg, #0d1830, #0b1428);
  --kx-sidebar-text: #a9bde0;
  --kx-sidebar-text-active: #60a5fa;
  --kx-sidebar-hover: rgba(255, 255, 255, .06);
  --kx-sidebar-active: linear-gradient(90deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .05));
  --kx-sidebar-border: rgba(120, 160, 230, .16);
  --kx-sidebar-group: #6f85ab;
  --kx-sidebar-badge-bg: rgba(59, 130, 246, .22);
  --kx-sidebar-active-grad: linear-gradient(90deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .05));
  --kx-sidebar-guide: rgba(59, 130, 246, .3);
  --kx-topbar-bg: rgba(11, 20, 40, .82);
  --kx-topbar-line: rgba(120, 160, 230, .16);
  --kx-gradient-sidebar: linear-gradient(180deg, #0d1830, #0b1428);

  --kx-card-topline: linear-gradient(90deg, rgba(56, 189, 248, .7), rgba(37, 99, 235, .35), transparent);

  --kx-shadow-xs: 0 2px 12px rgba(0, 0, 0, .34);
  --kx-shadow-sm: 0 2px 12px rgba(0, 0, 0, .34);
  --kx-shadow: 0 10px 34px rgba(0, 0, 0, .46);
  --kx-shadow-md: 0 10px 34px rgba(0, 0, 0, .46);
  --kx-shadow-lg: 0 26px 80px rgba(0, 0, 0, .58);
  --kx-shadow-primary: 0 6px 26px rgba(37, 99, 235, .38);

  --kx-scrollbar-thumb: rgba(120, 170, 255, .22);
  --kx-scrollbar-thumb-hover: rgba(120, 170, 255, .38);
}