/* ============================================================================
   客小帮 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__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); }
/* 横幅主按钮：去设备管理启动数字员工 */
.kx-dash__banner-cta {
  margin-top: var(--kx-sp-4);
  box-shadow: 0 8px 20px rgba(var(--kx-primary-rgb), .22);
}
.kx-dash__banner-cta:hover { transform: translateY(-1px); }
.kx-dash__banner-cta-arrow { opacity: .8; transition: transform .16s ease; }
.kx-dash__banner-cta:hover .kx-dash__banner-cta-arrow { transform: translateX(2px); }
/* 右侧关键数字：与参考项目横幅里的 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); }

/* ---------- AutoAMBE 使用流程引导（替代 KPI 指标卡） ----------
   3×3 步骤卡：第一行准备、第二行配置、第三行执行与复盘；
   卡片右侧的箭头只在「不是行末」时出现，窄屏切 2 列 / 1 列并隐藏箭头。 */
.kx-dash__flow {
  border-color: var(--kx-primary-border);
  box-shadow: 0 12px 32px rgba(var(--kx-primary-rgb), .06);
  overflow: hidden;
}
/* 头部：渐变浅底 + 路线图图标块 + 标题/步骤数徽标 + 阶段图例 */
.kx-flow__head {
  align-items: center;
  gap: var(--kx-sp-4);
  min-height: 0;
  padding: 18px var(--kx-sp-6);
  background: linear-gradient(110deg, var(--kx-c-blue-soft), var(--kx-c-violet-soft) 55%, var(--kx-c-green-soft));
}
.kx-flow__head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kx-flow__head-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--kx-c-blue), var(--kx-c-violet));
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--kx-primary-rgb), .28);
}
.kx-flow__head-text { min-width: 0; }
.kx-flow__head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kx-fs-xl);
  font-weight: var(--kx-fw-bold);
  color: var(--kx-text);
  letter-spacing: .3px;
  line-height: 1.3;
}
.kx-flow__head-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--kx-surface);
  border: 1px solid var(--kx-primary-border);
  color: var(--kx-primary);
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-semibold);
  line-height: 1.6;
}
.kx-flow__head-sub { margin-top: 4px; font-size: var(--kx-fs-sm); color: var(--kx-text-3); line-height: 1.5; }
.kx-flow__head-legend { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.kx-flow__legend {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 3px;
  border-radius: 999px;
  background: rgba(var(--kx-overlay-rgb), .04);
  border: 1px solid var(--kx-border);
}
.kx-flow__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--kx-fs-2xs);
  color: var(--kx-text-2);
  white-space: nowrap;
}
.kx-flow__legend span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kx-text-3);
  opacity: .9;
}
.kx-flow__legend .is-prepare::before { background: var(--kx-c-blue); }
.kx-flow__legend .is-config::before { background: var(--kx-c-violet); }
.kx-flow__legend .is-run::before { background: var(--kx-c-green); }

.kx-flow__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.kx-flow__step {
  --flow-color: var(--kx-c-blue);
  --flow-soft: var(--kx-c-blue-soft);
  --flow-border: var(--kx-c-blue-border);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  text-align: left;
  font: inherit;
  color: var(--kx-text);
  background: linear-gradient(135deg, var(--flow-soft), transparent 62%);
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  cursor: pointer;
  appearance: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kx-flow__step:hover {
  transform: translateY(-2px);
  border-color: var(--flow-border);
  box-shadow: 0 10px 24px rgba(var(--kx-overlay-rgb), .08);
}
.kx-flow__step:focus-visible { outline: 2px solid var(--flow-border); outline-offset: 2px; }
.kx-flow__step.is-locked { cursor: not-allowed; opacity: .58; }
.kx-flow__step.is-locked:hover { transform: none; box-shadow: none; border-color: var(--kx-border); }
.kx-flow__step--config { --flow-color: var(--kx-c-violet); --flow-soft: var(--kx-c-violet-soft); --flow-border: var(--kx-c-violet-border); }
.kx-flow__step--run { --flow-color: var(--kx-c-green); --flow-soft: var(--kx-c-green-soft); --flow-border: var(--kx-c-green-border); }

.kx-flow__phase {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--kx-fs-2xs);
  background: var(--flow-soft);
  border: 1px solid var(--flow-border);
  color: var(--flow-color);
}
.kx-flow__step-top { display: flex; align-items: center; gap: 10px; padding-right: 52px; min-width: 0; }
.kx-flow__no {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--flow-color);
  color: #fff;
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px rgba(var(--kx-overlay-rgb), .12);
}
.kx-flow__icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--kx-surface-2);
  border: 1px solid var(--flow-border);
  color: var(--flow-color);
}
.kx-flow__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--kx-fs);
  font-weight: var(--kx-fw-semibold);
  line-height: 1.4;
}
.kx-flow__desc { flex: 1; font-size: var(--kx-fs-sm); line-height: 1.65; color: var(--kx-text-3); }
.kx-flow__go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--kx-fs-xs);
  font-weight: var(--kx-fw-medium);
  color: var(--flow-color);
}
.kx-flow__arrow {
  position: absolute;
  right: -19px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-text-3);
  opacity: .55;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 1100px) {
  .kx-flow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-flow__arrow { display: none; }
}

@media (max-width: 900px) {
  /* 头部换行：图例落到标题下方，左对齐 */
  .kx-flow__head { align-items: flex-start; }
  .kx-flow__head-legend { width: 100%; }
}

@media (max-width: 720px) {
  .kx-flow__grid { grid-template-columns: minmax(0, 1fr); }
  .kx-flow__desc { flex: none; }
  .kx-flow__head { padding: 16px; }
  .kx-flow__head-title { font-size: var(--kx-fs-lg); }
  .kx-flow__head-icon { width: 38px; height: 38px; }
}

/* 加载骨架 */
.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; }
}

/* ============================================================================
   2.1 AutoAMBE 使用流程引导页（/admin/guide）
   ========================================================================== */
.kx-guide__hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-6);
  flex-wrap: wrap;
  padding: 26px 28px;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-primary-border);
  background:
    radial-gradient(circle at 88% 18%, rgba(var(--kx-primary-rgb), .18), transparent 42%),
    linear-gradient(115deg, var(--kx-c-blue-soft), var(--kx-c-violet-soft) 55%, var(--kx-c-green-soft));
  box-shadow: 0 16px 40px rgba(var(--kx-primary-rgb), .08);
}
.kx-guide__hero-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kx-guide__hero-icon {
  width: 58px;
  height: 58px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--kx-c-blue), var(--kx-c-violet));
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--kx-primary-rgb), .3);
}
.kx-guide__hero-text { min-width: 0; }
.kx-guide__hero-title { font-size: var(--kx-fs-3xl); font-weight: var(--kx-fw-bold); letter-spacing: .5px; color: var(--kx-text); }
.kx-guide__hero-sub { margin-top: 6px; font-size: var(--kx-fs-sm); color: var(--kx-text-2); line-height: 1.7; }
.kx-guide__hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kx-guide__hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--kx-border);
  background: rgba(var(--kx-overlay-rgb), .05);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-2xs);
}
.kx-guide__hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* 三阶段概览 */
.kx-guide__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kx-guide__phase-chip {
  --phase-color: var(--kx-c-blue);
  --phase-soft: var(--kx-c-blue-soft);
  --phase-border: var(--kx-c-blue-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--phase-soft), transparent 70%);
  border: 1px solid var(--kx-border);
}
.kx-guide__phase-chip.is-config { --phase-color: var(--kx-c-violet); --phase-soft: var(--kx-c-violet-soft); --phase-border: var(--kx-c-violet-border); }
.kx-guide__phase-chip.is-run { --phase-color: var(--kx-c-green); --phase-soft: var(--kx-c-green-soft); --phase-border: var(--kx-c-green-border); }
.kx-guide__phase-dot {
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--phase-color);
  box-shadow: 0 0 0 4px var(--phase-soft);
}
.kx-guide__phase-chip-body { min-width: 0; }
.kx-guide__phase-chip-title { display: flex; align-items: center; gap: 8px; font-size: var(--kx-fs-sm); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-guide__phase-chip-title em {
  font-style: normal;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--phase-soft);
  border: 1px solid var(--phase-border);
  color: var(--phase-color);
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-normal);
}
.kx-guide__phase-chip-desc { margin-top: 4px; font-size: var(--kx-fs-xs); color: var(--kx-text-3); line-height: 1.6; }

/* 纵向时间线 */
.kx-guide__timeline { display: flex; flex-direction: column; gap: 22px; }
.kx-guide__phase-group {
  --phase-color: var(--kx-c-blue);
  --phase-soft: var(--kx-c-blue-soft);
  --phase-border: var(--kx-c-blue-border);
}
.kx-guide__phase-group.is-config { --phase-color: var(--kx-c-violet); --phase-soft: var(--kx-c-violet-soft); --phase-border: var(--kx-c-violet-border); }
.kx-guide__phase-group.is-run { --phase-color: var(--kx-c-green); --phase-soft: var(--kx-c-green-soft); --phase-border: var(--kx-c-green-border); }
.kx-guide__phase-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kx-guide__phase-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--phase-soft);
  border: 1px solid var(--phase-border);
  color: var(--phase-color);
  font-size: var(--kx-fs-2xs);
  font-weight: var(--kx-fw-semibold);
}
.kx-guide__phase-name { font-size: var(--kx-fs-sm); color: var(--kx-text-2); font-weight: var(--kx-fw-medium); }
.kx-guide__phase-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--phase-border), transparent); }

.kx-guide__phase-steps { display: flex; flex-direction: column; gap: 12px; }
.kx-guide__step { position: relative; display: flex; gap: 14px; }
.kx-guide__step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: -14px;
  width: 2px;
  background: linear-gradient(180deg, var(--phase-border), transparent);
  opacity: .7;
}
.kx-guide__step:last-child::before { display: none; }
.kx-guide__marker { flex: none; width: 40px; padding-top: 10px; }
.kx-guide__marker-no {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--phase-color);
  color: #fff;
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px rgba(var(--kx-overlay-rgb), .15);
}
.kx-guide__card {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--kx-border);
  background: var(--kx-surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.kx-guide__card:hover { border-color: var(--phase-border); box-shadow: 0 10px 26px rgba(var(--kx-overlay-rgb), .06); }
.kx-guide__step.is-locked .kx-guide__card { opacity: .65; }
.kx-guide__card-head { display: flex; align-items: center; gap: 12px; }
.kx-guide__card-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--phase-soft);
  border: 1px solid var(--phase-border);
  color: var(--phase-color);
}
.kx-guide__card-titlebox { flex: 1; min-width: 0; }
.kx-guide__card-title { font-size: var(--kx-fs-lg); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-guide__card-meta { margin-top: 2px; font-size: var(--kx-fs-2xs); color: var(--kx-text-3); }
.kx-guide__card-desc { margin-top: 10px; font-size: var(--kx-fs-sm); color: var(--kx-text-2); line-height: 1.7; }
.kx-guide__goal,
.kx-guide__tip {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: var(--kx-fs-xs);
  line-height: 1.6;
}
.kx-guide__goal { background: var(--kx-c-green-soft); border: 1px solid var(--kx-c-green-border); color: var(--kx-c-green-deep); }
.kx-guide__tip { background: var(--kx-c-orange-soft); border: 1px solid var(--kx-c-orange-border); color: var(--kx-c-orange-deep); }
.kx-guide__goal .kx-icon,
.kx-guide__tip .kx-icon { margin-top: 1px; flex: none; }
.kx-guide__footer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--kx-border);
  background: rgba(var(--kx-overlay-rgb), .03);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-sm);
  line-height: 1.6;
}
.kx-guide__footer .kx-icon { margin-top: 2px; flex: none; color: var(--kx-c-orange); }

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

@media (max-width: 720px) {
  .kx-guide__hero { padding: 20px; }
  .kx-guide__hero-title { font-size: var(--kx-fs-2xl); }
  .kx-guide__hero-icon { width: 48px; height: 48px; border-radius: 14px; }
  .kx-guide__card-head { flex-wrap: wrap; }
  .kx-guide__card-head > .kx-btn { width: 100%; justify-content: center; }
  .kx-guide__step { gap: 10px; }
  .kx-guide__marker { width: 34px; }
  .kx-guide__marker-no { width: 32px; height: 32px; border-radius: 10px; font-size: var(--kx-fs-xs); }
  .kx-guide__step::before { left: 15px; }
}

/* ============================================================================
   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-dev-ver__update {
  color: var(--kx-primary);
  font-size: var(--kx-fs-xs);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.kx-dev-ver__update:hover { text-decoration: underline; }
.kx-dev-ver__update:focus-visible {
  outline: 2px solid var(--kx-primary);
  outline-offset: 2px;
  border-radius: var(--kx-radius-sm);
}
/* 远程控制弹窗：画面按截图真实比例缩放（不做 object-fit，避免黑边吃到点击坐标） */
/* 弹窗放宽到 92vh：手机竖屏画面本身很高，默认 84vh 会把工具栏挤到正文滚动区外 */
.kx-modal.kx-remote-modal { max-height: 92vh; }
.kx-remote { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-remote__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  min-height: 18px;
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}
.kx-remote__hint--warn { color: var(--kx-warning); }
.kx-remote__meta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-remote__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  max-height: 64vh;
  padding: var(--kx-sp-2);
  overflow: hidden;
  background: #0b0b0f;
  border-radius: var(--kx-radius-sm);
}
.kx-remote__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62vh;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.kx-remote__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--kx-fs-sm);
  text-align: center;
}
.kx-remote__tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kx-sp-2); }
.kx-remote__textrow { display: flex; flex: 1 1 200px; align-items: center; gap: var(--kx-sp-2); min-width: 0; }
.kx-remote__text { flex: 1 1 auto; min-width: 0; }
.kx-remote__tip { margin: 0; color: var(--kx-text-3); font-size: var(--kx-fs-xs); }
.kx-bp__rowmenu { min-width: 152px; }

/* ---------------------------------------------------------------- 访客触达记录（/device/visit） */
/* 访客格：圆形首字母头像 + 昵称/标识两行；头像底色按昵称取稳定色调，一屏里更好区分人 */
.kx-visit-cell { display: flex; align-items: center; gap: var(--kx-sp-2); min-width: 0; }
.kx-visit-cell__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-primary-active);
  background: var(--kx-primary-100);
  box-shadow: inset 0 0 0 1px var(--kx-primary-200);
}
.kx-visit-cell__avatar--info {
  color: var(--kx-info-text);
  background: var(--kx-info-soft);
  box-shadow: inset 0 0 0 1px var(--kx-info-border);
}
.kx-visit-cell__avatar--violet {
  color: var(--kx-violet-text);
  background: var(--kx-violet-soft);
  box-shadow: inset 0 0 0 1px var(--kx-violet-border);
}
.kx-visit-cell__avatar--success {
  color: var(--kx-success-text);
  background: var(--kx-success-soft);
  box-shadow: inset 0 0 0 1px var(--kx-success-border);
}
.kx-visit-cell__avatar--warning {
  color: var(--kx-warning-text);
  background: var(--kx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--kx-warning-border);
}
/* 触达动作：组合动作（`visit+dm`）拆成多个小标签，窄列里自动换行，不再挤成一长条被裁 */
.kx-visit-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 分组 / 卡片网格 */
.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); }

/* 分组卡片：顶部渐变点缀条 + 渐变图标 + 悬停上浮；只用现有 token，深浅色主题都吃 */
.kx-bp__gcard {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-5);
  /* 原来漏了 transition：悬停的上浮/描边是「瞬间跳」，这里补上 */
  transition: transform var(--kx-dur) var(--kx-ease), box-shadow var(--kx-dur) var(--kx-ease),
              border-color var(--kx-dur) var(--kx-ease);
}
/* 顶部点缀条：默认只露一小截，悬停铺满，卡片「活」起来 */
.kx-bp__gcard::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--kx-card-topline);
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform .32s var(--kx-ease);
}
.kx-bp__gcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--kx-shadow);
  border-color: var(--kx-primary-border);
}
.kx-bp__gcard:hover::before { transform: scaleX(1); }

.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: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--kx-primary-100), var(--kx-primary-50));
  box-shadow: inset 0 0 0 1px var(--kx-primary-200);
  color: var(--kx-primary);
  transition: transform var(--kx-dur) var(--kx-ease), box-shadow var(--kx-dur) var(--kx-ease);
}
.kx-bp__gcard:hover .kx-bp__gcard-icon {
  transform: translateY(-1px) scale(1.05);
  box-shadow: inset 0 0 0 1px var(--kx-primary-200), var(--kx-shadow-xs);
}

.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; flex: none; opacity: 0; transition: opacity var(--kx-dur) var(--kx-ease); }
.kx-bp__gcard:hover .kx-bp__gcard-tools,
.kx-bp__gcard:focus-within .kx-bp__gcard-tools { opacity: 1; }
/* 触屏没有 hover：操作按钮必须常显，否则手机上永远编辑不了分组 */
@media (hover: none) {
  .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-meta .kx-tag { font-weight: 600; }
/* 备注：贴底 + 虚线分隔，卡片底部不再「吊着」一段灰字 */
.kx-bp__gcard-desc {
  margin-top: auto;
  padding-top: var(--kx-sp-3);
  border-top: 1px dashed var(--kx-border-2);
  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); }
/* 提示条的语义色：原先只有 --danger 类名（没落样式，一直是蓝底），这里补齐 */
.kx-bp__hint--warning {
  background: var(--kx-c-orange-soft);
  border-color: var(--kx-c-orange-border);
  color: var(--kx-c-orange-deep);
}
.kx-bp__hint--warning .kx-icon { color: var(--kx-c-orange-deep); }
.kx-bp__hint--danger {
  background: var(--kx-danger-soft, rgba(255, 59, 48, .1));
  border-color: var(--kx-danger-border, rgba(255, 59, 48, .3));
  color: var(--kx-danger-text);
}
.kx-bp__hint--danger .kx-icon { color: var(--kx-danger-text); }
.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; }

