/* ============================================================
   SVM-тренажёр — интерактив для Практики 7.
   ============================================================ */
.svm-lab {
  margin: 24px 0; border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel); box-shadow: var(--shadow); overflow: hidden;
  display: flex; gap: 18px; flex-wrap: wrap; padding: 16px 18px;
}
.sl-canvas-wrap { flex: 0 0 auto; }
.sl-canvas-wrap canvas {
  display: block; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-2); cursor: crosshair; max-width: 100%; touch-action: none;
}
.sl-controls { flex: 1 1 200px; min-width: 200px; max-width: 260px; display: flex; flex-direction: column; gap: 9px; }
.sl-row { display: flex; flex-direction: column; gap: 3px; }
.sl-row-inline { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.sl-row-buttons { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sl-label {
  font-size: 12px; color: var(--muted); font-family: ui-monospace, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .04em;
}
.sl-row label {
  font-size: 13px; color: var(--muted); display: flex; justify-content: space-between;
}
.sl-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.sl-val { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--text); }

.sl-btn-group { display: flex; gap: 6px; }
.sl-btn {
  cursor: pointer; border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); border-radius: 8px; padding: 5px 11px; font-size: 13px;
  font-family: inherit; transition: border-color .15s, color .15s;
}
.sl-btn:hover { border-color: var(--accent); }
.sl-class-btn.active[data-class="1"] { border-color: var(--accent-2); color: var(--accent-2); }
.sl-class-btn.active[data-class="-1"] { border-color: var(--red); color: var(--red); }
.sl-kernel-btn.active { border-color: var(--accent); color: var(--accent); }

.sl-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sl-note code { color: var(--text); }