.chart-wrapper{margin:20px 0;width:100%}.chart-container{position:relative;margin:20px 0;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgb(0 0 0 / .1)}.chart-placeholder{min-height:300px;position:relative;background:#f8f9fa;border-radius:8px;margin:20px 0}.chart-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 10px}.loading-text{color:#666;font-size:14px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.chart-error{padding:15px;margin:10px 0;background-color:#fff3f3;border:1px solid #ffcdd2;border-radius:4px;color:#d32f2f;text-align:center}.chart-controls{margin-top:10px;text-align:right}.export-chart{background-color:#4CAF50;color:#fff;padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.export-chart:hover{background-color:#45a049}canvas{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}@media (max-width:768px){.chart-container{width:100%;height:400px}}.charts-row{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:20px}.chart-box{flex:1 1 49%;box-sizing:border-box}