.rule-diagram h3{font-size:15px;margin:0 0 8px}
.rule-diagram p{font-size:12px;line-height:1.65;margin:10px 0}
.rule-diagram-tabs{display:flex;gap:6px;margin:14px 0 8px}
.rule-diagram-tabs button{font-size:12px;padding:5px 12px}
.rule-diagram-canvas{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.rule-diagram-canvas.dragging{cursor:grabbing}
.rule-diagram-canvas.plan{cursor:default;touch-action:auto}
.rule-diagram-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rule-diagram-canvas svg{display:block;width:100%;height:320px}
.rule-diagram-navigation{display:flex;align-items:center;gap:8px;font-size:11px;margin:10px 0;color:var(--dim);line-height:1.5}
.rule-diagram-navigation span{flex:1}.rule-diagram-navigation button{font-size:11px;white-space:nowrap}
.rule-diagram-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--dim);margin:12px 0}
.rule-diagram-legend span{display:flex;align-items:center;gap:5px}
.rule-diagram-legend i{width:10px;height:10px;background:#299bb6;border-radius:2px}
.rule-diagram-legend i.context{background:#c9a879}
.rule-diagram a{font-size:12px}