/* ============================================================
   kit.css —— 页面组件层(前缀一律 k-)

   ── 要解决的问题 ──
   public/js/pages/ 下 98 个页面,**每一个**都在自己文件里塞一段 <style>,
   合计 2585 行。把它们的类名去掉私有前缀之后,重复得触目惊心:
       .xx-card   43 个页面各写一遍
       .xx-tag    38 个        .xx-empty  34 个
       .xx-bar    34 个        .xx-row    31 个
       .xx-grid   22 个        .xx-form   21 个
       .xx-badge  17 个        .xx-chip   14 个
       .xx-table  12 个        .xx-toolbar 10 个
   同一个"小圆角标签"被写了 38 份、各自的 padding 差 1px、颜色差一个色号 ——
   于是每加一个页面就要再抄一份,而全站统一调一次样式等于改 38 个文件。
   这就是"业务一调整就得重复开发"最具体的一种形态。

   ── 边界(别把这里写成第二个 style.css)──
   · style.css 管**外壳**:顶栏、侧栏、视图容器、.card / .btn / .form / .banner / .tag。
     那些已经是全站共用的,这里**不重复定义、不覆盖**。
   · kit.css 只管**页面内部反复出现的那几种块**:指标行、工具条、数据表、
     标签/筛选片、卡片网格、进度条、空态、说明文字、弹层。
   · 颜色一律走 style.css 里的 CSS 变量(--line/--bg/--ink-2/...),
     带一份兜底值是因为 pages/ 里原来那些样式就是这么写的(单独打开某一页也不会崩)。

   ── 怎么用 ──
   新页面直接写 class="k-kpis" 这种,不要再在页面里写 <style>。
   确实只有这一页要用的样式(某个专属图表、某种特殊配色)才留在页面自己的
   PageKit.css() 里 —— 判据只有一条:**另一个页面会不会也想要**。会,就搬到这里。
   ============================================================ */

