.wfp-player {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--wfp-bg, #f7f7f8);
	border: 1px solid var(--wfp-border, #e4e4e7);
	max-width: 100%;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wfp-play-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--wfp-button-bg, #3273dc);
	color: var(--wfp-icon-color, #ffffff);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wfp-play-btn:hover {
	background: var(--wfp-button-hover, #275ab5);
}

.wfp-play-btn:active {
	transform: scale(0.95);
}

.wfp-play-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.wfp-waveform {
	flex: 1 1 auto;
	min-width: 0;
	cursor: pointer;
}

.wfp-time {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--wfp-time-color, #6b6b70);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.wfp-time-sep {
	opacity: 0.6;
}

@media (max-width: 480px) {
	.wfp-player {
		gap: 10px;
		padding: 10px 12px;
	}

	.wfp-play-btn {
		width: 34px;
		height: 34px;
	}

	.wfp-time {
		font-size: 11px;
	}
}