.fs {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px;
  padding: 12px; max-width: 1400px; margin: 0 auto; align-items: start;
}
.plots { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plot-wrap { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.plot-wrap canvas { width: 100%; height: 100%; }
.plot-wrap.wave { height: max(240px, 40vh); }
.plot-wrap.wave canvas { cursor: crosshair; }
.plot-wrap.spec { height: max(180px, 30vh); }
.plot-wrap.spec canvas { cursor: ns-resize; }
.controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.controls .panel { display: flex; flex-direction: column; gap: 6px; }
.button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.button-grid button { padding: 3px 4px; font-size: 13px; }
@media (max-width: 900px) { .fs { grid-template-columns: minmax(0, 1fr); } }