/* ==========================================================================
   Product Mockups — 产品界面还原
   --------------------------------------------------------------------------
   用 HTML/CSS 复刻三款产品的真实界面，装进应用窗口框，作为"产品快照"。

   两条原则：
   1) 【结构从源码来】导航项、二级 Tab、列头、按钮、状态文案一律照抄真实系统，
      不做泛化改写。参照物是 NexSpecHub/artifacts/ 下的实机截图。
   2) 【色彩分两层】窗口外框（.shot）沿用站点薄荷绿与暗色基底，保持品牌一致；
      窗口内的界面（.shot__body）走独立的 --ui-* 令牌层，并按产品注入其真实主色，
      所以三张快照一眼能分辨是三个不同的系统。
   字号刻意压到 9–12px，模拟真实截图的"信息密度"。
   ========================================================================== */

/* ==========================================================================
   1. 界面示意令牌层
   ========================================================================== */
.shot__body {
  /* 底色与分层 */
  --ui-bg:      #070c15;
  --ui-panel:   rgba(255, 255, 255, 0.028);
  --ui-panel-2: rgba(255, 255, 255, 0.055);
  --ui-sunken:  rgba(0, 0, 0, 0.30);

  /* 分隔线 */
  --ui-line:    rgba(230, 237, 246, 0.105);
  --ui-line-2:  rgba(230, 237, 246, 0.055);

  /* 文字四级 */
  --ui-ink:     #e6edf6;
  --ui-ink-2:   #b6c5d8;
  --ui-ink-3:   #8698b0;
  --ui-ink-4:   #5f7085;

  /* 主色（可被产品覆盖） */
  --ui-accent:      #2fe3c4;
  --ui-accent-bg:   rgba(47, 227, 196, 0.13);
  --ui-accent-line: rgba(47, 227, 196, 0.36);

  /* 语义色 —— 只出现在界面内部，用于表达系统自身的状态机 */
  --ui-ok:     #35d39a;
  --ui-warn:   #ff8a3d;
  --ui-danger: #f0627c;
  --ui-info:   #5b8cff;
}

/* base.css 里 em 被全局染成强调色，界面内部一律还原为继承色，
   避免正文里的 <em> 副行文字变成亮色。下面的具体规则再按需覆盖。 */
.shot__body em { color: inherit; font-style: normal; }

/* 产品主题：注入真实系统主色（NexSpec Hub 蓝 / 内网知识库 玫瑰粉 / NexTest 靛蓝） */
.shot__body--hub {
  --ui-accent:      #5b8cff;
  --ui-accent-bg:   rgba(91, 140, 255, 0.14);
  --ui-accent-line: rgba(91, 140, 255, 0.38);
}
.shot__body--kb {
  --ui-accent:      #f2799f;
  --ui-accent-bg:   rgba(242, 121, 159, 0.14);
  --ui-accent-line: rgba(242, 121, 159, 0.38);
}
.shot__body--test {
  --ui-accent:      #6d78f0;
  --ui-accent-bg:   rgba(109, 120, 240, 0.15);
  --ui-accent-line: rgba(109, 120, 240, 0.40);
}

/* ==========================================================================
   2. 应用窗口框
   ========================================================================== */
.shot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-raise);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.shot--glow {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow), var(--shadow-3);
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--color-border-soft);
}
.shot__dots { display: flex; gap: 5px; flex: none; }
.shot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-faint); }
.shot__dot--a { background: rgba(255, 138, 61, 0.55); }
.shot__dot--b { background: rgba(47, 227, 196, 0.55); }
.shot__url {
  flex: 1;
  max-width: 340px;
  margin-inline: auto;
  padding: 3px var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: var(--color-faint);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shot__body {
  background: var(--ui-bg);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--ui-ink-2);
  overflow-x: auto;
}
.shot__cap {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wide);
  color: var(--color-faint);
}
.shot__cap b { color: var(--color-accent); font-weight: 500; }

/* ==========================================================================
   3. 图标（以 mask 实现，颜色跟随 currentColor）
   ========================================================================== */
.ui__ico {
  /* inline-block 是为了让非 flex 容器里的图标也能吃到宽高；
     在 flex 容器里它照样会被块化，表现不变 */
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}

