.color-bar-container {
    width: 100%;
    height: 10px !important; /* Reduced height by half with important priority */
    display: flex;
    /* 其他样式，例如边框、阴影等 */
    overflow: visible; /* Change to visible to prevent marker clipping */
    position: relative; /* Needed for absolute positioning of marker */
    border-radius: 4px; /* Example: rounded corners */
    margin-bottom: 15px; /* Add some space below */
}

.color-bar-segment {
    height: 100%;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* background-color 和 background-image 将由短码处理 */
    /* 其他样式，例如过渡效果等 */
}

.color-bar-marker {
    position: absolute;
    bottom: 10px; /* Adjusted position to align tip slightly above the new bottom of the bar */
    left: 20%; /* Placeholder position - will be updated by JS */
    transform: rotate(-45deg); /* Only rotate, removed translateX(-50%) */
    z-index: 10; /* Ensure it's above the color bar */

    width: 22px; /* Pin width */
    height: 22px; /* Pin height */
    background-color: #444; /* Pin body color (dark grey) */
    border-radius: 50% 50% 50% 0; /* Create a tear-drop shape */

    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: grab; /* Indicate draggable */
    display: flex; /* Use flexbox to center the inner circle */
    justify-content: center;
    align-items: center;
    transform-origin: 0% 100%; /* Set rotation origin to the tip */
}

.color-bar-marker:active {
    cursor: grabbing;
}

.color-bar-marker span {
    width: 10px; /* Circle size */
    height: 10px; /* Circle size */
    border-radius: 50%;
    background-color: orange; /* Placeholder for dynamic color */

    transform: rotate(45deg); /* Counter-rotate the circle */
}