.rank-chart {
  display: grid;
  gap: 13px;
}

.analysis-filters {
  display: grid;
  grid-template-columns: .65fr 1fr 1fr 1.8fr auto;
  gap: 10px;
  align-items: end;
  margin: 16px 0 4px;
  padding: 14px;
  border: 1px solid #d7e1e6;
  border-radius: 12px;
  background: #f8fbfc;
}

.analysis-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clipboard-helper {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.rank-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e6f2f5;
  color: #176b87;
  font-weight: 800;
  font-size: .78rem;
}

.rank-content { min-width: 0; }

.rank-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  margin-bottom: 5px;
}

.rank-label > span {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
}

.rank-label strong {
  font-size: .8rem;
  white-space: nowrap;
  color: #294553;
}

.rank-label small,
.chart-legend small {
  font-weight: 600;
  color: #71848e;
  margin-left: 4px;
}

.rank-content > b {
  display: block;
  background: #edf2f4;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
}

.rank-content > b i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #176b87, #48a9a6);
  border-radius: 99px;
}

.bar-svg {
  display: block;
  width: 100%;
  height: 10px;
}

.bar-base { fill: #edf2f4; }
.bar-value { fill: #176b87; }

.donut {
  background: none;
}

.donut-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-svg circle {
  fill: none;
  stroke-width: 8;
}

.donut-base { stroke: #edf2f4; }
.chart-stroke-0 { stroke: #176b87; }
.chart-stroke-1 { stroke: #48a9a6; }
.chart-stroke-2 { stroke: #e6a23c; }
.chart-stroke-3 { stroke: #7c6db0; }
.chart-stroke-4 { stroke: #d05b5b; }
.chart-stroke-5 { stroke: #76a85b; }
.chart-stroke-6 { stroke: #4f7cac; }
.chart-stroke-7 { stroke: #b7794b; }
.chart-fill-0 { background: #176b87; }
.chart-fill-1 { background: #48a9a6; }
.chart-fill-2 { background: #e6a23c; }
.chart-fill-3 { background: #7c6db0; }
.chart-fill-4 { background: #d05b5b; }
.chart-fill-5 { background: #76a85b; }
.chart-fill-6 { background: #4f7cac; }
.chart-fill-7 { background: #b7794b; }

.chart-note {
  font-size: .78rem;
  color: #667b87;
  margin: 14px 0 0;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .analysis-filters { grid-template-columns: 1fr; }
  .rank-label {
    display: grid;
    gap: 3px;
  }
}