.ui__ico--book   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5v13'/%3E%3Cpath d='M12 6.5A3.5 3.5 0 0 0 8.5 3H3v13h5.5A3.5 3.5 0 0 1 12 19.5'/%3E%3Cpath d='M12 6.5A3.5 3.5 0 0 1 15.5 3H21v13h-5.5A3.5 3.5 0 0 0 12 19.5'/%3E%3C/svg%3E"); }
.ui__ico--boxes  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 20 6.8v8.4L12 19.4 4 15.2V6.8z'/%3E%3Cpath d='m4 6.8 8 4.2 8-4.2M12 11v8.4'/%3E%3C/svg%3E"); }
.ui__ico--link   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.8a3.6 3.6 0 0 0 5.4.4l2.9-2.9a3.6 3.6 0 0 0-5.1-5.1l-1.6 1.6'/%3E%3Cpath d='M13.8 10.2a3.6 3.6 0 0 0-5.4-.4l-2.9 2.9a3.6 3.6 0 0 0 5.1 5.1l1.6-1.6'/%3E%3C/svg%3E"); }
.ui__ico--share  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 10.7 6.8-4.4M8.6 13.3l6.8 4.4'/%3E%3C/svg%3E"); }
.ui__ico--search { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.7-3.7'/%3E%3C/svg%3E"); }
.ui__ico--chat   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4H4a1.6 1.6 0 0 0-1.6 1.6v9.8A1.6 1.6 0 0 0 4 17h3v4l4.4-4h8.6a1.6 1.6 0 0 0 1.6-1.6V5.6A1.6 1.6 0 0 0 20 4z'/%3E%3C/svg%3E"); }
.ui__ico--plug   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5v6.5M15 2.5v6.5M6 9h12v3.2A6 6 0 0 1 12 18.2a6 6 0 0 1-6-6z'/%3E%3Cpath d='M12 18.2v3.3'/%3E%3C/svg%3E"); }
.ui__ico--gear   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M12 2.4v3.1M12 18.5v3.1M2.4 12h3.1M18.5 12h3.1M5.2 5.2l2.2 2.2M16.6 16.6l2.2 2.2M18.8 5.2l-2.2 2.2M7.4 16.6l-2.2 2.2'/%3E%3C/svg%3E"); }
.ui__ico--doc    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2.5H7A1.6 1.6 0 0 0 5.4 4.1v15.8A1.6 1.6 0 0 0 7 21.5h10a1.6 1.6 0 0 0 1.6-1.6V7z'/%3E%3Cpath d='M14 2.5V7h4.6M8.8 12.5h6.4M8.8 16.4h4.2'/%3E%3C/svg%3E"); }
.ui__ico--copy   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.6' y='8.6' width='11.4' height='11.4' rx='2'/%3E%3Cpath d='M5.4 15.4A2 2 0 0 1 4 13.6V5.4a2 2 0 0 1 2-2h8.2a2 2 0 0 1 1.8 1.4'/%3E%3C/svg%3E"); }
.ui__ico--chev   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.ui__ico--down   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9.5 6.5 6.5 6.5-6.5'/%3E%3C/svg%3E"); }
.ui__ico--bell   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 9.2a5.8 5.8 0 0 1 11.6 0c0 5.2 2 6.3 2 6.3H4.2s2-1.1 2-6.3z'/%3E%3Cpath d='M10.2 19a2 2 0 0 0 3.6 0'/%3E%3C/svg%3E"); }
.ui__ico--list   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 6.2h12M8.5 12h12M8.5 17.8h12M3.6 6.2h.01M3.6 12h.01M3.6 17.8h.01'/%3E%3C/svg%3E"); }
.ui__ico--info   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11.2v5M12 7.6h.01'/%3E%3C/svg%3E"); }
.ui__ico--moon   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 13.8A8.8 8.8 0 0 1 10.2 3.6a8.8 8.8 0 1 0 10.2 10.2z'/%3E%3C/svg%3E"); }
.ui__ico--globe  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M3.4 12h17.2'/%3E%3Cpath d='M12 3.2c2.7 2.8 2.7 14.8 0 17.6-2.7-2.8-2.7-14.8 0-17.6z'/%3E%3C/svg%3E"); }
.ui__ico--send   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.6 13.4M21 3l-6.6 18-3.8-7.6L3 9.6z'/%3E%3C/svg%3E"); }
.ui__ico--shield { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 20 6v5.8c0 5-3.4 8.5-8 9.6-4.6-1.1-8-4.6-8-9.6V6z'/%3E%3C/svg%3E"); }
.ui__ico--plus   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.4v13.2M5.4 12h13.2'/%3E%3C/svg%3E"); }
.ui__ico--folder { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.6A1.6 1.6 0 0 1 4.2 5h4.3l2 2.6h9.3A1.6 1.6 0 0 1 21.4 9.2v8.2a1.6 1.6 0 0 1-1.6 1.6H4.2a1.6 1.6 0 0 1-1.6-1.6z'/%3E%3C/svg%3E"); }
.ui__ico--grid   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='3.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='3.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3Crect x='13.4' y='13.4' width='7.2' height='7.2' rx='1.6'/%3E%3C/svg%3E"); }
.ui__ico--upload { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4.4M7.4 8.8 12 4.2l4.6 4.6'/%3E%3Cpath d='M4 15.4V18a1.8 1.8 0 0 0 1.8 1.8h12.4A1.8 1.8 0 0 0 20 18v-2.6'/%3E%3C/svg%3E"); }
/* NexTest Studio 侧栏专用 */
.ui__ico--brain  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6a3 3 0 0 0-5.6 1.6A3.1 3.1 0 0 0 4 9.3a3.2 3.2 0 0 0 .7 5 3.2 3.2 0 0 0 3 4.2 2.9 2.9 0 0 0 4.3-2.2z'/%3E%3Cpath d='M12 4.6a3 3 0 0 1 5.6 1.6A3.1 3.1 0 0 1 20 9.3a3.2 3.2 0 0 1-.7 5 3.2 3.2 0 0 1-3 4.2 2.9 2.9 0 0 1-4.3-2.2z'/%3E%3C/svg%3E"); }
.ui__ico--cal    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='5.2' width='17.2' height='15.4' rx='2'/%3E%3Cpath d='M3.4 10h17.2M8.2 2.8v4.4M15.8 2.8v4.4'/%3E%3C/svg%3E"); }
.ui__ico--play   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M10.2 8.6 15.6 12l-5.4 3.4z'/%3E%3C/svg%3E"); }
.ui__ico--bug    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='6.6' width='8' height='12.4' rx='4'/%3E%3Cpath d='M8 11H3.6M20.4 11H16M8.6 15.6 4.6 18M15.4 15.6l4 2.4M9.6 6.2 8 3.4M14.4 6.2 16 3.4M8.4 15H3.9M20.1 15h-4.5'/%3E%3C/svg%3E"); }
.ui__ico--compare{ --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.4' cy='6.4' r='2.8'/%3E%3Ccircle cx='17.6' cy='17.6' r='2.8'/%3E%3Cpath d='M15.4 6.4h3.2a1.8 1.8 0 0 1 1.8 1.8v5.6M8.6 17.6H5.4a1.8 1.8 0 0 1-1.8-1.8V9.8'/%3E%3C/svg%3E"); }
.ui__ico--flow   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3.4' width='7' height='6' rx='1.6'/%3E%3Crect x='14' y='14.6' width='7' height='6' rx='1.6'/%3E%3Cpath d='M6.5 9.4v5.8a2 2 0 0 0 2 2h5.5'/%3E%3Cpath d='M17.5 3.4v4.2h-5.5'/%3E%3C/svg%3E"); }
.ui__ico--chart  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.4h16'/%3E%3Cpath d='M7.4 20.4v-6.2M12 20.4V6.6M16.6 20.4v-9.4'/%3E%3C/svg%3E"); }

/* ==========================================================================
   4. 应用外壳
   ========================================================================== */
.ui {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
}
.ui--rail { grid-template-columns: 42px minmax(0, 1fr); }
.ui--side { grid-template-columns: 172px minmax(0, 1fr); }
@media (max-width: 700px) {
  .ui--side { grid-template-columns: minmax(0, 1fr); }
  .ui--side .ui__side { display: none; }
  .ui--rail { grid-template-columns: 34px minmax(0, 1fr); }
}

/* ---------- 左侧图标栏 ---------- */
.ui__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 0;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-line-2);
}
.ui__rail-i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 6px;
  color: var(--ui-ink-4);
}
.ui__rail-i .ui__ico { width: 15px; height: 15px; }
.ui__rail-i.on { color: var(--ui-accent); background-color: var(--ui-accent-bg); }
.ui__rail-sp { flex: 1; }

/* 品牌标记 */
.ui__logo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-bottom: 6px;
  border-radius: 7px;
  background: var(--ui-accent);
  color: #06101c;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------- 左侧文字侧边栏 ---------- */
.ui__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 10px;
  background: var(--ui-panel);
  border-right: 1px solid var(--ui-line-2);
  overflow: hidden;
}
/* .ui__srch 默认 flex:1 是给横向工具条用的；
   在纵向 flex 的侧栏里它会变成"纵向撑满"，把搜索框拉成一个大方块 */
.ui__side .ui__srch { flex: none; }
.ui__side-hd { display: flex; align-items: center; gap: 7px; }
.ui__side-t { display: grid; min-width: 0; }
.ui__side-t b { font-size: 0.6875rem; font-weight: 700; color: var(--ui-ink); white-space: nowrap; }
.ui__side-t em {
  font-style: normal;
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__nav { display: grid; gap: 1px; margin-top: 2px; }
.ui__nav-g {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 2px;
  padding-left: 6px;
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
}
.ui__nav-g .ui__ico { width: 10px; height: 10px; }
.ui__nav-i {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 0.625rem;
  color: var(--ui-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__nav-i.on {
  background: var(--ui-accent-bg);
  color: var(--ui-accent);
  font-weight: 600;
}
.ui__nav-i em {
  font-style: normal;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: var(--ui-panel-2);
  color: var(--ui-ink-4);
}
.ui__nav-i.on em { background: var(--ui-accent-bg); color: var(--ui-accent); }
/* 侧栏里的提示小字（如「快速提示」下的快捷键说明） */
.ui__side-tip {
  margin: 0;
  padding-left: 6px;
  font-size: 0.5rem;
  line-height: 1.65;
  color: var(--ui-ink-4);
}
.ui__side-ft {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--ui-line-2);
  font-size: 0.5rem;
  line-height: 1.7;
  color: var(--ui-ink-4);
}
.ui__side-ft .ui__ico { width: 11px; height: 11px; vertical-align: -2px; margin-right: 3px; }

/* ---------- 主区 ---------- */
/* overflow:hidden 是关键：界面示意里任何一行内部溢出都就地裁掉，
   不要让它变成 .shot__body 的横向滚动宽度（那样会出现滚动条，不像截图） */
.ui__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ui__main > * { flex: none; }

/* ---------- 顶部标题栏 ---------- */
.ui__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 14px;
  border-bottom: 1px solid var(--ui-line-2);
}
.ui__ttl {
  display: flex;
  align-items: center;
  gap: 5px;
  /* 允许被压缩，长副标题在窄屏上省略而不是把右侧按钮挤出容器 */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* 必须裁切：否则标题在窄屏收缩后，nowrap 的文字会溢出自身盒子，
     直接压在右侧的状态条和按钮上（实测过的错位） */
  overflow: hidden;
}
.ui__ttl .ui__ico { width: 12px; height: 12px; color: var(--ui-ink-4); }
.ui__ttl em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui__acts {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  flex: none;
  color: var(--ui-ink-4);
}
.ui__acts .ui__ico { width: 14px; height: 14px; }

/* 顶栏（NexTest 的模块入口 + 命令面板） */
.ui__crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ui-line-2);
  font-size: 0.625rem;
  color: var(--ui-ink-4);
  overflow: hidden;
}
.ui__crumb > * { min-width: 0; }
.ui__crumb b { color: var(--ui-ink-3); font-weight: 500; }
.ui__crumb i { font-style: normal; opacity: 0.5; }
.ui__crumb .ui__srch { margin-left: auto; max-width: 190px; }

