/* Sorting visualiser: tool-specific styles. Theme comes from ../synthwave.css */
.toolbar { display: grid; gap: 14px; }

.algo-list { display: flex; flex-wrap: wrap; gap: 10px; }
.algo-list label {
  cursor: pointer; padding: 6px 14px; border: 1px solid var(--cyan); border-radius: 999px;
  display: flex; align-items: center; gap: 6px; user-select: none; transition: .15s;
}
.algo-list label:has(input:checked) { background: rgba(5, 217, 232, .2); box-shadow: 0 0 12px var(--cyan); }
.algo-list label.disabled { opacity: .4; cursor: not-allowed; }

.row label { display: flex; align-items: center; gap: 10px; }

.panels { display: grid; gap: 16px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.panel h2 { display: flex; justify-content: space-between; }
.panel h2 .status { font-size: .75rem; color: var(--green); text-shadow: 0 0 6px var(--green); }
canvas { width: 100%; height: 300px; display: block; background: var(--canvas-bg); border-radius: 6px; }
.stats { display: flex; gap: 16px; margin-top: 8px; font-size: .85rem; color: var(--cyan); flex-wrap: wrap; }
.stats b { color: var(--hi); }
.complexity { font-size: .75rem; opacity: .7; margin-top: 4px; }