/* ============================================================================
   客小帮 AI 智慧拓客平台 · 页面级样式
   包含：启动占位、登录页、工作台、官网落地页
   ========================================================================== */

/* ============================================================================
   0. 启动占位
   ========================================================================== */
.kx-boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kx-sp-3);
  background: var(--kx-bg);
}
.kx-boot__logo { width: 56px; height: 56px; animation: kx-rise-in .5s var(--kx-ease) both; }
.kx-boot__title {
  font-size: var(--kx-fs-xl);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--kx-text);
}
.kx-boot__tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-3);
}
.kx-boot__tip .kx-icon { color: var(--kx-primary); }

/* ============================================================================
   1. 登录页（版式与视觉对齐参考项目 admin.shuziai.net 的登录页）
   结构：整屏背景（渐变 + 粒子 + 网格 + 光斑 + 薄纱）→ 左右分栏
        左＝品牌区（标识 / 主张 / 特性卡 / 版权）  右＝登录卡（Tab → 账号表单 / 扫码）
   ========================================================================== */
.kx-auth {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
}

/* ---------- 背景层：渐变底 + 漂浮粒子 + 网格遮罩 ---------- */
.kx-auth__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1400px 700px at 80% -10%, rgba(0, 120, 255, .18), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(0, 170, 230, .16), transparent 55%),
    radial-gradient(800px 500px at 110% 90%, rgba(99, 102, 241, .16), transparent 55%),
    var(--kx-bg-deep);
}
.kx-auth__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(3px 3px at 12% 22%, rgba(var(--kx-primary-rgb), .5), transparent 100%),
    radial-gradient(4px 4px at 25% 68%, rgba(8, 145, 178, .45), transparent 100%),
    radial-gradient(2px 2px at 38% 35%, rgba(79, 70, 229, .55), transparent 100%),
    radial-gradient(3px 3px at 52% 15%, rgba(2, 132, 199, .5), transparent 100%),
    radial-gradient(5px 5px at 62% 55%, rgba(var(--kx-primary-rgb), .4), transparent 100%),
    radial-gradient(2px 2px at 75% 30%, rgba(79, 70, 229, .5), transparent 100%),
    radial-gradient(3px 3px at 84% 72%, rgba(var(--kx-primary-rgb), .45), transparent 100%),
    radial-gradient(4px 4px at 92% 18%, rgba(8, 145, 178, .5), transparent 100%),
    radial-gradient(5px 5px at 8% 82%, rgba(79, 70, 229, .4), transparent 100%),
    radial-gradient(2px 2px at 18% 48%, rgba(2, 132, 199, .55), transparent 100%),
    radial-gradient(3px 3px at 30% 88%, rgba(var(--kx-primary-rgb), .5), transparent 100%),
    radial-gradient(2px 2px at 45% 75%, rgba(79, 70, 229, .5), transparent 100%),
    radial-gradient(4px 4px at 55% 42%, rgba(var(--kx-primary-rgb), .4), transparent 100%),
    radial-gradient(3px 3px at 68% 82%, rgba(8, 145, 178, .5), transparent 100%),
    radial-gradient(5px 5px at 78% 48%, rgba(79, 70, 229, .4), transparent 100%),
    radial-gradient(2px 2px at 88% 90%, rgba(2, 132, 199, .55), transparent 100%),
    radial-gradient(3px 3px at 4% 55%, rgba(var(--kx-primary-rgb), .45), transparent 100%),
    radial-gradient(4px 4px at 96% 40%, rgba(79, 70, 229, .5), transparent 100%),
    radial-gradient(2px 2px at 42% 5%, rgba(8, 145, 178, .55), transparent 100%),
    radial-gradient(3px 3px at 70% 95%, rgba(var(--kx-primary-rgb), .45), transparent 100%);
  animation: kxParticleDrift 11s ease-in-out infinite alternate;
}
@keyframes kxParticleDrift {
  0% { transform: translateY(0); opacity: .8; }
  100% { transform: translateY(-22px); opacity: 1; }
}
.kx-auth__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90, 140, 240, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 140, 240, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}

/* 漂浮光斑（DOM 顺序在薄纱之前，形成柔和色晕） */
.kx-auth__blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .26;
  z-index: 0;
  animation: kxBlobFloat 14s ease-in-out infinite alternate;
}
.kx-auth__blob.is-b1 { width: 420px; height: 420px; left: 6%; top: 8%; background: var(--kx-primary); }
.kx-auth__blob.is-b2 { width: 360px; height: 360px; right: 8%; bottom: 4%; background: #06b6d4; animation-delay: -5s; }
.kx-auth__blob.is-b3 { width: 280px; height: 280px; right: 30%; top: 2%; background: #6366f1; animation-delay: -9s; }
@keyframes kxBlobFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 30px) scale(1.15); }
}

/* 薄纱：压低背景对比度，保证卡片与文字清晰 */
.kx-auth__veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(233, 238, 247, .4), rgba(233, 238, 247, .62));
}

/* ---------- 左右分栏 ---------- */
.kx-auth__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(440px, .85fr);
}

/* 左侧品牌区 */
.kx-auth__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 60px;
}
.kx-auth__panel-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.kx-auth__panel-mid { position: relative; z-index: 1; }
.kx-auth__panel-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
  letter-spacing: .5px;
}
/* 品牌标记：OEM 后放的是**品牌自己的 Logo**（不再是固定图标），
   所以底改成浅色 —— 品牌图多为深色，压在渐变蓝底上会看不清 */
.kx-auth__brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--kx-primary-200);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(var(--kx-primary-rgb), .22);
  flex: none;
  overflow: hidden;
}
.kx-auth__brand-mark .kx-icon { color: var(--kx-primary); }
.kx-auth__brand-mark-img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.kx-auth__brand-name { font-size: 19px; font-weight: 700; letter-spacing: 3px; color: #101b33; }
.kx-auth__brand-sub { font-size: 10px; color: #5b6b8f; letter-spacing: 4px; margin-top: 4px; }
.kx-auth__panel-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 2px;
  background: linear-gradient(120deg, #0b1526 20%, var(--kx-primary-hover) 60%, #0e7490);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kx-auth__panel-desc { margin-top: 18px; font-size: 15px; color: #33446a; line-height: 2; max-width: 460px; }
.kx-auth__feats { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
.kx-auth__feat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(37, 74, 138, .16);
  box-shadow: 0 4px 16px rgba(31, 60, 120, .06);
  backdrop-filter: blur(8px);
  transition: all .25s;
}
.kx-auth__feat:hover { background: rgba(255, 255, 255, .85); border-color: rgba(var(--kx-primary-rgb), .4); transform: translateX(4px); }
.kx-auth__feat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(var(--kx-primary-rgb), .12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kx-auth__feat-icon .kx-icon { color: var(--kx-primary); }
.kx-auth__feat b { font-size: 14px; display: block; margin-bottom: 4px; color: #101b33; font-weight: 700; }
.kx-auth__feat span { font-size: 12px; color: #4b5c80; line-height: 1.7; }

/* ---------- 右侧登录卡 ---------- */
.kx-auth__side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
}
.kx-auth__card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 18px;
  padding: 40px 42px;
  box-shadow: 0 20px 60px rgba(31, 60, 120, .2), 0 0 0 1px rgba(100, 116, 139, .28);
  position: relative;
  animation: kxAuthFloat .7s ease;
}
.kx-auth__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 42px;
  right: 42px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--kx-accent), #6366f1, transparent);
  border-radius: 999px;
}
@keyframes kxAuthFloat {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.kx-auth__card-head { margin-bottom: 26px; }
.kx-auth__card-head h2 { font-size: 23px; font-weight: 700; letter-spacing: 1px; color: #0f172a; }
.kx-auth__sub { font-size: 13px; color: #6b7280; margin-top: 8px; }

/* Tab：账号登录 / 扫码登录 */
.kx-auth__tabs {
  display: flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 24px;
}
.kx-auth__tabs button {
  flex: 1;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s;
}
.kx-auth__tabs button.is-active {
  background: var(--kx-gradient-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--kx-primary-rgb), .3);
}

/* 登录角色分段（平台 / 代理 / 用户） */
.kx-auth__seg { display: flex; gap: 8px; }
.kx-auth__seg button {
  flex: 1;
  height: 36px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 13px;
  color: #64748b;
  transition: all .2s;
}
.kx-auth__seg button:hover { border-color: var(--kx-primary-200); color: var(--kx-primary-active); }
.kx-auth__seg button.is-active {
  border-color: var(--kx-primary);
  background: var(--kx-primary-50);
  color: var(--kx-primary-active);
  font-weight: 600;
}
.kx-auth__seg-hint { min-height: 16px; margin-top: 6px; font-size: 11px; color: #94a3b8; }

/* 输入字段 */
.kx-auth__field { margin-bottom: 16px; }
.kx-auth__field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #374151;
  margin-bottom: 7px;
}
.kx-auth__field-box { position: relative; display: flex; align-items: center; }
.kx-auth__field-box > .kx-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  z-index: 2;
  transition: color .2s;
}
.kx-auth__field-box:focus-within > .kx-icon { color: var(--kx-primary); }
.kx-auth__input {
  width: 100%;
  height: 48px;
  padding: 0 44px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #dbe2ec;
  color: #0f172a;
  font-size: 14px;
  outline: none;
  transition: all .2s;
}
.kx-auth__input::placeholder { color: #9aa7bd; }
.kx-auth__input:focus { border-color: var(--kx-primary-light); background: #fff; box-shadow: 0 0 0 3px var(--kx-primary-100); }
.kx-auth__eye {
  position: absolute;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kx-auth__eye:hover { color: #334155; }

/* 图形验证码 */
.kx-auth__captcha-row { display: flex; gap: 10px; }
.kx-auth__captcha-row .kx-auth__input { flex: 1; padding: 0 14px; letter-spacing: 6px; font-weight: 700; }
.kx-auth__captcha-box {
  width: 118px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  border: 1px dashed var(--kx-primary-200);
  background: var(--kx-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: all .2s;
}
.kx-auth__captcha-box:hover { border-color: var(--kx-primary-light); }
.kx-auth__captcha-img { width: 100%; height: 100%; object-fit: cover; }

/* 选项行（记住账号） */
.kx-auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 18px;
  font-size: 12px;
  color: #374151;
}
.kx-auth__options label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.kx-auth__options input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: all .2s;
}
.kx-auth__options input[type="checkbox"]:checked { background: var(--kx-gradient-primary); border-color: transparent; }
/* 勾选标记用纯 CSS 绘制，避免依赖图标字体 */
.kx-auth__options input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 主按钮 */
.kx-auth__submit {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 15px;
  letter-spacing: 5px;
  background: var(--kx-gradient-primary);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(var(--kx-primary-rgb), .35);
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.kx-auth__submit .kx-icon { color: #fff; }
.kx-auth__submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .5s;
}
.kx-auth__submit:hover::after { left: 120%; }
.kx-auth__submit:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(var(--kx-primary-rgb), .45); }
.kx-auth__submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* 错误提示条 */
.kx-auth__error {
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(251, 113, 133, .08);
  border: 1px solid rgba(251, 113, 133, .28);
  color: #dc2626;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.kx-auth__error.is-show { display: flex; animation: kxAuthShake .4s; }
.kx-auth__error .kx-icon { color: #dc2626; flex: none; }
@keyframes kxAuthShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* 分隔线 + 其他登录方式 */
.kx-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  font-size: 11px;
  color: #94a3b8;
}
.kx-auth__divider::before,
.kx-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.kx-auth__oauth-row { display: flex; justify-content: center; gap: 14px; }
.kx-auth__oauth {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.kx-auth__oauth .kx-icon { color: inherit; }
.kx-auth__oauth:hover { border-color: var(--kx-primary-light); color: var(--kx-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(var(--kx-primary-rgb), .18); }
.kx-auth__oauth.is-wechat .kx-icon { color: #07c160; }

/* 底部说明 */
.kx-auth__switch { text-align: center; margin-top: 22px; font-size: 13px; color: #6b7280; }
.kx-auth__switch.is-terms { margin-top: 8px; font-size: 11px; color: #94a3b8; }

/* ---------- 扫码登录 ---------- */
.kx-auth__scan { display: none; text-align: center; padding: 8px 0; }
.kx-auth__scan.is-show { display: block; }
.kx-auth__qr {
  width: 200px;
  height: 200px;
  margin: 8px auto 16px;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .18), 0 0 0 1px rgba(148, 163, 184, .2);
  position: relative;
  animation: kxAuthFloat .5s ease;
}
.kx-auth__qr-img { width: 100%; height: 100%; border-radius: 8px; object-fit: contain; display: none; }
.kx-auth__qr-img.is-show { display: block; }
.kx-auth__qr-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  font-size: 12px;
  color: #64748b;
  line-height: 1.7;
  text-align: center;
  cursor: pointer;
}
.kx-auth__qr-state.is-hide { display: none; }
.kx-auth__qr-state .kx-icon { color: #94a3b8; }
.kx-auth__scan-tip { font-size: 12px; color: #6b7280; line-height: 1.8; }
.kx-auth__scan-tip strong { color: #0f172a; }
.kx-auth__scan-actions { margin-top: 14px; display: flex; justify-content: center; gap: 10px; }
.kx-auth__ghost {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .2s;
}
.kx-auth__ghost:hover { border-color: var(--kx-primary-light); color: var(--kx-primary); }

/* 账号表单容器（默认展示） */
.kx-auth__form { display: block; }
.kx-auth__form.is-hide { display: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .kx-auth__grid { grid-template-columns: 1fr; }
  .kx-auth__panel { display: none; }
  .kx-auth__side { padding: 24px; }
  .kx-auth__card { padding: 30px 26px; }
}

/* ============================================================================
   2. 工作台（版式对齐参考项目「创想工作台」的工作台页）
   结构：页头 → 欢迎横幅 → 指标卡 4 张 → 趋势 / 设备分布 → 排行 / 预警 + 公告
   说明：卡片 / 统计卡 / 表格 / 时间线 / 胶囊 / 进度条复用 components.css 既有类名，
         仅本页私有的排布与装饰用 kx-dash__ 前缀写在这里
   ========================================================================== */
.kx-dash__card { display: flex; flex-direction: column; }
.kx-dash__body { flex: 1; min-height: 0; }
.kx-card--flush-body .kx-card__body { padding: 0; }

/* ---------- 页头：40×40 主色浅底图标块 + 22px 标题 + 缩进对齐的副标题 ---------- */
.kx-dash__head { align-items: center; }
.kx-dash__head .kx-page-head__title {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  font-size: var(--kx-fs-3xl);
  font-weight: var(--kx-fw-bold);
  letter-spacing: 1px;
}
.kx-dash__head-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kx-radius-lg);
  background: var(--kx-primary-soft);
  border: 1px solid var(--kx-primary-border);
  color: var(--kx-primary);
  font-size: 17px;
}
/* 副标题缩进到图标右侧（图标 40px + 间距 12px） */
.kx-dash__head .kx-page-head__desc { padding-left: 52px; font-size: var(--kx-fs-sm); }

/* ---------- 欢迎横幅（参考 .welcome-banner + .kpi-card 的浅色渐变底） ---------- */
.kx-dash__banner {
  background: linear-gradient(110deg, rgba(var(--kx-primary-rgb), .14), rgba(var(--kx-primary-rgb), .05));
  border-color: var(--kx-primary-border);
}
.kx-dash__banner-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-7);
  flex-wrap: wrap;
  padding: var(--kx-sp-7) var(--kx-sp-8);
}
.kx-dash__banner-main { flex: 1; min-width: 260px; }
.kx-dash__banner-hello { font-size: var(--kx-fs-sm); color: var(--kx-text-2); letter-spacing: 2px; }
.kx-dash__banner-title {
  margin: var(--kx-sp-2) 0 6px;
  font-size: var(--kx-fs-4xl);
  font-weight: var(--kx-fw-bold);
  color: var(--kx-text);
  letter-spacing: 1px;
}
.kx-dash__banner-sub { font-size: var(--kx-fs-sm); color: var(--kx-text-3); line-height: var(--kx-lh); }
/* 右侧关键数字：与参考项目横幅里的 hero 数字同规格（深色大数字 + 灰色小标签） */
.kx-dash__banner-stats { display: flex; align-items: center; gap: var(--kx-sp-6); flex-wrap: wrap; }
.kx-dash__banner-stat { min-width: 104px; }
.kx-dash__banner-stat-value {
  font-size: var(--kx-fs-3xl);
  font-weight: var(--kx-fw-bold);
  color: var(--kx-text);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.kx-dash__banner-stat-label { margin-top: 6px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }

/* ---------- KPI 指标卡 ----------
   卡片本体（玻璃底 / 描边 / 悬停）与图标色调由 components.css 的
   .kx-stat + .kx-stat--{blue|violet|cyan|green} 提供；此处按参考项目 stat-card 的
   规格校准尺寸（图标 44×44、标签 12px、数值 26px 深色），并补上右上角的装饰光斑 */
.kx-dash__metrics .kx-stat::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--kx-primary-rgb), .14), transparent 70%);
  pointer-events: none;
}
.kx-dash__metrics .kx-stat__icon { width: 44px; height: 44px; font-size: 20px; }
.kx-dash__metrics .kx-stat__label { font-size: var(--kx-fs-xs); }
.kx-dash__metrics .kx-stat__value { font-size: var(--kx-fs-4xl); font-weight: var(--kx-fw-bold); }
.kx-dash__metrics .kx-stat__foot { font-size: var(--kx-fs-2xs); }

/* 加载骨架 */
.kx-dash__skeleton { display: flex; flex-direction: column; gap: var(--kx-sp-3); padding: var(--kx-sp-2) 0; }

/* 图表容器：趋势 300px、环形 220px */
.kx-dash__chart { height: 300px; width: 100%; }
.kx-dash__chart--pie { height: 220px; }
.kx-dash__chart.is-loading { display: flex; align-items: center; }
.kx-dash__chart .kx-skeleton { width: 100%; }

/* 第二行右列：异常预警 + 系统公告上下叠放 */
.kx-dash__stack { display: flex; flex-direction: column; gap: var(--kx-sp-4); min-width: 0; }

/* 排行榜表格卡：表格撑满卡片 */
.kx-dash__table { min-height: 120px; }
/* 排名徽标：浅色底 + 深色字，前三名用不同色系区分（顶层不用渐变与彩色投影） */
.kx-dash__table .kx-rank { background: var(--kx-surface-3); color: var(--kx-text-2); box-shadow: none; }
.kx-dash__table .kx-rank--1 { background: var(--kx-primary-soft); color: var(--kx-primary-dark); }
.kx-dash__table .kx-rank--2 { background: var(--kx-cyan-soft); color: var(--kx-cyan-text); }
.kx-dash__table .kx-rank--3 { background: var(--kx-violet-soft); color: var(--kx-violet-text); }

/* 预警 / 公告列表容器（参考项目 .timeline：左侧渐变竖线 + 光晕圆点） */
.kx-dash__list { display: flex; flex-direction: column; gap: var(--kx-sp-3); min-height: 120px; }
.kx-dash__list .kx-timeline { padding-top: var(--kx-sp-1); }
.kx-dash__list .kx-timeline__item::before {
  background: linear-gradient(180deg, rgba(var(--kx-primary-rgb), .5), rgba(var(--kx-accent-rgb), .18));
}
.kx-dash__list .kx-timeline__dot { box-shadow: 0 0 0 3px var(--kx-primary-soft); }
/* 组件只内置了 accent / info / success / danger 四种圆点色，工作台的「警告」等级需要琥珀色 */
.kx-dash__list .kx-timeline__dot--warning { background: var(--kx-warning); }
.kx-dash__timeline-head { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 0; }
.kx-dash__timeline-head .kx-timeline__title { flex: 1; min-width: 0; }
.kx-dash__timeline-count {
  font-size: var(--kx-fs-lg);
  font-weight: var(--kx-fw-bold);
  color: var(--kx-text);
  font-variant-numeric: tabular-nums;
}

/* 时间范围切换（参考 .seg：胶囊容器 + 主色渐变选中项） */
.kx-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--kx-radius);
  background: rgba(var(--kx-overlay-rgb), .05);
  border: 1px solid var(--kx-border);
}
.kx-segmented__item {
  height: 30px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-segmented__item:hover { color: var(--kx-primary); }
.kx-segmented__item.is-active {
  background: var(--kx-gradient-primary);
  color: #fff;
  font-weight: var(--kx-fw-semibold);
  box-shadow: var(--kx-shadow-primary);
}

/* 环形图图例 */
.kx-legend { display: flex; flex-direction: column; gap: var(--kx-sp-2); margin-top: var(--kx-sp-3); }
.kx-legend__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--kx-sp-2);
  border-bottom: 1px dashed var(--kx-border-2);
}
.kx-legend__rate { font-size: var(--kx-fs-xl); font-weight: 700; color: var(--kx-primary); font-variant-numeric: tabular-nums; }
.kx-legend__item { display: flex; align-items: center; gap: var(--kx-sp-2); font-size: var(--kx-fs-sm); color: var(--kx-text-2); }
.kx-legend__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kx-legend__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-legend__value { font-weight: 600; color: var(--kx-text); font-variant-numeric: tabular-nums; }
.kx-legend__percent { width: 52px; text-align: right; color: var(--kx-text-3); font-size: var(--kx-fs-xs); font-variant-numeric: tabular-nums; }

/* 排行序号 */
.kx-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
}
/* 名次徽标：AntD 风「浅底 + 同色系深字」，前三名用预设色区分 */
.kx-rank--1 { background: var(--kx-primary-soft); color: var(--kx-primary); }
.kx-rank--2 { background: var(--kx-c-cyan-soft); color: var(--kx-c-cyan-deep); }
.kx-rank--3 { background: var(--kx-c-orange-soft); color: var(--kx-c-orange-deep); }

/* 进度条单元格 */
.kx-progress-cell { display: flex; align-items: center; gap: var(--kx-sp-2); }
.kx-progress-cell .kx-progress { flex: 1; min-width: 46px; }
.kx-progress-cell__text { font-size: var(--kx-fs-xs); color: var(--kx-text-2); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }

/* 异常预警 */
.kx-alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-alert:hover { transform: translateX(3px); box-shadow: var(--kx-shadow-sm); background: var(--kx-surface); }
.kx-alert__bar {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.kx-alert--danger .kx-alert__bar { background: var(--kx-danger); }
.kx-alert--warning .kx-alert__bar { background: var(--kx-warning); }
.kx-alert--info .kx-alert__bar { background: var(--kx-info); }
.kx-alert__main { flex: 1; min-width: 0; }
.kx-alert__title { display: flex; align-items: center; gap: var(--kx-sp-2); font-size: var(--kx-fs); color: var(--kx-text); font-weight: 500; }
.kx-alert__count { font-size: var(--kx-fs-lg); font-weight: 700; color: var(--kx-text); font-variant-numeric: tabular-nums; }
.kx-alert--danger .kx-alert__count { color: var(--kx-danger); }
.kx-alert--warning .kx-alert__count { color: var(--kx-warning); }
.kx-alert__tip { margin-top: 2px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.6; }

/* 顶部栏扩展：个人资料 / 公告列表 */
.kx-profile { display: flex; flex-direction: column; gap: var(--kx-sp-4); }
.kx-profile__head { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-profile__name { font-size: var(--kx-fs-lg); font-weight: 600; }
.kx-profile__meta { font-size: var(--kx-fs-xs); color: var(--kx-text-3); margin-top: 2px; }
.kx-profile__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
.kx-profile__cell { display: flex; flex-direction: column; gap: 3px; font-size: var(--kx-fs-sm); }
.kx-notice-list { min-height: 80px; }

@media (max-width: 1440px) {
  .kx-dash__chart { height: 280px; }
  .kx-dash__chart--pie { height: 210px; }
}

/* 窄屏：指标卡 2 栏，图表行与排行行塌成单列 */
@media (max-width: 1200px) {
  .kx-dash__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-dash__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .kx-dash__metrics { grid-template-columns: minmax(0, 1fr); }
  .kx-dash__chart { height: 240px; }
  .kx-dash__chart--pie { height: 190px; }
  .kx-dash__banner-body { padding: var(--kx-sp-6); }
  .kx-dash__banner-main { min-width: 0; }
  .kx-profile__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   3. 官网落地页
   ========================================================================== */
.kx-landing {
  background: var(--kx-surface);
  color: var(--kx-text);
  overflow-x: hidden;
}
.kx-landing__container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--kx-sp-6);
}

/* 导航 */
.kx-landing__nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--kx-border-2);
}
.kx-landing__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-5);
  height: 64px;
}
.kx-landing__brand { display: flex; align-items: center; gap: var(--kx-sp-2); }
.kx-landing__brand img { width: 32px; height: 32px; }
.kx-landing__brand-name {
  font-size: var(--kx-fs-xl);
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--kx-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kx-landing__links { display: flex; align-items: center; gap: var(--kx-sp-6); }
.kx-landing__link {
  font-size: var(--kx-fs);
  color: var(--kx-text-2);
  transition: color var(--kx-dur) var(--kx-ease);
  position: relative;
}
.kx-landing__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--kx-gradient-primary);
  transform: scaleX(0);
  transition: transform var(--kx-dur) var(--kx-ease);
}
.kx-landing__link:hover { color: var(--kx-primary); }
.kx-landing__link:hover::after { transform: scaleX(1); }

