.telegram-users-page__hero {
	margin-bottom: 1rem;
}

.telegram-users-page__title {
	margin: 0;
}

.telegram-users-page__subtitle {
	margin: 0.35rem 0 0;
	color: color-mix(in srgb, var(--secondary-color) 74%, #ffffff 26%);
	font-size: 0.95rem;
}

.telegram-users-page__panel {
	margin-bottom: 0.9rem;
}

.telegram-users-page__button--apply {
	background: linear-gradient(120deg, color-mix(in srgb, var(--primary-color) 28%, var(--bg-color) 72%), color-mix(in srgb, var(--accent-color) 28%, var(--bg-color) 72%));
}

.telegram-users-page__summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}



.telegram-users-page__metric-label {
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--secondary-color) 75%, #ffffff 25%);
}

.telegram-users-page__metric-value {
	margin-top: 0.2rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-color);
}

.telegram-users-page__table-wrap {
	overflow-x: auto;
	border-radius: 14px;
}

.telegram-users-table {
	min-width: 760px;
}

.telegram-users-table th:first-child,
.telegram-users-table td:first-child {
	width: 4rem;
}

.telegram-users-table th .sortable-column__arrows {
	display: inline-flex;
	align-items: center;
	gap: 0.42rem;
	padding: 0.18rem 0.42rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent);
	background: color-mix(in srgb, var(--bg-color) 72%, #ffffff 28%);
	color: color-mix(in srgb, var(--secondary-color) 86%, #ffffff 14%);
	text-decoration: none;
	transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.telegram-users-table th .sortable-column__arrows:hover {
	color: var(--primary-color);
	border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.telegram-users-table th .sortable-column__label {
	line-height: 1;
}

.telegram-users-table th .sortable-column__indicator {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	line-height: 1;
	min-width: 0.75rem;
}

.telegram-users-table th .sortable-column__arrow {
	display: block;
	font-size: 0.52rem;
	line-height: 0.65;
	color: color-mix(in srgb, var(--secondary-color) 50%, #ffffff 50%);
	transition: color 140ms ease, transform 140ms ease;
}

.telegram-users-table th .sortable-column__arrows:hover .sortable-column__arrow {
	color: color-mix(in srgb, var(--secondary-color) 85%, #ffffff 15%);
}

.telegram-users-table th .sortable-column__arrows--asc,
.telegram-users-table th .sortable-column__arrows--desc {
	border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
	background: linear-gradient(120deg, color-mix(in srgb, var(--primary-color) 25%, var(--bg-color) 75%), color-mix(in srgb, var(--accent-color) 24%, var(--bg-color) 76%));
	color: #fff3bf;
}

.telegram-users-table th .sortable-column__arrows--asc .sortable-column__arrow--asc,
.telegram-users-table th .sortable-column__arrows--desc .sortable-column__arrow--desc {
	color: #fff3bf;
	transform: scale(1.12);
}

.telegram-users-table th .sortable-column__arrows--asc .sortable-column__arrow--desc,
.telegram-users-table th .sortable-column__arrows--desc .sortable-column__arrow--asc {
	color: color-mix(in srgb, #fff3bf 50%, #000000 50%);
}

.telegram-users-table__name {
	color: color-mix(in srgb, var(--secondary-color) 90%, #ffffff 10%);
	text-decoration: none;
	font-weight: 600;
}

.telegram-users-table__name:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

.telegram-users-table__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 1.7rem;
	padding: 0 0.45rem;
	border-radius: 999px;
	font-weight: 700;
	color: color-mix(in srgb, var(--secondary-color) 90%, #ffffff 10%);
	background: color-mix(in srgb, var(--bg-color) 76%, #ffffff 24%);
}

.telegram-users-table__rank--top-1 {
	color: #2f2100;
	background: linear-gradient(140deg, #ffe492, #ffc93c);
}

.telegram-users-table__rank--top-2 {
	color: #1d2329;
	background: linear-gradient(140deg, #e8eef2, #b9c4cc);
}

.telegram-users-table__rank--top-3 {
	color: #2b1d18;
	background: linear-gradient(140deg, #f1c8a7, #cf8758);
}

@media (max-width: 900px) {
	.telegram-users-page__summary {
		grid-template-columns: 1fr;
	}
}