/* ---------- 指标行:一排「名字 + 大数字」 ---------- */
.k-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.k-kpi {
  flex: 1; min-width: 140px;
  background: var(--bg, #f7f9fc); border: 1px solid var(--line, #e6eaf0);
  border-radius: 10px; padding: 11px 13px;
}
.k-kpi .k { font-size: 12px; color: var(--ink-2, #4b5563); }
.k-kpi .v { font-size: 21px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.k-kpi .s { font-size: 11px; color: var(--muted, #94a3b8); margin-top: 2px; }
/* 指标本身是个可点的筛子时(点「失败 3 条」直接筛出那 3 条) */
.k-kpi.click { cursor: pointer; }
.k-kpi.click:hover { border-color: var(--blue, #2563eb); }
.k-kpi.on { border-color: var(--blue, #2563eb); background: var(--blue-soft, #eff4ff); }

/* ---------- 工具条:一行按钮/下拉/搜索框 ---------- */
.k-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.k-bar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.k-bar input[type="text"], .k-bar input[type="search"], .k-bar input[type="number"],
.k-bar input[type="date"], .k-bar select {
  padding: 6px 9px; border: 1px solid var(--line, #e6eaf0); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: #fff; color: var(--ink, #1f2937);
}

/* ---------- 行内表单:一排「小标题在上、输入框在下」 ---------- */
.k-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.k-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2, #4b5563); }
.k-form input, .k-form select, .k-form textarea {
  padding: 7px 9px; border: 1px solid var(--line, #e6eaf0); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: #fff; color: var(--ink, #1f2937);
}
.k-form textarea { min-height: 64px; resize: vertical; }
/* 勾选框那一行不该被拉成"上下两截",它本来就是一行字 */
.k-form label.chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.k-form label.chk input { width: auto; }

/* ---------- 数据表 ---------- */
.k-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.k-table th, .k-table td {
  border: 1px solid var(--line, #e6eaf0); padding: 7px 9px; text-align: left; vertical-align: top;
}
.k-table th { background: var(--bg, #f7f9fc); font-weight: 600; white-space: nowrap; }
.k-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-table tr.hit { background: #fefce8; }   /* 试算/搜索命中 */
.k-table tr.off { opacity: .55; }          /* 已停用/已归档 */
/* 表格在窄屏会把整页撑出横向滚动条(手机端打开电脑版时常见)。
   包一层 .k-scroll,让**表格自己**横向滚,页面 body 不跟着动。 */
.k-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 标签 / 筛选片 ----------
   .k-tag  是**展示**用的(状态、平台名、关键词),不可点;
   .k-chip 是**筛子**,可点、有选中态。原来 38 个页面把这两件事混在一个类里,
   于是"看起来能点其实不能点"的标签到处都是。 */
.k-tag {
  display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 999px;
  font-size: 11px; background: var(--bg, #eef2f7); color: var(--ink-2, #475569); white-space: nowrap;
}
.k-tag.ok { background: #dcfce7; color: #15803d; }
.k-tag.warn { background: #fef3c7; color: #92400e; }
.k-tag.bad { background: #fee2e2; color: #b91c1c; }
.k-tag.info { background: var(--blue-soft, #eff4ff); color: var(--blue, #2563eb); }

.k-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.k-chip {
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line, #e6eaf0);
  background: #fff; color: var(--ink-2, #4b5563); font-size: 12.5px; cursor: pointer;
  font-family: inherit; line-height: 1.6;
}
.k-chip:hover { border-color: var(--blue, #2563eb); color: var(--blue, #2563eb); }
.k-chip.on { background: var(--blue, #2563eb); border-color: var(--blue, #2563eb); color: #fff; font-weight: 600; }

/* ---------- 卡片网格 ---------- */
.k-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.k-cards.wide { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.k-cards.narrow { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.k-card {
  border: 1px solid var(--line, #e6eaf0); border-radius: 10px; padding: 12px 13px; background: #fff;
}
.k-card > h4 { margin: 0 0 4px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.k-card > .meta { font-size: 12px; color: var(--ink-2, #4b5563); margin-bottom: 7px; }
.k-card.on { border-color: var(--blue, #2563eb); box-shadow: 0 0 0 2px var(--blue-soft, #eff4ff); }

/* ---------- 列表行:左边内容、右边动作 ---------- */
.k-list { display: flex; flex-direction: column; }
.k-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed var(--line, #e6eaf0); font-size: 13px;
}
.k-row:last-child { border-bottom: none; }
.k-row .grow { flex: 1; min-width: 0; }
.k-row .acts { flex: none; display: flex; gap: 6px; }

/* ---------- 进度条 ---------- */
.k-prog { background: var(--bg, #f1f5f9); border-radius: 6px; height: 9px; overflow: hidden; margin: 6px 0 4px; }
.k-prog > span { display: block; height: 100%; background: var(--green, #16a34a); border-radius: 6px; transition: width .3s; }
.k-prog.warn > span { background: #f59e0b; }
.k-prog.bad > span { background: var(--red, #dc2626); }

/* ---------- 文字 ----------
   空态**只是一句灰字**时用 .k-empty;要给"为什么空 + 下一步点哪"的完整空态,
   一律走 showEmpty()/UIKit.emptyState(见 app.js 里那段:空态和错误态必须分开)。 */
.k-empty { color: var(--muted, #94a3b8); font-size: 13px; padding: 10px 0; }
.k-hint {
  color: var(--ink-2, #4b5563); font-size: 13px; line-height: 1.7;
  background: var(--bg, #f7f9fc); border: 1px dashed var(--line, #e6eaf0);
  border-radius: 9px; padding: 12px 14px;
}
.k-mini { font-size: 11px; color: var(--muted, #94a3b8); }
.k-sub { font-size: 12.5px; color: var(--ink-2, #4b5563); }
.k-sec {
  font-size: 13px; font-weight: 600; color: var(--ink, #1f2937);
  margin: 14px 0 8px; display: flex; align-items: center; gap: 6px;
}
.k-sec:first-child { margin-top: 0; }

/* ---------- 弹层 ----------
   8 个页面各写了一份一模一样的遮罩。注意 z-index:**必须低于 toast**,
   否则弹层里操作失败时那条红字会被自己的遮罩盖住(踩过)。 */
.k-mask {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.k-modal {
  background: #fff; border-radius: 12px; width: min(620px, 100%); max-height: 86vh;
  overflow: auto; padding: 18px 20px; box-shadow: var(--shadow, 0 10px 40px rgba(16, 24, 40, .18));
}
.k-modal-hd { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.k-modal-hd .x { margin-left: auto; cursor: pointer; color: var(--muted, #94a3b8); font-size: 18px; line-height: 1; background: none; border: none; }
.k-modal-hd .x:hover { color: var(--ink, #1f2937); }
.k-modal-ft { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- 窄屏 ----------
   电脑端页面被手机浏览器打开是常态(同事直接转发网址),这里保证不横向溢出。 */
@media (max-width: 720px) {
  .k-kpi { min-width: calc(50% - 6px); }
  .k-cards, .k-cards.wide, .k-cards.narrow { grid-template-columns: 1fr; }
  .k-form label, .k-form input, .k-form select { max-width: 100%; }
  .k-row { flex-wrap: wrap; }
}