.relation-governance-page .relation-governance-filters,
.graph-workbench-page .graph-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.relation-governance-page .relation-governance-filters input { min-width: 260px; }
.relation-governance-table th:nth-child(1), .relation-governance-table th:nth-child(3) { width: 15%; }
.relation-governance-table th:nth-child(2) { width: 11%; }
.relation-governance-table th:nth-child(4) { width: 8%; }
.relation-governance-table th:nth-child(5) { width: 15%; }
.relation-governance-table th:nth-child(6) { width: 8%; }
.relation-governance-table th:nth-child(7) { width: 12%; }
.relation-governance-table th:nth-child(8) { width: 16%; }

/* ============================================================================
   [KS 修正 2026-09-15 / 第2批 A-04] 孤立关系可见化
   审计问题：关系治理页显示「孤立关系 1」，但列表无标记、筛选器无入口、
   详情页无解释。以下样式只服务新加的三处元素（行内角标 / 统计卡开关按钮 /
   详情页说明条），不修改任何既有规则。角标复用既有 .graph-status-pill
   与 .processing 语气（warning 系），未新增色调。
   ============================================================================ */
.relation-isolated-pill { margin-top: 5px; align-self: flex-start; }
.relation-governance-table td:nth-child(1) { display: flex; flex-direction: column; align-items: flex-start; }.relation-governance-table tr.is-isolated { background: #fffaf6; }
.relation-governance-filters select#rg-isolated { min-width: 180px; }
.entity-dashboard-metrics article.attention.is-active { border-color: #d9a76a; background: #fff9f0; }
.entity-dashboard-metrics article.attention .button.text { margin-top: 6px; padding: 0; min-height: 0; font-size: 11px; }
.relation-isolated-notice span { display: block; margin-top: 3px; line-height: 1.5; }
/* [KS 修正 2026-09-15 / 第2批 A-04] 质量页「定位孤立关系」跳转条 */
.graph-quality-jump { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.graph-quality-jump .button { width: auto; }
/* [KS 第3批 2026-09-15] 发布页：前置条件清单 + 版本能力边界说明。
   仅补充新块样式，不改动任何既有选择器与外观正本。 */
.graph-publish-readiness { display: block; }
.graph-publish-readiness ul.graph-publish-readiness-list { margin: 6px 0 0; padding-left: 18px; }
.graph-publish-readiness ul.graph-publish-readiness-list li { margin: 3px 0; line-height: 1.6; }
.graph-version-boundary { display: block; }
.graph-version-boundary ul.graph-version-boundary-list { margin: 6px 0 0; padding-left: 18px; }
.graph-version-boundary ul.graph-version-boundary-list li { margin: 3px 0; line-height: 1.6; }
.graph-publish-readiness + .graph-version-boundary { margin-top: 10px; }
.relation-inbox-table th:nth-child(1) { width: 4%; }
.relation-inbox-table th:nth-child(2), .relation-inbox-table th:nth-child(4) { width: 14%; }
.relation-inbox-table th:nth-child(3) { width: 11%; }
.relation-inbox-table th:nth-child(5) { width: 13%; }
.relation-inbox-table th:nth-child(6), .relation-inbox-table th:nth-child(7) { width: 8%; }
.relation-inbox-table th:nth-child(8) { width: 28%; }
.relation-form-card { max-width: 900px; }

.relation-candidate-table td.confidence-low strong { color: #b84f32; }
.relation-candidate-table td.confidence-low small { display: block; color: #b84f32; }

.graph-console-panel {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(33, 43, 54, .04);
}

.graph-console-toolbar,
.graph-result-strip,
.graph-quality-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
}

.graph-console-toolbar { border-bottom: 1px solid #e6e9ed; }
.graph-console-toolbar h2 { margin: 0 0 3px; font-size: 1rem; }
.graph-console-toolbar p { margin: 0; color: #78818c; font-size: .68rem; }
.graph-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.graph-demo-badge { display: inline-flex; padding: 2px 7px; border: 1px solid #eadccf; border-radius: 999px; color: #9a633e; background: #fff8f1; font-size: .58rem; font-weight: 700; }
.graph-filter-row { padding: 12px 18px; border-bottom: 1px solid #e6e9ed; background: #fafbfc; }
.graph-filter-row input { min-width: 240px; }
.graph-filter-row select { min-width: 135px; }
.graph-layout-toggle { display: flex; gap: 5px; margin-left: auto; }
.graph-layout-toggle .button.active { border-color: #886ab5; color: #74589d; background: #f2ecfb; }
.graph-focus-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f0dfbd; color: #755426; background: #fff9ec; font-size: .68rem; }
.graph-stage { display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: stretch; justify-items: stretch; min-height: 560px; background: #111827; }
.graph-canvas { position: relative; width: 100%; min-width: 0; height: 560px; min-height: 560px; overflow: hidden; isolation: isolate; }
.graph-render-error { display: grid; place-items: center; height: 100%; margin: 0; color: #e5e7eb; }
/* ============================================================================
   [KS 修正 2026-09-15 / 第2批 B P1-4] 画布筛选无结果时的空态浮层
   审计问题：筛选无结果时画布纯黑、无任何提示，唯一线索是 footer 的「0 个实体、0 条关系」。
   实现方式：浮层是 .graph-canvas（G6 挂载容器）的绝对定位子元素，叠在画布之上而非画布内部 —— 
   G6 用 canvas 渲染，往容器里插 DOM 不会被它清除；z-index 取 2，高于画布内容，
   与 .graph-side-panel（z-index:1）同级不重叠（面板在另一个 grid 列）。
   配色沿用画布深色底（#111827）的既有对白文字色，未引入新色板。
   ============================================================================ */
.graph-canvas-empty { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; pointer-events: auto; }
.graph-canvas-empty strong { color: #e5e7eb; font-size: .82rem; }
.graph-canvas-empty span { max-width: 360px; color: #9eabb9; font-size: .66rem; line-height: 1.7; }
.graph-canvas-empty .button { width: auto; margin-top: 4px; }
.graph-side-panel { position: relative; z-index: 1; padding: 18px 15px; border-left: 1px solid rgba(255,255,255,.1); color: #e5e7eb; background: #182231; }
.graph-side-panel h3 { margin: 0 0 14px; font-size: .75rem; }
.graph-side-panel p { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: .62rem; }
.graph-side-panel p i { width: 10px; height: 10px; border-radius: 50%; }
.graph-side-panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 16px 0; }
.graph-side-panel .button { display: block; width: 100%; margin: 7px 0; border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.06); }
#rag-app .graph-side-panel .button:hover, #rag-app .graph-side-panel .button:focus-visible { background: #304055; color: #fff; border-color: #758ba7; }
.graph-side-panel small { display: block; margin-top: 14px; color: #9eabb9; line-height: 1.7; }
.graph-result-strip { border-top: 1px solid #e6e9ed; color: #6f7782; font-size: .64rem; }

.graph-detail-grid,
.graph-version-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.graph-detail-grid .wide,
.graph-version-detail-grid .wide { grid-column: 1 / -1; }
.graph-detail-grid footer { display: flex; gap: 8px; margin-top: 16px; }
.graph-neighbor-list { list-style: none; margin: 0; padding: 0; }
.graph-neighbor-list li { border-bottom: 1px solid #edf0f3; }
.graph-neighbor-list li:last-child { border-bottom: 0; }
.graph-neighbor-list button { width: 100%; display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border: 0; color: #343b43; background: transparent; cursor: pointer; text-align: left; }
.graph-neighbor-list span { color: #6f7782; }
.graph-edge-preview { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 160px; }
.graph-edge-preview button { max-width: 160px; padding: 12px; border: 1px solid #dfe4ea; border-radius: 999px; background: #fff; cursor: pointer; }
.graph-edge-preview span { padding: 5px 10px; border-radius: 999px; color: #6b4f90; background: #f1eafb; font-size: .62rem; }
.graph-path-card { margin-top: 18px; }
.graph-path-form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.graph-path-form label { display: grid; gap: 6px; color: #5f6873; font-size: .65rem; }
.graph-quality-table th:nth-child(1) { width: 18%; }
.graph-quality-table th:nth-child(2), .graph-quality-table th:nth-child(3) { width: 13%; }
.graph-quality-table th:nth-child(4), .graph-quality-table th:nth-child(5) { width: 22%; }
.graph-quality-table th:nth-child(6) { width: 12%; }
.graph-quality-footer { border-top: 1px solid #e6e9ed; color: #6f7782; font-size: .66rem; }
.graph-build-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
.graph-build-stages li { min-height: 92px; padding: 12px; border: 1px solid #e3e7eb; border-radius: 7px; background: #fafbfc; }
.graph-build-stages li.done { border-color: #cce6d7; background: #f2faf5; }
.graph-build-stages li.current { border-color: #dbcdf0; background: #f7f2fc; }
.graph-build-stages span { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px; border-radius: 50%; color: #fff; background: #8a94a0; font-size: .58rem; }
.graph-build-stages .done span { background: #2f8a59; }
.graph-build-stages .current span { background: #886ab5; }
.graph-build-stages strong, .graph-build-stages small { display: block; }
.graph-build-stages strong { font-size: .65rem; }
.graph-build-stages small { margin-top: 4px; color: #78818c; font-size: .58rem; line-height: 1.45; }

.graph-version-table th:nth-child(1) { width: 18%; }
.graph-version-table th:nth-child(2) { width: 9%; }
.graph-version-table th:nth-child(3) { width: 14%; }
.graph-version-table th:nth-child(4), .graph-version-table th:nth-child(5), .graph-version-table th:nth-child(6) { width: 9%; }
.graph-version-table th:nth-child(7) { width: 14%; }
.graph-version-table th:nth-child(8) { width: 18%; }
.graph-version-form { max-width: 900px; }
.graph-compare-grid { padding: 0 18px 18px; }
.graph-compare-head,
.graph-compare-row { display: grid; grid-template-columns: 170px repeat(2, minmax(0, 1fr)); gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf0f3; }
.graph-compare-head { color: #707985; background: #fafbfc; font-size: .65rem; }
.graph-compare-row span { color: #6f7782; }
.graph-compare-row strong { font-size: .68rem; font-weight: 600; }
.graph-compare-row .changed { color: #9a633e; background: #fff9ec; }
.graph-check-table th:nth-child(1) { width: 25%; }
.graph-check-table th:nth-child(2) { width: 12%; }
.graph-check-table th:nth-child(3) { width: 28%; }
.graph-check-table th:nth-child(4) { width: 35%; }

.graph-topic-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.graph-topic-status-grid article {
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(33, 43, 54, .03);
}
.graph-topic-status-grid span,
.graph-topic-status-grid small { display: block; color: #747e89; font-size: .62rem; }
.graph-topic-status-grid strong { display: block; margin: 5px 0 3px; color: #2f3740; font-size: .92rem; line-height: 1.35; }
.graph-topic-overview-layout { margin-top: 16px; }
.graph-topic-kb-list { margin: 12px 0 0; padding: 0; list-style: none; }
.graph-topic-kb-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #edf0f3; }
.graph-topic-kb-list li:last-child { border-bottom: 0; }
.graph-topic-kb-list strong,
.graph-topic-kb-list small { display: block; }
.graph-topic-kb-list strong { font-size: .72rem; }
.graph-topic-kb-list small { margin-top: 3px; color: #78818c; font-size: .61rem; }
.graph-topic-service-facts { margin: 12px 0 0; }
.graph-topic-service-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf0f3; }
.graph-topic-service-facts div:last-child { border-bottom: 0; }
.graph-topic-service-facts dt { color: #747e89; font-size: .62rem; }
.graph-topic-service-facts dd { margin: 0; color: #313942; font-size: .68rem; font-weight: 650; }
.graph-topic-overview-layout .graph-next-card footer { display: flex; gap: 8px; flex-wrap: wrap; }

/* POC 评审阶段移除说明型指标栏，首屏保留操作和状态。 */
.graph-kb-page .entity-metric-rail {
  display: none;
}
.graph-kb-page .entity-metric-rail article {
  min-height: 58px;
  padding: 9px 11px;
}
.graph-kb-page .entity-metric-rail span { font-size: .53rem; }
.graph-kb-page .entity-metric-rail strong { margin-top: 3px; font-size: .78rem; }
.graph-kb-page .entity-metric-rail small { margin-top: 3px; font-size: .51rem; line-height: 1.25; }
.graph-kb-page .graph-topic-status-grid { gap: 8px; margin-top: 10px; }
.graph-kb-page .graph-topic-status-grid article { min-height: 58px; padding: 9px 11px; box-shadow: none; }
.graph-kb-page .graph-topic-status-grid span,
.graph-kb-page .graph-topic-status-grid small { font-size: .54rem; }
.graph-kb-page .graph-topic-status-grid strong { margin: 3px 0 2px; font-size: .76rem; }
.graph-kb-page { min-width: 0; max-width: 100%; overflow-x: hidden; }
.graph-kb-page .graph-console-panel { margin-top: 12px; border-radius: 6px; box-shadow: none; }
.graph-kb-page .graph-console-toolbar,
.graph-kb-page .graph-result-strip { padding: 11px 13px; }
.graph-kb-page .graph-console-toolbar h2 { font-size: .82rem; }
.graph-kb-page .graph-console-toolbar p { font-size: .57rem; }

.graph-governance-tabs {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding: 5px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #f8f9fb;
}
.graph-governance-tabs button {
  min-width: 150px;
  min-height: 48px;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  color: #5f6873;
  background: transparent;
  font-size: .69rem;
  font-weight: 650;
  cursor: pointer;
}
.graph-governance-tabs button strong,
.graph-governance-tabs button small { display: block; }
.graph-governance-tabs button small { margin-top: 3px; color: #7a8490; font-size: .53rem; font-weight: 500; }
.graph-governance-tabs button.active { color: #fff; background: #286b5c; box-shadow: 0 3px 9px rgba(40, 107, 92, .18); }
.graph-governance-tabs button.active small { color: rgba(255, 255, 255, .78); }
.graph-governance-tabs button.is-locked { color: #9aa2ab; cursor: not-allowed; }
.graph-governance-tabs button.is-locked small { color: #9aa2ab; }
.graph-build-overview-panel { margin-top: 12px; }
.graph-build-overview-panel .button.text[disabled] { color: #8a939e; cursor: not-allowed; }

/* Keep the four workbench tabs inside the content column on compact screens.
   The desktop minimum width is useful for the full console, but it made the
   tab strip widen the whole page once the sidebar left less than 600px. */
@media (max-width: 900px) {
  .graph-governance-tabs { min-width: 0; overflow-x: auto; }
  .graph-governance-tabs button {
    flex: 0 0 118px;
    min-width: 118px;
    padding: 0 8px;
    font-size: .64rem;
  }
}

.graph-governance-panel {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid #dfe4ea;
  border-radius: 8px;
  background: #fff;
}
.graph-governance-panel > header { padding-bottom: 14px; border-bottom: 1px solid #e6e9ed; }
.graph-governance-panel h2 { margin: 0 0 4px; font-size: 1rem; }
.graph-governance-panel header p { margin: 0; color: #747e89; font-size: .68rem; }
.graph-governance-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.graph-governance-card-grid article,
.graph-publishing-grid article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 164px;
  padding: 16px;
  border: 1px solid #e0e4e9;
  border-radius: 8px;
  background: #fafbfc;
}
.graph-governance-card-grid strong { font-size: .76rem; }
.graph-governance-card-grid p,
.graph-publishing-grid p { margin: 7px 0 0; color: #747e89; font-size: .64rem; line-height: 1.65; }
.graph-governance-card-grid .button,
.graph-publishing-grid .button { align-self: flex-start; }

.graph-publishing-status { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.graph-publishing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.graph-publishing-grid article { min-height: 150px; background: #fff; }
.graph-publishing-grid h2 { margin: 0; font-size: .82rem; }
.graph-qa-validation { margin-top: 18px; padding: 18px; border: 1px solid #dfe4ea; border-radius: 8px; background: #fff; }
.graph-qa-validation > header { padding-bottom: 14px; border-bottom: 1px solid #e6e9ed; }
.graph-qa-validation h2 { margin: 0 0 4px; font-size: 1rem; }
.graph-qa-validation header p { margin: 0; color: #5f6873; font-size: .7rem; }
.graph-qa-validation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.graph-qa-validation article { padding: 16px; border: 1px solid #e0e4e9; border-radius: 8px; background: #fafbfc; }
.graph-qa-validation article span,
.graph-qa-validation article strong { display: block; }
.graph-qa-validation article span { color: #886ab5; font-size: .62rem; font-weight: 700; }
.graph-qa-validation article strong { margin-top: 6px; font-size: .76rem; }
.graph-qa-validation article p { margin: 7px 0 0; color: #6f7782; font-size: .65rem; line-height: 1.65; }
.graph-qa-validation > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.graph-qa-validation .graph-readonly-note { margin:0; white-space:nowrap; }
.graph-qa-question { color:#26313d !important; font-size:.78rem !important; line-height:1.55 !important; }
.graph-qa-comparison-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch; }
.graph-qa-card { display:flex; flex-direction:column; gap:12px; }
.graph-qa-card > header { padding-bottom:10px; border-bottom:1px solid #e6e9ed; }
.graph-qa-card > header strong { margin-top:5px; }
.graph-qa-card section { margin:0; }
.graph-qa-card h3 { margin:0 0 4px; font-size:.64rem; color:#59636f; }
.graph-qa-card section p { margin:0; color:#59636f; }
.graph-qa-evidence ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.graph-qa-evidence li { display:grid; gap:2px; padding:7px 8px; border:1px solid #e5e8ec; border-radius:6px; background:#fff; }
.graph-qa-evidence li strong { margin:0; font-size:.64rem; }
.graph-qa-evidence li span { color:#78818b; font-size:.61rem; }
.graph-qa-path { margin-top:auto !important; padding-top:10px; border-top:1px solid #e6e9ed; }
.graph-qa-path p { color:#68519a !important; font-size:.63rem !important; }
.graph-qa-footnote { margin-top:14px; }
.graph-qa-input-label { display:block; margin-top:8px; }
.graph-qa-input-label input { width:min(680px,100%); padding:10px 12px; border:1px solid #dfe4ea; border-radius:6px; font-size:.75rem; }
.graph-qa-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.graph-qa-actions .button { font-size:.65rem; }
.graph-qa-evidence-link { display:grid; gap:2px; width:100%; padding:7px 8px; border:0; text-align:left; border-radius:6px; background:#fff; cursor:pointer; }
.graph-qa-evidence-link:hover { background:#f1eff8; }
.graph-qa-empty { grid-column:1 / -1; padding:24px; border:1px dashed #ccd3dc; border-radius:8px; color:#68727d; }
.graph-qa-empty strong { display:block; color:#3c4651; }
.graph-qa-drawer { position:fixed; right:20px; bottom:20px; z-index:20; width:min(420px,calc(100vw - 40px)); padding:16px; border:1px solid #dfe4ea; border-radius:8px; background:#fff; box-shadow:0 12px 34px rgba(28,38,50,.16); }
.graph-qa-drawer header { display:flex; justify-content:space-between; align-items:center; }
.graph-qa-drawer h2 { margin:0; font-size:.85rem; }
.graph-qa-drawer blockquote { margin:12px 0; padding:10px 12px; border-left:3px solid #886ab5; background:#fafbfc; color:#4e5965; font-size:.72rem; line-height:1.6; }
@media (max-width: 900px) {
  .graph-qa-validation > header { display:block; }
  .graph-qa-validation .graph-readonly-note { display:inline-block; margin-top:8px; white-space:normal; }
  .graph-qa-comparison-grid { grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .graph-canvas *, .graph-canvas canvas { transition: none !important; animation: none !important; }
}
.graph-version-page .entity-attribute-list { margin: 0; padding: 12px 18px 16px; }
.graph-version-page .entity-attribute-list > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 12px; }
.graph-version-page .entity-attribute-list dt { color: #858b95; }
.graph-version-page .entity-attribute-list dd { margin: 0; color: #363c46; overflow-wrap: anywhere; }
.graph-version-page .entity-history-list li { grid-template-columns: minmax(0, 1fr) 210px; }
.graph-version-page .entity-governance-card > p { padding: 0 18px 16px; font-size: 12px; }
@media (max-width: 800px) { .graph-version-page .entity-history-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (max-width: 1000px) {
  .graph-workbench-page .graph-stage { grid-template-columns: minmax(0, 1fr); }
  .graph-workbench-page .graph-side-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding: 12px 15px; }
  .graph-workbench-page .graph-side-panel h3 { margin: 0; }
  .graph-workbench-page .graph-side-panel p { margin: 0; }
  .graph-workbench-page .graph-side-panel hr { display: none; }
  .graph-workbench-page .graph-side-panel .button { width: auto; margin: 0; }
  .graph-workbench-page .graph-side-panel small { width: 100%; margin-top: 0; }
}
.graph-ai-quality-panel{margin:16px 0;border:1px solid #dfe5ea;background:#fbfcfd}.graph-ai-quality-panel>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.graph-ai-quality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.graph-ai-quality-grid>div{padding:12px;border:1px solid #e5e9ee;border-radius:8px;background:#fff}.graph-ai-quality-grid strong{display:block;font-size:12px;color:#55606d}.graph-ai-quality-grid p{margin:5px 0 0;font-size:12px;color:#68727e;line-height:1.5}.graph-ai-quality-panel .panel-footer{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #e5e9ee}.graph-ai-quality-panel .panel-footer small{color:#7b8490}@media(max-width:760px){.graph-ai-quality-grid{grid-template-columns:1fr}.graph-ai-quality-panel>header{flex-direction:column}}
.graph-topic-version-picker{margin:16px 0;background:#fbfcfd}.graph-topic-version-picker>header{border-bottom:1px solid #e5e9ee;padding-bottom:10px}.graph-topic-version-picker label{display:grid;gap:6px;max-width:520px;margin-top:14px}.graph-topic-version-picker label span{font-size:12px;font-weight:600;color:#4f5b68}.graph-topic-version-picker select{height:38px;border:1px solid #d6dde5;border-radius:6px;padding:0 10px;background:#fff;color:#28323d}.graph-topic-version-picker .graph-readonly-note{margin-top:10px}
.graph-build-mode-help {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 18px 18px;
  padding: 14px 16px;
  border: 1px solid var(--line, #d9e2ec);
  border-radius: 10px;
  background: var(--surface-muted, #f7f9fc);
}
.graph-build-mode-help div { display: grid; gap: 4px; }
.graph-build-mode-help strong { color: var(--ink, #172033); }
.graph-build-mode-help span, .graph-build-mode-help p { margin: 0; color: var(--muted, #667085); font-size: 13px; line-height: 1.55; }
.graph-build-mode-help p { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--line, #d9e2ec); }
@media (max-width: 760px) { .graph-build-mode-help { grid-template-columns: 1fr; } .graph-build-mode-help p { grid-column: auto; } }