/* Hero */
.kx-landing__hero {
  position: relative;
  padding: var(--kx-sp-9) 0 var(--kx-sp-8);
  background: var(--kx-gradient-deep);
  color: #fff;
  overflow: hidden;
}
.kx-landing__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--kx-sp-8);
  align-items: center;
}
.kx-landing__hero-title {
  font-size: 44px;
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: 1px;
}
.kx-landing__hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--kx-accent-light) 0%, var(--kx-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kx-landing__hero-desc {
  margin-top: var(--kx-sp-5);
  font-size: var(--kx-fs-lg);
  line-height: 1.85;
  color: rgba(255, 255, 255, .95);
  max-width: 520px;
}
.kx-landing__hero-actions { display: flex; align-items: center; gap: var(--kx-sp-3); margin-top: var(--kx-sp-7); flex-wrap: wrap; }
.kx-landing__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kx-sp-2);
  height: 48px;
  padding: 0 var(--kx-sp-6);
  border-radius: var(--kx-radius-full);
  font-size: var(--kx-fs-md);
  font-weight: 600;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-landing__btn--primary {
  background: #fff;
  color: var(--kx-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.kx-landing__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .28); color: var(--kx-primary-dark); }
.kx-landing__btn--ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .32);
}
.kx-landing__btn--ghost:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); color: #fff; }
.kx-landing__hero-badges {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-5);
  margin-top: var(--kx-sp-7);
  flex-wrap: wrap;
  font-size: var(--kx-fs-sm);
  color: rgba(255, 255, 255, .93);
}
.kx-landing__hero-badge { display: inline-flex; align-items: center; gap: 6px; }
.kx-landing__hero-badge .kx-icon { color: var(--kx-accent-light); }

/* Hero 右侧抽象产品面板 */
.kx-panel {
  position: relative;
  height: 340px;
  border-radius: var(--kx-radius-xl);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
  overflow: hidden;
  padding: var(--kx-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
}
.kx-panel__bar { display: flex; align-items: center; gap: 6px; }
.kx-panel__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .34); }
.kx-panel__bar i:first-child { background: rgba(127, 232, 255, .9); }
.kx-panel__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kx-sp-2); }
.kx-panel__tile {
  padding: 10px;
  border-radius: var(--kx-radius-sm);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.kx-panel__tile-label { font-size: 11px; color: #fff; }
.kx-panel__tile-value { font-size: var(--kx-fs-xl); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kx-panel__chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
}
.kx-panel__bar-item {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--kx-accent-light) 0%, rgba(127, 232, 255, .22) 100%);
  animation: kx-bar-rise .9s var(--kx-ease) both;
}
.kx-panel__rows { display: flex; flex-direction: column; gap: 6px; }
.kx-panel__row {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 7px 10px;
  border-radius: var(--kx-radius-sm);
  background: rgba(255, 255, 255, .1);
  font-size: var(--kx-fs-xs);
  color: #fff;
}
.kx-panel__dot { width: 6px; height: 6px; border-radius: 50%; background: #00a63e; box-shadow: 0 0 8px rgba(0, 166, 62, .9); }
.kx-panel__row span:nth-child(2) { flex: 1; }
.kx-panel__row b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

@keyframes kx-bar-rise {
  from { height: 6px; opacity: 0; }
}

/* 通用区块标题 */
.kx-landing__section { padding: var(--kx-sp-9) 0; }
.kx-landing__section--alt { background: var(--kx-surface-2); }
.kx-landing__section-head { text-align: center; max-width: 640px; margin: 0 auto var(--kx-sp-8); }
.kx-landing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-primary-50);
  color: var(--kx-primary);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  letter-spacing: 1px;
}
.kx-landing__title { font-size: var(--kx-fs-3xl); font-weight: 700; margin-top: var(--kx-sp-4); letter-spacing: -.5px; }
.kx-landing__desc { margin-top: var(--kx-sp-3); font-size: var(--kx-fs-md); color: var(--kx-text-3); line-height: 1.8; }

/* 特性卡片 */
.kx-landing__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kx-sp-5); }
.kx-feature {
  padding: var(--kx-sp-6);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface);
  border: 1px solid var(--kx-border-2);
  box-shadow: var(--kx-shadow-sm);
  transition: transform var(--kx-dur) var(--kx-ease), box-shadow var(--kx-dur) var(--kx-ease);
}
.kx-feature:hover { transform: translateY(-4px); box-shadow: var(--kx-shadow-lg); }
.kx-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--kx-radius);
  background: var(--kx-gradient-primary);
  color: #fff;
  box-shadow: var(--kx-shadow-primary);
  margin-bottom: var(--kx-sp-4);
}
/* 强调色特性图标：紫色渐变底上必须用白色图标，深青色会看不清（对比度不足） */
.kx-feature__icon--accent { background: var(--kx-gradient-accent); box-shadow: var(--kx-shadow-accent); color: #fff; }
.kx-feature__title { font-size: var(--kx-fs-lg); font-weight: 600; }
.kx-feature__desc { margin-top: var(--kx-sp-2); font-size: var(--kx-fs-sm); color: var(--kx-text-3); line-height: 1.8; }

/* 数据区 */
.kx-landing__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kx-sp-5);
}
.kx-landing__stat {
  text-align: center;
  padding: var(--kx-sp-6) var(--kx-sp-4);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-gradient-deep);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .06);
}
.kx-landing__stat-value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.5px;
  background: linear-gradient(135deg, #ffffff 20%, var(--kx-accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.kx-landing__stat-value small { font-size: var(--kx-fs-lg); margin-left: 2px; }
.kx-landing__stat-label { margin-top: var(--kx-sp-2); font-size: var(--kx-fs-sm); color: rgba(255, 255, 255, .9); }

/* CTA */
.kx-landing__cta {
  position: relative;
  padding: var(--kx-sp-8) var(--kx-sp-7);
  border-radius: var(--kx-radius-xl);
  background: var(--kx-gradient-primary);
  color: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--kx-shadow-lg);
}
.kx-landing__cta-title { font-size: var(--kx-fs-3xl); font-weight: 700; }
.kx-landing__cta-desc { margin-top: var(--kx-sp-3); color: rgba(255, 255, 255, .95); font-size: var(--kx-fs-md); }
.kx-landing__cta-actions { margin-top: var(--kx-sp-6); display: flex; justify-content: center; gap: var(--kx-sp-3); flex-wrap: wrap; }

/* 页脚 */
.kx-landing__footer {
  padding: var(--kx-sp-7) 0 var(--kx-sp-6);
  background: #14161f;
  color: rgba(255, 255, 255, .6);
  font-size: var(--kx-fs-sm);
}
.kx-landing__footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--kx-sp-6);
  padding-bottom: var(--kx-sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kx-landing__footer h4 { color: #fff; font-size: var(--kx-fs); margin-bottom: var(--kx-sp-3); font-weight: 600; }
.kx-landing__footer li { margin-bottom: var(--kx-sp-2); }
.kx-landing__footer a { color: rgba(255, 255, 255, .6); }
.kx-landing__footer a:hover { color: var(--kx-accent-light); }
.kx-landing__footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
  padding-top: var(--kx-sp-4);
  font-size: var(--kx-fs-xs);
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 1024px) {
  .kx-landing__hero-grid { grid-template-columns: 1fr; }
  .kx-landing__hero-title { font-size: 34px; }
  .kx-landing__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-landing__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-landing__footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-landing__links { display: none; }
}

@media (max-width: 640px) {
  .kx-landing__container { padding: 0 var(--kx-sp-4); }
  .kx-landing__hero-title { font-size: 28px; }
  .kx-landing__features,
  .kx-landing__stats { grid-template-columns: 1fr; }
  .kx-landing__section { padding: var(--kx-sp-8) 0; }
  .kx-landing__title { font-size: var(--kx-fs-2xl); }
  .kx-landing__footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   4. 业务管理页面通用骨架（设备 / 资源 / 数据中心共用，勿在此硬编码色值）
   命名前缀 kx-bp__（business page），页面私有样式请使用 kx-页面名__ 前缀
   ========================================================================== */

/* ---------------------------------------------------------------- 筛选区 */
/* 设计口径（第 18 批重构，全站 28 个页面共用这一套）：
   1) 网格化：所有筛选项等宽、自动铺满一行，换行后仍严格成列
      —— 原来控件分 216 / 168 / 300px 三档，同一行参差不齐；
   2) 标签定宽右对齐：宽度不再随文案长度变化
      —— 原来 24 / 36 / 48px 三档，导致同一行控件的左边缘相差 12~24px（看着像错位）；
   3) 控件撑满所在格、高度统一 32px（与分页同档，比正文控件 38px 小一档）；
   4) 顶部对齐 + 标签行高与控件等高：个别项控件较高（可搜索下拉 = 搜索框 + 下拉两行）时，
      不会把同一行的其它项挤成「垂直居中错位」；
   5) 操作按钮贴右并与第一行对齐，不再随换行跑到下一行或浮在两行中间。 */
.kx-bp__filter-collapse {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--kx-sp-3) var(--kx-sp-4);
}
/* 每格最小 240px：窄容器（如「用户管理」左侧有部门树，筛选区只有 868px）也能排 3 列，
   5 个条件正好两行；宽容器自动增列（1208px → 4 列），条件多的页面整体少一行 */
.kx-bp__filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
  gap: var(--kx-sp-2) var(--kx-sp-4);
  /* flex-basis 必须为 0：否则按「最大内容宽」占位，会把操作按钮挤到下一行 */
  flex: 1 1 0;
  min-width: 0;
}
/* 两列变体（早期为「标签在上 + 写死两列」）已统一到上面这一套网格：
   类名在页面代码里保留，但不再有特殊样式 —— 全站筛选区只有一套列宽基准，
   否则条件少的页面会出现「2 列 495px、输入框 419px」这种超宽格，看着空。 */
.kx-bp__filter-grid--2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.kx-bp__filter-item {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-2);
  min-width: 0;
}
/* 标签定宽右对齐：按最长 5 字标签（「目标关键字」≈60px）留 68px，超长省略
   定宽的意义是让同一行所有控件的左边缘落在同一条竖线上 */
.kx-bp__filter-label {
  flex: 0 0 auto;
  width: 68px;
  text-align: right;
  line-height: 32px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 控件撑满所在格（不再各自定宽） */
.kx-bp__filter-item > .kx-input,
.kx-bp__filter-item > .kx-select,
.kx-bp__filter-item > .kx-input-wrap,
.kx-bp__filter-item > .kx-row,
.kx-bp__filter-item > .kx-col { width: 100%; min-width: 0; }
/* 页面挂下拉的常见写法是「一个无 class 的包裹 div + ref 里 appendChild(select.el)」，
   这个 div 不在上面的名单里，不撑满就会按内容宽收缩 —— 同一行控件宽度会参差，
   日期区间那类多控件行还会顶破格子（实测溢出 44px）。 */
.kx-bp__filter-item > div:not([class]) { width: 100%; min-width: 0; }
/* 格子内嵌套的多控件行（日期区间 / 时间范围等）同样撑满并可压缩 */
.kx-bp__filter-item .kx-row { width: 100%; min-width: 0; }
.kx-bp__filter-item .kx-row > * { min-width: 0; }
.kx-bp__filter-item .kx-input,
.kx-bp__filter-item .kx-select,
.kx-bp__filter-item .kx-input-wrap { height: 32px; }
/* 日期区间等统计控件自带 min-width，会顶破网格，这里让它们服从格子宽度 */
.kx-bp__filter-item .kx-stat-date,
.kx-bp__filter-item .kx-stat-overview__daterange { min-width: 0; }
/* 可搜索下拉（下拉外挂一个搜索框）在筛选区里只保留下拉本身：
   那个搜索框会让 item 变成两行（72px），同一行就会出现高低不齐、还要为它跨两列 ——
   筛选区的下拉选项不多（角色 / 部门 / 用户等），原生下拉本就支持键入定位，去掉更整齐。
   弹窗表单里的可搜索下拉不受影响（本规则限定在筛选格内）。 */
.kx-bp__filter-item .kx-col > .kx-input { display: none; }
/* 分段按钮（时间范围等）同理跨两格：7 个按钮排不进一格（实测溢出 7px），
   并把自身 38px 收到 32px，与同一行的其它控件齐平 */
.kx-bp__filter-item:has(> .kx-segmented) { grid-column: span 2; }
.kx-bp__filter-item > .kx-segmented { width: 100%; min-width: 0; padding: 1px; }
.kx-bp__filter-item .kx-segmented__item { height: 28px; padding: 0 12px; }

.kx-bp__filter-collapse.is-collapsed { display: none; }
/* 全站筛选卡默认折叠：由 components/filter-collapse.js 统一注入「展开筛选」按钮并切换本类。
   折叠对象可能是整个卡片正文、折叠壳、筛选格，或「只装筛选」的裸 div —— 统一用 display:none 收起 */
.is-filter-collapsed { display: none; }
/* 操作按钮并入筛选格右侧、与第一行对齐（顶部对齐后不再出现「按钮浮在两行中间」） */
.kx-bp__filter-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kx-sp-2);
  margin-left: auto;
}
.kx-bp__filter-foot .kx-btn { height: 32px; }
.kx-bp__filter-foot .kx-btn--text { margin-right: 0; }

/* 筛选卡正文区收紧，避免筛选条上下各留一份 20px 空白
   两种结构都要覆盖：部分页面的筛选格直挂卡片正文（不套 .kx-bp__filter-collapse）
   （:has 不支持时自动退回原内边距，不影响布局） */
.kx-card__body:has(> .kx-bp__filter-collapse),
.kx-card__body:has(> .kx-bp__filter-grid) { padding: var(--kx-sp-3) var(--kx-sp-6); }

/* 统计页的自定义日期控件（默认隐藏，切到「自定义」才显示）：
   全局给一个最小宽度防塌缩；放进筛选格时由上面的 .kx-bp__filter-item .kx-stat-date 覆盖为 0 */
.kx-stat-date { min-width: 240px; }

/* ---------------------------------------------------------------- 工具栏 */
.kx-bp__toolbar {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
  padding: var(--kx-sp-4) var(--kx-sp-5);
  border-bottom: 1px solid var(--kx-border-2);
}
.kx-bp__toolbar-main { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-bp__selinfo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}
.kx-bp__selinfo b { color: var(--kx-primary); }
.kx-bp__selinfo .kx-icon { color: var(--kx-primary); }

/* ---------------------------------------------------------------- 作者选择（按作者清理评论历史） */
.kx-bp__author-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--kx-sp-3);
  max-height: 320px;
  overflow-y: auto;
}
.kx-bp__author-item {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: 8px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.kx-bp__author-item:hover { border-color: var(--kx-primary); background: var(--kx-surface-2); }
.kx-bp__author-item.is-active { border-color: var(--kx-primary); background: var(--kx-primary-light, var(--kx-surface-2)); }
.kx-bp__author-check { color: var(--kx-border); flex: none; }
.kx-bp__author-item.is-active .kx-bp__author-check { color: var(--kx-primary); }

/* ---------------------------------------------------------------- 表格卡片 */
.kx-bp__table-card .kx-card__body { padding: 0; }
.kx-bp__table-card .kx-table__footer { background: var(--kx-surface-2); }

/* ---------------------------------------------------------------- 操作列 */
/* 收紧图标按钮尺寸与间距：默认按钮（12px 内边距 + 图标）渲染宽度约 40px，
   5 个图标会超出 208px 列宽导致最后一个图标被裁掉，这里压缩到 28px 以内并去掉间距 */
.kx-bp__op { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0; padding: 0; }
.kx-bp__op .kx-btn { width: auto; min-width: 26px; height: 26px; padding: 0 6px; }
.kx-bp__op .kx-bp__opbtn { width: 26px; min-width: 26px; height: 26px; padding: 0; }
/* 「发布」独立按钮：带文字，与纯图标操作区分开，突出这是一次状态变更 */
.kx-bp__op .kx-bp__op-publish { gap: 4px; padding: 0 10px; margin: 0 2px; font-weight: 600; }
/* 操作按钮「图标 + 文字」：纯图标用户看不出能点啥 —— 字号与内边距都比普通按钮紧一档，
   一行 6 个操作才塞得进固定宽度的操作列 */
.kx-bp__op .kx-bp__op-text {
  gap: 4px;
  padding: 0 8px;
  font-size: var(--kx-fs-xs);
  font-weight: 500;
}

/* 设备列：别名在上（主标识）+ 编号在下（次要，等宽数字便于比对） */
.kx-dev-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kx-dev-cell__no {
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
/* 整格可点看详情（操作列不再放「详情」按钮）：手型 + hover 变主色，
   有权限才加这个类，没权限就是普通文本、连手型都不给 */
.kx-dev-cell--link { cursor: pointer; }
.kx-dev-cell--link:hover .kx-strong { color: var(--kx-primary); }
.kx-dev-cell--link:hover .kx-dev-cell__no { color: var(--kx-primary); }
.kx-bp__rowmenu { min-width: 152px; }

/* ---------------------------------------------------------------- 分组 / 卡片网格 */
.kx-bp__cards,
.kx-device-group__grid {
  display: grid;
  gap: var(--kx-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.kx-bp__cards.is-empty,
.kx-device-group__grid.is-empty { grid-template-columns: minmax(0, 1fr); }

.kx-bp__gcard {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-5);
}
.kx-bp__gcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--kx-shadow);
  border-color: var(--kx-primary-200);
}
.kx-bp__gcard-head { display: flex; align-items: center; gap: var(--kx-sp-3); min-width: 0; }
.kx-bp__gcard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-primary-50);
  color: var(--kx-primary);
}
.kx-bp__gcard-title { font-size: var(--kx-fs); font-weight: 600; color: var(--kx-text); }
.kx-bp__gcard-tools { display: flex; align-items: center; opacity: 0; transition: opacity var(--kx-dur) var(--kx-ease); }
.kx-bp__gcard:hover .kx-bp__gcard-tools { opacity: 1; }
.kx-bp__gcard-meta { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-bp__gcard-desc { font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.7; min-height: 34px; }

/* ---------------------------------------------------------------- 键值信息（抽屉详情） */
.kx-bp__detail { display: flex; flex-direction: column; }
.kx-bp__section + .kx-bp__section {
  margin-top: var(--kx-sp-5);
  padding-top: var(--kx-sp-5);
  border-top: 1px solid var(--kx-border-2);
}
.kx-bp__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--kx-sp-3);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-bp__section-title .kx-icon { color: var(--kx-primary); }
.kx-bp__kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-3) var(--kx-sp-5);
}
.kx-bp__kv-item { display: flex; gap: var(--kx-sp-2); min-width: 0; font-size: var(--kx-fs-sm); }
.kx-bp__kv-item--full { grid-column: 1 / -1; }
.kx-bp__kv-label { flex: none; min-width: 78px; color: var(--kx-text-3); }
.kx-bp__kv-value { color: var(--kx-text); word-break: break-all; }

/* ---------------------------------------------------------------- 状态与脉冲点 */
/* 间距用 margin 而不是容器的 gap：components.css 里「单元格只有一个 div」那条规则
   （`.kx-table__tbody .kx-table__cell > div:only-child:not(...)`）选择器比这里更具体，
   会把本容器从 inline-flex 压回 inline-block —— 一改 gap 就失效，圆点与胶囊贴死。 */
.kx-bp__status { display: inline-flex; align-items: center; }
.kx-bp__pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  margin-right: 6px;
  /* 容器被压成 inline-block 时靠它对齐中线（inline-flex 下无副作用） */
  vertical-align: middle;
  border-radius: 50%;
  background: var(--kx-success);
}
/* 呼吸环：必须「向外扩散 + 淡出到全透明」。旧写法只改透明度（1↔0.35），环永远挂在
   圆点外面，看起来就是状态里多出来的一个点（真机反馈的那条）。 */
.kx-bp__pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--kx-success);
  animation: kx-pulse 1.8s var(--kx-ease) infinite;
}

/* ---------------------------------------------------------------- 提示 / 导入 / 激活码 */
.kx-bp__hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius);
  background: var(--kx-primary-50);
  border: 1px dashed var(--kx-primary-200);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-primary-dark);
}
.kx-bp__hint .kx-icon { flex: none; margin-top: 2px; color: var(--kx-primary); }
.kx-bp__import { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-bp__import-tools { display: flex; align-items: center; gap: var(--kx-sp-2); }
.kx-bp__import-result { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-bp__import-summary { display: flex; align-items: center; gap: var(--kx-sp-2); }
.kx-bp__import-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  padding: var(--kx-sp-1);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
}
.kx-bp__import-row {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: 7px 10px;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface);
  border-left: 3px solid var(--kx-border);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
}
.kx-bp__import-row.is-ok { border-left-color: var(--kx-success); }
.kx-bp__import-row.is-fail { border-left-color: var(--kx-danger); }
.kx-bp__import-line { flex: none; color: var(--kx-text-3); font-size: var(--kx-fs-xs); }

.kx-bp__code-wrap { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-bp__code {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kx-sp-5);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-2);
  border: 1px dashed var(--kx-border);
}
.kx-bp__code-value {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-4xl);
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--kx-primary);
}

/* 激活码管理：表格里的码 + 生成结果清单 */
.kx-code-cell { display: inline-flex; align-items: center; gap: 2px; }
.kx-code-cell__value {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-md);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--kx-primary);
}
/* 可点击查看详情（激活码列表） */
.kx-code-cell__value--link { cursor: pointer; }
.kx-code-cell__value--link:hover { text-decoration: underline; }
.kx-code-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border);
}
.kx-code-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: var(--kx-radius-sm);
}
.kx-code-list__item:hover { background: var(--kx-surface); }

