.popup-info-panel {
	position       : fixed;
	z-index        : 99999;
	left           : 50%;
	bottom         : 20px;
	display        : flex;
	box-sizing     : border-box;
	width          : 600px;
	max-width      : calc(100vw - 24px);
	height         : 60px;
	padding        : 0 18px;
	align-items    : center;
	justify-content: center;
	overflow       : hidden;
	transform      : translate(-50%, 10px);
	border         : 1px solid rgba(255, 255, 255, 0.34);
	border-radius  : 16px;
	box-shadow     : 0 12px 28px rgba(0, 0, 0, 0.38), 0 3px 8px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
	font           : 16px/1.4 Arial, Helvetica, sans-serif;
	text-align     : center;
	opacity        : 0;
	visibility     : hidden;
	pointer-events : none;
	transition     : opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.popup-info-panel::before {
	position      : absolute;
	top           : 0;
	right         : 0;
	left          : 0;
	height        : 48%;
	border-radius : inherit;
	background    : linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
	content       : "";
	pointer-events: none;
}

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

.popup-info-panel--red {
	border-color: #ff8a80;
	background  : linear-gradient(145deg, #ef5350 0%, #c62828 55%, #8e1717 100%);
	box-shadow  : 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(239, 83, 80, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
	color       : #fff;
}

.popup-info-panel--green {
	border-color: #a5d6a7;
	background  : linear-gradient(145deg, #4caf50 0%, #2e7d32 55%, #1b5e20 100%);
	box-shadow  : 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(76, 175, 80, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
	color       : #fff;
}

.popup-info-panel--blue {
	border-color: #90caf9;
	background  : linear-gradient(145deg, #42a5f5 0%, #1565c0 55%, #0d3f83 100%);
	box-shadow  : 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 24px rgba(66, 165, 245, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
	color       : #fff;
}

.popup-info-panel--yellow {
	border-color: #fff59d;
	background  : linear-gradient(145deg, #ffe082 0%, #f9a825 55%, #d47b00 100%);
	box-shadow  : 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 22px rgba(255, 193, 7, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.58), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
	color       : #171717;
}

.popup-info-panel__text {
	position       : relative;
	z-index        : 1;
	display        : block;
	max-width      : 100%;
	overflow       : hidden;
	color          : inherit;
	text-decoration: none;
	text-overflow  : ellipsis;
	white-space    : nowrap;
	text-shadow    : 0 1px 1px rgba(0, 0, 0, 0.22);
}

a.popup-info-panel__text:hover,
a.popup-info-panel__text:focus {
	color          : inherit;
	text-decoration: underline;
}

.popup-info-panel--yellow .popup-info-panel__text {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.popup-info-panel {
		transition: none;
	}
}

.popup-info-admin {
	--popup-admin-bg         : #171b22;
	--popup-admin-surface    : #202630;
	--popup-admin-surface-alt: #252d38;
	--popup-admin-border     : #3a4654;
	--popup-admin-text       : #edf2f7;
	--popup-admin-muted      : #b7c2cf;
	--popup-admin-accent     : #68a9f5;
	box-sizing               : border-box;
	padding                  : 18px;
	border                   : 1px solid var(--popup-admin-border);
	border-radius            : 8px;
	background               : var(--popup-admin-bg);
	color                    : var(--popup-admin-text);
	font-size                : 14px;
	line-height              : 1.5;
}

.popup-info-admin *,
.popup-info-admin *::before,
.popup-info-admin *::after {
	box-sizing: border-box;
}

.popup-info-admin-section {
	margin       : 0 0 20px;
	padding      : 18px;
	border       : 1px solid var(--popup-admin-border);
	border-radius: 6px;
	background   : var(--popup-admin-surface);
}

.popup-info-admin-section:last-child {
	margin-bottom: 0;
}

.popup-info-admin-section h2 {
	margin        : 0 0 16px;
	padding-bottom: 10px;
	border-bottom : 1px solid var(--popup-admin-border);
	color         : var(--popup-admin-text);
	font-size     : 18px;
	font-weight   : 600;
}

.popup-info-admin-section label {
	display    : block;
	margin     : 0 0 14px;
	color      : var(--popup-admin-muted);
	font-weight: 600;
}

.popup-info-admin-section input[type="text"],
.popup-info-admin-section input[type="number"],
.popup-info-admin-section select {
	display      : block;
	width        : 100%;
	max-width    : 520px;
	min-height   : 40px;
	margin       : 6px 0 0;
	padding      : 8px 10px;
	border       : 1px solid var(--popup-admin-border);
	border-radius: 4px;
	background   : #11161c;
	color        : var(--popup-admin-text);
	font         : inherit;
}

.popup-info-admin-section input:focus,
.popup-info-admin-section select:focus {
	border-color  : var(--popup-admin-accent);
	outline       : 2px solid rgba(104, 169, 245, 0.2);
	outline-offset: 1px;
}

.popup-info-admin-section button {
	min-height   : 36px;
	margin       : 4px 4px 4px 0;
	padding      : 7px 12px;
	border       : 1px solid #477fbd;
	border-radius: 4px;
	background   : #285f99;
	color        : #fff;
	font         : inherit;
	cursor       : pointer;
}

.popup-info-admin-section button:hover,
.popup-info-admin-section button:focus {
	border-color: #78b6fb;
	background  : #3478b9;
}

.popup-info-admin-section a {
	color: var(--popup-admin-accent);
}

.popup-info-admin-message {
	margin       : 0 0 16px;
	padding      : 11px 14px;
	border       : 1px solid #397d72;
	border-radius: 4px;
	background   : #183b37;
	color        : #d7fff4;
}

.popup-info-admin-table-wrap {
	max-width : 100%;
	overflow-x: auto;
}

.popup-info-admin-table {
	width          : 100%;
	border         : 1px solid var(--popup-admin-border);
	border-collapse: collapse;
	background     : var(--popup-admin-surface);
	color          : var(--popup-admin-text);
}

.popup-info-admin-table th,
.popup-info-admin-table td {
	padding       : 9px 10px;
	border        : 1px solid var(--popup-admin-border);
	text-align    : left;
	vertical-align: middle;
}

.popup-info-admin-table th {
	background : var(--popup-admin-surface-alt);
	color      : var(--popup-admin-text);
	font-weight: 600;
}

.popup-info-admin-table tr:nth-child(even) td {
	background: #1c232c;
}

.popup-info-admin-inline-form {
	display: inline-block;
	margin : 0;
}

.popup-info-admin-actions {
	white-space: nowrap;
}

.popup-info-admin-actions>a {
	display     : inline-block;
	margin-right: 8px;
}

.popup-info-admin-preview {
	margin-top: 22px;
	padding: 16px;
	border: 1px solid var(--popup-admin-border);
	border-radius: 6px;
	background: #171c23;
}

.popup-info-admin-preview h3 {
	margin: 0 0 6px;
	color: var(--popup-admin-text);
	font-size: 16px;
}

.popup-info-admin-preview > p {
	margin: 0 0 10px;
	color: var(--popup-admin-muted);
}

.popup-info-admin-preview-stage {
	display: flex;
	min-height: 88px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 10px;
	border: 1px dashed #465466;
	border-radius: 6px;
	background: radial-gradient(ellipse at center, #2a3441 0%, #171c23 72%);
}

.popup-info-admin-playlist-add {
	display      : flex;
	align-items  : flex-end;
	gap          : 10px;
	margin-bottom: 14px;
}

.popup-info-admin-playlist-add label {
	flex : 1 1 280px;
	margin: 0;
}

.popup-info-admin-playlist-add select {
	max-width: none;
}

.popup-info-admin-playlist-list {
	display   : grid;
	gap       : 8px;
	margin    : 0 0 16px;
	padding   : 0;
	list-style: none;
}

.popup-info-admin-playlist-item {
	display      : flex;
	min-height   : 46px;
	align-items  : center;
	gap          : 10px;
	padding      : 6px 10px;
	border       : 1px solid var(--popup-admin-border);
	border-radius: 5px;
	background   : var(--popup-admin-surface-alt);
}

.popup-info-admin-playlist-label {
	flex        : 1 1 auto;
	min-width   : 0;
	overflow    : hidden;
	color       : var(--popup-admin-text);
	text-overflow: ellipsis;
	white-space : nowrap;
}

.popup-info-admin-playlist-disabled {
	color      : #ffca7a;
	font-size  : 12px;
	white-space: nowrap;
}

.popup-info-admin-playlist-actions {
	display    : flex;
	flex       : 0 0 auto;
	align-items: center;
	gap        : 4px;
}

.popup-info-admin-playlist-actions button {
	min-width: 36px;
	margin   : 0;
	padding  : 5px 8px;
}

.popup-info-admin-loop {
	margin-top: 4px !important;
}

.popup-info-admin-loop input[type="checkbox"] {
	margin-right: 6px;
	accent-color: var(--popup-admin-accent);
}

.popup-info-admin-preview .popup-info-panel {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 1;
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none;
	transition: none;
}

.popup-info-admin-preview .popup-info-panel.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.popup-info-admin-preview-controls {
	margin-top: 10px;
}

.popup-info-admin-preview-status {
	min-height: 1.5em;
	margin: 8px 0 0 !important;
	color: var(--popup-admin-accent) !important;
}

@media (max-width: 600px) {
	.popup-info-admin {
		padding: 10px;
	}

	.popup-info-admin-section {
		padding: 12px;
	}

	.popup-info-admin-section h2 {
		font-size: 16px;
	}

	.popup-info-admin-actions {
		white-space: normal;
	}

	.popup-info-admin-playlist-add {
		display: block;
	}

	.popup-info-admin-playlist-item {
		flex-wrap: wrap;
	}

	.popup-info-admin-playlist-actions {
		margin-left: auto;
	}

	.popup-info-admin-inline-form {
		margin: 2px 2px 2px 0;
	}
}