.app-diagram { position: relative; min-height: 37.5rem; overflow: hidden; border: 1px solid #3a3e49; border-radius: .45rem; background: #1f222b; color: #f3f4f6; box-shadow: 0 2px 8px rgb(0 0 0 / 18%); }
.app-diagram-toolbar { display: flex; align-items: center; gap: .4rem; min-height: 3.2rem; padding: .5rem .65rem; border-bottom: 1px solid #3a3e49; background: #292d38; }
.app-diagram-toolbar-spacer { flex: 1; }
.app-diagram-button { display: inline-flex; align-items: center; gap: .35rem; border-color: #505663; background: #343946; color: inherit; }
.app-diagram-button:hover:not(:disabled),
.app-diagram-button:focus-visible { border-color: #777e8d; background: #414754; color: #fff; }
.app-diagram-viewport { height: 34.3rem; overflow: auto; outline: none; background-color: #20242c; background-image: radial-gradient(#3a3f4b 1px, transparent 1px); background-size: 18px 18px; scrollbar-color: #565c69 #20232c; }
.app-diagram-viewport:focus-visible { box-shadow: inset 0 0 0 2px #6bb6c7; }
.app-diagram-viewport svg { display: block; margin: auto; overflow: visible; }
.app-diagram-node,
.app-diagram-connection { cursor: pointer; outline: none; }
.app-diagram-node-shape { filter: drop-shadow(0 2px 3px rgb(0 0 0 / 28%)); }
.app-diagram-node-name { fill: #29313d; font-size: 16px; font-weight: 700; pointer-events: none; }
.app-diagram-node-title { fill: #596372; font-size: 12px; pointer-events: none; }
.app-diagram-node:hover .app-diagram-node-shape,
.app-diagram-node:focus-visible .app-diagram-node-shape { stroke: #66b7c9; stroke-width: 3; }
.app-diagram-node.is-selected .app-diagram-node-shape { stroke: #e4ae50; stroke-width: 4; }
.app-diagram-connection-line { fill: none; stroke: #697687; stroke-width: 2.4; pointer-events: stroke; }
.app-diagram-arrow { fill: #697687; }
.app-diagram-connection-label { fill: #cdd1d8; stroke: #20242c; stroke-width: 4px; paint-order: stroke; font-size: 11px; pointer-events: none; }
.app-diagram-connection:hover .app-diagram-connection-line,
.app-diagram-connection:focus-visible .app-diagram-connection-line { stroke: #6fc0d2; stroke-width: 4; }
.app-diagram-connection.is-selected .app-diagram-connection-line { stroke: #e4ae50; stroke-width: 4; }
.app-diagram-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-diagram.is-loading::after { content: ""; position: absolute; z-index: 15; inset: 3.2rem 0 0; background: rgb(20 22 29 / 48%); cursor: wait; }
.app-diagram-dialog-backdrop { position: fixed; z-index: 1080; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgb(0 0 0 / 62%); }
.app-diagram-dialog { width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid #4b5160; border-radius: .48rem; background: #252934; color: #f3f4f6; box-shadow: 0 18px 54px rgb(0 0 0 / 55%); }
.app-diagram-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid #444a57; }
.app-diagram-dialog-header h3 { margin: 0; font-size: 1.08rem; }
.app-diagram-dialog-header button { color: #f3f4f6; }
.app-diagram-dialog-body { display: grid; gap: .85rem; padding: 1rem; }
.app-diagram-editor-field { display: grid; gap: .25rem; }
.app-diagram-editor-field .form-label { margin: 0; }
.app-diagram-editor-field .form-control,
.app-diagram-editor-field .form-select { border-color: #505663; background-color: #1d2028; color: #f3f4f6; color-scheme: dark; }
.app-diagram-editor-error { min-height: 1.2rem; color: #ff9aa4; white-space: pre-line; }
.app-diagram-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid #444a57; }
@media (max-width: 740px) { .app-diagram-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .app-diagram-toolbar { overflow-x: auto; } }