/* ---------------------------------------------------------------- 设备卡片（/device/list）
   每台设备一张卡：顶部 16:9 画面区（视频播放器比例）+ 关键信息 + 全部操作按钮。
   卡片最小 340px，宽屏一行 3~4 张；窄屏自动降为 1 列。 */
.kx-dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--kx-sp-4);
  padding-top: var(--kx-sp-1);
}
.kx-dev-grid__empty { padding: var(--kx-sp-6) 0; }
/* 设备清单容器：卡片区四周留出边距（.kx-bp__table-card 默认 body padding:0，会贴边） */
.kx-devcards-card > .kx-card__body { padding: 16px 20px 20px; }
.kx-devcards-card .kx-bp__toolbar {
  padding: 0 0 14px;
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--kx-border);
}
/* 翻页区：一条轻量工具条，和卡片区之间留出呼吸感 */
.kx-dev-grid__pager {
  margin-top: 20px;
  padding: 10px 14px;
  border: 1px solid var(--kx-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}
.kx-dev-grid__pager .kx-pagination__total { margin-right: auto; color: var(--kx-text-2); font-weight: 500; }
.kx-dev-grid__pager .kx-pagination__list { gap: 4px; }
.kx-dev-grid__pager .kx-pagination__item {
  min-width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--kx-text-2);
  font-weight: 500;
}
.kx-dev-grid__pager .kx-pagination__item:hover:not(:disabled) {
  background: rgba(37, 99, 235, .08);
  color: var(--kx-primary);
}
.kx-dev-grid__pager .kx-pagination__item.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
.kx-dev-grid__pager .kx-pagination__item.is-active:hover { color: #fff; }
.kx-dev-grid__pager .kx-pagination__size {
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  background: #fff;
}
.kx-dev-grid__pager .kx-pagination__size:hover { border-color: var(--kx-primary); color: var(--kx-primary); }
.kx-devcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-devcard:hover { border-color: #c7d2fe; box-shadow: 0 8px 22px rgba(79, 70, 229, .1); }
.kx-devcard.is-selected {
  border-color: var(--kx-primary);
  box-shadow: 0 0 0 2px var(--kx-primary-100);
}

/* 画面区：16:9（视频屏幕宽度）；底色按状态区分，白字直接压在上面 */
.kx-devcard__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  aspect-ratio: 16 / 9;
  padding: 14px 16px;
  color: #fff;
  background-image: radial-gradient(circle at 84% 10%, rgba(255, 255, 255, .22), transparent 46%);
}
.kx-devcard__media.is-online { background-color: #4338ca; background-image: radial-gradient(circle at 84% 10%, rgba(255,255,255,.22), transparent 46%), linear-gradient(135deg, #2563eb 0%, #4f46e5 58%, #7c3aed 100%); }
.kx-devcard__media.is-running { background-color: #0f766e; background-image: radial-gradient(circle at 84% 10%, rgba(255,255,255,.22), transparent 46%), linear-gradient(135deg, #0f766e 0%, #0d9488 52%, #2563eb 100%); }
.kx-devcard__media.is-abnormal { background-color: #c2410c; background-image: radial-gradient(circle at 84% 10%, rgba(255,255,255,.22), transparent 46%), linear-gradient(135deg, #b45309 0%, #ea580c 100%); }
.kx-devcard__media.is-offline { background-color: #334155; background-image: radial-gradient(circle at 84% 10%, rgba(255,255,255,.16), transparent 46%), linear-gradient(135deg, #334155 0%, #475569 100%); }
.kx-devcard__media.is-disabled { background-color: #4b5563; background-image: radial-gradient(circle at 84% 10%, rgba(255,255,255,.14), transparent 46%), linear-gradient(135deg, #4b5563 0%, #6b7280 100%); }

/* 近 7 天运行柱状图：压在画面区右侧当背景，半透明、不抢文字（用户：别太明显） */
.kx-devcard__chart {
  position: absolute;
  top: 46px;
  right: 16px;
  bottom: 42px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 38%;
  opacity: .34;
  pointer-events: none;
}
.kx-devcard__bar {
  flex: 1;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, .72);
}
.kx-devcard__bar.is-empty { background: rgba(255, 255, 255, .3); }
/* 文字层永远压在柱状图上面 */
.kx-devcard__media > :not(.kx-devcard__chart) { position: relative; z-index: 1; }

.kx-devcard__media-top { display: flex; align-items: center; justify-content: space-between; gap: var(--kx-sp-2); }
.kx-devcard__pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .16);
  color: #334155;
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  letter-spacing: .3px;
}
/* 设备状态：胶囊按状态染色，一眼区分在线 / 任务中 / 异常 / 离线 */
.kx-devcard__pill.is-online { color: #15803d; }
.kx-devcard__pill.is-running { color: #0f766e; }
.kx-devcard__pill.is-abnormal { color: #b45309; }
.kx-devcard__pill.is-offline { color: #475569; }
.kx-devcard__pill.is-disabled { color: #6b7280; }
.kx-devcard__pill .kx-bp__pulse { background: #4ade80; }
.kx-devcard__pill .kx-bp__pulse::after { border-color: #4ade80; }
.kx-devcard__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, .95);
  background: rgba(15, 23, 42, .22);
  cursor: pointer;
  transition: background var(--kx-dur-fast) var(--kx-ease);
}
.kx-devcard__check:hover { background: rgba(15, 23, 42, .38); }
.kx-devcard__check.is-checked { background: rgba(255, 255, 255, .3); }

.kx-devcard__media-main { min-width: 0; }
.kx-devcard__name { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: .2px; }
.kx-devcard__no {
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--kx-fs-xs);
  color: rgba(255, 255, 255, .8);
}
.kx-devcard__media-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-2);
  font-size: var(--kx-fs-xs);
  color: rgba(255, 255, 255, .84);
}

/* 卡片下半区：信息格 + 两枚主按钮，整体走「浅色玻璃 + 细阴影」的高级感 */
.kx-devcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.kx-devcard__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kx-devcard__info-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(37, 74, 138, .035);
  box-shadow: inset 0 0 0 1px rgba(37, 74, 138, .045);
  transition: background var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-devcard__info-item:hover {
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06), inset 0 0 0 1px rgba(37, 99, 235, .16);
}
.kx-devcard__info-label {
  color: var(--kx-text-3);
  font-size: 11px;
  letter-spacing: .4px;
}
.kx-devcard__info-value {
  min-width: 0;
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  font-weight: 500;
  line-height: 1.45;
}
/* 可点击信息格（如激活码）：整格跳转激活码管理，右上角给一个轻箭头提示 */
.kx-devcard__info-item.is-link {
  position: relative;
  padding-right: 24px;
  cursor: pointer;
}
.kx-devcard__info-item.is-link::after {
  content: '›';
  position: absolute;
  top: 6px;
  right: 10px;
  color: var(--kx-primary);
  font-size: 15px;
  line-height: 1;
  opacity: .5;
  transition: transform var(--kx-dur-fast) var(--kx-ease), opacity var(--kx-dur-fast) var(--kx-ease);
}
.kx-devcard__info-item.is-link:hover {
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06), inset 0 0 0 1px var(--kx-primary-border);
}
.kx-devcard__info-item.is-link:hover::after { opacity: 1; transform: translateX(2px); }
/* 未激活：状态文字与「申请激活」胶囊按钮同一行 */
.kx-devcard__activate-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.kx-devcard__apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border: 1px solid var(--kx-primary-border);
  border-radius: 999px;
  background: var(--kx-primary-soft);
  color: var(--kx-primary);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  cursor: pointer;
  transition: background var(--kx-dur-fast) var(--kx-ease), border-color var(--kx-dur-fast) var(--kx-ease);
}
.kx-devcard__apply-btn:hover {
  background: var(--kx-primary-soft-hover);
  border-color: rgba(var(--kx-primary-rgb), .4);
}
/* 运行中的任务进度：只有设备挂着未结束的实例时才出现（信息区第一行） */
.kx-devcard__run {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(13, 148, 136, .08) 0%, rgba(37, 99, 235, .07) 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, .16);
}
.kx-devcard__run.is-wait {
  background: linear-gradient(135deg, rgba(245, 158, 11, .09) 0%, rgba(249, 115, 22, .06) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .18);
}
/* 待命占位：没有运行实例时也占同样高度，卡片高度不忽高忽低 */
.kx-devcard__run.is-idle {
  background: rgba(100, 116, 139, .06);
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .14);
}
.kx-devcard__run.is-idle .kx-devcard__run-name { color: var(--kx-text-2); }
.kx-devcard__run.is-idle .kx-devcard__run-dot {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .16);
  animation: none;
}
.kx-devcard__run.is-idle .kx-devcard__run-tag { color: #64748b; background: rgba(100, 116, 139, .12); }
.kx-devcard__run.is-idle .kx-devcard__run-pct { color: #94a3b8; }
.kx-devcard__run.is-idle .kx-devcard__run-bar { background: rgba(100, 116, 139, .12); }
.kx-devcard__run.is-idle .kx-progress__bar { background: transparent; }
.kx-devcard__run-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kx-devcard__run-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, .16);
  animation: kx-devcard-run-pulse 1.6s ease-in-out infinite;
}
.kx-devcard__run.is-wait .kx-devcard__run-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}
@keyframes kx-devcard-run-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.kx-devcard__run-name {
  flex: 1;
  min-width: 0;
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
}
.kx-devcard__run-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  color: #0f766e;
  background: rgba(13, 148, 136, .12);
  font-size: 11px;
  font-weight: 600;
}
.kx-devcard__run.is-wait .kx-devcard__run-tag { color: #b45309; background: rgba(245, 158, 11, .14); }
.kx-devcard__run-pct {
  flex: none;
  color: #0f766e;
  font-size: var(--kx-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kx-devcard__run.is-wait .kx-devcard__run-pct { color: #b45309; }
.kx-devcard__run-bar { height: 6px; background: rgba(13, 148, 136, .14); }
.kx-devcard__run .kx-progress__bar { background: linear-gradient(90deg, #0d9488 0%, #2563eb 100%); }
.kx-devcard__run.is-wait .kx-progress__bar { background: linear-gradient(90deg, #f59e0b 0%, #fb923c 100%); }
.kx-devcard__run-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
}
.kx-devcard__run-no {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .85;
}
/* 卡片底部只放「查看 / 操作」两个按钮 */
.kx-devcard__ops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--kx-border);
}
.kx-devcard__ops--main { align-items: center; }
.kx-devcard__ops--main .kx-devcard__mainbtn {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  justify-content: center;
  font-weight: 600;
  letter-spacing: .5px;
}
.kx-devcard__ops--main .kx-devcard__mainbtn svg { flex: none; }
/* 主按钮「操作」：品牌渐变 + 柔和投影，悬停轻微上浮 */
.kx-devcard__ops--main .kx-btn--primary.kx-devcard__mainbtn {
  border: 0;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .26);
  transition: box-shadow var(--kx-dur-fast) var(--kx-ease), transform var(--kx-dur-fast) var(--kx-ease);
}
.kx-devcard__ops--main .kx-btn--primary.kx-devcard__mainbtn:hover {
  box-shadow: 0 9px 22px rgba(37, 99, 235, .34);
  transform: translateY(-1px);
}
.kx-devcard__ops--main .kx-btn--primary.kx-devcard__mainbtn:active { transform: translateY(0); }
/* 次按钮「查看」：白底细边，悬停染一点点品牌色 */
.kx-devcard__ops--main .kx-btn--default.kx-devcard__mainbtn {
  border-color: var(--kx-border);
  background: #fff;
}
.kx-devcard__ops--main .kx-btn--default.kx-devcard__mainbtn:hover {
  border-color: var(--kx-primary);
  color: var(--kx-primary);
  background: rgba(37, 99, 235, .05);
}
.kx-devcard--skeleton {
  min-height: 330px;
  border-style: dashed;
  background: var(--kx-surface-3);
  animation: kx-devcard-breathe 1.4s var(--kx-ease) infinite alternate;
}
@keyframes kx-devcard-breathe { from { opacity: .55; } to { opacity: .95; } }
@media (max-width: 720px) {
  .kx-dev-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 激活码卡片
   与设备卡片同一套语言（同网格 / 同信息格 / 同翻页条），只是顶部信息区更矮：
   激活码本身是主角，状态与有效期收在一条线上。 */
.kx-codecard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-codecard:hover { border-color: #c7d2fe; box-shadow: 0 8px 22px rgba(79, 70, 229, .1); }

.kx-codecard__head {
  position: relative;
  padding: 14px 16px 13px;
  color: #fff;
  background-image: radial-gradient(circle at 86% 6%, rgba(255, 255, 255, .22), transparent 46%);
}
.kx-codecard__head.is-unused { background-color: #4338ca; background-image: radial-gradient(circle at 86% 6%, rgba(255,255,255,.22), transparent 46%), linear-gradient(135deg, #2563eb 0%, #4f46e5 58%, #7c3aed 100%); }
.kx-codecard__head.is-used { background-color: #0f766e; background-image: radial-gradient(circle at 86% 6%, rgba(255,255,255,.22), transparent 46%), linear-gradient(135deg, #0f766e 0%, #0d9488 52%, #2563eb 100%); }
.kx-codecard__head.is-void { background-color: #475569; background-image: radial-gradient(circle at 86% 6%, rgba(255,255,255,.16), transparent 46%), linear-gradient(135deg, #475569 0%, #64748b 100%); }
.kx-codecard__head.is-expired { background-color: #b45309; background-image: radial-gradient(circle at 86% 6%, rgba(255,255,255,.18), transparent 46%), linear-gradient(135deg, #b45309 0%, #ea580c 100%); }

.kx-codecard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.kx-codecard__pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .22);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  letter-spacing: .3px;
}
.kx-codecard__expire {
  min-width: 0;
  color: rgba(255, 255, 255, .86);
  font-size: var(--kx-fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kx-codecard__code { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.kx-codecard__code-text {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.kx-codecard__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: rgba(15, 23, 42, .22);
  cursor: pointer;
  transition: background var(--kx-dur-fast) var(--kx-ease);
}
.kx-codecard__copy:hover { background: rgba(15, 23, 42, .4); }

.kx-codecard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  min-width: 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--kx-fs-xs);
}

.kx-codecard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.kx-codecard__ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--kx-border);
}
.kx-codecard__ops .kx-codecard__mainbtn {
  flex: 1 1 120px;
  height: 36px;
  border-radius: 10px;
  justify-content: center;
  font-weight: 600;
  letter-spacing: .3px;
}
.kx-codecard__ops .kx-btn--primary.kx-codecard__mainbtn {
  border: 0;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, .26);
}
.kx-codecard__minor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  padding-top: 4px;
}
.kx-codecard--skeleton {
  min-height: 240px;
  border-style: dashed;
  background: var(--kx-surface-3);
  animation: kx-devcard-breathe 1.4s var(--kx-ease) infinite alternate;
}

/* 在线 / 离线两个 Tab（列表卡片右上角） */
.kx-dev-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--kx-surface-3);
  border-radius: 10px;
}
.kx-dev-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  cursor: pointer;
  transition: color var(--kx-dur-fast) var(--kx-ease), background var(--kx-dur-fast) var(--kx-ease);
}
.kx-dev-tabs__item:hover { color: var(--kx-text); }
.kx-dev-tabs__item.is-active {
  background: var(--kx-surface-solid);
  color: var(--kx-primary);
  font-weight: 600;
  box-shadow: var(--kx-shadow-sm);
}
.kx-dev-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--kx-surface-3);
  color: var(--kx-text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.kx-dev-tabs__item.is-active .kx-dev-tabs__badge { background: var(--kx-primary-100); color: var(--kx-primary); }

/* 卡片「查看」的信息弹窗 */
.kx-devinfo { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-devinfo__section {
  padding: 12px 14px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
}
.kx-devinfo__title {
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--kx-primary);
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  line-height: 1.2;
}
.kx-devinfo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.kx-devinfo__item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kx-devinfo__label { color: var(--kx-text-3); font-size: 11px; }
.kx-devinfo__value { min-width: 0; color: var(--kx-text); font-size: var(--kx-fs-sm); word-break: break-all; }
.kx-devinfo__status { font-weight: 600; }
.kx-devinfo__status.is-online { color: var(--kx-success); }
.kx-devinfo__status.is-running { color: var(--kx-primary); }
.kx-devinfo__status.is-abnormal { color: var(--kx-warning); }
.kx-devinfo__status.is-offline,
.kx-devinfo__status.is-disabled { color: var(--kx-text-3); }

/* 卡片「操作」弹窗：分组 + 图标配色 + 一句说明（宽 820，两列卡片） */
.kx-modal.kx-devact-modal-panel { max-height: 90vh; }
.kx-devact-modal { display: flex; flex-direction: column; gap: 16px; }
.kx-devact__hint {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .07), rgba(124, 58, 237, .05));
  color: var(--kx-text-2);
  font-size: var(--kx-fs-xs);
}
.kx-devact-group { display: flex; flex-direction: column; gap: 8px; }
.kx-devact-group__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kx-devact-group__title {
  position: relative;
  padding-left: 10px;
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
}
.kx-devact-group__title::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
}
.kx-devact-group__desc { color: var(--kx-text-3); font-size: 11px; }
.kx-devact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* 奇数组的最后一项铺满整行，避免右下角留一个空洞 */
.kx-devact__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* 风险分组：标题前的竖条换成红色 */
.kx-devact-group:last-child .kx-devact-group__title::before {
  background: linear-gradient(180deg, #f87171, #dc2626);
}
.kx-devact__item {
  --tone-bg: rgba(37, 99, 235, .12);
  --tone-fg: #2563eb;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--kx-border);
  border-radius: 12px;
  background: var(--kx-surface-solid);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease), transform var(--kx-dur-fast) var(--kx-ease);
}
.kx-devact__item:hover {
  border-color: var(--tone-fg);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.kx-devact__item:active { transform: translateY(0); }
.kx-devact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--tone-bg);
  color: var(--tone-fg);
}
.kx-devact__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kx-devact__label { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; line-height: 1.3; }
.kx-devact__desc { color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.5; }
/* 每个功能的配色（图标底色 + 悬停描边） */
.kx-devact__item.is-blue { --tone-bg: rgba(37, 99, 235, .12); --tone-fg: #2563eb; }
.kx-devact__item.is-cyan { --tone-bg: rgba(8, 145, 178, .12); --tone-fg: #0891b2; }
.kx-devact__item.is-teal { --tone-bg: rgba(13, 148, 136, .12); --tone-fg: #0d9488; }
.kx-devact__item.is-emerald { --tone-bg: rgba(5, 150, 105, .12); --tone-fg: #059669; }
.kx-devact__item.is-indigo { --tone-bg: rgba(79, 70, 229, .12); --tone-fg: #4f46e5; }
.kx-devact__item.is-violet { --tone-bg: rgba(124, 58, 237, .12); --tone-fg: #7c3aed; }
.kx-devact__item.is-amber { --tone-bg: rgba(217, 119, 6, .13); --tone-fg: #d97706; }
.kx-devact__item.is-sky { --tone-bg: rgba(2, 132, 199, .12); --tone-fg: #0284c7; }
.kx-devact__item.is-green { --tone-bg: rgba(22, 163, 74, .12); --tone-fg: #16a34a; }
.kx-devact__item.is-slate { --tone-bg: rgba(71, 85, 105, .12); --tone-fg: #475569; }
.kx-devact__item.is-red {
  --tone-bg: rgba(220, 38, 38, .12);
  --tone-fg: #dc2626;
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgba(239, 68, 68, .06), rgba(239, 68, 68, .02));
}
@media (max-width: 720px) {
  .kx-devact { grid-template-columns: 1fr; }
  .kx-devinfo__grid { grid-template-columns: 1fr; }
}

/* 卡片「执行」弹窗：左菜单 + 右执行单（固定高，切换模式/选功能时不跳高度） */
.kx-modal.kx-devexec-modal { height: min(92vh, 920px); max-height: 92vh; }
.kx-devexec { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.kx-devexec__device {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--kx-surface-3);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-xs);
}
.kx-devexec__device .kx-icon { flex: none; color: var(--kx-text-3); }
/* 左侧选模式、右侧填内容（右侧撑满剩余高度，参数区内滚） */
.kx-devexec__layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.kx-devexec__menu { display: flex; flex-direction: column; gap: 10px; }
.kx-devexec__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.kx-devexec__mode {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--kx-border);
  border-radius: 12px;
  background: var(--kx-surface-solid);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--kx-dur-fast) var(--kx-ease), background var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-devexec__mode:hover { border-color: #c7d2fe; box-shadow: 0 8px 20px rgba(15, 23, 42, .06); }
.kx-devexec__mode.is-active {
  border-color: var(--kx-primary);
  background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(124, 58, 237, .06));
  box-shadow: 0 8px 22px rgba(37, 99, 235, .12);
}
.kx-devexec__mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--kx-primary-100);
  color: var(--kx-primary);
}
.kx-devexec__mode.is-active .kx-devexec__mode-icon {
  background: var(--kx-primary);
  color: #fff;
}
.kx-devexec__mode-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kx-devexec__mode-title { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-devexec__mode-desc { color: var(--kx-text-3); font-size: 11px; line-height: 1.5; }
.kx-devexec__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--kx-border);
  border-radius: 12px;
  background: var(--kx-surface-3);
}
/* display:flex 会盖掉浏览器默认的 [hidden]{display:none}，必须显式收起来 */
.kx-devexec__panel[hidden] { display: none; }
.kx-devexec__hint { color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.6; }
/* 我的收藏：常用功能一键选中（设备执行弹窗） */
.kx-devexec__fav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .07) 0%, rgba(249, 115, 22, .04) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .16);
}
.kx-devexec__fav-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b45309;
  font-size: var(--kx-fs-sm);
  font-weight: 600;
}
.kx-devexec__fav-head .kx-icon { color: #f59e0b; }
.kx-devexec__fav-count {
  margin-left: auto;
  padding: 0 7px;
  height: 18px;
  line-height: 18px;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  color: #b45309;
  font-size: 11px;
  font-weight: 600;
}
.kx-devexec__fav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 96px;
  overflow-y: auto;
}
.kx-devexec__fav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 999px;
  background: var(--kx-surface-solid);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-sm);
  cursor: pointer;
  transition: border-color var(--kx-dur-fast) var(--kx-ease), color var(--kx-dur-fast) var(--kx-ease), background var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-devexec__fav-chip:hover { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
.kx-devexec__fav-chip.is-active {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .28);
}
.kx-devexec__fav-chip .kx-icon { flex: none; }
.kx-devexec__fav-empty { color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.6; }
/* 「平台 → 功能模块 → 功能」三级筛选 */
.kx-devexec__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.kx-devexec__filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kx-devexec__filter--full { grid-column: 1 / -1; }
.kx-devexec__filter-label {
  color: var(--kx-text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.kx-devexec__filter .kx-select,
.kx-devexec__filter .kx-input,
.kx-devexec__filter .kx-input-wrap { width: 100%; }
/* 功能选择：输入即筛的下拉列表 */
.kx-devexec__picker { position: relative; }
.kx-devexec__picker-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  max-height: 268px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  background: var(--kx-surface-solid);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
}
.kx-devexec__picker-list[hidden] { display: none; }
.kx-devexec__picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  cursor: pointer;
}
.kx-devexec__picker-item:hover { background: var(--kx-surface-2); }
.kx-devexec__picker-item.is-active {
  background: var(--kx-primary-50);
  color: var(--kx-primary-dark);
}
/* 结果行：平台胶囊 - 功能名 - 模块胶囊 */
.kx-devexec__picker-platform {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-primary-50);
  color: var(--kx-primary-dark);
  font-size: 11px;
  font-weight: 600;
}
.kx-devexec__picker-name { flex: 1 1 auto; min-width: 0; }
.kx-devexec__picker-module {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-2);
  color: var(--kx-text-3);
  font-size: 11px;
}
.kx-devexec__picker-empty {
  padding: 10px;
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
}
/* 选中功能后：工作台占满面板剩余高度，参数多时区内滚动 */
.kx-devexec__params {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--kx-border);
}
.kx-devexec__params[hidden] { display: none; }
.kx-devexec__params-title { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
/* 参数多时内部滚动，弹窗本身不无限变高 */
.kx-devexec__params-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-right: 4px;
}
.kx-devexec__params-box:empty { display: none; }
/* 「查看任务」弹窗：正在执行 / 历史执行 */
.kx-devexec-runs { display: flex; flex-direction: column; gap: 16px; }
.kx-devexec-runs__section { display: flex; flex-direction: column; gap: 8px; }
.kx-devexec-runs__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
}
.kx-devexec-runs__count { margin-left: auto; color: var(--kx-text-3); font-size: 11px; font-weight: 400; }
.kx-devexec-runs__list { display: flex; flex-direction: column; gap: 8px; }
.kx-devexec-run {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  background: var(--kx-surface-solid);
}
.kx-devexec-run.is-clickable { cursor: pointer; }
.kx-devexec-run.is-clickable:hover { border-color: #c7d2fe; box-shadow: 0 6px 16px rgba(15, 23, 42, .06); }
.kx-devexec-run__main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.kx-devexec-run__name {
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-devexec-run__meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--kx-text-3); font-size: 11px; }
.kx-devexec-run__progress { flex: none; color: var(--kx-text-2); font-size: var(--kx-fs-xs); }
.kx-devexec-runs__empty {
  padding: 18px;
  border: 1px dashed var(--kx-border);
  border-radius: 10px;
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  text-align: center;
}
@media (max-width: 720px) {
  .kx-devexec__layout { grid-template-columns: 1fr; }
}