/* ---------------------------------------------------------------- 加载 / 列表行 / 指标 */
.kx-bp__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-7) 0;
  color: var(--kx-text-3);
  font-size: var(--kx-fs-sm);
}
.kx-bp__listrow {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  margin-bottom: var(--kx-sp-2);
}
.kx-bp__running {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 10px var(--kx-sp-3);
  margin-bottom: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-primary-50);
  font-size: var(--kx-fs-sm);
  color: var(--kx-primary-dark);
}
.kx-bp__metrics { display: flex; gap: var(--kx-sp-3); flex-wrap: wrap; margin-bottom: var(--kx-sp-4); }
.kx-bp__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 92px;
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
}
.kx-bp__metric-value { font-size: var(--kx-fs-xl); font-weight: 700; color: var(--kx-text); font-variant-numeric: tabular-nums; }
.kx-bp__metric-label { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-bp__metric--success .kx-bp__metric-value { color: var(--kx-success); }
.kx-bp__metric--danger .kx-bp__metric-value { color: var(--kx-danger); }
.kx-bp__metric--info .kx-bp__metric-value { color: var(--kx-info); }

/* 页面底部的分页脚（设备分组 / 账号分组 / 素材库）：间距与 .kx-pagination 口径保持一致 */
.kx-bp__pagefoot { display: flex; align-items: center; justify-content: flex-end; gap: var(--kx-sp-2); }
.kx-bp__batch-bind-form { margin-top: var(--kx-sp-3); }

/* ============================================================================
   5. 设备列表 / 设备分组
   ========================================================================== */
.kx-device-list__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 统计卡：图标占左列，标题 + 数量紧随其后（原先图标独占一行，卡片被撑得又高又空） */
.kx-device-list__stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--kx-sp-3);
  row-gap: var(--kx-sp-2);
  padding: var(--kx-sp-4) var(--kx-sp-5);
  cursor: pointer;
}
.kx-device-list__stat > .kx-stat__top { grid-column: 1; grid-row: 1; }
.kx-device-list__stat-main { grid-column: 2; grid-row: 1; min-width: 0; }
.kx-device-list__stat-title {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  min-width: 0;
}
/* 标题不需要图标卡时代的那点上边距 */
.kx-device-list__stat-title > .kx-stat__label { margin-top: 0; }
.kx-device-list__stat > .kx-stat__foot { grid-column: 1 / -1; grid-row: 2; }
.kx-device-list__stat.is-active {
  border-color: var(--kx-primary);
  box-shadow: 0 0 0 2px var(--kx-primary-100), var(--kx-shadow-sm);
}
.kx-device-list__table { min-height: 120px; }
.kx-device-group__list { display: block; }

/* ============================================================================
   7. 素材库
   ========================================================================== */
.kx-material__layout {
  display: grid;
  gap: var(--kx-sp-5);
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
}
.kx-material__aside .kx-card__body { padding: var(--kx-sp-3); }
.kx-material__groups { display: flex; flex-direction: column; gap: 2px; }
.kx-material__group { display: flex; align-items: center; border-radius: var(--kx-radius-sm); }
.kx-material__group-main {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--kx-radius-sm);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-material__group-main .kx-icon { flex: none; color: var(--kx-text-3); }
.kx-material__group-main:hover { background: var(--kx-primary-50); color: var(--kx-primary); }
.kx-material__group.is-active .kx-material__group-main {
  background: var(--kx-primary-100);
  color: var(--kx-primary-dark);
  font-weight: 600;
}
.kx-material__group.is-active .kx-material__group-main .kx-icon { color: var(--kx-primary); }
.kx-material__group-tools { display: none; align-items: center; }
.kx-material__group:hover .kx-material__group-tools { display: flex; }

.kx-material__grid {
  display: grid;
  gap: var(--kx-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}
.kx-material__grid.is-empty { grid-template-columns: minmax(0, 1fr); }
.kx-material__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  transition: box-shadow var(--kx-dur) var(--kx-ease), transform var(--kx-dur) var(--kx-ease);
}
.kx-material__card:hover { transform: translateY(-2px); box-shadow: var(--kx-shadow); border-color: var(--kx-primary-200); }
.kx-material__thumb {
  position: relative;
  height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--kx-surface-2);
}
.kx-material__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kx-material__thumb--text { align-items: flex-start; padding: var(--kx-sp-3); }
.kx-material__thumb--media { background: var(--kx-primary-50); }
.kx-material__thumb-icon { color: var(--kx-text-4); }
.kx-material__text {
  font-size: var(--kx-fs-xs);
  line-height: 1.75;
  color: var(--kx-text-2);
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.kx-material__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 7px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-text);
  color: var(--kx-surface);
  font-size: 11px;
}
.kx-material__actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow-sm);
  opacity: 0;
  transition: opacity var(--kx-dur) var(--kx-ease);
}
.kx-material__card:hover .kx-material__actions { opacity: 1; }
.kx-material__actions .kx-btn { width: 28px; height: 28px; padding: 0; justify-content: center; }
.kx-material__body { display: flex; flex-direction: column; gap: 6px; padding: var(--kx-sp-3); flex: 1; }
.kx-material__name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-material__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kx-material__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-2); margin-top: auto; }
.kx-material__table { min-height: 120px; }
.kx-material__upload { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-material__upload-preview {
  width: 132px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface-2);
}
.kx-material__upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.kx-material__upload-actions { display: flex; align-items: center; gap: var(--kx-sp-3); flex-wrap: wrap; }

/* ============================================================================
   8. 代理 IP 池
   ========================================================================== */
.kx-proxy__addr { font-family: var(--kx-font-mono); font-size: var(--kx-fs-sm); color: var(--kx-text); }
.kx-proxy__check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--kx-sp-1);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
}

/* ============================================================================
   9. 数据中心（总览 / 任务 / 设备 / 触达明细）
   ========================================================================== */
.kx-stat-overview__metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kx-stat-overview__chart { height: 300px; width: 100%; }
.kx-stat-overview__funnel { height: 268px; width: 100%; }
.kx-stat-overview__funnel-legend {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-5);
  flex-wrap: wrap;
  margin-top: var(--kx-sp-3);
  padding-top: var(--kx-sp-3);
  border-top: 1px dashed var(--kx-border-2);
}
.kx-stat-overview__funnel-rate { display: flex; align-items: center; gap: 6px; }
.kx-stat-overview__rank { min-height: 268px; }
.kx-stat-overview__daterange { min-width: 260px; }
.kx-stat-device__chart { height: 260px; width: 100%; }

/* ============================================================================
   10. 业务页面响应式
   ========================================================================== */
@media (max-width: 1440px) {
  .kx-stat-overview__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 筛选网格已改为 auto-fill 自适应列数，不再按断点写死列数（写死会与基础网格不一致） */
}

@media (max-width: 1200px) {
  .kx-device-list__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kx-material__layout { grid-template-columns: minmax(0, 1fr); }
  .kx-material__groups { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .kx-bp__filter-grid,
  .kx-bp__filter-grid--2 { grid-template-columns: minmax(0, 1fr); }
  /* 窄屏：每个筛选条件独占一行（标签仍在左侧，标签列收窄到 60px 给控件留空间） */
  .kx-bp__filter-item { width: 100%; }
  .kx-bp__filter-label { width: 60px; }
  .kx-bp__filter-item:has(> .kx-segmented) { grid-column: auto; }
  .kx-bp__filter-foot { width: 100%; margin-left: 0; }
  .kx-bp__kv { grid-template-columns: minmax(0, 1fr); }
  .kx-device-list__stats,
  .kx-stat-overview__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-stat-overview__chart { height: 240px; }
  .kx-bp__pagefoot { justify-content: center; }
}

/* ============================================================================
   11. 系统管理（用户 / 角色 / 部门 / 字典 / 区域 / 配置 / 公告 / 应用 / 日志）
   仅允许使用 CSS 变量，禁止硬编码色值
   ========================================================================== */

/* ---------------------------------------------------------------- 通用布局 */
.kx-sys__split {
  display: grid;
  gap: var(--kx-sp-5);
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
}
.kx-sys__aside {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--kx-topbar-h) - var(--kx-sp-8));
  overflow: hidden;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow-xs);
}
.kx-sys__aside-head {
  padding: var(--kx-sp-4) var(--kx-sp-4) var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border-2);
}
.kx-sys__aside-title {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  font-size: var(--kx-fs-md);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-sys__aside-title .kx-icon { color: var(--kx-primary); }
.kx-sys__aside-search { padding: var(--kx-sp-3) var(--kx-sp-4) 0; }
.kx-sys__aside-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--kx-sp-3) var(--kx-sp-4) var(--kx-sp-4);
}
.kx-sys__main { display: flex; flex-direction: column; gap: var(--kx-sp-5); min-width: 0; }
.kx-sys__tree { min-height: 60px; }
.kx-sys__mono { font-family: var(--kx-font-mono); font-size: var(--kx-fs-sm); }
.kx-sys__tags { display: flex; align-items: center; gap: var(--kx-sp-1); flex-wrap: wrap; }
.kx-sys__form-wrap { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

/* ---------------------------------------------------------------- 用户管理 */
.kx-sys__user { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 0; }

/* ---------------------------------------------------------------- 角色权限 */
.kx-sys__rolelist { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-sys__role {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  border: 1px solid transparent;
  background: var(--kx-surface-2);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-sys__role:hover { border-color: var(--kx-primary-200); background: var(--kx-primary-50); }
.kx-sys__role.is-active {
  border-color: var(--kx-primary);
  background: var(--kx-primary-100);
  box-shadow: 0 0 0 1px var(--kx-primary-200);
}
.kx-sys__role-top { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-sys__role-name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-sys__role-code { font-family: var(--kx-font-mono); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-sys__role-meta {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}
.kx-sys__role-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.kx-sys__perm-card { min-height: 320px; }
.kx-sys__perm-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding-bottom: var(--kx-sp-4);
  border-bottom: 1px dashed var(--kx-border-2);
}
.kx-sys__perm-tools { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-sys__perm-module { min-width: 190px; }
.kx-sys__perm-tree { max-height: 520px; overflow-y: auto; padding-top: var(--kx-sp-2); }

/* ---------------------------------------------------------------- 部门管理 */
.kx-sys__deptcard .kx-card__body { padding: var(--kx-sp-3) var(--kx-sp-5) var(--kx-sp-5); }
.kx-sys__depttable { min-height: 120px; overflow-x: auto; }
.kx-sys__tt-head,
.kx-sys__tt-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) 120px 140px 80px 92px 260px;
  align-items: center;
  gap: var(--kx-sp-2);
  min-width: 940px;
}
.kx-sys__tt-head {
  padding: 10px var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border-2);
  background: var(--kx-surface-2);
  border-radius: var(--kx-radius-sm) var(--kx-radius-sm) 0 0;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  font-weight: 500;
}
.kx-sys__tt-row {
  padding: 8px var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
  transition: background var(--kx-dur) var(--kx-ease);
}
.kx-sys__tt-row:hover { background: var(--kx-primary-50); }
.kx-sys__tt-cell { min-width: 0; display: flex; align-items: center; gap: var(--kx-sp-2); }
.kx-sys__tt-cell--name { gap: 2px; }
.kx-sys__tt-cell--op { justify-content: flex-end; }
.kx-sys__tt-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--kx-radius-sm);
  color: var(--kx-text-3);
  cursor: pointer;
  transition: transform var(--kx-dur) var(--kx-ease), color var(--kx-dur) var(--kx-ease);
}
.kx-sys__tt-arrow:hover { color: var(--kx-primary); background: var(--kx-primary-100); }
.kx-sys__tt-arrow.is-expanded { transform: rotate(90deg); }
.kx-sys__tt-arrow.is-empty { visibility: hidden; }
.kx-sys__tt-name { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 0; }

/* ---------------------------------------------------------------- 数据字典 */
.kx-sys__dictlist { display: flex; flex-direction: column; gap: 2px; }
.kx-sys__dictitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 8px 10px;
  border-radius: var(--kx-radius-sm);
  cursor: pointer;
  transition: background var(--kx-dur) var(--kx-ease);
}
.kx-sys__dictitem:hover { background: var(--kx-primary-50); }
.kx-sys__dictitem.is-active { background: var(--kx-primary-100); }
.kx-sys__dictitem-main { flex: 1; min-width: 0; }
.kx-sys__dictitem-name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-sys__dictitem.is-active .kx-sys__dictitem-name { color: var(--kx-primary-dark); }
.kx-sys__dictitem-code { font-family: var(--kx-font-mono); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-sys__dictitem-meta { display: flex; align-items: center; gap: 4px; flex: none; }
.kx-sys__dictitem-tools { display: none; align-items: center; position: absolute; right: 8px; padding: 2px; border-radius: var(--kx-radius-sm); background: var(--kx-surface); box-shadow: var(--kx-shadow-sm); }
.kx-sys__dictitem:hover .kx-sys__dictitem-tools { display: flex; }
.kx-sys__dictlabel { display: flex; align-items: center; gap: var(--kx-sp-2); }

/* ---------------------------------------------------------------- 城市区域 */
.kx-sys__treeview { display: flex; flex-direction: column; gap: var(--kx-sp-4); }
.kx-sys__hotbox {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-accent-50);
  border: 1px dashed var(--kx-accent);
}
.kx-sys__hotbox-title { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-accent-deep); }
.kx-sys__hot { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-sys__hotitem { display: inline-flex; align-items: center; gap: 3px; }
.kx-sys__area-tree {
  max-height: 560px;
  overflow-y: auto;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
}
.kx-sys__listview { min-height: 120px; }

/* ---------------------------------------------------------------- 系统配置 */
.kx-sys__nav { display: flex; flex-direction: column; gap: 2px; }
.kx-sys__navitem {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 9px 10px;
  border-radius: var(--kx-radius-sm);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-sys__navitem:hover { background: var(--kx-primary-50); color: var(--kx-primary); }
.kx-sys__navitem.is-active { background: var(--kx-primary-100); color: var(--kx-primary-dark); font-weight: 600; }
.kx-sys__navicon { display: inline-flex; flex: none; color: var(--kx-text-3); }
.kx-sys__navitem.is-active .kx-sys__navicon { color: var(--kx-primary); }
.kx-sys__navtext { flex: 1; min-width: 0; }
.kx-sys__config-card .kx-card__body { display: flex; flex-direction: column; gap: var(--kx-sp-5); }
.kx-sys__form { min-height: 120px; }
.kx-sys__aitest { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-sys__aitest-loading {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
}
.kx-sys__aitest-loading .kx-icon { color: var(--kx-primary); }
.kx-sys__aitest-box {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-border-2);
  border-left: 3px solid var(--kx-border);
  background: var(--kx-surface-2);
}
.kx-sys__aitest-box.is-ok { border-left-color: var(--kx-success); background: var(--kx-success-bg); }
.kx-sys__aitest-box.is-fail { border-left-color: var(--kx-danger); background: var(--kx-danger-bg); }
.kx-sys__aitest-head { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; font-size: var(--kx-fs-sm); }
.kx-sys__aitest-box.is-ok .kx-sys__aitest-head > .kx-icon { color: var(--kx-success); }
.kx-sys__aitest-box.is-fail .kx-sys__aitest-head > .kx-icon { color: var(--kx-danger); }
.kx-sys__aitest-row { display: flex; gap: var(--kx-sp-3); font-size: var(--kx-fs-sm); }
.kx-sys__aitest-label { flex: none; min-width: 68px; color: var(--kx-text-3); }
.kx-sys__aitest-value { flex: 1; min-width: 0; color: var(--kx-text); word-break: break-all; }

/* ---------------------------------------------------------------- 开放应用 */
.kx-sys__secretcell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kx-sys__masked { color: var(--kx-text-3); letter-spacing: 1px; }
.kx-sys__secret-wrap { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-sys__secret-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border-left: 3px solid var(--kx-warning);
  background: var(--kx-warning-bg);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text);
  line-height: 1.7;
}
.kx-sys__secret-alert .kx-icon { flex: none; margin-top: 2px; color: var(--kx-warning); }
.kx-sys__secret-row {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
}
.kx-sys__secret-label { flex: none; width: 88px; font-size: var(--kx-fs-sm); color: var(--kx-text-3); }
.kx-sys__secret-value {
  flex: 1;
  min-width: 0;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text);
  word-break: break-all;
  user-select: all;
}

/* ---------------------------------------------------------------- 操作日志 / 登录日志 */
.kx-sys__duration { display: inline-flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; }
.kx-sys__duration.is-slow { color: var(--kx-danger); font-weight: 600; }
.kx-sys__logdetail { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-sys__code {
  margin: 0;
  padding: var(--kx-sp-3);
  max-height: 260px;
  overflow: auto;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.kx-sys__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 危险色统计卡图标：与组件库保持一致的「浅底 + 同色图标」，不使用渐变与彩色光晕 */
.kx-stat__icon--danger { background: var(--kx-danger-soft); color: var(--kx-danger-text); }
.kx-sys__logincard .kx-table__row.is-fail > td { background: var(--kx-danger-bg); }
.kx-sys__logincard .kx-table__row.is-fail:hover > td { background: var(--kx-danger-bg); }

/* ---------------------------------------------------------------- 消息推送设置 */
.kx-notify__page { display: flex; flex-direction: column; gap: var(--kx-sp-4); }

/* 状态卡：四列信息条 */
.kx-notify__status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kx-sp-4); }
.kx-notify__status-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.kx-notify__status-label { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-notify__status-value { font-size: var(--kx-fs-sm); color: var(--kx-text); }
.kx-notify__status-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-4);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border-left: 3px solid var(--kx-warning);
  background: var(--kx-warning-bg);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text);
  line-height: 1.7;
}
.kx-notify__status-tip .kx-icon { flex: none; margin-top: 2px; color: var(--kx-warning); }

/* 消息清单：四列对齐的规则行（表头与数据行共用同一套栅格） */
.kx-notify__list { display: flex; flex-direction: column; }
.kx-notify__row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 132px 180px minmax(0, 1.3fr);
  align-items: center;
  gap: var(--kx-sp-4);
  padding: var(--kx-sp-3) 0;
  border-bottom: 1px solid var(--kx-border);
}
.kx-notify__row:last-child { border-bottom: 0; }
.kx-notify__row--head {
  padding-top: 0;
  padding-bottom: var(--kx-sp-2);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  color: var(--kx-text-3);
}
.kx-notify__meta { min-width: 0; }
.kx-notify__name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-notify__desc { margin-top: 2px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-notify__row.is-off .kx-notify__name { color: var(--kx-text-2); }
.kx-notify__cell { display: flex; align-items: center; min-width: 0; }
.kx-notify__swtext { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-notify__role { min-width: 0; }
.kx-notify__cell .kx-select,
.kx-notify__role .kx-select { width: 100%; }

@media (max-width: 1200px) {
  .kx-notify__status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* 窄屏：规则行折成两列（消息+开关 / 范围+角色），表头隐藏避免错位 */
  .kx-notify__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--kx-sp-3); }
  .kx-notify__row--head { display: none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1200px) {
  .kx-sys__split { grid-template-columns: minmax(0, 1fr); }
  .kx-sys__aside { position: static; max-height: none; }
  .kx-sys__aside-body { max-height: 320px; }
  .kx-sys__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .kx-sys__stats { grid-template-columns: minmax(0, 1fr); }
  .kx-sys__secret-row { flex-wrap: wrap; }
  .kx-sys__secret-label { width: auto; }
}



/* ============================================================================
   14. 功能工场（功能库 / 动作积木 / AI 工场 / 联调测试）
   命名前缀 kx-script__ / kx-block__ / kx-ai__
   ========================================================================== */

/* ---------------------------------------------------------------- 功能库 */
.kx-script__stats,
.kx-biz__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kx-script__table,
.kx-script-test__table,
.kx-task__table,
.kx-task__job-table,
.kx-task-log__table,
.kx-biz__table { min-height: 120px; }

.kx-script__code-text {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
  word-break: break-all;
}
.kx-script__code-text.is-current { color: var(--kx-primary); font-weight: 600; }

.kx-script-test__no {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}

/* 代码块 */
.kx-script__codeblock,
.kx-ai__codeblock {
  display: flex;
  flex-direction: column;
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface-2);
  overflow: hidden;
}
.kx-script__codeblock + .kx-script__codeblock,
.kx-ai__codeblock { margin-top: var(--kx-sp-4); }
.kx-script__codeblock-bar,
.kx-ai__codeblock-bar {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 6px var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  color: var(--kx-text-3);
}
.kx-script__codeblock-title,
.kx-ai__codeblock-title { font-size: var(--kx-fs-xs); color: var(--kx-text-2); }
.kx-script__code,
.kx-ai__code {
  margin: 0;
  padding: var(--kx-sp-4);
  max-height: 420px;
  overflow: auto;
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  line-height: 1.75;
  color: var(--kx-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.kx-script__code-empty,
.kx-ai__code-empty { padding: var(--kx-sp-5); text-align: center; font-size: var(--kx-fs-sm); color: var(--kx-text-3); }

/* 步骤时间线 */
.kx-script__tree,
.kx-ai__tree { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-script__tree--child,
.kx-ai__tree--child {
  margin: var(--kx-sp-2) 0 var(--kx-sp-2) var(--kx-sp-5);
  padding-left: var(--kx-sp-4);
  border-left: 2px dashed var(--kx-border);
}
.kx-script__node,
.kx-ai__node { display: flex; align-items: flex-start; gap: var(--kx-sp-3); }
.kx-script__node-index,
.kx-ai__node-index {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-border-2);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-xs);
  font-variant-numeric: tabular-nums;
}
.kx-script__node-index.is-risk-1,
.kx-ai__node.is-risk-1 .kx-ai__node-index { background: var(--kx-success-bg); color: #00891f; }
.kx-script__node-index.is-risk-2,
.kx-ai__node.is-risk-2 .kx-ai__node-index { background: var(--kx-warning-bg); color: #c15d00; }
.kx-script__node-index.is-risk-3,
.kx-ai__node.is-risk-3 .kx-ai__node-index { background: var(--kx-danger-bg); color: #cb2634; }
.kx-script__node-main,
.kx-ai__node-main {
  flex: 1;
  min-width: 0;
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
}
.kx-script__node-head,
.kx-ai__node-head { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-script__node-name,
.kx-ai__node-name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-script__node-code,
.kx-ai__node-code { font-family: var(--kx-font-mono); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-script__node-params,
.kx-ai__node-params { margin-top: 4px; font-size: var(--kx-fs-xs); color: var(--kx-text-2); line-height: 1.7; word-break: break-all; }
.kx-ai__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kx-success); }
.kx-ai__dot.is-risk-2 { background: var(--kx-warning); }
.kx-ai__dot.is-risk-3 { background: var(--kx-danger); }

/* 校验结果 */
.kx-script__validate,
.kx-ai__validate { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-script__validate-empty,
.kx-ai__validate-empty { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-script__messages,
.kx-ai__messages { display: flex; flex-direction: column; gap: 6px; }
.kx-script__message,
.kx-ai__message {
  padding: 8px 10px;
  border-radius: var(--kx-radius-sm);
  border-left: 3px solid var(--kx-border);
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-sm);
  line-height: 1.7;
  color: var(--kx-text-2);
  word-break: break-all;
}
.kx-script__message.is-error,
.kx-ai__message.is-error { border-left-color: var(--kx-danger); background: var(--kx-danger-bg); color: #cb2634; }
.kx-script__message.is-warning,
.kx-ai__message.is-warning { border-left-color: var(--kx-warning); background: var(--kx-warning-bg); color: #c15d00; }

.kx-script__test,
.kx-script__test-result { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

/* 联调测试 · 实时执行日志 */
.kx-script__test-log { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-script__test-log-bar { display: flex; align-items: center; gap: var(--kx-sp-2); color: var(--kx-text-2); }
.kx-script__test-log-title { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }

/* 联调测试 · 调试参数（概率滑块 / 点赞数区间 / 开关 + 重置默认） */
.kx-rate {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-left: 3px solid var(--kx-primary);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
.kx-rate__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-3); }
.kx-rate__title { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-rate__value {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: var(--kx-fs-lg);
  font-weight: 700;
  color: var(--kx-primary);
  font-variant-numeric: tabular-nums;
}
/* 每个参数一块：块与块之间用虚线分隔，首块不留分隔线 */
.kx-rate__field { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-rate__field + .kx-rate__field { padding-top: var(--kx-sp-3); border-top: 1px dashed var(--kx-border-2); }
.kx-rate__field-head { display: flex; align-items: center; gap: var(--kx-sp-2); }
.kx-rate__field-head > .kx-rate__title { flex: 1; min-width: 0; }
.kx-rate__body { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-rate__range { flex: 1; min-width: 0; height: 4px; accent-color: var(--kx-primary); cursor: pointer; }
.kx-rate__body > .kx-input { flex: none; width: 92px; text-align: center; }
/* 表单里的滑块字段：滑杆 + 数字框 + 单位读数同一行 */
.kx-rate__val {
  flex: none;
  min-width: 46px;
  text-align: right;
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-primary);
  font-variant-numeric: tabular-nums;
}
.kx-rate__body > .kx-rate__range:disabled { cursor: not-allowed; opacity: .55; }
.kx-rate__desc { font-size: var(--kx-fs-xs); line-height: 1.7; color: var(--kx-text-2); }
.kx-rate__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-3); }

/* ---------------------------------------------------------------- 动作积木库 */
.kx-block__search { display: grid; gap: var(--kx-sp-3); grid-template-columns: minmax(0, 1fr) 220px; }
.kx-block__search-input { position: relative; }
.kx-block__search-input .kx-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kx-text-3);
}
.kx-block__search-input .kx-input { padding-left: 34px; }
.kx-block__layout {
  display: grid;
  gap: var(--kx-sp-5);
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
}
.kx-block__aside .kx-card__body { padding: var(--kx-sp-3); }
.kx-block__groups { display: flex; flex-direction: column; gap: 2px; }
.kx-block__group {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 9px 10px;
  border-radius: var(--kx-radius-sm);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-block__group .kx-icon { color: var(--kx-text-3); }
.kx-block__group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-block__group:hover { background: var(--kx-primary-50); color: var(--kx-primary); }
.kx-block__group.is-active { background: var(--kx-primary-100); color: var(--kx-primary-dark); font-weight: 600; }
.kx-block__group.is-active .kx-icon { color: var(--kx-primary); }
.kx-block__title { font-size: var(--kx-fs); font-weight: 600; color: var(--kx-text); }
.kx-block__grid {
  display: grid;
  gap: var(--kx-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
}
.kx-block__card {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  cursor: pointer;
  transition: box-shadow var(--kx-dur) var(--kx-ease), transform var(--kx-dur) var(--kx-ease), border-color var(--kx-dur) var(--kx-ease);
}
.kx-block__card:hover { transform: translateY(-2px); box-shadow: var(--kx-shadow); border-color: var(--kx-primary-200); }
.kx-block__card-head { display: flex; align-items: flex-start; gap: var(--kx-sp-3); }
.kx-block__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-primary-50);
  color: var(--kx-primary);
}
.kx-block__card-name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-block__card-code { font-family: var(--kx-font-mono); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-block__card-desc { font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.7; min-height: 34px; }
.kx-block__card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-2); }
.kx-block__card-params { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-block__params { border: 1px solid var(--kx-border-2); border-radius: var(--kx-radius-sm); overflow: hidden; }

/* ---------------------------------------------------------------- 动作试跑弹窗 */
/* 该弹窗自绘 hero 头，隐藏 modal 原生标题条，仅保留悬浮的关闭按钮 */
.kx-block__test-modal { position: relative; }
.kx-block__test-modal .kx-modal__head {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: var(--kx-sp-3);
}
.kx-block__test-modal .kx-modal__head .kx-modal__title { display: none; }
.kx-block__test-modal .kx-modal__close { color: #fff; background: rgba(255, 255, 255, .16); }
.kx-block__test-modal .kx-modal__close:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.kx-block__test {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4);
}
.kx-block__test .kx-bp__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--kx-sp-2);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-block__test .kx-bp__section-title .kx-icon { color: var(--kx-primary); }

/* 顶部渐变 header：视觉锚点 */
.kx-block__test-hero {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  margin: calc(var(--kx-sp-2) * -1) calc(var(--kx-sp-6) * -1) 0;
  padding: var(--kx-sp-4) var(--kx-sp-5);
  border-radius: var(--kx-radius-lg) var(--kx-radius-lg) 0 0;
  background: linear-gradient(135deg, var(--kx-primary-dark) 0%, var(--kx-primary) 55%, #6d5ae0 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}
.kx-block__test-hero::before {
  content: '';
  position: absolute;
  right: -40px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.kx-block__test-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--kx-radius);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(2px);
}
.kx-block__test-hero-name { font-size: var(--kx-fs); font-weight: 700; letter-spacing: .2px; }
.kx-block__test-hero-code {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  opacity: .72;
  margin-top: 2px;
}
.kx-block__test-hero-tag {
  flex: none;
  margin-right: 40px; /* 避开右上角悬浮的关闭按钮 */
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* 顶部：设备 / 账号选择，两块并列色条卡 */
.kx-block__test-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-3);
}
.kx-block__test-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--kx-sp-3) var(--kx-sp-3);
  padding-left: var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface);
  transition: border-color var(--kx-dur) var(--kx-ease), box-shadow var(--kx-dur) var(--kx-ease);
}
.kx-block__test-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--kx-radius-sm) 0 0 var(--kx-radius-sm);
}
.kx-block__test-item--primary::before { background: linear-gradient(180deg, var(--kx-primary), var(--kx-primary-dark)); }
.kx-block__test-item--violet::before { background: linear-gradient(180deg, #7c6cf0, #5b3df5); }
.kx-block__test-item:focus-within { border-color: var(--kx-primary-200); box-shadow: 0 4px 14px rgba(24, 119, 242, .1); }
.kx-block__test-item > div:not(.kx-block__test-item-head) { width: 100%; min-width: 0; }
.kx-block__test-item-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.kx-block__test-item-head .kx-bp__filter-label { margin: 0; color: var(--kx-text); font-weight: 600; }
.kx-block__test-item-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}
.kx-block__test-item--primary .kx-block__test-item-ic { background: var(--kx-primary-50); color: var(--kx-primary); }
.kx-block__test-item--violet .kx-block__test-item-ic { background: rgba(124, 108, 240, .14); color: #6b5ae0; }

/* 参数区：网格小卡 + 左侧主题竖条 */
.kx-block__test-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-3);
}
.kx-block__test-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3) var(--kx-sp-3);
  padding-left: var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface);
  box-shadow: inset 3px 0 0 0 transparent;
  transition: box-shadow var(--kx-dur) var(--kx-ease), border-color var(--kx-dur) var(--kx-ease);
}
.kx-block__test-field:focus-within {
  border-color: var(--kx-primary-200);
  box-shadow: inset 3px 0 0 0 var(--kx-primary), 0 4px 12px rgba(24, 119, 242, .08);
}
.kx-block__test-field > .kx-bp__filter-label {
  flex: none;
  min-width: 0;
  margin: 0;
  font-weight: 500;
  color: var(--kx-text-2);
}
.kx-block__test-field > input.kx-input,
.kx-block__test-field > div { flex: 1; min-width: 0; }

