.stock-chart, .structure-chart {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    height: 300px;
}

.chart-header {
    margin-bottom: 20px;
}

.chart-header h3 {
    margin: 0;
    color: #333;
    font-size: 18px;
}

.price {
    font-size: 24px;
    font-weight: bold;
}

.change {
    font-size: 16px;
    margin-left: 10px;
}

.change.positive {
    color: #4CAF50;
}

.chart-body {
    position: relative;
    height: 200px;
    margin-top: 20px;
}

/* Line Chart */
.chart-line {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(76,175,80,0.1) 0%, rgba(76,175,80,0) 100%);
    clip-path: polygon(
        10% 60%, 25% 40%, 40% 70%, 
        55% 55%, 70% 80%, 85% 65%, 
        100% 90%, 100% 100%, 0 100%, 0 60%
    );
}

.chart-points {
    position: absolute;
    width: 100%;
    height: 100%;
}

.point {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
}

/* Bar Chart */
.structure-chart .chart-body {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 220px;
    padding-top: 20px;
}

.bar {
    width: 60px;
    height: calc(var(--height));
    background: #2196F3;
    position: relative;
    transition: height 0.3s ease;
}

.bar .label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.bar .value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    color: #333;
}