.graph-lab { color: #17313b; }
.graph-lab-controls, .graph-lab-explanation { background: #fffaf0; border: 1px solid #dfd4bf; border-radius: 1.1rem; padding: clamp(1rem, 2vw, 1.6rem); }
.graph-lab-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; }
.graph-lab-fields label { display: grid; gap: .4rem; font-weight: 650; }
.graph-lab-fields [hidden] { display: none !important; }
.graph-lab-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.graph-lab-weight-toggle { display: block; margin: 1rem 0; }
.graph-lab-rule { background: #eaf5f0; border-left: 4px solid #0f635c; padding: .85rem 1rem; }
.graph-lab-status { margin: 1.5rem 0; min-height: 2.6rem; font-size: 1.1rem; }
.graph-lab-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .75rem; }
.graph-lab-metrics p { display: grid; gap: .25rem; margin: 0; padding: .85rem 1rem; background: #f0f7f6; border-radius: .75rem; }
.graph-lab-metrics strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.graph-lab-board-wrap { overflow-x: auto; background: #fffdf7; border: 1px solid #cbd9d3; border-radius: 1rem; }
.graph-lab-board-wrap svg { display: block; width: 100%; min-width: 700px; height: auto; }
.graph-edge { stroke: #becbc8; stroke-width: 2; }
.graph-edge.is-selected { stroke: #0c7062; stroke-width: 5; }
.graph-edge.is-active { stroke: #d46d31; stroke-width: 6; }
.graph-edge.is-rejected { stroke: #b33a37; stroke-width: 5; stroke-dasharray: 7 7; }
.graph-edge.is-path { stroke: #d3a329; stroke-width: 7; }
.graph-weight { fill: #334c50; font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #fffdf7; stroke-width: 4px; stroke-linejoin: round; }
.graph-weight.is-emphasized { fill: #8b3f1e; font-size: 17px; }
.graph-node circle { fill: #fffdf7; stroke: #405d60; stroke-width: 3; }
.graph-node text { fill: #17313b; font-size: 11px; font-weight: 700; pointer-events: none; }
.graph-node.is-visited circle { fill: #abd9cb; stroke: #0c7062; }
.graph-node.is-current circle { fill: #e49763; stroke: #9b3e24; stroke-width: 4; }
.graph-node.is-target circle { stroke: #aa7822; stroke-width: 5; }
.graph-lab-legend { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 1rem 0; font-size: .9rem; }
.graph-lab-legend span { display: inline-flex; gap: .5rem; align-items: center; }
.graph-lab-legend i { display: inline-block; width: 1.7rem; height: 0; border-top: 4px solid; }
.graph-legend-unused { border-color: #becbc8 !important; }
.graph-legend-selected { border-color: #0c7062 !important; }
.graph-legend-active { border-color: #d46d31 !important; }
.graph-legend-path { border-color: #d3a329 !important; }
.graph-lab-explanation h2 { font-size: 1.4rem; }
.graph-lab-explanation p { margin-bottom: 0; }