/* 最近试跑记录：按状态配色 */
.kx-block__test-recent {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-2);
}
.kx-block__test-record {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-3);
  padding-left: var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-left: 4px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface);
  transition: border-color var(--kx-dur) var(--kx-ease), background var(--kx-dur) var(--kx-ease), transform var(--kx-dur) var(--kx-ease);
}
.kx-block__test-record:hover { transform: translateX(2px); background: var(--kx-primary-50); }
.kx-block__test-record .kx-ellipsis { flex: 1; min-width: 0; }
/* 状态色条：成功绿 / 失败红 / 进行中橙 */
.kx-block__test-record:has(.kx-tag--success) { border-left-color: var(--kx-success); }
.kx-block__test-record:has(.kx-tag--danger) { border-left-color: var(--kx-danger); }
.kx-block__test-record:has(.kx-tag--warning) { border-left-color: #ff9f0a; }

/* 记录可点击查看日志 */
.kx-block__test-record--clickable { cursor: pointer; }
.kx-block__test-record--clickable:hover { border-color: var(--kx-primary-200); }
.kx-block__test-record-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--kx-text-3);
  background: var(--kx-surface-2);
}

/* ---------------------------------------------------------------- 试跑日志弹窗 */
.kx-block__log { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-block__log-overview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
.kx-block__log-item { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-block__log-item--err { align-items: flex-start; }
.kx-block__log-label { flex: none; width: 76px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); }
.kx-block__log-item--err .kx-text-xs { white-space: pre-wrap; word-break: break-all; line-height: 1.6; }
.kx-block__log-step {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-3);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface);
}
.kx-block__log-step-no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kx-primary-50);
  color: var(--kx-primary);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
}
.kx-block__log-step-err {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-danger-50, rgba(245, 63, 63, .08));
  color: var(--kx-danger);
  font-size: var(--kx-fs-xs);
  word-break: break-all;
  line-height: 1.6;
}
.kx-block__log-step-out { margin-top: 4px; word-break: break-all; }
.kx-block__log-step-dur { flex: none; margin-top: 4px; }
.kx-block__log-empty {
  padding: var(--kx-sp-4);
  border: 1px dashed var(--kx-border-2);
  border-radius: var(--kx-radius);
  text-align: center;
}

/* ---------------------------------------------------------------- AI 功能工场 */
.kx-ai {
  display: grid;
  gap: var(--kx-sp-5);
  grid-template-columns: 280px minmax(0, 1fr) 380px;
  align-items: stretch;
}
.kx-ai .kx-card { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 560px; }
.kx-ai .kx-card__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kx-ai__aside .kx-card__body { padding: var(--kx-sp-3); }
.kx-ai__model-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-ai__sessions { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.kx-ai__session {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-ai__session:hover { background: var(--kx-primary-50); }
.kx-ai__session.is-active { background: var(--kx-primary-100); border-color: var(--kx-primary-200); }
.kx-ai__session-title { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-ai__session-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.kx-ai__session-time { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-ai__session-del {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  color: var(--kx-text-3);
}
.kx-ai__session:hover .kx-ai__session-del { display: inline-flex; }
.kx-ai__session-del:hover { color: var(--kx-danger); }

.kx-ai__stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kx-ai__messages-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4);
  padding-right: 4px;
}
.kx-ai__bubble {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  font-size: var(--kx-fs-sm);
  line-height: 1.75;
}
.kx-ai__bubble.is-user {
  align-self: flex-end;
  background: var(--kx-gradient-primary);
  color: #fff;
  box-shadow: var(--kx-shadow-primary);
}
.kx-ai__bubble.is-user .kx-ai__bubble-head { color: rgba(255, 255, 255, .92); }
.kx-ai__bubble.is-ai {
  align-self: flex-start;
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
  color: var(--kx-text);
}
.kx-ai__bubble-head { display: flex; align-items: center; gap: 6px; font-size: var(--kx-fs-xs); }
.kx-ai__bubble-text { white-space: pre-wrap; word-break: break-word; }
.kx-ai__bubble .kx-ai__codeblock { background: var(--kx-surface); }

.kx-ai__thinking {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--kx-sp-3);
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-primary-50);
  border: 1px dashed var(--kx-primary-200);
}
.kx-ai__thinking.is-hide { display: none; }
.kx-ai__thinking-main { display: flex; align-items: center; gap: var(--kx-sp-2); font-size: var(--kx-fs-sm); color: var(--kx-primary-dark); }
.kx-ai__thinking-text { flex: 1; min-width: 0; }
.kx-ai__thinking-time { font-variant-numeric: tabular-nums; color: var(--kx-primary); }
.kx-ai__thinking-tip { display: flex; align-items: center; gap: 4px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-ai__dots { display: inline-flex; align-items: center; gap: 3px; }
.kx-ai__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kx-primary);
  animation: kx-ai-bounce 1s var(--kx-ease) infinite;
}
.kx-ai__dots i:nth-child(2) { animation-delay: .15s; }
.kx-ai__dots i:nth-child(3) { animation-delay: .3s; }

.kx-ai__input { display: flex; flex-direction: column; gap: var(--kx-sp-2); margin-top: var(--kx-sp-3); }
.kx-ai__textarea { resize: vertical; }
.kx-ai__quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kx-ai__quick-btn { font-size: var(--kx-fs-xs); }
.kx-ai__input-tools { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-ai__select { width: 190px; }
.kx-ai__input-tip { display: flex; align-items: center; gap: 4px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }

.kx-ai__guide { flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: center; justify-content: center; }
.kx-ai__guide:empty { display: none; }
.kx-ai__guide-inner { display: flex; flex-direction: column; align-items: center; gap: var(--kx-sp-3); text-align: center; padding: var(--kx-sp-4); }
.kx-ai__guide-icon { color: var(--kx-primary); }
.kx-ai__guide-title { font-size: var(--kx-fs-lg); font-weight: 600; color: var(--kx-text); }
.kx-ai__guide-desc { font-size: var(--kx-fs-sm); color: var(--kx-text-3); line-height: 1.8; }
.kx-ai__examples { display: grid; gap: var(--kx-sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--kx-sp-3); text-align: left; }
.kx-ai__example {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-2);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-ai__example .kx-icon { flex: none; margin-top: 2px; color: var(--kx-primary); }
.kx-ai__example:hover { border-color: var(--kx-primary-200); background: var(--kx-primary-50); transform: translateY(-2px); }

.kx-ai__preview-body { flex: 1; min-height: 0; overflow-y: auto; }
.kx-ai__pane { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-ai__preview-actions {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  flex-wrap: wrap;
  margin-top: var(--kx-sp-3);
  padding-top: var(--kx-sp-3);
  border-top: 1px solid var(--kx-border-2);
}
.kx-ai__run-result,
.kx-ai__test,
.kx-ai__publish { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

/* 业务参数预览（param_schema） */
.kx-ai__params { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-ai__param-group { display: flex; flex-direction: column; gap: 6px; }
.kx-ai__param-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  color: var(--kx-text-2);
  letter-spacing: .02em;
}
.kx-ai__param {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-2);
  padding: 8px 10px;
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface);
}
.kx-ai__param-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kx-ai__param-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kx-ai__param-title { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-ai__param-name { font-family: var(--kx-font-mono); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-ai__param-value {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  color: var(--kx-primary-dark);
  word-break: break-all;
}
.kx-ai__param-desc { font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.7; }
.kx-ai__param-empty { font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.8; }

/* ============================================================================
   15. 任务中心（任务列表 / 任务实例 / 执行日志）
   ========================================================================== */
.kx-task__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kx-task__job-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kx-task__fail-chart { height: 300px; width: 100%; }

.kx-task__report-bar { margin-bottom: var(--kx-sp-4); }
.kx-task__report-summary { display: block; }
.kx-task__report-chart { height: 260px; width: 100%; margin-bottom: var(--kx-sp-4); }

/* 分步表单 */
.kx-task__wizard { display: flex; flex-direction: column; gap: var(--kx-sp-5); }
.kx-task__wizard-steps { padding-top: var(--kx-sp-2); }
.kx-task__wizard-form { min-height: 220px; }
.kx-task__wizard-dynamic { margin-top: var(--kx-sp-3); }
.kx-task__wizard-sub {
  margin-top: var(--kx-sp-4);
  padding-top: var(--kx-sp-4);
  border-top: 1px dashed var(--kx-border-2);
}
.kx-task__wizard-sub-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--kx-sp-4);
  padding-top: var(--kx-sp-4);
  border-top: 1px dashed var(--kx-border-2);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-task__wizard-sub-title .kx-icon { color: var(--kx-primary); }

/* 功能参数步骤：分组标题 / 空态 / 说明 */
.kx-task__wizard-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--kx-sp-2);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--kx-border-2);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  color: var(--kx-text-2);
  letter-spacing: .02em;
}
.kx-task__wizard-group .kx-icon { color: var(--kx-primary); }
.kx-task__wizard-note { margin-top: var(--kx-sp-4); }
.kx-task__wizard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-6) var(--kx-sp-4);
  border: 1px dashed var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  text-align: center;
}
.kx-task__wizard-empty .kx-icon { color: var(--kx-text-3); }
.kx-task__wizard-empty-title { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-task__wizard-empty-desc { max-width: 620px; font-size: var(--kx-fs-xs); line-height: 1.9; color: var(--kx-text-3); }

/* 预估结果 */
.kx-task__preview { display: flex; flex-direction: column; gap: var(--kx-sp-4); }
.kx-task__preview-summary { display: grid; gap: var(--kx-sp-3) var(--kx-sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kx-task__preview-item { display: flex; gap: var(--kx-sp-2); font-size: var(--kx-fs-sm); min-width: 0; }
.kx-task__preview-label { flex: none; min-width: 92px; color: var(--kx-text-3); }
.kx-task__preview-value { color: var(--kx-text); word-break: break-all; }
.kx-task__preview-result { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-task__preview-devices { display: flex; flex-direction: column; max-height: 280px; overflow-y: auto; }

/* 实例详情 */
.kx-task__thumb {
  width: 40px;
  height: 28px;
  object-fit: cover;
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  cursor: zoom-in;
}
/* 指令截图缩略图：手机截图是竖屏的（1080×2400），套上面那个 40×28 的横向盒子 +
   object-fit:cover 会把画面裁成中间一条横带、基本认不出内容，所以单独用竖屏比例 */
.kx-bp__shot {
  width: 44px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  cursor: zoom-in;
}
.kx-task__image-wrap { display: flex; align-items: center; justify-content: center; }
/* 大图必须限制高度：竖屏手机截图按整宽渲染会有一千多像素高，撑出弹窗内容区，
   一进来只能看到图顶那一截（要滚到底才看得全）。
   上限按弹窗实际可用高度算，不能直接给 70vh —— 弹窗自身 max-height 是 84vh，
   再去掉头部(~60) + 底部(~63) + 正文内边距(~26) 约 150px，70vh 在 868px 高的屏幕上
   仍会溢出约 28px。减 160 留 10px 余量，任何视口下都不会再溢出。 */
.kx-task__image-wrap img {
  max-width: 100%;
  max-height: calc(84vh - 160px);
  object-fit: contain;
  border-radius: var(--kx-radius);
}

/* ---------------------------------------------------------------- APP 版本（设备管理·提取版本） */
/* 列表单元格：整格可点 → 打开明细弹窗（不重新提取），所以给手型 + hover 变主色 */
.kx-appver-cell { cursor: pointer; }
.kx-appver-cell:hover { color: var(--kx-primary); }

/* 明细弹窗：一行一个目标 App（中文名 / 包名 / 版本号三列）
   用 grid 而不是 flex：包名那一列要能收缩省略，flex 里长包名会把版本号顶出可视区 */
.kx-appver-modal { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-appver-modal__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  overflow: hidden;
}
.kx-appver-modal__item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-4);
  font-size: var(--kx-fs-sm);
  border-bottom: 1px solid var(--kx-border-2);
}
.kx-appver-modal__item:last-child { border-bottom: none; }
.kx-appver-modal__item.is-off { background: var(--kx-surface-2); }
.kx-appver-modal__label { font-weight: 600; color: var(--kx-text); }
.kx-appver-modal__item.is-off .kx-appver-modal__label { color: var(--kx-text-3); font-weight: 500; }
.kx-appver-modal__pkg {
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-appver-modal__ver { color: var(--kx-text); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 账号健康度（设备管理·体检） */
/* 列表单元格：分数 + 等级标签堆叠，整格可点看明细（与 APP 版本列同一套交互观感） */
.kx-health-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
}
.kx-health-cell:hover .kx-health-cell__score { color: var(--kx-primary); }
.kx-health-cell__score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kx-text);
}

/* 明细：弹窗与详情页签**共用同一份结构**，样式也放一起，免得两处长得不一样 */
.kx-health-detail { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-health-detail__head {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-4);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
.kx-health-detail__score {
  flex: none;
  min-width: 72px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  color: var(--kx-primary);
  font-variant-numeric: tabular-nums;
}
.kx-health-detail__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* 命中项：左侧红条一眼区分「这是问题」，不是普通信息卡 */
.kx-health-hits { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-health-hit {
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius-sm);
  border-left: 3px solid var(--kx-danger);
  background: var(--kx-surface-3);
}
.kx-health-hit__title { display: flex; align-items: baseline; flex-wrap: wrap; }
.kx-health-hit__evidence {
  margin-top: 6px;
  padding: 6px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  border: 1px dashed var(--kx-border);
  background: var(--kx-surface);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-2);
  word-break: break-all;
}

/* 语义判定依据：昵称 / 简介 / 前三个作品的原文 —— 扣分理由要能被复核，必须把依据摊开 */
.kx-health-sem {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-2);
}
.kx-health-sem__row { display: flex; align-items: flex-start; gap: var(--kx-sp-2); }
.kx-health-sem__label {
  flex: none;
  width: 66px;
  padding-top: 7px;
  color: var(--kx-text-4);
  font-size: var(--kx-fs-xs);
}
.kx-health-sem__text {
  flex: 1;
  min-width: 0;
  padding: 6px var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-3);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* AI 补充发现：左条换紫色，跟「固定规则命中项」的红色一眼区分开 */
.kx-health-hit--ai { border-left-color: var(--kx-violet); }
.kx-health-hit--ai .kx-health-hit__title { gap: 6px; }

/* 三页证据截图（覆盖 .kx-bp__shot 的小缩略图尺寸，这里要看得清是哪一页） */
.kx-health-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kx-sp-3); }
.kx-health-shot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kx-health-shot .kx-bp__shot { width: 100%; height: 180px; }
.kx-health-shot__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-3);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
}

/* 详情页签：最近一次结论（明细）与体检历史表之间的间距 */
.kx-health-latest { margin-bottom: var(--kx-sp-3); }

.kx-health-modal { display: flex; flex-direction: column; }
.kx-health-modal .kx-bp__loading { padding: var(--kx-sp-6) 0; }

/* ---------------------------------------------------------------- 体检「检测项」勾选窗 */
.kx-health-pick { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-health-pick__list { display: flex; flex-direction: column; gap: 6px; }
.kx-health-pick__item {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface);
  cursor: pointer;
}
.kx-health-pick__item:hover { border-color: var(--kx-primary-border); }
.kx-health-pick__item.is-on { border-color: var(--kx-primary-border); background: var(--kx-primary-50); }
.kx-health-pick__item.is-off { cursor: not-allowed; opacity: .62; }
/* 勾选框：自己画（精灵图里没有「空心勾选框」图标）——未勾=灰描边空框，已勾=主色实底 + 白勾 */
.kx-health-pick__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1.5px solid var(--kx-border-strong);
  border-radius: 5px;
  background: transparent;
  color: transparent;
}
.kx-health-pick__item.is-on .kx-health-pick__box {
  border-color: var(--kx-primary);
  background: var(--kx-primary);
  color: #fff;
}
.kx-health-pick__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kx-health-pick__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-health-pick__warn { color: var(--kx-danger); }

/* ---------------------------------------------------------------- 体检进度弹窗（阶段进度条） */
.kx-health-prog { display: flex; flex-direction: column; gap: var(--kx-sp-4); }
.kx-health-prog__head { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-health-prog__head .kx-progress { flex: 1; height: 8px; }
.kx-health-prog__head .kx-progress__bar { transition: width .4s ease; }
.kx-health-prog__percent {
  min-width: 44px;
  text-align: right;
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kx-health-prog__stage { font-size: var(--kx-fs-sm); color: var(--kx-text); }
.kx-health-prog__stages { display: flex; flex-direction: column; gap: 6px; }
.kx-health-prog__stage-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-3);
}
.kx-health-prog__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--kx-overlay-rgb), .18);
}
.kx-health-prog__stage-item.is-active { color: var(--kx-text); font-weight: 600; }
.kx-health-prog__stage-item.is-active .kx-health-prog__dot {
  background: var(--kx-primary);
  box-shadow: 0 0 0 3px var(--kx-primary-100);
}
.kx-health-prog__stage-item.is-done { color: var(--kx-text-2); }
.kx-health-prog__stage-item.is-done .kx-health-prog__dot { background: var(--kx-success); }
.kx-health-prog__error {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid rgba(239, 68, 68, .28);
  border-radius: var(--kx-radius-sm);
  background: rgba(239, 68, 68, .08);
  color: var(--kx-danger);
  font-size: var(--kx-fs-sm);
}
.kx-health-prog__error .kx-text-3 { color: var(--kx-text-3); }

/* 执行日志（行内展开） */
.kx-task-log__pane { display: block; }
.kx-task-log__expand { position: relative; }
.kx-task-log__expand-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--kx-radius-sm);
  font-size: var(--kx-fs-xs);
  color: var(--kx-primary);
  cursor: pointer;
  list-style: none;
}
.kx-task-log__expand-summary::-webkit-details-marker { display: none; }
.kx-task-log__expand-summary:hover { background: var(--kx-primary-50); }
.kx-task-log__expand[open] .kx-task-log__expand-summary .kx-icon { transform: rotate(180deg); }
.kx-task-log__io {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface);
  border: 1px solid var(--kx-border-2);
  max-width: 420px;
}
.kx-task-log__io-item { display: flex; gap: var(--kx-sp-2); font-size: var(--kx-fs-xs); }
.kx-task-log__io-label { flex: none; min-width: 34px; color: var(--kx-text-3); }
.kx-task-log__io-value { color: var(--kx-text-2); word-break: break-all; line-height: 1.7; }