/* 头像 */
.ui__me {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.5625rem;
  color: var(--ui-ink-3);
}
.ui__me em { font-style: normal; font-size: 0.5rem; color: var(--ui-ink-4); }
.ui__me::before {
  content: attr(data-initial);
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--ui-accent-bg);
  color: var(--ui-accent);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
}
.ui__online {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(53, 211, 154, 0.12);
  color: var(--ui-ok);
  font-size: 0.5625rem;
  white-space: nowrap;
}
.ui__online::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- 二级 Tab ---------- */
.ui__tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ui-line-2);
  overflow: hidden;
}
.ui__tabs > span {
  position: relative;
  padding: 8px 1px 7px;
  font-size: 0.625rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
}
.ui__tabs > span.on { color: var(--ui-accent); font-weight: 600; }
.ui__tabs > span.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--ui-accent);
}
/* 用弹性占位把右侧页签推到末尾，避免依赖 :first-of-type 的歧义 */
.ui__tabs-sp { flex: 1; align-self: stretch; }
.ui__tabs-r { color: var(--ui-ink-4); }

/* ---------- 统计条 ---------- */
.ui__stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 14px 0;
  padding: 7px 12px;
  border: 1px solid var(--ui-line-2);
  border-radius: 7px;
  background: var(--ui-panel);
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
}
.ui__stats b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ui-ink);
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
.ui__stats--dot { gap: 18px; }
.ui__stats--dot b::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}
.ui__stats--dot b.c-ok     { color: var(--ui-ok); }
.ui__stats--dot b.c-warn   { color: var(--ui-warn); }
.ui__stats--dot b.c-danger { color: var(--ui-danger); }
.ui__stats--dot b.c-info   { color: var(--ui-info); }
.ui__stats--dot b.c-idle   { color: var(--ui-ink-4); }

