.bng { --bng-project: #b85e0c; --bng-company: #2262a3; --bng-person: #267b4e; color: #20334b; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; overflow: hidden; }
.bng *, .bng *::before, .bng *::after { box-sizing: border-box; }
.bng-toolbar { padding: 16px; background: #f8fafd; border-bottom: 1px solid #e2e9f1; }
.bng-search, .bng-path-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.bng-field { display: grid; gap: 6px; min-width: 0; flex: 1 1 190px; font-size: 13px; }
.bng-field > span { font-weight: 700; }
.bng-input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #c4d0df; background: #fff; border-radius: 7px; color: #20334b; font: inherit; }
.bng-button { padding: 9px 12px; border: 1px solid #bfcddd; border-radius: 7px; background: #fff; color: #244464; font: inherit; line-height: 1.3; cursor: pointer; min-height: 38px; }
.bng-button:hover { border-color: #527ca7; background: #edf4fd; }
.bng-button:disabled { opacity: .5; cursor: default; }
.bng-primary { color: #fff; background: #215c98; border-color: #215c98; }
.bng-primary:hover { background: #164b80; color: #fff; }
.bng-path-controls { margin-top: 12px; }
.bng-path-controls > summary { cursor: pointer; font-size: 13px; color: #285887; font-weight: 700; padding: 5px 0; }
.bng-path-form { padding-top: 10px; }
.bng-appearance { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px; }
.bng-appearance .bng-field { flex: 0 1 180px; }
.bng-style-note { color: #5c6c7d; font-size: 12px; line-height: 1.6; padding-bottom: 8px; }
.bng-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 17px; padding: 12px 16px 8px; font-size: 12px; }
.bng-key { display: inline-flex; gap: 6px; align-items: center; }
.bng-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.bng-key-project { color: var(--bng-project); }
.bng-key-company { color: var(--bng-company); }
.bng-key-person { color: var(--bng-person); }
.bng-key-cooperation::before, .bng-key-copart::before, .bng-key-organization::before, .bng-key-participation::before, .bng-key-current-winner::before { width: 22px; height: 0; border: 0; border-top: 2px solid #5479aa; border-radius: 0; background: none; }
.bng-key-copart::before { border-top-style: dashed; border-color: #8793a3; }
.bng-key-organization::before { border-top-style: dotted; border-color: #926caf; }
.bng-key-participation::before { border-color: #adc0d2; }
.bng-key-current-winner::before { border-color: #b9740c; border-top-width: 4px; }
.bng-legend-note { color: #637186; }
.bng-check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; margin-left: auto; }
.bng-check > input { width: 16px; height: 16px; accent-color: #27669e; }
.bng-check + .bng-check { margin-left: 0; }
.bng-overview-note { margin: 0; padding: 2px 16px 9px; color: #637186; font-size: 12px; line-height: 1.6; }
.bng-status { padding: 0 16px 12px; color: #53677f; min-height: 28px; font-size: 12px; line-height: 1.5; }
.bng-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); border-top: 1px solid #e2e9f1; }
.bng-stage { position: relative; min-width: 0; height: 590px; background-color: #f7fafd; background-image: radial-gradient(#dce5ef .8px, transparent .8px); background-size: 18px 18px; overflow: hidden; }
.bng-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; user-select: none; }
.bng-canvas:focus-visible { outline: 3px solid #527ca7; outline-offset: -3px; }
.bng-dragging .bng-canvas, .bng-dragging .bng-node { cursor: grabbing; }
.bng-zoom { position: absolute; display: flex; gap: 5px; bottom: 36px; left: 12px; right: 12px; pointer-events: none; flex-wrap: wrap; }
.bng-zoom .bng-button { pointer-events: auto; box-shadow: 0 2px 5px #20334b0a; font-size: 12px; }
.bng-zoom-button { width: 38px; padding: 5px; font-size: 19px !important; }
.bng-canvas-hint { position: absolute; left: 12px; bottom: 11px; color: #5e7188; font-size: 11px; pointer-events: none; margin: 0; }
.bng-node { cursor: pointer; outline: none; }
.bng-stellar-art { display: none; }
.bng-node circle { stroke: #fff; stroke-width: 3px; fill: var(--bng-company); }
.bng-node-project circle { fill: var(--bng-project); }
.bng-node-person circle { fill: var(--bng-person); }
.bng-node-symbol { fill: #fff; font: 700 14px "Microsoft YaHei", sans-serif; pointer-events: none; }
.bng-node-person .bng-node-symbol { font-size: 11px; }
.bng-node-name { fill: #213f5e; paint-order: stroke; stroke: #f7fafd; stroke-width: 4px; stroke-linejoin: round; font: 12px "Microsoft YaHei", sans-serif; pointer-events: none; }
.bng-node-person .bng-node-name { fill: #315d43; font-size: 11px; }
.bng-node-project .bng-node-name { fill: #8d4c12; font-weight: 600; }
.bng-node:focus circle, .bng-node:hover circle, .bng-node.bng-selected circle { stroke: #20334b; stroke-width: 4px; }
.bng-node.bng-dimmed { opacity: .15; }
.bng-node.bng-dimmed:hover, .bng-node.bng-dimmed:focus { opacity: 1; }
.bng-node.bng-selected .bng-node-name { font-weight: 700; }
.bng-node.bng-on-path circle { stroke: #b92758; stroke-width: 5px; }
.bng-edge { cursor: pointer; outline: none; }
.bng-edge-line { fill: none; stroke: #6990bd; opacity: .76; vector-effect: non-scaling-stroke; }
.bng-edge-participation .bng-edge-line { stroke: #a5bacd; opacity: .7; stroke-width: 1; }
.bng-edge-person .bng-edge-line { stroke: #75a68a; stroke-dasharray: 2 4; }
.bng-edge-co_participation .bng-edge-line { stroke: #8593a4; stroke-dasharray: 7 5; }
.bng-edge-organization .bng-edge-line { stroke: #926caf; stroke-dasharray: 3 4; }
.bng-edge-participation.bng-edge-current-winner .bng-edge-line { stroke: #b9740c; stroke-width: 3.2px; opacity: 1; }
.bng-edge-hit { fill: none; stroke: transparent; stroke-width: 16px; pointer-events: stroke; }
.bng-edge-count { font: 700 11px "Microsoft YaHei", sans-serif; fill: #354f6a; stroke: #f7fafd; paint-order: stroke; stroke-width: 4px; pointer-events: none; }
.bng-edge:focus .bng-edge-line, .bng-edge:hover .bng-edge-line, .bng-edge.bng-selected .bng-edge-line { stroke: #174e89; opacity: 1; stroke-width: 4px; }
.bng-edge.bng-on-path .bng-edge-line { stroke: #b92758; opacity: 1; stroke-width: 4px; }
.bng-edge-current-winner:not(.bng-on-path):is(:hover, :focus, .bng-selected) .bng-edge-line { stroke: #b9740c; stroke-width: 4.5px; opacity: 1; }
.bng-edge.bng-dimmed { opacity: .06; }
.bng-sidebar { min-width: 0; height: 590px; overflow: auto; overscroll-behavior: contain; border-left: 1px solid #dce5ef; padding: 17px; font-size: 13px; overflow-wrap: anywhere; }
.bng-overline { color: #65778d; font-size: 11px; letter-spacing: .05em; margin: 0 0 7px; }
.bng-detail-title { font-size: 17px; line-height: 1.6; margin: 0 0 8px; }
.bng-sidebar p { line-height: 1.7; margin: 6px 0; white-space: pre-wrap; }
.bng-muted { color: #5c6c7d; }
.bng-review { color: #9b561a; }
.bng-sidebar > .bng-button, .bng-sidebar > .bng-link-button { margin-top: 7px; }
.bng-detail-section { margin-top: 20px; }
.bng-detail-section > h4 { font-size: 13px; margin: 0 0 7px; }
.bng-record { padding: 11px 0; border-top: 1px solid #e5eaf2; }
.bng-record-label { color: #365f89; font-weight: 700; }
.bng-current-award-record > .bng-record-label { color: #875208; }
.bng-node-relation-evidence { margin-top: 8px; margin-bottom: 15px; }
.bng-node-relation-evidence > h4 { font-weight: 400; color: #5c6c7d; }
.bng-link-button, .bng-path-step { border: 0; padding: 3px 0; border-radius: 2px; background: none; color: #205994; font: inherit; text-align: left; cursor: pointer; line-height: 1.6; overflow-wrap: anywhere; display: block; max-width: 100%; }
.bng-link-button:hover, .bng-path-step:hover { text-decoration: underline; }
.bng-evidence-link { color: #205994; display: inline-block; margin-top: 4px; line-height: 1.6; }
.bng-evidence-text { font-size: 12px; color: #465f77; }
.bng-explanation { padding: 8px 10px; background: #f0f5fb; border-radius: 6px; color: #47627e; font-size: 12px; }
.bng-route { padding-left: 20px; }
.bng-route > li { padding: 5px 0 10px; }
.bng-path-step { color: #805777; font-size: 12px; }
.bng button:focus-visible, .bng a:focus-visible, .bng input:focus-visible, .bng select:focus-visible, .bng summary:focus-visible { outline: 3px solid #5c91c5; outline-offset: 2px; }
/* The continuous network keeps its geometry and evidence semantics. Only the
   canvas receives the selected stellar appearance; controls remain readable. */
.bng-stellar .bng-stage { --bng-project: #ffc882; --bng-company: #75d9ff; --bng-person: #80e9c4; background-color: #060e20; background-image: radial-gradient(#22314a .7px, transparent .8px); background-size: 29px 29px; }
.bng-stellar .bng-canvas:focus-visible { outline-color: #75d9ff; }
.bng-stellar .bng-stellar-art { display: block; }
.bng.bng-stellar .bng-node .bng-node-disc { fill: transparent; stroke: transparent; pointer-events: all; }
.bng-stellar .bng-node-symbol { display: none; }
.bng-stellar .bng-nebula { opacity: .9; }
.bng-stellar .bng-stars { opacity: .9; }
.bng-stellar .bng-star-rays { fill: none; stroke: var(--bng-company); stroke-width: .6px; opacity: .65; }
.bng-stellar .bng-node-project .bng-star-rays { stroke: var(--bng-project); }
.bng-stellar .bng-node-person .bng-star-rays { stroke: var(--bng-person); }
.bng.bng-stellar .bng-node .bng-star-core { fill: #f4f7ff; stroke: none; }
.bng-stellar .bng-node-name { fill: #eaf0ff; stroke: #060e20; stroke-width: 5px; }
.bng-stellar .bng-node-project .bng-node-name { fill: #ffd8a5; }
.bng-stellar .bng-node-person .bng-node-name { fill: #9aebcf; }
.bng-stellar .bng-edge-line { stroke: #68b5e0; opacity: .72; }
.bng-stellar .bng-edge-participation .bng-edge-line { stroke: #56769c; opacity: .8; }
.bng-stellar .bng-edge-person .bng-edge-line { stroke: #6bc5a6; }
.bng-stellar .bng-edge-co_participation .bng-edge-line { stroke: #8d9fb9; }
.bng-stellar .bng-edge-organization .bng-edge-line { stroke: #b394e8; }
.bng-stellar .bng-edge-participation.bng-edge-current-winner .bng-edge-line { stroke: #ffc882; opacity: 1; }
.bng-stellar .bng-edge-count { fill: #d2e7ff; stroke: #060e20; }
.bng-stellar .bng-edge:hover .bng-edge-line, .bng-stellar .bng-edge:focus .bng-edge-line, .bng-stellar .bng-edge.bng-selected .bng-edge-line { stroke: #99dfff; }
.bng-stellar .bng-edge-current-winner:not(.bng-on-path):is(:hover, :focus, .bng-selected) .bng-edge-line { stroke: #ffd8a5; }
.bng-stellar .bng-node:focus-visible { outline: 2px solid #a0ddff; outline-offset: 4px; border-radius: 50%; }
.bng-stellar .bng-node.bng-selected .bng-star-core { fill: #fff2cb; r: 3.2px; }
.bng-stellar .bng-node.bng-selected .bng-star-rays { stroke: #fff2cb; stroke-width: 1.3px; opacity: 1; }
.bng-stellar .bng-node.bng-on-path .bng-star-core { fill: #ff9ac6; r: 3px; }
.bng-stellar .bng-edge.bng-on-path .bng-edge-line { stroke: #ff9ac6; opacity: 1; }
.bng-stellar .bng-canvas-hint { color: #abbcd5; }
.bng-stellar .bng-zoom .bng-button { background: #13243c; border-color: #39506e; color: #dbeaff; }
.bng-stellar .bng-zoom .bng-button:hover { background: #213b5c; border-color: #6aa0ca; }
.bng-starlight-playing .bng-nebula { animation: bng-gas-breathe 9s ease-in-out infinite; animation-delay: var(--bng-star-delay); }
.bng-starlight-playing .bng-stars { animation: bng-stars-twinkle 6s ease-in-out infinite; animation-delay: var(--bng-star-delay); }
.bng-starlight-focused .bng-node:not(.bng-selected):not(.bng-on-path):not(:hover):not(:focus) .bng-nebula,
.bng-starlight-focused .bng-node:not(.bng-selected):not(.bng-on-path):not(:hover):not(:focus) .bng-stars { animation: none; }
@keyframes bng-gas-breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes bng-stars-twinkle { 0%,100% { opacity: .58; } 55% { opacity: 1; } }
@media (max-width: 1050px) {
  .bng-body { grid-template-columns: minmax(0, 1fr) 250px; }
  .bng-stage, .bng-sidebar { height: 540px; }
}
@media (max-width: 760px) {
  .bng-body { grid-template-columns: minmax(0, 1fr); }
  .bng-stage { height: 460px; }
  .bng-sidebar { height: auto; max-height: 380px; min-height: 160px; border-left: 0; border-top: 1px solid #dce5ef; }
  .bng-toolbar { padding: 12px; }
  .bng-search .bng-field, .bng-path-form .bng-field { flex-basis: 100%; }
  .bng-search > button, .bng-path-form > button { width: 100%; }
  .bng-legend { padding: 12px; gap: 9px 12px; }
  .bng-check { margin-left: 0; }
  .bng-status { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bng * { scroll-behavior: auto; }
  .bng .bng-nebula, .bng .bng-stars { animation: none !important; }
}