:root {
	--tvpp-yellow: #f7ff3c;
	--tvpp-gold: #ffc400;
	--tvpp-panel: rgba(5, 5, 5, .82);
	--tvpp-queue-opacity: .75;
	--tvpp-border-width: 2px;
	--tvpp-progress-bottom: 20%;
	--tvpp-progress-height: 3px;
	--tvpp-progress-side: 118px;
	--tvpp-action-bottom: 12px;
	--tvpp-player-bottom: 82px;
}

body #plyr-playlist.tvpp-player,
body .plyr-playlist.player.tvpp-player {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	bottom: calc(var(--tvpp-player-bottom) + env(safe-area-inset-bottom, 0px)) !important;
	width: max-content !important;
	min-width: 0 !important;
	max-width: min(760px, calc(100vw - 24px)) !important;
	height: 76px !important;
	min-height: 76px !important;
	max-height: 76px !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: translateX(-50%) !important;
	border: var(--tvpp-border-width) solid color-mix(in srgb, var(--tvpp-yellow) 46%, transparent) !important;
	border-radius: 999px !important;
	background:
		linear-gradient(105deg, rgba(255, 196, 0, .08), transparent 30%, rgba(247, 255, 60, .05) 72%, transparent),
		var(--tvpp-panel) !important;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .52), 0 0 18px rgba(247, 255, 60, .12), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
	backdrop-filter: blur(17px) saturate(125%);
	-webkit-backdrop-filter: blur(17px) saturate(125%);
	overflow: visible !important;
	z-index: 999990 !important;
	transition: opacity .18s ease, transform .18s ease, border-color .18s ease !important;
}

.tvpp-player audio,
.tvpp-player video {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
}

.tvpp-player .plyr,
.tvpp-player .plyr__controls,
.tvpp-player .plyr-controls,
.tvpp-player .player-inner {
	box-sizing: border-box !important;
	max-height: 72px !important;
}

.tvpp-player .plyr__controls,
.tvpp-player .plyr-controls {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: clamp(4px, 1.2vw, 12px) !important;
	width: max-content !important;
	max-width: 100% !important;
	height: 72px !important;
	min-height: 72px !important;
	padding: 8px 14px !important;
	border: 0 !important;
	background: transparent !important;
	overflow: hidden !important;
}

