.san-player {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 22px 0;
	padding: 12px 16px;
	border-radius: 10px;
	background: #1c1c1e;
	border: 1px solid #33333a;
	font-family: inherit;
}

.san-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: none;
	border-radius: 999px;
	background: #FC6668;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.1s ease;
	line-height: 1;
}

.san-btn:hover {
	opacity: 0.9;
}

.san-btn:active {
	transform: scale(0.97);
}

.san-btn-play .san-icon {
	font-size: 16px;
}

.san-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.san-controls .san-btn-pause,
.san-controls .san-btn-stop {
	background: #333338;
	padding: 8px 12px;
	font-size: 15px;
}

.san-speed-label {
	color: #ccc;
	font-size: 13px;
	margin-left: 6px;
}

.san-speed-select {
	background: #2a2a2e;
	color: #fff;
	border: 1px solid #444;
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 13px;
}

.san-status {
	color: #FC6668;
	font-size: 13px;
	font-weight: 500;
	margin-left: auto;
}

.san-note {
	margin: 2px 0 0 0;
	font-size: 12px;
	color: #999;
}

.san-player[data-playing="true"] .san-btn-play {
	display: none;
}

/* Light-theme fallback in case player is embedded outside dark sections */
@media (prefers-color-scheme: light) {
	.san-player.san-light {
		background: #fbeaea;
		border-color: #f5cccd;
	}
	.san-speed-select {
		background: #fff;
		color: #222;
		border-color: #ddd;
	}
	.san-note {
		color: #777;
	}
}