/* ---------- 横幅提示 ---------- */
.ui__banner {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 14px 0;
  padding: 7px 12px;
  border: 1px solid var(--ui-accent-line);
  border-radius: 7px;
  background: var(--ui-accent-bg);
  font-size: 0.5625rem;
  line-height: 1.6;
  color: var(--ui-ink-2);
}
.ui__banner .ui__ico { width: 13px; height: 13px; color: var(--ui-accent); }
.ui__banner.warn {
  border-color: rgba(240, 98, 124, 0.34);
  background: rgba(240, 98, 124, 0.09);
}
.ui__banner.warn .ui__ico { color: var(--ui-danger); }
.ui__banner b { color: var(--ui-ink); font-weight: 600; }

/* ---------- 卡片 ---------- */
.ui__card {
  margin: 10px 14px;
  border: 1px solid var(--ui-line-2);
  border-radius: 8px;
  background: var(--ui-panel);
  overflow: hidden;
}
.ui__card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 8px;
}
.ui__card-ttl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ui-ink);
}
.ui__card-ttl em {
  font-style: normal;
  font-weight: 400;
  font-size: 0.5625rem;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--ui-panel-2);
  color: var(--ui-ink-4);
}
.ui__sort {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
}
.ui__sort .ui__ico { width: 10px; height: 10px; }