/* ============================================================================
   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); }
/* 代理状态 + 适用系统（AutoAMBE / AutoGEO 共用代理池） */
.kx-proxy__status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.kx-proxy__scope { color: var(--kx-text-3); font-size: 11px; line-height: 1.2; }
.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-overview__scope {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--kx-text-3);
}
.kx-stat-overview__scope-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px;
  border-radius: 999px; background: var(--kx-primary-soft); color: var(--kx-primary-dark);
  font-size: 12px; font-weight: 600;
}
.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: 300px minmax(0, 1fr);
  align-items: stretch;
  height: calc(100vh - var(--kx-topbar-h) - 168px);
  min-height: 520px;
}
.kx-sys__aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  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-count {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--kx-primary-50);
  color: var(--kx-primary);
  font-size: var(--kx-fs-xs);
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.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; height: 100%; min-height: 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-bp__opbtn 的纯图标方块）
   颜色按动作语义区分：授权=蓝、编辑=青、重置密码=橙、删除=红；
   **只有禁用态才是灰色**（超管账号、当前登录账号不可操作的那两个按钮） */
.kx-sys__ops { gap: var(--kx-sp-1); flex-wrap: wrap; }
.kx-sys__opbtn {
  display: inline-flex; align-items: center; gap: 4px;
  width: auto; min-width: 0; height: 26px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--kx-radius-full);
  font-size: var(--kx-fs-xs); font-weight: var(--kx-fw-medium);
  white-space: nowrap;
  transition: filter var(--kx-dur-fast) var(--kx-ease), color var(--kx-dur-fast) var(--kx-ease),
              border-color var(--kx-dur-fast) var(--kx-ease), background var(--kx-dur-fast) var(--kx-ease);
}
.kx-sys__opbtn--primary { color: var(--kx-c-blue-deep); border-color: var(--kx-c-blue-border); background: var(--kx-c-blue-soft); }
.kx-sys__opbtn--info { color: var(--kx-c-cyan-deep); border-color: var(--kx-c-cyan-border); background: var(--kx-c-cyan-soft); }
.kx-sys__opbtn--warn { color: var(--kx-c-orange-deep); border-color: var(--kx-c-orange-border); background: var(--kx-c-orange-soft); }
.kx-sys__opbtn--danger { color: var(--kx-c-red-deep); border-color: var(--kx-c-red-border); background: var(--kx-c-red-soft); }
.kx-sys__opbtn:hover:not(:disabled) { filter: brightness(.94); }
/* 未授权账号：整行呼吸灯（用内阴影做浅蓝呼吸层，叠在原有底色之上，
   不覆盖选中/悬停底色，固定列也能一起亮） */
.kx-sys__row--pulse > .kx-table__cell { animation: kx-sys-row-pulse 1.8s var(--kx-ease) infinite; }
@keyframes kx-sys-row-pulse {
  0%, 100% { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0); }
  50%      { box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .10); }
}
@media (prefers-reduced-motion: reduce) {
  .kx-sys__row--pulse > .kx-table__cell { animation: none; box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, .06); }
}
/* 禁用态：灰底灰字 */
.kx-sys__opbtn:disabled {
  color: var(--kx-text-4); border-color: var(--kx-border);
  background: rgba(var(--kx-overlay-rgb), .04); opacity: .6; cursor: not-allowed;
}

/* ---------------------------------------------------------------- 角色权限 */
.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 { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.kx-sys__perm-card > .kx-card__head { flex: none; }
.kx-sys__perm-card > .kx-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--kx-sp-3);
  min-height: 0;
}
.kx-sys__perm-toolbar {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  padding-bottom: var(--kx-sp-3);
  border-bottom: 1px dashed var(--kx-border-2);
}
/* 工具条一行：左边快捷操作，右边「按模块全选」（计数放卡片副标题里） */
.kx-sys__perm-bar { display: flex; align-items: center; gap: var(--kx-sp-3); flex-wrap: wrap; }
.kx-sys__perm-tools { display: flex; align-items: center; gap: var(--kx-sp-2); flex-wrap: wrap; }
.kx-sys__perm-tools-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kx-sys__perm-module { min-width: 190px; }
.kx-sys__perm-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
}

/* ---------------------------------------------------------------- 部门管理 */
.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;
  flex-direction: column;
  align-items: stretch;
  gap: var(--kx-sp-2);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  margin-bottom: var(--kx-sp-4);
}

/* 一级行：平台 chips + 搜索框 */
.kx-mkt__toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-4);
  min-width: 0;
}

.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__funcs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--kx-sp-2);
  overflow-x: auto;
  padding-top: var(--kx-sp-3);
  border-top: 1px dashed var(--kx-border);
  scrollbar-width: thin;
}
/* 没有功能可列（未选平台 / 搜索无结果）时不占位 */
.kx-mkt__funcs:empty { display: none; }
.kx-mkt__chip--sub {
  flex: none;
  height: 26px;
  padding: 0 var(--kx-sp-3);
  font-size: var(--kx-fs-xs);
  background: transparent;
  max-width: 220px;
}
.kx-mkt__chip--sub > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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-left: 3px solid transparent; /* 选中/悬停时左侧高亮；始终占位，避免内容位移 */
  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);
  border-left-color: var(--kx-primary-border);
  background: var(--kx-surface-2);
}
.kx-mkt__item.is-active {
  border-color: var(--kx-primary);
  border-left-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-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-2); margin-top: var(--kx-sp-2); }
/* 第三行：成功率 / 累计执行次数 / 最近执行 */
.kx-mkt__item-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kx-sp-3); margin-top: var(--kx-sp-2); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-mkt__item-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* 操作台右上角「收藏」星标：未收藏=灰色，已收藏=琥珀实心（见 mkt-script.js） */
.kx-mkt__fav { color: var(--kx-text-3); }
.kx-mkt__fav.is-active {
  background: var(--kx-c-orange-soft);
  border-color: var(--kx-c-orange-border);
  color: var(--kx-c-orange-deep);
}

/* 「我的收藏」列表项：整块可点（div + role=button，内含按钮故不能嵌套 button） */
.kx-mkt__item-desc {
  margin-top: var(--kx-sp-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  line-height: var(--kx-lh);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kx-mkt__item-open { margin-left: auto; color: var(--kx-text-3); }
.kx-mkt__favitem:hover .kx-mkt__item-open { color: var(--kx-primary); }

/* ---------------------------------------------------------------- 操作台 */
.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__textpool { display: flex; flex-direction: column; gap: var(--kx-sp-2); margin-bottom: var(--kx-sp-3); }
.kx-mkt__textpool-row {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  /* 挂到「动作开关」那一组里时它是栅格子项 → 占满整行（在 flex 容器里这条声明会被忽略） */
  grid-column: 1 / -1;
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}
.kx-mkt__textpool-row.is-empty {
  border-color: var(--kx-c-orange-border);
  background: var(--kx-c-orange-soft);
  color: var(--kx-c-orange-deep);
}
.kx-mkt__textpool-label { flex: none; font-weight: var(--kx-fw-semibold); }
.kx-mkt__textpool-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .85;
}
.kx-mkt__textpool-row > .kx-btn { flex: none; }

/* 「选择话术」弹窗：一行一条话术 + 行首启停开关 */
.kx-mkt__textpick { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-mkt__textpick-sum { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
.kx-mkt__textpick-list {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-2);
  max-height: 320px;
  overflow-y: auto;
}
.kx-mkt__textpick-row {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-2) var(--kx-sp-3);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
}
.kx-mkt__textpick-row > .kx-row { flex: none; padding-top: 2px; }
.kx-mkt__textpick-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--kx-fs-sm);
  line-height: 1.6;
  color: var(--kx-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.kx-mkt__textpick-row.is-off .kx-mkt__textpick-text { color: var(--kx-text-3); }
/* 行内「编辑 / 删除」：都在弹窗里改，不跳话术配置页（用户 2026-10-15） */
.kx-mkt__textpick-acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--kx-sp-1);
  padding-top: 1px;
}
.kx-mkt__textedit { padding: var(--kx-sp-1) 0; }
.kx-mkt__textpick-empty {
  padding: var(--kx-sp-6) var(--kx-sp-3);
  text-align: center;
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-3);
}

