#comboChart {
  width: 100%;
  height: 250px;
  max-height: 250px;
}

.kpi-wrap {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
}
.kpi-card {
  grid-column: span 4;
  /* background: #fff; */
  border-radius: 16px;
  padding: 16px;
  /* box-shadow: 0 8px 24px rgba(0,0,0,.06); */
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
}
.kpi-icon {
  background: transparent!important;
  width: 64px; height: 64px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 24px;
}
.kpi-content { display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 13px; color: #748092; letter-spacing:.3px; text-transform:uppercase; }
.kpi-value { font-size: 24px; font-weight: 700; }
.kpi-trend { font-size: 12px; color: #748092; }

/* circular rating */
.rating-ring {
  --val: 4.6;            /* текущий рейтинг (0..5) */
  --pct: calc(var(--val) / 5 * 100%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    conic-gradient(#f0c500 var(--pct), #e9eef6 0);
  display: grid; place-items: center;
}
.rating-ring span {
  background:#f3f4f6; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:700; font-size:14px;
  color: #f0c500;
}

.panel {
  grid-column: 1 / -1;
  background:#fff; border-radius:16px; padding:16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.panel-title { font-weight:700; }
.panel-sub { color:#748092; font-size:12px; }

@media (max-width: 920px) {
  .kpi-card { grid-column: span 12; }
}