/* Compositor: grade de bateria (step sequencer). */
.crux-cx .cx-dg { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--cx-bg); }
.crux-cx .cx-dg-toolbar { flex: 0 0 auto; }
.crux-cx .cx-dg-title { color: var(--cx-gold); font-weight: bold; }
.crux-cx .cx-dg-step { color: var(--cx-mute); font-family: monospace; padding: 2px 6px; border: 1px solid var(--cx-line); border-radius: 3px; cursor: help; }
.crux-cx .cx-dg-ruler { flex: 0 0 auto; }
.crux-cx .cx-dg-off { opacity: 0.45; }
.crux-cx .cx-dg-main { position: relative; flex: 1 1 0; min-height: 0; }
.crux-cx .cx-canvas.cx-dg-grid { position: absolute; left: 150px; right: 0; top: 0; bottom: 0; }
.crux-cx .cx-dg-grid .cx-canvas-scroll { cursor: pointer; }

/* coluna de nomes das peças: rola junto com a grade na vertical */
.crux-cx .cx-dg-names { position: absolute; left: 0; top: 0; bottom: 0; width: 150px; overflow: hidden; background: #101018; border-right: 1px solid var(--cx-line); z-index: 2; }
.crux-cx .cx-dg-names-inner { will-change: transform; }
.crux-cx .cx-dg-name { box-sizing: border-box; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-bottom: 1px solid #0a0a10; cursor: pointer; user-select: none; overflow: hidden; }
.crux-cx .cx-dg-name:hover { background: rgba(255, 255, 255, 0.05); }
.crux-cx .cx-dg-name.on { background: rgba(255, 210, 122, 0.14); box-shadow: inset 3px 0 0 #ffd27a; }
.crux-cx .cx-dg-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; }
.crux-cx .cx-dg-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.crux-cx .cx-dg-nm { color: var(--cx-text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crux-cx .cx-dg-name.on .cx-dg-nm { color: #ffe7a8; }
.crux-cx .cx-dg-gm { color: var(--cx-mute); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crux-cx .cx-dg-compact .cx-dg-gm { display: none; }