/* ---------------------------------------------------------------- 执行进度弹窗 */
.kx-mkt__runprogress { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-mkt__runprogress-head { display: flex; align-items: center; gap: var(--kx-sp-2); font-size: var(--kx-fs-sm); }
.kx-mkt__runprogress-status { display: inline-flex; align-items: center; }
/* 设备 + 执行端：一条浅色信息条（设备名 + 编号 + 执行端 APP 名称） */
.kx-mkt__runprogress-device {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--kx-border);
  border-radius: 9px;
  background: var(--kx-surface-3);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-xs);
}
.kx-mkt__runprogress-device .kx-icon { flex: none; color: var(--kx-text-3); }
.kx-mkt__runprogress-device-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kx-mkt__runprogress-device-name { color: var(--kx-text); font-weight: 600; }
.kx-mkt__runprogress-device-no { color: var(--kx-text-3); }
.kx-mkt__runprogress-app {
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--kx-primary-soft);
  color: var(--kx-primary);
  font-weight: 600;
}
/* 弹窗底部的「停止」按钮用的是通用的 .kx-btn--danger，没有专属样式（页脚默认右对齐） */
.kx-mkt__runprogress .kx-progress { margin: 2px 0; }
.kx-mkt__runlog-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--kx-sp-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
}
/* 日志表（# / 时间 / 动作 / 内容，表头固定） —— 新行落地后调用方把 scrollTop 贴到底 */
.kx-mkt__runlog {
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  background: var(--kx-surface-2);
  overflow: hidden;
}
.kx-mkt__runlog-head,
.kx-mkt__runlog-row {
  display: grid;
  grid-template-columns: 46px 70px 88px minmax(0, 1fr);
  gap: var(--kx-sp-3);
  align-items: start;
  padding: 5px var(--kx-sp-3);
  font-size: var(--kx-fs-xs);
  line-height: 1.65;
}
.kx-mkt__runlog-head {
  border-bottom: 1px solid var(--kx-border);
  background: var(--kx-surface-3);
  color: var(--kx-text-3);
  font-weight: var(--kx-fw-semibold);
}
.kx-mkt__runlog-body {
  max-height: 236px;
  overflow-y: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.kx-mkt__runlog-row + .kx-mkt__runlog-row { border-top: 1px dashed var(--kx-border); }
.kx-mkt__runlog-c-num { color: var(--kx-text-3); }
.kx-mkt__runlog-c-time { color: var(--kx-text-3); white-space: nowrap; }
.kx-mkt__runlog-c-step { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-mkt__runlog-c-text { color: var(--kx-text-2); word-break: break-all; }
.kx-mkt__runlog-row.is-success .kx-mkt__runlog-c-text { color: var(--kx-c-green-deep); }
.kx-mkt__runlog-row.is-error .kx-mkt__runlog-c-text { color: var(--kx-c-red-deep); }
.kx-mkt__runlog-row.is-final { background: var(--kx-surface-3); }
.kx-mkt__runlog-row.is-final .kx-mkt__runlog-c-text { font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-mkt__runlog-row.is-final.is-error .kx-mkt__runlog-c-text { color: var(--kx-c-red-deep); }
.kx-mkt__runlog-empty { padding: var(--kx-sp-3); color: var(--kx-text-3); }

/* 点「执行」后的选设备弹窗 */
.kx-mkt__devicepick { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-mkt__devicepick-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: var(--kx-sp-2);
}

.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);
}
/* 营销中心操作台：参数一行只放一个（用户 2026-10-25：并排两列读起来太挤）
   底色压一档冷灰蓝，让里面的白色设置卡「浮起来」，三层（分组头 / 组底 / 卡）才有层次 */
.kx-mkt__params--single .kx-mkt__groupbody {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  background: linear-gradient(180deg, #f8fafd 0%, #f3f6fc 100%);
}

/* ---- 操作台参数：一行一项的「设置卡」
   沿用公共参数页那套行式布局的思路（标题行 + 控件行、每项一张浅底卡），
   单列下不再出现「名称 / 胶囊 / 控件各飘一行」的碎片感：
     ┌──────────────────────────────────────────────┐
     │ 点赞数  (?)                        改为单独指定 │
     │ 跟随公共配置：0~50                            │
     │ [ 0 ] ~ [ 50 ]                                │
     └──────────────────────────────────────────────┘ */
.kx-mkt__params--single .kx-form__item {
  --kx-accent: var(--kx-primary);
  --kx-accent-2: #38bdf8;
  --kx-accent-soft: rgba(37, 99, 235, .07);
  position: relative;
  gap: 8px;
  padding: 13px 16px 13px 18px;
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 14px;
  /* 浅渐变底：左上纯白、右下是这张卡的强调色（5% 左右），既有层次又不抢内容 */
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 52%, var(--kx-accent-soft) 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
/* 每张卡一个强调色（按组内顺序轮换，4 色一轮）：
   左侧竖条 + 右下角底色一起换，扫一眼就能区分不同参数，也不会花 */
.kx-mkt__params--single .kx-mkt__groupbody > .kx-form__item:nth-child(4n+1) {
  --kx-accent: #2f6bff; --kx-accent-2: #6aa9ff; --kx-accent-soft: rgba(47, 107, 255, .07);
}
.kx-mkt__params--single .kx-mkt__groupbody > .kx-form__item:nth-child(4n+2) {
  --kx-accent: #7c5cff; --kx-accent-2: #b39bff; --kx-accent-soft: rgba(124, 92, 255, .07);
}
.kx-mkt__params--single .kx-mkt__groupbody > .kx-form__item:nth-child(4n+3) {
  --kx-accent: #0e9f8f; --kx-accent-2: #4fd1c5; --kx-accent-soft: rgba(14, 159, 143, .08);
}
.kx-mkt__params--single .kx-mkt__groupbody > .kx-form__item:nth-child(4n) {
  --kx-accent: #d9821b; --kx-accent-2: #f6c26b; --kx-accent-soft: rgba(217, 130, 27, .09);
}
/* 左侧渐变强调条：一眼区分「这是一个独立设置项」 */
.kx-mkt__params--single .kx-form__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--kx-accent) 0%, var(--kx-accent-2) 100%);
  opacity: .75;
  transition: opacity .18s, width .18s;
}
.kx-mkt__params--single .kx-form__item:hover {
  border-color: var(--kx-primary-100);
  box-shadow: 0 8px 20px -14px rgba(37, 74, 138, .55);
  transform: translateY(-1px);
}
.kx-mkt__params--single .kx-form__item:hover::before { opacity: 1; }
/* 正在填的那张卡：描边 + 外发光 + 底色再亮一档，强调条加粗 */
.kx-mkt__params--single .kx-form__item:focus-within {
  border-color: var(--kx-accent);
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 45%, var(--kx-accent-soft) 100%);
  box-shadow: 0 0 0 3px var(--kx-accent-soft);
  transform: none;
}
.kx-mkt__params--single .kx-form__item:focus-within::before { opacity: 1; width: 4px; }
/* 卡片里的输入控件浮在渐变底上：纯白底 + 极浅内阴影，边界清楚但不割裂 */
.kx-mkt__params--single .kx-form__item .kx-input,
.kx-mkt__params--single .kx-form__item .kx-select,
.kx-mkt__params--single .kx-form__item .kx-textarea {
  background: #fff;
  border-color: rgba(15, 23, 42, .09);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}
.kx-mkt__params--single .kx-form__item .kx-input:focus,
.kx-mkt__params--single .kx-form__item .kx-select:focus,
.kx-mkt__params--single .kx-form__item .kx-textarea:focus {
  border-color: rgba(37, 99, 235, .5);
}
/* 空态虚线框：染一点品牌蓝，和卡片底色区分开 */
.kx-mkt__params--single .kx-lineswitch__empty {
  border-color: rgba(37, 99, 235, .3);
  background: rgba(37, 99, 235, .035);
}
/* 右上角「+」悬停/展开：填成品牌渐变，比纯描边更像可点 */
.kx-mkt__params--single .kx-form__item__add:hover,
.kx-mkt__params--single .kx-form__item__add.is-open {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--kx-primary) 0%, #4f8df9 100%);
  box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .8);
}
.kx-mkt__params--single .kx-form__item.is-error {
  --kx-accent: var(--kx-danger);
  --kx-accent-2: #f97316;
  --kx-accent-soft: rgba(220, 38, 38, .06);
  border-color: var(--kx-danger-border);
}
/* 标题行：名称 + ? 在左，模式切换做成右侧的小胶囊按钮（比裸文字更像可点控件） */
.kx-mkt__params--single .kx-form__label {
  position: relative;
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
  letter-spacing: 0;
  line-height: 20px;
}
/* 必填星号绝对定位到标题左侧的留白里：所有卡片标题左边界才对得齐 */
.kx-mkt__params--single .kx-form__required {
  position: absolute;
  left: -9px;
  margin: 0;
  line-height: 20px;
}
/* 说明「?」的可点区域放大到 20×20（图标仍 16），左间距收窄，避免标题行被撑高 */
.kx-mkt__params--single .kx-form__tip-btn {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  vertical-align: -3px;
}
.kx-mkt__params--single .kx-follow__toggle {
  padding: 2px 10px;
  border: 1px solid var(--kx-primary-100);
  border-radius: var(--kx-radius-full);
  background: var(--kx-primary-50);
  color: var(--kx-primary-dark);
  line-height: 1.5;
}
.kx-mkt__params--single .kx-follow__toggle:hover {
  background: var(--kx-primary-100);
  text-decoration: none;
}
/* 托管参数的标题区改成「两行」网格：
   第一行「名称 + ?」，第二行「跟随胶囊（占满左侧）+ 模式切换（贴右）」。
   用 grid 而不是 flex-wrap —— flex 下胶囊会被挤到第一行、切换按钮左移，整列右缘对不齐。 */
.kx-mkt__params--single .kx-form__item.is-managed > .kx-form__label {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
}
.kx-mkt__params--single .kx-form__item.is-managed > .kx-form__label > .kx-follow__tagline {
  grid-column: 1 / 4;
  margin-top: 0;
}
.kx-mkt__params--single .kx-form__item.is-managed > .kx-form__label > .kx-follow__tagline .kx-tag { line-height: 1.5; }
.kx-mkt__params--single .kx-form__item.is-managed > .kx-form__label > .kx-follow__toggle {
  grid-column: 4;
  grid-row: 2;
  margin-left: 0;
  margin-top: 0;
}
/* 开关类参数：开关绝对定位在卡片右上角（与标题同一水平线）；
   胶囊与切换按钮同样落在第二行（上面两条通用规则已覆盖，这里只负责开关本身） */
.kx-mkt__params--single .kx-form__item--switch {
  position: relative;
  display: block;
}
.kx-mkt__params--single .kx-form__item--switch > .kx-form__control {
  position: absolute;
  top: 12px;
  right: 14px;
  width: auto;
  display: flex;
  align-items: center;
}
/* 开关后面那个空 span 会吃掉 8px，导致开关键离卡片右缘差一截 */
.kx-mkt__params--single .kx-form__item--switch .kx-text-2:empty { display: none; }
/* 数字输入宽度统一：区间两端、滑块配套数字框、单值数字框都用同一宽度（120px），
   不再出现「84 / 96 / 整行铺满」三套尺度（用户 2026-10-25 反馈） */
.kx-mkt__params--single .kx-form__item .kx-range__input,
.kx-mkt__params--single .kx-form__item .kx-rate__body > .kx-input,
.kx-mkt__params--single .kx-form__item .kx-input[type="number"] {
  flex: 0 0 120px;
  width: 120px;
}
/* 「视频点赞数量超过 [50] 个就不曝光」：标题与输入框排在同一行；
   公共配置只当默认值填进输入框，所以没有「跟随 / 单独指定」胶囊 */
.kx-mkt__params--single .kx-form__item[data-no-follow] {
  display: flex;
  flex-direction: row;   /* 基础样式是 column，这里必须显式覆盖，否则标题和输入框会拆成两行 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 10px;
}
.kx-mkt__params--single .kx-form__item[data-no-follow] > .kx-form__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kx-mkt__params--single .kx-form__item[data-no-follow] > .kx-form__control { width: auto; }
/* 「个就不曝光」用和标题同样的字（不小灰），整句读起来是一句话 */
.kx-mkt__params--single .kx-form__item[data-no-follow] .kx-input-unit__label {
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}
/* 「?」跟在句子后面时，左边距收窄一点，别和「个就不曝光」隔太远 */
.kx-mkt__params--single .kx-form__item[data-no-follow] > .kx-form__tip-btn { margin-left: -4px; }
/* 跟随态（控件收起）保持与常规卡一致的纵向节奏 */
.kx-mkt__params--single .kx-form__item.is-collapsed { padding-bottom: 12px; }
/* 单列设置卡里，跟随态也保持「卡片」形态（不再缩成一小条灰 chip），只是控件收起 */
.kx-mkt__console .kx-mkt__params--single .kx-form__item.is-managed.is-collapsed {
  padding: 12px 14px;
  border-radius: var(--kx-radius);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-soft);
}
/* 「跟随公共配置」的行收成一颗浅灰 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;
}
/* ⚠ 「跟随公共配置」时要把控件区收起来，这里必须用**更高权重**再写一遍：
   上面那条 `display:flex` 与 components.css 的
   `.kx-form__item.is-collapsed .kx-form__control { display: none }` 同权重（都是 3 个类），
   而 pages.css 在 components.css **之后**加载 —— 同权重按源码顺序，后者赢，
   于是「跟随态」下参数自己的开关没被收起来，一格里就出现**两个开关**
   （左边「跟随/单独指定」，右边参数本身的开关）。用户 2026-10-14 反馈。 */
.kx-mkt__console .kx-form__item.is-collapsed > .kx-form__control { display: none; }
/* 参数联动：父项没成立时子项整行收起。
   注意 .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;
  /* 左侧一组操作按钮（保存参数 / 重置参数 / 清理运行记录）挨着**靠左**排，彼此只留 gap
     那么点间距；右侧「查看进度 / 停止 / 执行」靠 margin-left:auto 顶到最右。
     （原来是 space-between，剩下的空间会被均分到每个子项之间 —— 左侧三个按钮被拉得
     东一个西一个，看着像不相关的三组。） */
  justify-content: flex-start;
  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); margin-left: auto; }

.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); }

/* 未执行原因：按动作分组、组内按次数从高到低的排行（执行详情）
   名字 + 占比条 + 「N 次 · P%」，条宽就是占比，一眼看出是哪个条件挡得最多 */
.kx-mkt__skipreason { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-mkt__skipreason-hint { margin-bottom: var(--kx-sp-2); font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
/* 按动作分组（点赞/关注/评论/私信/访问）：每组一个小标题 + 合计次数，组间虚线分隔 */
.kx-mkt__skipreason-groups { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-mkt__skipreason-group { display: flex; flex-direction: column; gap: var(--kx-sp-2); }
.kx-mkt__skipreason-group + .kx-mkt__skipreason-group {
  padding-top: var(--kx-sp-3);
  border-top: 1px dashed var(--kx-border);
}
.kx-mkt__skipreason-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kx-sp-3); }
.kx-mkt__skipreason-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--kx-fs-sm);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-mkt__skipreason-title .kx-icon { color: var(--kx-primary); }
.kx-mkt__skipreason-total {
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-3);
}
/* 未开启的动作：右上角一枚灰胶囊，正文给一句「在操作台打开后重跑」 */
.kx-mkt__skipreason-off {
  padding: 1px 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-2);
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
}
.kx-mkt__skipreason-empty { font-size: var(--kx-fs-xs); color: var(--kx-text-3); }
/* 执行详情：未执行原因 / 动作统计 / 步骤明细 各占一个 TAB */
.kx-mkt__detail-tabs { display: flex; flex-direction: column; gap: var(--kx-sp-3); }
.kx-mkt__skipreason-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 96px;
  align-items: center;
  gap: var(--kx-sp-3);
  font-size: var(--kx-fs-sm);
}
.kx-mkt__skipreason-name { color: var(--kx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-mkt__skipreason-bar {
  height: 6px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-surface-2);
  overflow: hidden;
}
.kx-mkt__skipreason-bar i { display: block; height: 100%; border-radius: var(--kx-radius-full); background: var(--kx-primary); }
.kx-mkt__skipreason-count {
  text-align: right;
  color: var(--kx-text-3);
  font-family: var(--kx-font-mono);
  font-size: var(--kx-fs-xs);
}
@media (max-width: 720px) {
  .kx-mkt__skipreason-row { grid-template-columns: minmax(0, 1fr) 72px; }
  .kx-mkt__skipreason-bar { display: none; }
}

/* ---------------------------------------------------------------- 执行进度弹窗
   下发确认后立刻弹出的实时进度（功能：条数/百分比；方案：步骤推进） */
.kx-runprog { display: flex; flex-direction: column; gap: 12px; }
.kx-runprog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.kx-runprog__title {
  min-width: 0;
  color: var(--kx-text);
  font-size: var(--kx-fs-md);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-runprog__sub { color: var(--kx-text-3); font-size: var(--kx-fs-xs); }
.kx-runprog__bar { display: flex; align-items: center; gap: 10px; }
.kx-runprog__bar .kx-progress { flex: 1; }
.kx-runprog__pct {
  min-width: 46px;
  color: var(--kx-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.kx-runprog__count { color: var(--kx-text-2); font-size: var(--kx-fs-sm); }
.kx-runprog__hint {
  color: var(--kx-text-3);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  word-break: break-word;
}
.kx-runprog__hint.is-error { color: var(--kx-danger); }
.kx-runprog__extra { min-width: 0; }
.kx-runprog__steps { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.kx-runprog__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--kx-surface-2);
  font-size: var(--kx-fs-xs);
}
.kx-runprog__step-no { flex: none; width: 18px; text-align: right; color: var(--kx-text-4); font-variant-numeric: tabular-nums; }
.kx-runprog__step-name {
  flex: 1;
  min-width: 0;
  color: var(--kx-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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-row { 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__switch {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-4);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  border: 1px solid var(--kx-primary-border);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-primary-soft);
}
.kx-grant__switch-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kx-grant__switch-title { font-size: var(--kx-fs-sm); font-weight: 600; color: var(--kx-text); }
.kx-grant__switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--kx-sp-2);
  flex: none;
  cursor: pointer;
}
.kx-grant__switch-state { font-size: var(--kx-fs-xs); color: var(--kx-text-2); }

.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: 14px;
  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 { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
.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__steps-line { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.kx-pl__step-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  height: 24px; padding: 0 10px 0 4px; border-radius: 999px;
  background: #f4f5f9; color: #4b5563; font-size: 12px;
}
.kx-pl__step-chip-no {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e0e7ff; color: #4338ca; font-size: 10px; font-style: normal; font-weight: 600;
}
.kx-pl__step-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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__card > .kx-pl__card-op {
  width: 100%; justify-content: flex-start;
  margin-top: 14px; padding-top: 13px; border-top: 1px dashed #eceef4;
}

/* 操作按钮：胶囊镂空 —— 按动作配色（描边 + 文字同色），悬停填充淡色底
   （按钮行在底部 `.kx-pl__card-op`，主操作「自己执行一次 / 一键执行」在卡片右上角 `.kx-pl__card-top`） */
.kx-pl__opbtn { font-size: 12px; }
.kx-pl__card-op .kx-pl__opbtn,
.kx-pl__card-top .kx-pl__opbtn {
  height: 28px; padding: 0 13px; gap: 5px; border-radius: 999px;
  background: transparent;
  border: 1px solid var(--op-c, #6366f1);
  color: var(--op-c, #6366f1);
  font-weight: 500; line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .12s ease;
}
.kx-pl__card-op .kx-pl__opbtn:hover,
.kx-pl__card-top .kx-pl__opbtn:hover {
  background: var(--op-bg, #eef2ff);
  box-shadow: 0 4px 12px var(--op-sh, rgba(79, 70, 229, .16));
}
.kx-pl__card-op .kx-pl__opbtn:active,
.kx-pl__card-top .kx-pl__opbtn:active { transform: translateY(1px); box-shadow: none; }
/* 卡片右上角的主操作：靠 auto 外边距顶到行尾 */
.kx-pl__card-top .kx-pl__opbtn { margin-left: auto; }
/* 纯图标按钮：等宽方形胶囊 */
.kx-pl__card-op .kx-pl__opbtn--icon { width: 28px; padding: 0; justify-content: center; }
.kx-pl__opbtn--icon { --op-c: #8b93a7; --op-bg: #f1f5f9; --op-sh: rgba(100, 116, 139, .16); }
/* 语义配色（放在最后，保证跟 --icon 同用时也生效） */
.kx-pl__opbtn--share   { --op-c: #4f46e5; --op-bg: #eef2ff; --op-sh: rgba(79, 70, 229, .16); }
.kx-pl__opbtn--run     { --op-c: #16a34a; --op-bg: #f0fdf4; --op-sh: rgba(22, 163, 74, .16); }
.kx-pl__opbtn--edit    { --op-c: #7c3aed; --op-bg: #f5f3ff; --op-sh: rgba(124, 58, 237, .16); }
.kx-pl__opbtn--copy    { --op-c: #0891b2; --op-bg: #ecfeff; --op-sh: rgba(8, 145, 178, .16); }
.kx-pl__opbtn--publish { --op-c: #ea580c; --op-bg: #fff7ed; --op-sh: rgba(234, 88, 12, .16); }
.kx-pl__opbtn--danger  { --op-c: #e11d48; --op-bg: #fff1f2; --op-sh: rgba(225, 29, 72, .16); }

/* ---- 新建/编辑表单 ---- */
.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-count { flex: 0 0 84px; }
.kx-pl__step-count-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; }
/* 设备「执行完整方案」里步骤清单是滚动区的子项：不能被 flex 压缩，
   否则展开的十来个参数字段会被挤成一条（只剩第一个可见） */
.kx-devexec__params-box > .kx-pl__ex-step { flex: 0 0 auto; }
.kx-devexec__params-box .kx-pl__ex-params > * { flex: 0 0 auto; }

/* ---- 方案广场（方案交易）---- */
.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; }
}

/* ---------------------------------------------------------------- 内容创作智能体
   （内容工厂 · 创作工作台，路由 /admin/content/agent）

   三栏六步向导：左「素材与任务 / 创作设定」→ 中「文案工作区」→ 右「视频预览」，
   顶部一张步骤卡、底部一条「下一步」条。全部颜色 / 间距走 tokens.css 变量，
   深浅色主题自动跟随；本页样式只追加在这里，不复用内容工厂的 kx-cf__ 段。 */

/* ---- 顶部步骤卡 ---- */
.kx-ca__stepcard {
  padding: var(--kx-sp-4) var(--kx-sp-5);
  margin-bottom: var(--kx-page-gap);
}

/* ---- 三栏主体：宽屏三列、逐级塌陷（1440 / 1200 / 900）---- */
.kx-ca__grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.7fr) minmax(320px, 1.1fr);
  gap: var(--kx-sp-4);
  align-items: stretch;
}

.kx-ca__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- 面板（三栏统一外壳）---- */
.kx-ca__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  background: var(--kx-surface);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  box-shadow: var(--kx-shadow-xs);
  overflow: hidden;
}

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

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

/* 面板头右侧的控件（比例下拉等）收窄，别把标题挤走 */
.kx-ca__panel-head .kx-select { width: auto; min-width: 118px; }

.kx-ca__panel-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--kx-sp-3);
  min-width: 0;
  padding: var(--kx-sp-4);
}

/* ---- 表单字段：左栏「标签在左、控件在右」---- */
.kx-ca__fld {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: var(--kx-sp-2);
}

.kx-ca__fld-label {
  font-size: var(--kx-fs-sm);
  line-height: 1.4;
  color: var(--kx-text-2);
}

.kx-ca__fld-tip {
  grid-column: 2;
  margin-top: -2px;
  font-size: var(--kx-fs-xs);
  line-height: 1.6;
  color: var(--kx-text-3);
}

/* ---- 客服浮层（页头「联系客服」）---- */
.kx-ca__svc-wrap { position: relative; display: inline-flex; }

.kx-ca__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--kx-z-dropdown);
  width: 264px;
  padding: var(--kx-sp-4);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius);
  box-shadow: var(--kx-shadow);
}

.kx-ca__pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-3);
  margin-bottom: var(--kx-sp-3);
  font-size: var(--kx-fs-md);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

.kx-ca__pop-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--kx-radius-xs);
  background: transparent;
  color: var(--kx-text-3);
  cursor: pointer;
  transition: background-color var(--kx-dur-fast) var(--kx-ease), color var(--kx-dur-fast) var(--kx-ease);
}

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

