.hmp-player {
	--hmp-bg: #1b1d29;
	--hmp-bg-soft: #232638;
	--hmp-text: #d7dbe8;
	--hmp-muted: #858b9c;
	box-sizing: border-box;
	width: min(var(--hmp-width), calc(100vw - 28px));
	border: 1px solid rgba(129, 144, 216, 0.18);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(35, 38, 56, 0.98), rgba(24, 26, 38, 0.98));
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
	color: var(--hmp-text);
	font-family: inherit;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.hmp-player *,
.hmp-player *::before,
.hmp-player *::after {
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

.hmp-fixed {
	position: fixed;
	z-index: 92;
}

.hmp-fixed-profile-left {
	top: calc(var(--hmp-fixed-top) + var(--hmp-collision-offset, 0px));
	left: max(18px, calc((100vw - 1480px) / 2 + var(--hmp-fixed-left)));
}

.hmp-fixed-profile-left.hmp-sidebar-embedded {
	position: relative;
	z-index: auto;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	width: 100%;
	max-width: var(--hmp-width);
	margin: 14px auto 0;
}

html.hmp-natural-leftbar #leftbar_part2.sticky {
	position: relative !important;
	top: auto !important;
	width: auto !important;
	transform: none !important;
}

.hmp-fixed-bottom-left {
	left: max(18px, calc((100vw - 1480px) / 2 + var(--hmp-fixed-left)));
	bottom: 28px;
}

.hmp-fixed-bottom-right {
	right: 24px;
	bottom: 28px;
}

.hmp-inline {
	margin: 18px 0;
}

.hmp-main {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 92px;
	gap: 10px;
	align-items: center;
	min-height: 72px;
	padding: 12px;
}

.hmp-art {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background:
		radial-gradient(circle at 34% 28%, rgba(129, 144, 216, 0.48), transparent 36%),
		linear-gradient(135deg, #2b3048, #151722);
	background-position: center;
	background-size: cover;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.hmp-meta {
	min-width: 0;
	padding-right: 2px;
}

.hmp-title,
.hmp-artist {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hmp-title {
	color: #dfe2ed;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
}

.hmp-artist {
	margin-top: 4px;
	color: var(--hmp-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
}

.hmp-controls {
	display: grid;
	grid-template-columns: 24px 34px 24px;
	gap: 5px;
	align-items: center;
	justify-content: end;
	min-width: 92px;
	height: 36px;
}

.hmp-control,
.hmp-play {
	display: grid;
	place-items: center;
	border: 0 !important;
	outline: 0 !important;
	background: transparent;
	box-shadow: none !important;
	color: rgba(215, 219, 232, 0.72);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
}

.hmp-control {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	opacity: 0.64;
}

.hmp-control span {
	width: 8px;
	height: 8px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

.hmp-prev span {
	margin-left: 3px;
	transform: rotate(45deg);
}

.hmp-next span {
	margin-right: 3px;
	transform: rotate(-135deg);
}

.hmp-play {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--hmp-accent);
	color: #12141f;
	flex: 0 0 auto;
}

.hmp-play span {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid currentColor;
}

.hmp-player.is-playing .hmp-play span {
	width: 12px;
	height: 14px;
	margin-left: 0;
	border-top: 0;
	border-bottom: 0;
	border-left: 4px solid currentColor;
	border-right: 4px solid currentColor;
}

.hmp-control:hover {
	background: rgba(129, 144, 216, 0.12);
	color: rgba(215, 219, 232, 0.92);
	opacity: 1;
}

.hmp-play:hover {
	filter: brightness(1.08);
}

.hmp-control:focus,
.hmp-control:focus-visible,
.hmp-play:focus,
.hmp-play:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
}

.hmp-control:active,
.hmp-play:active {
	transform: scale(0.96);
}

.hmp-progress {
	height: 3px;
	background: rgba(255, 255, 255, 0.06);
}

.hmp-progress span {
	display: block;
	width: 0%;
	height: 100%;
	background: var(--hmp-accent);
}

.hmp-volume {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	min-height: 32px;
	padding: 0 12px 8px;
	color: var(--hmp-muted);
	font-size: 10px;
	line-height: 1;
}

.hmp-volume-label,
.hmp-volume-value {
	white-space: nowrap;
}

.hmp-volume-range {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	accent-color: var(--hmp-accent);
	cursor: pointer;
}

.hmp-volume-range:focus-visible {
	outline: 2px solid var(--hmp-accent);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.hmp-fixed,
	.hmp-fixed-bottom-left,
	.hmp-fixed-bottom-right,
	.hmp-fixed-profile-left {
		position: static;
		z-index: auto;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		max-width: 390px;
		margin: 14px auto 18px;
	}

	.hmp-main {
		grid-template-columns: 40px minmax(0, 1fr) 92px;
		gap: 10px;
		padding: 11px 12px;
	}

	.hmp-volume {
		padding-right: 12px;
		padding-left: 12px;
	}
}

@media (max-width: 360px) {
	.hmp-fixed,
	.hmp-fixed-bottom-left,
	.hmp-fixed-bottom-right,
	.hmp-fixed-profile-left {
		max-width: calc(100vw - 20px);
		margin-right: auto;
		margin-left: auto;
	}

	.hmp-main {
		grid-template-columns: 36px minmax(0, 1fr) 88px;
		gap: 8px;
		padding: 10px;
	}

	.hmp-art {
		width: 36px;
		height: 36px;
	}

	.hmp-controls {
		grid-template-columns: 23px 34px 23px;
		gap: 4px;
		min-width: 88px;
	}
}