/* 连接图（shared/system-diagram.js）。颜色全走 tokens.css，深浅色都能看。 */
.sys-diagram { overflow-x: auto; margin-bottom: 12px; }
.sys-diagram svg { display: block; width: 100%; min-width: 760px; height: auto; }
.sys-diagram .dg-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; }
.sys-diagram .dg-main { stroke: var(--accent); stroke-width: 1.8; }
.sys-diagram .dg-core { fill: var(--accent-soft-bg); stroke: var(--accent); stroke-width: 1.8; }
.sys-diagram .dg-server { fill: var(--surface-sunken); stroke: var(--border-strong); }
.sys-diagram .dg-region { fill: none; stroke: var(--border-strong); stroke-dasharray: 6 5; }
.sys-diagram .dg-off { fill: var(--surface-sunken); stroke-dasharray: 5 4; }
.sys-diagram .dg-t { fill: var(--text-primary); font-size: 15px; font-weight: 700; }
.sys-diagram .dg-s { fill: var(--text-secondary); font-size: 12px; }
.sys-diagram .dg-cap { fill: var(--text-muted); font-size: 12px; }
.sys-diagram .dg-capb { fill: var(--text-primary); font-weight: 700; }
.sys-diagram .dg-l { fill: var(--text-muted); font-size: 11px; }
.sys-diagram .dg-ln { stroke: var(--text-muted); stroke-width: 1.4; fill: none; }
.sys-diagram .dg-ah { fill: var(--text-muted); }
.sys-diagram .dg-note { color: var(--text-muted); font-size: 12px; margin: 6px 0 0; }