.graph-page { background: linear-gradient(#fff 0, #f5faff 52%, #eaf5ff 100%); }
.graph-hero { position: relative; min-height: 204px; overflow: hidden; border-bottom: 1px solid #d6eafa; background: linear-gradient(90deg, #a9d8fa, #f4fbff 50%, #a9d8fa); }
.graph-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(88,178,240,.02), rgba(255,255,255,.88) 29%, rgba(255,255,255,.88) 71%, rgba(88,178,240,.02)); }
.graph-hero-content { position: relative; z-index: 3; padding-top: 7px; text-align: center; }
.graph-kicker { display: inline-flex; align-items: center; height: 21px; padding: 0 10px; border: 1px solid #add3f0; border-radius: 12px; color: #0c68b4; background: rgba(255,255,255,.72); font-size: 11px; letter-spacing: 1px; }
.graph-hero h1 { margin: 1px 0 1px; color: #0b4d96; font: 700 32px "STKaiti", "KaiTi", serif; letter-spacing: 6px; text-shadow: 0 2px 0 #fff; }
.graph-hero-content > p { margin: 0 0 2px; color: #0a559e; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.graph-hero-content > small { display: block; max-width: 820px; margin: 0 auto 5px; color: #5d7c9f; font-size: 10px; line-height: 1.4; }
.graph-search-panel { width: min(810px, 100%); margin: 0 auto; padding: 6px 27px 7px; border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: 0 4px 14px rgba(38,106,170,.16); text-align: left; }
.graph-tabs { display: flex; align-items: center; gap: 2px; height: 25px; }
.graph-tabs button { min-width: 58px; height: 22px; padding: 0 13px; border-radius: 12px; color: #587491; background: transparent; font-size: 12px; }
.graph-tabs button:hover { color: #0873d2; }.graph-tabs button.selected { color: #fff; background: #0d64bc; font-weight: 700; }
.graph-search-form { display: flex; height: 34px; border: 1px solid #cbd8e8; border-radius: 4px; overflow: hidden; background: #fff; }
.graph-search-form input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 14px; color: #335f8e; font-size: 13px; }.graph-search-form input:focus { box-shadow: inset 0 0 0 2px rgba(26,125,220,.12); }
.graph-search-form button[type="submit"] { width: 88px; background: #0c64bc; color: #fff; font-size: 13px; }.graph-search-form button[type="submit"]:hover { background: #084d98; }
.graph-advanced { width: 86px; color: #0c63bb; background: #fff; font-size: 12px; }
.graph-hot-searches { display: flex; align-items: center; gap: 18px; padding-top: 5px; overflow: auto; color: #7290af; font-size: 11px; white-space: nowrap; }.graph-hot-searches strong { color: #315a85; font-size: 12px; }.graph-hot-searches button { padding: 0; color: #5e83aa; background: transparent; font-size: 11px; }.graph-hot-searches button:hover { color: #0873d2; }
.graph-stats { margin-top: -1px; }.graph-breadcrumb { display: flex; align-items: center; gap: 8px; height: 32px; color: #7d98b5; font-size: 11px; }.graph-breadcrumb strong { color: #35618f; }.graph-breadcrumb a:hover { color: var(--bright); }
.graph-layout { display: grid; grid-template-columns: 220px minmax(0,1fr) 250px; gap: 11px; align-items: start; padding-bottom: 14px; }
.graph-filter-panel, .graph-canvas-card, .graph-info-card, .graph-bottom-card, .graph-detail-card, .graph-relation-card, .graph-hot-card { min-width: 0; border: 1px solid #dceaf8; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.graph-filter-panel { overflow: hidden; }.graph-panel-heading, .graph-workspace-heading, .graph-section-heading, .graph-side-heading { display: flex; align-items: center; justify-content: space-between; min-width: 0; border-bottom: 1px solid #d9e9f8; }
.graph-panel-heading { min-height: 41px; padding: 0 12px; }.graph-panel-heading > div, .graph-panel-heading { gap: 8px; }.graph-panel-heading h2, .graph-workspace-heading h2, .graph-section-heading h2, .graph-side-heading h2 { margin: 0; color: #0b55a2; font-size: 15px; }.graph-panel-heading > button { margin-left: auto; padding: 0; color: #1474cc; background: transparent; font-size: 10px; }
.graph-heading-icon { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; border-radius: 4px; color: #fff; background: #1477dc; font-size: 13px; line-height: 1; }
.graph-filter-block { padding: 11px 13px 12px; border-bottom: 1px solid #edf3f9; }.graph-filter-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #1164b9; }.graph-filter-title strong { font-size: 13px; }.graph-filter-title span { color: #5e9bd4; font-size: 17px; }.graph-filter-options { display: grid; gap: 8px; }.graph-filter-options label { display: flex; align-items: center; gap: 6px; min-width: 0; color: #607e9d; font-size: 11px; cursor: pointer; }.graph-filter-options label:hover { color: #0b6dc7; }.graph-filter-options input { width: 14px; height: 14px; margin: 0; accent-color: #1477dc; }.graph-filter-options label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-filter-tip { display: flex; gap: 7px; border-bottom: 0; color: #6e88a4; background: #f7fbff; }.graph-filter-tip > span { display: grid; flex: 0 0 17px; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #77aee0; font: 700 11px Georgia, serif; }.graph-filter-tip p { margin: 0; font-size: 10px; line-height: 1.5; }.graph-filter-actions { padding: 10px 13px 12px; }.graph-filter-actions button { width: 100%; height: 28px; border-radius: 5px; color: #fff; background: linear-gradient(135deg,#2b9bf4,#0c69c8); font-size: 11px; }.graph-filter-actions button:hover { transform: translateY(-1px); }
.graph-center-column { min-width: 0; }.graph-canvas-card { overflow: hidden; }.graph-workspace-heading { min-height: 48px; padding: 0 12px; }.graph-workspace-heading > div:first-child { display: flex; align-items: center; min-width: 0; gap: 8px; }.graph-workspace-heading h2 { font-size: 16px; }.graph-workspace-heading p { margin: 3px 0 0; color: #7d98b4; font-size: 10px; }.graph-workspace-actions { display: flex; gap: 5px; }.graph-workspace-actions button { height: 26px; padding: 0 9px; border: 1px solid #9bc8ef; border-radius: 4px; color: #1475d0; background: #fff; font-size: 10px; }.graph-workspace-actions button.primary { border-color: #1677d6; color: #fff; background: linear-gradient(135deg,#2a96f2,#0f69c7); }
.graph-view-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid #dceaf7; }.graph-view-tabs button { position: relative; height: 29px; padding: 0 15px; color: #7691ac; background: transparent; font-size: 11px; }.graph-view-tabs button::after { content: ""; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: transparent; }.graph-view-tabs button.active { color: #0967bb; font-weight: 700; }.graph-view-tabs button.active::after { background: #1477dc; }
.graph-canvas-shell { position: relative; min-height: 415px; overflow: hidden; background: radial-gradient(circle at 50% 47%, #fff 0, #f7fbff 47%, #eef7ff 100%); }.graph-canvas-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0 49%, rgba(24,126,213,.035) 50%, transparent 51%), linear-gradient(30deg, transparent 0 49%, rgba(24,126,213,.03) 50%, transparent 51%); background-size: 130px 130px; }
#knowledgeGraph { position: relative; z-index: 1; display: block; width: 100%; height: 415px; transform-origin: center; transition: transform .22s ease; }.graph-grid circle, .graph-grid path { fill: none; stroke: #cfe5f7; stroke-width: 1; stroke-dasharray: 3 7; opacity: .66; }.graph-grid path { stroke-dasharray: 2 9; opacity: .4; }.graph-edges line { stroke: #4b99e2; stroke-width: 1.4; opacity: .7; transition: opacity .2s, stroke .2s, stroke-width .2s; }.graph-edges line:nth-child(2n) { stroke: #f0a044; }.graph-edges line.graph-edge-active { stroke: #0c6ac8; stroke-width: 2.6; opacity: 1; }.graph-edges line.graph-hidden { opacity: .06; }
.graph-edge-labels text { fill: #5e87ac; font-size: 11px; text-anchor: middle; paint-order: stroke; stroke: #f6fbff; stroke-width: 4px; stroke-linejoin: round; }.graph-edge-labels text:nth-child(2n) { fill: #d08a31; }
.graph-node { cursor: pointer; outline: none; transition: opacity .2s; }.graph-node circle:first-child { stroke: rgba(255,255,255,.92); stroke-width: 2.5; filter: drop-shadow(0 3px 3px rgba(39,105,173,.18)); transition: stroke .2s, stroke-width .2s, filter .2s; }.graph-node text { fill: #fff; font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(3,61,125,.23); stroke-width: 2px; }.graph-node .node-subtitle { font-size: 10px; font-weight: 400; opacity: .88; }.graph-node.small text { font-size: 11px; }.graph-node-core circle:first-child { fill: url(#graphCoreGradient); }.graph-node-core circle:first-child { fill: #0d71d8; }.graph-node-core .graph-node-ring { fill: none; stroke: #75c3ff; stroke-width: 3; opacity: .82; filter: url(#graphGlow); }.graph-node.node-blue circle:first-child { fill: #147bdc; }.graph-node.node-green circle:first-child { fill: #15a78c; }.graph-node.node-orange circle:first-child { fill: #f1932f; }.graph-node.node-purple circle:first-child { fill: #8051d3; }.graph-node.node-mint circle:first-child { fill: #3bb889; }.graph-node.node-red circle:first-child { fill: #e64c5b; }.graph-node:hover circle:first-child, .graph-node.selected circle:first-child, .graph-node:focus circle:first-child { stroke: #fff; stroke-width: 5; filter: drop-shadow(0 0 9px rgba(28,126,226,.55)); }.graph-node.graph-muted { opacity: .1; pointer-events: none; }.graph-node.graph-match circle:first-child { stroke: #ffbd4a; stroke-width: 5; filter: drop-shadow(0 0 9px rgba(246,153,38,.7)); }
.graph-zoom-controls { position: absolute; z-index: 3; top: 11px; right: 11px; display: grid; gap: 4px; }.graph-zoom-controls button { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #c9e0f3; border-radius: 4px; color: #2e78bd; background: rgba(255,255,255,.92); font-size: 16px; }.graph-zoom-controls button:hover { border-color: #7db5e9; color: #0b64bb; }.graph-canvas-legend { position: absolute; z-index: 3; right: 12px; bottom: 9px; left: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 15px; color: #6d88a5; font-size: 10px; pointer-events: none; }.graph-canvas-legend span { display: inline-flex; align-items: center; gap: 4px; }.graph-canvas-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #147bdc; }.graph-canvas-legend .legend-core { background: #0d71d8; }.graph-canvas-legend .legend-entity { background: #15a78c; }.graph-canvas-legend .legend-topic { background: #f1932f; }.graph-canvas-legend .legend-relation { width: 17px; height: 2px; border-radius: 0; background: #4b99e2; }
.graph-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }.graph-info-card { overflow: hidden; }.graph-section-heading { min-height: 35px; padding: 0 10px; }.graph-section-heading > div { display: flex; align-items: center; gap: 7px; min-width: 0; }.graph-section-heading > div > span { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; border-radius: 4px; background: #1477dc; font-size: 12px; }.graph-section-heading h2 { font-size: 14px; }.graph-section-heading > button { margin-left: auto; padding: 0; color: #0d71cc; background: transparent; font-size: 10px; white-space: nowrap; }.rank-list { display: grid; gap: 0; margin: 0; padding: 4px 9px 5px; list-style: none; }.rank-list li { display: grid; grid-template-columns: 19px 56px minmax(0,1fr); align-items: center; gap: 5px; min-height: 24px; border-bottom: 1px dashed #e1edf7; color: #6c87a3; font-size: 9px; }.rank-list li:last-child { border-bottom: 0; }.rank-list li > b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 3px; color: #fff; background: #4c91d9; font-size: 9px; }.rank-list li:nth-child(1) > b { background: #f15b52; }.rank-list li:nth-child(2) > b { background: #f39b2b; }.rank-list li:nth-child(3) > b { background: #e7a743; }.rank-list strong { overflow: hidden; color: #24679e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.rank-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.application-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; padding: 7px; list-style: none; }.application-list button { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; column-gap: 6px; width: 100%; min-height: 42px; padding: 5px; border: 1px solid #e5eff8; border-radius: 5px; background: #fff; text-align: left; }.application-list button:hover { border-color: #a3cff1; background: #f5fbff; }.application-list button > span { grid-row: span 2; color: #0f75d4; font-size: 23px; text-align: center; }.application-list strong { overflow: hidden; color: #0c5eac; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.application-list small { overflow: hidden; color: #8198ae; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.graph-bottom-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin-top: 10px; }.graph-bottom-card { overflow: hidden; }.graph-dynamic-list { display: grid; gap: 0; margin: 0; padding: 5px 10px 7px; list-style: none; }.graph-dynamic-list li { display: grid; grid-template-columns: 12px minmax(0,1fr) 72px; align-items: center; gap: 6px; min-height: 24px; border-bottom: 1px dashed #e1edf7; color: #5e7b9a; font-size: 10px; }.graph-dynamic-list li:last-child { border-bottom: 0; }.graph-dynamic-list i { width: 7px; height: 7px; border-radius: 50%; background: #348fdc; }.graph-dynamic-list i.dynamic-orange { background: #f39a35; }.graph-dynamic-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.graph-dynamic-list time { color: #94a9be; font-size: 9px; text-align: right; }.graph-application-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 7px; }.graph-application-strip button { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; column-gap: 5px; min-height: 44px; padding: 5px; border: 1px solid #e5eff8; border-radius: 5px; background: #fff; text-align: left; }.graph-application-strip button:hover { border-color: #a3cff1; background: #f5fbff; }.graph-application-strip button > span { grid-row: span 2; color: #0f75d4; font-size: 24px; text-align: center; }.graph-application-strip strong { color: #0c5eac; font-size: 10px; }.graph-application-strip small { margin-top: 2px; overflow: hidden; color: #8198ae; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.graph-right-column { display: grid; gap: 10px; min-width: 0; }.graph-detail-card, .graph-relation-card, .graph-hot-card { overflow: hidden; }.graph-side-heading { min-height: 35px; padding: 0 10px; }.graph-side-heading > div { display: flex; align-items: center; gap: 7px; }.graph-side-heading > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: #fff; background: #1477dc; font-size: 12px; }.graph-side-heading h2 { font-size: 14px; }.graph-side-heading button { margin-left: auto; padding: 0; color: #0d71cc; background: transparent; font-size: 10px; white-space: nowrap; }.detail-node-title { display: flex; align-items: center; gap: 9px; margin: 10px 10px 8px; padding: 8px; border: 1px solid #dcecf8; border-radius: 6px; background: linear-gradient(135deg,#f7fbff,#fff); }.detail-node-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 25px; }.detail-node-icon.blue { background: linear-gradient(145deg,#3f9bf0,#1a67c4); }.detail-node-icon.orange { background: linear-gradient(145deg,#ffb64e,#ea7d22); }.detail-node-icon.green { background: linear-gradient(145deg,#47c89a,#16a578); }.detail-node-icon.purple { background: linear-gradient(145deg,#a466e0,#7442bf); }.detail-node-icon.red { background: linear-gradient(145deg,#f16a6d,#c93848); }.detail-node-title h3 { margin: 0; color: #0b5eac; font-size: 16px; }.detail-node-title p { margin: 4px 0 0; color: #839ab1; font-size: 10px; }.detail-list { display: grid; gap: 0; margin: 0 10px; padding: 0; }.detail-list div { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 5px; min-height: 23px; align-items: center; border-bottom: 1px solid #edf3f8; font-size: 10px; }.detail-list dt { color: #7a94ad; }.detail-list dd { overflow: hidden; margin: 0; color: #527697; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.detail-description { margin: 9px 10px 7px; color: #6f8aa5; font-size: 10px; line-height: 1.45; }.detail-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 10px; }.detail-tags button { padding: 4px 7px; border-radius: 3px; color: #347fbe; background: #edf7ff; font-size: 9px; }.detail-tags button:hover { background: #dcefff; }
.relation-stat-list { display: grid; gap: 8px; padding: 9px 10px 11px; }.relation-stat-list > div { display: grid; grid-template-columns: 48px minmax(0,1fr) 22px; align-items: center; gap: 6px; color: #6b83a0; font-size: 10px; }.relation-stat-list b { height: 8px; overflow: hidden; border-radius: 8px; background: #e9f1f8; }.relation-stat-list b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6fb8ef,#3787df); }.relation-stat-list strong { color: #6d82a0; font-size: 10px; font-weight: 400; text-align: right; }
.hot-entity-list { display: grid; gap: 0; margin: 0; padding: 4px 10px 7px; list-style: none; }.hot-entity-list li { display: grid; grid-template-columns: 19px minmax(0,1fr); align-items: center; gap: 6px; min-height: 30px; border-bottom: 1px solid #edf3f8; }.hot-entity-list li:last-child { border-bottom: 0; }.hot-entity-list li > b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 3px; color: #fff; background: #8aa9c2; font-size: 9px; }.hot-entity-list li:nth-child(1) > b { background: #ef5d54; }.hot-entity-list li:nth-child(2) > b { background: #e99f32; }.hot-entity-list li:nth-child(3) > b { background: #e4ab54; }.hot-entity-list button { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 5px; min-width: 0; padding: 0; color: #5e7b99; background: transparent; text-align: left; }.hot-entity-list button:hover { color: #0b68bf; }.entity-dot { width: 9px; height: 9px; border-radius: 50%; background: #147bdc; }.entity-dot.green { background: #15a78c; }.entity-dot.purple { background: #8051d3; }.entity-dot.red { background: #e64c5b; }.entity-dot.orange { background: #f1932f; }.hot-entity-list button span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.hot-entity-list em { color: #8da2b8; font-size: 9px; font-style: normal; white-space: nowrap; }
.graph-canvas-card.is-fullscreen { border-radius: 0; }.graph-canvas-card:fullscreen { width: 100vw; height: 100vh; overflow: auto; background: #fff; }.graph-canvas-card:fullscreen .graph-canvas-shell { min-height: calc(100vh - 130px); }.graph-canvas-card:fullscreen #knowledgeGraph { height: calc(100vh - 130px); }

@media (max-width: 1240px) {
  .graph-layout { grid-template-columns: 205px minmax(0,1fr) 230px; gap: 8px; }.graph-workspace-actions button { padding: 0 6px; }.graph-workspace-actions button { font-size: 9px; }.graph-canvas-shell, #knowledgeGraph { min-height: 390px; height: 390px; }.graph-info-grid { gap: 7px; }.graph-application-strip { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px) {
  .graph-layout { grid-template-columns: 205px minmax(0,1fr); }.graph-right-column { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); }.graph-info-grid { grid-template-columns: repeat(3,1fr); }.graph-bottom-grid { grid-template-columns: 1fr 1.2fr; }.graph-workspace-heading { align-items: flex-start; gap: 8px; padding: 8px 12px; }.graph-workspace-actions { flex-wrap: wrap; justify-content: flex-end; }.graph-canvas-shell, #knowledgeGraph { min-height: 370px; height: 370px; }
}
@media (max-width: 760px) {
  .graph-hero { min-height: 236px; }.graph-hero h1 { font-size: 29px; }.graph-hero-content > p { font-size: 14px; line-height: 1.35; }.graph-search-panel { padding: 7px 10px 9px; }.graph-stats { grid-template-columns: repeat(3,1fr); }.graph-layout { grid-template-columns: 1fr; }.graph-filter-panel { order: 2; }.graph-center-column { order: 1; }.graph-right-column { order: 3; grid-column: auto; grid-template-columns: 1fr; }.graph-workspace-heading { flex-direction: column; align-items: flex-start; }.graph-workspace-actions { width: 100%; }.graph-workspace-actions button { flex: 1; }.graph-view-tabs { overflow-x: auto; white-space: nowrap; }.graph-view-tabs button { flex: 0 0 auto; }.graph-canvas-shell, #knowledgeGraph { min-height: 360px; height: 360px; }.graph-info-grid, .graph-bottom-grid { grid-template-columns: 1fr; }.graph-application-strip { grid-template-columns: repeat(4,1fr); }.graph-hot-searches { gap: 13px; }
}
@media (max-width: 480px) {
  .graph-stats { grid-template-columns: repeat(2,1fr); }.graph-search-form .graph-advanced { display: none; }.graph-search-form button[type="submit"] { width: 72px; }.graph-kicker { font-size: 10px; }.graph-hero-content > small { padding: 0 7px; }.graph-application-strip { grid-template-columns: repeat(2,1fr); }.graph-canvas-shell, #knowledgeGraph { min-height: 330px; height: 330px; }.graph-canvas-legend { justify-content: flex-start; gap: 5px 9px; font-size: 9px; }.graph-dynamic-list li { grid-template-columns: 12px minmax(0,1fr); }.graph-dynamic-list time { display: none; }.application-list { grid-template-columns: 1fr 1fr; }.graph-node text { font-size: 11px; }.graph-node.small text { font-size: 9px; }
}

/* Knowledge graph structure v2: topic corpus × subject corpus */
.graph-hero-compact { min-height: 122px; }
.graph-hero-compact .graph-hero-content { padding-top: 20px; }
.graph-hero-compact h1 { margin: 0 0 3px; }.graph-hero-compact .graph-hero-content > p { margin-bottom: 3px; }.graph-hero-compact .graph-hero-content > small { margin-bottom: 0; }
.graph-filter-card { position: relative; z-index: 4; display: grid; gap: 4px; margin-top: 9px; padding: 8px 16px 9px; border: 1px solid #dceaf8; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }
.graph-filter-row { display: flex; align-items: center; gap: 10px; min-height: 26px; }.graph-filter-row > strong { flex: 0 0 70px; color: #0b5cae; font-size: 12px; }.graph-filter-chips { display: flex; flex-wrap: wrap; gap: 5px 7px; min-width: 0; }.graph-filter-chips button { height: 23px; padding: 0 13px; border-radius: 12px; color: #66829f; background: #eef4fa; font-size: 10px; }.graph-filter-chips button:hover, .graph-filter-chips button.active { color: #fff; background: #1477dc; box-shadow: 0 2px 5px rgba(25,121,210,.18); }.graph-filter-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }.graph-filter-actions button { width: 94px; height: 27px; border: 1px solid #7fb8ed; border-radius: 4px; color: #1474cc; background: #fff; font-size: 11px; }.graph-filter-actions button.primary { border-color: #1477dc; color: #fff; background: linear-gradient(135deg,#2b9bf4,#0c69c8); }
.graph-work-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 10px; align-items: start; margin-top: 9px; padding-bottom: 14px; }.graph-main-column, .graph-side-column { min-width: 0; }.graph-side-column { display: grid; gap: 9px; }
.graph-workspace-heading-v2 { min-height: 40px; padding: 0 11px; }.graph-workspace-heading-v2 h2 { font-size: 15px; }.graph-workspace-heading-v2 p { margin-top: 2px; }.graph-count { margin-left: auto; padding: 3px 8px; border-radius: 10px; color: #2877be; background: #e9f5ff; font-size: 10px; font-weight: 400; white-space: nowrap; }.graph-canvas-tools { display: flex; justify-content: flex-end; gap: 5px; min-height: 35px; padding: 5px 10px 4px; border-bottom: 1px solid #e6eff7; }.graph-canvas-tools button { height: 25px; padding: 0 9px; border: 1px solid #c9e0f3; border-radius: 4px; color: #397eBA; background: #fff; font-size: 10px; }.graph-canvas-tools button:hover { border-color: #7eb8ea; color: #0c68bf; }.graph-canvas-tools button.primary { border-color: #1978d3; color: #fff; background: #1477dc; }
.graph-canvas-shell-v2 { min-height: 390px; height: 390px; background: radial-gradient(circle at 50% 48%,#fff 0,#fbfdff 46%,#f3f9ff 100%); }.graph-canvas-shell-v2::before { background-image: radial-gradient(#cfe6f8 .8px,transparent .8px); background-size: 13px 13px; opacity: .82; }.graph-canvas-shell-v2 #knowledgeGraph { height: 390px; }.graph-canvas-shell-v2 .graph-canvas-legend { bottom: 6px; justify-content: flex-start; padding-left: 7px; }.graph-canvas-shell-v2 .graph-zoom-controls { top: 7px; right: 7px; }
.graph-canvas-shell-v2 .graph-grid path { stroke: #cfe4f6; stroke-width: .8; stroke-dasharray: 1 6; opacity: .4; }.graph-canvas-shell-v2 .graph-edges line { stroke-width: 1.2; opacity: .76; }.graph-canvas-shell-v2 .graph-edges line:nth-child(2n) { stroke: #f0a044; }.graph-canvas-shell-v2 .graph-edge-labels text { font-size: 9px; }.graph-canvas-shell-v2 .graph-node text { font-size: 10px; stroke-width: 1.5px; }.graph-canvas-shell-v2 .graph-node.small text { font-size: 8px; }.graph-canvas-shell-v2 .graph-node-core circle:first-child { fill: #0868d5; }.graph-canvas-shell-v2 .graph-node-core .graph-node-ring { stroke: #79c9ff; }.graph-canvas-shell-v2 .graph-node circle:first-child { stroke-width: 1.8; }.graph-canvas-shell-v2 .graph-node:hover circle:first-child, .graph-canvas-shell-v2 .graph-node.selected circle:first-child, .graph-canvas-shell-v2 .graph-node:focus circle:first-child, .graph-canvas-shell-v2 .graph-node.graph-match circle:first-child { stroke-width: 4; }
.legend-subject { background: #8051d3 !important; }
.graph-lower-grid-v2 { display: grid; grid-template-columns: 1.18fr .82fr; gap: 9px; margin-top: 9px; }.graph-entity-table-card, .graph-relation-stat-card, .graph-process-card, .graph-statistics-card, .graph-overview-card, .graph-explain-card, .graph-update-card { min-width: 0; overflow: hidden; border: 1px solid #dceaf8; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }.graph-entity-table-card .graph-section-heading, .graph-relation-stat-card .graph-section-heading, .graph-process-card .graph-section-heading, .graph-statistics-card .graph-section-heading { min-height: 35px; }.graph-section-heading > div { gap: 6px; }.graph-section-heading > div > em { margin-left: 7px; color: #83a0ba; font-size: 9px; font-style: normal; }.graph-table-wrap { overflow-x: auto; padding: 2px 8px 5px; }.graph-table-wrap table { width: 100%; border-collapse: collapse; color: #65819e; font-size: 9px; }.graph-table-wrap th { height: 24px; color: #557493; background: #eef6fd; font-weight: 400; text-align: left; white-space: nowrap; }.graph-table-wrap td { height: 25px; border-bottom: 1px solid #edf3f8; white-space: nowrap; }.graph-table-wrap th, .graph-table-wrap td { padding: 0 6px; }.graph-table-wrap td:first-child { width: 28px; color: #3884c6; text-align: center; }.graph-table-wrap td:nth-child(2) { color: #24679e; }.graph-table-wrap td span { padding: 3px 6px; border-radius: 9px; color: #1474c8; background: #eaf5ff; font-size: 8px; }
.graph-stat-body { display: grid; grid-template-columns: 78px minmax(0,1fr) 55px; gap: 10px; align-items: center; min-height: 164px; padding: 9px 10px; }.graph-donut { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: conic-gradient(#207fe2 0 51%,#ffb23f 51% 76%,#54bf9b 76% 100%); }.graph-donut::after { content: ""; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #fff; }.graph-donut { position: relative; }.graph-donut > div { position: relative; z-index: 1; display: grid; text-align: center; }.graph-donut strong { color: #0c68bd; font-size: 13px; }.graph-donut small { margin-top: 2px; color: #8ba0b6; font-size: 8px; }.graph-stat-bars { display: grid; gap: 6px; }.graph-stat-bars > div { display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; align-items: center; gap: 5px; color: #718aa6; font-size: 8px; }.graph-stat-bars b { height: 5px; overflow: hidden; border-radius: 5px; background: #e7f0f8; }.graph-stat-bars b i { display: block; height: 100%; border-radius: inherit; background: #1879d9; }.graph-stat-bars em { color: #7391ae; font-size: 8px; font-style: normal; text-align: right; }.graph-stat-total { display: grid; align-content: center; gap: 2px; text-align: right; }.graph-stat-total strong { color: #0c68bd; font-size: 16px; }.graph-stat-total strong small { font-size: 10px; }.graph-stat-total span { color: #8ba0b6; font-size: 8px; line-height: 1.3; }.graph-stat-total b { color: #207fe2; font-size: 30px; font-weight: 400; }
.graph-bottom-grid-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }.graph-process { display: flex; align-items: center; justify-content: space-around; min-height: 68px; padding: 8px 10px; }.graph-process > div { display: grid; justify-items: center; gap: 4px; color: #6683a0; font-size: 9px; white-space: nowrap; }.graph-process > div b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #1675d1; background: #e6f3ff; font-size: 9px; }.graph-process > i { color: #6c9bc4; font-size: 15px; font-style: normal; }.graph-statistics { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; min-height: 68px; padding: 10px 8px; }.graph-statistics > div { display: grid; align-content: center; justify-items: center; gap: 3px; border-right: 1px solid #edf3f8; color: #7c97b0; font-size: 9px; text-align: center; }.graph-statistics > div:last-child { border-right: 0; }.graph-statistics strong { color: #0b68bd; font-size: 14px; }.graph-statistics > div:last-child strong { font-size: 10px; }
.graph-overview-card, .graph-hot-card, .graph-explain-card, .graph-update-card { padding-bottom: 8px; }.graph-side-heading { min-height: 35px; padding: 0 10px; }.graph-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; }.graph-overview-grid > div { display: grid; grid-template-columns: 23px minmax(0,1fr); align-items: center; gap: 5px; min-height: 51px; padding: 5px; background: #f0f6fc; }.graph-overview-grid > div > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; color: #fff; background: #1477dc; font-size: 14px; }.graph-overview-grid p { display: grid; gap: 2px; margin: 0; color: #7893ae; font-size: 9px; }.graph-overview-grid strong { color: #0b68bd; font-size: 14px; }.graph-overview-grid strong.soft { font-size: 10px; }
.graph-hot-list { display: grid; gap: 0; margin: 0; padding: 4px 10px 3px; list-style: none; }.graph-hot-list li { display: grid; grid-template-columns: 17px minmax(0,1fr); align-items: center; gap: 5px; min-height: 26px; border-bottom: 1px solid #edf3f8; }.graph-hot-list li:last-child { border-bottom: 0; }.graph-hot-list li > b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; color: #fff; background: #8faac0; font-size: 8px; }.graph-hot-list li:nth-child(1) > b { background: #ed8129; }.graph-hot-list li:nth-child(2) > b { background: #f09b32; }.graph-hot-list li:nth-child(3) > b { background: #eba944; }.graph-hot-list button { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 5px; min-width: 0; padding: 0; color: #64819f; background: transparent; text-align: left; }.graph-hot-list button:hover { color: #0a68bf; }.graph-hot-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }.graph-hot-list button em { color: #8da2b8; font-size: 8px; font-style: normal; }.entity-dot { width: 8px; height: 8px; border-radius: 50%; background: #147bdc; }.entity-dot.orange { background: #f1932f; }.entity-dot.green { background: #15a78c; }.entity-dot.purple { background: #8051d3; }.entity-dot.blue { background: #147bdc; }
.graph-explain-card p { margin: 8px 10px 4px; padding: 6px 7px; border-radius: 4px; color: #6885a1; background: #f3f8fd; font-size: 9px; }.graph-explain-card p strong { color: #0b68bd; }.graph-explain-card ul { display: grid; gap: 5px; margin: 6px 10px 2px; padding-left: 15px; color: #6e88a4; font-size: 9px; line-height: 1.35; }.graph-explain-card li::marker { color: #1477dc; }.graph-update-card ul { display: grid; gap: 0; margin: 0; padding: 4px 10px 3px; list-style: none; }.graph-update-card li { display: grid; grid-template-columns: minmax(0,1fr) 67px; align-items: center; gap: 6px; min-height: 23px; border-bottom: 1px dashed #e1edf7; color: #62809d; font-size: 9px; }.graph-update-card li:last-child { border-bottom: 0; }.graph-update-card li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.graph-update-card time { color: #94a9be; font-size: 8px; text-align: right; }
.graph-page .site-footer { margin-top: 0; }
@media (max-width: 1080px) { .graph-work-layout { grid-template-columns: minmax(0,1fr) 225px; }.graph-lower-grid-v2 { grid-template-columns: 1fr; }.graph-stat-body { min-height: 125px; } }
@media (max-width: 860px) { .graph-work-layout { grid-template-columns: 1fr; }.graph-side-column { grid-template-columns: repeat(2,minmax(0,1fr)); }.graph-explain-card { grid-column: 1 / -1; }.graph-filter-card { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 680px) { .graph-hero-compact { min-height: 145px; }.graph-hero-compact .graph-hero-content { padding-top: 17px; }.graph-hero-compact h1 { font-size: 29px; }.graph-hero-compact .graph-hero-content > p { font-size: 13px; line-height: 1.4; }.graph-filter-row { align-items: flex-start; }.graph-filter-row > strong { flex-basis: 63px; padding-top: 4px; font-size: 11px; }.graph-filter-chips button { padding: 0 9px; }.graph-filter-actions button { flex: 1; }.graph-canvas-shell-v2, .graph-canvas-shell-v2 #knowledgeGraph { min-height: 350px; height: 350px; }.graph-workspace-heading-v2 { align-items: flex-start; flex-direction: column; gap: 4px; padding: 7px 11px; }.graph-count { margin-left: 28px; }.graph-canvas-tools { justify-content: flex-start; overflow-x: auto; }.graph-canvas-tools button { flex: 0 0 auto; }.graph-side-column { grid-template-columns: 1fr; }.graph-explain-card { grid-column: auto; }.graph-bottom-grid-v2 { grid-template-columns: 1fr; }.graph-stat-body { grid-template-columns: 72px minmax(0,1fr) 48px; }.graph-process { overflow-x: auto; justify-content: flex-start; gap: 8px; }.graph-process > div { flex: 0 0 auto; }.graph-process > i { flex: 0 0 auto; } }
@media (max-width: 420px) { .graph-filter-card { padding: 7px 9px; }.graph-filter-row > strong { flex-basis: 58px; }.graph-filter-chips { gap: 4px; }.graph-filter-chips button { height: 22px; padding: 0 7px; font-size: 9px; }.graph-canvas-shell-v2, .graph-canvas-shell-v2 #knowledgeGraph { min-height: 310px; height: 310px; }.graph-canvas-shell-v2 .graph-node text { font-size: 8px; }.graph-canvas-shell-v2 .graph-node.small text { font-size: 7px; }.graph-table-wrap table { font-size: 8px; }.graph-stat-body { grid-template-columns: 1fr 1.3fr; }.graph-stat-total { grid-column: 1 / -1; grid-template-columns: auto auto auto; align-items: center; justify-content: end; gap: 7px; }.graph-stat-total b { font-size: 21px; } }