.chart-container {
    position: relative;
    height: 120px;
    margin: 2rem 0;
}

.price-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
    transform: translateY(-50%);
}

/* 定位相关样式 */
.discount-node,
.price-node,
.original-price-marker,
.price-range-overlay {
    position: absolute;
}

.discount-node,
.price-node {
    transform: translateX(-50%);
}

/* 原价标记点样式 */
.original-price-marker {
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.original-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ef4444;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #ef4444;
    cursor: pointer;
}

.original-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #ef4444;
    white-space: nowrap;
}

/* 折扣节点样式 */
.discount-node {
    top: calc(50% - 15px);
    transform: translateX(-50%) translateY(-50%);
}

.discount-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #165DFF;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #165DFF;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.discount-price {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    font-size: 11px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    text-align: center;
    z-index: 9;
}

.discount-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-15px);
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    z-index: 10;
}

/* 价格区间节点样式 */
.price-node {
    top: calc(50% + 15px);
    transform: translateX(-50%) translateY(-50%);
}

.price-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #3b82f6;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.price-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    white-space: nowrap;
    z-index: 5;
}

/* 价格区间覆盖层样式 */
.price-range-overlay {
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.price-range-overlay:hover {
    background: rgba(59, 130, 246, 0.3);
    transform: translateY(-50%) scaleY(1.2);
}

.price-range-overlay.highlighted {
    background: rgba(59, 130, 246, 0.4);
    border: 2px solid rgba(59, 130, 246, 0.8);
    transform: translateY(-50%) scaleY(1.3);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    z-index: 15;
}