@charset "utf-8";
/* ==========================================================================
   Scout 规范层 v2 ｜ scout-components-v2.css
   与《衡枢·Aegis 独立子系统原型标准规范-v1.0》对齐。

   加载顺序（页面必须两份都引）：
     1 aegis-prd-v2.css            平台基座
     2 scout-reference.css         Scout 基座（配色、布局、原有组件）
     3 scout-desktop-fix.css       桌面适配修复层
     4 scout-platform-integration.css  统一工作台挂载适配
     5 scout-components-v2.css     本文件：规范层（表格 / 控件 / 对话框 / 影响块）

   约定：
   - 本层只提供「规范类」，一律用 s- 前缀，不改写基座里已有类的语义；
     基座里带 !important 的旧规则不去对抗，改用新类名重写（见规范 §14.3）。
   - 新增样式一律插在 §12 断点节之前。
   - 品牌锚点用本子系统品牌色（蓝 → 青），不引入第二个色相家族。
   ========================================================================== */

:root{
  --s-brand:#1978d5;
  --s-brand-2:#41afd4;
  --s-brand-soft:#eef4ff;
  --s-brand-ink:#4b70df;
  --s-ink:#18263d;
  --s-sub:#70809a;
  --s-line:#e2e9f3;
  --s-bg-soft:#f7f9fc;
  --s-warm:#b5773c;
  --s-warm-soft:#fff4e6;
  --s-ok:#258b68;
  --s-ok-soft:#e9f8f1;
  --s-err:#cf5870;
  --s-err-soft:#fff0f3;
}

/* §1 图标 --------------------------------------------------------------- */
/* 雪碧容器不能用 display:none（会连带 <use> 一起失效），必须 width/height 归零 + overflow:hidden */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.glyph{display:inline-block;width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}

/* 图标底托：统一 26px，颜色只从品牌/状态色取 */
.s-ic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;background:var(--s-brand-soft);color:var(--s-brand-ink);flex:0 0 26px}
.s-ic .glyph{width:15px;height:15px;flex-basis:15px}
.s-ic.ok{background:var(--s-ok-soft);color:var(--s-ok)}
.s-ic.warm{background:var(--s-warm-soft);color:var(--s-warm)}
.s-ic.err{background:var(--s-err-soft);color:var(--s-err)}
.s-ic.sm{width:22px;height:22px;border-radius:7px;flex-basis:22px}
.s-ic.sm .glyph{width:13px;height:13px;flex-basis:13px}

/* 品牌与系统图标（自带底板）永远不能用 CSS mask —— 内联 <use> 是唯一可行方案。
   基座里用 mask 画的 KPI 角标在这里统一关掉，改为内联 SVG 底托。 */
.skpi::before,.board-kpi::before{display:none!important;content:none!important}

/* §2 状态点（不用文字符号 ●） -------------------------------------------- */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--s-ok);
  margin-right:5px;vertical-align:1.5px}
