/* UC01 域样式。令牌一律取自平台公共样式（:root 里的 --bg/--fg/--sans 等），不另立一套颜色。 */
.shangshu-ip-uc01 {
  color: var(--fg);
  font-family: var(--sans);
}

/* —— 通知书助手（域内最小的官文入口）——
   版式跟主界面一致：卡片分区、留白、次级色说明。 */
.uc01-assistant-page .uc01-assistant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
}
.uc01-assistant-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg1, #fff);
  overflow: hidden;
}
.uc01-assistant-card > header { padding: 13px 16px 10px; border-bottom: 1px solid var(--line); background: var(--bg2, #f7f8f9); }
.uc01-assistant-card > header h2 { margin: 0; color: var(--fg1, var(--fg)); font-size: 13.5px; font-weight: 600; }
.uc01-assistant-hint { margin: 3px 0 0; color: var(--fg3); font-size: 11.5px; line-height: 1.6; }
.uc01-assistant-body { padding: 14px 16px 16px; }
.uc01-assistant-item { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.uc01-assistant-item:last-child { padding-bottom: 0; border-bottom: 0; }
.uc01-assistant-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.uc01-assistant-cell { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.uc01-assistant-cell span { color: var(--fg3); font-size: 10.5px; }
.uc01-assistant-cell b { color: var(--fg1, var(--fg)); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.uc01-assistant-note { margin: 8px 0 0; color: var(--fg3); font-size: 11.5px; line-height: 1.65; }
.uc01-assistant-error { color: var(--red); }
.uc01-assistant-actions { display: flex; gap: 8px; margin-top: 10px; }
.uc01-assistant-empty {
  padding: 18px 16px;
  border: 1px dashed var(--line2);
  border-radius: 10px;
  background: var(--bg2, #f7f8f9);
  color: var(--fg3);
  font-size: 12.5px;
  line-height: 1.7;
}

/* —— 官文助手页（Host 控制面）——
   三块：① 概览一排四格 ② 控制栏 ③ 来源包表。
   版式用平台现成的骨架（.platform-page / .page-hd / .btn / .obj-table），
   这里只补域内特有的那一层（格子条、控制栏、状态点、状态徽标）。 */
/* ⚠️ **只留纵向，横向那一层留给公共壳**（PKG-031-T01）：
   域内页的页面根容器**就是** `.platform-page` 那一个元素（同一个元素，同一条规则），
   以前写 `padding:0 0 18px`（简写）⇒ 把公共壳给的横向 26px **一起**盖成了 0
   ⇒ 这一页落在 24px（`.main-scroll` 那一层）而不是参照系的 26px。
   ⇒ 改成长写 `padding-bottom`，横向 26px 由 `.platform-page` 的 L1 给（规范 §2.1.3
   「域内页不许自己给横向留白」），底部 18px 照旧。 */
.uc01-host-page { padding-bottom: 18px; }
/* 域内上下文条（面包屑）：**两页同一个类** —— 原来只有官文助手有，
   邮件规则表没有 ⇒ 两个页面结构不一样（用户 2026-10-22 16:49：「官文助手和邮件规则表也都不一样」）。 */
.uc01-page-crumb { padding: 14px 0 10px; color: var(--fg3); font-size: 11px; }
.uc01-page-crumb span { margin: 0 6px; color: var(--line); }
.uc01-host-page .page-hd h1 { margin: 0; font-size: 20px; }   /* 平台默认页标题字号（域内不另立一套） */
.uc01-host-page .page-hd .sub { margin-top: 5px; color: var(--fg3); font-size: 11.5px; }
.uc01-host-body { display: grid; gap: 12px; margin-top: 14px; }

/* ① 概览：一排四格（灰底、竖分隔线） */
.uc01-host-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg2, #f7f8f9);
}
.uc01-host-fact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}
.uc01-host-fact:last-child { border-right: 0; }
/* 第四格（「最近事件」）占满整行 —— 此前 JS 用了 `-wide` 而 CSS 没有定义，
   结果那一格被挤在 1/4 列里，长事件文字读不全。 */
.uc01-host-fact-wide { grid-column: 1 / -1; border-right: 0; }
.uc01-host-label { color: var(--fg3); font-size: 10.5px; }
.uc01-host-value {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg1, var(--fg));
  font-size: 14px;
  font-weight: 600;
}
.uc01-host-event { font-weight: 500; font-size: 12px; line-height: 1.6; }
.uc01-host-note { color: var(--fg3); font-size: 10.5px; }
.uc01-host-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--fg3);
}
.uc01-host-dot.online { background: var(--green, #16a34a); }
.uc01-host-dot.offline { background: var(--fg3); }
.uc01-host-dot.none { background: transparent; border: 1px solid var(--line); }

/* ② 控制栏：一排按钮；跳过/重试旁边跟一个选包下拉 */
.uc01-host-commands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg2, #f7f8f9);
}
.uc01-host-command { display: inline-flex; align-items: center; gap: 6px; }
.uc01-host-pick {
  height: 30px;
  max-width: 190px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg, #fff);
  color: var(--fg);
  font: 11px inherit;
}

/* ③ 来源包表 */
.uc01-host-packages .obj-table { font-size: 12px; }   /* 同平台默认表格字号 */
.uc01-host-packages .obj-table .num { text-align: right; }
.uc01-host-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--green, #16a34a) 40%, transparent);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--green, #16a34a) 10%, transparent);
  color: var(--green-ink, var(--fg));
  font-size: 10px;
}
.uc01-host-badge.failed {
  border-color: color-mix(in srgb, var(--red, #dc2626) 40%, transparent);
  background: color-mix(in srgb, var(--red, #dc2626) 10%, transparent);
  color: var(--red, #dc2626);
}
.uc01-host-badge.skipped, .uc01-host-badge.open {
  border-color: var(--line);
  background: var(--bg, #fff);
  color: var(--fg3);
}
.uc01-host-empty { padding: 22px 12px; color: var(--fg3); font-size: 12px; text-align: center; }
.uc01-host-foot,
.uc01-rules-foot { margin: 8px 0 0; color: var(--fg3); font-size: 10.5px; }
.uc01-host-settings-note { margin: 0 0 12px; color: var(--fg3); font-size: 11.5px; line-height: 1.7; }
.uc01-host-settings-note + label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; color: var(--fg3); font-size: 10.5px; }
.uc01-host-settings-note ~ label input,
.uc01-host-settings-note ~ label select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg, #fff);
  color: var(--fg);
  font: 11px inherit;
}

@media (max-width: 900px) {
  .uc01-host-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc01-host-fact:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .uc01-host-facts { grid-template-columns: 1fr; }
  .uc01-host-fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .uc01-host-fact:last-child { border-bottom: 0; }
}

/* —— 邮件规则页（UC01 域自己的那一页）——
   版式用平台现成的骨架（.platform-page / .page-hd / .btn / .platform-empty），
   这里只补域内特有的一层：概览格、按适用键分组、规则卡、编辑表单。
   度量回默认（规范 §7.1）：标题 20px、正文 12px、徽标 11px + var(--r-xs) + 无边框。 */
/* 横向留白同样交给公共壳那一层（`.platform-page`）—— 理由同 `.uc01-host-page`（PKG-031-T01）。 */
.uc01-rules-page { padding-bottom: 18px; }
.uc01-rules-page .page-hd h1 { margin: 0; font-size: 20px; }
.uc01-rules-page .page-hd .sub { margin-top: 5px; color: var(--fg3); font-size: 11.5px; }
.uc01-rules-body { display: grid; gap: 12px; margin-top: 14px; }

/* ① 概览一排四格（灰底、竖分隔线） */
.uc01-rules-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
}
.uc01-rules-fact {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}
.uc01-rules-fact:last-child { border-right: 0; }
/* 第四格（「现在能不能寄信」）占满整行 —— 与官文助手同一套写法。 */
.uc01-rules-fact-wide { grid-column: 1 / -1; border-right: 0; }
.uc01-rules-label { color: var(--fg3); font-size: 10.5px; }
.uc01-rules-value { color: var(--fg); font-size: 14px; font-weight: 600; }
.uc01-rules-note { color: var(--fg3); font-size: 10.5px; line-height: 1.6; }

/* ② 按适用键分组 */
.uc01-rules-group { display: grid; gap: 8px; }
.uc01-rules-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--fg2);
  font-size: 12px;
}
.uc01-rules-group-head b { color: var(--fg); font-weight: 600; }
.uc01-rules-group-head span { color: var(--fg3); font-size: 11px; }
.uc01-rule-list { display: grid; gap: 8px; }

/* ③ 规则卡 */
.uc01-rule {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 12px;
}
.uc01-rule.is-off { background: var(--bg-alt); }
.uc01-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uc01-rule-key { color: var(--fg); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.uc01-rule-tag {
  display: inline-block;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--r-xs);
  background: var(--bg-alt);
  color: var(--fg2);
  font-size: 11px;
}
.uc01-rule-tag.is-on { background: var(--accd); color: var(--green-ink); }
.uc01-rule-rows { display: grid; gap: 4px; margin: 0; }
.uc01-rule-rows > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
.uc01-rule-rows dt { color: var(--fg3); font-size: 11px; }
.uc01-rule-rows dd { margin: 0; color: var(--fg2); font-size: 12px; overflow-wrap: anywhere; }
.uc01-rule-foot { display: flex; justify-content: flex-end; }

/* ④ 编辑表单（**摊开在卡片下面**，不走弹窗） */
.uc01-rule-form { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.uc01-rule-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.uc01-rule-form-grid label { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.uc01-rule-form-grid label.wide { grid-column: 1 / -1; }
.uc01-rule-form-grid label > span { color: var(--fg3); font-size: 10.5px; }
.uc01-rule-form-grid input,
.uc01-rule-form-grid select,
.uc01-rule-form-grid textarea {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--fg);
  font: 12px/1.5 var(--sans, sans-serif);
}
.uc01-rule-form-grid textarea { resize: vertical; }
.uc01-rule-form-part { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 10px 10px; }
.uc01-rule-form-part > summary { cursor: pointer; color: var(--fg2); font-size: 11.5px; padding: 8px 0; }
.uc01-rule-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  .uc01-rules-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc01-rules-fact:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .uc01-rules-facts { grid-template-columns: 1fr; }
  .uc01-rules-fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .uc01-rules-fact:last-child { border-bottom: 0; }
  .uc01-rule-form-grid { grid-template-columns: 1fr; }
  .uc01-rule-rows > div { grid-template-columns: 1fr; gap: 2px; }
}