.bme-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;border:1px solid rgba(0,0,0,.12);border-radius:16px;padding:16px;max-width:980px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.bme-header{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:12px}
.bme-title h3{margin:0;font-size:20px}
.bme-sub{opacity:.75;font-size:13px;margin-top:2px}
.bme-actions{display:flex;gap:8px;flex-wrap:wrap}
.bme-btn{border:0;border-radius:12px;padding:10px 12px;font-weight:600;cursor:pointer}
.bme-btn:disabled{opacity:.5;cursor:not-allowed}
.bme-primary{background:#2563eb;color:#fff}
.bme-secondary{background:rgba(0,0,0,.06);color:#111}
.bme-panel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0 10px}
@media (max-width:900px){.bme-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bme-field{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:10px}
.bme-field label{display:block;font-size:12px;font-weight:700;opacity:.8;margin-bottom:6px}
.bme-field select,.bme-field input[type="range"]{width:100%}
.bme-small{font-size:12px;opacity:.75;margin-top:6px}
.bme-tabs{display:flex;gap:8px;margin:12px 0}
.bme-tab{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}
.bme-tab.is-active{background:#111;color:#fff;border-color:#111}
.bme-grids{margin-top:8px}
.bme-gridwrap{display:none}
.bme-gridwrap.is-active{display:block}
.bme-gridhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}
.bme-grid{overflow:auto;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:#fafafa}
.bme-row{display:flex}
.bme-cell{width:34px;height:26px;border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;user-select:none;cursor:pointer}
.bme-cell:last-child{border-right:0}
.bme-row:last-child .bme-cell{border-bottom:0}
.bme-cell.is-on{background:#2563eb22;outline:2px solid #2563eb55;outline-offset:-2px}
.bme-cell.is-play{background:#fde04755}
.bme-label{width:64px;min-width:64px;position:sticky;left:0;background:#f4f4f5;border-right:1px solid rgba(0,0,0,.08);font-size:12px;font-weight:800;opacity:.9}
.bme-footer{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.12)}
kbd{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.12);padding:2px 6px;border-radius:8px;font-size:12px}


.bme-midirow{display:flex;gap:8px;align-items:center}
.bme-midirow select{flex:1}
.bme-midi-btn{padding:9px 10px}
.bme-midirow2{margin-top:8px;gap:10px;align-items:flex-start}
.bme-midicol{flex:1}
.bme-toggle{display:flex;gap:8px;align-items:center;font-size:12px;opacity:.85}
.bme-toggle input{transform:scale(1.05)}
.bme-midihelp{margin-top:6px}


/* ===== MIDI OUT: wide horizontal layout ===== */
.bme-field .bme-midirow{
  width:100%;
  align-items:center;
}
.bme-field .bme-midirow select{
  width:100%;
}
.bme-field .bme-midirow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:700px){
  .bme-field .bme-midirow2{
    grid-template-columns: 1fr;
  }
}


/* ===== MIDI OUT: span full width of the control grid ===== */
.bme-panel .bme-midi-field{
  grid-column: 1 / -1;
}
.bme-panel .bme-midi-field .bme-midirow{
  display:flex;
  gap:10px;
  align-items:center;
}
.bme-panel .bme-midi-field .bme-midirow .bme-midi-btn{
  white-space:nowrap;
}
.bme-panel .bme-midi-field .bme-midirow select{
  min-width: 260px;
}


/* Bottom action bar (near editor) */
.bme-actions-bottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.12);
  justify-content: flex-end;
}
@media (max-width:700px){
  .bme-actions-bottom{
    justify-content: stretch;
  }
  .bme-actions-bottom .bme-btn{
    flex: 1;
  }
}