.charts-panel{background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:16px;padding:20px;box-shadow:0 9px 28px #153a5512}
.charts-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.charts-head p{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--blue);margin:0}
.charts-head h2{font-size:20px;margin:2px 0}
.charts-head span{font-size:11px;color:var(--muted)}
.period-picker{display:flex;background:#edf3f7;border-radius:11px;padding:4px;gap:3px}
.period-picker button{border:0;background:transparent;color:#637b8d;border-radius:8px;padding:8px 14px;font-weight:850;cursor:pointer}
.period-picker button.active{background:var(--blue);color:#fff;box-shadow:0 5px 12px #1e5eb930}
.tariff-info{display:flex;align-items:center;gap:18px;margin:13px 0;color:#627b8e;font-size:11px}
.tariff-info span{display:flex;align-items:center;gap:5px}.tariff-info i{width:9px;height:9px;border-radius:50%}
.wbp-dot{background:#e22c43}.lwbp-dot{background:#1766d0}.tariff-info small{margin-left:auto;color:#8ca0af}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chart-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:linear-gradient(180deg,#fff,#f9fbfd)}
.chart-title{display:flex;align-items:center;justify-content:space-between}.chart-title span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--blue)}
.imbalance-chart .chart-title span{color:#d7283e}.chart-title h3{font-size:15px;margin:2px 0}.chart-stat{text-align:right}
.chart-stat small,.chart-stat b{display:block}.chart-stat small{font-size:9px;color:var(--muted);text-transform:uppercase}.chart-stat b{font-size:17px}
.canvas-wrap{height:210px;position:relative;margin-top:8px}.canvas-wrap canvas{display:block;width:100%;height:210px}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8ba0ae;background:#f7fafc;border-radius:10px}
.chart-foot{display:flex;justify-content:space-between;color:#71889a;font-size:10px;border-top:1px solid #e6eef3;padding-top:8px}
@media(max-width:720px){.charts-head{align-items:flex-start;flex-direction:column}.period-picker{width:100%}.period-picker button{flex:1}.tariff-info{align-items:flex-start;flex-direction:column;gap:6px}.tariff-info small{margin-left:0}.charts-grid{grid-template-columns:1fr}}