.kx-ca__pop-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--kx-sp-1);
  margin-bottom: var(--kx-sp-3);
  font-size: var(--kx-fs-sm);
  line-height: 1.6;
}

.kx-ca__pop-label { color: var(--kx-text-2); }
.kx-ca__pop-value { color: var(--kx-text); font-weight: var(--kx-fw-semibold); word-break: break-all; }
.kx-ca__pop-value.is-empty { color: var(--kx-text-3); font-weight: var(--kx-fw-normal); }
.kx-ca__pop-copy { width: 100%; }

/* ---- 左栏：素材与任务 ---- */
.kx-ca__task { display: flex; flex-direction: column; gap: var(--kx-sp-3); }

/* 窄栏里「输入框 + 提取按钮」竖排，读起来更稳（也贴合参考稿的堆叠） */
.kx-ca__task-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--kx-sp-2);
}

.kx-ca__task-row .kx-input { width: 100%; }
.kx-ca__task-row .kx-upload__btn { width: 100%; justify-content: center; }

/* 「提取文案 →」做成整宽主行动按钮 */
.kx-ca__extract {
  width: 100%;
  justify-content: center;
  background: var(--kx-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--kx-shadow-btn);
}

.kx-ca__extract:hover { background: var(--kx-gradient-primary); filter: brightness(1.08); }
.kx-ca__arrow { font-size: var(--kx-fs-md); opacity: .85; }

/* 未接入说明：常驻小字提示 */
.kx-ca__hint {
  padding-left: var(--kx-sp-2);
  border-left: 2px solid var(--kx-c-orange-border);
  font-size: var(--kx-fs-xs);
  line-height: 1.7;
  color: var(--kx-text-3);
}

.kx-ca__hint--muted { color: var(--kx-text-3); }

/* 已入库素材清单 */
.kx-ca__mlist { display: flex; flex-direction: column; gap: 6px; }

.kx-ca__mitem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--kx-surface-3);
  border: 1px solid var(--kx-border-soft);
  border-radius: var(--kx-radius-sm);
  font-size: var(--kx-fs-xs);
  color: var(--kx-text-2);
}

.kx-ca__mitem-name { flex: 1 1 auto; min-width: 0; }

.kx-ca__mitem-tag {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--kx-radius-full);
  background: var(--kx-c-blue-soft);
  color: var(--kx-c-blue-deep);
  font-size: var(--kx-fs-2xs);
}

/* 「创作设定」分节：上方一条淡分割线 */
.kx-ca__divider {
  padding-top: var(--kx-sp-3);
  border-top: 1px solid var(--kx-border-soft);
  font-size: var(--kx-fs-sm);
  font-weight: var(--kx-fw-semibold);
  color: var(--kx-text);
}

/* 创作目标：多行输入 + 右下角字数 */
.kx-ca__goal-wrap { position: relative; }
.kx-ca__goal { padding-bottom: 22px; min-height: 76px; resize: vertical; font-family: inherit; }

.kx-ca__count {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: var(--kx-fs-2xs);
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---- 中栏：文案工作区 ---- */
.kx-ca__tabs { min-width: 0; }
/* Tabs 自渲染的空面板没有内容：去掉它带来的多余间距 */
.kx-ca__tabs .kx-tabs { gap: 0; }
.kx-ca__tabs .kx-tabs__panel:empty { display: none; }

.kx-ca__chippill { display: inline-flex; align-items: center; gap: 4px; }

.kx-ca__mid-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--kx-sp-3);
  min-height: 0;
}

.kx-ca__editor {
  flex: 1 1 auto;
  min-height: 320px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.9;
}

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

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

.kx-ca__dot { color: var(--kx-text-4); }
.kx-ca__mid-actions { display: inline-flex; align-items: center; gap: var(--kx-sp-2); }

/* 内容检查结果 */
.kx-ca__check { display: flex; flex-direction: column; gap: 6px; }

.kx-ca__check-item {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-2);
  padding: 8px 10px;
  border: 1px solid var(--kx-border-soft);
  border-radius: var(--kx-radius-sm);
  background: var(--kx-surface-3);
  font-size: var(--kx-fs-sm);
  color: var(--kx-text-2);
}

.kx-ca__check-item.is-ok {
  border-color: var(--kx-c-green-border);
  background: var(--kx-c-green-soft);
  color: var(--kx-c-green-deep);
}

.kx-ca__check-item.is-block { border-color: var(--kx-c-red-border); background: var(--kx-c-red-soft); }
.kx-ca__check-item.is-warn { border-color: var(--kx-c-orange-border); background: var(--kx-c-orange-soft); }
.kx-ca__check-item.is-notice { border-color: var(--kx-c-blue-border); background: var(--kx-c-blue-soft); }

.kx-ca__check-cat { margin-left: auto; font-size: var(--kx-fs-xs); color: var(--kx-text-3); }

.kx-ca__check-msg { display: flex; align-items: center; gap: 6px; font-size: var(--kx-fs-xs); line-height: 1.7; }
.kx-ca__check-msg--danger { color: var(--kx-danger-text); }
.kx-ca__check-msg--warn { color: var(--kx-warning-text); }

/* ---- 右栏：视频预览 ---- */
.kx-ca__preview-body { display: flex; flex-direction: column; gap: var(--kx-sp-4); min-width: 0; }

/* 手机壳：比例由 JS 写 aspect-ratio（9:16 / 1:1 / 16:9），这里只给壳与底色 */
.kx-ca__phone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kx-sp-2);
  width: 100%;
  max-width: 290px;
  margin: 0 auto;
  padding: 64px var(--kx-sp-4) 64px;
  aspect-ratio: 9 / 16;
  border-radius: var(--kx-radius-lg);
  overflow: hidden;
  background: var(--kx-gradient-deep);
  box-shadow: var(--kx-shadow);
  color: #fff;
  text-align: center;
}

.kx-ca__phone-brand { margin-bottom: var(--kx-sp-5); }

.kx-ca__phone-logo {
  font-size: var(--kx-fs-2xl);
  font-weight: var(--kx-fw-bold);
  letter-spacing: .18em;
}

.kx-ca__phone-tagline {
  margin-top: 2px;
  font-size: var(--kx-fs-2xs);
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .68);
}

.kx-ca__phone-title {
  font-size: var(--kx-fs-2xl);
  font-weight: var(--kx-fw-bold);
  line-height: 1.5;
  white-space: pre-line;
}

.kx-ca__phone-sub {
  font-size: var(--kx-fs-xs);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .72);
}

.kx-ca__phone-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: var(--kx-sp-4);
  border-radius: var(--kx-radius-full);
  background: rgba(255, 255, 255, .92);
  color: var(--kx-text);
  box-shadow: var(--kx-shadow-md);
}

/* 播放条：贴手机壳底部 */
.kx-ca__phone-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--kx-sp-3);
  padding: var(--kx-sp-3) var(--kx-sp-4);
  background: rgba(3, 8, 20, .72);
}

.kx-ca__phone-time {
  flex: none;
  font-size: var(--kx-fs-2xs);
  color: rgba(255, 255, 255, .85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kx-ca__phone-track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: var(--kx-radius-full);
  background: rgba(255, 255, 255, .28);
}

.kx-ca__phone-track::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6%;
  border-radius: inherit;
  background: #fff;
}

/* 数字人 / 配音：两列并排，图标在框内（标签在上） */
.kx-ca__voice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kx-sp-3); }
.kx-ca__voice .kx-ca__fld { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 4px; }

.kx-ca__voice-fld {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--kx-sp-2);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border-2);
  border-radius: var(--kx-radius);
  color: var(--kx-text-3);
  transition: border-color var(--kx-dur-fast) var(--kx-ease);
}

.kx-ca__voice-fld:focus-within { border-color: var(--kx-primary-border); }
.kx-ca__voice-sel { flex: 1 1 auto; min-width: 0; }
.kx-ca__voice-fld .kx-input-wrap { width: 100%; }
.kx-ca__voice-fld .kx-select { border: none; background: transparent; box-shadow: none; padding-left: 2px; }

/* ---- 底部「下一步」条 ---- */
.kx-ca__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-4);
  margin-top: var(--kx-page-gap);
  padding: var(--kx-sp-3) var(--kx-sp-5);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg);
  box-shadow: var(--kx-shadow-xs);
}

.kx-ca__foot-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kx-ca__foot-title { font-size: var(--kx-fs-md); font-weight: var(--kx-fw-semibold); color: var(--kx-text); }
.kx-ca__foot-desc { font-size: var(--kx-fs-xs); line-height: 1.6; color: var(--kx-text-3); }
.kx-ca__foot-btn { flex: none; min-width: 132px; }

/* ---- 演示模式开关：开启态用主色 */
.kx-page-head__actions .kx-btn.is-on {
  background: var(--kx-primary-soft);
  border-color: var(--kx-primary-border);
  color: var(--kx-primary);
}

/* ---- 提交成功弹窗里的说明行 ---- */
.kx-ca__done {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-2);
  margin-bottom: var(--kx-sp-3);
  font-size: var(--kx-fs-sm);
  line-height: 1.7;
  color: var(--kx-success-text);
}

/* ---- 响应式：1440 / 1200 / 900 逐级塌陷 ---- */
@media (max-width: 1440px) {
  .kx-ca__grid { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr) minmax(300px, 1fr); }
  .kx-ca__phone { max-width: 256px; }
}

@media (max-width: 1200px) {
  .kx-ca__grid { grid-template-columns: minmax(0, 1fr); }
  .kx-ca__editor { min-height: 220px; }
  .kx-ca__phone { max-width: 300px; }
}

@media (max-width: 900px) {
  .kx-ca__stepcard { padding: var(--kx-sp-3) var(--kx-sp-4); }
  .kx-ca__fld { grid-template-columns: minmax(0, 1fr); }
  .kx-ca__voice { grid-template-columns: minmax(0, 1fr); }
  .kx-ca__mid-foot { flex-direction: column; align-items: stretch; }
  .kx-ca__mid-actions { justify-content: flex-end; }
  .kx-ca__foot { flex-direction: column; align-items: stretch; gap: var(--kx-sp-3); }
  .kx-ca__foot-btn { width: 100%; }
  .kx-ca__pop { left: 0; right: auto; width: min(280px, 88vw); }
}

@media (prefers-reduced-motion: reduce) {
  .kx-ca__pop-close,
  .kx-ca__extract,
  .kx-ca__voice-fld { transition: none; }
}

/* ---------------------------------------------------------------- 语音与数字人
   （内容工厂 · ASR 与数字人密钥的独立配置入口，路由 /admin/content/av-config）

   只是把「系统管理 → 系统配置」的分组卡片纵向排开：外壳与表单沿用 kx-card / kx-sys__*，
   这里只补卡片之间的间距。 */

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

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

/* ================================================================ AutoGEO
   GEO 与 AutoAMBE 同一后台，但用靛紫色系区分产品线。 */