/* ==========================================================================
   5. 控件
   ========================================================================== */

/* 下拉 pill */
.ui__pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-sunken);
  font-size: 0.5625rem;
  color: var(--ui-ink-3);
  white-space: nowrap;
}
.ui__pill .ui__ico { width: 9px; height: 9px; color: var(--ui-ink-4); }
.ui__pill--dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ui-accent);
  flex: none;
}

/* 按钮 */
.ui__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-panel-2);
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--ui-ink-2);
  white-space: nowrap;
}
.ui__btn .ui__ico { width: 11px; height: 11px; }
.ui__btn--primary {
  border-color: transparent;
  background: var(--ui-accent);
  color: #06101c;
  font-weight: 600;
}
.ui__btn--primary .ui__ico { color: currentColor; }
.ui__btn--disabled {
  background: var(--ui-panel);
  color: var(--ui-ink-4);
  border-color: var(--ui-line-2);
}

/* 搜索框 */
.ui__srch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: var(--ui-sunken);
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__srch .ui__ico { width: 11px; height: 11px; flex: none; }
.ui__srch kbd {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--ui-line-2);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  flex: none;
}

/* 工具条：搜索 + 筛选下拉 */
.ui__toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 9px;
}
@media (max-width: 760px) {
  .ui__toolbar > .ui__pill:nth-of-type(n + 2) { display: none; }
}

/* 筛选 chip 行（整理工作台的分类统计） */
.ui__fchips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 12px 9px;
}
.ui__fchip {
  padding: 3px 10px;
  border: 1px solid var(--ui-line-2);
  border-radius: var(--radius-pill);
  background: var(--ui-panel);
  font-size: 0.5625rem;
  color: var(--ui-ink-3);
  white-space: nowrap;
}
.ui__fchip b { font-family: var(--font-mono); font-weight: 600; margin-left: 4px; }
.ui__fchip.on {
  background: var(--ui-accent-bg);
  border-color: var(--ui-accent-line);
  color: var(--ui-accent);
  font-weight: 600;
}
.ui__fnote {
  margin-left: auto;
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
}
@media (max-width: 760px) { .ui__fnote { display: none; } }

/* 分段控件（列表 / 看板） */
.ui__seg {
  display: flex;
  gap: 2px;
  flex: none;
  padding: 2px;
  border-radius: 6px;
  background: var(--ui-sunken);
}
.ui__seg span {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
}
.ui__seg span.on { background: var(--ui-accent-bg); color: var(--ui-accent); font-weight: 600; }


/* ==========================================================================
   6. 数据表
   ========================================================================== */
.ui__table { border-top: 1px solid var(--ui-line-2); }
.ui__row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--ui-line-2);
}
.ui__row:last-child { border-bottom: none; }
/* 栅格项默认 min-width:auto，长文本会把列撑破；统一允许收缩 */
.ui__row > * { min-width: 0; }

