.arch-toolbar { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.arch-muted { color: var(--ta-muted); font-size: 0.9em; }
.arch-layout { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.arch-graph-wrap {
  flex: 2 1 560px; min-width: 280px; background: var(--ta-surface);
  border: 1px solid var(--ta-border); border-radius: var(--ta-r-lg);
}
#arch-svg { width: 100%; height: auto; display: block; }
.arch-details {
  flex: 1 1 260px; min-width: 220px; background: var(--ta-surface);
  border: 1px solid var(--ta-border); border-radius: var(--ta-r-lg);
  padding: 14px; font-size: 0.92em; max-height: 640px; overflow-y: auto;
}
.arch-details h4 { margin: 0 0 6px; }
.arch-details .arch-deplist { margin: 4px 0 10px; padding-left: 18px; }
.arch-legend { display: flex; gap: 18px; align-items: center; margin: 10px 0 24px; font-size: 0.88em; flex-wrap: wrap; }
.arch-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.arch-swatch-lo { background: var(--ta-accent-soft); border: 1px solid var(--ta-accent); }
.arch-swatch-mid { background: var(--ta-accent); }
.arch-swatch-hi { background: var(--ta-accent-hover); }
.arch-node circle { stroke: var(--ta-surface); stroke-width: 2px; cursor: pointer; }
.arch-node text { fill: var(--ta-text); font-size: 11px; pointer-events: none; }
.arch-node.arch-dim circle { opacity: 0.25; }
.arch-node.arch-dim text { opacity: 0.35; }
.arch-edge { stroke: var(--ta-border-strong); stroke-width: 1px; opacity: 0.55; }
.arch-edge.arch-dim { opacity: 0.08; }
tr.arch-row-hidden { display: none; }