.kx-geo-points-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); }
.kx-geo-points { color: #4f46e5; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-geo-hint { color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.6; }
.kx-geo-hint.is-warn { color: #b45309; }

/* 统计卡 */
.kx-geo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: var(--kx-page-gap);
}
.kx-geo-stat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--kx-radius-lg);
  background: var(--kx-surface-solid);
  border: 1px solid var(--kx-border);
  transition: box-shadow var(--kx-dur-fast) var(--kx-ease), border-color var(--kx-dur-fast) var(--kx-ease);
}
.kx-geo-stat:hover { border-color: #c7d2fe; box-shadow: 0 8px 22px rgba(79, 70, 229, .08); }
.kx-geo-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(99, 102, 241, .1);
  color: #4f46e5;
}
.kx-geo-stat__icon.is-violet { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.kx-geo-stat__icon.is-blue { background: rgba(37, 99, 235, .1); color: #2563eb; }
.kx-geo-stat__icon.is-cyan { background: rgba(8, 145, 178, .1); color: #0891b2; }
.kx-geo-stat__icon.is-green { background: rgba(22, 163, 74, .1); color: #16a34a; }
.kx-geo-stat__icon.is-orange { background: rgba(234, 88, 12, .1); color: #ea580c; }
.kx-geo-stat__icon.is-pink { background: rgba(219, 39, 119, .1); color: #db2777; }
.kx-geo-stat__body { flex: 1; min-width: 0; }
.kx-geo-stat__label { color: var(--kx-text-3); font-size: 11px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-geo-stat__value { margin-top: 4px; color: var(--kx-text); font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-geo-stat__foot { margin-top: 5px; color: var(--kx-text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 面板 */
.kx-geo-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--kx-page-gap);
  margin-bottom: var(--kx-page-gap);
}
@media (max-width: 1100px) {
  .kx-geo-panels { grid-template-columns: minmax(0, 1fr); }
}
.kx-geo-panel__body { padding: 16px; }
.kx-geo-panel__body:empty { display: none; }
.kx-geo-table-card .kx-card__head { flex-wrap: wrap; gap: 10px; }

/* 趋势柱 */
.kx-geo-trend { display: flex; align-items: flex-end; gap: 8px; height: 168px; padding-top: 8px; }
.kx-geo-trend__col { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.kx-geo-trend__value { color: #6366f1; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; height: 14px; }
.kx-geo-trend__bar {
  width: 100%;
  max-width: 34px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #6366f1 0%, #a5b4fc 100%);
  min-height: 3px;
  transition: height var(--kx-dur-slow) var(--kx-ease);
}
.kx-geo-trend__label { color: var(--kx-text-3); font-size: 10px; white-space: nowrap; }
.kx-geo-legend { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-legend__dot { width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #6366f1, #a5b4fc); }

/* 引擎 / 排名 / 最近采集 */
.kx-geo-engine-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--kx-border); }
.kx-geo-engine-row:last-child { border-bottom: 0; }
.kx-geo-engine-row__main { flex: 1; min-width: 0; }
.kx-geo-engine-row__name { display: flex; align-items: center; gap: 8px; color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-engine-row__meta { margin-top: 4px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-engine-row__rate { width: 150px; flex: none; }
.kx-geo-grow-val {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  width: 150px;
  flex: none;
  color: var(--kx-text);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kx-geo-grow-val small { color: var(--kx-text-3); font-size: 11px; font-weight: 500; }

.kx-geo-rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--kx-border); }
.kx-geo-rank-row:last-child { border-bottom: 0; }
.kx-geo-rank-row__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(100, 116, 139, .1);
  color: var(--kx-text-3);
  font-size: 11px;
  font-weight: 700;
}
.kx-geo-rank-row__no.is-top { background: rgba(99, 102, 241, .14); color: #4f46e5; }
.kx-geo-rank-row__main { flex: 1; min-width: 0; }
.kx-geo-rank-row__name { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-rank-row__meta { margin-top: 3px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-rank-row__rate { color: #4f46e5; font-size: var(--kx-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

.kx-geo-recent-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--kx-border); font-size: var(--kx-fs-sm); }
.kx-geo-recent-row:last-child { border-bottom: 0; }
.kx-geo-recent-row__no { flex: 1; min-width: 0; color: var(--kx-text-2); font-family: var(--kx-font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-geo-recent-row__engine { flex: none; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-recent-row__time { flex: none; color: var(--kx-text-3); font-size: 11px; }

/* 筛选条 */
.kx-geo-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kx-geo-filters__item { min-width: 150px; }
.kx-geo-filters__item .kx-input,
.kx-geo-filters__item .kx-input-wrap,
.kx-geo-filters__item .kx-select { width: 100%; }
.kx-geo-filter-card { margin-bottom: var(--kx-page-gap); }
.kx-geo-filter-card .kx-card__body { padding: 14px 16px; }

/* 表格单元格 / 操作 */
.kx-geo-cell-main { min-width: 0; }
.kx-geo-cell-title { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-cell-sub { margin-top: 3px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-count { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(99, 102, 241, .1); color: #4f46e5; font-size: 11px; font-weight: 700; text-align: center; }
.kx-geo-ops { display: inline-flex; align-items: center; gap: 2px; }

/* 百分比条 */
.kx-geo-rate { display: flex; align-items: center; gap: 8px; }
.kx-geo-rate .kx-progress { flex: 1; height: 6px; }
.kx-geo-rate__text { flex: none; width: 42px; color: var(--kx-text-3); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

/* 问题明细简单表格 */
.kx-geo-table-head,
.kx-geo-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px 84px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  font-size: var(--kx-fs-sm);
}
.kx-geo-table-head { color: var(--kx-text-3); font-size: 11px; background: rgba(99, 102, 241, .04); border-radius: 9px; }
.kx-geo-table-row { border-bottom: 1px dashed var(--kx-border); }
.kx-geo-table-row:last-child { border-bottom: 0; }
.kx-geo-table-row > span:not(:first-child) { text-align: right; color: var(--kx-text-2); font-variant-numeric: tabular-nums; }

/* 引用 / 竞品 */
.kx-geo-source-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--kx-border); }
.kx-geo-source-row:last-child { border-bottom: 0; }
.kx-geo-source-row__no { flex: none; width: 20px; color: var(--kx-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.kx-geo-source-tag { flex: none; padding: 1px 7px; border-radius: 999px; background: rgba(99, 102, 241, .1); color: #4f46e5; font-size: 10px; font-weight: 600; }
.kx-geo-source-row__main { flex: 1; min-width: 0; }
.kx-geo-source-row__domain { color: var(--kx-text); font-size: var(--kx-fs-sm); }
.kx-geo-source-row__bar { height: 5px; margin-top: 6px; border-radius: 999px; background: rgba(99, 102, 241, .08); overflow: hidden; }
.kx-geo-source-row__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #a5b4fc); }
.kx-geo-source-row__bar.is-rival i { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.kx-geo-source-row__count { flex: none; color: var(--kx-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }

/* 引擎设置卡 */
.kx-geo-quota { margin-bottom: var(--kx-page-gap); }
.kx-geo-quota__card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 16px;
  border-radius: var(--kx-radius-lg);
  background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(124, 58, 237, .04));
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .14);
}
.kx-geo-quota__label { color: var(--kx-text-3); font-size: 11px; }
.kx-geo-quota__value { margin-top: 4px; color: #4f46e5; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-geo-quota__foot { margin-top: 3px; color: var(--kx-text-3); font-size: 11px; }

.kx-geo-engine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.kx-geo-engine-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-border);
  background: var(--kx-surface-solid);
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-geo-engine-card:hover { border-color: #c7d2fe; box-shadow: 0 8px 22px rgba(79, 70, 229, .08); }
.kx-geo-engine-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kx-geo-engine-card__name { display: flex; flex-direction: column; gap: 3px; color: var(--kx-text); font-size: 16px; font-weight: 700; }
.kx-geo-engine-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-geo-cap { padding: 2px 8px; border-radius: 999px; background: rgba(100, 116, 139, .1); color: var(--kx-text-3); font-size: 10px; font-weight: 600; }
.kx-geo-cap.is-hot { background: rgba(99, 102, 241, .12); color: #4f46e5; }
.kx-geo-cap.is-key { background: rgba(22, 163, 74, .12); color: #15803d; }
.kx-geo-cap.is-miss { background: rgba(234, 88, 12, .12); color: #c2410c; }
.kx-geo-engine-card__meta { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px dashed var(--kx-border); border-bottom: 1px dashed var(--kx-border); }
.kx-geo-engine-card__line { display: flex; gap: 10px; min-width: 0; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-engine-card__line > span:first-child { flex: none; width: 64px; }
.kx-geo-engine-card__line > span:last-child { flex: 1; min-width: 0; color: var(--kx-text-2); }
.kx-geo-engine-card__ops { display: flex; gap: 8px; }
.kx-geo-engine-card__ops .kx-btn { flex: 1; justify-content: center; }

/* 采集弹窗 */
.kx-geo-run-form { display: flex; flex-direction: column; gap: 14px; }
.kx-geo-run-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kx-geo-run-form__grid > :last-child { grid-column: 1 / -1; }
.kx-geo-run-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kx-geo-run-field__label { color: var(--kx-text-3); font-size: 11px; font-weight: 600; }
.kx-geo-run-field .kx-input-wrap,
.kx-geo-run-field .kx-input { width: 100%; }

/* 采集详情 */
.kx-geo-detail { display: flex; flex-direction: column; gap: 20px; max-height: 68vh; overflow-y: auto; padding-right: 6px; }
/* 左右两栏：01/02 左，03/04 右 */
.kx-geo-detail__columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.kx-geo-detail__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 1200px) {
  .kx-geo-detail__columns { grid-template-columns: 1fr; gap: 20px; }
}
/* 通用文本块（采集详情 / SERP 详情 / 内容详情共用） */
.kx-geo-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-detail__label { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; margin-top: 4px; }
.kx-geo-detail__prompt { padding: 10px 12px; border-radius: 10px; background: rgba(99, 102, 241, .06); color: var(--kx-text); font-size: var(--kx-fs-sm); line-height: 1.7; }
.kx-geo-detail__answer { max-height: 240px; overflow-y: auto; padding: 12px; border-radius: 10px; background: var(--kx-surface-3); color: var(--kx-text-2); font-size: var(--kx-fs-sm); line-height: 1.8; white-space: pre-wrap; }

/* 概览卡 */
.kx-geo-run-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid #e0e7ff;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(99, 102, 241, .16), transparent 58%),
    linear-gradient(135deg, #fbfbff, #f4f2ff);
}
.kx-geo-run-hero__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kx-geo-run-hero__text { min-width: 0; }
.kx-geo-run-hero__title { color: var(--kx-text); font-size: 16px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
.kx-geo-run-hero__sub { margin-top: 3px; color: var(--kx-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.kx-geo-run-hero__metrics { display: flex; align-items: stretch; flex-wrap: wrap; }
.kx-geo-metric { min-width: 76px; padding: 0 16px; border-left: 1px solid rgba(99, 102, 241, .16); }
.kx-geo-metric:first-child { border-left: 0; padding-left: 0; }
.kx-geo-metric:last-child { padding-right: 0; }
.kx-geo-metric__label { color: var(--kx-text-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.kx-geo-metric__value { margin-top: 4px; color: var(--kx-text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-geo-metric__value.is-accent { color: #4f46e5; }
.kx-geo-metric__value.is-muted { color: var(--kx-text-3); font-weight: 600; }

/* 分节 */
.kx-geo-detail__section { display: flex; flex-direction: column; gap: 10px; }
.kx-geo-detail__section-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--kx-border); }
.kx-geo-detail__section-no { color: #a5b4fc; font-size: 11px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.kx-geo-detail__section-title { color: var(--kx-text); font-size: 13px; font-weight: 700; }
.kx-geo-detail__section-extra { margin-left: auto; color: var(--kx-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }

/* 问题 */
.kx-geo-quote {
  position: relative;
  padding: 12px 14px 12px 17px;
  border-radius: 10px;
  background: rgba(99, 102, 241, .06);
  color: var(--kx-text);
  font-size: var(--kx-fs-sm);
  line-height: 1.7;
}
.kx-geo-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #818cf8, #a78bfa);
}

/* 回答（轻量 Markdown 排版） */
.kx-geo-answer { max-height: 300px; overflow-y: auto; padding-right: 4px; color: var(--kx-text-2); font-size: var(--kx-fs-sm); line-height: 1.85; }
.kx-geo-answer p { margin: 0 0 10px; }
.kx-geo-answer p:last-child { margin-bottom: 0; }
.kx-geo-answer strong { color: var(--kx-text); font-weight: 600; }
.kx-geo-answer h4 { margin: 16px 0 8px; color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 700; }
.kx-geo-answer h4:first-child { margin-top: 0; }
.kx-geo-answer__item { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 9px; }
.kx-geo-answer__item:last-child { margin-bottom: 0; }
.kx-geo-answer__no {
  flex: none;
  min-width: 18px;
  height: 18px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(99, 102, 241, .11);
  color: #4f46e5;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kx-geo-answer__dot { flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: #a5b4fc; }
.kx-geo-answer__body { flex: 1; min-width: 0; }
.kx-geo-answer code { padding: 1px 5px; border-radius: 5px; background: rgba(100, 116, 139, .12); font-size: 12px; }

/* 品牌提及网格 */
.kx-geo-mention-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; }
.kx-geo-mention-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--kx-border);
  background: var(--kx-surface-solid);
  transition: border-color var(--kx-dur-fast) var(--kx-ease, ease), box-shadow var(--kx-dur-fast) var(--kx-ease, ease);
}
.kx-geo-mention-card__name { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--kx-text-3); font-size: var(--kx-fs-xs); font-weight: 600; }
.kx-geo-mention-card__name > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-geo-mention-card__tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .12);
  color: #4f46e5;
  font-size: 10px;
  font-weight: 600;
}
.kx-geo-mention-card__state { color: var(--kx-text-3); font-size: 11px; }
.kx-geo-mention-card.is-self { grid-column: span 2; }
.kx-geo-mention-card.is-hit {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(139, 92, 246, .05));
  box-shadow: 0 6px 16px rgba(79, 70, 229, .08);
}
.kx-geo-mention-card.is-hit .kx-geo-mention-card__name { color: var(--kx-text); }
.kx-geo-mention-card.is-hit .kx-geo-mention-card__state { color: #4f46e5; font-weight: 700; }
.kx-geo-mention-card.is-self.is-hit { border-color: #a5b4fc; }
.kx-geo-brand-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.kx-geo-brand-dot.is-self { background: #4f46e5; }
.kx-geo-brand-dot.is-rival { background: #f59e0b; }

/* 引用来源 */
.kx-geo-detail__citations { display: flex; flex-direction: column; gap: 6px; }
.kx-geo-citation-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border-radius: 10px; background: rgba(100, 116, 139, .05); }
.kx-geo-citation-row:hover { background: rgba(99, 102, 241, .07); }
.kx-geo-citation-row__index { flex: none; color: #a5b4fc; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kx-geo-citation-row__domain { flex: 1; min-width: 0; color: var(--kx-text-2); font-size: var(--kx-fs-xs); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-geo-citation-row__domain:hover { color: #4f46e5; text-decoration: underline; }

/* 空态 */
.kx-geo-detail__empty { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 10px; border: 1px dashed var(--kx-border); color: var(--kx-text-3); font-size: var(--kx-fs-xs); }

/* 品牌语料库 */
.kx-geo-corpus-project { max-width: 320px; }
.kx-geo-corpus-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 10px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); }
.kx-geo-corpus-error { color: #dc2626; }
.kx-geo-corpus-track { height: 8px; margin-bottom: 12px; }
.kx-geo-corpus-urls { display: flex; flex-direction: column; gap: 8px; }
.kx-geo-corpus-url { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; border-radius: 9px; background: rgba(100, 116, 139, .05); }
.kx-geo-corpus-url__label { flex: none; width: 64px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-corpus-url .kx-geo-citation-row__domain { flex: 1; }
.kx-geo-corpus-prompt { width: 100%; min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.7; resize: vertical; }
.kx-geo-corpus-form { margin-bottom: 10px; }
.kx-geo-corpus-table { width: 100%; border-collapse: collapse; font-size: var(--kx-fs-xs); }
.kx-geo-corpus-table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--kx-text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--kx-border);
  white-space: nowrap;
}
.kx-geo-corpus-table td { padding: 9px 10px; border-bottom: 1px dashed var(--kx-border); vertical-align: middle; }
.kx-geo-corpus-table tbody tr:last-child td { border-bottom: 0; }
.kx-geo-corpus-file__name { color: var(--kx-text); font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kx-geo-corpus-file__url { margin-top: 3px; max-width: 620px; color: var(--kx-text-3); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-geo-corpus-dist { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kx-geo-corpus-dist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--kx-border);
  background: linear-gradient(135deg, rgba(99, 102, 241, .05), rgba(139, 92, 246, .02));
}
.kx-geo-corpus-dist__name { color: var(--kx-text-2); font-size: var(--kx-fs-xs); }
.kx-geo-corpus-dist__count { color: #4f46e5; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-geo-corpus-preview__item { padding: 12px 0; border-bottom: 1px dashed var(--kx-border); }
.kx-geo-corpus-preview__item:last-child { border-bottom: 0; }
.kx-geo-corpus-preview__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kx-geo-corpus-preview__no { color: var(--kx-text-3); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-geo-corpus-preview__q { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; line-height: 1.6; }
.kx-geo-corpus-preview__a { margin-top: 5px; color: var(--kx-text-2); font-size: var(--kx-fs-xs); line-height: 1.8; }
.kx-geo-corpus-preview__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.kx-geo-corpus-kw { cursor: default; padding: 2px 9px; font-size: 10px; }
.kx-geo-corpus-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.kx-geo-corpus-tip { display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; background: rgba(100, 116, 139, .05); }
.kx-geo-corpus-tip__no { flex: none; color: #a5b4fc; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kx-geo-corpus-tip__title { color: var(--kx-text); font-size: var(--kx-fs-xs); font-weight: 700; }
.kx-geo-corpus-tip__desc { margin-top: 4px; color: var(--kx-text-3); font-size: 11px; line-height: 1.7; }
.kx-geo-corpus-prompt-item { padding: 12px 0; border-bottom: 1px dashed var(--kx-border); }
.kx-geo-corpus-prompt-item:last-child { border-bottom: 0; }
.kx-geo-corpus-prompt-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kx-geo-corpus-prompt-item__title { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 700; }
.kx-geo-corpus-prompt-item__desc { margin-top: 3px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-corpus-prompt-item .kx-geo-corpus-prompt { min-height: 120px; }
/* 投喂进度 */
.kx-geo-corpus-progress {
  margin-bottom: var(--kx-page-gap);
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  background: linear-gradient(135deg, rgba(99, 102, 241, .07), rgba(139, 92, 246, .03));
}
.kx-geo-corpus-progress.is-error { border-color: #fecaca; background: rgba(239, 68, 68, .06); }
.kx-geo-corpus-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kx-geo-corpus-progress__title { display: flex; align-items: center; gap: 8px; color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 700; }
.kx-geo-corpus-progress.is-building .kx-geo-corpus-progress__title svg { animation: kxGeoSpin 1.1s linear infinite; }
.kx-geo-corpus-progress__pct { color: #4f46e5; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.kx-geo-corpus-progress.is-error .kx-geo-corpus-progress__pct,
.kx-geo-corpus-progress.is-error .kx-geo-corpus-progress__title { color: #b91c1c; }
.kx-geo-corpus-progress .kx-geo-progress__track { height: 8px; margin-bottom: 10px; }
.kx-geo-corpus-progress__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); }
@keyframes kxGeoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* AI 投喂 */
.kx-geo-feed-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.kx-geo-feed-rule {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--kx-border);
  background: linear-gradient(135deg, rgba(99, 102, 241, .04), rgba(139, 92, 246, .02));
}
.kx-geo-feed-rule__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kx-geo-feed-rule__name { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 700; }
.kx-geo-feed-rule__meta { color: #6366f1; font-size: 10px; font-weight: 600; }
.kx-geo-feed-rule__desc { margin-top: 6px; color: var(--kx-text-3); font-size: 11px; line-height: 1.7; }
.kx-geo-feed-channel {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .1);
  color: #4f46e5;
  font-size: 11px;
  font-weight: 600;
}
.kx-geo-feed-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); cursor: pointer; user-select: none; }
.kx-geo-feed-toggle .kx-geo-cand__box { margin-top: 0; }
.kx-geo-feed-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  background: rgba(99, 102, 241, .06);
  color: #4f46e5;
}
.kx-geo-feed-result.is-ok { border-color: #bbf7d0; background: rgba(34, 197, 94, .08); color: #15803d; }
.kx-geo-feed-result.is-warn { border-color: #fde68a; background: rgba(245, 158, 11, .09); color: #b45309; }
.kx-geo-feed-result.is-bad { border-color: #fecaca; background: rgba(239, 68, 68, .08); color: #b91c1c; }
.kx-geo-feed-result__title { font-size: var(--kx-fs-sm); font-weight: 700; }
.kx-geo-feed-result__desc { margin-top: 4px; color: var(--kx-text-2); font-size: 11px; line-height: 1.7; }
.kx-geo-feed-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-feed-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-geo-feed-tags .kx-geo-chip { cursor: default; }

/* 自动监测计划 */
.kx-geo-plan-actions { display: flex; justify-content: flex-end; }
.kx-geo-plan-list { display: flex; flex-direction: column; gap: 8px; }
.kx-geo-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--kx-border);
  background: var(--kx-surface-solid);
  transition: border-color var(--kx-dur-fast) var(--kx-ease, ease);
}
.kx-geo-plan-row:hover { border-color: #c7d2fe; }
.kx-geo-plan-row__main { flex: 1; min-width: 0; }
.kx-geo-plan-row__title { display: flex; align-items: center; gap: 8px; color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-plan-row__meta { margin-top: 4px; color: var(--kx-text-3); font-size: 11px; line-height: 1.6; }
.kx-geo-plan-row .kx-geo-ops { flex: none; }

/* 竞品管理 */
.kx-geo-comp { display: flex; flex-direction: column; gap: 14px; }
.kx-geo-comp__hint { color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.6; }
.kx-geo-comp__head { display: flex; align-items: center; gap: 12px; }
.kx-geo-comp__head .kx-geo-comp__hint { flex: 1; min-width: 0; }
.kx-geo-comp__head .kx-btn { flex: none; }
/* 通用进度条（采集竞品 / AI 生成问题共用） */
.kx-geo-progress.kx-geo-progress--float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2600;
  width: 340px;
  background: var(--kx-surface-solid);
  border-color: #ddd9ff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .06);
}
.kx-geo-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e0e7ff;
  background: linear-gradient(135deg, rgba(99, 102, 241, .06), rgba(139, 92, 246, .04));
  animation: kxGeoFadeUp .24s var(--kx-ease, ease);
}
.kx-geo-progress[hidden] { display: none; }
.kx-geo-progress.is-error { border-color: #fecaca; background: rgba(248, 113, 113, .07); }
.kx-geo-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kx-geo-progress__label { color: var(--kx-text-2); font-size: var(--kx-fs-xs); font-weight: 600; }
.kx-geo-progress__pct { color: #4f46e5; font-size: var(--kx-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.kx-geo-progress.is-error .kx-geo-progress__label,
.kx-geo-progress.is-error .kx-geo-progress__pct { color: #dc2626; }
.kx-geo-progress__track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(79, 70, 229, .12);
  overflow: hidden;
}
.kx-geo-progress__bar {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width .2s linear;
  overflow: hidden;
}
.kx-geo-progress__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: kxGeoShimmer 1.1s linear infinite;
}
.kx-geo-progress.is-error .kx-geo-progress__bar { background: linear-gradient(90deg, #f87171, #ef4444); }
.kx-geo-progress.is-error .kx-geo-progress__bar::after { animation: none; }
.kx-geo-progress.is-done .kx-geo-progress__bar::after { animation: none; }
.kx-geo-progress__steps { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kx-geo-progress__step {
  position: relative;
  padding-left: 12px;
  color: var(--kx-text-3);
  font-size: 11px;
  line-height: 1.4;
  transition: color var(--kx-dur-fast) var(--kx-ease, ease);
}
.kx-geo-progress__step::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background var(--kx-dur-fast) var(--kx-ease, ease), box-shadow var(--kx-dur-fast) var(--kx-ease, ease);
}
.kx-geo-progress__step.is-done { color: #4f46e5; }
.kx-geo-progress__step.is-done::before { background: #6366f1; }
.kx-geo-progress__step.is-active { color: #4f46e5; font-weight: 600; }
.kx-geo-progress__step.is-active::before {
  background: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .2);
  animation: kxGeoDotPulse 1.2s ease-in-out infinite;
}
.kx-geo-progress.is-error .kx-geo-progress__step.is-active { color: #dc2626; }
.kx-geo-progress.is-error .kx-geo-progress__step.is-active::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); animation: none; }
@keyframes kxGeoShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes kxGeoDotPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(99, 102, 241, .18); }
  50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, .12); }
}
@keyframes kxGeoFadeUp {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.kx-geo-cand-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow: auto; padding-right: 2px; }
.kx-geo-cand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--kx-border);
  background: var(--kx-surface-solid);
  transition: border-color var(--kx-dur-fast) var(--kx-ease), box-shadow var(--kx-dur-fast) var(--kx-ease);
}
.kx-geo-cand:hover { border-color: #c7d2fe; box-shadow: 0 6px 16px rgba(79, 70, 229, .06); }
.kx-geo-cand__box { width: 16px; height: 16px; margin-top: 8px; flex: none; accent-color: #4f46e5; cursor: pointer; }
.kx-geo-cand__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kx-geo-cand__name { height: 32px; font-size: var(--kx-fs-sm); }
.kx-geo-cand__meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kx-geo-cand__domain { flex: none; color: #4f46e5; font-size: 11px; font-weight: 600; }
.kx-geo-cand__desc { flex: 1; min-width: 0; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-cand__count { flex: none; color: #4f46e5; font-size: var(--kx-fs-xs); font-weight: 600; }
/* AI 生成问题 */
.kx-geo-gen { display: flex; flex-direction: column; gap: 14px; }
.kx-geo-gen-form { display: flex; flex-wrap: wrap; gap: 14px; }
.kx-geo-gen-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 220px; }
.kx-geo-gen-field.is-wide { flex-basis: 100%; }
.kx-geo-gen-field__label { color: var(--kx-text-2); font-size: var(--kx-fs-xs); font-weight: 600; }
.kx-geo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kx-geo-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--kx-border);
  background: var(--kx-surface-solid);
  color: var(--kx-text-2);
  font-size: var(--kx-fs-xs);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--kx-dur-fast) var(--kx-ease, ease), background var(--kx-dur-fast) var(--kx-ease, ease), color var(--kx-dur-fast) var(--kx-ease, ease);
}
.kx-geo-chip input { display: none; }
.kx-geo-chip:hover { border-color: #c7d2fe; }
.kx-geo-chip.is-on { border-color: #c7d2fe; background: rgba(99, 102, 241, .1); color: #4f46e5; font-weight: 600; }
.kx-geo-comp-list { display: flex; flex-direction: column; gap: 6px; }
.kx-geo-comp__row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(100, 116, 139, .06); }
.kx-geo-comp__name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-comp__row > .kx-ellipsis { flex: 1; min-width: 0; }
.kx-geo-comp__add { padding-top: 14px; border-top: 1px dashed var(--kx-border); }
.kx-geo-comp__add-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* 空态 */
.kx-geo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 34px 16px; text-align: center; }
.kx-geo-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(99, 102, 241, .1); color: #6366f1; }
.kx-geo-empty__title { color: var(--kx-text-2); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-empty__desc { max-width: 420px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.6; }

/* SERP 雷达 / 内容工坊（DeepSeek Search & Fetch） */
.kx-geo-search-cfg { margin-bottom: var(--kx-page-gap); }
.kx-geo-search-cfg .kx-card__head { flex-wrap: wrap; gap: 10px; }
.kx-geo-audit-card { margin-top: var(--kx-page-gap); }
.kx-geo-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, .12);
  color: #4f46e5;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kx-geo-serp-list { display: flex; flex-direction: column; gap: 6px; }
.kx-geo-serp-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(100, 116, 139, .05); }
.kx-geo-serp-row__rank { flex: none; width: 22px; color: var(--kx-text-3); font-size: 11px; font-weight: 700; padding-top: 2px; }
.kx-geo-serp-row__main { flex: 1; min-width: 0; }
.kx-geo-serp-row__title { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-serp-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-serp-row__domain { color: #4f46e5; text-decoration: none; }
.kx-geo-serp-row__domain:hover { text-decoration: underline; }
.kx-geo-serp-row__snippet { margin-top: 5px; color: var(--kx-text-3); font-size: 11px; line-height: 1.6; }
.kx-geo-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kx-geo-score.is-good { background: rgba(22, 163, 74, .12); color: #15803d; }
.kx-geo-score.is-mid { background: rgba(234, 88, 12, .12); color: #c2410c; }
.kx-geo-score.is-bad { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.kx-geo-link { color: #4f46e5; font-size: 11px; text-decoration: none; }
.kx-geo-link:hover { text-decoration: underline; }
.kx-geo-audit-result { display: flex; flex-direction: column; gap: 10px; }
.kx-geo-audit-score { display: flex; align-items: center; gap: 10px; }
.kx-geo-audit-score .kx-geo-score { min-width: 52px; height: 40px; font-size: 18px; border-radius: 12px; }
.kx-geo-audit-metrics { display: flex; flex-wrap: wrap; gap: 10px; color: var(--kx-text-3); font-size: 11px; }
.kx-geo-audit-issues { display: flex; flex-direction: column; gap: 6px; }
.kx-geo-audit-issue { padding: 8px 10px; border-radius: 9px; font-size: var(--kx-fs-xs); line-height: 1.6; }
.kx-geo-audit-issue.is-high { background: rgba(220, 38, 38, .08); color: #b91c1c; }
.kx-geo-audit-issue.is-medium { background: rgba(234, 88, 12, .08); color: #c2410c; }
.kx-geo-audit-issue.is-low { background: rgba(100, 116, 139, .08); color: var(--kx-text-2); }
.kx-geo-audit-issue.is-ok { background: rgba(22, 163, 74, .08); color: #15803d; }
.kx-geo-faq { padding: 9px 12px; border-radius: 9px; background: rgba(99, 102, 241, .05); }
.kx-geo-faq__q { color: var(--kx-text); font-size: var(--kx-fs-sm); font-weight: 600; }
.kx-geo-faq__a { margin-top: 4px; color: var(--kx-text-3); font-size: var(--kx-fs-xs); line-height: 1.6; }
.kx-geo-detail__outline { display: flex; flex-direction: column; gap: 4px; color: var(--kx-text-2); font-size: var(--kx-fs-sm); }





/* ============================================================
   内容工厂 · 平台内容规则（按账号授权的平台展示创作口径）
   ============================================================ */
.kx-cr__meta {
  margin: 0 0 var(--kx-sp-3, 12px);
  font-size: var(--kx-fs-sm, 13px);
  color: var(--kx-text-2);
}

.kx-cr__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-4, 16px);
  align-items: start;
}

.kx-cr__card {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: var(--kx-bg-card, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.kx-cr__head { display: flex; align-items: center; gap: var(--kx-sp-3, 12px); }
.kx-cr__head-main { flex: 1; min-width: 0; }
.kx-cr__name { font-size: var(--kx-fs, 14px); font-weight: 600; color: var(--kx-text); }
.kx-cr__sub { margin-top: 2px; font-size: 12px; color: var(--kx-text-3); }

.kx-cr__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #5c7cfa, #3b5bdb);
}
.kx-cr__logo--red     { background: linear-gradient(135deg, #f87171, #dc2626); }
.kx-cr__logo--dark    { background: linear-gradient(135deg, #4b5563, #111827); }
.kx-cr__logo--green   { background: linear-gradient(135deg, #34d399, #059669); }
.kx-cr__logo--orange  { background: linear-gradient(135deg, #fbbf24, #ea580c); }
.kx-cr__logo--cyan    { background: linear-gradient(135deg, #22d3ee, #0891b2); }
.kx-cr__logo--amber   { background: linear-gradient(135deg, #fcd34d, #d97706); }
.kx-cr__logo--crimson { background: linear-gradient(135deg, #fb7185, #be123c); }
.kx-cr__logo--pink    { background: linear-gradient(135deg, #f9a8d4, #db2777); }
.kx-cr__logo--blue    { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.kx-cr__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-3, 12px);
  border-radius: var(--kx-radius-md, 10px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
}
.kx-cr__spec-label { font-size: 12px; color: var(--kx-text-3); margin-bottom: 2px; }
.kx-cr__spec-value { font-size: var(--kx-fs-sm, 13px); font-weight: 600; color: var(--kx-text); }
.kx-cr__spec-tip { margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--kx-text-2); }

.kx-cr__block {
  padding-left: var(--kx-sp-3, 12px);
  border-left: 3px solid var(--kx-border);
}
.kx-cr__block--warn { border-left-color: #f59e0b; }
.kx-cr__block-title { font-size: 12px; font-weight: 600; color: var(--kx-text-2); margin-bottom: 2px; }
.kx-cr__block-text { font-size: var(--kx-fs-sm, 13px); line-height: 1.75; color: var(--kx-text); }

.kx-cr__empty {
  padding: var(--kx-sp-4, 16px);
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  font-size: var(--kx-fs-sm, 13px);
  color: var(--kx-text-2);
  text-align: center;
}

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

/* ==========================================================================
   内容生成（内容工厂 → 内容生成，按平台 TAB）
   结构：.kx-cg > 额度条 + .kx-tabs（平台 TAB）
         .kx-cg__panel > 规则条 + 素材来源 + 内容方向 + 结果 + 生成记录
   ========================================================================== */

.kx-cg {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4, 16px);
}

/* ---------------------------------------------------------- 额度条 */
.kx-cg__quota {
  display: flex;
  align-items: center;
  gap: var(--kx-sp-5, 20px);
  flex-wrap: wrap;
  padding: var(--kx-sp-4, 16px) var(--kx-sp-5, 20px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background:
    linear-gradient(120deg, rgba(99, 102, 241, .06), rgba(14, 165, 233, .04) 45%, rgba(255, 255, 255, 0) 75%),
    var(--kx-bg-card, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.kx-cg__quota-item { min-width: 96px; }
.kx-cg__quota-label {
  font-size: 12px;
  color: var(--kx-text-3);
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.kx-cg__quota-num {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--kx-text);
  font-variant-numeric: tabular-nums;
}
.kx-cg__quota-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--kx-text-3);
}

/* ---------------------------------------------------------- 平台 TAB */
.kx-cg .kx-tabs__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--kx-border);
  scrollbar-width: thin;
}
.kx-cg .kx-tabs__nav::-webkit-scrollbar { height: 4px; }
.kx-cg .kx-tabs__nav::-webkit-scrollbar-thumb {
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .16);
  border-radius: 4px;
}
.kx-cg .kx-tabs__item {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 14px 10px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  font-size: var(--kx-fs-sm, 13px);
  font-weight: 500;
  color: var(--kx-text-2);
  white-space: nowrap;
  transition: color var(--kx-dur), background-color var(--kx-dur);
}
.kx-cg .kx-tabs__item:hover { color: var(--kx-text); background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .04); }
.kx-cg .kx-tabs__item.is-active {
  color: var(--kx-primary);
  font-weight: 600;
  background: var(--kx-primary-soft, rgba(99, 102, 241, .08));
}
.kx-cg .kx-tabs__item.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--kx-gradient-primary, linear-gradient(90deg, #6366f1, #0ea5e9));
}
.kx-cg .kx-tabs__panel { padding-top: var(--kx-sp-4, 16px); }

.kx-cg__panel {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4, 16px);
}

/* ---------------------------------------------------------- 规则条 */
.kx-cg__rulebar {
  display: flex;
  align-items: flex-start;
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-3, 12px) var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .02);
}
.kx-cg__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: #6366f1;
}
.kx-cg__dot--red     { background: #ef4444; }
.kx-cg__dot--dark    { background: #111827; }
.kx-cg__dot--green   { background: #10b981; }
.kx-cg__dot--orange  { background: #f97316; }
.kx-cg__dot--cyan    { background: #06b6d4; }
.kx-cg__dot--amber   { background: #f59e0b; }
.kx-cg__dot--crimson { background: #e11d48; }
.kx-cg__dot--pink    { background: #ec4899; }
.kx-cg__dot--blue    { background: #3b82f6; }

.kx-cg__rulebar-main { flex: 1; min-width: 0; }
.kx-cg__rulebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kx-fs-sm, 13px);
  font-weight: 600;
  color: var(--kx-text);
}
.kx-cg__rulebar-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
}
.kx-cg__spec { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; }
.kx-cg__spec-label { color: var(--kx-text-3); }
.kx-cg__spec-value { color: var(--kx-text-2); font-weight: 500; }

.kx-cg__rulebar-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* ---------------------------------------------------------- 区块 */
.kx-cg__section {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: var(--kx-bg-card, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.kx-cg__section--result { border-color: rgba(99, 102, 241, .28); }

.kx-cg__section-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kx-cg__section-head--row { align-items: center; }
.kx-cg__section-head-main { flex: 1; min-width: 0; }
.kx-cg__section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--kx-primary);
  background: var(--kx-primary-soft, rgba(99, 102, 241, .1));
}
.kx-cg__section-title { font-size: var(--kx-fs, 14px); font-weight: 600; color: var(--kx-text); }
.kx-cg__section-desc { margin-top: 2px; font-size: 12px; color: var(--kx-text-3); }

/* ---------------------------------------------------------- 素材来源 */
.kx-cg__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--kx-sp-3, 12px);
  border-radius: var(--kx-radius-md, 10px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .022);
}
.kx-cg__block--slim { padding: 10px var(--kx-sp-3, 12px); }
.kx-cg__block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kx-cg__block-title { font-size: var(--kx-fs-sm, 13px); font-weight: 600; color: var(--kx-text); }
.kx-cg__block-meta { font-size: 12px; color: var(--kx-text-3); }
.kx-cg__block-actions { display: flex; gap: 2px; margin-left: auto; }

.kx-cg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-cg__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--kx-border);
  border-radius: 6px;
  background: var(--kx-bg-card, #fff);
  font-size: 12px;
  color: var(--kx-text-2);
  max-width: 100%;
}
.kx-cg__chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-cg__chip-meta { color: var(--kx-text-3); flex: none; }

.kx-cg__entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 264px;
  overflow-y: auto;
  padding-right: 2px;
}
.kx-cg__entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--kx-dur);
}
.kx-cg__entry:hover { background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .05); }
.kx-cg__entry.is-checked { background: var(--kx-primary-soft, rgba(99, 102, 241, .09)); }
.kx-cg__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--kx-border);
  border-radius: 4px;
  background: #fff;
  color: #fff;
}
.kx-cg__check.is-checked {
  border-color: transparent;
  background: var(--kx-primary, #6366f1);
}
.kx-cg__entry-type {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .06);
  font-size: 11px;
  color: var(--kx-text-2);
}
.kx-cg__entry-title {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--kx-fs-sm, 13px);
  color: var(--kx-text);
}
.kx-cg__entry-excerpt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cg__entry-weight { flex: none; font-size: 11px; color: var(--kx-text-4, var(--kx-text-3)); }

/* ---------------------------------------------------------- 内容方向 */
.kx-cg__form { display: flex; flex-direction: column; gap: var(--kx-sp-3, 12px); }
.kx-cg__form-row { display: flex; gap: var(--kx-sp-3, 12px); }
.kx-cg__form-cell { flex: 1; min-width: 0; }
.kx-cg__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kx-cg__field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cg__field-tip { font-size: 12px; color: var(--kx-text-3); }
.kx-cg__select { height: 34px; }
.kx-cg__meta { font-size: 12px; color: var(--kx-text-3); }

.kx-cg__pill {
  padding: 5px 12px;
  border: 1px solid var(--kx-border);
  border-radius: 999px;
  background: var(--kx-bg-card, #fff);
  font-size: 12px;
  color: var(--kx-text-2);
  cursor: pointer;
  transition: all var(--kx-dur);
}
.kx-cg__pill:hover { border-color: rgba(99, 102, 241, .45); color: var(--kx-primary); }
.kx-cg__pill.is-active {
  border-color: transparent;
  background: var(--kx-gradient-primary, linear-gradient(135deg, #6366f1, #0ea5e9));
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .28);
}

.kx-cg__seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--kx-border);
  border-radius: 8px;
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
  width: fit-content;
}
.kx-cg__seg-item {
  min-width: 58px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  color: var(--kx-text-2);
  cursor: pointer;
}
.kx-cg__seg-item.is-active {
  background: #fff;
  color: var(--kx-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.kx-cg__save {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px var(--kx-sp-3, 12px);
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
}
.kx-cg__save-title { font-size: var(--kx-fs-sm, 13px); font-weight: 500; color: var(--kx-text); }
.kx-cg__save-desc { margin-top: 2px; font-size: 12px; color: var(--kx-text-3); }
.kx-cg__savenote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--kx-text-3);
}

.kx-cg__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------- 结果 */
.kx-cg__usage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cg__warnline {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .1);
  font-size: 12px;
  line-height: 1.7;
  color: #b45309;
}
.kx-cg__warnline--danger { background: rgba(239, 68, 68, .08); color: #b91c1c; }
.kx-cg__hint { font-size: 12px; line-height: 1.7; color: var(--kx-text-3); }

.kx-cg__cands { display: flex; flex-direction: column; gap: var(--kx-sp-3, 12px); }
.kx-cg__cand {
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  overflow: hidden;
}
.kx-cg__cand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--kx-sp-3, 12px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
  border-bottom: 1px solid var(--kx-border);
}
.kx-cg__cand-index {
  font-size: 12px;
  font-weight: 600;
  color: var(--kx-primary);
}
.kx-cg__cand-head > .kx-btn { margin-left: auto; }
.kx-cg__cand-body {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-3, 12px);
}
.kx-cg__cand-cover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--kx-text-2);
}

/* ---------------------------------------------------------- 生成记录 */
.kx-cg__rec-table {
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  overflow: hidden;
}
.kx-cg__rec-head,
.kx-cg__rec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 64px 84px 112px 76px;
  align-items: center;
  gap: 10px;
  padding: 8px var(--kx-sp-3, 12px);
}
.kx-cg__rec-head {
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .04);
  font-size: 12px;
  font-weight: 500;
  color: var(--kx-text-3);
}
.kx-cg__rec-row {
  border-top: 1px solid var(--kx-border);
  font-size: var(--kx-fs-sm, 13px);
  color: var(--kx-text-2);
  transition: background-color var(--kx-dur);
}
.kx-cg__rec-row:hover { background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .025); }
.kx-cg__rec-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kx-text);
  font-weight: 500;
}
.kx-cg__rec-direction,
.kx-cg__rec-chars,
.kx-cg__rec-time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--kx-text-3);
  font-variant-numeric: tabular-nums;
}

.kx-cg__pager {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.kx-cg__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--kx-sp-6, 28px) var(--kx-sp-4, 16px);
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  color: var(--kx-text-3);
}
.kx-cg__empty-text { font-size: var(--kx-fs-sm, 13px); color: var(--kx-text-2); }

/* ---------------------------------------------------------- 记录详情 / 预览 */
.kx-cg__view { display: flex; flex-direction: column; gap: var(--kx-sp-3, 12px); }
.kx-cg__view-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-cg__view-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kx-text);
}
.kx-cg__view-content {
  max-height: 46vh;
  overflow-y: auto;
  padding: var(--kx-sp-3, 12px);
  border-radius: var(--kx-radius-md, 10px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
  font-size: var(--kx-fs-sm, 13px);
  line-height: 1.9;
  color: var(--kx-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.kx-cg__view-topics { font-size: 12px; color: var(--kx-primary); }
.kx-cg__view-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.kx-cg__preview { display: flex; flex-direction: column; gap: var(--kx-sp-3, 12px); }
.kx-cg__preview-block {
  padding: var(--kx-sp-3, 12px);
  border-radius: var(--kx-radius-md, 10px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
}
.kx-cg__preview-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--kx-text-2);
  margin-bottom: 6px;
}
.kx-cg__preview-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--kx-text-2);
}

@media (max-width: 1100px) {
  .kx-cg__form-row { flex-direction: column; }
  .kx-cg__rec-head,
  .kx-cg__rec-row { grid-template-columns: minmax(0, 1fr) 84px 76px 76px; }
  .kx-cg__rec-head > span:nth-child(2),
  .kx-cg__rec-head > span:nth-child(3),
  .kx-cg__rec-row > span:nth-child(2),
  .kx-cg__rec-row > span:nth-child(3) { display: none; }
}

/* ==========================================================================
   内容分发（内容工厂 → 内容分发：立即发布 / 定时分发）
   ========================================================================== */

.kx-cd {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-4, 16px);
}

/* ---------------------------------------------------------- 两个模式 TAB */
.kx-cd__modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kx-sp-3, 12px);
}
.kx-cd__mode {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: var(--kx-bg-card, #fff);
  text-align: left;
  cursor: pointer;
  transition: all var(--kx-dur);
}
.kx-cd__mode:hover { border-color: rgba(99, 102, 241, .4); }
.kx-cd__mode.is-active {
  border-color: transparent;
  background:
    linear-gradient(120deg, rgba(99, 102, 241, .1), rgba(14, 165, 233, .07)),
    var(--kx-bg-card, #fff);
  box-shadow: 0 2px 10px rgba(99, 102, 241, .14);
  outline: 1px solid rgba(99, 102, 241, .35);
}
.kx-cd__mode-title { font-size: var(--kx-fs, 14px); font-weight: 600; color: var(--kx-text); }
.kx-cd__mode.is-active .kx-cd__mode-title { color: var(--kx-primary); }
.kx-cd__mode-desc { font-size: 12px; color: var(--kx-text-3); }

/* ---------------------------------------------------------- 平台选择 */
.kx-cd__platforms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.kx-cd__platform {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  background: var(--kx-bg-card, #fff);
  text-align: left;
  cursor: pointer;
  transition: all var(--kx-dur);
}
.kx-cd__platform:hover { border-color: rgba(99, 102, 241, .4); }
.kx-cd__platform.is-active {
  border-color: rgba(99, 102, 241, .55);
  background: var(--kx-primary-soft, rgba(99, 102, 241, .07));
}
.kx-cd__platform.is-disabled { opacity: .62; cursor: not-allowed; }
.kx-cd__platform-main { flex: 1; min-width: 0; }
.kx-cd__platform-name { font-size: var(--kx-fs, 14px); font-weight: 600; color: var(--kx-text); }
.kx-cd__platform-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--kx-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-cd__platform-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.kx-cd__pending { font-size: 12px; color: var(--kx-text-3); font-variant-numeric: tabular-nums; }

.kx-cd__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kx-text-3);
}
.kx-cd__dot--dark    { background: #111827; }
.kx-cd__dot--crimson { background: #e11d48; }
.kx-cd__dot--online  { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); }
.kx-cd__dot--busy    { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.kx-cd__dot--offline { background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .28); }

/* ---------------------------------------------------------- 区块 */
.kx-cd__section {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: var(--kx-bg-card, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.kx-cd__section-head { display: flex; align-items: flex-start; gap: 10px; }
.kx-cd__section-head-main { flex: 1; min-width: 0; }
.kx-cd__section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--kx-primary);
  background: var(--kx-primary-soft, rgba(99, 102, 241, .1));
}
.kx-cd__section-title { font-size: var(--kx-fs, 14px); font-weight: 600; color: var(--kx-text); }
.kx-cd__section-desc { margin-top: 2px; font-size: 12px; color: var(--kx-text-3); }
.kx-cd__picked {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--kx-primary);
  background: var(--kx-primary-soft, rgba(99, 102, 241, .1));
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------------------------------------------------------- 内容列表 */
.kx-cd__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.kx-cd__select { width: 120px; height: 34px; }
.kx-cd__select-wide { width: 100%; height: 34px; max-width: 420px; }
.kx-cd__search { flex: 1; min-width: 180px; height: 34px; }
.kx-cd__param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.kx-cd__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
}
.kx-cd__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--kx-dur);
}
.kx-cd__row:hover { background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .045); }
.kx-cd__row.is-checked { background: var(--kx-primary-soft, rgba(99, 102, 241, .09)); }

.kx-cd__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 1px solid var(--kx-border);
  border-radius: 4px;
  background: #fff;
  color: #fff;
}
.kx-cd__check.is-checked {
  border-color: transparent;
  background: var(--kx-primary, #6366f1);
}

.kx-cd__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .06);
}
.kx-cd__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-text-3);
}

.kx-cd__row-main { flex: 1; min-width: 0; }
.kx-cd__row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--kx-fs-sm, 13px);
  font-weight: 500;
  color: var(--kx-text);
}
.kx-cd__row-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.kx-cd__row-title .kx-cd__preview {
  margin-left: auto;
  flex: none;
  padding: 0 4px;
  height: 22px;
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cd__row-title .kx-cd__preview:hover { color: var(--kx-primary); }

.kx-cd__view { display: flex; flex-direction: column; gap: var(--kx-sp-3, 12px); }
.kx-cd__view-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kx-cd__view-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kx-text);
}
.kx-cd__view-content {
  max-height: 52vh;
  overflow-y: auto;
  padding: var(--kx-sp-3, 12px);
  border-radius: var(--kx-radius-md, 10px);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
  font-size: var(--kx-fs-sm, 13px);
  line-height: 1.9;
  color: var(--kx-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.kx-cd__view-topics { font-size: 12px; color: var(--kx-primary); }
.kx-cd__view-foot { display: flex; justify-content: flex-end; }
.kx-cd__row-meta {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cd__meta-warn { color: #b45309; }
.kx-cd__row-excerpt {
  margin-top: 2px;
  font-size: 12px;
  color: var(--kx-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kx-cd__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--kx-sp-6, 28px) var(--kx-sp-4, 16px);
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  color: var(--kx-text-3);
}
.kx-cd__empty-text { font-size: var(--kx-fs-sm, 13px); color: var(--kx-text-2); }
.kx-cd__pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.kx-cd__meta { font-size: 12px; color: var(--kx-text-3); }
/* 「必选」标记：发布模块步骤里用了 {{cover}} 时，封面不填任务必失败 */
.kx-cd__req {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: #b91c1c;
  background: rgba(239, 68, 68, .12);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .28);
}
.kx-cd__hint { font-size: 12px; line-height: 1.7; color: var(--kx-text-3); }

/* ---------------------------------------------------------- 发布信息 */
.kx-cd__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kx-cd__field--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; }
.kx-cd__field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cd__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.kx-cd__thumb-lg {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid transparent;
  object-fit: cover;
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .06);
  cursor: pointer;
  transition: all var(--kx-dur);
}
.kx-cd__thumb-lg:hover { border-color: rgba(99, 102, 241, .45); }
.kx-cd__thumb-lg.is-active {
  border-color: var(--kx-primary, #6366f1);
  box-shadow: 0 2px 8px rgba(99, 102, 241, .3);
}
.kx-cd__thumb-lg.kx-cd__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kx-text-3);
}
.kx-cd__quick { display: flex; gap: 2px; }

.kx-cd__cover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kx-cd__cover-preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .03);
}
.kx-cd__cover-preview img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
}
.kx-cd__field-label--slim {
  margin-top: 4px;
  font-size: 12px;
  color: var(--kx-text-3);
}

/* ---------------------------------------------------------- 设备 */
.kx-cd__devices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.kx-cd__device {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--kx-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--kx-dur);
}
.kx-cd__device:hover { border-color: rgba(99, 102, 241, .4); }
.kx-cd__device.is-checked {
  border-color: rgba(99, 102, 241, .55);
  background: var(--kx-primary-soft, rgba(99, 102, 241, .08));
}
.kx-cd__device-main { flex: 1; min-width: 0; }
.kx-cd__device-name {
  font-size: var(--kx-fs-sm, 13px);
  font-weight: 500;
  color: var(--kx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------- 底部提交 */
.kx-cd__footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--kx-sp-3, 12px) var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: var(--kx-bg-card, #fff);
  box-shadow: 0 -2px 14px rgba(15, 23, 42, .06);
}
.kx-cd__plan { display: flex; flex-direction: column; gap: 6px; }
.kx-cd__datetime { width: 220px; height: 34px; }
.kx-cd__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kx-sp-4, 16px);
  flex-wrap: wrap;
}
.kx-cd__summary-main { display: flex; align-items: baseline; gap: 8px; }
.kx-cd__summary-num {
  font-size: 20px;
  font-weight: 600;
  color: var(--kx-text);
  font-variant-numeric: tabular-nums;
}
.kx-cd__summary-num--primary { color: var(--kx-primary); }
.kx-cd__summary-x,
.kx-cd__summary-eq { color: var(--kx-text-3); font-size: 13px; }
.kx-cd__submit { min-width: 168px; }

.kx-cd__warnline {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .1);
  font-size: 12px;
  line-height: 1.7;
  color: #b45309;
}

.kx-cd__confirm { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------- 结果弹层 */
.kx-cd__result { display: flex; flex-direction: column; gap: 10px; }
.kx-cd__result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx-cd__result-table {
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  overflow: hidden;
  max-height: 46vh;
  overflow-y: auto;
}
.kx-cd__result-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 140px 150px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-top: 1px solid var(--kx-border);
  font-size: var(--kx-fs-sm, 13px);
}
.kx-cd__result-row:first-child { border-top: 0; }
.kx-cd__result-row--head {
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .04);
  font-size: 12px;
  color: var(--kx-text-3);
}
.kx-cd__result-row--error { background: rgba(239, 68, 68, .05); }
.kx-cd__result-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kx-text);
}

@media (max-width: 1100px) {
  .kx-cd__modes { grid-template-columns: minmax(0, 1fr); }
  .kx-cd__platforms { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .kx-cd__result-row { grid-template-columns: 24px minmax(0, 1fr) 100px; }
  .kx-cd__result-row > span:nth-child(4) { display: none; }
}

/* ==========================================================================
   内容工厂 · 图片素材库（OPC）
   ========================================================================== */

.kx-cm__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--kx-sp-3, 12px) 0;
  flex-wrap: wrap;
}
.kx-cm__search { flex: 1; min-width: 200px; height: 34px; }
.kx-cm__select { width: 130px; height: 34px; }
.kx-cm__count { font-size: 12px; color: var(--kx-text-3); }

.kx-cm__section {
  display: flex;
  flex-direction: column;
  gap: var(--kx-sp-3, 12px);
  padding: var(--kx-sp-4, 16px);
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-lg, 12px);
  background: var(--kx-bg-card, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.kx-cm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--kx-sp-3, 12px);
}

.kx-cm__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  overflow: hidden;
  background: var(--kx-bg-card, #fff);
  transition: box-shadow var(--kx-dur), transform var(--kx-dur);
}
.kx-cm__card:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
  transform: translateY(-1px);
}
.kx-cm__card.is-off { opacity: .62; }