/* ============================================================================
   16. 商业化（租户 / 套餐 / 订单 / 资金流水）
   ========================================================================== */
.kx-biz__notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--kx-sp-5);
  padding: 10px var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-warning-bg);
  border: 1px dashed var(--kx-warning);
  font-size: var(--kx-fs-sm);
  color: #c15d00;
}
/* 纯说明性的提示条（如代理侧「这里是你的客户」）：走 info 色，别用警示色吓人 */
.kx-biz__notice--info {
  background: var(--kx-info-bg);
  border-color: var(--kx-info-border);
  color: var(--kx-info-text);
}
.kx-biz__money {
  color: var(--kx-accent-deep);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kx-biz__amount-up { color: var(--kx-success); font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-biz__amount-down { color: var(--kx-danger); font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-biz__form { display: flex; flex-direction: column; gap: var(--kx-sp-4); }
.kx-biz__confirm { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-biz__children { display: flex; flex-direction: column; }

/* 租户层级树 */
.kx-tenant__tree { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-tenant__tree-level { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-tenant__tree-level--child { margin-left: var(--kx-sp-6); padding-left: var(--kx-sp-4); border-left: 2px dashed var(--kx-border); }
.kx-tenant__node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  padding: 10px var(--kx-sp-4);
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-tenant__node:hover { border-color: var(--kx-primary-200); box-shadow: var(--kx-shadow-sm); }
.kx-tenant__node-main { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 0; }
.kx-tenant__node-name { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-tenant__node-meta { display: flex; align-items: center; gap: var(--kx-sp-4); font-size: var(--kx-fs-xs); color: var(--kx-text-3); flex-wrap: wrap; }
.kx-tenant__node-meta > span { display: inline-flex; align-items: center; gap: 4px; }

/* 配额进度条组 */
.kx-biz__quota { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-biz__quota-item { display: flex; flex-direction: column; gap: 6px; }
.kx-biz__quota-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--kx-fs-sm); color: var(--kx-text-2); }
.kx-biz__quota-head .kx-text-3 { font-variant-numeric: tabular-nums; }
.kx-biz__quota-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-border-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}

/* 余额 / 续期 */
.kx-biz__balance {
  display: flex;
  align-items: baseline;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-accent-50);
  border: 1px dashed var(--kx-accent);
}
.kx-biz__balance-label { font-size: var(--kx-fs-sm); color: var(--kx-text-2); }
.kx-biz__balance-value { font-size: var(--kx-fs-2xl); font-weight: 700; color: var(--kx-accent-deep); }
.kx-biz__renew {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-4);
  padding: var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-2);
}
.kx-biz__renew-item { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.kx-biz__renew-label { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-biz__renew-value { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-biz__renew-arrow { color: var(--kx-primary); }

/* 套餐卡片 */
.kx-biz__packages {
  display: grid;
  gap: var(--kx-sp-5);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.kx-biz__package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-5);
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow-xs);
  transition: box-shadow var(--kx-dur) var(--kx-ease), transform var(--kx-dur) var(--kx-ease), border-color var(--kx-dur) var(--kx-ease);
}
.kx-biz__package:hover { transform: translateY(-3px); box-shadow: var(--kx-shadow); border-color: var(--kx-accent-light); }
.kx-biz__package.is-recommend { border-color: var(--kx-accent); box-shadow: var(--kx-shadow-accent); }
.kx-biz__package-flag {
  position: absolute;
  top: -10px;
  right: var(--kx-sp-4);
  padding: 2px 10px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-gradient-accent);
  color: #00384a;
  font-size: var(--kx-fs-xs);
  font-weight: 600;
}
.kx-biz__package-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-2); }
.kx-biz__package-name { font-size: var(--kx-fs-lg); font-weight: 700; color: var(--kx-text); }
.kx-biz__package-code { font-family: var(--kx-font-mono); font-size: var(--kx-fs-xs); color: var(--kx-text-3); margin-top: -6px; }
.kx-biz__package-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kx-biz__package-amount { font-size: var(--kx-fs-3xl); font-weight: 700; color: var(--kx-accent-deep); font-variant-numeric: tabular-nums; }
.kx-biz__package-origin { font-size: var(--kx-fs-sm); color: var(--kx-text-3); text-decoration: line-through; }
.kx-biz__package-unit { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-biz__package-quota { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kx-biz__package-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--kx-sp-3);
  border-top: 1px dashed var(--kx-border-2);
}
.kx-biz__feature { display: flex; align-items: center; gap: 6px; font-size: var(--kx-fs-sm); color: var(--kx-text-3); }
.kx-biz__feature.is-on { color: var(--kx-text); }
.kx-biz__feature.is-on .kx-icon { color: var(--kx-success); }
.kx-biz__package-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  margin-top: auto;
  padding-top: var(--kx-sp-3);
  border-top: 1px solid var(--kx-border-2);
}
.kx-biz__package-foot > div:first-child { display: inline-flex; align-items: center; gap: var(--kx-sp-2); }
.kx-biz__package-remark { font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.7; }

/* 订单趋势 */
.kx-biz__order-trend { height: 280px; width: 100%; }

/* 动画 */
@keyframes kx-ai-bounce {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1600px) {
  .kx-ai { grid-template-columns: 244px minmax(0, 1fr) 340px; }
  .kx-task__job-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1440px) {
  .kx-script__stats,
  .kx-task__stats,
  .kx-biz__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .kx-ai { grid-template-columns: 220px minmax(0, 1fr); }
  .kx-ai__preview { grid-column: 1 / -1; }
  .kx-ai .kx-card { height: auto; min-height: 0; }
  .kx-ai__messages-scroll { max-height: 420px; }
  .kx-block__layout { grid-template-columns: minmax(0, 1fr); }
  .kx-block__groups { flex-direction: row; flex-wrap: wrap; }
  .kx-task__job-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .kx-ai { grid-template-columns: minmax(0, 1fr); }
  .kx-ai__examples { grid-template-columns: minmax(0, 1fr); }
  .kx-block__search { grid-template-columns: minmax(0, 1fr); }
  .kx-task__preview-summary,
  .kx-biz__stats,
  .kx-script__stats,
  .kx-task__stats,
  .kx-task__job-stats { grid-template-columns: minmax(0, 1fr); }
  .kx-tenant__node { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   营销中心（/mkt/script、/mkt/history）
   ============================================================================ */

/* ---------------------------------------------------------------- 统计卡与工具条 */
/* 四张卡固定一行四列（与 .kx-script__stats / .kx-task__stats 口径一致） */
.kx-mkt__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--kx-sp-4);
}

/* 统计概览弹层：四张卡常驻页面太占地方，收进右上角「数据」图标里（用户 2026-10-04） */
.kx-mkt__statpop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--kx-z-dropdown);
  width: 560px;
  max-width: calc(100vw - 32px);
  padding: var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-solid);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .35);
}
/* ⚠ 作者样式会盖过 [hidden] 的 UA 规则，必须显式补一条（踩过一次：liveBox 留 40px 空条） */
.kx-mkt__statpop[hidden] { display: none; }
.kx-mkt__statpop-head {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  margin-bottom: var(--kx-sp-3);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__statpop-head .kx-icon { color: var(--kx-primary); }
/* 面板只有 560px，四列会挤成一条 —— 面板内改成两列 */
.kx-mkt__statpop .kx-mkt__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }

.kx-mkt__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-4);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  margin-bottom: var(--kx-sp-4);
}

.kx-mkt__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-2); min-width: 0; }

.kx-mkt__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kx-sp-2);
  height: 30px;
  padding: 0 var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-2);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-mkt__chip:hover { border-color: var(--kx-primary-border); color: var(--kx-primary); }
.kx-mkt__chip.is-active {
  border-color: var(--kx-primary);
  background: var(--kx-primary-50);
  color: var(--kx-primary);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__chip-count {
  min-width: 20px;
  padding: 0 5px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-3);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-2xs);
  text-align: center;
}
.kx-mkt__chip.is-active .kx-mkt__chip-count { background: var(--kx-primary); color: #fff; }

.kx-mkt__toolbar-search {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  flex: 0 1 260px;
  color: var(--kx-text-3);
}
.kx-mkt__toolbar-search .kx-input { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- 工作台两栏 */
.kx-mkt__workbench {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: var(--kx-sp-4);
  align-items: start;
}

.kx-mkt__panel { padding: var(--kx-sp-4); }

.kx-mkt__panel-head {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding-bottom: var(--kx-sp-3);
  margin-bottom: var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__count {
  margin-left: auto;
  padding: 0 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-primary-50);
  color: var(--kx-primary);
  font-size: var(--kx-fs-2xs);
}

.kx-mkt__list-scroll { display: flex; flex-direction: column; gap: var(--kx-sp-2); max-height: 640px; overflow: auto; }

.kx-mkt__item {
  display: block;
  width: 100%;
  padding: var(--kx-sp-3);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface);
  text-align: left;
  cursor: pointer;
  transition: all var(--kx-dur) var(--kx-ease);
}
.kx-mkt__item:hover { border-color: var(--kx-primary-border); background: var(--kx-surface-2); }
.kx-mkt__item.is-active {
  border-color: var(--kx-primary);
  background: var(--kx-primary-50);
  box-shadow: var(--kx-shadow-xs);
}
.kx-mkt__item-top { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-2); }
.kx-mkt__item-name {
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-mkt__item-code {
  margin-top: 2px;
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-2xs);
  color: var(--kx-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-mkt__item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-2); margin-top: var(--kx-sp-2); }

/* ---------------------------------------------------------------- 操作台 */
.kx-mkt__console { display: flex; flex-direction: column; gap: var(--kx-sp-4); min-width: 0; }

.kx-mkt__console-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-8) var(--kx-sp-4);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-sm);
}

.kx-mkt__console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kx-sp-3); }
.kx-mkt__console-title { font-size: var(--kx-fs-lg); font-weight: var(--kx-fw-bold); color: var(--kx-text); }
.kx-mkt__console-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-2); margin-top: var(--kx-sp-2); }
.kx-mkt__console-desc {
  margin-top: var(--kx-sp-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  line-height: var(--kx-lh);
}

.kx-mkt__section { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-mkt__section-title {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__section-title .kx-text-xs { font-weight: 400; }

/* 参数分组「色块」：浅底卡片 + 顶部带色标题条 —— 让 触达动作/搜索/筛选/任务量
   各自成一块，参数多的时候一眼能看出层次（用户 2026-10-04：加色块、要层次感） */
.kx-mkt__groupblock {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kx-border-soft);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-fixed);
}
.kx-mkt__group {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-2) var(--kx-sp-4);
  border-bottom: 1px solid var(--kx-primary-100);
  background: var(--kx-primary-50);
  color: var(--kx-primary-dark);
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__group .kx-icon { flex: none; color: var(--kx-primary); }
.kx-mkt__groupcount {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-solid);
  color: var(--kx-text-3);
  font-weight: 400;
  font-size: var(--kx-fs-xs);
}
/* 块内自成 2 列网格（列宽/间距与 Form 的栅格保持一致） */
.kx-mkt__groupbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: var(--kx-sp-4);
}
/* 「跟随公共配置」的行收成一颗浅灰 chip：一眼分清「自动继承」与「本次要填的」 */
.kx-mkt__console .kx-form__item.is-managed.is-collapsed {
  align-self: start;   /* 栅格行被同排更高的字段撑高时，chip 贴住自身高度别拉长 */
  padding: var(--kx-sp-1) var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-3);
}
/* 开关类参数（点赞/评论/关注/私信/读不到时放行…）：标题与开关排成一行，
   形态与上面「跟随公共配置」的托管行一致 —— 上下两行纯属浪费高度 */
.kx-mkt__console .kx-form__item--switch {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
}
.kx-mkt__console .kx-form__item--switch > .kx-form__label { flex: 1 1 auto; min-width: 0; }
.kx-mkt__console .kx-form__item--switch > .kx-form__control {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  align-items: center;
}
/* 参数联动：父项没成立时子项整行收起。
   注意 .kx-form__item 是 display:flex，会盖过 [hidden]，所以用类 + display:none */
.kx-mkt__console .kx-form__item.is-dep-hidden { display: none; }
/* 数值参数统一走「滑杆 + 数字框 + 单位」：形态一致、能拖也能精确填（用户 2026-10-04 要的高端 UI） */
.kx-mkt__console .kx-rate__body { gap: var(--kx-sp-2); }
.kx-mkt__console .kx-rate__body > .kx-input { width: 84px; font-variant-numeric: tabular-nums; }
/* 末尾是「数值 + 单位」（如 5个 / 60人 / 3秒），压成小灰字当单位后缀用 */
.kx-mkt__console .kx-rate__val {
  min-width: 22px;
  font-size: var(--kx-fs-xs);
  font-weight: 400;
  color: var(--kx-text-3);
}

/* ---------------------------------------------------------------- 执行目标 */
.kx-mkt__target { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kx-sp-3); }
.kx-mkt__target-item { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-mkt__target-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-3);
  border: 1px dashed var(--kx-warning);
  border-radius: var(--kx-radius);
  background: var(--kx-warning-bg);
  color: var(--kx-warning);
  font-size: var(--kx-fs-xs);
}

/* 执行目标常驻卡片：放在功能标题正下方（2026-10-04 用户反馈：每次执行都要选，
   不该藏在「工作台」页签里 —— 切到其它页签也要随时看得见、随时能改） */
.kx-mkt__targetcard {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-4);
  border: 1px solid var(--kx-primary-border);
  border-radius: var(--kx-radius);
  background: var(--kx-primary-50);
}
.kx-mkt__targetcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-2); }
.kx-mkt__targetcard-icon { color: var(--kx-primary); }
.kx-mkt__targetcard-title { font-size: var(--kx-fs-sm); font-weight: var(--kx-fw-bold); color: var(--kx-text); }

/* ---------------------------------------------------------------- 操作按钮与实时状态 */
.kx-mkt__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  /* 吸底常驻：参数表单可能很长，切到别的页签也在 —— 让「重置 / 停止 / 执行」随时点得到 */
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: var(--kx-sp-3) 0;
  border-top: 1px solid var(--kx-border);
  background: var(--kx-surface);
  box-shadow: 0 -8px 14px -10px rgba(0, 0, 0, 0.18);
}
.kx-mkt__actions-right { display: flex; align-items: center; gap: var(--kx-sp-2); }

.kx-mkt__live {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-3);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
/* ⚠ 上面的 display:flex 是作者样式，会盖过 [hidden] 的浏览器默认 display:none →
   隐藏时仍占 40px 空条。显式补一条，保证空闲时实时状态条完全不占位。 */
.kx-mkt__live[hidden] { display: none; }
.kx-mkt__live.is-running { border-color: var(--kx-primary-border); background: var(--kx-primary-50); }
.kx-mkt__live-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-2); }

/* ---------------------------------------------------------------- 历史与详情 */
.kx-mkt__history { min-width: 0; }
.kx-mkt__steps { min-width: 0; }
.kx-mkt__detail { display: flex; flex-direction: column; gap: var(--kx-sp-4); }

.kx-mkt__stats-chips { display: flex; flex-wrap: wrap; gap: var(--kx-sp-2); }
.kx-mkt__stat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 4px 10px;
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}
.kx-mkt__stat-chip b { color: var(--kx-text); font-family: var(--kx-font-mono); }

.kx-mkt__filter { padding: var(--kx-sp-4); margin-bottom: var(--kx-sp-4); }

/* ---------------------------------------------------------------- 操作台页签 */
.kx-mkt__tabbody { display: flex; flex-direction: column; gap: var(--kx-sp-4); padding-top: var(--kx-sp-3); }
.kx-mkt__chart { width: 100%; min-height: 200px; }
/* 数据统计页签有 6 张卡，用三列更均衡 */
.kx-mkt__stats--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 异常日志接收页有 5 张卡，固定一行五列 */
.kx-mkt__stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* 教程页签：参数说明表与步骤清单 */
.kx-mkt__doc-text { color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: var(--kx-lh); }
.kx-mkt__doc-steps { margin: 0; padding-left: 20px; color: var(--kx-text-2); font-size: var(--kx-fs-xs); line-height: 1.9; }
.kx-mkt__doc-params { display: flex; flex-direction: column; gap: var(--kx-sp-2); overflow-x: auto; }
.kx-mkt__doc-group {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__doc-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--kx-fs-xs); }
.kx-mkt__doc-table th,
.kx-mkt__doc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--kx-border);
  text-align: left;
  vertical-align: top;
  line-height: var(--kx-lh);
}
.kx-mkt__doc-table th {
  background: var(--kx-surface-2);
  color: var(--kx-text-3);
  font-weight: var(--kx-fw-semibold);
  white-space: nowrap;
}
.kx-mkt__doc-table td { color: var(--kx-text-2); }
.kx-mkt__doc-code { font-family: var(--kx-font-mono); color: var(--kx-text); }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1200px) {
  .kx-mkt__workbench { grid-template-columns: minmax(0, 1fr); }
  .kx-mkt__list-scroll { max-height: 320px; }
}

@media (max-width: 900px) {
  .kx-mkt__toolbar { flex-direction: column; align-items: stretch; }
  .kx-mkt__toolbar-search { flex: 1 1 auto; }
  /* 窄屏先降为两列，仍保持成行；560px 以下才堆叠 */
  .kx-mkt__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .kx-mkt__target { grid-template-columns: minmax(0, 1fr); }
  .kx-mkt__panel { padding: var(--kx-sp-3); }
  .kx-mkt__actions { flex-direction: column; align-items: stretch; }
  .kx-mkt__actions-right { justify-content: flex-end; }
  .kx-mkt__chip { height: 28px; padding: 0 var(--kx-sp-3); font-size: var(--kx-fs-xs); }
}

@media (max-width: 560px) {
  .kx-mkt__stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 运维告警 */
.kx-alert__pack {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: var(--kx-sp-3);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.kx-alert__logs,
.kx-alert__trail { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-alert__log {
  display: flex;
  align-items: baseline;
  gap: var(--kx-sp-3);
  padding: 6px 10px;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}
.kx-alert__log.is-error { background: rgba(239, 68, 68, .08); color: var(--kx-danger); }
.kx-alert__trail-item {
  display: flex;
  align-items: baseline;
  gap: var(--kx-sp-3);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}
.kx-alert__trail-op { font-weight: var(--kx-fw-semibold); color: var(--kx-text); }

/* ============================================================
   抖音内容（资源中心 → 抖音内容）
   封面缩略图 / 表单里的封面选择块 / 素材选择弹窗的分页条
   ============================================================ */
.kx-dy-cover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--kx-radius-sm);
  overflow: hidden;
  background: var(--kx-surface-2);
}
.kx-dy-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-dy-cover__picker { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-dy-cover__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px dashed var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-xs);
  text-align: center;
}
.kx-dy-cover__box .kx-dy-cover__img { width: 100%; height: 100%; object-fit: cover; }
.kx-dy-cover__actions { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-dy-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kx-sp-3);
  margin-top: var(--kx-sp-3);
  font-size: var(--kx-fs-xs);
}

/* ============================================================
   内容工厂（客户档案 / 知识库 / 内容生成 / AI 消耗）
   前缀 kx-cf__，与其它页面的 kx-pf__ / kx-dy__ 互不干扰
   ============================================================ */

/* 顶部提示条 */
.kx-cf__tip {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

.kx-cf__hint {
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  line-height: 1.7;
}

.kx-cf__loading {
  grid-column: 1 / -1;
  padding: var(--kx-sp-4) 0;
  text-align: center;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

/* -------------------------------------------------- 客户档案：卡片网格 */
.kx-cf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--kx-sp-4);
  margin-top: var(--kx-sp-4);
}

/* 档案卡：顶部一条状态色描边（草稿橙 / 已确认绿），悬浮时微抬 + 描边变蓝 */
.kx-cf__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-2);
  overflow: hidden;
  transition: border-color var(--kx-dur) var(--kx-ease),
              box-shadow var(--kx-dur) var(--kx-ease),
              transform var(--kx-dur) var(--kx-ease);
}
.kx-cf__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kx-c-orange-grad);
}
.kx-cf__card.is-confirmed::before { background: var(--kx-c-green-grad); }
.kx-cf__card:hover {
  border-color: var(--kx-c-blue-border);
  box-shadow: var(--kx-shadow-md);
  transform: translateY(-2px);
}

.kx-cf__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kx-sp-2);
}
.kx-cf__card-head-main { min-width: 0; }
/* 右上角的「确认档案」按钮：不被标题挤扁 */
.kx-cf__card-head > .kx-btn { flex: none; }
.kx-cf__card-title {
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  line-height: 1.4;
}
/* 说明文字只占一行：它是固定说明，不该挤掉真正有用的版本/时间信息 */
.kx-cf__card-intro {
  margin-top: 2px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kx-cf__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  margin-top: var(--kx-sp-3);
}

/* 概览：左边完成度环 + 右边三行键值（数字用等宽，纵向对齐） */
.kx-cf__card-overview { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-cf__card-stats { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.kx-cf__stat { display: flex; align-items: baseline; gap: var(--kx-sp-2); font-size: var(--kx-fs-xs); }
.kx-cf__stat-label { flex: none; width: 44px; color: var(--kx-text-4); }
.kx-cf__stat-value {
  flex: 1;
  min-width: 0;
  color: var(--kx-text-2);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-cf__stat-value.is-ok { color: var(--kx-success); font-weight: var(--kx-fw-semibold); }

/* 状态条：缺哪些必填 / 已齐全 */
.kx-cf__hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--kx-radius);
  font-size: var(--kx-fs-xs);
  line-height: 1.6;
}
.kx-cf__hint .kx-icon { flex: none; margin-top: 1px; }
.kx-cf__hint-text { flex: 1; min-width: 0; }
.kx-cf__hint--warn { background: var(--kx-c-orange-soft); border-color: var(--kx-c-orange-border); color: var(--kx-c-orange-deep); }
.kx-cf__hint--ok { background: var(--kx-c-green-soft); border-color: var(--kx-c-green-border); color: var(--kx-c-green-deep); }

/* 动作区做成贴边页脚条：按钮不再「浮」在卡片正文里，且整体靠右对齐 */
.kx-cf__card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--kx-sp-2);
  margin: var(--kx-sp-4) calc(-1 * var(--kx-sp-4)) calc(-1 * var(--kx-sp-4));
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-top: 1px solid var(--kx-border);
  background: rgba(var(--kx-overlay-rgb), .04);
}

/* AI 生成进度（弹窗底部常驻，点击「开始生成」后才出现） */
.kx-cf__gen-progress {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--kx-sp-2);
}

.kx-cf__gen-progress.is-on { display: flex; }

.kx-cf__gen-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------------------------------------------------------
   客户档案 · 只读查看（分层展示：概要卡 + 分组卡 + 字段行）
   --------------------------------------------------------------------------- */
.kx-cf__view { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

/* 顶部概要：主色淡渐变，放「是谁 / 一句话定位 / 总览」 */
.kx-cf__view-hero {
  padding: var(--kx-sp-4);
  border: 1px solid var(--kx-c-blue-border);
  border-radius: var(--kx-radius-lg);
  background: linear-gradient(135deg, var(--kx-c-blue-soft) 0%, var(--kx-c-violet-soft) 100%);
}
.kx-cf__view-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kx-sp-3); }
.kx-cf__view-hero-title { font-size: var(--kx-fs-lg); font-weight: var(--kx-fw-semibold); color: var(--kx-text); line-height: 1.5; }
.kx-cf__view-hero-badges { display: flex; align-items: center; gap: var(--kx-sp-2); flex: none; }
.kx-cf__view-badge {
  padding: 2px 8px;
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-full);
  background: rgba(var(--kx-overlay-rgb), .06);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-xs);
  white-space: nowrap;
}
.kx-cf__view-hero-sub { margin-top: var(--kx-sp-2); font-size: var(--kx-fs); color: var(--kx-c-blue-deep); line-height: 1.7; }
.kx-cf__view-hero-summary { margin-top: var(--kx-sp-2); font-size: var(--kx-fs-sm); color: var(--kx-text-2); line-height: 1.85; }

