/* =============================================================================
   audio-player.css
   1. #ptap        persistent bottom player bar (lives outside #container_content,
                   so it keeps playing while pages change)
   2. #ptap-full   full-screen "Now playing" view (cover + Up next, like YT Music / Gaana)
   3. .ptm-*       Music page (layout/music/content.html)
   4. .ptw-*       audio view on the watch page (layout/watch/content.html)
   ========================================================================== */

:root {
	--ptap-h: 76px;
	--ptap-bg: #101114;
	--ptap-bg2: #181a20;
	--ptap-line: rgba(255, 255, 255, .09);
	--ptap-text: #f3f4f6;
	--ptap-mute: #9aa0aa;
	--ptap-acc: #04abf2;
	--ptap-heart: #ff5470;
	--ptap-tint: #1d2430;
}

/* ---------- 1. bottom bar -------------------------------------------------- */
body.ptap-on { padding-bottom: var(--ptap-h); }
body.ptap-full-open { overflow: hidden; }

#ptap {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050;
	height: var(--ptap-h);
	background: var(--ptap-bg); color: var(--ptap-text);
	border-top: 1px solid var(--ptap-line);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 560px) minmax(0, 1fr);
	align-items: center; gap: 12px; padding: 0 16px;
	transform: translateY(105%); transition: transform .25s ease;
	font-family: inherit; box-sizing: border-box;
}
#ptap.is-on { transform: none; }
#ptap *, #ptap-full * { box-sizing: border-box; }
#ptap button, #ptap-full button {
	background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; font: inherit;
	-webkit-tap-highlight-color: transparent;
}
#ptap button:focus-visible, #ptap-full button:focus-visible, #ptap input:focus-visible, #ptap-full input:focus-visible {
	outline: 2px solid var(--ptap-acc); outline-offset: 2px; border-radius: 6px;
}
#ptap svg, #ptap-full svg { width: 24px; height: 24px; fill: currentColor; display: block; }

