/* ===================================================================
   店长 / DE 工作台：**统一卡片栅格**（2026-09-22 用户口径：「收敛成统一」）

   之前这一页混着三套卡片：DE 仪表盘卡（`.de-dash-card`：无描边、padding 12px、
   标题 12px 灰色）、常规卡（`.de-card`：有描边、padding 14px 16px、标题 15px 深色）、
   告警块（自带黄底）—— 圆角/内边距/描边/标题字号各不相同，看着就"很乱"。
   这里把**壳与标题**收敛成一套（背景/描边/圆角/内边距/投影/标题字号），
   改动只在这一段：以后要调，改这里一处即可，别去各组件里各改一遍。

   作用域限定在 `.de-home`（DE 工作台）里，不影响其它页面。
   =================================================================== */
.de-home {
  --de-card-pad: 14px 16px;
  --de-card-radius: 12px;
  --de-card-border: var(--border, #e6e8ee);
  --de-card-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  --de-gap: 12px;
}

/* 1) 一套壳：仪表盘卡 / 常规卡 / 运维诊断卡 用同样的背景、描边、圆角、内边距、投影 */
.de-home .de-card,
.de-home .de-dash-card,
.de-home .de-alert {
  background: var(--surface, var(--bg-card, #fff));
  border: 1px solid var(--de-card-border);
  border-radius: var(--de-card-radius);
  padding: var(--de-card-pad);
  box-shadow: var(--de-card-shadow);
}

/* 2) 一套标题：块标题同字号/字重/颜色（原来 12px 灰 vs 15px 黑 混着） */
.de-home .de-section-title,
.de-home .de-dash-title,
.de-home .de-dash-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f2430);
  letter-spacing: 0;
}
.de-home .de-dash-title { font-weight: 700; }        /* 整页第一块（仪表盘）标题略重一点 */
.de-home .de-dash-scope,
.de-home .de-dash-asof { font-size: 12px; font-weight: 500; }

/* 3) 一套间距：块之间、卡片网格同节奏 */
.de-home .de-dash { margin-bottom: var(--de-gap); }
.de-home .de-dash-grid { gap: var(--de-gap); }
.de-home .de-dash-card { min-height: 0; }            /* 原来固定 96px，短卡会留一截空白 */

/* 4) 一套空态：不抢视线，说清是"没配"而不是"坏了" */
.de-home .de-dash-empty,
.de-home .de-dash-empty-hint {
  font-size: 12px;
  color: var(--text-3, var(--text-muted, #8b93a7));
  padding: 2px 0;
}

/* 5) 告警块：与卡片同圆角/同描边（黄底保留，那是它的语义） */
.de-home .de-dash-warn {
  border-radius: var(--de-card-radius);
  padding: 8px 12px;
  font-size: 12px;
}

/* 6) KPI 四个数字也穿同一套壳（原来是裸数字，跟卡片不是一家） */
.de-home .de-gm-kpi {
  background: var(--surface, #fff);
  border: 1px solid var(--de-card-border);
  border-radius: var(--de-card-radius);
  box-shadow: var(--de-card-shadow);
  padding: 10px 12px;
  text-align: center;
}
.de-home .de-gm-kpi-grid { gap: var(--de-gap); margin-bottom: var(--de-gap); }
.de-home .de-gm-kpi-val { font-size: 22px; font-weight: 700; line-height: 1.2; }
.de-home .de-gm-kpi-label { font-size: 12px; color: var(--text-3, #8b93a7); margin-top: 2px; }

/* 7) 顶部「先做这一件」：一句话，不铺列表 */
.de-home .de-gm-first-action {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  background: rgba(124, 92, 255, .06);
  border: 1px solid rgba(124, 92, 255, .18);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 8px;
}
.de-home .de-gm-first-tag {
  font-size: 11px; font-weight: 700; color: var(--primary, #7c5cff);
  background: rgba(124, 92, 255, .12); border-radius: 6px; padding: 1px 6px;
}

/* 8) 诊断条目里的「怎么做」：跟问题同一条，不再另起一块重复说 */
.de-home .de-gm-finding-action {
  font-size: 12px; line-height: 1.5; margin-top: 4px; color: var(--text-2, #4a5261);
}
.de-home .de-gm-action-tag {
  font-size: 11px; font-weight: 700; color: var(--text-3, #8b93a7);
  border: 1px solid var(--de-card-border); border-radius: 6px;
  padding: 0 5px; margin-right: 5px;
}

/* 9) 诊断条目本身的节奏统一（原来每条的边距靠行内样式各写各的） */
.de-home .de-gm-finding {
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.de-home .de-gm-finding:last-child { margin-bottom: 0; }

/* 10) 「按级别」块：chip / 行 / 按钮（之前只用了类没写样式，渲染成文字糊成一排） */
.de-home .de-lv-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.de-home button.de-lv-fold {
  width: 100%; border: 0; background: transparent; padding: 0; margin: 0;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.de-home .de-lv-fold-hint {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--primary, #7c5cff);
}
.de-home .de-lv-title { font-weight:700; font-size:14px; margin-right:4px; }
.de-home .de-lv-chip { font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px; }
.de-home .de-lv-1 { background:#fee2e2; color:#b91c1c; }
.de-home .de-lv-2 { background:#fef3c7; color:#b45309; }
.de-home .de-lv-3 { background:#e5e7eb; color:#4b5563; }
.de-home .de-lv-row { display:flex; align-items:flex-start; gap:8px; padding:7px 0;
                      border-top:1px solid var(--border,#e6e8ee); }
/* 可点行（2026-10-10）：用户口径「今天要处理的事卡片，只是显示内容也不能操作…
   现在卡片式直接可以操作的」。点整行 = 执行该条主操作，所以必须**看得出可点**，
   否则人还是只会去点右边那三个小按钮。 */
.de-home .de-lv-row-clickable { cursor:pointer; border-radius:8px; padding-left:6px;
                                padding-right:6px; margin-left:-6px; margin-right:-6px;
                                transition:background .12s ease; }
.de-home .de-lv-row-clickable:hover { background:var(--primary-bg,#f4f1ff); }
.de-home .de-lv-row-clickable:active { background:#ece7ff; }
.de-home .de-lv-row-clickable:focus-visible { outline:2px solid var(--primary,#7c5cff);
                                              outline-offset:1px; }
/* 泳道内的 P 级徽标（2026-10-10，方案 B）：
   把「今天要处理的事」的 P1/P2/P3 降级成泳道每条 item 的徽标 ——
   紧急度与执行阶段合到一处，不再用两张卡讲同一批待办。 */
.de-home .de-wi-chip { display:inline-block; margin-right:6px; vertical-align:1px;
                       cursor:help; }
.de-home .de-lv-row-clickable:hover { background:var(--primary-bg,#f4f1ff); }
.de-home .de-lv-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.de-home .de-lv-name { font-size:13px; font-weight:600; }
.de-home .de-lv-why { font-size:12px; color:var(--text-3,#8b93a7); margin-top:1px; }
.de-home .de-lv-due { font-size:11px; color:var(--text-3,#8b93a7); white-space:nowrap; }
/* ── 2026-10-10 两张卡合并（用户口径「将他们放到一张卡片不行吗」）相关 ──────────
   ① 阶段标签：合并前"现在 / 接下来 / 待你审核"由**卡片标题**表达，
      八条并进一张卡后必须落到**行上**，否则分不清"现在就做"还是"攒着做"。
      刻意做成低调描边小签，不与左侧的 P 级色块抢注意力。 */
.de-home .de-lv-lane-chip { display:inline-block; font-size:10px; font-weight:600;
                            color:var(--text-muted,#6b7280); background:transparent;
                            border:1px solid var(--border,#e6e8ee); border-radius:4px;
                            padding:0 4px; margin-right:5px; vertical-align:1px;
                            white-space:nowrap; }
/* ② 「数字员工」卡置顶（用户口径「图片中的…数字员工卡，放到最上方」）。
      ⚠️ 用 CSS `order` 而**不搬 DOM**：`.de-home` 本来就是
      `display:flex; flex-direction:column`（见 style.css），
      所以只改视觉顺序，零结构风险 —— 上一版搬 markup 引发了"整页空白"。 */
.de-home > .de-queue-hero { order: -1; }
/* ③ P3 行"变暗"：类名 `de-lv-row-dim` 在模板里用了很久，但**一直没有对应样式**
      （查过 unified.css 与 style.css 都没有）→ 顺手补上，让"不必关注"的行不那么抢眼。 */
.de-home .de-lv-row-dim { opacity:.72; }
.de-home .de-lv-row-dim:hover { opacity:1; }
.de-home .de-lv-ops { display:flex; gap:4px; }
.de-home .de-lv-btn { font-size:11px; border:1px solid var(--border,#e6e8ee); background:#fff;
                      border-radius:6px; padding:2px 7px; cursor:pointer; color:var(--text,#1f2430); }
.de-home .de-lv-btn:hover { background:var(--primary-bg,#f4f1ff); }
.de-home .de-lv-batch { margin-top:8px; }
.de-home .de-lv-batch summary { cursor:pointer; font-size:12px; color:var(--primary,#7c5cff); }
.de-home .de-lv-batch-head { display:flex; justify-content:space-between; align-items:center;
                             gap:8px; margin:8px 0 4px; }
.de-home .de-lv-empty { font-size:12px; color:var(--text-3,#8b93a7); padding:4px 0; }
.de-home .de-lv-card { margin-bottom: var(--de-gap,12px); }

.de-home .de-lv-desc { font-size:12px; color:var(--text-2,#4a5261); margin-top:2px;
                       line-height:1.5; }
.de-home .de-lv-sub { font-size:12px; color:var(--text-3,#8b93a7); margin:2px 0 6px; }
.de-home .de-lv-de { display:flex; align-items:center; gap:8px; margin-top:8px;
                     padding-top:8px; border-top:1px dashed var(--border,#e6e8ee); }
.de-home .de-gm-section-cap { font-size:12px; font-weight:700; color:var(--text-3,#8b93a7);
                              letter-spacing:.04em; margin:4px 0 6px; }

/* ── 「今天要处理的事」空态（2026-10-07 用户口径）─────────────────────
   这是一张**反馈卡**，不是提示卡：除了"没事"，还要列出"今天已处理"，
   让用户看得见自己刚办的事记上了没有（原来那份被埋在页面最底部）。
   原来只有 .de-lv-empty 一句灰字，现在要有层次。 */
.de-lv-done {
  padding: 10px 2px 4px;
}
.de-lv-done-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.de-lv-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green-bg, #e8f6ee);
  color: var(--green, #12a150);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.de-lv-done-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1, #1f2534);
}
.de-lv-done-hint {
  font-size: 12px;
  color: var(--text-3, #8b93a7);
  line-height: 1.6;
  margin-top: 4px;
}
.de-lv-done-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #eceef3);
}
.de-lv-done-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #4a5163);
  margin-bottom: 4px;
}
.de-lv-done-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
}
.de-lv-done-tick {
  color: var(--green, #12a150);
  font-size: 12px;
  flex: 0 0 auto;
  line-height: 1.5;
}
/* 「已处理 / 已驳回」徽章（2026-10-07 用户口径）
   用户驳回的那条原来显示成「✓ 已处理」，看着像他确认执行了 ——
   两者是相反的事，所以驳回用中性灰、不给绿勾。 */
.de-lv-done-outcome {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.6;
  font-weight: 600;
}
.de-lv-done-outcome.is-done {
  background: var(--green-bg, #e8f6ee);
  color: var(--green, #12a150);
}
.de-lv-done-outcome.is-dismissed {
  background: var(--bg-2, #f1f2f6);
  color: var(--text-3, #8b93a7);
}
.de-lv-done-name {
  font-size: 12px;
  color: var(--text-2, #4a5163);
  line-height: 1.5;
}
.de-lv-done-more {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #eceef3);
  font-size: 12px;
  color: var(--text-3, #8b93a7);
  line-height: 1.7;
}