.ui__name {
  color: var(--ui-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui__row--head {
  padding: 6px 12px;
  background: var(--ui-sunken);
  font-size: 0.5625rem;
  letter-spacing: 0.03em;
  color: var(--ui-ink-4);
}
/* 式样书目录：式样书 / 当前发布版本 / 文档类型 / 负责人 / 最近更新 / 操作 */
.ui__row--doc { grid-template-columns: minmax(0, 1fr) 86px 60px 82px 100px 36px; }
/* 审计履历：操作事件 / 操作人 / 资源标识 / 时间 */
.ui__row--audit { grid-template-columns: minmax(0, 1fr) 76px 132px 122px; }
/* 整理工作台：勾选 | 文件 / 依据 | 类型 | 操作 */
.ui__row--tidy { grid-template-columns: 18px minmax(0, 1fr) 58px 56px; }

/* ---------- 文档单元格 ---------- */
.ui__doc { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
/* 式样书列用的是中性文档图标，彩色类型块挪到「文档类型」列，避免同屏重复 */
.ui__doc > .ui__ico {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex: none;
  color: var(--ui-ink-4);
}
.ui__fic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  border-radius: 3px;
  background: var(--ui-panel-2);
  color: var(--ui-ink-3);
  font-family: var(--font-mono);
  font-size: 0.4375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ui__fic--docx { background: rgba(91, 140, 255, 0.16); color: #7ea6ff; }
.ui__fic--xlsx { background: rgba(53, 211, 154, 0.15); color: #4fd9a8; }
.ui__fic--pptx { background: rgba(255, 138, 61, 0.16); color: #ffa46b; }
.ui__fic--pdf  { background: rgba(240, 98, 124, 0.16); color: #f4839a; }
.ui__doc-t { display: grid; gap: 1px; min-width: 0; }
.ui__doc-t b {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ui-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__doc-t em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  color: var(--ui-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 依据说明：正文下一行的次要信息，不用等宽 */
.ui__basis {
  display: block;
  margin-top: 2px;
  font-size: 0.5rem;
  color: var(--ui-ink-4);
}
.ui__doc-t em.ui__basis { font-family: var(--font-body); letter-spacing: 0; }

/* 版本列 */
.ui__ver { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.ui__ver b {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--ui-ink);
}
.ui__ver b.is-none { font-family: var(--font-body); font-weight: 400; color: var(--ui-ink-4); }

/* 负责人列 */
.ui__owner {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.5625rem;
  color: var(--ui-ink-3);
}
.ui__owner span {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  background: var(--ui-accent-bg);
  color: var(--ui-accent);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 600;
}
.ui__owner i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 最近更新列 */
.ui__date {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 0.5625rem;
  color: var(--ui-ink-3);
  white-space: nowrap;
}
.ui__date em {
  font-style: normal;
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 操作列 */
.ui__act {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--ui-ink-4);
}
.ui__act .ui__ico { width: 12px; height: 12px; }

/* ---------- 状态标签 ---------- */
.ui__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ui__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ui__tag--ok     { color: var(--ui-ok); }
.ui__tag--warn   { color: var(--ui-warn); }
.ui__tag--danger { color: var(--ui-danger); }
.ui__tag--info   { color: var(--ui-info); }
.ui__tag--off    { color: var(--ui-ink-4); }

/* 分类标签（整理工作台的 重命名 / 归档 / 重复项） */
.ui__cat {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--ui-accent-bg);
  color: var(--ui-accent);
  font-size: 0.5rem;
  white-space: nowrap;
}
.ui__cat--off { background: var(--ui-panel-2); color: var(--ui-ink-4); }

/* 勾选框 */
.ui__checkbox {
  width: 11px;
  height: 11px;
  border: 1px solid var(--ui-line);
  border-radius: 2px;
  flex: none;
}
.ui__checkbox--on {
  border-color: var(--ui-accent);
  background: var(--ui-accent-bg);
}

/* 进度条 */
.ui__bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(230, 237, 246, 0.10);
  overflow: hidden;
}
.ui__bar i { display: block; height: 100%; background: var(--ui-accent); border-radius: 2px; }
.ui__bar--ok i     { background: var(--ui-ok); }
.ui__bar--warn i   { background: var(--ui-warn); }
.ui__bar--danger i { background: var(--ui-danger); }
.ui__bar--info i   { background: var(--ui-info); }
.ui__bar--idle i   { background: var(--ui-ink-4); }

/* ==========================================================================
   7. 问答
   ========================================================================== */
.ui__chat {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  flex: 1;
  align-content: start;
}
.ui__msg {
  max-width: 92%;
  margin: 0;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.625rem;
  line-height: 1.75;
}
.ui__msg--me {
  justify-self: end;
  background: var(--ui-accent-bg);
  border: 1px solid var(--ui-accent-line);
  color: var(--ui-ink);
}
.ui__msg--ai {
  background: var(--ui-panel);
  border: 1px solid var(--ui-line-2);
  color: var(--ui-ink-2);
}
.ui__msg strong { color: var(--ui-ink); font-weight: 600; }
.ui__cite {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--ui-accent);
  vertical-align: super;
  padding: 0 1px;
}
.ui__srcs { display: grid; gap: 4px; margin-top: 8px; }
.ui__src {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--ui-line-2);
  border-radius: 5px;
  background: var(--ui-sunken);
  font-size: 0.5625rem;
}
.ui__src em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--ui-accent);
  flex: none;
}
.ui__src span {
  flex: 1;
  min-width: 0;
  color: var(--ui-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui__src b {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  color: var(--ui-accent);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* 输入区 */
.ui__ask {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 7px 8px 7px 11px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: var(--ui-sunken);
  font-size: 0.5625rem;
  color: var(--ui-ink-4);
}
/* 输入框里的占位文字与快捷键提示必须各自成行内盒子，
   否则裸文本节点无法省略号截断，窄屏会折成两行把输入框撑高 */
.ui__ask-i {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui__ask-h {
  flex: none;
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  opacity: 0.8;
}
.ui__ask .ui__btn { flex: none; margin-left: auto; }
.ui__caret {
  width: 1px;
  height: 11px;
  background: var(--ui-accent);
  animation: blink 1.15s steps(1) infinite;
  flex: none;
}


/* ==========================================================================
   8. 版本履历时间线（NexSpec Hub 审计履历）
   ========================================================================== */
.ui__tl { flex: 1; padding: 12px 14px; }
.ui__tl-item {
  position: relative;
  padding: 0 0 12px 20px;
  border-left: 1px solid var(--ui-line);
}
.ui__tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.ui__tl-item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-bg);
  border: 1px solid var(--ui-accent-line);
}
.ui__tl-item.is-head::before { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui__tl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui__tl-ver {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ui-ink);
}
.ui__tl-time {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  margin-left: auto;
}
.ui__tl-note { margin-top: 4px; font-size: 0.5625rem; line-height: 1.65; color: var(--ui-ink-3); }
.ui__tl-hash {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  color: var(--ui-ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui__tl-hash b { color: var(--ui-accent); font-weight: 500; }

/* ==========================================================================
   9. 变更影响差分
   ========================================================================== */
.ui__diff { flex: 1; border-top: 1px solid var(--ui-line-2); }
.ui__diff-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 66px;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ui-line-2);
  font-size: 0.5625rem;
  line-height: 1.6;
  color: var(--ui-ink-2);
}
.ui__diff-row strong { color: var(--ui-ink); font-weight: 600; }
.ui__diff-row:last-child { border-bottom: none; }
.ui__diff-tag {
  display: inline-grid;
  place-items: center;
  height: 16px;
  border-radius: 4px;
  font-size: 0.5rem;
  font-weight: 600;
}
.ui__diff-tag--add { background: var(--ui-accent-bg); color: var(--ui-accent); }
.ui__diff-tag--mod { background: rgba(255, 138, 61, 0.14); color: var(--ui-warn); }
.ui__diff-tag--del { background: var(--ui-panel-2); color: var(--ui-ink-4); }
/* 右列的影响条数：是计数不是状态，所以不带状态圆点 */
.ui__cnt {
  justify-self: end;
  font-size: 0.5rem;
  color: var(--ui-ink-3);
  white-space: nowrap;
}
.ui__cnt b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ui-accent);
}

/* ==========================================================================
   10. 用例行（NexTest Studio 执行列表）
   ========================================================================== */
.ui__cases { flex: 1; display: grid; gap: 6px; padding: 0 14px 12px; }
.ui__case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--ui-line-2);
  border-radius: 7px;
  background: var(--ui-panel);
}
.ui__case-t { display: grid; gap: 2px; min-width: 0; }
.ui__case-t b {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--ui-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__case-t em {
  font-style: normal;
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui__case-m {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.ui__case-m > .ui__bar { grid-column: 1 / -1; }
.ui__case-m span {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--ui-ink-4);
  white-space: nowrap;
}
.ui__case-m span:last-child { justify-self: end; font-family: var(--font-body); }

/* ==========================================================================
   11. 底注
   ========================================================================== */
.ui__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 7px 14px;
  border-top: 1px solid var(--ui-line-2);
  background: var(--ui-sunken);
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  color: var(--ui-ink-4);
}
.ui__foot b { color: var(--ui-accent); font-weight: 500; }
.ui__foot--flush { margin-top: 0; }

/* ==========================================================================
   12. 窄屏适配：隐藏次要列，避免被压成不可读
   ========================================================================== */
@media (max-width: 760px) {
  .ui__row--doc { grid-template-columns: minmax(0, 1fr) 82px 34px; }
  .ui__row--doc .ui__cell--opt { display: none; }
  .ui__row--audit { grid-template-columns: minmax(0, 1fr) 96px; }
  .ui__row--audit .ui__cell--opt { display: none; }
  .ui__row--tidy { grid-template-columns: 18px minmax(0, 1fr) 52px; }
  .ui__row--tidy .ui__cell--opt { display: none; }
  .ui__diff-row { grid-template-columns: 40px minmax(0, 1fr); }
  .ui__diff-row .ui__cell--opt { display: none; }
  .ui__case { grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  .ui__tabs { gap: 12px; }
  .ui__tabs > span:not(.on):not(.ui__tabs-r) { display: none; }
  /* 右侧的次级页签与弹性占位一起收起，窄屏只留当前页签 */
  .ui__tabs-r, .ui__tabs-sp { display: none; }
  .ui__crumbs-opt { display: none; }
  .ui__msg { max-width: 100%; }
  .ui__stats { gap: 10px; }
  /* 顶栏只保留按钮内图标，纯图标控件（主题 / 语言 / 通知 / 设置）收起 */
  .ui__acts > .ui__ico { display: none; }
  .ui__crumb > .ui__ico { display: none; }
  .ui__ask-h { display: none; }
}

/* ==========================================================================
   13. 减弱动效
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ui__caret { animation: none; }
}

/* ==========================================================================
   14. 网格中的视觉格
   用于在栅格里塞进一张示意图，替代纯文字，让整块不再"全是字"
   ========================================================================== */
.block--visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.block--visual svg { width: 100%; max-width: 190px; height: auto; }
.block--visual .block__vcap {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wide);
  color: var(--color-faint);
  line-height: 1.7;
}
.block--visual .block__vcap b { color: var(--color-accent); font-weight: 500; }

/* ==========================================================================
   15. 宽幅图版（示意图容器）
   ========================================================================== */
.figure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(30rem 18rem at 15% 0%, rgba(47, 227, 196, 0.07), transparent 62%),
    var(--color-bg-raise);
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
}
.figure svg { width: 100%; height: auto; display: block; }
.figure__cap {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wide);
  color: var(--color-faint);
}
.figure__cap b { color: var(--color-accent); font-weight: 500; }

