/* Geometry owns layout; canonical GlassCard owns every surface layer. */
.di4-graph-mount { position: relative; width: max-content; height: max-content; }
.di4-graph { --di4-graph-accent: var(--glass-accent, #8abbb1); --di4-graph-text: var(--glass-text-primary, #edf0ef); --di4-graph-muted: var(--glass-text-secondary, #98a5a1); --di4-graph-line: var(--glass-border-strong, rgba(160,185,180,.38)); position: relative; width: 1800px; height: 1200px; color: var(--di4-graph-text); font-family: var(--glass-font-family, inherit); isolation: isolate; }
.di4-graph *, .di4-graph *::before, .di4-graph *::after { box-sizing: border-box; }
.di4-graph-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 0; }
.di4-graph-nodes { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.di4-graph-node, .di4-graph-group { position: absolute; margin: 0; padding: 0; pointer-events: auto; outline: none; }
.di4-graph-node { z-index: 2; }
.di4-graph-node__card { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.di4-graph-node:focus-visible, .di4-graph-group:focus-visible { outline: 2px solid var(--di4-graph-accent); outline-offset: 5px; border-radius: 12px; }
.di4-graph-node__header { display: flex; align-items: center; min-height: 20px; gap: 10px; width: 100%; cursor: grab; touch-action: none; user-select: none; }
.di4-graph-node__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; font-weight: 550; letter-spacing: -.12px; }
.di4-graph-node__index { margin-left: auto; color: var(--di4-graph-muted); font: 10px/16px ui-monospace, monospace; opacity: .6; }
.di4-graph-grip { display: grid; grid-template-columns: repeat(2, 2px); gap: 2px; flex: 0 0 6px; opacity: .55; }
.di4-graph-grip i { width: 2px; height: 2px; border-radius: 50%; background: var(--di4-graph-muted); }
.di4-graph-node__body { max-height: 100%; margin: 0; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--glass-text-body-size, 16px); line-height: var(--glass-text-body-line, 1.5); }
.di4-graph-group { z-index: 1; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--glass-bg-surface, #111d20) 12%, transparent); pointer-events: none; }
.di4-graph-group > .di4-graph-group__header, .di4-graph-group > .di4-graph-port, .di4-graph-group > .di4-graph-resize { pointer-events: auto; }
.di4-graph-group::before { content: ''; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--di4-group-border, var(--glass-border-hairline, rgba(148,177,169,.22))); border-radius: inherit; pointer-events: none; }
.di4-graph-group.is-selected::before { border-color: var(--di4-graph-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--di4-graph-accent) 16%, transparent); }
.di4-graph-group__header { position: absolute; inset: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 18px; color: var(--di4-graph-text); cursor: grab; touch-action: none; user-select: none; }
.di4-graph-group__header::after { content: ''; position: absolute; inset: auto 18px 0; height: 1px; background: var(--glass-border-hairline, rgba(148,177,169,.14)); pointer-events: none; }
.di4-graph-group.is-collapsed .di4-graph-group__header::after { display: none; }
.di4-graph-group__icon { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: var(--di4-graph-muted); stroke-width: 1.25; }
.di4-graph-group__title { font-size: 12px; line-height: 18px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di4-graph-group__badge { margin-left: auto; font-size: 9px; line-height: 18px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--di4-graph-muted); }
.di4-graph-collapse { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--di4-graph-muted); cursor: pointer; }
.di4-graph-collapse:hover { background: color-mix(in srgb, var(--di4-graph-accent) 10%, transparent); color: var(--di4-graph-text); }
.di4-graph-collapse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.di4-graph-group__children { position: absolute; inset: 0; pointer-events: none; }
.di4-graph-port { position: absolute; z-index: 4; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: crosshair; color: var(--di4-graph-muted); }
.di4-graph-port span { width: 7px; height: 7px; border: 1px solid var(--di4-graph-line); border-radius: 50%; background: var(--glass-bg-page, #0e1417); }
.di4-graph-port--left { left: -12px; top: calc(50% - 12px); }
.di4-graph-port--right { right: -12px; top: calc(50% - 12px); }
.di4-graph-port--top { top: -12px; left: calc(50% - 12px); }
.di4-graph-port--bottom { bottom: -12px; left: calc(50% - 12px); }
.di4-graph-port:hover span, .di4-graph-port:focus-visible span, .di4-graph-node.is-selected .di4-graph-port span, .di4-graph-group.is-selected > .di4-graph-port span { border-color: var(--di4-graph-accent); background: var(--glass-bg-page, #0e1417); }
.di4-graph-port:focus-visible, .di4-graph-collapse:focus-visible { outline: 2px solid var(--di4-graph-accent); outline-offset: 1px; }
.di4-graph .is-connecting > .di4-graph-port span { background: var(--di4-graph-accent); border-color: var(--di4-graph-accent); }
.di4-graph-resize { position: absolute; z-index: 4; right: 3px; bottom: 3px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--di4-graph-muted); opacity: 0; cursor: nwse-resize; touch-action: none; }
.di4-graph-node:hover > .di4-graph-resize, .di4-graph-node:focus-within > .di4-graph-resize, .di4-graph-group.is-selected > .di4-graph-resize { opacity: .7; }
.di4-graph-resize svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1; }
.di4-graph.is-dragging .di4-graph-node__header, .di4-graph.is-dragging .di4-graph-group__header { cursor: grabbing; }
.di4-graph-edge__line { fill: none; stroke: var(--di4-graph-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; pointer-events: none; }
.di4-graph-edge__hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; outline: none; }
.di4-graph-edge.is-dashed .di4-graph-edge__line { stroke-dasharray: 5 5; }
.di4-graph-edge.is-selected .di4-graph-edge__line, .di4-graph-edge:has(.di4-graph-edge__hit:focus-visible) .di4-graph-edge__line { stroke: var(--di4-graph-accent); stroke-width: 2; }
.di4-graph-edge__label { cursor: pointer; pointer-events: auto; }
.di4-graph-edge__label rect { fill: var(--glass-bg-page, #101719); stroke: var(--glass-border-hairline, rgba(148,177,169,.2)); stroke-width: 1; }
.di4-graph-edge__label text { fill: var(--di4-graph-muted); font: 10px/1 var(--glass-font-family, system-ui, sans-serif); }
.di4-graph-edge.is-selected .di4-graph-edge__label text { fill: var(--di4-graph-text); }
.di4-graph-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (forced-colors: active) { .di4-graph-group::before { border-color: CanvasText; } .di4-graph-port span { border-color: ButtonText; background: Canvas; } .di4-graph-edge__line { stroke: CanvasText; } .di4-graph-node:focus-visible, .di4-graph-group:focus-visible { outline-color: Highlight; } }