/* 分组卡 */
.kx-cf__view-card {
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
}
.kx-cf__view-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  padding-bottom: var(--kx-sp-2);
  margin-bottom: var(--kx-sp-1);
  border-bottom: 1px dashed var(--kx-border);
}
.kx-cf__view-card-title { font-size: var(--kx-fs-sm); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-cf__view-card-count { font-size: var(--kx-fs-xs); color: var(--kx-text-4); font-variant-numeric: tabular-nums; }

/* 字段行：短内容左右排，长内容（textarea / 标签 / 人群）改成上下堆叠 */
.kx-cf__view-row { display: flex; gap: var(--kx-sp-3); padding: var(--kx-sp-2) 0; }
.kx-cf__view-row.is-stack { flex-direction: column; gap: var(--kx-sp-2); }
.kx-cf__view-label { flex: none; width: 92px; padding-top: 2px; font-size: var(--kx-fs-xs); font-weight: var(--kx-fw-semibold); color: var(--kx-text-3); }
.kx-cf__view-row.is-stack .kx-cf__view-label { width: auto; padding-top: 0; }
.kx-cf__view-value { flex: 1; min-width: 0; }
.kx-cf__view-text { font-size: var(--kx-fs); color: var(--kx-text); line-height: 1.85; white-space: pre-wrap; }
.kx-cf__view-empty { font-size: var(--kx-fs-sm); color: var(--kx-text-4); }

/* 逐条内容：小圆点 + 文本 */
.kx-cf__view-lines { display: flex; flex-direction: column; gap: 6px; }
.kx-cf__view-line { display: flex; gap: var(--kx-sp-2); font-size: var(--kx-fs); color: var(--kx-text); line-height: 1.8; }
.kx-cf__view-line-dot { flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--kx-primary); }
.kx-cf__view-line-text { flex: 1; min-width: 0; }

/* 标签组（复用标签控件的胶囊样式） */
.kx-cf__view-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* 目标人群：一类一张小卡 */
.kx-cf__view-aud { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-cf__view-aud-item {
  padding: var(--kx-sp-3);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: rgba(var(--kx-overlay-rgb), .04);
}
.kx-cf__view-aud-head { display: flex; align-items: center; gap: var(--kx-sp-2); margin-bottom: var(--kx-sp-2); }
.kx-cf__view-aud-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  background: var(--kx-gradient-primary);
  color: #fff;
  font-size: var(--kx-fs-xs);
}
.kx-cf__view-aud-name { font-size: var(--kx-fs-sm); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-cf__view-aud-age {
  padding: 1px 7px;
  border: 1px solid var(--kx-c-blue-border);
  border-radius: var(--kx-radius-full);
  background: var(--kx-c-blue-soft);
  color: var(--kx-c-blue-deep);
  font-size: var(--kx-fs-xs);
  white-space: nowrap;
}
.kx-cf__view-aud-row { display: flex; gap: var(--kx-sp-2); font-size: var(--kx-fs-sm); line-height: 1.8; }
.kx-cf__view-aud-row-label { flex: none; width: 34px; color: var(--kx-text-3); }
.kx-cf__view-aud-row-text { flex: 1; min-width: 0; color: var(--kx-text-2); }

.kx-cf__view-foot { padding-top: var(--kx-sp-1); text-align: right; font-size: var(--kx-fs-xs); color: var(--kx-text-4); }

/* 完成度环（纯 CSS conic-gradient，内含白心；满格时数字转绿） */
.kx-cf__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.kx-cf__ring-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kx-surface-2);
}

.kx-cf__ring-num {
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  font-variant-numeric: tabular-nums;
}
.kx-cf__ring.is-done .kx-cf__ring-num { color: var(--kx-success); }

/* -------------------------------------------------- 知识库：左类型 + 右表格 */
.kx-cf__split {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--kx-sp-4);
  margin-top: var(--kx-sp-4);
  align-items: start;
}

.kx-cf__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--kx-sp-2);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}

.kx-cf__side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  height: 34px;
  padding: 0 var(--kx-sp-3);
  border: none;
  border-radius: var(--kx-radius-sm);
  background: transparent;
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.kx-cf__side-item:hover {
  background: var(--kx-hover, rgba(37, 74, 138, .06));
  color: var(--kx-text);
}

.kx-cf__side-item.is-active {
  background: var(--kx-primary);
  color: #fff;
  font-weight: var(--kx-fw-semibold);
}

.kx-cf__side-hint {
  font-size: var(--kx-fs-2xs);
  opacity: .75;
}

.kx-cf__main {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4);
  min-width: 0;
}

.kx-cf__filters {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
}

.kx-cf__filters .kx-input {
  flex: 1 1 240px;
  max-width: 320px;
}

.kx-cf__filter-status {
  width: 160px;
}

/* -------------------------------------------------- 额度条 / 汇总 */
.kx-cf__quota,
.kx-cf__summary {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-6, 24px);
  flex-wrap: wrap;
}

.kx-cf__quota-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.kx-cf__quota-label {
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

.kx-cf__quota-num {
  font-size: var(--kx-fs-xl);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

.kx-cf__quota-note {
  flex: 1 1 100%;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  line-height: 1.7;
}

.kx-cf__summary {
  margin-top: var(--kx-sp-4);
}

.kx-cf__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--kx-sp-4);
  width: 100%;
}

.kx-cf__summary-item {
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}

.kx-cf__summary-label {
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

.kx-cf__summary-num {
  margin-top: 4px;
  font-size: var(--kx-fs-2xl);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

/* -------------------------------------------------- 生成参数区 */
.kx-cf__select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-4);
  margin-bottom: var(--kx-sp-3);
}

.kx-cf__rule-hint {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  margin-bottom: var(--kx-sp-3);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: rgba(var(--kx-primary-rgb), .06);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}

.kx-cf__gen-actions {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  flex-wrap: wrap;
  margin-top: var(--kx-sp-4);
  padding-top: var(--kx-sp-4);
  border-top: 1px solid var(--kx-border);
}

/* -------------------------------------------------- 生成结果 */
.kx-cf__result {
  margin-top: var(--kx-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
}

.kx-cf__usage {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}

.kx-cf__warn,
.kx-cf__viol {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
}

.kx-cf__warn {
  background: rgba(245, 158, 11, .08);
  color: var(--kx-warning);
}

.kx-cf__viol {
  background: rgba(239, 68, 68, .08);
  color: var(--kx-danger);
}

.kx-cf__result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  margin-bottom: var(--kx-sp-3);
}

.kx-cf__result-title {
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

.kx-cf__cand-list {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4);
}

/* 封面提示行 */
.kx-cf__field--cover { margin-top: var(--kx-sp-1); }
.kx-cf__field--cover .kx-cf__field-label { color: var(--kx-success); }
.kx-cf__field--cover .kx-cf__cover--none { color: var(--kx-warning); }

.kx-cf__cand {
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  overflow: hidden;
}

.kx-cf__cand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border);
}

.kx-cf__cand-index {
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text-2);
}

.kx-cf__cand-body {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3);
}

.kx-cf__field {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-1);
}

.kx-cf__field-label {
  display: flex;
  align-items: baseline;
  gap: var(--kx-sp-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

/* -------------------------------------------------- 上下文预览弹窗 */
.kx-cf__preview {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4);
}

.kx-cf__preview-title {
  margin-bottom: var(--kx-sp-2);
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

.kx-cf__preview-list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
  line-height: 1.9;
}

/* -------------------------------------------------- 窄屏 */
@media (max-width: 900px) {
  .kx-cf__split { grid-template-columns: minmax(0, 1fr); }
  .kx-cf__side { flex-direction: row; flex-wrap: wrap; }
  .kx-cf__side-item { width: auto; }
  .kx-cf__select-row { grid-template-columns: minmax(0, 1fr); }

  /* 三页通用：小屏下容器贴边、卡片布局竖排 */
  .kx-cf__grid { grid-template-columns: minmax(0, 1fr); }
  .kx-cf__card { gap: var(--kx-sp-3); }
  .kx-cf__card-body { flex-direction: row; align-items: center; }
  .kx-cf__gen-actions { flex-direction: column; }
  .kx-cf__gen-actions .kx-btn { width: 100%; }
  .kx-cf__main { gap: var(--kx-sp-3); }
  .kx-cf__quota { flex-wrap: wrap; }
  .kx-cf__quota-item { flex: 1 1 auto; min-width: 120px; }
  .kx-cf__result-head { flex-direction: column; align-items: flex-start; gap: var(--kx-sp-2); }

  /* 弹窗在小屏占满可用宽度（组件层只给 560px 上限） */
  .kx-modal { max-width: 100%; }
  .kx-modal__body { padding: var(--kx-sp-2) var(--kx-sp-4) var(--kx-sp-4); }
  .kx-modal__head, .kx-form { padding-left: var(--kx-sp-4); padding-right: var(--kx-sp-4); }
}

@media (max-width: 560px) {
  .kx-cf__card-body { flex-direction: column; align-items: stretch; }
  .kx-cf__card-foot { flex-wrap: wrap; }
  /* 小屏下按钮至少占半行（flex:1 会把 4 个按钮压成等分窄条、文字挤爆） */
  .kx-cf__card-foot .kx-btn { flex: 1 1 calc(50% - var(--kx-sp-2)); justify-content: center; }
  .kx-page-head { flex-wrap: wrap; gap: var(--kx-sp-3); }
  .kx-page-head__actions { width: 100%; }
  .kx-cf__side-item { height: 32px; }
  .kx-cf__cand-body { padding: var(--kx-sp-3) !important; }
  .kx-cf__field { gap: var(--kx-sp-2); }
}

/* ============================================================
   代理商管理（商业化 → 代理商管理，仅平台侧可见）
   四个全局页签（列表·账号·权限·费用）/ 费用汇总与额度分布
   ============================================================ */

/* 各页签内部纵向堆叠（页签内容不在 .kx-page 的 gap 体系内） */
.kx-agent__stack { display: flex; flex-direction: column; gap: var(--kx-sp-5); }

/* 总览 / 费用汇总：四列统计卡 */
.kx-agent__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 总览统计概览弹层：八张卡常驻太占地方，收进右上角「数据」图标（用户 2026-10-04） */
.kx-agent__statpop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--kx-z-dropdown);
  width: 780px;
  max-width: calc(100vw - 32px);
  padding: var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-solid);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .35);
}
/* ⚠ 作者样式会盖过 [hidden] 的 UA 规则，必须显式补一条（踩过一次：留出空条） */
.kx-agent__statpop[hidden] { display: none; }
.kx-agent__statpop-head {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  margin-bottom: var(--kx-sp-3);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
}
.kx-agent__statpop-head .kx-icon { color: var(--kx-primary); }
/* 面板只有 780px，四列会挤成一条 —— 面板内改成三列 */
.kx-agent__statpop .kx-agent__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 代理商卡片网格（「代理商列表」页签，用户 2026-10-04：列表改成卡片样式） */
.kx-agent__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--kx-sp-4);
}
.kx-agent__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--kx-sp-4);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  /* 顶部一层极淡主色 + 内部再叠色块，拉开层次 */
  background: linear-gradient(180deg, var(--kx-primary-50) 0%, var(--kx-surface-2) 26%);
  overflow: hidden;
  transition: border-color var(--kx-dur) var(--kx-ease),
              box-shadow var(--kx-dur) var(--kx-ease),
              transform var(--kx-dur) var(--kx-ease);
}
/* 顶部渐变描边：正常=蓝紫渐变，停用=灰（沿用 .kx-cf__card 的做法） */
.kx-agent__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kx-c-blue-grad);
}
.kx-agent__card.is-off::before { background: var(--kx-border); }
.kx-agent__card:hover {
  border-color: var(--kx-c-blue-border);
  box-shadow: var(--kx-c-blue-glow);
  transform: translateY(-2px);
}
/* 停用的代理商整卡降透明度 */
.kx-agent__card.is-off { opacity: .68; }

/* 头部：首字头像 + 名称 + 状态 */
.kx-agent__card-head {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
}
.kx-agent__card-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--kx-c-blue-grad);
  color: #fff;
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  box-shadow: var(--kx-c-blue-glow);
}
.kx-agent__card.is-off .kx-agent__card-avatar { background: var(--kx-border); box-shadow: none; }
.kx-agent__card-head-main { flex: 1; min-width: 0; }
.kx-agent__card-head > .kx-tag { flex: none; }
/* 状态标签组：正常/停用 + 已终止 */
.kx-agent__card-tags { flex: none; display: flex; align-items: center; gap: 4px; }
.kx-agent__card-title {
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  line-height: 1.4;
}
.kx-agent__card-code {
  margin-top: 2px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

/* 联系方式：整块浅底色块 */
.kx-agent__card-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px var(--kx-sp-3);
  margin-top: var(--kx-sp-3);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--kx-surface-3);
}
.kx-agent__card-info {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}
.kx-agent__card-info.is-wide { grid-column: 1 / -1; }
.kx-agent__card-info-icon { flex: none; color: var(--kx-primary); opacity: .85; }

/* 区块：资源额度 / 经营概览 */
.kx-agent__card-block { margin-top: var(--kx-sp-3); }
/* 区块标题做成色块胶囊 */
.kx-agent__card-section {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
}
.kx-agent__card-section.is-blue {
  background: var(--kx-c-blue-soft);
  border-color: var(--kx-c-blue-border);
  color: var(--kx-c-blue-deep);
}
.kx-agent__card-section.is-violet {
  background: var(--kx-c-violet-soft);
  border-color: var(--kx-c-violet-border);
  color: var(--kx-c-violet-deep);
}
.kx-agent__card-section::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
}

/* 额度色块（蓝 / 紫） */
.kx-agent__card-quotas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-2);
}
.kx-agent__card-quota {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.kx-agent__card-quota.is-blue {
  background: var(--kx-c-blue-soft);
  border-color: var(--kx-c-blue-border);
}
.kx-agent__card-quota.is-violet {
  background: var(--kx-c-violet-soft);
  border-color: var(--kx-c-violet-border);
}
.kx-agent__card-quota .kx-agent__card-metric-label { color: var(--kx-text-2); }
.kx-agent__card-quota-value {
  margin-left: auto;
  padding-left: 6px;
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text-2);
  font-variant-numeric: tabular-nums;
}
.kx-agent__card-quota-value.is-full { color: var(--kx-c-red); }
.kx-agent__card-quota-track {
  height: 5px;
  margin-top: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .62);
  overflow: hidden;
}
.kx-agent__card-quota-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width var(--kx-dur) var(--kx-ease);
}
.kx-agent__card-quota.is-blue .kx-agent__card-quota-fill { background: var(--kx-c-blue-grad); }
.kx-agent__card-quota.is-violet .kx-agent__card-quota-fill { background: var(--kx-c-violet-grad); }
.kx-agent__card-quota-fill.is-full { background: var(--kx-c-red-grad); }
/* 不限额度：轨道走虚线，避免「0% 进度条」看起来像坏了 */
.kx-agent__card-quota-track.is-unlimited {
  background: repeating-linear-gradient(90deg, var(--kx-c-blue-border) 0 5px, transparent 5px 11px);
  opacity: .5;
}

/* 经营概览：三列彩色指标（每格一个浅底色块 + 彩色图标块） */
.kx-agent__card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-2);
}
.kx-agent__card-metric {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--kx-surface-3);
}
.kx-agent__card-metric-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* 图标色块 */
.kx-agent__card-metric-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--kx-c-blue-soft);
  color: var(--kx-c-blue);
}
.kx-agent__card-metric-icon.is-blue   { background: var(--kx-c-blue-soft);   color: var(--kx-c-blue); }
.kx-agent__card-metric-icon.is-cyan   { background: var(--kx-c-cyan-soft);   color: var(--kx-c-cyan); }
.kx-agent__card-metric-icon.is-green  { background: var(--kx-c-green-soft);  color: var(--kx-c-green); }
.kx-agent__card-metric-icon.is-violet { background: var(--kx-c-violet-soft); color: var(--kx-c-violet); }
.kx-agent__card-metric-icon.is-orange { background: var(--kx-c-orange-soft); color: var(--kx-c-orange); }
.kx-agent__card-metric-icon.is-pink   { background: var(--kx-c-pink-soft);   color: var(--kx-c-pink); }
.kx-agent__card-metric-label {
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kx-agent__card-metric-value {
  margin-top: 4px;
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部小图标（创建时间）—— 不套用指标色块 */
.kx-agent__card-foot-icon { flex: none; color: var(--kx-text-3); }

/* 底部：创建时间 + 操作 */
.kx-agent__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-3);
  padding-top: var(--kx-sp-3);
  border-top: 1px solid var(--kx-border-soft);
}
.kx-agent__card-created {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}
.kx-agent__card-ops { display: flex; align-items: center; gap: var(--kx-sp-1); flex: none; }

.kx-agent__pagefoot { margin-top: var(--kx-sp-4); }

/* 代理商账号操作列：图标 + 文字（用户 2026-10-04：操作按钮除了图标还要有文字） */
.kx-agent__op { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.kx-agent__opbtn { gap: 4px; height: 26px; padding: 0 8px; white-space: nowrap; }

/* 状态列：账号状态 + 代理商已终止，两个标签并排 */
.kx-agent__tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* 角色名 + 「平台内置」标签 */
.kx-agent__role-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kx-agent__role-name > .kx-tag { flex: none; }

/* 快捷时间按钮组 */
.kx-agent__quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 表格右上角的筛选下拉（订单状态 / 流水类型） */
.kx-agent__filter { width: 150px; }
.kx-agent__filter .kx-select,
.kx-agent__filter .kx-input-wrap { width: 100%; }

/* 资源额度进度条组 */
.kx-agent__quota-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kx-sp-4) var(--kx-sp-5); }

/* 订单状态分布 */
.kx-agent__dist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kx-sp-4); }
.kx-agent__dist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
.kx-agent__dist-label { display: flex; align-items: center; }
.kx-agent__dist-num { font-size: var(--kx-fs-xl); font-weight: 700; color: var(--kx-text); font-variant-numeric: tabular-nums; }
.kx-agent__dist-amount { font-size: var(--kx-fs-xs); color: var(--kx-text-2); font-variant-numeric: tabular-nums; }

/* 角色标签组 */
.kx-agent__role-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* 按日趋势表格滚动区 */
.kx-agent__trend-wrap { max-height: 360px; overflow: auto; }

/* 账号 / 口令展示弹窗 */
.kx-agent__pwd { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-agent__pwd-row { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-agent__pwd-label { flex: none; width: 48px; font-size: var(--kx-fs-sm); color: var(--kx-text-3); }
.kx-agent__pwd-value {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text);
  word-break: break-all;
}

/* 权限配置抽屉 */
.kx-agent__perm-tools { display: flex; align-items: center; gap: var(--kx-sp-2); margin-bottom: var(--kx-sp-3); flex-wrap: wrap; }
.kx-agent__perm-tree {
  max-height: 460px;
  overflow: auto;
  padding: var(--kx-sp-2);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
}

/* 费用页签的订单明细 / 资金流水抽屉：顶部筛选与表格留白 */
.kx-agent__drawer-filter { margin-bottom: var(--kx-sp-3); }

@media (max-width: 1200px) {
  .kx-agent__quota-grid,
  .kx-agent__dist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .kx-agent__stats,
  .kx-agent__quota-grid,
  .kx-agent__dist-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================= 用户授权（/system/user-grant） ================= */
.kx-grant { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-grant__picker { max-width: 460px; }
.kx-grant__panels { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

.kx-grant__meta { display: flex; flex-wrap: wrap; gap: var(--kx-sp-2) 32px; }
.kx-grant__meta-item { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 170px; }
.kx-grant__meta-label { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-grant__meta-value { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }

.kx-grant__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--kx-sp-2) var(--kx-sp-3); }
.kx-grant__check {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 6px 10px;
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-2);
  cursor: pointer;
}
.kx-grant__check.is-disabled { opacity: .6; cursor: not-allowed; }
.kx-grant__check-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kx-fs-sm); }
.kx-grant__check-extra { flex: none; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }

.kx-grant__tools { display: flex; align-items: center; gap: var(--kx-sp-2); margin-bottom: var(--kx-sp-3); flex-wrap: wrap; }
.kx-grant__tools .kx-input { width: 240px; }
.kx-grant__tools .kx-grant__plat { width: 150px; flex: none; }

.kx-grant__quota { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--kx-sp-3); }
.kx-grant__quota-item { display: flex; flex-direction: column; gap: 4px; }
.kx-grant__quota-label { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }

.kx-grant__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--kx-sp-3); }
.kx-grant__empty { display: flex; align-items: center; justify-content: center; gap: var(--kx-sp-2); padding: 28px 0; color: var(--kx-text-3); }

/* ============================================================
   平台分类（/admin/script/platform）
   前缀 kx-pf__：一张卡片一个平台
   ============================================================ */

/* 加载态 / 空态提示 */
.kx-pf__hint {
  padding: var(--kx-sp-6) 0;
  text-align: center;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

.kx-pf__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--kx-sp-4);
}

/* 平台卡：沿用 .kx-card 的玻璃底，这里只管内部排版 */
.kx-pf__card {
  display: flex;
  flex-direction: column;
  padding: var(--kx-sp-4);
}
/* 停用平台整体压暗，但保留可见性与操作按钮 */
.kx-pf__card.is-disabled { opacity: .62; }
.kx-pf__card.is-disabled:hover { transform: none; box-shadow: var(--kx-shadow-xs); }

/* 头部：品牌图标 + 名称 / 编码 */
.kx-pf__head { display: flex; align-items: center; gap: var(--kx-sp-3); }
.kx-pf__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kx-c-blue-border);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-c-blue-soft);
  color: var(--kx-primary);
}
.kx-pf__ident { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.kx-pf__title { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 0; }
.kx-pf__name {
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-pf__title > .kx-tag { flex: none; }
.kx-pf__code {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 正文：包名 / 启动页 / 支持任务 / 备注 */
.kx-pf__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: var(--kx-sp-3);
  padding-top: var(--kx-sp-3);
  border-top: 1px dashed var(--kx-border);
}
.kx-pf__row { display: flex; align-items: baseline; gap: var(--kx-sp-2); min-width: 0; font-size: var(--kx-fs-xs); }
.kx-pf__label { flex: none; width: 52px; color: var(--kx-text-4); }
.kx-pf__value {
  flex: 1;
  min-width: 0;
  color: var(--kx-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-pf__value.is-mono { font-family: var(--kx-font-mono); }
.kx-pf__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-1); flex: 1; min-width: 0; }

/* 底部贴边条：被引用数靠左、排序 + 操作靠右 */
.kx-pf__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  margin: var(--kx-sp-4) calc(-1 * var(--kx-sp-4)) calc(-1 * var(--kx-sp-4));
  padding: var(--kx-sp-2) var(--kx-sp-4);
  border-top: 1px solid var(--kx-border);
  background: rgba(var(--kx-overlay-rgb), .04);
}
.kx-pf__acts { display: flex; align-items: center; gap: var(--kx-sp-1); flex: none; }
.kx-pf__sort { font-size: var(--kx-fs-xs); color: var(--kx-text-4); white-space: nowrap; }

@media (max-width: 640px) {
  .kx-pf__grid { grid-template-columns: minmax(0, 1fr); }
  .kx-pf__label { width: 46px; }
}

/* ============================================================================
   17. 系统教程（使用说明书文档页）
   左侧章节导航 + 右侧正文；正文是纯 HTML 片段（public/assets/docs/manual-*.html），
   所以这里只负责「把文档排版得能读」：标题层级、段落、列表、表格、代码、提示块。
   仅允许使用 CSS 变量，禁止硬编码色值
   ========================================================================== */
.kx-doc-split {
  display: grid;
  gap: var(--kx-sp-5);
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
}
/* 章节导航：吸附在视口内，自身可滚动（文档很长，不能让导航把页面撑爆） */
.kx-doc-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--kx-topbar-h) - var(--kx-sp-8));
  overflow: hidden;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow-xs);
}
.kx-doc-nav__head {
  padding: var(--kx-sp-4) var(--kx-sp-4) var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}