/* seek line along the top edge of the bar */
.ptap-seek {
	-webkit-appearance: none; appearance: none; background: transparent; margin: 0; cursor: pointer;
	--p: 0%;
}
#ptap > .ptap-seek { position: absolute; left: 0; right: 0; top: -8px; width: 100%; height: 16px; z-index: 2; }
.ptap-seek::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px;
	background: linear-gradient(to right, var(--ptap-acc) var(--p), rgba(255, 255, 255, .22) var(--p));
}
.ptap-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.ptap-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ptap-acc); }
.ptap-seek::-webkit-slider-thumb {
	-webkit-appearance: none; width: 0; height: 0; margin-top: -4px; border-radius: 50%; background: #fff;
	transition: width .12s, height .12s;
}
.ptap-seek::-moz-range-thumb { width: 0; height: 0; border: 0; background: #fff; }
#ptap:hover .ptap-seek::-webkit-slider-thumb, .ptap-seek:active::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
#ptap:hover .ptap-seek::-moz-range-thumb, .ptap-seek:active::-moz-range-thumb { width: 12px; height: 12px; }
#ptap > .ptap-seek::-webkit-slider-runnable-track { margin-top: 0; }

/* left: what is playing */
.ptap-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ptap-cover-btn { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: var(--ptap-bg2); position: relative; }
.ptap-cover-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptap-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ptap-title {
	color: var(--ptap-text) !important; font-size: 14px; font-weight: 600; line-height: 1.25; text-decoration: none !important;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.ptap-title:hover { text-decoration: underline !important; }
.ptap-artist { color: var(--ptap-mute); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* center: transport */
.ptap-center { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ptap-btn { width: 40px; height: 40px; border-radius: 50%; color: #d6d9df; transition: color .12s, background .12s; }
.ptap-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ptap-btn.is-active { color: var(--ptap-acc); }
.ptap-btn[data-act="repeat"].is-one { position: relative; }
.ptap-btn[data-act="repeat"].is-one::after {
	content: '1'; position: absolute; font-size: 9px; font-weight: 800; line-height: 1; top: 50%; left: 50%; margin: -4px 0 0 -2.5px; color: var(--ptap-acc);
}
.ptap-play { width: 46px; height: 46px; background: #fff; color: #111 !important; margin: 0 6px; }
.ptap-play:hover { background: #e9ebef !important; color: #111 !important; transform: scale(1.04); }
.ptap-play svg { width: 28px; height: 28px; }
.ptap-play .i-pause, .is-playing .ptap-play .i-play { display: none; }
.is-playing .ptap-play .i-pause { display: block; }
.ptap-play.is-loading { opacity: .7; }
.ptap-time { color: var(--ptap-mute); font-size: 12px; font-variant-numeric: tabular-nums; margin-left: 10px; white-space: nowrap; }

/* right */
.ptap-right { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.ptap-vol { display: flex; align-items: center; gap: 2px; }
.ptap-vol input { width: 88px; }
.ptap-vol .ptap-seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
.ptap-vol .ptap-seek::-moz-range-thumb { width: 12px; height: 12px; }
.ptap-save.is-saved { color: var(--ptap-heart); }
.ptap-save .i-on, .ptap-save.is-saved .i-off { display: none; }
.ptap-save.is-saved .i-on { display: block; }
.ptap-mute .i-mute, .ptap-mute.is-muted .i-vol { display: none; }
.ptap-mute.is-muted .i-mute { display: block; }

/* ---------- 2. full-screen now playing -------------------------------------- */
#ptap-full {
	position: fixed; left: 0; right: 0; top: 0; bottom: var(--ptap-h); z-index: 1045;
	background: linear-gradient(180deg, var(--ptap-tint) 0%, #0b0c0f 78%);
	color: var(--ptap-text); font-family: inherit;
	transform: translateY(100%); visibility: hidden;
	transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s, background .6s;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); grid-template-rows: auto minmax(0, 1fr);
	column-gap: 40px; padding: 0 clamp(16px, 4vw, 56px);
}
#ptap-full.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.ptapf-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.ptapf-top .ptap-btn { width: 44px; height: 44px; }
.ptapf-label { color: var(--ptap-mute); font-size: 13px; }
.ptapf-label b { color: var(--ptap-text); font-weight: 600; }

.ptapf-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: 0; padding-bottom: 24px; }
.ptapf-art {
	width: min(100%, 460px, 52vh); aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; background: var(--ptap-bg2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.ptapf-info { width: min(100%, 460px, 52vh); display: flex; align-items: center; gap: 12px; }
.ptapf-text { min-width: 0; flex: 1; }
.ptapf-title { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptapf-artist { color: var(--ptap-mute); font-size: 14px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptapf-info .ptap-btn { width: 44px; height: 44px; flex: 0 0 auto; }
.ptapf-link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ptap-acc) !important; text-decoration: none !important; }
.ptapf-link:hover { text-decoration: underline !important; }

.ptapf-queue { display: flex; flex-direction: column; min-height: 0; padding-bottom: 20px; }
.ptapf-qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 4px 14px; border-bottom: 1px solid var(--ptap-line); }
.ptapf-qhead h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ptap-text); }
.ptapf-qhead span { color: var(--ptap-mute); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptapf-list { flex: 1; overflow-y: auto; margin: 0; padding: 6px 0 0; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.ptapf-row {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
	padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.ptapf-row:hover { background: rgba(255, 255, 255, .07); }
.ptapf-row.is-current { background: rgba(255, 255, 255, .12); }
.ptapf-thumb { width: 52px; height: 52px; border-radius: 5px; overflow: hidden; position: relative; background: var(--ptap-bg2); }
.ptapf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptapf-row.is-current .ptapf-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.ptapf-eq { position: absolute; inset: 0; z-index: 1; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 15px; }
.ptapf-row.is-current .ptapf-eq { display: flex; }
.ptapf-eq i { width: 3px; height: 4px; background: #fff; border-radius: 1px; }
.is-playing .ptapf-row.is-current .ptapf-eq i { animation: ptap-eq 0.9s ease-in-out infinite; }
.is-playing .ptapf-row.is-current .ptapf-eq i:nth-child(2) { animation-delay: -.3s; }
.is-playing .ptapf-row.is-current .ptapf-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes ptap-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.ptapf-rt { min-width: 0; }
.ptapf-rt b { display: block; font-size: 14px; font-weight: 600; color: var(--ptap-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptapf-rt span { display: block; font-size: 12.5px; color: var(--ptap-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptapf-dur { color: var(--ptap-mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ptapf-rm { width: 30px; height: 30px; border-radius: 50%; color: var(--ptap-mute); opacity: 0; }
.ptapf-rm svg { width: 18px; height: 18px; }
.ptapf-row:hover .ptapf-rm, .ptapf-rm:focus-visible { opacity: 1; }
.ptapf-rm:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ptapf-empty { color: var(--ptap-mute); padding: 28px 6px; font-size: 14px; }

/* toast */
#ptap-toast {
	position: fixed; left: 50%; bottom: calc(var(--ptap-h) + 18px); transform: translate(-50%, 12px); z-index: 1060;
	background: #23262d; color: #fff; border: 1px solid var(--ptap-line); padding: 10px 18px; border-radius: 22px;
	font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center;
}
#ptap-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
body:not(.ptap-on) #ptap-toast { bottom: 24px; }

/* ---------- mobile --------------------------------------------------------- */
@media (max-width: 900px) {
	#ptap { grid-template-columns: minmax(0, 1fr) auto; }
	#ptap .ptap-time, #ptap .ptap-btn[data-act="shuffle"], #ptap .ptap-btn[data-act="repeat"] { display: none; }
	.ptap-right { display: none; }
	.ptap-center .ptap-btn[data-act="prev"] { display: none; }
	.ptap-center { gap: 0; }
	.ptap-play { width: 44px; height: 44px; margin: 0 4px; }
	#ptap-full { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); overflow-y: auto; column-gap: 0; }
	.ptapf-stage { padding-bottom: 8px; gap: 16px; }
	.ptapf-art { width: min(78vw, 340px, 40vh); }
	.ptapf-info { width: min(78vw, 340px); }
	.ptapf-title { font-size: 19px; }
	.ptapf-queue { min-height: 320px; }
	.ptapf-list { overflow: visible; }
	.ptapf-rm { opacity: 1; }
}
/* on phones the expanded view hosts the full set of controls (the bar only has play / next) */
.ptapf-ctrls { display: none; width: min(100%, 460px); align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.ptapf-ctrls .ptap-seek { width: 100%; height: 22px; margin-bottom: 2px; }
.ptapf-ctrls .ptap-seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
.ptapf-ctrls .ptap-seek::-moz-range-thumb { width: 12px; height: 12px; }
.ptapf-ctrls .ptap-time { margin: 0 0 8px; width: 100%; display: flex; justify-content: space-between; }
@media (max-width: 900px) {
	.ptapf-ctrls { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	#ptap, #ptap-full, #ptap-toast { transition: none; }
	.is-playing .ptapf-row.is-current .ptapf-eq i { animation: none; height: 12px; }
}

/* ---------- 3. Music page --------------------------------------------------- */
.ptm { --ptm-b: rgba(127, 127, 127, .2); --ptm-bs: rgba(127, 127, 127, .12); --ptm-ac: #04abf2; --ptm-heart: #ff5470; max-width: 1080px; margin: 0 auto; padding: 24px 0 64px; }
.ptm *, .ptm *::before, .ptm *::after { box-sizing: border-box; }
.ptm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--ptm-bs); }
.ptm-head h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.ptm-head p { margin: 4px 0 0; font-size: 13.5px; opacity: .65; }
.ptm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ptm-btn {
	display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 24px; padding: 11px 24px; font-size: 14px; font-weight: 700; cursor: pointer;
	color: inherit; background: rgba(127, 127, 127, .16); transition: background .12s; text-decoration: none !important;
}
.ptm-btn:hover { background: rgba(127, 127, 127, .28); color: inherit; }
.ptm-btn svg { width: 20px; height: 20px; fill: currentColor; }
.ptm-btn-primary { background: var(--ptm-ac); color: #fff !important; }
.ptm-btn-primary:hover { background: #0398d6; }
.ptm-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ptm-tabs { display: flex; gap: 8px; margin: 18px 0 8px; flex-wrap: wrap; }
.ptm-tab { border: 1px solid var(--ptm-b); background: transparent; color: inherit; border-radius: 18px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ptm-tab:hover { background: rgba(127, 127, 127, .12); }
.ptm-tab.is-active { background: var(--ptm-ac); border-color: var(--ptm-ac); color: #fff; }
.ptm-list { margin: 0; padding: 0; list-style: none; }
.ptm-row {
	display: grid; grid-template-columns: 36px 52px minmax(0, 1fr) 56px auto auto; align-items: center; gap: 14px;
	padding: 8px 10px; border-radius: 10px; cursor: pointer; position: relative;
}
.ptm-row:hover { background: rgba(127, 127, 127, .1); }
.ptm-row.is-current { background: rgba(4, 171, 242, .1); }
.ptm-n { text-align: center; font-size: 13px; opacity: .55; font-variant-numeric: tabular-nums; position: relative; height: 22px; display: flex; align-items: center; justify-content: center; }
.ptm-n svg { width: 20px; height: 20px; fill: currentColor; display: none; }
.ptm-row:hover .ptm-n span, .ptm-row.is-current .ptm-n span { display: none; }
.ptm-row:hover .ptm-n .i-play { display: block; }
.ptm-row.is-current .ptm-n { opacity: 1; color: var(--ptm-ac); }
.ptm-row.is-current:not(:hover) .ptm-n .i-eq { display: flex; }
.ptm-row.is-current:hover .ptm-n .i-play { display: block; }
.ptm-row.is-current.is-playing:hover .ptm-n .i-play { display: none; }
.ptm-row.is-current.is-playing:hover .ptm-n .i-pause { display: block; }
.ptm-n .i-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.ptm-n .i-eq i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; }
.ptm-row.is-current.is-playing .i-eq i { animation: ptap-eq .9s ease-in-out infinite; }
.ptm-row.is-current.is-playing .i-eq i:nth-child(2) { animation-delay: -.3s; }
.ptm-row.is-current.is-playing .i-eq i:nth-child(3) { animation-delay: -.6s; }
.ptm-cover { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: rgba(127, 127, 127, .18); display: block; }
.ptm-t { min-width: 0; }
.ptm-t a, .ptm-t b { display: block; font-size: 14.5px; font-weight: 600; color: inherit !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptm-t a:hover { text-decoration: underline !important; }
.ptm-t span { display: block; font-size: 12.5px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ptm-d { font-size: 13px; opacity: .6; text-align: right; font-variant-numeric: tabular-nums; }
.ptm-ic { width: 36px; height: 36px; border: 0; background: none; color: inherit; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: .65; }
.ptm-ic:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.ptm-ic svg { width: 22px; height: 22px; fill: currentColor; }
.ptm-ic.ptm-heart .i-on { display: none; }
.ptm-ic.ptm-heart.is-saved { color: var(--ptm-heart); opacity: 1; }
.ptm-ic.ptm-heart.is-saved .i-on { display: block; }
.ptm-ic.ptm-heart.is-saved .i-off { display: none; }
.ptm-menu {
	position: absolute; right: 12px; top: 48px; z-index: 20; min-width: 190px; padding: 6px; border-radius: 10px;
	background: #23262d; color: #f3f4f6; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.ptm-menu button, .ptm-menu a { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; color: inherit !important; font-size: 13.5px; border-radius: 6px; cursor: pointer; text-align: left; text-decoration: none !important; }
.ptm-menu button:hover, .ptm-menu a:hover { background: rgba(255, 255, 255, .1); }
.ptm-menu svg { width: 18px; height: 18px; fill: currentColor; }
.ptm-empty { text-align: center; padding: 56px 16px; opacity: .75; }
.ptm-empty svg { width: 52px; height: 52px; fill: currentColor; opacity: .35; margin-bottom: 10px; }
.ptm-empty h3 { margin: 0 0 6px; font-size: 18px; }
.ptm-empty p { margin: 0 0 16px; font-size: 14px; }
.ptm-more { text-align: center; margin-top: 18px; }
.ptm-skel { height: 68px; margin: 6px 0; border-radius: 10px; background: linear-gradient(90deg, rgba(127, 127, 127, .1), rgba(127, 127, 127, .2), rgba(127, 127, 127, .1)); background-size: 200% 100%; animation: ptm-sk 1.2s linear infinite; }
@keyframes ptm-sk { to { background-position: -200% 0; } }
@media (max-width: 700px) {
	.ptm-row { grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 10px; padding: 8px 4px; }
	.ptm-n, .ptm-d { display: none; }
	.ptm-head h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.ptm-skel { animation: none; }
	.ptm-row.is-current.is-playing .i-eq i { animation: none; height: 10px; }
}

/* small "Audio" badge on thumbnails in video listings */
.ptap-badge {
	position: absolute; left: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 4px;
	background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 8px 5px 6px; border-radius: 12px; pointer-events: none;
}
.ptap-badge svg { width: 12px; height: 12px; fill: currentColor; }

/* ---------- 4. audio view on the watch page --------------------------------- */
.video-player.ptap-audio-watch { background: transparent !important; height: auto !important; padding-bottom: 0 !important; overflow: visible !important; }
.video-player.ptap-audio-watch > *:not(.ptw) { display: none !important; }
.ptw {
	position: relative; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: center;
	padding: 28px; border-radius: 14px; color: #f3f4f6; overflow: hidden;
	background: linear-gradient(135deg, var(--ptap-tint) 0%, #0d0e11 85%); transition: background .6s;
}
.ptw-art { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; object-fit: cover; background: #181a20; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); display: block; }
.ptw-body { min-width: 0; }
.ptw-kind { font-size: 12.5px; font-weight: 600; color: #aab0ba; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.ptw-kind svg { width: 15px; height: 15px; fill: currentColor; }
.ptw-title { margin: 0; font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; word-break: break-word; color: #fff; }
.ptw-artist { margin: 8px 0 0; font-size: 15px; color: #c9ced6; }
.ptw-artist a { color: inherit !important; text-decoration: none !important; }
.ptw-artist a:hover { text-decoration: underline !important; }
.ptw-meta { margin: 6px 0 0; font-size: 13px; color: #8f96a1; }
.ptw-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.ptw-btn {
	display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 26px; padding: 12px 26px; font-size: 15px; font-weight: 700; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff; transition: background .12s;
}
.ptw-btn:hover { background: rgba(255, 255, 255, .24); }
.ptw-btn svg { width: 22px; height: 22px; fill: currentColor; }
.ptw-btn-primary { background: #04abf2; }
.ptw-btn-primary:hover { background: #0398d6; }
.ptw-btn .i-pause, .ptw.is-playing .ptw-btn .i-play { display: none; }
.ptw.is-playing .ptw-btn .i-pause { display: block; }
.ptw-icon { width: 46px; height: 46px; padding: 0; justify-content: center; }
.ptw-icon.is-saved { color: var(--ptap-heart); }
.ptw-icon .i-on, .ptw-icon.is-saved .i-off { display: none; }
.ptw-icon.is-saved .i-on { display: block; }
@media (max-width: 700px) {
	.ptw { grid-template-columns: 1fr; padding: 18px; gap: 18px; justify-items: center; text-align: center; }
	.ptw-art { max-width: 280px; }
	.ptw-actions, .ptw-kind { justify-content: center; }
}

/* ---------- audio upload page extras (layout/upload-audio/content.html) ------ */
.pta-quality { margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(127, 127, 127, .25); border-radius: 10px; background: rgba(127, 127, 127, .06); font-size: 13px; }
.pta-quality b { font-weight: 700; }
.pta-quality .pta-q-line { display: flex; gap: 8px; align-items: flex-start; margin: 3px 0; }
.pta-quality .pta-q-line svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; fill: #2fb344; }
.pta-quality .pta-q-warn { color: #e0861a; }
.pta-quality .pta-q-warn svg { fill: #e0861a; }
.pta-preview { width: 100%; margin-top: 12px; height: 38px; }

/* ---------- track page hero (Gaana-style) ------------------------------------ */
.ptm-hero { display: flex; gap: 28px; align-items: flex-end; padding: 8px 0 26px; }
.ptm-hero-art { width: 240px; height: 240px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; background: rgba(127, 127, 127, .18); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.ptm-hero-body { min-width: 0; }
.ptm-hero-body h1 { margin: 0; font-size: clamp(26px, 4vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; word-break: break-word; }
.ptm-hero-artist { margin: 8px 0 0; font-size: 16px; opacity: .85; }
.ptm-hero-meta { margin: 4px 0 0; font-size: 13px; opacity: .55; }
.ptm-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ptm-btn-save .i-on { display: none; }
.ptm-btn-save.is-saved { color: var(--ptm-heart) !important; }
.ptm-btn-save.is-saved .i-on { display: block; }
.ptm-btn-save.is-saved .i-off { display: none; }
.ptm-sub { font-size: 18px; font-weight: 700; margin: 6px 0 8px; }
@media (max-width: 700px) {
	.ptm-hero { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
	.ptm-hero-art { width: min(70vw, 260px); height: auto; aspect-ratio: 1 / 1; }
	.ptm-hero-actions { justify-content: center; }
}

/* upload page: drop zone highlight while dragging a file over it */
#pta-drop.is-over { border-color: #04abf2; background: rgba(4, 171, 242, .08); }

/* channel page "Music" tab (PTAP.mountList) */
.ptm.ptm-embed { max-width: none; margin: 0; padding: 4px 0 40px; }
.ptm-embed-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.ptm-channel { padding-top: 6px; }