.graph-section{position:relative;flex:1 1 0;min-height:0;background:#101112;overflow:hidden;isolation:isolate}
.graph-section[hidden]{display:none!important}
.graph-canvas{position:absolute;inset:0;background:#101112;touch-action:none}
.graph-canvas canvas{display:block}
.graph-controls,.graph-info,.graph-status{position:absolute;z-index:3;background:#1c2023eF;border:1px solid #3d464d;color:#dbe2e7;border-radius:6px}
.graph-controls{top:16px;left:16px;display:flex;flex-direction:column;gap:10px;width:215px;padding:15px;box-shadow:0 5px 24px #0005;font-size:12px}
.graph-controls strong{font-size:15px;color:#eef2f5}
.graph-controls span,.graph-controls small{color:#aab7bf;line-height:1.45}
.graph-controls #graphStats{white-space:pre-line}
.graph-controls label{display:flex;align-items:center;gap:8px;cursor:pointer}
.graph-controls input{accent-color:#8cccf4}
.graph-controls button,.graph-navigation button{border:1px solid #56636c;border-radius:4px;padding:7px;color:#e3edf2;background:#2a3339;cursor:pointer}
.graph-controls button:hover:not(:disabled),.graph-navigation button:hover:not(:disabled){background:#344753}
.graph-navigation button:disabled{opacity:.48;cursor:not-allowed}
.graph-size-switch{display:grid;grid-template-columns:1fr;gap:4px}
.graph-size-switch button{font:inherit;line-height:1.3;min-height:38px}
.graph-size-switch button.active{background:#b7d9ef;color:#142330;border-color:#b7d9ef}
.graph-size-switch button:focus-visible{outline:2px solid #e4f2fa;outline-offset:2px}
.graph-zoom{display:grid;grid-template-columns:36px 1fr 36px;gap:4px}
.graph-navigation{position:absolute;z-index:4;left:241px;top:16px;display:flex;flex-direction:column;gap:6px;width:158px;padding:10px 12px;background:#1c2023ef;border:1px solid #3d464d;border-radius:6px;color:#dbe2e7;box-shadow:0 5px 24px #0005;font-size:12px}
.graph-navigation strong{font-size:13px}.graph-navigation small{color:#aab7bf;line-height:1.4}.graph-navigation button{font:inherit}
.graph-navigation .graph-zoom span{display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.graph-navigation button[aria-pressed="true"]{background:#b7d9ef;color:#142330}
.graph-navigation #graphResetHost,.graph-navigation #graphResetHost button{width:100%}
.graph-canvas.pick-center,.graph-canvas.pick-center canvas{cursor:crosshair!important}
.graph-controls{max-height:calc(100% - 32px);overflow:auto}
.graph-events summary{cursor:pointer;color:#dbe2e7;line-height:1.4}
.graph-events>div{display:flex;flex-direction:column;gap:5px;padding-top:8px;color:#aab7bf}
.graph-events button{text-align:left;font:inherit;line-height:1.35}
.graph-sources summary{cursor:pointer;color:#dbe2e7;line-height:1.4}
.graph-sources small{display:block;margin-top:7px}
.graph-sources>div{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.graph-sources strong{display:block;font-size:12px}
.graph-sources a{display:block;color:#8dccf4;line-height:1.45}
.graph-info{top:16px;right:16px;width:270px;max-height:calc(100% - 32px);overflow:auto;padding:16px;box-shadow:0 5px 24px #0005}
.graph-info h2{margin:0 0 12px;font-size:15px;line-height:1.35}
.graph-info p{font-size:12px;line-height:1.55;color:#b6c2c9;margin:10px 0}
.graph-info ul{padding-left:18px;color:#b6c2c9;font-size:12px;line-height:1.5}
.graph-info a{color:#8dccf4;text-decoration:underline}
.graph-info button{border:1px solid #56636c;border-radius:4px;padding:7px 10px;color:#e3edf2;background:#2a3339;cursor:pointer;font:inherit}
.graph-info button:hover{background:#344753}.graph-info button:focus-visible{outline:2px solid #e4f2fa;outline-offset:2px}
.graph-dot{display:inline-block;width:8px;height:8px;margin-right:3px;border-radius:50%;background:#70a4c9}
.graph-dot.conflict{background:#ffac67}
.graph-dot.alliance{background:#6cdbba}
.graph-dot.opposition{background:#e385a8}
.graph-status{top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 14px;font-size:12px;pointer-events:none}
.graph-status[hidden]{display:none}
body[data-view="graph"] .catalog{height:calc(100dvh - 64px);min-height:0}
@media(max-width:850px){.graph-controls{left:8px;top:8px;width:170px;padding:10px;gap:7px;max-height:calc(100% - 16px)}.graph-navigation{left:186px;top:8px;width:142px;padding:8px}.graph-info{top:auto;bottom:8px;right:8px;width:min(245px,calc(100% - 16px));max-height:28%;padding:10px}.graph-info p{margin:6px 0}.graph-controls strong{font-size:13px}}
@media(max-width:700px){body[data-view="graph"] .catalog{height:calc(100dvh - 59px)}.graph-controls{left:8px;width:calc(50% - 12px);max-height:calc(72% - 16px);font-size:11px}.graph-navigation{left:calc(50% + 4px);width:calc(50% - 12px);font-size:10px}.graph-info{font-size:11px;width:calc(50% - 12px)}.graph-info h2{font-size:13px}}