:root {
  --dg-paper: #ffffff; --dg-ink: #1c2430; --dg-locked: #eef0f3; --dg-red: #d0021b;
  --dg-sel: #1f6fd1; --dg-sel-soft: rgba(31, 111, 209, .10); --dg-sel-faint: rgba(31, 111, 209, .06); --dg-sel-halo: rgba(31, 111, 209, .35); --dg-sel-line: #a9cbf5;
  --dg-ok: #2e8b57; --dg-ok-strong: #2eaa4f; --dg-ok-bg: #e3f7d4; --dg-bad: #e0a39d; --dg-bad-bg: #fde8e6;
  --dg-hit: #f0a500; --dg-hit-cur: #e05a00; --dg-hit-bg: #fff4dc;
  --dg-ink-2: #333333; --dg-row-hover: #e8f1fc; --dg-row-sel: #cfe3fb; --dg-zone: #afec89; --dg-zone-ink: #14501f; --dg-refused: #c0392b;
  --dg-lane: #f4f4f4; --dg-lane-line: #9aa5b5; --dg-warn: #f0ad4e; --dg-err: #c9302c; --dg-ok-hover: #1f8a3c;
  --dg-ok-glow: rgba(46, 170, 79, .25); --dg-ok-glow-strong: rgba(46, 170, 79, .35); --dg-ok-faint: rgba(46, 170, 79, .08); --dg-shadow: rgba(20, 33, 61, .16);
  --dg-box-line: #7d8aa0; --dg-box-line-deep: #33415a;
  --dg-frame: #44526d;
  --sim-run: #1baf7a; --sim-run-bg: #c9f2df; --sim-wait: #ee8a1a; --sim-wait-bg: #fde6c8; --sim-done-bg: #e3e6eb;
  --sim-bar: #2a78d6; --sim-bar-io: #e6c200; --sim-bar-res: #8e5bd0; --sim-bar-start: #9aa3ad; --sim-bar-decomp: #3d4f73;
}
.diag-dash .diag-filters { margin-bottom: 16px; }
.split-btn { display: inline-flex; }
.split-btn .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.split-btn .btn.caret { border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 1px solid color-mix(in srgb, var(--primary-ink) 35%, transparent); padding: 6px 8px; }
.diag-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.diag-tile { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px 12px; color: var(--text); min-height: 150px; transition: box-shadow .12s, border-color .12s; }
.diag-tile:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow); }
.dt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 3px solid var(--accent); margin: 0 -14px; padding: 10px 14px 0; }
.dt-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dt-name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.dt-desc { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.dt-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dt-derived { font-size: 11px; padding: 0 6px; border: 1px dashed var(--line-strong); border-radius: 3px; color: var(--text-2); }
.diag-pager { margin-top: 16px; font-size: 13px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.type-card { display: flex; flex-direction: column; gap: 4px; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.type-card:hover { border-color: var(--accent); background: var(--accent-2); }

.diag-host { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.diag-root { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diag-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diag-tools .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.tb-field { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.depth-stepper { gap: var(--sp-1); }
.depth-stepper .btn.icon { min-width: 24px; padding-inline-start: 0; padding-inline-end: 0; justify-content: center; }
.depth-stepper .depth-val { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.depth-stepper.auto .depth-val { font-style: italic; font-weight: 400; }
.depth-stepper [data-ctl=depth-all][aria-pressed=true] { background: var(--sel-bg); border-color: var(--sel-edge); }
.dg-checks { font-variant-numeric: tabular-nums; }
.dg-checks.has-findings { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.dg-checks.has-errors { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.dg-checks-panel .ep-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.dg-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.dg-finding { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border-inline-start: 3px solid var(--warn); background: var(--warn-bg); font-size: var(--fs-sm); }
.dg-finding.error { border-inline-start-color: var(--danger); background: var(--danger-bg); }
.dg-finding.info { border-inline-start-color: var(--info); background: var(--info-bg); }
.dg-finding-ic { width: 16px; flex: none; }
.dg-config, .dg-settings .ep-sec, .sp-chart-panel > .ep-sec { min-width: 0; }
.dg-fold-body > *, .dg-config > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.dg-config > .dg-fold-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.dg-fold-body[hidden] { display: none !important; }
.dg-config input:not([type=checkbox]), .dg-config select, .dg-settings .ep-sec select, .sp-chart-panel select { width: 100%; max-width: 100%; box-sizing: border-box; }
.dg-fold-body > label.checkbox, .dg-checks > label.checkbox, .dg-cfg-checks label.checkbox { display: flex; align-items: center; gap: var(--sp-2); margin: 2px 0; }
.dg-cfg-root .btn { flex: none; }
.dg-config .field { margin: 0; }
.dg-cfg-root { align-items: center; gap: var(--sp-2); min-width: 0; }
.dg-cfg-root .grow { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.dg-cfg-find input { width: 100%; }
.dg-cfg-roots { margin-top: var(--sp-1); max-height: 220px; }
.dg-cfg-roots .pick-row { padding: 4px 8px; font-size: var(--fs-sm); }
.dg-cfg-recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.dg-cfg-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-cfg-checks { margin-top: var(--sp-1); max-height: 180px; padding: var(--sp-1) var(--sp-2); display: grid; gap: 2px; }
.dg-help { margin: 0; }
.dg-fold-body .chart-set { border: 0; border-radius: 0; padding: 0; margin: 0 0 var(--sp-3); min-width: 0; }
.dg-fold-body .chart-set:last-child { margin-bottom: 0; }
.dg-fold-body .chart-set > legend { padding: 0; margin-bottom: var(--sp-1); font-size: 12px; font-weight: 600; color: var(--muted); }
.dg-fold-body .chart-set .field { margin: var(--sp-2) 0 0; }
.dg-fold-h { margin: 0; padding: 0; }
.dg-fold-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start; cursor: pointer; border-radius: var(--r-ctl); }
.dg-fold-btn::before { content: '▾'; display: inline-block; width: 12px; font-size: 13px; line-height: 1; color: var(--text-2, var(--muted)); text-align: center; }
.dg-fold-btn[aria-expanded=false]::before { content: '▸'; }
.dg-fold-btn:hover { color: var(--text); }
.dg-fold-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dg-fold:not(.closed) > .dg-fold-h { margin-bottom: var(--sp-2); }
.ru-preview { width: 100%; font-size: var(--fs-xs); margin: var(--sp-2) 0; }
.ru-preview th, .ru-preview td { text-align: start; padding: 2px var(--sp-1); }
.ru-preview tr.changed td:last-child { font-weight: 600; }
.select.input.small, select.input.small { padding: 2px 4px; font-size: 12px; }
.diag-body { flex: 1; min-height: 0; display: flex; }
.diag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.diag-side { width: 320px; flex: none; background: var(--surface); border-inline-start: 1px solid var(--line); overflow-y: auto; }
.diag-left { width: 220px; flex: none; background: var(--surface); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }

.pal-hint { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pal-item { display: flex; align-items: center; gap: 7px; padding: 5px 10px; cursor: grab; font-size: 12.5px; user-select: none; }
.pal-item:hover { background: var(--accent-2); }
.pal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cls-icon.mini { width: 20px; height: 20px; font-size: 9.5px; border-radius: 4px; }
.pal-ghost { position: fixed; z-index: 150; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 8px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; }

.dnode.drop-target > rect:first-child, .dnode.drop-target > circle { stroke: var(--dg-ok-strong) !important; stroke-width: 3 !important; }
.dnode.drop-target > rect:first-child { fill: var(--dg-ok-bg); }
.dnode.dragging { opacity: .8; pointer-events: none; }
.dnode:hover > rect:first-child { filter: brightness(1.03); }
.dnode.hl-line:not(.selected):not(.drop-target):hover > rect:first-child { fill: var(--dg-row-hover); filter: none; }
.root-node > rect:first-child { stroke-width: 2; }
.dtoggle:hover circle { fill: var(--accent-2); }
.tree-label:hover { text-decoration: underline; }

.ent-panel { font-size: 13px; }
.ep-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.insp-body .ent-panel > .ep-head:not([data-insp-head]), .insp-body .rel-panel > .ep-head:not([data-insp-head]) { display: none; }
.dg-shape-body > .ep-actions { margin-bottom: 0; }
.dg-shape-body > * + * { margin-top: var(--sp-3); }
.entity-panel .dg-shape-body > .ep-sec, .entity-panel .dg-shape-body > * > .ep-sec { border: 0; margin: var(--sp-3) 0 0; padding: 0; }
.dg-shape-body .ep-sec-head { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-2, var(--muted)); margin: 0 0 var(--sp-1); }
.insp .dg-shape-body .ep-sec-head { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
.rel-badge { background: var(--surface-2, var(--line-2)); color: var(--text-2, var(--muted)); }
.ep-body { padding: 12px; }
.ep-actions { flex-wrap: wrap; margin-bottom: 12px; }
.ep-sec { border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 4px; margin-bottom: 10px; }
.ep-sec > summary, .ep-sec-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; cursor: pointer; }
.ep-sec-head { cursor: default; }
.ep-rel { margin-bottom: 8px; }
.ep-rel-name { font-weight: 600; color: var(--text-2); font-size: 12px; }
.ep-rel-row { padding-block: 2px; padding-inline: 8px 0; font-size: 12.5px; }

.spider-pop { position: fixed; z-index: 120; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); width: 300px; max-height: 70vh; display: flex; flex-direction: column; padding: 8px 0; }
.sp-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 4px 12px; }
.sp-presets { flex-wrap: wrap; gap: 4px; padding: 0 12px 6px; }
.sp-list { overflow-y: auto; flex: 1; min-height: 60px; }
.sp-row { display: flex; align-items: center; gap: 8px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.sp-row:hover { background: var(--line-2); }
.sp-foot { border-top: 1px solid var(--line); padding: 8px 12px 0; margin-top: 4px; }

.risk-list { flex: none; max-height: 38%; overflow: auto; border-top: 1px solid var(--line); background: var(--surface); }
.risk-list .grid-table th { cursor: default; }
.risk-list .empty { padding: 16px; }
.risk-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 11px; font-weight: 700; }
.risk-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--dg-ink); }
.risk-dot:hover circle:last-of-type { filter: brightness(1.3); }

.tl-bar:hover rect, .tl-bar:hover path { filter: brightness(1.1); }
.tl-label:hover text { fill: var(--accent); }

@media print {
  .diag-left, .diag-side, .zoom-box, .risk-list input { display: none !important; }
  .diag-host, .diag-body, .diag-main { height: auto; display: block; }
  .canvas-wrap { height: 90vh; background: var(--dg-paper); }
}
.dt-menu { font-size: 18px; padding: 0 6px; margin-inline-end: -6px; }
.diag-selbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px; background: var(--accent-2); border: 1px solid var(--sel-edge); border-radius: var(--radius); position: sticky; top: 0; z-index: 5; }
.dt-checkwrap { display: inline-flex; align-items: center; margin-inline-end: 4px; cursor: pointer; }
.dt-check { margin: 0; width: 15px; height: 15px; opacity: 0; transition: opacity .1s; cursor: pointer; }
.diag-tile:hover .dt-check, .diag-tile.selecting .dt-check, .dt-check:checked, .dt-check:focus-visible { opacity: 1; }
.diag-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--sel-edge); background: var(--sel-bg); }
.diag-tile.selecting { cursor: pointer; }
.del-list { margin: 0 0 10px; padding-inline-start: 18px; max-height: 220px; overflow: auto; font-size: 13px; }
.tree-node { cursor: move; }
.tree-node .tree-hit { fill: transparent; stroke: none; }
.tree-node:hover .tree-hit { fill: var(--dg-sel-faint); }
.tree-node.selected .tree-hit { fill: var(--dg-sel-soft); stroke: var(--dg-sel-line); }
.tree-node .tree-toggle { cursor: pointer; }
.tree-node .tree-toggle:hover > rect { filter: brightness(1.1); }
.tree-node .tree-less { opacity: 0; pointer-events: none; transition: opacity .12s; }
.tree-node:hover .tree-less, .tree-node.selected .tree-less, .tree-node:focus .tree-less { opacity: 1; pointer-events: auto; }
.tree-node.dragging { opacity: .75; pointer-events: none; }
.tree-node.drop-ok .tree-hit { fill: var(--dg-ok-bg); stroke: var(--dg-ok-strong); stroke-width: 2; }
.tree-node.drop-ok .tree-circle { stroke: var(--dg-ok-strong); }
.tree-node.drop-bad .tree-hit { fill: var(--dg-bad-bg); stroke: var(--dg-bad); }
.tree-connector { stroke: var(--dg-ok); stroke-width: 1.6; stroke-dasharray: 5 4; pointer-events: none; }

.zoom-box .zoom-pct { width: 46px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 12px; color: inherit; padding: 0; }
.zoom-box .zoom-pct:focus { background: var(--input-bg); outline: 1px solid var(--accent); border-radius: 3px; }
.zoom-box button.active { background: var(--accent-2); color: var(--accent); }
svg.select-mode, svg.select-mode .bg-hit { cursor: crosshair; }
.marquee { fill: var(--dg-sel-soft); stroke: var(--dg-sel); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.dnode.selected > rect:first-child { filter: drop-shadow(0 0 3px var(--dg-sel-halo)); }
.dedge .edge-hit { pointer-events: stroke; }
.dedge:hover .edge-line { stroke-width: 2.6; }
.dedge.selected .edge-line { stroke: var(--dg-sel); }
.dedge .edge-label { paint-order: stroke; stroke: var(--dg-paper); stroke-width: 3px; stroke-linejoin: round; }
.conn-handle { fill: var(--dg-ok); stroke: var(--dg-paper); stroke-width: 2; opacity: 0; cursor: crosshair; transition: opacity .12s; }
.dnode:hover > .conn-handle, .dnode.selected > .conn-handle, .tl-bar:hover .conn-handle, .tl-bar.selected .conn-handle { opacity: 1; }
.conn-temp { stroke: var(--dg-ok); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.dnode.drop-ok > rect:first-child { stroke: var(--dg-ok-strong) !important; stroke-width: 3 !important; fill: var(--dg-ok-bg); }
.dnode.drop-bad > rect:first-child { stroke: var(--dg-bad) !important; stroke-width: 2.5 !important; fill: var(--dg-bad-bg); }
.impact-mode .conn-handle, .impact-mode .resize-handles { display: none; }
.resize-handles .rz { fill: var(--dg-paper); stroke: var(--dg-sel); stroke-width: 1.4; }
.diag-searchbox { display: inline-flex; align-items: center; gap: 3px; }
.diag-search { width: 170px; }
.search-count { min-width: 44px; text-align: end; }
.btn.icon { padding: 2px 7px; }
svg.searching .search-hit > rect:first-child, svg.searching .search-hit > .tree-hit, svg.searching .search-hit > circle { stroke: var(--dg-hit) !important; stroke-width: 3 !important; }
svg.searching .search-current > rect:first-child, svg.searching .search-current > .tree-hit, svg.searching .search-current > circle { stroke: var(--dg-hit-cur) !important; stroke-width: 4 !important; fill: var(--dg-hit-bg); }
svg.searching .tree-node.search-hit .tree-hit { fill: var(--dg-hit-bg); }
.dnode.dim, .dedge.dim { opacity: .25; }
.dnode.impact > rect:first-child { stroke: var(--dg-hit-cur); stroke-width: 2.4; }
.badge-num { display: inline-block; min-width: 16px; padding: 0 4px; margin-inline-start: 5px; border-radius: 8px; background: var(--primary); color: var(--primary-ink); font-size: 11px; line-height: 16px; text-align: center; }
.btn.primary .badge-num { background: var(--primary-ink); color: var(--primary); }
.fmt-tools { display: inline-flex; align-items: center; gap: 2px; }
.fmt-tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.fmt-btn { min-width: 26px; padding: 2px 6px; }
.fmt-btn.active { background: var(--accent-2); border-color: var(--accent); color: var(--accent); }
.fmt-a { text-decoration: underline; text-decoration-color: var(--dg-red); text-decoration-thickness: 2px; }
.color-pop { position: fixed; z-index: 160; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 10px; width: 220px; display: flex; flex-direction: column; gap: 8px; }
.cp-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cp-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.cp-sw { width: 22px; height: 22px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0; cursor: pointer; }
.cp-sw.big { width: 28px; height: 22px; flex: none; }
.cp-sw:hover { outline: 2px solid var(--accent); }
.cp-row { gap: 4px; align-items: center; }
.cp-row input[type=color] { width: 32px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; }
.rel-ends { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.rel-name { font-weight: 600; color: var(--text-2); font-size: 12.5px; padding-inline-start: 8px; }
.rel-icon { font-weight: 700; color: var(--accent); }
.ent-panel .ep-tabs-wrap .ep-tabs [data-tab="attributes"] { display: none; }
.ent-panel .ep-tabs-wrap .ep-body { padding: 8px 0 0; }
.pal-item.used { color: var(--muted); }
.pal-used { margin-inline-start: auto; color: var(--ok); font-weight: 700; }
.pal-construct { font-weight: 600; }
.pal-text { display: flex; flex-direction: column; min-width: 0; }
.pal-path { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-thumb { margin: 0 -14px; height: 130px; background: var(--canvas-bg) center / contain no-repeat; border-bottom: 1px solid var(--line-2); }
.dt-thumb.empty { display: flex; align-items: center; justify-content: center; color: #56657f; font-size: 12px; }
.type-cats { display: flex; gap: 4px; margin-bottom: 10px; }
.type-cats .btn.active { background: var(--accent-2); border-color: var(--accent); color: var(--accent); }
.risk-dot.dim { opacity: .25; }
.risk-cell.selected { filter: brightness(1.05); }
.risk-block-row { padding: 6px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 3px; }
.gr-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; display: grid; gap: 4px; }
.tl-warn { font-size: 12px; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 10px; padding: 1px 8px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-ghost { fill: var(--dg-sel-soft); stroke: var(--dg-sel); stroke-dasharray: 3 2; pointer-events: none; }
.tl-drop { pointer-events: none; }
.tl-dep:hover .edge-line { stroke-width: 2.4; }
.tl-ms:hover path { filter: brightness(1.1); }
.tl-bar .conn-handle, .tl-conn { opacity: 0; }
.tl-conn:hover, svg:hover .tl-conn { opacity: .85; }
.tree-link.selected { stroke: var(--dg-sel); }
.tree-link-hit:hover + .tree-link, .tree-link-hit:hover { stroke-opacity: 1; }
.dnode.locked > rect:first-child { fill: var(--dg-locked); stroke-dasharray: 4 3; }
.sq-msg.selected text, .sq-head.selected text { font-weight: 700; }
.ep-desc .rt-view { min-height: 22px; }
.search-count:empty { display: none; }
.diag-searchbox:not(.active) [data-ctl^="search-"] { display: none; }
.dt-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dt-head { flex-wrap: nowrap; }
.color-pop { background: var(--panel); color: var(--text); }
.risk-block, .rel-panel { background: var(--panel); color: var(--text); }
.mx-size { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.mx-labels { display: grid; gap: 5px; }
.mx-labels .pal-hint { margin-top: 6px; }
.chk-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.chk-row label { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.annot { cursor: move; }
.annot .annot-hit { pointer-events: stroke; }
.annot-text .annot-hit, .annot-image .annot-hit { pointer-events: all; }
.annot-line .annot-hit, .annot-arrow .annot-hit { pointer-events: stroke; }
.annot text { user-select: none; }
.annot-anchor { pointer-events: none; }
.annot-sel { fill: none; stroke: var(--dg-sel); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.annot-end { fill: var(--dg-paper); stroke: var(--dg-sel); stroke-width: 1.5; cursor: crosshair; }
.annot-over .conn-handle { opacity: 1; }
.annot-bar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 3px; padding: 4px 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); white-space: nowrap; max-width: calc(100% - 24px); overflow-x: auto; }
.annot-bar.hidden, .annot-bar .hidden { display: none; }
.annot-bar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-block: 0; margin-inline: 2px 6px; }
.annot-bar select { width: auto; }
.annot-editor { position: absolute; z-index: 6; margin: 0; padding: 4px 6px; border: 1.5px solid var(--accent); border-radius: 3px; background: var(--dg-paper); color: var(--dg-ink); font-family: Helvetica, Arial, sans-serif; line-height: 1.3; resize: both; box-shadow: var(--shadow); }
.annot-pal { flex: none; border-top: 1px solid var(--line); background: var(--panel); }
.annot-pal-head { display: flex; align-items: center; width: 100%; background: none; border: 0; padding: 7px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--muted); text-align: start; }
.annot-pal-head:hover { color: var(--text); }
.annot-pal-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 0 6px 8px; gap: 2px; }
.annot-pal.closed .annot-pal-grid { display: none; }
.annot-pal-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: grab; user-select: none; white-space: nowrap; overflow: hidden; color: var(--text); }
.annot-pal-item:hover { background: var(--accent-2); }
.annot-pal-icon { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 3px; font-size: 11px; color: var(--text); }
.annot-legend-rows { display: grid; gap: 4px; margin-bottom: 6px; }
.annot-legend-row { gap: 6px; align-items: center; }
.annot-legend-row input[type=color] { width: 32px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; flex: none; }
.annot-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media print { .annot-bar, .annot-editor { display: none !important; } }

.dtb { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; min-height: calc(var(--ctl-h) + 10px); padding: var(--sp-1) var(--sp-2); background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; flex: none; }
.dtb-grp { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 6px; white-space: nowrap; }
.dtb-grp > * { flex: none; }
.dtb-grp + .dtb-grp { border-inline-start: 1px solid var(--border); }
.dtb-grp.empty { display: none; }
.dtb.dtb-compact > .dtb-grp .dtb-lbl { display: none; }
.dtb:not(.dtb-compact) .dtb-cico, .dtb-pop .dtb-cico { display: none; }
.dtb-grp[data-grp=more] { margin-inline-start: auto; border-inline-start: 1px solid var(--border); padding-inline-end: 0; }
.dtb .btn.small, .dtb-pop .btn.small { white-space: nowrap; }
.dtb .btn.icon.dtb-ib { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border-color: transparent; color: var(--text-2); }
.dtb .btn.icon.dtb-ib:hover:not(:disabled) { background: var(--hover-bg); color: var(--text); }
.dtb .btn.icon.dtb-ib[aria-pressed=true] { background: var(--sel-bg); color: var(--text); border-color: var(--sel-edge); }
.dtb .btn.icon.dtb-ib:disabled { opacity: .45; }
.dtb .btn.icon.dtb-ib.has-over { color: var(--text); background: var(--surface-2); }
.dtb .tb-field, .dtb-pop .tb-field { white-space: nowrap; }
.dtb .label.checkbox, .dtb label.checkbox { white-space: nowrap; font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; }
.dtb-text { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.dtb .zoom-box { position: static; box-shadow: none; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 0; padding: 0; }
.dtb .zoom-box button { width: 28px; height: 28px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--text-2); font-size: var(--fs-md); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.dtb .zoom-box button:hover { background: var(--hover-bg); color: var(--text); }
.dtb .zoom-box .zoom-pct, .dtb .wb-pct { width: 48px; color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; text-align: center; border: 0; background: transparent; }
.dtb .zoom-box .zoom-pct:focus, .dtb .wb-pct:focus { background: var(--input-bg); outline: 1px solid var(--focus); border-radius: var(--r-sm); color: var(--text); }
.dtb .diag-searchbox { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: var(--sp-1); }
.dtb .diag-search { width: 132px; }
.dtb .diag-searchbox.active .diag-search { width: 180px; }
.dtb-pop { position: fixed; z-index: 140; min-width: 220px; max-width: min(520px, calc(100vw - 16px)); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--sp-1) 0; }
.dtb-pop.hidden, .dtb-pop .hidden { display: none; }
.dtb-addpop { position: fixed; z-index: 140; min-width: 200px; max-width: min(360px, calc(100vw - 16px)); overflow: auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--sp-1); }
.dtb-addpop.hidden, .dtb-addpop > .hidden, .dtb .dtb-add.hidden { display: none; }
.dtb-addpop > .dtb-add-h { padding: 2px var(--sp-2) var(--sp-1); }
.dtb-addpop > .btn.small { justify-content: flex-start; text-align: start; border-color: transparent; background: transparent; white-space: nowrap; }
.dtb-addpop > .btn.small:hover:not(:disabled), .dtb-addpop > .btn.small:focus-visible { background: var(--hover-bg); }
.dtb-pop-items { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.dtb-pop-sec { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.dtb-pop-h { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); }
.dtb-pop-menu .dd-item { display: block; width: 100%; text-align: start; }
.dtb-pop-menu .dd-item.danger { color: var(--danger); }
.dtb-pop .zoom-box { position: static; box-shadow: none; }
:root[data-focus="1"] .dtb { padding-inline-end: 168px; }
:root:not([data-focus="1"]) .dtb .dtb-focus-only { display: none; }
.diag-topacts { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.diag-topacts .diag-root { max-width: 260px; font-size: var(--fs-sm); }
.diag-topacts select.input.small { max-width: 220px; }
.insp .diag-side { width: auto; border: 0; background: transparent; overflow: visible; }

.dtb > .dtb-grp[data-grp=ai] { display: none !important; }

:root { --dg-focus: #0e4a59; }
.canvas-wrap svg [role=button]:focus { outline: none; }
.kbd-top, .kbd-ring { pointer-events: none; }
.kbd-ring rect { fill: none; vector-effect: non-scaling-stroke; }
.kbd-ring-halo { stroke: var(--dg-paper); stroke-width: 6; }
.kbd-ring-line { stroke: var(--dg-focus); stroke-width: 2.5; }
.dg-arrange-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dg-arrange-row .field { margin: 0; }
.dg-arrange-row .input { width: 100%; min-width: 0; }
.dg-arrange-hint { margin-top: 4px; }
.dg-connect .field { display: block; margin-bottom: 10px; }
.dg-connect select { width: 100%; }
.dg-contents { max-height: 65vh; overflow: auto; }
.dg-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 13px; }
.dg-table caption { text-align: start; font-weight: 600; padding: 4px 0; color: var(--text); }
.dg-table th, .dg-table td { text-align: start; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dg-table th { color: var(--muted); font-weight: 600; }

.add-panel { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); min-height: 0; flex: 1; overflow: hidden; }
.add-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.add-title { font-weight: 600; font-size: var(--fs-sm); }
.add-hint { color: var(--muted); font-size: var(--fs-xs); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-head .icon-btn { margin-inline-start: auto; }
.add-list { overflow-y: auto; flex: 1; min-height: 0; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-1); }
.add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 2px; }
.add-grid .pal-item { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); min-width: 0; }
.add-grid .pal-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; }
.add-sec { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin: var(--sp-2) var(--sp-2) 2px; }
.add-create .add-new { font-weight: 600; }
.pal-item { border-radius: var(--r-sm); }
.pal-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-chips { flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.tl-chips .chip-link { border: 0; cursor: pointer; }
.tl-chips .chip-link.on { background: var(--sel-bg); color: var(--text); font-weight: 600; }
.tl-ruler:hover { fill: var(--accent-2); fill-opacity: .35; }
.dg-modebar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; width: max-content; max-width: calc(100% - 16px); box-sizing: border-box; font-size: var(--fs-sm); background: linear-gradient(var(--info-bg), var(--info-bg)), var(--panel); color: var(--text); border: 1px solid var(--info); border-radius: var(--r-ctl); padding: 4px 8px; box-shadow: var(--shadow); }
.dg-modebar .sq-pick-kbd { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sq-picking .sq-lane-hit, .sq-picking .sq-head { cursor: pointer; }
.sq-picking .sq-head:hover rect { stroke-width: 3; }
.sq-head.sq-none:hover rect { stroke-width: 2.2; }
.sp-xedge { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sp-xnode > rect { fill: var(--surface); stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sp-xnode[role=link] { cursor: pointer; }
.sp-xnode[role=link]:hover > rect, .sp-xnode:focus-visible > rect { stroke: var(--accent); }
.sp-xname { font-size: 11px; fill: var(--text); }
.sp-xproj { font-size: 10px; fill: var(--muted); }
.sp-xnode.dim, .sp-xedge.dim { opacity: .25; }
.dnode.lib-node > rect:first-child { stroke-dasharray: 6 3; }
.radar-chart-title { font-size: 1em; }