.kx-doc-nav__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--kx-sp-2) 0; }
.kx-doc-nav__item {
  display: block;
  padding: var(--kx-sp-2) var(--kx-sp-4);
  font-size: var(--kx-fs-sm);
  line-height: var(--kx-lh);
  color: var(--kx-text-2);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.kx-doc-nav__item:hover { background: var(--kx-surface-3); color: var(--kx-text); }
.kx-doc-nav__item.is-active {
  color: var(--kx-primary);
  border-left-color: var(--kx-primary);
  background: var(--kx-primary-50);
  font-weight: var(--kx-fw-medium);
}

/* 正文容器 */
.kx-doc {
  padding: var(--kx-sp-6);
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-border-2);
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow-xs);
  font-size: var(--kx-fs);
  line-height: var(--kx-lh);
  color: var(--kx-text-2);
}
.kx-doc > section { scroll-margin-top: var(--kx-sp-6); }
.kx-doc > section + section {
  margin-top: var(--kx-sp-6);
  padding-top: var(--kx-sp-6);
  border-top: 1px solid var(--kx-border-2);
}
.kx-doc h2 {
  margin: 0 0 var(--kx-sp-4);
  font-size: var(--kx-fs-xl);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  letter-spacing: .2px;
}
.kx-doc h3 {
  margin: var(--kx-sp-5) 0 var(--kx-sp-3);
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}
.kx-doc h4 {
  margin: var(--kx-sp-4) 0 var(--kx-sp-2);
  font-size: var(--kx-fs);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text-2);
}
.kx-doc p { margin: 0 0 var(--kx-sp-3); }
.kx-doc strong { color: var(--kx-text); font-weight: var(--kx-fw-semibold); }
.kx-doc ul,
.kx-doc ol { margin: 0 0 var(--kx-sp-3); padding-left: 20px; }
.kx-doc li { margin: var(--kx-sp-1) 0; }
.kx-doc li > ul,
.kx-doc li > ol { margin: var(--kx-sp-1) 0 var(--kx-sp-1); }
/* 步骤类有序列表：序号带主色，扫一眼能看出「第几步」 */
.kx-doc > section > ol { padding-left: 0; list-style: none; counter-reset: kx-doc-step; }
.kx-doc > section > ol > li {
  position: relative;
  counter-increment: kx-doc-step;
  padding-left: 30px;
  margin: var(--kx-sp-2) 0;
}
.kx-doc > section > ol > li::before {
  content: counter(kx-doc-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kx-primary-soft);
  color: var(--kx-primary);
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  line-height: 20px;
  text-align: center;
}
.kx-doc code {
  padding: 1px 5px;
  border-radius: var(--kx-radius-xs);
  background: var(--kx-surface-3);
  border: 1px solid var(--kx-border-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text);
  word-break: break-all;
}
.kx-doc table {
  width: 100%;
  margin: 0 0 var(--kx-sp-4);
  border-collapse: collapse;
  font-size: var(--kx-fs-sm);
}
.kx-doc thead th {
  text-align: left;
  padding: var(--kx-sp-2) var(--kx-sp-3);
  background: var(--kx-surface-3);
  border: 1px solid var(--kx-border-2);
  color: var(--kx-text);
  font-weight: var(--kx-fw-semibold);
  white-space: nowrap;
}
.kx-doc td {
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border: 1px solid var(--kx-border-2);
  vertical-align: top;
}
.kx-doc tbody tr:hover td { background: var(--kx-surface-3); }
/* 提示块 / 必填标记：文档里最常用的两个装饰 */
.kx-doc .doc-note {
  margin: var(--kx-sp-3) 0;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-left: 3px solid var(--kx-primary);
  border-radius: 0 var(--kx-radius-sm) var(--kx-radius-sm) 0;
  background: var(--kx-primary-50);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
}
.kx-doc .doc-tag {
  color: var(--kx-danger);
  font-weight: var(--kx-fw-semibold);
  margin-left: 2px;
}
/* 加载中 / 加载失败 */
.kx-doc__placeholder {
  padding: var(--kx-sp-8) 0;
  text-align: center;
  color: var(--kx-text-3);
  font-size: var(--kx-fs-sm);
}

@media (max-width: 1024px) {
  .kx-doc-split { grid-template-columns: minmax(0, 1fr); }
  .kx-doc-nav { position: static; max-height: none; }
  .kx-doc-nav__body { max-height: 220px; }
}

/* ============================================================================
   行业专家（行业库 / 行业方案 / 获客优化）
   ----------------------------------------------------------------------------
   页面骨架复用全站既有类（.kx-page-head / .kx-card / .kx-cf__filters / .kx-cf__split /
   .kx-bp__op / .kx-tabs），这里只补充「行业专家」特有的展示块：
     · AI 结构化结果的渲染（画像 / 赋能概述 / 优化项）—— .kx-ex__body 一族
     · 方案总览的指标卡与阶段分组 —— .kx-ex__stat / .kx-ex__stage
     · 长耗时 AI 调用的等待态 —— .kx-ex__wait
   颜色全部走 tokens，不写死色值，深色模式下自动跟随。
   ============================================================================ */

/* ---------------------------------------------------------------- 页面骨架 */

.kx-ex__page {
  display: flex;
  flex-direction: column;
  gap: var(--kx-page-gap);
}

.kx-ex__pickerbar {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
}

.kx-ex__pickerbar-k {
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-3);
  white-space: nowrap;
}

.kx-ex__picker { min-width: 260px; }

/* 表格里的两行小字（行业名 + 编码） */
.kx-ex__name { display: flex; flex-direction: column; gap: 2px; }

/* 「AI 分析」列里的两个状态标签并排 */
.kx-ex__aitags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.kx-ex__sub {
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  white-space: nowrap;
}

.kx-ex__sidecard { align-self: flex-start; }

/* ---------------------------------------------------------------- 行业主卡（页面第 1 层）
   把「当前行业」从整页里挑出来：主色竖条 + 渐变底 + 20px 粗标题 + 元信息胶囊。
   同一页里字号从 20px 一路排到 11px，才有层次，不是一片 13px。 */

.kx-ex__hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kx-sp-4);
  flex-wrap: wrap;
  padding: var(--kx-sp-4) var(--kx-sp-5);
  margin-bottom: var(--kx-sp-4);
  border-radius: var(--kx-radius-lg);
  background: linear-gradient(102deg, var(--kx-primary-100) 0%, var(--kx-primary-50) 48%, transparent 100%);
  border: 1px solid var(--kx-primary-border);
  overflow: hidden;
}

.kx-ex__hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kx-gradient-primary);
}

.kx-ex__hero-main { display: flex; flex-direction: column; gap: var(--kx-sp-2); min-width: 0; }

.kx-ex__hero-top { display: flex; align-items: center; gap: var(--kx-sp-3); flex-wrap: wrap; }

.kx-ex__hero-name {
  margin: 0;
  font-size: var(--kx-fs-2xl);
  font-weight: var(--kx-fw-bold);
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--kx-text);
}

.kx-ex__hero-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.kx-ex__hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-xs);
  line-height: 1.6;
  color: var(--kx-text-2);
}

.kx-ex__hero-chip .kx-icon { color: var(--kx-primary); }

.kx-ex__hero-actions { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- 指标卡（页面第 2 层） */

.kx-ex__overview { display: flex; flex-direction: column; gap: var(--kx-sp-4); }

.kx-ex__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--kx-sp-3);
}

.kx-ex__stat {
  --st: var(--kx-primary);
  --st-soft: var(--kx-primary-soft);
  position: relative;
  padding: var(--kx-sp-3) var(--kx-sp-4) var(--kx-sp-4);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-soft);
  overflow: hidden;
}

/* 顶部色条：四个指标一眼分得开 */
.kx-ex__stat::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--st);
  opacity: .85;
}

.kx-ex__stat--info { --st: var(--kx-c-cyan); --st-soft: var(--kx-c-cyan-soft); }
.kx-ex__stat--warning { --st: var(--kx-c-orange); --st-soft: var(--kx-c-orange-soft); }
.kx-ex__stat--success { --st: var(--kx-c-green); --st-soft: var(--kx-c-green-soft); }
.kx-ex__stat--violet { --st: var(--kx-c-violet); --st-soft: var(--kx-c-violet-soft); }

.kx-ex__stat-top { display: flex; align-items: center; gap: 7px; margin-bottom: var(--kx-sp-2); }

.kx-ex__stat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--st-soft);
  color: var(--st);
}

.kx-ex__stat-k { font-size: var(--kx-fs-xs); color: var(--kx-text-3); letter-spacing: .02em; }

.kx-ex__stat-v {
  font-size: var(--kx-fs-4xl);
  font-weight: var(--kx-fw-bold);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--kx-text);
  font-variant-numeric: tabular-nums;
}

.kx-ex__stat-h { margin-top: 6px; font-size: var(--kx-fs-xs); line-height: 1.6; color: var(--kx-text-3); }

/* 文字型取值（如「平台预置」）：降一档字号，别跟数字一样大 */
.kx-ex__stat-v--text { font-size: var(--kx-fs-lg); font-weight: var(--kx-fw-semibold); line-height: 1.5; }

/* ---------------------------------------------------------------- 大分区（页面第 3 层）
   编号徽章 + 16px 标题 + 副标题，把整页切成「画像 / 赋能」两块 */

.kx-ex__sec,
.kx-ex__panel {
  padding: var(--kx-sp-4);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-border-soft);
}

.kx-ex__sec-head { display: flex; align-items: flex-start; gap: var(--kx-sp-3); margin-bottom: var(--kx-sp-4); }

.kx-ex__sec-idx {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--kx-gradient-primary);
  color: #fff;
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--kx-shadow-primary);
}

.kx-ex__sec-headmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.kx-ex__sec-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kx-fs-lg);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

.kx-ex__sec-title .kx-icon { color: var(--kx-primary); }

.kx-ex__sec-sub { font-size: var(--kx-fs-xs); line-height: 1.6; color: var(--kx-text-3); }

.kx-ex__body { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

/* ---------------------------------------------------------------- 字段卡（页面第 4 层）
   一个字段一张卡，色调由 --fc 一族决定：卡头图标 / 导语底色 / 序号 / 列表标记全跟着走，
   所以同一页里既有蓝、又有紫、橙、绿、红，不会一路蓝到底。 */

.kx-ex__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--kx-sp-3);
}

.kx-ex__fc--wide { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .kx-ex__fields { grid-template-columns: 1fr; }
}

.kx-ex__fc {
  --fc: var(--kx-c-blue-deep);
  --fc-solid: var(--kx-c-blue);
  --fc-soft: var(--kx-c-blue-soft);
  --fc-border: var(--kx-c-blue-border);
  --fc-bar: var(--kx-c-blue-grad);
  min-width: 0;
  padding: var(--kx-sp-3) var(--kx-sp-4) var(--kx-sp-4);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-3);
  border: 1px solid var(--kx-border-soft);
}

.kx-ex__fc--cyan { --fc: var(--kx-c-cyan-deep); --fc-solid: var(--kx-c-cyan); --fc-soft: var(--kx-c-cyan-soft); --fc-border: var(--kx-c-cyan-border); --fc-bar: var(--kx-c-cyan-grad); }
.kx-ex__fc--violet { --fc: var(--kx-c-violet-deep); --fc-solid: var(--kx-c-violet); --fc-soft: var(--kx-c-violet-soft); --fc-border: var(--kx-c-violet-border); --fc-bar: var(--kx-c-violet-grad); }
.kx-ex__fc--green { --fc: var(--kx-c-green-deep); --fc-solid: var(--kx-c-green); --fc-soft: var(--kx-c-green-soft); --fc-border: var(--kx-c-green-border); --fc-bar: var(--kx-c-green-grad); }
.kx-ex__fc--orange { --fc: var(--kx-c-orange-deep); --fc-solid: var(--kx-c-orange); --fc-soft: var(--kx-c-orange-soft); --fc-border: var(--kx-c-orange-border); --fc-bar: var(--kx-c-orange-grad); }
.kx-ex__fc--red { --fc: var(--kx-c-red-deep); --fc-solid: var(--kx-c-red); --fc-soft: var(--kx-c-red-soft); --fc-border: var(--kx-c-red-border); --fc-bar: var(--kx-c-red-grad); }

.kx-ex__fc-head { display: flex; align-items: center; gap: 7px; margin-bottom: var(--kx-sp-3); }

.kx-ex__fc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--fc-soft);
  color: var(--fc-solid);
}

.kx-ex__fc-k {
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  letter-spacing: .08em;
  color: var(--fc);
}

.kx-ex__fc-n {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

/* 导语：一句话结论 —— 15px / 中等字重 / 左侧强调条，跟 13px 正文明确拉开 */
.kx-ex__lead {
  margin: 0;
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border-radius: 0 var(--kx-radius) var(--kx-radius) 0;
  border-left: 3px solid var(--fc-solid, var(--kx-primary));
  background: var(--fc-soft, var(--kx-primary-50));
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-medium);
  line-height: 1.85;
  color: var(--kx-text);
}

/* 编号步骤（有先后的内容：决策链路 / 核心打法） */
.kx-ex__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kx-ex__step { display: flex; align-items: flex-start; gap: var(--kx-sp-3); }

.kx-ex__step-i {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-soft, var(--kx-primary-soft));
  border: 1px solid var(--fc-border, var(--kx-primary-border));
  color: var(--fc, var(--kx-primary));
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-bold);
  font-variant-numeric: tabular-nums;
}

.kx-ex__step-t { font-size: var(--kx-fs-sm); line-height: 1.8; color: var(--kx-text-2); }

/* 标签云（短词：痛点 / 禁忌 / 搜索词 / 指标） */
.kx-ex__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.kx-ex__chip {
  padding: 3px 10px;
  border-radius: var(--kx-radius-full);
  background: var(--fc-soft, var(--kx-primary-soft));
  border: 1px solid var(--fc-border, var(--kx-primary-border));
  color: var(--fc, var(--kx-primary));
  font-size: var(--kx-fs-xs);
  line-height: 1.6;
}

.kx-ex__chip--sm {
  padding: 1px 8px;
  background: var(--kx-surface-3);
  border-color: var(--kx-border-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-2xs);
}

/* 要点列表（整句：内容偏好 / 风险提示） */
.kx-ex__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.kx-ex__bullets li {
  position: relative;
  padding-left: 16px;
  font-size: var(--kx-fs-sm);
  line-height: 1.8;
  color: var(--kx-text-2);
}

.kx-ex__bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--fc-solid, var(--kx-primary));
  opacity: .55;
}

/* 人群构成：一张卡 = 一类人（占比条 + 事实标签 + 场景） */
.kx-ex__segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--kx-sp-3); }

.kx-ex__seg {
  min-width: 0;
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
}

.kx-ex__seg-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kx-sp-2); }
.kx-ex__seg-name { font-size: var(--kx-fs-md); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }

.kx-ex__seg-ratio {
  font-size: var(--kx-fs-xl);
  font-weight: var(--kx-fw-bold);
  line-height: 1;
  color: var(--fc, var(--kx-c-violet-deep));
  font-variant-numeric: tabular-nums;
}

.kx-ex__seg-bar,
.kx-ex__plat-bar {
  margin: 9px 0 10px;
  height: 4px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-3);
  overflow: hidden;
}

.kx-ex__seg-bar i,
.kx-ex__plat-bar i { display: block; height: 100%; border-radius: var(--kx-radius-full); }
.kx-ex__seg-bar i { background: var(--fc-bar, var(--kx-c-violet-grad)); }
.kx-ex__plat-bar i { background: var(--fc-bar, var(--kx-c-cyan-grad)); }

.kx-ex__seg-desc { font-size: var(--kx-fs-sm); line-height: 1.75; color: var(--kx-text-2); }
.kx-ex__seg-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--kx-sp-2); }

.kx-ex__seg-kv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--kx-sp-2);
  padding-top: var(--kx-sp-2);
  border-top: 1px dashed var(--kx-border-soft);
}

/* 活跃平台：一张卡 = 一个平台（权重条 + 行为 + 时段） */
.kx-ex__plats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--kx-sp-3); }

.kx-ex__plat {
  min-width: 0;
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
}

.kx-ex__plat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kx-sp-2); }
.kx-ex__plat-name { font-size: var(--kx-fs-md); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }

.kx-ex__plat-w {
  font-size: var(--kx-fs-lg);
  font-weight: var(--kx-fw-bold);
  line-height: 1;
  color: var(--fc, var(--kx-c-cyan-deep));
  font-variant-numeric: tabular-nums;
}

.kx-ex__plat-b { font-size: var(--kx-fs-sm); line-height: 1.75; color: var(--kx-text-2); }

.kx-ex__plat-time {
  display: flex;
  gap: 6px;
  margin-top: var(--kx-sp-2);
  padding-top: var(--kx-sp-2);
  border-top: 1px dashed var(--kx-border-soft);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-2);
}

.kx-ex__plat-time-k { flex: none; color: var(--kx-text-3); }

/* 阶段计划：一个阶段一块（序号 + 阶段名 + KPI + 目标 + 动作） */
.kx-ex__stages { display: flex; flex-direction: column; gap: var(--kx-sp-2); }

.kx-ex__sp {
  display: flex;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
}

.kx-ex__sp-i {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-soft, var(--kx-primary-soft));
  border: 1px solid var(--fc-border, var(--kx-primary-border));
  color: var(--fc, var(--kx-primary));
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-bold);
  font-variant-numeric: tabular-nums;
}

.kx-ex__sp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kx-ex__sp-head { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-ex__sp-name { font-size: var(--kx-fs-md); font-weight: var(--kx-fw-semibold); color: var(--kx-text); letter-spacing: .02em; }

.kx-ex__sp-goal { display: flex; gap: 6px; font-size: var(--kx-fs-sm); line-height: 1.75; color: var(--kx-text-2); }

.kx-ex__sp-goal-k {
  flex: none;
  align-self: flex-start;
  padding: 0 6px;
  border-radius: var(--kx-radius-xs);
  background: var(--kx-surface-3);
  font-size: var(--kx-fs-2xs);
  line-height: 1.7;
  color: var(--kx-text-3);
}

/* ---------------------------------------------------------------- 通用文本块
   （获客优化页与兜底字段仍在用：.kx-ex__block / .kx-ex__list / .kx-ex__cards） */

.kx-ex__block-k {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  margin-bottom: 6px;
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text-3);
  letter-spacing: .02em;
}

.kx-ex__p {
  font-size: var(--kx-fs-sm);
  line-height: 1.75;
  color: var(--kx-text-2);
}

/* AI 正文是按分点换行写的，必须保留换行，否则糊成一坨 */
.kx-ex__p-pre { white-space: pre-wrap; word-break: break-word; }

.kx-ex__list {
  margin: 0;
  padding-left: 18px;
  font-size: var(--kx-fs-sm);
  line-height: 1.8;
  color: var(--kx-text-2);
}

.kx-ex__list li { margin: 2px 0; }

.kx-ex__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kx-sp-3);
}

.kx-ex__card {
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
}

.kx-ex__kv { display: flex; gap: 8px; font-size: var(--kx-fs-sm); line-height: 1.7; }
.kx-ex__kv + .kx-ex__kv { margin-top: 2px; }
.kx-ex__kv-k { flex: 0 0 auto; color: var(--kx-text-3); min-width: 48px; }
.kx-ex__kv-v { flex: 1 1 auto; color: var(--kx-text-2); word-break: break-word; }
.kx-ex__kv-block { margin-top: 8px; }

.kx-ex__empty {
  padding: var(--kx-sp-3) 0;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-3);
}

.kx-ex__blank,
.kx-ex__blank-inline {
  padding: var(--kx-sp-6) var(--kx-sp-4);
  text-align: center;
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-3);
  border: 1px dashed var(--kx-border);
}
.kx-ex__blank-inline { padding: var(--kx-sp-4); text-align: left; }
.kx-ex__blank-t { font-size: var(--kx-fs-md); font-weight: var(--kx-fw-semibold); color: var(--kx-text); margin-bottom: 6px; }
.kx-ex__blank-d { font-size: var(--kx-fs-sm); color: var(--kx-text-3); line-height: 1.7; }

/* 质量分圆点 */
.kx-ex__dots { display: inline-flex; gap: 2px; align-items: center; }
.kx-ex__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kx-border-strong);
  display: inline-block;
}
.kx-ex__dots i.is-on { background: var(--kx-primary); }

/* ---------------------------------------------------------------- 功能模块搭配 */

.kx-ex__modules { display: flex; flex-direction: column; gap: var(--kx-sp-4); }

.kx-ex__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
}

.kx-ex__toolbar-main { display: flex; align-items: center; gap: var(--kx-sp-2); }

.kx-ex__toolbar-tip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}

/* 阶段分组：一个营销阶段一块，序号 + 阶段名 + 功能条数 */
.kx-ex__stage {
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-border-soft);
  background: var(--kx-surface-solid);
  overflow: hidden;
}

.kx-ex__stage-head {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  background: linear-gradient(90deg, var(--kx-primary-100), var(--kx-primary-50) 60%, transparent 100%);
  border-bottom: 1px solid var(--kx-border-soft);
}

.kx-ex__stage-i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--kx-gradient-primary);
  color: #fff;
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--kx-shadow-primary);
}

.kx-ex__stage-name {
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  letter-spacing: .02em;
}

.kx-ex__stage-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

/* 阶段内容区：淡底 + 白卡，跟顶部渐变头形成「头 → 身 → 条目」三层 */
.kx-ex__stage-body {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  background: var(--kx-surface-3);
}

/* 一条 = 一个功能模块的白卡；左侧竖条 + 底色微染按必备度走（必备红 / 推荐蓝 / 可选灰） */
.kx-ex__mrow {
  --n: var(--kx-c-blue);
  --n-soft: var(--kx-c-blue-soft);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  background: linear-gradient(96deg, var(--n-soft) 0%, transparent 42%), var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}

.kx-ex__mrow:hover { border-color: var(--kx-border); box-shadow: var(--kx-shadow-xs); }

.kx-ex__mrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: var(--kx-radius-full);
  background: var(--n);
}

.kx-ex__mrow--n1 { --n: var(--kx-c-red); --n-soft: var(--kx-c-red-soft); }
.kx-ex__mrow--n2 { --n: var(--kx-c-blue); --n-soft: var(--kx-c-blue-soft); }
.kx-ex__mrow--n3 { --n: var(--kx-border-strong); --n-soft: var(--kx-surface-3); }

.kx-ex__mrow-main { flex: 1 1 auto; min-width: 0; }

.kx-ex__mrow-title {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.kx-ex__mrow-name {
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  letter-spacing: .01em;
  color: var(--kx-text);
}

.kx-ex__mrow-reason { font-size: var(--kx-fs-sm); line-height: 1.8; color: var(--kx-text-2); }

/* 建议参数：原来是「建议参数：一串斜杠号」糊成一行，现在拆成键值小方块 */
.kx-ex__mrow-hint {
  margin-top: var(--kx-sp-2);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-3);
  border: 1px dashed var(--kx-border-2);
}

.kx-ex__mrow-hint-h {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-semibold);
  letter-spacing: .06em;
  color: var(--kx-text-3);
}

.kx-ex__pchips { display: flex; flex-wrap: wrap; gap: 5px; }

.kx-ex__pchip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: var(--kx-radius-xs);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-xs);
  line-height: 1.65;
  color: var(--kx-text);
}

.kx-ex__pchip-k { font-size: var(--kx-fs-2xs); color: var(--kx-text-3); }
.kx-ex__pchip-v { word-break: break-word; }

.kx-ex__mrow-op { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; align-self: center; }

/* ---------------------------------------------------------------- 获客优化

   三层：概览指标卡（上面那套 .kx-ex__stat 直接复用）
        → 左侧类型栏（色点 = 类型色，选中态跟着走）
        → 优化项卡片（顶部类型色条 + 18px 标题 + 元信息行）
   卡内正文再分三块，一眼能分开「怎么做 / 案例 / 检查项」：
        灰底 = 正文结构块  橙底 = 案例 / 示例  绿底 = 落地检查项 */

