#draw-clip-toolbar {
    position: absolute;
    z-index: 32;
    top: 12px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 7px;
    border: 1px solid rgba(153, 126, 255, .45);
    border-radius: 10px;
    background: rgba(13, 15, 23, .92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .42);
    color: #f3f0ff;
    transform: translateX(-50%);
    overflow-x: auto;
}

#draw-clip-toolbar.hidden { display: none; }
#draw-clip-toolbar button,
#draw-clip-toolbar label {
    flex: 0 0 auto;
}
#draw-clip-toolbar button {
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #41475b;
    border-radius: 7px;
    background: #252936;
    color: inherit;
    cursor: pointer;
}
#draw-clip-toolbar button:hover,
#draw-clip-toolbar button.active {
    border-color: #9b7bff;
    background: #6544c7;
}
#draw-clip-toolbar button:disabled { opacity: .4; cursor: default; }
#draw-clip-toolbar label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
#draw-clip-toolbar input[type="range"] { width: 76px; }
#draw-clip-toolbar input[type="color"] { width: 32px; height: 28px; padding: 1px; border: 0; background: transparent; }
body.draw-clip-editing #canvas { cursor: crosshair; touch-action: none; }
.timeline-clip.draw-clip { background: linear-gradient(135deg, #5140a7, #9d4fbb); }
.draw-clip-label { padding: 6px 8px; color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }

@media (max-width: 720px) {
    #draw-clip-toolbar { top: 7px; max-width: calc(100% - 12px); padding: 5px; }
    #draw-clip-toolbar button { min-height: 38px; }
}