/* ============================================================
   知识图谱（每章 + 六章总览）— 高科技风 (sci-fi / neon)
   - 深色科技面板 + 点阵网格背景
   - 霓虹辉光节点 / 流动的连线 / 核心脉冲环
   - 明确 CJK 字体栈 + dominant-baseline 垂直居中，解决字体显示问题
   - 不随站点浅/深主题切换，始终保持科技面板外观
   ============================================================ */
.kg-mount { width: 100%; }

.kg-fig {
  position: relative;
  border: 1px solid rgba(86, 156, 224, .38);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(40, 120, 200, .12), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(232, 112, 58, .12), transparent 55%),
    linear-gradient(160deg, #0b1422 0%, #0a1018 100%);
  box-shadow: 0 0 0 1px rgba(86, 156, 224, .08), 0 18px 50px -28px rgba(0, 0, 0, .9) inset;
}

.kg-canvas {
  height: 480px;
  position: relative;
  /* 点阵网格背景（高科技感） */
  background-image: radial-gradient(circle, rgba(120, 180, 255, .15) 1px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: center;
}

.kg-svg {
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

/* ---------------- 边（流动霓虹线） ---------------- */
.kg-edge {
  fill: none;
  stroke: var(--c, #8595A6);
  stroke-width: 1.8;
  opacity: .78;
  filter: drop-shadow(0 0 3px var(--c, #8595A6));
  stroke-dasharray: 6 5;
  animation: kgflow 1.1s linear infinite;
  transition: stroke-width .15s, opacity .15s;
}
.kg-edge:hover, .kg-edge.kg-focus {
  stroke-width: 3.2; opacity: 1;
  filter: drop-shadow(0 0 7px var(--c, #8595A6));
}
@keyframes kgflow { to { stroke-dashoffset: -22; } }

/* ---------------- 节点 ---------------- */
.kg-node { cursor: pointer; --c: #4E9BE0; pointer-events: auto; }
.kg-node text {
  fill: #EAF2FF;
  /* 明确 CJK 字体栈，避免字形缺失 / 回退异常 */
  font-family: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  dominant-baseline: middle;            /* 垂直居中，修正字体错位 */
  paint-order: stroke;
  stroke: rgba(6, 14, 24, .55);          /* 暗色描边光晕，保证任意底色可读 */
  stroke-width: 2.4px;
  stroke-linejoin: round;
}
.kg-node .kg-nlabel, .kg-node .kg-clabel { font-size: 13px; letter-spacing: .02em; }
.kg-node .kg-num { font-size: 15px; font-weight: 700; fill: #fff; stroke: none; }
.kg-node .kg-ctitle { font-size: 11.5px; font-weight: 700; fill: #DCE8FF; stroke: none; }

/* 形状辉光 */
.kg-node circle, .kg-node rect {
  stroke: var(--c);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px var(--c));
  transition: transform .15s var(--ease), filter .15s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}
/* 概念胶囊：半透明科技玻璃质感 */
.kg-node:not(.kg-chapter):not(.kg-core) rect {
  fill: color-mix(in srgb, var(--c) 20%, #0b1422);
}
.kg-node.kg-chapter circle { stroke: var(--c); stroke-width: 2; }
.kg-node.kg-core circle { stroke: #fff; stroke-width: 1.5; }

.kg-node:hover circle, .kg-node:hover rect {
  filter: drop-shadow(0 0 11px var(--c)) brightness(1.12);
}
.kg-node.kg-dragging circle, .kg-node.kg-dragging rect {
  filter: drop-shadow(0 0 13px var(--c));
}

/* 核心节点脉冲环（雷达扫描感） */
.kg-core-ring {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: kgpulse 2.6s ease-out infinite;
}
@keyframes kgpulse {
  0%   { opacity: .75; transform: scale(.92); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* 悬停聚焦：未关联节点变暗 */
.kg-svg.kg-hasfocus .kg-node.kg-dim { opacity: .24; transition: opacity .15s; }
.kg-svg.kg-hasfocus .kg-edge:not(.kg-focus) { opacity: .12; animation: none; }

/* ---------------- 连线“链接标签”：特效小圆环 ---------------- */
.kg-elabel { pointer-events: auto; cursor: pointer; }
.kg-link-hit { fill: rgba(0,0,0,0); pointer-events: all; }
.kg-link-ring {
  fill: none; stroke: var(--c, #8595A6); stroke-width: 1.6;
  filter: drop-shadow(0 0 4px var(--c, #8595A6));
  transition: transform .16s ease, stroke-width .16s ease;
  transform-box: fill-box; transform-origin: center;
}
.kg-link-pulse {
  fill: none; stroke: var(--c, #8595A6); stroke-width: 1.3;
  transform-box: fill-box; transform-origin: center;
  animation: kglinkpulse 2.4s ease-out infinite;
}
.kg-link-core {
  fill: var(--c, #8595A6);
  filter: drop-shadow(0 0 4px var(--c, #8595A6));
  transition: transform .16s ease; transform-box: fill-box; transform-origin: center;
}
@keyframes kglinkpulse {
  0%   { opacity: .7; transform: scale(.78); }
  70%  { opacity: 0; transform: scale(1.95); }
  100% { opacity: 0; transform: scale(1.95); }
}
/* 关系说明文字（无矩形框；环本身就是“可点链接”的视觉标签，文字仅作说明） */
.kg-link-text {
  fill: #E6F0FF; font-size: 11.5px; font-weight: 600;
  dominant-baseline: middle;
  font-family: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC", system-ui, sans-serif;
  paint-order: stroke; stroke: rgba(6, 14, 24, .82); stroke-width: 2.6px; stroke-linejoin: round;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
/* 每章概念图常显；六章总览图悬停/聚焦时显示 */
.kg-svg[data-labels="always"] .kg-link-text { opacity: 1; }
.kg-elabel:hover .kg-link-ring, .kg-elabel.kg-focus .kg-link-ring { transform: scale(1.2); stroke-width: 2.2; }
.kg-elabel:hover .kg-link-core, .kg-elabel.kg-focus .kg-link-core { transform: scale(1.25); }
.kg-elabel:hover .kg-link-text, .kg-elabel.kg-focus .kg-link-text { opacity: 1; }
.kg-labels-off .kg-elabel { opacity: 0 !important; pointer-events: none; }

/* 连线命中区（透明加粗，便于点击查看关系说明） */
.kg-edge-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; pointer-events: stroke; }
.kg-edge-hit:hover + .kg-edge { stroke-width: 3.2; opacity: 1; }

/* 关系标签显隐开关（连线上的说明框可一键隐藏） */
.kg-toggle {
  cursor: pointer; font-family: inherit;
  background: rgba(20, 34, 52, .72);
  border: 1px solid rgba(120, 180, 255, .35);
  color: #BCD0EC; border-radius: 8px; padding: 3px 10px; font-size: 12px;
}
.kg-toggle:hover { border-color: rgba(120, 180, 255, .75); color: #EAF2FF; }

/* 关系详情浮卡（点击连线或说明框弹出） */
.kg-info {
  position: absolute; top: 12px; right: 12px; max-width: 268px;
  background: linear-gradient(180deg, rgba(16, 28, 44, .97), rgba(10, 16, 24, .98));
  border: 1px solid rgba(120, 180, 255, .45); border-radius: 12px;
  padding: 13px 15px 14px; color: #DCE8FF; z-index: 6;
  box-shadow: 0 0 18px rgba(40, 120, 200, .4), 0 12px 30px -14px #000;
  font-size: 12.5px; line-height: 1.55;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kg-info.show { opacity: 1; transform: none; pointer-events: auto; }
.kg-info-x {
  position: absolute; top: 6px; right: 9px; background: none; border: none;
  color: #8FA6C4; font-size: 17px; line-height: 1; cursor: pointer; padding: 2px;
}
.kg-info-x:hover { color: #fff; }
.kg-info-row { display: flex; align-items: center; gap: 7px; font-weight: 700; margin: 2px 18px 9px 0; }
.kg-info-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.kg-info-flow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.kg-info-flow b { font-weight: 600; color: #EAF2FF; }
.kg-info-flow span { color: #6C86C4; font-weight: 700; }
.kg-info-desc { color: #AFC4E0; }

/* ---------------- 图例（科技芯片） ---------------- */
.kg-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid rgba(86, 156, 224, .28);
  background: linear-gradient(180deg, rgba(14, 26, 40, .55), rgba(10, 16, 24, .92));
  font-size: 12px; color: #AFC4E0;
}
.kg-leg { display: inline-flex; align-items: center; gap: 7px; color: #BCD0EC; }
.kg-leg i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--lc, #4E9BE0);
  box-shadow: 0 0 7px var(--lc, #4E9BE0);
}
.kg-leg .kg-ring {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.6px solid #4E9BE0;
  box-shadow: 0 0 7px #4E9BE0, inset 0 0 4px #4E9BE0;
  background: rgba(78, 155, 224, .28); display: inline-block;
}
.kg-leg.kg-hint { margin-left: auto; color: #7E93B0; font-style: italic; }

/* 章节页知识图谱区块标题间距 */
.doc section#kg { margin-top: 3.1em; }
.kg-note {
  margin: 12px 0 0; font-size: 13px; color: var(--ink-3, #889);
  line-height: 1.7;
}

@media (max-width: 680px) {
  .kg-canvas { height: 380px; }
  .kg-leg.kg-hint { width: 100%; margin-left: 0; }
}