.kx-ex__cards-wrap { display: flex; flex-direction: column; gap: var(--kx-page-gap); min-width: 0; }

/* -------- 左侧类型栏 -------- */

.kx-ex__sidelist { display: flex; flex-direction: column; gap: 2px; }

.kx-ex__sideitem {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: var(--kx-radius-sm);
  background: transparent;
  color: var(--kx-text-2);
  font-family: inherit;
  font-size: var(--kx-fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--kx-dur-fast) var(--kx-ease), color var(--kx-dur-fast) var(--kx-ease);
}

.kx-ex__sideitem:hover { background: var(--kx-surface-3); color: var(--kx-text); }

.kx-ex__sideitem.is-active {
  background: var(--t-soft, var(--kx-primary-soft));
  color: var(--t, var(--kx-primary));
  font-weight: var(--kx-fw-semibold);
}

.kx-ex__sidedot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t-solid, var(--kx-text-4));
  opacity: .85;
}

.kx-ex__sideitem.is-active .kx-ex__sidedot { opacity: 1; box-shadow: 0 0 0 3px var(--t-soft, var(--kx-primary-soft)); }

.kx-ex__sidetext { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kx-ex__sidecount {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-3);
  font-size: var(--kx-fs-2xs);
  line-height: 18px;
  text-align: center;
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

.kx-ex__sidecount.is-on {
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  color: var(--kx-text-2);
  font-weight: var(--kx-fw-semibold);
}

/* -------- 卡片 -------- */

.kx-ex__pcard {
  --t: var(--kx-c-blue-deep);
  --t-solid: var(--kx-c-blue);
  --t-soft: var(--kx-c-blue-soft);
  --t-border: var(--kx-c-blue-border);
  position: relative;
  padding: var(--kx-sp-4) var(--kx-sp-5);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  overflow: hidden;
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}

.kx-ex__pcard:hover { border-color: var(--kx-border); box-shadow: var(--kx-shadow-sm); }

/* 顶部类型色条：9 个类型一眼分得开 */
.kx-ex__pcard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--t-solid), transparent 62%);
}

/* 色调（卡片与左侧类型点共用一套） */
.kx-ex__pcard--violet,
.kx-ex__sideitem--violet { --t: var(--kx-c-violet-deep); --t-solid: var(--kx-c-violet); --t-soft: var(--kx-c-violet-soft); --t-border: var(--kx-c-violet-border); }
.kx-ex__pcard--cyan,
.kx-ex__sideitem--cyan { --t: var(--kx-c-cyan-deep); --t-solid: var(--kx-c-cyan); --t-soft: var(--kx-c-cyan-soft); --t-border: var(--kx-c-cyan-border); }
.kx-ex__pcard--green,
.kx-ex__sideitem--green { --t: var(--kx-c-green-deep); --t-solid: var(--kx-c-green); --t-soft: var(--kx-c-green-soft); --t-border: var(--kx-c-green-border); }
.kx-ex__pcard--orange,
.kx-ex__sideitem--orange { --t: var(--kx-c-orange-deep); --t-solid: var(--kx-c-orange); --t-soft: var(--kx-c-orange-soft); --t-border: var(--kx-c-orange-border); }
.kx-ex__pcard--red,
.kx-ex__sideitem--red { --t: var(--kx-c-red-deep); --t-solid: var(--kx-c-red); --t-soft: var(--kx-c-red-soft); --t-border: var(--kx-c-red-border); }

.kx-ex__pcard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kx-sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--kx-sp-3);
  border-bottom: 1px solid var(--kx-border-soft);
}

.kx-ex__pcard-headmain { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1 1 380px; }
.kx-ex__pcard-toprow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 类型胶囊：卡片色调 */
.kx-ex__ptype {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--kx-radius-full);
  background: var(--t-soft);
  border: 1px solid var(--t-border);
  color: var(--t);
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  letter-spacing: .02em;
}

/* 标题：全页最大的一处文字，卡片之间靠它区分 */
.kx-ex__pcard-title {
  margin: 0;
  font-size: var(--kx-fs-xl);
  font-weight: var(--kx-fw-semibold);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--kx-text);
}

.kx-ex__pcard-meta { display: flex; align-items: center; gap: var(--kx-sp-3); flex-wrap: wrap; }

.kx-ex__pmeta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

.kx-ex__pmeta .kx-icon { color: var(--t-solid); opacity: .8; }

.kx-ex__pcard-op { display: flex; align-items: center; gap: var(--kx-sp-2); flex: 0 0 auto; }
.kx-ex__pcard-body { padding-top: var(--kx-sp-3); }

/* -------- 卡内正文：结构块 -------- */

.kx-ex__pbody { display: flex; flex-direction: column; gap: var(--kx-sp-3); min-width: 0; }
.kx-ex__pblock { min-width: 0; }

.kx-ex__pblock--titled {
  padding: var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border-left: 3px solid var(--t-border);
  background: var(--kx-surface-3);
}

/* 案例（橙）与检查项（绿）：换掉卡片色调，让三块正文一眼分得开 */
.kx-ex__pblock--samples {
  --t: var(--kx-c-orange-deep);
  --t-solid: var(--kx-c-orange);
  padding: var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border-left: 3px solid var(--kx-c-orange-border);
  background: var(--kx-c-orange-soft);
}

.kx-ex__pblock--check {
  --t: var(--kx-c-green-deep);
  --t-solid: var(--kx-c-green);
  padding: var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-3) var(--kx-sp-4);
  border-radius: var(--kx-radius);
  border-left: 3px solid var(--kx-c-green-border);
  background: var(--kx-c-green-soft);
}

.kx-ex__pblock-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  letter-spacing: .02em;
  color: var(--t, var(--kx-primary));
}

.kx-ex__pbcount {
  padding: 0 7px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

.kx-ex__pitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.kx-ex__pitems li {
  position: relative;
  padding-left: 16px;
  font-size: var(--kx-fs-sm);
  line-height: 1.8;
  color: var(--kx-text-2);
}

.kx-ex__pitems li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--t-solid, var(--kx-primary));
  opacity: .5;
}

/* -------- 案例条目：一条案例内部再分四层
   一条案例动辄三四百字（构图 / 配色 / 必放 / 禁止 / 文案示例），
   整段铺出来没人读得完。所以拆成：标题 → 分节名 → 标签行 → 正文行。 */
.kx-ex__pitems--samples { gap: 8px; }

.kx-ex__pitems li.kx-ex__sample {
  padding: 9px 11px;
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-c-orange-border);
}

/* 案例自带卡片样式，去掉正文列表那个小方块标记 */
.kx-ex__pitems li.kx-ex__sample::before { content: none; }

/* 第一层：序号 + 案例标题 */
.kx-ex__shd { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.kx-ex__shd-idx {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--kx-radius-xs, 4px);
  background: var(--t-solid, var(--kx-primary));
  color: #fff;
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.kx-ex__shd-t {
  min-width: 0;
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  line-height: 1.5;
  color: var(--kx-text);
}

/* 第二层：分节名（整条一行、用 ｜ 分节时会出现） */
.kx-ex__ssub {
  margin-top: 6px;
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  color: var(--t, var(--kx-primary));
}

/* 第三层：标签行（构图分区 / 配色 / 必放 / 禁止 …），左边一列对齐 */
.kx-ex__srow { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; margin-top: 5px; }
.kx-ex__srow-k {
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-semibold);
  line-height: 1.75;
  color: var(--kx-text-3);
}
.kx-ex__srow-v {
  font-size: var(--kx-fs-sm);
  line-height: 1.75;
  color: var(--kx-text-2);
  word-break: break-word;
}

/* 第四层：正文行（简介范文那种连续行、以及没有标签的说明） */
.kx-ex__sline { margin-top: 5px; font-size: var(--kx-fs-sm); line-height: 1.75; color: var(--kx-text-2); }
/* 「名字 —— 理由」：名字是主角，单独加重 */
.kx-ex__sline--lead { font-weight: var(--kx-fw-semibold); color: var(--kx-text); }

/* 检查项：空方框（要勾的），两列排 */
.kx-ex__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 5px 16px;
}

.kx-ex__checks li {
  position: relative;
  padding-left: 20px;
  font-size: var(--kx-fs-sm);
  line-height: 1.75;
  color: var(--kx-text-2);
}

.kx-ex__checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid var(--kx-c-green);
  opacity: .7;
}

.kx-ex__more {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--kx-fs-xs);
  color: var(--t);
  cursor: pointer;
}

.kx-ex__more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 营销理论库
   （行业专家 · 主动营销依据库）

   与行业专家同族：指标卡直接复用 .kx-ex__stat，
   这里只补「说明条 / 分类 chips / 条目卡 / 启停开关」四样。 */

.kx-th__page { display: flex; flex-direction: column; gap: var(--kx-page-gap); }

/* 说明条：这个库怎么用（第一次进来的人先看这里） */
.kx-th__intro { border-color: var(--kx-primary-border); }
.kx-th__intro-body {
  display: flex;
  gap: var(--kx-sp-3);
  align-items: flex-start;
  background: var(--kx-primary-50);
}

.kx-th__intro-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--kx-surface-solid);
  color: var(--kx-primary);
}

.kx-th__intro-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kx-th__intro-t { font-size: var(--kx-fs-sm); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-th__intro-d { font-size: var(--kx-fs-xs); line-height: 1.75; color: var(--kx-text-2); }

/* 分类 chips：一行排开，点了就地筛（不再单独打接口取分类） */
.kx-th__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.kx-th__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-solid);
  font-family: inherit;
  font-size: var(--kx-fs-xs);
  line-height: 1.6;
  color: var(--kx-text-2);
  cursor: pointer;
  transition: border-color var(--kx-dur-fast) var(--kx-ease), background-color var(--kx-dur-fast) var(--kx-ease), color var(--kx-dur-fast) var(--kx-ease);
}

.kx-th__chip:hover { border-color: var(--kx-primary-border); color: var(--kx-text); }

.kx-th__chip.is-active {
  background: var(--kx-primary-soft);
  border-color: var(--kx-primary-border);
  color: var(--kx-primary);
  font-weight: var(--kx-fw-semibold);
}

.kx-th__chip-t { white-space: nowrap; }

.kx-th__chip-n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-3);
  font-size: var(--kx-fs-2xs);
  line-height: 17px;
  text-align: center;
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

.kx-th__chip-n.is-on { background: var(--kx-primary); color: #fff; }

/* 条目卡：一段文字 + 维护信息 + 启停/编辑/删除 */
.kx-th__list { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

.kx-th__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-4);
  padding: var(--kx-sp-4) var(--kx-sp-4) var(--kx-sp-4) var(--kx-sp-5);
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}

.kx-th__item:hover { border-color: var(--kx-border); box-shadow: var(--kx-shadow-sm); }

/* 左侧竖条：启用的用主色，停用的灰掉 —— 一眼看出哪条在给 AI 用 */
.kx-th__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-primary);
}

.kx-th__item.is-off { background: var(--kx-surface-3); }
.kx-th__item.is-off::before { background: var(--kx-border-strong); }

.kx-th__item-main { flex: 1 1 auto; min-width: 0; }

/* 依据正文：保留换行（用户就是一段一段写的），行高放宽一点更好读 */
.kx-th__text {
  margin: 0;
  font-size: var(--kx-fs-md);
  line-height: 1.85;
  color: var(--kx-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.kx-th__item.is-off .kx-th__text { color: var(--kx-text-3); }

.kx-th__meta {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  flex-wrap: wrap;
  margin-top: var(--kx-sp-3);
  padding-top: var(--kx-sp-2);
  border-top: 1px dashed var(--kx-border-soft);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

.kx-th__cat {
  padding: 1px 9px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-primary-soft);
  border: 1px solid var(--kx-primary-border);
  color: var(--kx-primary);
  font-weight: var(--kx-fw-semibold);
}

.kx-th__item-op { flex: none; display: flex; align-items: center; gap: 6px; }

/* 启停开关（带文字的胶囊开关：光一个滑块说不清「启用/停用」） */
.kx-th__sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-3);
  font-family: inherit;
  font-size: var(--kx-fs-2xs);
  line-height: 1.6;
  color: var(--kx-text-3);
  cursor: pointer;
  transition: background-color var(--kx-dur-fast) var(--kx-ease), border-color var(--kx-dur-fast) var(--kx-ease), color var(--kx-dur-fast) var(--kx-ease);
}

.kx-th__sw:disabled { cursor: not-allowed; opacity: .55; }

.kx-th__sw-knob {
  width: 26px;
  height: 16px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-border-strong);
  transition: background-color var(--kx-dur-fast) var(--kx-ease);
}

.kx-th__sw.is-on {
  background: var(--kx-c-green-soft);
  border-color: var(--kx-c-green-border);
  color: var(--kx-c-green-deep);
}

.kx-th__sw.is-on .kx-th__sw-knob { background: var(--kx-c-green); }
.kx-th__sw-label { white-space: nowrap; font-weight: var(--kx-fw-semibold); }

/* 底部翻页：与 .kx-bp__pagefoot 同一口径（右对齐、间距与 .kx-pagination 一致） */
.kx-th__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--kx-sp-2); }

.kx-ex__feedback {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: var(--kx-sp-3);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-warning-soft);
  color: var(--kx-warning-text);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
}

/* ---------------------------------------------------------------- 生成器 / 弹窗 */

.kx-ex__opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--kx-sp-2);
  margin-top: var(--kx-sp-3);
}

.kx-ex__opt {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  border: 1px solid var(--kx-border-2);
  cursor: pointer;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text);
}

.kx-ex__opt.is-done { opacity: .55; cursor: not-allowed; background: var(--kx-surface-3); }
.kx-ex__opt-name { flex: 1 1 auto; }
.kx-ex__opt-tag { font-size: var(--kx-fs-xs); color: var(--kx-text-3); white-space: nowrap; }

.kx-ex__hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: var(--kx-sp-2);
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-primary-50);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  line-height: 1.7;
}

.kx-ex__cur {
  margin-top: var(--kx-sp-3);
  padding: var(--kx-sp-3);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-3);
  max-height: 180px;
  overflow-y: auto;
}

.kx-ex__cur-k { font-size: var(--kx-fs-xs); color: var(--kx-text-3); margin-bottom: 4px; }
.kx-ex__cur-v {
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* 长耗时 AI 调用的等待态：转圈 + 两行说明 */
.kx-ex__wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-6) var(--kx-sp-4);
  text-align: center;
}

.kx-ex__wait-spin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--kx-primary-100);
  border-top-color: var(--kx-primary);
  animation: kx-ex-spin .8s linear infinite;
}

@keyframes kx-ex-spin { to { transform: rotate(360deg); } }

.kx-ex__wait-t { font-size: var(--kx-fs-md); color: var(--kx-text); }
.kx-ex__wait-d { font-size: var(--kx-fs-sm); color: var(--kx-text-3); line-height: 1.7; }

.kx-ex__result { display: flex; flex-direction: column; gap: var(--kx-sp-4); }

@media (max-width: 1024px) {
  .kx-ex__picker { min-width: 0; width: 100%; }
  .kx-ex__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 窄屏下翻页居中，与 .kx-bp__pagefoot 的处理一致 */
  .kx-th__foot { justify-content: center; }
}

/* ==========================================================================
   方案中心（/admin/plan）
   一页三签：我的方案 / 我收到的 / 运行记录。卡片族与任务中心保持同一视觉语言，
   这里只补「步骤编排」与「运行推进」两块新结构。
   ========================================================================== */

.kx-pl__body { display: flex; flex-direction: column; gap: 12px; }

/* ---- 页签 ---- */
.kx-pl__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.kx-pl__tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #fff; color: #4b5563;
  font-size: 13px; line-height: 1; transition: all .16s ease;
}
.kx-pl__tab:hover { border-color: #c7d2fe; color: #4338ca; }
.kx-pl__tab.is-active { background: #eef2ff; border-color: #6366f1; color: #3730a3; font-weight: 600; }

/* ---- 方案卡片 ---- */
.kx-pl__card, .kx-pl__run {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: #fff; transition: box-shadow .16s ease, border-color .16s ease;
}
.kx-pl__card:hover, .kx-pl__run:hover { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(79, 70, 229, .08); }
.kx-pl__card.is-off { opacity: .62; }
.kx-pl__card-main, .kx-pl__run-main { min-width: 0; flex: 1; }
.kx-pl__card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kx-pl__name { font-size: 15px; font-weight: 600; color: #111827; }
.kx-pl__pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 12px; line-height: 1;
  background: #f3f4f6; color: #6b7280;
}
.kx-pl__pill.is-on, .kx-pl__pill.is-success { background: #dcfce7; color: #15803d; }
.kx-pl__pill.is-off, .kx-pl__pill.is-muted { background: #f3f4f6; color: #6b7280; }
.kx-pl__pill.is-info { background: #e0e7ff; color: #3730a3; }
.kx-pl__pill.is-warning { background: #fef3c7; color: #b45309; }
.kx-pl__pill.is-danger { background: #fee2e2; color: #b91c1c; }
.kx-pl__desc { margin-top: 6px; color: #4b5563; font-size: 13px; }
.kx-pl__meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px; color: #6b7280; font-size: 12px; }
.kx-pl__meta > span { display: inline-flex; align-items: center; gap: 4px; }
/* 可点的 meta 项（目前是「分享 N 人」：点开看分享给了谁 / 撤回） */
.kx-pl__meta-link { cursor: pointer; padding: 1px 6px; margin: -1px -6px; border-radius: 999px; transition: background .15s, color .15s; }
.kx-pl__meta-link:hover { background: #eef2ff; color: #4338ca; }
.kx-pl__remark { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #f9fafb; color: #4b5563; font-size: 12px; }
.kx-pl__warn { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #fffbeb; color: #b45309; font-size: 12px; }
.kx-pl__fail { color: #b91c1c; }
.kx-pl__fail-t { color: #b91c1c; font-size: 12px; }
.kx-pl__card-op { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.kx-pl__opbtn { font-size: 12px; }

/* ---- 新建/编辑表单 ---- */
.kx-pl__form { display: flex; flex-direction: column; gap: 14px; }
.kx-pl__row { display: flex; align-items: flex-start; gap: 12px; }
.kx-pl__row--params { align-items: stretch; }
.kx-pl__label {
  flex: 0 0 84px; padding-top: 8px; font-size: 13px; color: #374151;
  display: inline-flex; align-items: center; gap: 4px;
}
.kx-pl__req { color: #dc2626; font-style: normal; }
.kx-pl__hint { margin-top: 8px; color: #6b7280; font-size: 12px; line-height: 1.7; }
.kx-pl__empty { padding: 14px; border: 1px dashed #d1d5db; border-radius: 10px; color: #9ca3af; font-size: 13px; text-align: center; }

/* ---- 步骤编排 ---- */
.kx-pl__steps-wrap { flex: 1; min-width: 0; }
.kx-pl__steps { display: flex; flex-direction: column; gap: 10px; }
.kx-pl__addstep { margin-top: 10px; }
.kx-pl__step {
  display: flex; gap: 10px; padding: 10px 12px;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa;
}
.kx-pl__step.is-active { border-color: #6366f1; background: #f5f3ff; }
.kx-pl__step-no {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #6366f1; color: #fff; font-size: 12px; font-weight: 600;
}
.kx-pl__step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kx-pl__step-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kx-pl__step-name { flex: 1 1 180px; min-width: 140px; }
.kx-pl__step-gap { flex: 0 0 90px; }
.kx-pl__step-gap-t { color: #9ca3af; font-size: 12px; }
.kx-pl__step-line .kx-bp__opbtn.is-on { color: #4338ca; background: #eef2ff; }

/* ---- 参数区 ---- */
.kx-pl__params { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kx-pl__params-h { font-size: 13px; font-weight: 600; color: #374151; }
.kx-pl__field { display: flex; flex-direction: column; gap: 4px; }
.kx-pl__field-l { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #4b5563; }
.kx-pl__field-h { color: #9ca3af; font-size: 12px; }
.kx-pl__ta { resize: vertical; min-height: 62px; font-family: inherit; }
.kx-pl__cbwrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; }
.kx-pl__cb { width: 16px; height: 16px; }
.kx-pl__sync { align-self: flex-start; }

/* ---- 选功能弹窗（添加步骤 → 去工作台配参数） ---- */
.kx-pl__pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.kx-pl__pick-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
  font-size: 13px; color: #111827; transition: all .14s ease;
}
.kx-pl__pick-item:hover { border-color: #6366f1; background: #f5f3ff; }
.kx-pl__pick-name { font-weight: 600; }
.kx-pl__pick-meta { color: #9ca3af; font-size: 12px; }

/* ---- 步骤行：功能名（只读）与参数摘要 ---- */
.kx-pl__step-fn { font-weight: 600; color: #111827; }
.kx-pl__step-params { color: #6b7280; font-size: 12px; word-break: break-all; }
.kx-pl__opbtn { font-size: 12px; }

/* ---- 详情 / 运行详情 ---- */
.kx-pl__detail { display: flex; flex-direction: column; gap: 10px; }
.kx-pl__dsteps { display: flex; flex-direction: column; gap: 10px; }
.kx-pl__dstep { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 10px; background: #fff; }
.kx-pl__dstep-body { flex: 1; min-width: 0; }
.kx-pl__dstep-t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #111827; flex-wrap: wrap; }
.kx-pl__dstep-params { margin-top: 6px; color: #6b7280; font-size: 12px; word-break: break-all; }
.kx-pl__cat, .kx-pl__meta-t { color: #6b7280; font-size: 12px; }
.kx-pl__shares { display: flex; flex-direction: column; gap: 8px; }
.kx-pl__srow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border: 1px solid #eef0f3; border-radius: 10px; background: #fff; font-size: 13px; color: #374151;
}

/* ---- 执行弹层 ---- */
.kx-pl__ex-steps { display: flex; flex-direction: column; gap: 10px; }
.kx-pl__ex-step { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }
.kx-pl__ex-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #fafafa;
}
.kx-pl__ex-toggle { margin-left: auto; font-size: 12px; }
.kx-pl__ex-params { display: none; flex-direction: column; gap: 10px; padding: 12px; border-top: 1px dashed #e5e7eb; }
.kx-pl__ex-step.is-open .kx-pl__ex-params { display: flex; }

/* ---- 方案广场（方案交易）---- */
.kx-sq__toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.kx-sq__search { max-width: 320px; }
.kx-sq__subtabs { gap: 6px; }
/* 卡片墙：宽屏三列，窄屏自适应掉列 */
.kx-sq__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.kx-sq__card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: #fff; cursor: pointer; transition: box-shadow .16s ease, border-color .16s ease;
}
.kx-sq__card:hover { border-color: #c7d2fe; box-shadow: 0 6px 18px rgba(79, 70, 229, .08); }
.kx-sq__card.is-bought { border-color: #c7f0d8; background: #fbfffd; }
.kx-sq__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kx-sq__title { font-size: 15px; font-weight: 600; color: #111827; line-height: 1.4; }
.kx-sq__price { flex: none; font-size: 16px; font-weight: 700; color: #4f46e5; }
.kx-sq__price.is-free { color: #059669; }
.kx-sq__intro {
  color: #6b7280; font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kx-sq__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-sq__tag { padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 12px; }
.kx-sq__bought { color: #059669; font-weight: 600; }
/* 详情弹层里的步骤行（比方案编辑器的窄一点） */
.kx-sq__step { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #eef0f3; border-radius: 10px; background: #fff; }
.kx-sq__amount-out { color: #b91c1c; font-weight: 600; }
.kx-sq__amount-in { color: #059669; font-weight: 600; }

@media (max-width: 1024px) {
  .kx-pl__card, .kx-pl__run { flex-direction: column; }
  .kx-pl__card-op { width: 100%; justify-content: flex-start; }
  .kx-pl__row, .kx-pl__row--params { flex-direction: column; }
  .kx-pl__label { flex: none; padding-top: 0; }
  .kx-pl__step-gap { flex: 1 1 90px; }
}