.fname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wave { position: relative; height: 190px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); touch-action: none; cursor: crosshair; user-select: none; overflow: hidden; }
.wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sel { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); pointer-events: none; }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.handle { position: absolute; top: 0; bottom: 0; width: 22px; margin-left: -11px; cursor: ew-resize; display: grid; place-items: center; z-index: 2; }
.handle i { width: 10px; height: 42px; border-radius: 6px; background: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.handle:focus-visible { outline: none; }
.handle:focus-visible i { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); }
.hint { margin: -4px 0 0; }
.field.inline { display: flex; align-items: center; gap: 6px; }
.field.inline .input { width: 104px; min-height: 34px; padding: 5px 8px; font-size: 13px; }
.field.range { grid-template-columns: 1fr auto; }
.field.range input { grid-column: 1 / -1; }
.field .val { font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.export { padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .tr-bar .grow { flex-basis: 100%; height: 0; } .seg button { padding: 6px 9px; } }