.top10-charts-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1em;
}

.top10-charts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.top10-charts-item {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.top10-position {
	font-weight: 700;
	font-size: 1.2em;
	width: 2em;
	text-align: center;
	flex-shrink: 0;
}

.top10-song {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.top10-artist {
	font-size: 0.85em;
	opacity: 0.75;
}

.top10-trend {
	flex-shrink: 0;
	font-weight: 600;
	min-width: 3.5em;
	text-align: right;
}

.top10-trend-up {
	color: #2e8b3d;
}

.top10-trend-down {
	color: #c0392b;
}

.top10-trend-new,
.top10-trend-re {
	color: #2b6cb0;
	font-size: 0.85em;
}

.top10-trend-same {
	opacity: 0.5;
}

.top10-charts-stats {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
}

.top10-stats-block {
	flex: 1 1 300px;
}

.top10-stats-list {
	list-style: decimal;
	padding-left: 1.4em;
}

.top10-stats-list li {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	padding: 0.3em 0;
}

.top10-stats-count {
	margin-left: auto;
	font-weight: 700;
	opacity: 0.8;
}

.top10-streak-length {
	display: block;
	font-weight: 600;
	opacity: 0.8;
}

.top10-charts-loading .top10-charts-body {
	opacity: 0.4;
	transition: opacity 0.15s ease;
}