/* ===== UI 页面总览（画布页）+ 左下角入口 =====
   画布是网页级页面（不走手机壳），平铺全部页面截图并按流程连线；
   截图以 200px 宽平铺（一眼看全流程），点击任一截图用放大预览查看细节；
   入口按钮固定于浏览器视口左下角（桌面预览窗口），点击在新网页中打开画布。 */

/* ---------- 左下角入口按钮 ---------- */
.um-entry {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #fff;
  background: #1a5cff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgb(26 92 255 / 30%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.um-entry:hover {
  background: #0f43cc;
}

.um-entry:focus-visible {
  outline: 3px solid rgb(26 92 255 / 35%);
  outline-offset: 2px;
}

.um-entry__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* ---------- 画布整体 ---------- */
body.uimap-open {
  background: #eef1f6;
}

body.uimap-viewing {
  overflow: hidden;
}

.um-page {
  --um-node-w: 200px;
  --um-screen-w: 375px;
  min-width: 1160px;
}

/* 画布主体：内容按流程自上而下排列，整页即看板（无顶部工具栏） */
.um-canvas {
  padding: 28px 20px 80px;
}

/* 分区：整个流程图中的一步 */
.um-section {
  margin: 12px 0;
}

/* 分区标题与首个卡片同一起点左对齐（左边界完全统一，不留额外缩进） */
.um-section__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}

.um-section__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: #1a5cff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.um-section__title {
  font-size: 15px;
  font-weight: 700;
  color: #18202a;
}

.um-section__note {
  font-size: 12px;
  color: #98a2b3;
}

/* 区内排版：line 横排 / cols 多列 / fan 分支
   全部分区统一左对齐（含 line / cols / fan），避免同一画布里有的靠左有的居中。 */
.um-line {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.um-cols {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px;
}

/* 列内竖向箭头与卡片同宽（200px）居中对齐，箭头才落在卡片中线下方；列本身仍靠左排布 */
.um-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.um-branch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.um-branch__src {
  margin-bottom: 8px;
}

.um-branch__kids {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px;
}

/* 区内箭头 */
.um-arrow {
  display: flex;
  align-items: center;
  color: #a5b0bf;
  padding: 0 6px;
  margin-top: 30px; /* 与卡片标题行对齐，让箭头指向缩略图中上部 */
}

.um-arrow svg {
  display: block;
}

.um-arrow--down {
  margin: 2px 0;
  padding: 0;
}

.um-arrow__label {
  margin-left: 6px;
  font-size: 12px;
  color: #98a2b3;
}

/* ---------- 页面节点卡片（缩略图） ---------- */
.um-node {
  display: inline-flex;
  flex-direction: column;
  width: var(--um-node-w);
  margin: 0;
  cursor: pointer;
}

.um-node__cap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px 8px;
  min-width: 0;
}

.um-node__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #1a5cff;
}

.um-node__title {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: #18202a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-node__tag {
  flex: none;
  padding: 1px 6px;
  color: #b35c00;
  background: #fdf0e4;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
}

/* 弹层节点：橙色标识，与普通页面节点区分 */
.um-node--popup .um-node__dot {
  background: #e67e22;
}

.um-node--popup .um-node__frame {
  border-style: dashed;
}

/* 截图外框：白底 + 细描边 + 浅阴影，模拟设计稿卡片 */
.um-node__frame {
  position: relative;
  width: var(--um-node-w);
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgb(16 24 40 / 7%);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.um-node:hover .um-node__frame,
.um-node:focus-visible .um-node__frame {
  border-color: #1a5cff;
  box-shadow: 0 6px 20px rgb(26 92 255 / 20%);
}

.um-node:focus-visible {
  outline: none;
}

.um-node__frame iframe {
  display: block;
  width: var(--um-screen-w);
  border: 0;
}

/* 加载中的占位（绝对定位覆盖在 iframe 之上，加载完成摘除） */
.um-node__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
  background: #fafbfc;
  font-size: 12px;
}

/* ---------- 放大预览（点击缩略图后打开） ---------- */
.um-viewer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.um-viewer__mask {
  position: absolute;
  inset: 0;
  background: rgb(16 24 40 / 52%);
}

.um-viewer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(760px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgb(16 24 40 / 32%);
}

.um-viewer__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ec;
}

.um-viewer__title {
  font-size: 15px;
  font-weight: 700;
  color: #18202a;
}

.um-viewer__route {
  margin-left: auto;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #98a2b3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-viewer__close {
  flex: none;
  padding: 6px 12px;
  color: #344054;
  background: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.um-viewer__close:hover {
  background: #f5f7fb;
}

.um-viewer__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  background: #eef1f6;
}

.um-viewer__stage {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgb(16 24 40 / 12%);
}

.um-viewer__stage iframe {
  display: block;
  border: 0;
}

.um-viewer__foot {
  flex: none;
  padding: 8px 16px;
  color: #98a2b3;
  border-top: 1px solid #e4e7ec;
  font-size: 12px;
}