.dot.brand{background:var(--s-brand)}
.dot.warm{background:#ce8b25}
.dot.err{background:#d75c70}

/* §3 页头与眉标 ---------------------------------------------------------- */
/* 眉标只写业务位置（交付驾驶舱 › 任务看板），不写设计期定位词 */
.scout-kicker{letter-spacing:.02em}
/* 顶栏的搜索 / 退出改为图标按钮，不再用 ⌕ ↪ 这类文字符号 */
.scout-search{display:flex;align-items:center;gap:7px}
.scout-search .glyph{width:15px;height:15px;flex-basis:15px;color:#8795a9}
.scout-logout{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;
  border-radius:9px;background:#f3f6fb;color:#7d8ca3;cursor:pointer;margin-left:2px}
.scout-logout:hover{background:#e9eff8;color:var(--s-brand-ink)}
.scout-back{display:inline-block;margin-top:9px;color:#8aa1bc;font-size:9px;font-weight:800;text-decoration:none;
  border-top:1px dashed #ffffff26;padding-top:8px}
.scout-back:hover{color:#cfe0f5}
.sc-head-note{display:flex;align-items:center;gap:6px;color:var(--s-sub);font-size:11px;margin-top:6px}

/* §4 KPI 卡：图标 + 标题 + 居中数字 + 说明 ------------------------------- */
.s-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}
.s-kpi{background:#fff;border:1px solid var(--s-line);border-radius:13px;padding:15px 16px 14px;
  box-shadow:0 7px 18px rgba(37,64,105,.055);display:flex;flex-direction:column;gap:9px;min-height:118px}
.s-kpi-hd{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#3f5069}
.s-kpi-num{font-size:27px;font-weight:850;letter-spacing:-.05em;color:var(--s-ink);text-align:center;
  font-variant-numeric:tabular-nums;line-height:1.1}
.s-kpi-num em{font-style:normal;font-size:12px;font-weight:700;color:var(--s-sub);margin-left:3px;letter-spacing:0}
.s-kpi-note{font-size:10px;color:#8795a9;text-align:center;line-height:1.55}
.s-kpi-note strong{color:#4b5a72}
.s-kpi.brand{background:linear-gradient(135deg,var(--s-brand),var(--s-brand-2));border:0}
.s-kpi.brand .s-kpi-hd,.s-kpi.brand .s-kpi-num,.s-kpi.brand .s-kpi-note{color:#fff}
.s-kpi.brand .s-kpi-note{color:#ffffffcc}
.s-kpi.brand .s-ic{background:#ffffff2e;color:#fff}

/* §5 表格 --------------------------------------------------------------- */
/* 表头与单元格必须同向：时间/日期 → 左；文本 → 左；数值 → 右；状态/开关/操作 → 右。
   表头忘了带类 = 错位。数值列用 tabular-nums 对齐小数点。 */
.s-card{background:#fff;border:1px solid var(--s-line);border-radius:13px;
  box-shadow:0 7px 18px rgba(37,64,105,.055);padding:17px}
.s-card-hd{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.s-card-hd h2{margin:0;font-size:13.5px;font-weight:850;color:var(--s-ink)}
.s-card-hd small{display:block;margin-top:3px;font-size:10.5px;font-weight:600;color:#8996a9;line-height:1.5}
.s-card-hd .s-right{margin-left:auto;display:flex;align-items:center;gap:8px}

.s-table{width:100%;border-collapse:collapse;font-size:12px}
/* 给了列宽 → 固定布局：数值/状态/时间/操作列按设定宽度，富余宽度只落在一个文本列上，
   避免出现「每一列里都空一截」 */
.s-table.fixed{table-layout:fixed}
.s-table th{text-align:left;color:#8190a5;background:var(--s-bg-soft);padding:11px 12px;
  border-bottom:1px solid #e5ebf4;font-weight:800;font-size:11px;white-space:nowrap}
.s-table td{padding:9px 12px;border-bottom:1px solid #edf1f6;color:#52627b;vertical-align:middle}
/* 行内控件不许把行撑高：同一表格的数据行必须等高 */
.s-table .s-btn,.s-table .s-btn.sm{min-height:26px;height:26px;padding:0 10px;font-size:11px;border-radius:8px}
.s-table tr:last-child td{border-bottom:0}
.s-table tr:hover td{background:#fbfdff}
.s-table td strong{color:#25354e;font-weight:800}
.s-table .time{text-align:left;font-variant-numeric:tabular-nums}
.s-table .num{text-align:right;font-variant-numeric:tabular-nums}
.s-table .sw,.s-table .act{text-align:right}
.s-table th.time,.s-table th.num,.s-table th.sw,.s-table th.act{white-space:nowrap}
.s-table .act a,.s-table .act button{margin-left:12px}
.s-table .act a:first-child,.s-table .act button:first-child{margin-left:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:#5c6b85;
  letter-spacing:-.01em}
/* 表脚：说明 + 分页是一组（同排紧邻），不许把分页钉到右端留出大洞 */
.s-table-foot{display:flex;align-items:center;gap:12px;padding-top:12px;font-size:11px;color:#8795a9}
.s-foot-pager{display:flex;align-items:center;gap:6px}
.s-link{color:var(--s-brand-ink);font-weight:800;text-decoration:none;cursor:pointer;font-size:11.5px}
.s-link:hover{text-decoration:underline}
.s-link.subtle{color:#8795a9;font-weight:700}

/* §6 控件同高（38px） ---------------------------------------------------- */
.s-input,.s-select{height:38px;border:1px solid #dbe4f0;border-radius:9px;background:#fff;color:#3f5069;
  font-size:12px;font-weight:600;padding:0 12px;box-sizing:border-box}
.s-select{padding-right:30px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#8795a9 50%),linear-gradient(135deg,#8795a9 50%,transparent 50%);
  background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat}
.s-input::placeholder{color:#a6b1c2;font-weight:600}
.s-input:focus,.s-select:focus{outline:0;border-color:#9dc0ee;box-shadow:0 0 0 3px #1978d51f}
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 15px;
  border:1px solid #d8e3f0;border-radius:9px;background:#fff;color:#566881;font-size:12px;font-weight:800;
  text-decoration:none;cursor:pointer;white-space:nowrap}
.s-btn:hover{border-color:#aebff0;color:var(--s-brand-ink)}
.s-btn.primary{border-color:var(--s-brand);background:var(--s-brand);color:#fff;box-shadow:0 7px 16px #1978d533}
.s-btn.primary:hover{color:#fff}
.s-btn.quiet{border-color:transparent;background:transparent;color:#7d8ca3}
.s-btn.sm{min-height:30px;padding:0 11px;font-size:11px;border-radius:8px}
.s-btn .glyph{width:14px;height:14px;flex-basis:14px}
.s-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px}
/* 工具行：筛选器 + 重置/查询是一组，靠左排；空余只留在行尾 */
.s-toolbar .s-row-actions,.s-toolbar .s-right{display:flex;align-items:center;gap:9px}
.s-field{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#66768d}

/* 数据范围页签（全量 / 自定义筛选 / 催办 是数据范围，不是展示方式） */
.s-seg{display:inline-flex;align-items:center;gap:4px;padding:4px;background:#eff3f9;border-radius:11px}
.s-seg button{height:30px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:#66768d;
  font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.s-seg button.on{background:#fff;color:var(--s-brand);box-shadow:0 2px 7px #24375b1a}

/* §7 对话框 -------------------------------------------------------------- */
.s-overlay{position:fixed;inset:0;background:#16294566;display:flex;align-items:center;justify-content:center;
  z-index:30;padding:24px}
.s-modal{width:min(720px,100%);max-height:86vh;overflow:auto;background:#fff;border-radius:15px;
  box-shadow:0 25px 70px #1d31554d;position:relative}
/* 色彩锚点 ①：顶部 3px 品牌条 */
.s-modal::before,.s-drawer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:15px 15px 0 0;background:linear-gradient(90deg,var(--s-brand),var(--s-brand-2))}
.s-modal-hd{padding:22px 24px 0}
.s-modal-hd h2{margin:0;font-size:16.5px;font-weight:850;color:var(--s-ink)}
.s-modal-hd p{margin:7px 0 0;font-size:11.5px;color:#738198;line-height:1.65}
.s-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;border:0;border-radius:9px;background:#f3f6fb;color:#7d8ca3;cursor:pointer}
.s-modal-body{padding:18px 24px 0}
.s-modal-section{margin-bottom:20px}
.s-modal-section:last-child{margin-bottom:4px}
/* 色彩锚点 ②：节标题图标进品牌色底托 */
.s-sec-hd{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:850;color:#3f5069;margin-bottom:11px}
.s-modal-foot,.s-drawer-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:16px 24px 20px;margin-top:20px;border-top:1px solid #eef2f8;background:#fcfdff;
  border-radius:0 0 15px 15px}
.s-foot-note{margin-right:auto;font-size:10.5px;color:#8795a9;line-height:1.5;max-width:52%}

/* §8 抽屉（右侧推入，宽度 ≤ 610px） -------------------------------------- */
.s-drawer-overlay{position:fixed;inset:0;background:#1629455c;z-index:30;display:flex;justify-content:flex-end}
.s-drawer{width:min(610px,100%);height:100%;background:#fff;position:relative;display:flex;
  flex-direction:column;box-shadow:-24px 0 60px #1d31553d}
.s-drawer-hd{padding:24px 26px 0}
.s-drawer-hd h2{margin:0;font-size:17px;font-weight:850;color:var(--s-ink);line-height:1.4;padding-right:44px}
.s-drawer-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:9px;font-size:11px;color:var(--s-sub)}
.s-drawer-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:7px;
  background:#eef4ff;color:var(--s-brand-ink);font-weight:800;font-size:10.5px}
.s-drawer-bar{height:3px;border-radius:3px;margin-top:14px;background:linear-gradient(90deg,var(--s-brand),var(--s-brand-2))}
.s-drawer-body{padding:18px 26px 4px;overflow:auto;flex:1}
.s-drawer-foot{flex:0 0 auto}
.s-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.s-kv>div{min-width:0}
.s-kv dt{font-size:10.5px;color:#8795a9;font-weight:700;margin-bottom:3px}
.s-kv dd{margin:0;font-size:12px;color:#3f5069;font-weight:700;word-break:break-word}
.s-kv dd .mono{font-size:11px}
.s-editing{border-radius:10px;background:#f7faff;border:1px dashed #cddcf3;padding:12px}
.s-edited{display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:2px 7px;border-radius:6px;
  background:var(--s-warm-soft);color:var(--s-warm);font-size:9.5px;font-weight:800}
.s-timeline{position:relative;padding-left:20px}
.s-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:#e5ebf4}
.s-timeline li{list-style:none;position:relative;margin-bottom:14px}
.s-timeline li:last-child{margin-bottom:0}
.s-timeline i{position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;background:#cdd9ea;
  border:2px solid #fff;box-shadow:0 0 0 1px #dde6f2}
.s-timeline li.on i{background:var(--s-brand);box-shadow:0 0 0 1px #b9d2f0}
.s-timeline b{display:block;font-size:12px;color:#3f5069}
.s-timeline small{display:block;margin-top:3px;font-size:10.5px;color:#8795a9;line-height:1.5}

/* §9 影响范围块 ---------------------------------------------------------- */
/* 必须回答三件事：改多少条 / 影响谁 / 会发生什么。放在决定范围的那个控件之后。 */
.s-impact{border:1px solid #d9e6fb;background:linear-gradient(180deg,#f4f8ff,#eef4ff);border-radius:12px;
  padding:15px 16px}
.s-impact-hd{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:850;color:#2f4d7d;
  margin-bottom:12px}
.s-impact-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:13px}
.s-impact-num{background:#ffffffb8;border-radius:9px;padding:10px 11px}
.s-impact-num small{display:block;font-size:10px;color:#7d8ca3;font-weight:700}
.s-impact-num b{display:block;margin-top:4px;font-size:14.5px;font-weight:850;color:var(--s-ink);
  font-variant-numeric:tabular-nums;line-height:1.3}
.s-impact-num b.accent{color:var(--s-brand)}
.s-impact-rows{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.s-impact-rows li{display:flex;align-items:flex-start;gap:9px;font-size:11.5px;color:#4d5f7a;line-height:1.65}
.s-impact-rows li .glyph{width:14px;height:14px;flex-basis:14px;color:var(--s-brand-ink);margin-top:2px}
.s-impact-rows li b{color:#25354e}

/* §10 待提交改动条 / 待提交卡 -------------------------------------------- */
.s-pending{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  border:1px solid #f0ddbe;background:#fffaf0;margin-bottom:13px}
.s-pending .s-ic{background:#fff2d9;color:var(--s-warm)}
.s-pending b{font-size:12px;color:#7d5418;font-weight:850}
.s-pending small{font-size:10.5px;color:#9a8354;font-weight:600;display:block;margin-top:2px}
.s-pending .s-row-actions,.s-pending .s-right{display:flex;align-items:center;gap:9px}

/* §11 药丸与暖色 --------------------------------------------------------- */
.s-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;font-size:10.5px;
  font-weight:800;background:#eef4ff;color:var(--s-brand-ink);white-space:nowrap}
.s-pill.ok{background:var(--s-ok-soft);color:var(--s-ok)}
.s-pill.warn{background:#fff4df;color:#b17720}
.s-pill.err{background:var(--s-err-soft);color:var(--s-err)}
.s-pill.mute{background:#f1f4f9;color:#7d8ca3}
.warm{color:var(--s-warm)}
.s-note{margin-top:11px;font-size:11px;color:#8795a9;line-height:1.6}
.s-note strong{color:#52627b}

.s-toolbar-note{font-size:11px;color:#8795a9;font-weight:700}
.s-edit-cell{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid #cddcf3;
  border-radius:7px;background:#f7faff;color:var(--s-brand-ink);font-weight:800;font-size:11px;cursor:pointer}
.s-edit-cell .glyph{width:12px;height:12px;flex-basis:12px}
.s-link{color:var(--s-brand-ink);font-weight:800;text-decoration:none;cursor:pointer}
.s-link:hover{text-decoration:underline}

/* §12 抽屉内容元件（字段网格 / 可改字段 / 汇总行 / 技术信息 / 评论） ---------- */
/* 字段网格：默认两列，长文本用 .span2 通栏；可改字段带铅笔与可点样式 */
.s-kv>.span2{grid-column:1/-1}
.s-kv dd.mute,.s-kv dd.empty{color:#9aa7ba;font-weight:600}
.s-kv dt .glyph{width:12px;height:12px;flex-basis:12px;color:var(--s-brand);margin-left:5px;vertical-align:-2px}
.s-kv dd.edit{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid #cddcf3;
  border-radius:8px;background:#f7faff;color:var(--s-brand-ink);cursor:pointer}
.s-kv dd.edit .glyph{width:12px;height:12px;flex-basis:12px;color:var(--s-brand)}
.s-total{display:flex;align-items:center;gap:12px;margin-top:13px;padding:10px 13px;border-radius:10px;
  background:#f4f8ff;border:1px solid #dbe7fa}
.s-total span{font-size:10.5px;color:#6b7c94;font-weight:700;line-height:1.5}
.s-total b{margin-left:auto;font-size:14px;font-weight:850;color:var(--s-brand-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* 当前状态条 */
.s-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;
  border:1px solid #e2e9f3;background:#fafcff;margin-bottom:16px}
.s-status-label{font-size:10.5px;color:#8795a9;font-weight:800}
.s-status-line{width:1px;height:20px;background:#e2e9f3}
.s-status .s-pills{display:flex;gap:8px;flex-wrap:wrap}
/* 技术信息 / 评论 */
.s-tech{font-size:11.5px;color:#4d5f7a}
.s-tech b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#25354e;letter-spacing:.02em}
.s-tech-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.s-tech-actions span{font-size:10.5px;color:#8795a9;line-height:1.55}
.s-linkbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;
  color:var(--s-brand-ink);font-size:11px;font-weight:800}
.s-linkbtn .glyph{width:14px;height:14px;flex-basis:14px}
.s-comment{display:flex;align-items:flex-start;gap:9px}
.s-comment textarea{flex:1;min-height:64px;padding:10px 11px;border:1px solid #d8e3ef;border-radius:9px;
  color:#3f5069;font-size:11.5px;font-family:inherit;resize:vertical}
.s-comment textarea::placeholder{color:#9aa7ba}
.s-comment-help{margin-top:7px;font-size:10.5px;color:#8795a9;line-height:1.55}

/* §13 相邻块间距 --------------------------------------------------------- */
/* 原来只写「卡片 + 卡片」的间距，漏掉了「网格块 / KPI 行 / 工具行 + 卡片」——
   交付总览最下面的「最近动态」就是这样和上面的边贴在一起的。
   统一给顶层兄弟 14px：块级兄弟的外边距会折叠，不会把间距翻倍。 */
.scout-content>*+*{margin-top:14px}

/* §14 总览页版式与图表元件 ------------------------------------------------- */
/* 两栏版式（主体 + 侧栏），与老版 sgrid2 同比例 */
.s-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:14px;align-items:stretch}
/* 网格行内卡片必须等高：矮卡不拉伸 / 拉伸了却不分布，都会在列里留出一条空白带（09 踩过）。
   富余空间一律由卡内分布吸收：主内容块垂直居中，收尾说明或操作钉到卡底。 */
.s-grid>.s-card{display:flex;flex-direction:column}
/* 钉底元素必须留最小间距：没有富余空间时 margin-top:auto 会等于 0，
   收尾说明会直接贴到内容上 */
.s-grid>.s-card>:last-child{margin-top:auto;padding-top:12px}
.s-card-cta{margin-top:14px}
.s-grid>.s-card .s-donut-wrap,.s-grid>.s-card .s-bars{margin:auto 0}
/* 热力分箱：第一列是纵轴标签，其余五列是分箱格子。颜色由调用方传行内样式。 */
.s-heat{display:grid;grid-template-columns:58px repeat(5,minmax(0,1fr));gap:6px;font-size:10px}
.s-heat>div{min-height:34px;border-radius:8px;display:grid;place-items:center;font-weight:850;
  font-variant-numeric:tabular-nums;font-size:11px}
.s-heat .axis{min-height:20px;background:transparent;font-weight:700;font-size:10px;color:#8494a8}
.s-heat .axis.top{font-size:9.5px}
.s-heat .axis.corner{font-size:9px;line-height:1.2;color:#9aa7ba;text-align:center}
.s-heat .cell.zero{color:#a9b5c6}
.s-heat-legend{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:10px;color:#8494a8}
.s-heat-legend i{width:22px;height:8px;border-radius:3px;display:inline-block}
/* 环形图 */
/* 环形图卡：环在上居中，图例改成三等分「数值 + 名称」格并占满卡宽。
   不要写成「环贴左、图例撑满右侧」—— 那样图例里就成了「标签贴左、数值贴右」的两端分离。 */
.s-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.s-donut{width:176px;height:176px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 176px}
.s-donut::after{content:"";position:absolute;inset:27px;border-radius:50%;background:#fff}
.s-donut b{position:relative;z-index:1;font-size:27px;font-weight:850;color:var(--s-ink);line-height:1}
.s-donut b small{font-size:12px;font-weight:800;color:#7d8ca3;margin-left:1px}
.s-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.s-legend-row{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid #e8eef7;
  border-radius:10px;background:#fafcff}
.s-legend-row .nm{display:flex;align-items:center;gap:7px;font-size:10.5px;color:#6b7c92;line-height:1.4}
.s-legend-row i{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.s-legend-row b{color:var(--s-ink);font-variant-numeric:tabular-nums;font-size:17px;font-weight:850;line-height:1}
/* 排行条：标签 + 轨道 + 数值 */
.s-bars{display:grid;gap:16px}
.s-bar-row{display:grid;grid-template-columns:126px minmax(0,1fr) 46px;align-items:center;gap:11px;
  font-size:11px;color:#61728b}
.s-bar-track{height:8px;border-radius:8px;background:#eef2f7;overflow:hidden}
.s-bar-fill{height:100%;border-radius:8px;display:block}
.s-bar-row b{text-align:right;color:var(--s-ink);font-variant-numeric:tabular-nums}
/* 需要关注的行 */
.s-focus-row{display:flex;gap:11px;align-items:center;padding:12px 0;border-top:1px solid #eef2f7}
.s-focus-row:first-child{border-top:0;padding-top:2px}
.s-focus-row .focus-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.s-focus-row>div{flex:1;min-width:0}
/* 关注行：条数药丸跟在标题后面（原来是贴到行最右，和标题隔着一整行） */
.s-focus-row b{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--s-ink);font-weight:800}
.s-focus-row small{display:block;color:#8b98aa;margin-top:3px;font-size:10.5px;line-height:1.5}
/* 最近动态 */
.s-recent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.s-recent-item{padding:13px;border:1px solid #e2e9f3;border-radius:10px;background:#fafcff}
.s-recent-item b{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--s-ink)}
.s-recent-item b .glyph{width:14px;height:14px;flex-basis:14px}
.s-recent-item small{display:block;color:#8a97a9;margin-top:6px;font-size:10.5px}

/* §15 结束提示（toast） -------------------------------------------------- */
.q-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:40;display:none;
  padding:11px 16px;border-radius:11px;background:#18263df2;color:#fff;font-size:12px;font-weight:700;
  box-shadow:0 16px 40px #1d31554d;max-width:76vw}
.q-toast.show{display:block;transform:translate(-50%,0)}

/* §16 断点（新增样式一律插在本节之前） ----------------------------------- */
@media(max-width:1150px){
  .s-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-impact-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .s-kpis{grid-template-columns:1fr}
  .s-impact-nums{grid-template-columns:1fr}
  .s-kv{grid-template-columns:1fr}
  .s-grid{grid-template-columns:1fr}
  .s-recent-grid{grid-template-columns:1fr}
  .s-donut-wrap{flex-direction:column;align-items:stretch}
  .s-modal,.s-drawer{width:100%;max-height:100vh}
  .s-card{padding:14px}
  .s-foot-note{max-width:100%}
  .s-modal-foot,.s-drawer-foot{flex-wrap:wrap}
}

/* ==========================================================================
   §17 页面级构件（第 7 轮新增：111 任务中心 / 112 看板 / 117 基础参数 等要用）
   —— 全部遵守 R1–R7：行内不留洞、控件同高 38px、表格列宽集中到唯一文本列
   ========================================================================== */
/* 页内页签（三种范围 / 看板三视图 / 参数五页签）：靠左成组，不两端分离 */
.s-tabs{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.s-tabs a,.s-tabs button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border:1px solid #dbe4f0;border-radius:10px;background:#fff;color:#5b6b83;font-size:12px;font-weight:800;
  text-decoration:none;cursor:pointer}
.s-tabs a.on,.s-tabs button.on{background:linear-gradient(135deg,#1978d5,#41afd4);border-color:transparent;color:#fff}
.s-tabs .s-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;
  padding:0 6px;border-radius:10px;background:#eef2f8;color:#5b6b83;font-size:10.5px;font-weight:850}
.s-tabs .on .s-count{background:#ffffff2e;color:#fff}
.s-tabs-note{color:#8b98aa;font-size:11px;font-weight:600}
/* 字段与工具行：标签 + 控件 9px 同组，整组靠左 */
.s-fields{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.s-field{display:inline-flex;align-items:center;gap:9px;color:#7a8798;font-size:11.5px;font-weight:700}
.s-input,.s-select{height:38px;padding:0 12px;border:1px solid #dbe4f0;border-radius:9px;background:#fff;
  color:#2b3c58;font-size:12px;font-family:inherit;outline:0}
.s-input:focus,.s-select:focus{border-color:#5a9eea;box-shadow:0 0 0 3px #1978d51a}
/* 多选浮层（项目选择）：点空白 / Esc 收起，JS 不执行时也能看到内容 */
.s-pop-wrap{position:relative;display:inline-block}
.s-pop{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:420px;max-height:330px;overflow:auto;
  padding:13px;border:1px solid #dde6f2;border-radius:12px;background:#fff;box-shadow:0 18px 40px #223b651f;
  text-align:left}
.s-pop-hd{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid #eef2f7;
  color:#7a8798;font-size:11.5px;font-weight:700}
.s-pop-hd .s-row-actions{margin-left:0}
.s-pop-item{display:flex;align-items:center;gap:9px;padding:9px 4px;border-top:1px solid #f2f5fa;
  color:#3b4b66;font-size:12px;font-weight:700}
.s-pop-item:first-of-type{border-top:0}
.s-pop-item small{margin-left:auto;color:#98a4b6;font-size:10.5px;font-weight:700}
/* 表格内的双操作单元格：两个动作同组 9px，不许一个贴左一个贴右 */
.s-acts{display:inline-flex;align-items:center;gap:9px}
/* 步骤 / 状态切换（弹窗内） */
.s-steps{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.s-steps span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:9px;
  background:#f3f7fd;color:#5b6b83;font-size:11px;font-weight:800}
.s-steps span.on{background:#e8f1fd;color:#1567bd}
/* 开关（基础参数用）：纯 CSS，无 JS 也能看 */
.s-switch{position:relative;display:inline-block;width:40px;height:22px;border-radius:11px;background:#d6e0ee}
.s-switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px #223b6526}
.s-switch.on{background:#1978d5}
.s-switch.on i{left:20px}
/* 看板泳道（112）：四泳道等宽，卡内行不留洞 */
.s-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.s-lane{display:flex;flex-direction:column;gap:11px;padding:15px;border:1px solid #e6edf7;border-radius:12px;background:#fbfdff}
.s-lane-hd{display:flex;align-items:center;gap:9px}
.s-lane-hd b{font-size:12.5px;color:#1f2f4a;font-weight:850}
.s-lane-hd .s-count{margin-left:0}
.s-lane-note{color:#8b98aa;font-size:10.5px;line-height:1.6}
.s-task{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid #e6edf7;border-radius:10px;
  background:#fff}
.s-task b{font-size:11.5px;color:#22304a;font-weight:800;line-height:1.5}
.s-task small{color:#8b98aa;font-size:10.5px;font-weight:600}
/* 树形表（117 两级字段）：层级靠缩进 + 前置小三角，不靠颜色 */
.s-tree-name{display:flex;align-items:center;gap:8px}
.s-tree-name .s-ind{width:14px;color:#a9b6c8;font-size:10px}
.s-tree-name .lv2{padding-left:22px}
/* 左右分栏面板（65 报文导出：列表 | 参数与抓取 | 历史） */
.s-panels{display:grid;grid-template-columns:232px minmax(0,1fr);gap:14px;align-items:start}
.s-list{border:1px solid #e6edf7;border-radius:12px;overflow:hidden}
.s-list-item{display:flex;align-items:center;gap:9px;padding:11px 13px;border-top:1px solid #f0f4fa;
  color:#5b6b83;font-size:11.5px;font-weight:700}
.s-list-item:first-child{border-top:0}
.s-list-item.on{background:#f2f7ff;color:#1567bd;font-weight:850}

.s-check{display:inline-block;width:15px;height:15px;flex:0 0 15px;border:1.5px solid #c7d4e6;border-radius:4px;background:#fff}
.s-check.on{border-color:#1978d5;background:#1978d5}
.s-digits{display:flex;gap:9px}

/* 弹层开关不需要 JS：链到 #id 就能开（:target），关闭按钮走页面脚本 */
/* 关闭态用类而不是 hidden 属性：Aegis 基础样式里有 [hidden]{display:none!important}，会压过 :target */
.s-overlay.is-closed,.s-drawer-overlay.is-closed,.s-pop.is-closed{display:none}
.s-overlay.is-closed:target,.s-drawer-overlay.is-closed:target{display:flex}
.s-pop.is-closed:target{display:block}

.s-lane-hd i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#9cc2e8}
.s-board .s-task{flex:1 1 0}   /* 泳道内卡片等分富余：短的泳道不会在卡底留下空带 */
.s-task .tb{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:#7a8798}
.s-task h4{margin:0;font-size:11.5px;font-weight:800;color:#22304a;line-height:1.5}
.s-task .s-task-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#8b98aa;font-size:10.5px;font-weight:600}
.s-task.overdue{border-color:#f0dcb4;background:#fffdf7}
.s-task.overdue .s-task-meta span:last-child{color:#b8791f;font-weight:800}

/* 动效与无障碍：声明必须放在文件最末尾 */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}