:root{
	--dam-pl-bg:#081522;
	--dam-pl-panel:#0c1b2b;
	--dam-pl-accent:#9E45FF;
	--dam-pl-text:#ffffff;
	--dam-pl-muted:rgba(255,255,255,.62);
	--dam-pl-border:rgba(158,69,255,.65);
}

.dam-pl-app,
.dam-pl-single{
	color:var(--dam-pl-text);
	background:transparent;
	font-family:inherit;
}

.dam-pl-header,
.dam-pl-detail-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	margin-bottom:22px;
}

.dam-pl-header h2,
.dam-pl-detail-head h2{
	margin:0 0 6px;
	color:var(--dam-pl-text);
}

.dam-pl-header p,
.dam-pl-detail-head p{
	margin:0;
	color:var(--dam-pl-muted);
}

.dam-pl-button,
.dam-pl-add-track-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:42px;
	padding:10px 18px;
	color:#fff;
	background:var(--dam-pl-accent);
	border:1px solid var(--dam-pl-accent);
	border-radius:7px;
	font-weight:700;
	cursor:pointer;
	transition:.25s ease;
}

.dam-pl-button:hover,
.dam-pl-add-track-button:hover{
	color:var(--dam-pl-accent);
	background:#fff;
}

.dam-pl-button-secondary{
	color:var(--dam-pl-accent);
	background:transparent;
}

.dam-pl-create-form{
	display:grid;
	grid-template-columns:2fr 1fr auto;
	gap:12px;
	margin-bottom:24px;
	padding:18px;
	background:var(--dam-pl-panel);
	border:1px solid var(--dam-pl-border);
	border-radius:10px;
}

.dam-pl-create-form textarea{
	grid-column:1/-1;
	min-height:90px;
	resize:vertical;
}

.dam-pl-create-form input,
.dam-pl-create-form textarea,
.dam-pl-create-form select{
	width:100%;
	padding:11px 13px;
	color:#fff;
	background:var(--dam-pl-bg);
	border:1px solid var(--dam-pl-border);
	border-radius:6px;
	box-sizing:border-box;
}

.dam-pl-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px;
}

.dam-pl-card{
	overflow:hidden;
	background:var(--dam-pl-panel);
	border:1px solid var(--dam-pl-border);
	border-radius:12px;
}

.dam-pl-card-cover{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:150px;
	background:linear-gradient(135deg,#091a2d,#25103e);
	color:var(--dam-pl-accent);
}

.dam-pl-card-cover .dashicons{
	width:auto;
	height:auto;
	font-size:54px;
}

.dam-pl-card-body{
	padding:18px;
}

.dam-pl-card h3{
	margin:0 0 8px;
	color:#fff;
}

.dam-pl-card p{
	min-height:40px;
	margin:0 0 14px;
	color:var(--dam-pl-muted);
}

.dam-pl-meta,
.dam-pl-actions{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.dam-pl-meta{
	margin-bottom:16px;
	color:var(--dam-pl-muted);
	font-size:12px;
}

.dam-pl-actions .dam-pl-button{
	flex:1;
}

.dam-pl-player-panel{
	position:fixed;
	inset:5vh 5vw;
	z-index:999999;
	overflow:auto;
	padding:28px;
	background:var(--dam-pl-bg);
	border:1px solid var(--dam-pl-accent);
	border-radius:14px;
	box-shadow:0 25px 80px rgba(0,0,0,.55);
}

.dam-pl-close-player{
	position:absolute;
	top:12px;
	right:14px;
	width:38px;
	height:38px;
	color:#fff;
	background:transparent;
	border:1px solid var(--dam-pl-accent);
	border-radius:50%;
	font-size:24px;
	cursor:pointer;
}

.dam-pl-track-list{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.dam-pl-track{
	display:grid;
	grid-template-columns:54px minmax(150px,1fr) minmax(220px,360px) 36px;
	align-items:center;
	gap:14px;
	padding:12px;
	background:var(--dam-pl-panel);
	border:1px solid rgba(255,255,255,.09);
	border-radius:9px;
}

.dam-pl-track-cover{
	display:flex;
	align-items:center;
	justify-content:center;
	width:54px;
	height:54px;
	overflow:hidden;
	color:var(--dam-pl-accent);
	background:#06101c;
	border-radius:7px;
}

.dam-pl-track-cover img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.dam-pl-track-info{
	display:flex;
	flex-direction:column;
	min-width:0;
}

.dam-pl-track-info strong{
	color:#fff;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.dam-pl-track-info span{
	color:var(--dam-pl-muted);
}

.dam-pl-track-player audio{
	width:100%;
	height:36px;
}

.dam-pl-remove-track{
	width:34px;
	height:34px;
	color:#fff;
	background:transparent;
	border:1px solid var(--dam-pl-accent);
	border-radius:50%;
	cursor:pointer;
}

.dam-pl-empty,
.dam-pl-notice{
	padding:18px;
	color:var(--dam-pl-muted);
	background:var(--dam-pl-panel);
	border:1px solid var(--dam-pl-border);
	border-radius:9px;
}

.dam-pl-picker{
	position:fixed;
	inset:0;
	z-index:1000000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,0,0,.72);
}

.dam-pl-picker-box{
	width:min(520px,100%);
	max-height:80vh;
	overflow:auto;
	padding:22px;
	color:#fff;
	background:var(--dam-pl-bg);
	border:1px solid var(--dam-pl-accent);
	border-radius:12px;
}

.dam-pl-picker-list{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:16px 0;
}

.dam-pl-picker-item{
	width:100%;
	padding:12px;
	color:#fff;
	background:var(--dam-pl-panel);
	border:1px solid var(--dam-pl-border);
	border-radius:7px;
	text-align:left;
	cursor:pointer;
}

@media(max-width:900px){
	.dam-pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.dam-pl-track{grid-template-columns:46px minmax(0,1fr) 34px}
	.dam-pl-track-player{grid-column:1/-1}
}

@media(max-width:600px){
	.dam-pl-header,
	.dam-pl-detail-head{align-items:flex-start;flex-direction:column}
	.dam-pl-grid{grid-template-columns:1fr}
	.dam-pl-create-form{grid-template-columns:1fr}
	.dam-pl-create-form textarea{grid-column:auto}
	.dam-pl-player-panel{inset:2vh 3vw;padding:18px}
}
