.atlas-graph-host { min-width: 0; max-width: 100%; min-height: 0; height: 100%; }
.atlas-graph { position: relative; height: 100%; min-height: 480px; border-radius: 10px; overflow: hidden; background:
  radial-gradient(circle at 50% 45%, rgba(72, 98, 128, .28), transparent 46%),
  radial-gradient(rgba(214, 205, 188, .09) 1px, transparent 1px),
  #1a2430; background-size: auto, 22px 22px, auto; }
.atlas-graph-svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; user-select: none; }
.atlas-graph-svg text { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.atlas-graph-svg:active { cursor: grabbing; }
.atlas-graph { display: flex; flex-direction: column; }
.atlas-graph-canvas { position: relative; flex: 1; min-height: 0; min-width: 0; }
.atlas-graph-controls { display: none; }
.atlas-edge { fill: none; stroke: #8e99a6; stroke-width: 1.25; opacity: .8; vector-effect: non-scaling-stroke; }
.atlas-edge.hot { stroke: #e7d7a8; stroke-width: 1.8; opacity: 1; }
.atlas-edge-label rect { fill: #243140; stroke: #3c4d60; }
.atlas-edge-label text { fill: #d5dbe3; }
.atlas-edge-label.hot rect { fill: #3a3426; stroke: #b9a36a; }
.atlas-edge-label.hot text { fill: #f3e6c2; }
.atlas-node { cursor: pointer; }
.atlas-node circle { stroke: #f7f4ee; stroke-width: 2; vector-effect: non-scaling-stroke; }
.atlas-node.selected circle { stroke: #f0d48a; stroke-width: 3.5; }
.atlas-node.more circle { fill: #314050; stroke: #c5ced8; }
.atlas-node-label { fill: #f3efe6; paint-order: stroke; stroke: rgba(18, 26, 34, .72); }
.atlas-graph-status { position: absolute; left: 12px; top: 10px; max-width: calc(100% - 24px); color: #d9e0e8; font-size: 11px; line-height: 1.5; pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.atlas-graph-legend { position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; pointer-events: none; }
.atlas-graph-legend span { display: inline-flex; align-items: center; gap: 5px; color: #c9d2dc; font-size: 10px; }
.atlas-graph-legend i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }

body.graph-view .stage-content { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
body.graph-view .atlas-graph-host, body.graph-view .atlas-graph { flex: 1; min-height: 0; height: 100%; }
body.mobile-layout.graph-view .stage { min-height: 0 !important; overflow: hidden !important; height: calc(100dvh - 196px); }
body.mobile-layout.graph-level.graph-view .stage { height: auto !important; min-height: calc(100dvh - 196px); overflow: visible !important; }
body.mobile-layout.graph-level.graph-view .stage-content { overflow: visible !important; height: auto !important; padding: 0 !important; }

.atlas-level { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 28px; background: #f7f4ee; color: #241c16; }
body.mobile-layout.graph-level .time-dock { position: static; }
.atlas-level-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 17px; line-height: 1.45; }
.atlas-level-trail button { border: 0; background: transparent; padding: 0; color: #8a3b32; font-size: 17px; line-height: 1.45; text-align: left; }
.atlas-level-trail span { color: #9a9086; }
.atlas-level h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 34px; line-height: 1.35; font-weight: 650; }
.atlas-level-caption { margin: -6px 0 0; color: #6d6258; font-size: 16px; line-height: 1.4; }
.atlas-level-blurb { margin: 0; font-size: 18px; line-height: 1.55; }
.atlas-level-shape { align-self: flex-start; border: 1px solid #d9cfc3; border-radius: 999px; background: #fffdfa; color: #241c16; padding: 8px 14px; font-size: 16px; }
.atlas-level-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.atlas-level-actions button { min-height: 44px; }
.atlas-level-read { border: 1px solid #8a3b32; border-radius: 999px; background: #8a3b32; color: #fffdfa; padding: 8px 14px; font-size: 16px; }
.atlas-level-section h2 { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; color: #6d6258; font-size: 15px; font-weight: 650; letter-spacing: .04em; }
.atlas-level-section h2 span { color: #9a9086; font-weight: 500; }
.atlas-level-rows { display: flex; flex-direction: column; gap: 10px; }
.atlas-level-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; border: 1px solid #e4d9cc; border-radius: 12px; background: #fffdfa; padding: 14px 14px 15px; text-align: left; }
.atlas-level-rel { color: #8a3b32; font-size: 15px; line-height: 1.35; }
.atlas-level-row b { font-size: 22px; line-height: 1.4; font-weight: 650; }
.atlas-level-row small { color: #4e453d; font-size: 17px; line-height: 1.5; }
.atlas-level-empty { margin: 0; color: #6d6258; font-size: 18px; line-height: 1.5; }
body.graph-level .shenlun-space[data-sl-view='graph'] .atlas-graph-host { min-height: 0; height: auto; }
body.mobile-layout.graph-view .stage-content { overflow: hidden !important; height: 100% !important; padding: 0 !important; }
body.mobile-layout .atlas-graph, body.mobile-layout .atlas-graph-svg { max-width: none; }
body.space-law .app-shell { grid-template-rows: 68px 48px minmax(0, 1fr); }
body.space-law.mobile-layout .app-shell { grid-template-rows: auto auto auto; }

.shenlun-space[data-sl-view='graph'] .stage-content { display: flex; padding: 0; overflow: hidden; }
.shenlun-space[data-sl-view='graph'] .atlas-graph-host { flex: 1; min-height: 520px; height: calc(100dvh - 230px); }
.shenlun-space[data-sl-view='graph'] .stage-head { padding-left: 16px; padding-right: 16px; }
@media (max-width: 760px) {
  .shenlun-space[data-sl-view='graph'] .atlas-graph-host { height: calc(100dvh - 210px); min-height: 420px; }
  .atlas-graph { min-height: 420px; border-radius: 0; }
}

/* Note: 手机图谱工具栏与画布各占一行 — 见 .agents/notes/implemented/feature/2026-09-23-neo4j-style-graph.md */
@media (max-width: 900px) {
  .atlas-graph-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; flex: none; background: #243140; }
  .atlas-graph-controls button { min-width: 0; min-height: 44px; border: 1px solid #8190a1; border-radius: 8px; background: #314050; color: #fff; padding: 6px 2px; font-size: 14px; line-height: 1.4; }
  .atlas-graph-controls button:disabled { opacity: .5; }
  .atlas-graph-controls button:focus-visible { outline: 2px solid #f0d48a; outline-offset: 1px; }
  body.graph-view .stage-head { height: auto; min-width: 0; flex: none; flex-direction: column; align-items: stretch; gap: 12px; }
  body.graph-view .stage-head > div { min-width: 0; max-width: 100%; }
  body.graph-view .stage-head h1 { overflow-wrap: anywhere; }
  body.graph-view .stage-tools { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.graph-view .stage-tools button { min-width: 0; min-height: 44px; padding: 10px 8px; font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  body.graph-view .stage-tools > span { grid-column: 1 / -1; justify-self: start; font-size: 12px; }
  body.mobile-layout.graph-view .stage { height: auto; overflow: visible !important; }
  body.mobile-layout.graph-view .stage-content { height: auto !important; flex: none; }
  body.graph-view:not(.graph-level) .atlas-graph-host,
  body.graph-view:not(.graph-level) .atlas-graph { height: clamp(320px, calc(100dvh - 340px), 680px); min-height: 320px; }
  body.mobile-layout.graph-view .time-dock { position: static; }
}