.tvpp-player .plyr-control-left,
.tvpp-player .plyr-control-center,
.tvpp-player .plyr-control-right {
	display: flex !important;
	align-items: center !important;
	gap: clamp(4px, 1vw, 10px) !important;
	min-width: 0 !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.tvpp-player .plyr-control-left {
	flex: 0 1 260px !important;
	overflow: hidden !important;
}

/* The artwork is fixed-size; the copy beside it is the pressure-release area.
   This keeps optional controls from painting over long track metadata. */
.tvpp-player .plyr-control-left > div,
.tvpp-player .plyr-control-left .player-copy {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

.tvpp-player .plyr-control-center,
.tvpp-player .plyr-control-right {
	flex: 0 0 auto !important;
}

.tvpp-player .plyr__poster,
.tvpp-player .plyr-poster,
.tvpp-player img {
	flex: 0 0 46px !important;
	width: 46px !important;
	height: 46px !important;
	max-width: 46px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	box-shadow: 0 0 0 1px rgba(247, 255, 60, .42), 0 0 13px rgba(247, 255, 60, .18) !important;
}

.tvpp-player .plyr__title,
.tvpp-player .jp-title,
.tvpp-player .track-title {
	display: block !important;
	max-width: min(220px, 28vw) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.tvpp-player .plyr__author,
.tvpp-player .jp-artist,
.tvpp-player .track-artist {
	display: block !important;
	max-width: min(220px, 28vw) !important;
	margin-top: 3px !important;
	color: rgba(255, 255, 255, .62) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.tvpp-player .plyr__control,
.tvpp-player button[class*="control"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 38px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 9px !important;
	border: 1px solid rgba(247, 255, 60, .28) !important;
	border-radius: 50% !important;
	color: #fff !important;
	background: rgba(255, 255, 255, .035) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
	transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.tvpp-player .plyr__control:hover,
.tvpp-player .plyr__control:focus-visible,
.tvpp-player .plyr__control.plyr__control--pressed,
.tvpp-player .plyr__control[aria-pressed="true"] {
	color: var(--tvpp-yellow) !important;
	border-color: rgba(247, 255, 60, .9) !important;
	background: rgba(247, 255, 60, .08) !important;
	box-shadow: 0 0 13px rgba(247, 255, 60, .42), inset 0 0 8px rgba(247, 255, 60, .08) !important;
}

.tvpp-player .plyr__control[data-plyr="play"],
.tvpp-player .plyr__control--play {
	width: 46px !important;
	height: 46px !important;
	min-width: 46px !important;
	min-height: 46px !important;
	border-color: rgba(247, 255, 60, .78) !important;
	color: var(--tvpp-yellow) !important;
	box-shadow: 0 0 15px rgba(247, 255, 60, .32), inset 0 0 10px rgba(247, 255, 60, .08) !important;
}

/* Previous and Next are 8px smaller than Play. Lowering each by half that
   difference aligns all three transport controls to one visual baseline. */
.tvpp-player .plyr__control[data-plyr="prev"],
.tvpp-player .plyr__control[data-plyr="previous"],
.tvpp-player .plyr__control--prev,
.tvpp-player .plyr__control--previous,
.tvpp-player .plyr__control[data-plyr="next"],
.tvpp-player .plyr__control--next {
	transform: translateY(4px) !important;
}

html body .tvpp-button-spaced {
	margin-left: var(--tvpp-button-left, 0px) !important;
	margin-right: var(--tvpp-button-right, 0px) !important;
}

html body #plyr-playlist.tvpp-player .tvpp-button-spaced,
html body .plyr-playlist.player.tvpp-player .tvpp-button-spaced {
	margin-left: var(--tvpp-button-left, 0px) !important;
	margin-right: var(--tvpp-button-right, 0px) !important;
}

html body #plyr-playlist.tvpp-player .tvpp-native-control-hidden,
html body #plyr-playlist.tvpp-player button.tvpp-native-control-hidden,
html body .plyr-playlist.player.tvpp-player .tvpp-native-control-hidden {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	flex: 0 0 0 !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

/* The plugin rail is the only visible progress surface. Removing it through
   the Progress setting therefore cannot reveal Plyr's duplicate native rail. */
html body #plyr-playlist.tvpp-player .plyr__progress__container,
html body #plyr-playlist.tvpp-player .plyr__progress,
html body #plyr-playlist.tvpp-player .plyr__time,
html body .plyr-playlist.player.tvpp-player .plyr__progress__container,
html body .plyr-playlist.player.tvpp-player .plyr__progress,
html body .plyr-playlist.player.tvpp-player .plyr__time,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled #tvpp-progress,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled #tvpp-progress {
	display: none !important;
}

/* Without a progress rail, collapse the reserved lower track area so the
   player matches the action pill's compact vertical rhythm. */
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled {
	height: 60px !important;
	min-height: 60px !important;
	max-height: 60px !important;
}

html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr__controls,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr-controls,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr__controls,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr-controls {
	height: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	padding: 5px 12px !important;
}

html body #plyr-playlist.tvpp-player.tvpp-progress-disabled > .plyr,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled > .player-inner,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled > .plyr,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled > .player-inner {
	height: 56px !important;
	min-height: 56px !important;
	max-height: 56px !important;
	border-radius: inherit !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr-control-left,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr-control-center,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr-control-right,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr-control-left,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr-control-center,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr-control-right {
	height: 44px !important;
}

html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr__poster,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr-poster,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled img,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr__poster,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr-poster,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled img {
	flex-basis: 42px !important;
	width: 42px !important;
	height: 42px !important;
	max-width: 42px !important;
}

html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr__control,
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled button[class*="control"],
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr__control,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled button[class*="control"] {
	flex-basis: 36px !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	padding: 8px !important;
}

html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr__control[data-plyr="play"],
html body #plyr-playlist.tvpp-player.tvpp-progress-disabled .plyr__control--play,
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr__control[data-plyr="play"],
html body .plyr-playlist.player.tvpp-player.tvpp-progress-disabled .plyr__control--play {
	flex-basis: 44px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
}

/* Keep the fullscreen plugin trigger in its required DOM location while the
   single visible triangle button forwards the click to it. */
.tvpp-player .tvpp-native-fs-bridge {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 1px !important;
	min-height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* The list remains in the DOM so the fullscreen plugin and Up Next history can
   read and clone it. It is simply not part of the compact pill surface. */
.tvpp-player > .plyr-list-wrap,
.tvpp-player > .plyr-playlist-list,
.tvpp-player > ul.plyr-list {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
}

.tvpp-progress {
	position: absolute;
	left: 50%;
	right: auto;
	bottom: var(--tvpp-progress-bottom);
	display: grid;
	grid-template-columns: 36px minmax(42px, 1fr) 36px;
	align-items: center;
	gap: 7px;
	width: clamp(156px, calc(100% - (var(--tvpp-progress-side) * 2)), 360px);
	height: 18px;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	z-index: 4;
	pointer-events: none;
}

.tvpp-progress.is-clickable {
	cursor: pointer;
	pointer-events: auto;
}

.tvpp-progress:focus-visible {
	outline: 2px solid var(--tvpp-yellow);
	outline-offset: 4px;
	border-radius: 8px;
}

.tvpp-progress__bar {
	position: relative;
	display: block;
	height: max(8px, var(--tvpp-progress-height));
	border-radius: 99px;
	background: linear-gradient(to bottom, transparent calc(50% - var(--tvpp-progress-height) / 2), rgba(255, 255, 255, .2) 0 calc(50% + var(--tvpp-progress-height) / 2), transparent 0);
}

.tvpp-progress__fill {
	position: absolute;
	left: 0;
	top: calc(50% - var(--tvpp-progress-height) / 2);
	width: 0;
	height: var(--tvpp-progress-height);
	border-radius: 99px;
	background: linear-gradient(90deg, var(--tvpp-gold), var(--tvpp-yellow));
	box-shadow: 0 0 7px rgba(247, 255, 60, .55);
}

.tvpp-progress__thumb {
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border: 1px solid #101010;
	border-radius: 50%;
	background: var(--tvpp-yellow);
	box-shadow: 0 0 8px rgba(247, 255, 60, .9);
}

.tvpp-progress__time {
	color: rgba(255, 255, 255, .65);
	font-size: 9px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

.tvpp-progress__time--current { text-align: right; }
.tvpp-progress__time--duration { text-align: left; }

.tvpp-action-pill {
	position: fixed;
	left: 50%;
	bottom: calc(var(--tvpp-action-bottom) + env(safe-area-inset-bottom, 0px));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: max-content;
	min-width: 178px;
	height: 58px;
	margin: 0;
	padding: 6px 10px;
	transform: translateX(-50%);
	border: var(--tvpp-border-width) solid color-mix(in srgb, var(--tvpp-yellow) 52%, transparent);
	border-radius: 999px;
	background:
		linear-gradient(100deg, transparent, rgba(255, 196, 0, .1) 58%, transparent),
		var(--tvpp-panel);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(247, 255, 60, .13), inset 0 1px 0 rgba(255, 255, 255, .07);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	z-index: 999992;
}

.tvpp-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(247, 255, 60, .38);
	border-radius: 50%;
	color: var(--tvpp-yellow);
	background: rgba(7, 7, 7, .78);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.tvpp-action:hover,
.tvpp-action:focus-visible,
.tvpp-action.is-active {
	border-color: var(--tvpp-yellow);
	color: var(--tvpp-yellow);
	background: rgba(247, 255, 60, .09);
	box-shadow: 0 0 14px rgba(247, 255, 60, .62), inset 0 0 9px rgba(247, 255, 60, .09);
	outline: 0;
}

.tvpp-action:active { transform: scale(.95); }
.tvpp-action img { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }

.tvpp-icon { position: relative; display: block; width: 22px; height: 22px; color: currentColor; }
.tvpp-icon--triangle::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	transform: translate(-50%, -55%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 13px solid currentColor;
}

.tvpp-icon--note::before {
	content: '\266b';
	position: absolute;
	inset: 0;
	font: 800 25px/22px Arial, sans-serif;
	text-align: center;
}

.tvpp-icon--menu { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.tvpp-icon--menu i { display: block; width: 22px; height: 2px; border-radius: 9px; background: currentColor; transition: transform .16s ease, opacity .16s ease; }
.tvpp-action--menu.is-active .tvpp-icon--menu i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tvpp-action--menu.is-active .tvpp-icon--menu i:nth-child(2) { opacity: 0; }
.tvpp-action--menu.is-active .tvpp-icon--menu i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.tvpp-icon--account::before,
.tvpp-icon--account::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: currentColor;
}
.tvpp-icon--account::before { top: 1px; width: 8px; height: 8px; border-radius: 50%; }
.tvpp-icon--account::after { bottom: 1px; width: 18px; height: 10px; border-radius: 10px 10px 4px 4px; }
.tvpp-action--after-login.is-active .tvpp-icon--account::before { top: 10px; width: 22px; height: 2px; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.tvpp-action--after-login.is-active .tvpp-icon--account::after { bottom: 10px; width: 22px; height: 2px; border-radius: 2px; transform: translateX(-50%) rotate(-45deg); }

.tvpp-action--upnext.is-active .tvpp-icon--note::before { content: '\00d7'; font-size: 31px; font-weight: 400; }

.tvpp-panel {
	position: fixed;
	left: 50%;
	bottom: calc(var(--tvpp-player-bottom) + 96px + env(safe-area-inset-bottom, 0px));
	width: min(620px, calc(100vw - 24px));
	max-height: min(64vh, 560px);
	box-sizing: border-box;
	transform: translate(-50%, 12px) scale(.985);
	border: var(--tvpp-border-width) solid color-mix(in srgb, var(--tvpp-yellow) 44%, transparent);
	border-radius: 26px;
	background: rgba(5, 5, 5, var(--tvpp-queue-opacity));
	box-shadow: 0 22px 70px rgba(0, 0, 0, .65), 0 0 28px rgba(247, 255, 60, .1), inset 0 1px 0 rgba(255, 255, 255, .06);
	backdrop-filter: blur(22px) saturate(125%);
	-webkit-backdrop-filter: blur(22px) saturate(125%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	z-index: 999991;
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.tvpp-panel.is-open {
	transform: translate(-50%, 0) scale(1);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.tvpp-panel__header {
	position: sticky;
	top: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	min-height: 82px;
	box-sizing: border-box;
	padding: 19px 22px 15px;
	border-bottom: 1px solid rgba(247, 255, 60, .16);
	background: rgba(5, 5, 5, .78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	z-index: 2;
}

.tvpp-panel__header small {
	display: block;
	margin: 0 0 3px;
	color: var(--tvpp-yellow);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
}

.tvpp-panel__header h2 {
	margin: 0;
	color: #fff;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
}

.tvpp-panel__clear {
	padding: 8px 12px;
	border: 0;
	color: rgba(255, 255, 255, .72);
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.tvpp-panel__close {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(247, 255, 60, .55);
	border-radius: 50%;
	color: var(--tvpp-yellow);
	background: #070707;
	box-shadow: 0 0 11px rgba(247, 255, 60, .28);
	cursor: pointer;
}

.tvpp-panel__close span::before,
.tvpp-panel__close span::after {
	content: '';
	position: absolute;
	left: 11px;
	top: 17px;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.tvpp-panel__close span::before { transform: rotate(45deg); }
.tvpp-panel__close span::after { transform: rotate(-45deg); }

.tvpp-menu-panel__links {
	max-height: calc(min(64vh, 560px) - 82px);
	padding: 18px 20px 22px;
	overflow-y: auto;
}

.tvpp-menu-panel__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tvpp-menu-panel__list li { min-width: 0; margin: 0; padding: 0; list-style: none; }
.tvpp-menu-panel__list .sub-menu {
	display: grid;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0 0 0 14px;
	list-style: none;
}

.tvpp-menu-panel__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 15px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	color: #fff;
	background: rgba(255, 255, 255, .035);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.tvpp-menu-panel__links a::after {
	content: '';
	flex: 0 0 7px;
	width: 7px;
	height: 7px;
	transform: rotate(-45deg);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.tvpp-menu-panel__links a img,
.tvpp-menu-panel__links a .avatar {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	margin-right: 8px;
	border-radius: 50%;
	object-fit: cover;
}

.tvpp-menu-panel__links a:hover,
.tvpp-menu-panel__links a:focus-visible {
	border-color: rgba(247, 255, 60, .6);
	color: var(--tvpp-yellow);
	background: rgba(247, 255, 60, .06);
	outline: 0;
}

.tvpp-menu-panel__links i {
	width: 7px;
	height: 7px;
	transform: rotate(-45deg);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.tvpp-queue-panel__list {
	max-height: calc(min(64vh, 560px) - 82px);
	padding: 18px 14px 22px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tvpp-queue-row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) 36px;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 68px;
	box-sizing: border-box;
	margin: 0 0 7px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 11px;
	color: #fff;
	background: rgba(255, 255, 255, .045);
	text-align: left;
	cursor: pointer;
}

.tvpp-queue-row:hover,
.tvpp-queue-row:focus-visible {
	border-color: rgba(247, 255, 60, .46);
	background: rgba(247, 255, 60, .06);
	outline: 0;
}

.tvpp-queue-row__art {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	object-fit: cover;
	background: linear-gradient(135deg, #1b1b1b, #090909);
}

.tvpp-queue-row__art--empty { border: 1px solid rgba(247, 255, 60, .16); }
.tvpp-queue-row__copy { display: flex; flex-direction: column; min-width: 0; }
.tvpp-queue-row__copy b,
.tvpp-queue-row__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.tvpp-queue-row__copy b { color: #fff; font-size: 14px; line-height: 1.25; }
.tvpp-queue-row__copy span { margin-top: 4px; color: rgba(255, 255, 255, .57); font-size: 12px; }

.tvpp-queue-row__play {
	position: relative;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(247, 255, 60, .38);
	border-radius: 50%;
	box-shadow: 0 0 9px rgba(247, 255, 60, .15);
}

.tvpp-queue-row__play::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 9px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid var(--tvpp-yellow);
}

.tvpp-queue-panel__empty {
	margin: 0;
	padding: 44px 20px;
	color: rgba(255, 255, 255, .62);
	font-size: 14px;
	text-align: center;
}

.tvpp-floating-video {
	position: fixed;
	right: 18px;
	bottom: calc(var(--tvpp-player-bottom) + 96px + env(safe-area-inset-bottom, 0px));
	display: none;
	width: min(540px, calc(100vw - 28px));
	box-sizing: border-box;
	border: var(--tvpp-border-width) solid rgba(247, 255, 60, .52);
	border-radius: 16px;
	background: #050505;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .72), 0 0 22px rgba(247, 255, 60, .18);
	overflow: hidden;
	z-index: 1000002;
}

.tvpp-floating-video.is-open { display: block; }
.tvpp-floating-video__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 8px 10px 8px 15px; }
.tvpp-floating-video__bar strong { min-width: 0; overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.tvpp-floating-video__exit { min-height: 34px; padding: 0 14px; border: 1px solid var(--tvpp-yellow); border-radius: 99px; color: #050505; background: var(--tvpp-yellow); font-size: 12px; font-weight: 900; cursor: pointer; }
.tvpp-floating-video video { display: block; width: 100%; max-height: min(62vh, 520px); background: #000; object-fit: contain; }

/* While the dedicated fullscreen plugin owns the screen, both compact pills
   and plugin panels step aside. No fullscreen overlay selector is modified. */
body.tvfp-fullscreen-open #plyr-playlist.tvpp-player,
body.tvfp-fullscreen-open .tvpp-action-pill,
body.tvfp-fullscreen-open .tvpp-panel,
body.tvfp-fullscreen-open .tvpp-floating-video {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

@media (max-width: 700px) {
	body #plyr-playlist.tvpp-player,
	body .plyr-playlist.player.tvpp-player {
		width: max-content !important;
		max-width: calc(100% - 16px) !important;
		height: 70px !important;
		min-height: 70px !important;
		max-height: 70px !important;
	}

	.tvpp-player .plyr__controls,
	.tvpp-player .plyr-controls {
		height: 66px !important;
		min-height: 66px !important;
		gap: 3px !important;
		padding: 7px 8px !important;
	}

	/* Desktop spacing choices remain intact, but cannot consume the finite phone
	   width or push later controls beyond the pill. */
	html body #plyr-playlist.tvpp-player .tvpp-button-spaced,
	html body .plyr-playlist.player.tvpp-player .tvpp-button-spaced {
		margin-left: min(var(--tvpp-button-left, 0px), 6px) !important;
		margin-right: min(var(--tvpp-button-right, 0px), 6px) !important;
	}

	.tvpp-player .plyr-control-left { flex: 1 1 126px !important; }
	.tvpp-player .plyr__poster,
	.tvpp-player .plyr-poster,
	.tvpp-player img { flex-basis: 40px !important; width: 40px !important; height: 40px !important; max-width: 40px !important; }
	.tvpp-player .plyr__title,
	.tvpp-player .plyr__author,
	.tvpp-player .jp-title,
	.tvpp-player .jp-artist,
	.tvpp-player .track-title,
	.tvpp-player .track-artist { width: 100% !important; max-width: 100% !important; }

	.tvpp-player .plyr__control,
	.tvpp-player button[class*="control"] {
		flex-basis: 32px !important;
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
		padding: 7px !important;
	}

	.tvpp-player .plyr__control[data-plyr="play"],
	.tvpp-player .plyr__control--play {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		min-height: 40px !important;
	}

	.tvpp-progress {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.tvpp-progress__time { display: none; }

	.tvpp-action-pill { height: 54px; min-width: 170px; padding: 5px 9px; }
	.tvpp-action { flex-basis: 42px; width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
	.tvpp-panel { width: calc(100vw - 16px); max-height: min(62vh, 520px); border-radius: 20px; }
	.tvpp-panel__header { min-height: 74px; padding: 15px 16px 13px; }
	.tvpp-panel__header h2 { font-size: 20px; }
	.tvpp-menu-panel__links { max-height: calc(min(62vh, 520px) - 74px); padding: 14px; }
	.tvpp-menu-panel__list { grid-template-columns: 1fr; }
	.tvpp-queue-panel__list { max-height: calc(min(62vh, 520px) - 74px); padding: 14px 10px 18px; }
	.tvpp-floating-video { left: 8px; right: 8px; bottom: calc(var(--tvpp-player-bottom) + 92px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

@media (max-width: 420px) {
	.tvpp-player .plyr-control-left { flex: 1 1 104px !important; }
	.tvpp-player .plyr__title,
	.tvpp-player .plyr__author,
	.tvpp-player .jp-title,
	.tvpp-player .jp-artist,
	.tvpp-player .track-title,
	.tvpp-player .track-artist { width: 100% !important; max-width: 100% !important; }
	.tvpp-player .plyr__control,
	.tvpp-player button[class*="control"] { flex-basis: 29px !important; width: 29px !important; height: 29px !important; min-width: 29px !important; min-height: 29px !important; padding: 6px !important; }
	.tvpp-player .plyr__control[data-plyr="play"],
	.tvpp-player .plyr__control--play { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.tvpp-action,
	.tvpp-panel,
	.tvpp-player { transition: none !important; }
}