.visual-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; }
.visual-navigation { display: flex; flex: 0 0 auto; gap: 6px; }
.visual-navigation button { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; }
.visual-toolbar button:focus-visible, .visual-toolbar select:focus-visible, .visual-block-body:focus-visible { outline: 2px solid var(--accent, #edc36e); outline-offset: 2px; }
.visual-window-indicator { flex: 1 1 260px; font-size: 12px; }
.visual-audio-picker { flex-wrap: wrap; font-size: 12px; max-width: 100%; }
.visual-audio-picker select { width: auto; max-width: min(320px, 100%); padding: 6px; }
.visual-toolbar label { display: flex; align-items: center; gap: 6px; }
.visual-toolbar input { width: auto; }
.visual-surface { width: 100%; min-width: 0; }
.visual-ruler { position: relative; height: 32px; border-bottom: 1px solid var(--border, #40546e); }
.visual-ruler span { position: absolute; font-size: 12px; white-space: nowrap; }
.visual-track { position: relative; background: rgba(90,130,180,.07); border: 1px solid var(--border, #40546e); overflow: hidden; }
.visual-dense-audio { display: block; touch-action: pan-y; }
.visual-block { position: absolute; height: 92px; min-width: 2px; border: 1px solid #80b8ee; background: #1b4563; border-radius: 6px; overflow: hidden; box-sizing: border-box; }
.visual-occurrence { min-width: 0; border: 0; box-shadow: inset 0 0 0 1px #80b8ee; }
.visual-occurrence .visual-block-body { min-width: 0; padding: 0; }
.visual-session { background: #493c68; border-color: #b99af1; }
.visual-tone { background: #3e553e; }
.visual-block.selected { outline: 3px solid #f3ce67; outline-offset: -3px; }
.visual-occurrence.selected { outline: none; box-shadow: inset 0 0 0 1px #f3ce67; }
.visual-block-body { display: block; width: 100%; height: 100%; padding: 8px 23px 8px 8px; border: 0; border-radius: 0; text-align: left; background: transparent; color: #fff; overflow: hidden; }
.visual-block-body strong, .visual-block-body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visual-block-body small { font-size: 11px; }
.visual-block-body { touch-action: pan-y; }
.visual-handle { position: absolute; right: 0; top: 0; bottom: 0; width: min(24px, 40%); padding: 0; border-radius: 0; background: #ffffff22; color: white; cursor: ew-resize; touch-action: none; }
.visual-handle-start { left: 0; right: auto; }
.visual-session .visual-block-body { padding-left: 28px; }
.visual-dialog { width: min(960px, 94vw); max-height: 88dvh; box-sizing: border-box; overflow: auto; background: var(--panel, #142132); color: var(--text, #eef3fb); border: 1px solid #678; border-radius: 12px; padding: 20px; }
.visual-dialog::backdrop { background: #0009; }
.visual-dialog .timeline-block { margin: 16px 0; }
.visual-dialog input, .visual-dialog select { max-width: 100%; }
.visual-dialog .actions { position: sticky; bottom: -20px; padding: 16px 0; background: var(--panel, #142132); }
@media(max-width: 600px) { .visual-dialog .tri-grid, .visual-dialog .block-band-values { display: grid; grid-template-columns: 1fr; } .visual-navigation button { flex-basis: 40px; width: 40px; height: 40px; min-height: 40px; } .visual-handle { width: min(30px, 40%); } }