.breed-controls {display:flex;flex-wrap:wrap;gap:12px 24px;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:6px}
.breed-controls label {display:flex;align-items:center;gap:6px;cursor:pointer}
.breed-controls input {width:auto;min-width:0;margin:0}
.breed-swatch {display:inline-block;width:24px;border-top:3px solid}
.breed-highland {border-color:#257044}.breed-angus {border-color:#525963;border-top-style:dashed}.breed-red_angus {border-color:#b33939}.breed-simmental {border-color:#2468ac;border-top-style:dotted}.breed-hereford {border-color:#81439b;border-top-style:dashed}
.breed-chart-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:18px;margin:20px 0}
.breed-chart {min-width:0;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--panel)}
.breed-chart h3 {margin:0 0 8px}.breed-chart svg {display:block;width:100%;height:auto}
.breed-chart .chart-legend {font-size:.83rem;display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:6px}
.breed-chart .chart-legend span {display:inline-flex;align-items:center;gap:5px}
#breed-summary td,#breed-summary th {white-space:nowrap}

.breed-expand-button {margin-top:12px}
.breed-chart-dialog {width:min(1200px,96vw);max-width:96vw;max-height:94vh;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);overflow:auto}
.breed-chart-dialog::backdrop {background:rgba(0,0,0,.65)}
.breed-chart-dialog h2 {margin:0 0 12px}.breed-viewer-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.breed-viewer-toolbar button:disabled {opacity:.5;cursor:default}
.breed-viewer-viewport {height:min(60vh,660px);min-height:220px;overflow:hidden;border:1px solid var(--line);background:#fffaf0;touch-action:none}
.breed-viewer-viewport svg {display:block;width:100%;height:100%;user-select:none}
.breed-viewer-viewport.is-zoomed {cursor:grab}.breed-viewer-viewport.is-zoomed:active {cursor:grabbing}
.breed-chart-dialog .chart-legend {display:flex;flex-wrap:wrap;gap:10px 20px;margin:14px 0;font-size:.9rem}
.breed-chart-dialog .chart-legend span {display:inline-flex;align-items:center;gap:6px}
@media (max-width:600px) {.breed-chart-dialog {padding:12px}.breed-viewer-viewport {height:45vh}.breed-viewer-toolbar {gap:6px}}