/* 图中的通用描边样式（配合 SVG 内联使用） */
.dg-line  { stroke: var(--color-accent-dim); fill: none; }
.dg-dash  { stroke: var(--color-border); stroke-dasharray: 4 4; fill: none; }
.dg-box   { stroke: var(--color-border); fill: var(--color-bg); }
.dg-box-a { stroke: var(--color-border-accent); fill: rgba(47, 227, 196, 0.06); }
.dg-label {
  fill: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.dg-title {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}
.dg-accent { fill: var(--color-accent); font-family: var(--font-mono); font-size: 10px; }
.dg-signal { fill: var(--color-signal); font-family: var(--font-mono); font-size: 10px; }

/* ==========================================================================
   16. 数据边界示意图
   用 HTML/CSS 而非 SVG 绘制，窄屏可自然重排，不依赖横向滚动
   ========================================================================== */
.boundary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 900px) {
  .boundary { grid-template-columns: minmax(0, 1fr) 68px 236px; gap: 0; }
}

/* 内网区域：虚线框，强调"边界"语义 */
.boundary__zone {
  position: relative;
  border: 1px dashed var(--color-border-accent);
  border-radius: var(--radius-md);
  background: rgba(47, 227, 196, 0.03);
  padding: var(--space-5) var(--space-4) var(--space-4);
}
.boundary__tag {
  position: absolute;
  top: -9px; left: var(--space-4);
  padding: 0 8px;
  background: var(--color-bg-raise);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
}
.boundary__products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
@media (min-width: 640px) { .boundary__products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.boundary__chip {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  text-align: center;
}
.boundary__chip b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-text);
}
.boundary__chip span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* 连接线：用伪元素画一段竖直虚线 */
.boundary__stack {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  display: grid;
  gap: var(--space-2);
}
.boundary__layer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.boundary__layer b {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-accent);
}
.boundary__layer span { font-size: var(--fs-xs); color: var(--color-muted); }