.kx-cm__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .05);
}
.kx-cm__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kx-cm__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  background: rgba(15, 23, 42, .55);
}
.kx-cm__badge.is-on { background: rgba(16, 185, 129, .9); }
.kx-cm__badge.is-off { background: rgba(107, 114, 128, .9); }

.kx-cm__body {
  flex: 1;
  min-width: 0;
  padding: 8px 10px 6px;
}
.kx-cm__name {
  font-size: var(--kx-fs-sm, 13px);
  font-weight: 500;
  color: var(--kx-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-cm__meta { margin-top: 2px; font-size: 12px; color: var(--kx-text-3); }

.kx-cm__ops {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-top: 1px solid var(--kx-border);
  background: rgba(var(--kx-overlay-rgb, 15, 23, 42), .02);
}

.kx-cm__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--kx-sp-6, 28px) var(--kx-sp-4, 16px);
  border: 1px dashed var(--kx-border);
  border-radius: var(--kx-radius-md, 10px);
  color: var(--kx-text-3);
}
.kx-cm__empty-text { font-size: var(--kx-fs-sm, 13px); color: var(--kx-text-2); }
.kx-cm__hint { font-size: 12px; line-height: 1.7; color: var(--kx-text-3); }

.kx-cm__pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.kx-cm__form { display: flex; flex-direction: column; gap: 6px; }
.kx-cm__field-label { font-size: 12px; color: var(--kx-text-3); }