.diagram-container, .diagram-container2 {
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: clamp(8px, 1.332vw, 16px);
    box-shadow: 0 clamp(4px, 0.888vw, 12px) clamp(12px, 2.664vw, 32px) rgba(0, 0, 100, 0.1);
    padding: clamp(12px, 2.664vw, 24px);
    margin-top: clamp(20px, 6.66vw, 40px);
}

.diagram-header, .diagram-header2 {
    text-align: center;
    margin-bottom: clamp(12px, 2.664vw, 24px);
    padding-bottom: clamp(8px, 1.776vw, 16px);
    border-bottom: clamp(1px, 0.0888vw, 2px) solid #eaeaea;
}

.diagram-title, .diagram-title2 {
    color: #000;
    margin-bottom: clamp(4px, 0.888vw, 8px);
    font-size: clamp(18px, 2.1312vw, 28px);
    line-height: 1.2;
}

.diagram-content, .diagram-content2 {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 3.552vw, 24px);
    justify-content: center;
    align-items: center;
}

.diagram-chart-container, .diagram-chart-container2 {
    flex: 1;
    min-width: min(26.64vw, 300px);
    max-width: 100%;
    position: relative;
}

#circular-diagram-chart, #circular-diagram-chart2 {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-height: 400px;
}

.diagram-legend, .diagram-legend2 {
    flex: 1;
    min-width: min(26.64vw, 280px);
    max-width: 100%;
}

.diagram-legend-item, .diagram-legend-item2 {
    display: flex;
    align-items: center;
    margin-bottom: clamp(8px, 1.332vw, 12px);
    padding: clamp(8px, 1.0656vw, 12px) clamp(10px, 1.332vw, 16px);
    background-color: #f8fafd;
    border-radius: clamp(4px, 0.7104vw, 8px);
    border-left: clamp(3px, 0.3552vw, 4px) solid #000;
    transition: all 0.3s ease;
}

.diagram-color-indicator, .diagram-color-indicator2 {
    width: clamp(16px, 1.776vw, 20px);
    height: clamp(16px, 1.776vw, 20px);
    border-radius: clamp(2px, 0.3552vw, 4px);
    margin-right: clamp(10px, 1.332vw, 14px);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.diagram-legend-text-container, .diagram-legend-text-container2 {
    flex: 1;
    min-width: 0; /* Allows text truncation */
}

.diagram-category-name, .diagram-category-name2 {
    font-weight: 600;
    color: #000;
    margin-bottom: clamp(2px, 0.2664vw, 4px);
    font-size: clamp(14px, 1.1988vw, 16px);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.diagram-value-display, .diagram-value-display2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.diagram-absolute-value, .diagram-absolute-value2,
.diagram-percentage-value, .diagram-percentage-value2 {
    font-size: clamp(12px, 1.1988vw, 14px);
    line-height: 1.4;
}

.diagram-absolute-value, .diagram-absolute-value2 {
    color: #7f8c8d;
}

.diagram-percentage-value, .diagram-percentage-value2 {
    color: #000;
    font-weight: 500;
}

/* Responsive layouts */
@media (max-width: 1024px) {
    .diagram-content, .diagram-content2 {
        gap: clamp(12px, 2vw, 20px);
    }
    
    .diagram-chart-container, .diagram-chart-container2,
    .diagram-legend, .diagram-legend2 {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .diagram-container, .diagram-container2 {
        padding: clamp(10px, 3vw, 16px);
        margin-top: clamp(15px, 5vw, 25px);
    }
    
    .diagram-title, .diagram-title2 {
        font-size: clamp(16px, 4vw, 20px);
    }
    
    .diagram-content, .diagram-content2 {
        flex-direction: column;
        gap: clamp(20px, 4vw, 30px);
    }
    
    .diagram-legend-item, .diagram-legend-item2 {
        padding: clamp(10px, 3vw, 14px);
    }
    
    .diagram-category-name, .diagram-category-name2 {
        font-size: clamp(13px, 3.5vw, 15px);
    }
    
    .diagram-absolute-value, .diagram-absolute-value2,
    .diagram-percentage-value, .diagram-percentage-value2 {
        font-size: clamp(11px, 3vw, 13px);
    }
}

@media (max-width: 480px) {
    .diagram-title, .diagram-title2 {
        font-size: clamp(14px, 5vw, 18px);
    }
    
    .diagram-category-name, .diagram-category-name2 {
        font-size: clamp(12px, 4vw, 14px);
    }
    
    .diagram-legend-item, .diagram-legend-item2 {
        padding: clamp(8px, 3vw, 12px);
        margin-bottom: clamp(6px, 2vw, 10px);
    }
    
    .diagram-color-indicator, .diagram-color-indicator2 {
        width: clamp(14px, 4vw, 18px);
        height: clamp(14px, 4vw, 18px);
    }
}