/* 阻断段 */
.boundary__gap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
}
@media (min-width: 900px) { .boundary__gap { min-height: 100%; } }
.boundary__gap::before {
  content: "";
  position: absolute;
  background-image: linear-gradient(90deg, var(--color-signal) 55%, transparent 55%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  opacity: 0.7;
}
@media (min-width: 900px) {
  .boundary__gap::before { left: 0; right: 0; top: 50%; height: 1px; }
}
@media (max-width: 899px) {
  .boundary__gap::before {
    top: 0; bottom: 0; left: 50%; width: 1px;
    background-image: linear-gradient(180deg, var(--color-signal) 55%, transparent 55%);
    background-size: 1px 10px;
    background-repeat: repeat-y;
  }
}
.boundary__gap span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 138, 61, 0.5);
  background: var(--color-bg-raise);
  color: var(--color-signal);
  font-size: 0.8125rem;
  line-height: 1;
}

/* 外部区域：压暗 + 斜纹，视觉上"被排除" */
.boundary__outside {
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 6px, transparent 6px 12px),
    rgba(0, 0, 0, 0.22);
  text-align: center;
}
.boundary__outside b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-muted);
}
.boundary__outside span {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 3px 8px;
  border: 1px solid rgba(255, 138, 61, 0.4);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-signal);
}

/* 图版内横向滚动版本（SVG 图在小屏保留可读性） */
.figure--scroll { overflow-x: auto; }
.figure--scroll svg { min-width: 760px; }

/* 产品页页头右侧的界面预览 */
.page-hero .shot { margin-top: var(--space-2); }

/* ==========================================================================
   17. 快照区布局
   ========================================================================== */
.shot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
/* 三列布局：只放三块（界面 + 界面 + 说明）时才用 */
@media (min-width: 860px) { .shot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
/* --wide 只放两块（界面 + 说明），两列才不会留空 */
@media (min-width: 860px) { .shot-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .shot-grid--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.snaps { display: grid; gap: var(--space-6); }
.snap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 900px) {
  .snap { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--space-6); }
  /* 交替左右，制造对角线流动感 */
  .snap:nth-child(even) .snap__text { order: 2; }
}
.snap__text h3 { font-size: var(--fs-xl); }
.snap__text p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-muted);
}
.snap__list {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.snap__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--color-text-dim);
}
.snap__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.75em;
  width: 12px; height: 1px;
  background: var(--color-accent);
}