/* Diagram canvas tokens. The canvas stays light in both themes (by design); the chrome around it uses the theme tokens. */
: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);
  --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;
}
/* ---------- diagrams dashboard ---------- */
.diag-dash .diag-filters { margin-bottom: 16px; }
.split-btn { display: inline-flex; }
.split-btn .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-btn .btn.caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 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: left; 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); }

/* ---------- diagram host ---------- */
.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); }
.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-left: 1px solid var(--line); overflow-y: auto; }
.diag-left { width: 220px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }

/* left palette */
.pal-tabs { display: flex; border-bottom: 1px solid var(--line); flex: none; }
.pal-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 4px; font-size: 12.5px; color: var(--muted); }
.pal-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.pal-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; overflow: hidden; }
.pal-list { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -8px; }
.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-wide { justify-content: center; }
.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; }

/* node states */
.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); }
.root-node > rect:first-child { stroke-width: 2; }
.dtoggle:hover circle { fill: var(--accent-2); }
.tree-label:hover { text-decoration: underline; }

/* entity properties panel */
.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; }
/* In the shared inspector its header already names the selection (class or Relationship) and hides it: no second title row. */
.insp-body .ent-panel > .ep-head, .insp-body .rel-panel > .ep-head { display: none; }
.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: 2px 0 2px 8px; font-size: 12.5px; }

/* spider relationship filter */
.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 */
.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); }

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

@media (max-width: 760px) {
  .diag-left, .diag-side { display: none; }
}
@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-right: -6px; }
/* multi-select */
.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-right: 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-left: 18px; max-height: 220px; overflow: auto; font-size: 13px; }
/* Tree diagram: movable nodes, re-parent drop targets, connectors */
.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-circle { cursor: pointer; }
.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; }

/* ---------- framework (diagram-core) ---------- */
.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)); }
/* selectable edges */
.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; }
/* connect handles (green dots) */
.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 */
.resize-handles .rz { fill: var(--dg-paper); stroke: var(--dg-sel); stroke-width: 1.4; }
/* search */
.diag-searchbox { display: inline-flex; align-items: center; gap: 3px; }
.diag-search { width: 170px; }
.search-count { min-width: 44px; text-align: right; }
.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); }
/* impact analysis */
.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-left: 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); }
/* format toolbar + color picker */
.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; }
/* relationship panel */
.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-left: 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; }
/* palette extras */
.pal-root { padding: 8px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; flex: none; font-size: 12.5px; }
.pal-root-head { display: flex; align-items: center; justify-content: space-between; }
.pal-root-name { font-weight: 600; }
.pal-root-desc { color: var(--muted); font-size: 12px; max-height: 60px; overflow: auto; }
.pal-item.used { color: var(--muted); }
.pal-used { margin-left: auto; color: var(--ok); font-weight: 700; }
.pal-sub { margin: 6px 10px 2px; }
.pal-construct { font-weight: 600; }
/* dashboard thumbnails */
.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: var(--muted); 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; }
/* theme-aware backgrounds for the new framework pieces */
.color-pop { background: var(--panel); color: var(--text); }
.pal-root, .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; }
/* ---------- annotations (diagram-core.js) ---------- */
.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: 0 6px 0 2px; }
.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: left; }
.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; } }

/* ---------- diagram toolbar contract (Diagram.toolbar): one row, Mode · Insert · Edit · View · Type · Output · AI · More ---------- */
.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 + .dtb-grp { border-left: 1px solid var(--border); }
.dtb-grp.empty { display: none; }
.dtb-grp[data-grp=more] { margin-left: auto; border-left: 1px solid var(--border); padding-right: 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-left: 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-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: left; }
.dtb-pop-menu .dd-item.danger { color: var(--danger); }
.dtb-pop .zoom-box { position: static; box-shadow: none; }
/* Focus mode: leave room for the floating "Exit focus" pill over the toolbar's right end. */
:root[data-focus="1"] .dtb { padding-right: 168px; } /* room for the fixed exit pill (≈146 px + 8 px inset) */
/* Topbar page actions of an open diagram (root chip, type, parent). */
.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; }
/* Diagram panels inside the shared inspector. */
.insp .diag-side { width: auto; border: 0; background: transparent; overflow: visible; }

/* The AI group's items are listed in the top-bar AI control (one AI control per screen). */
.dtb > .dtb-grp[data-grp=ai] { display: none !important; }