/* ==========================================================================
   «Аудиоплеер» — страница /pleer/
   ==========================================================================
   Сцена (что играет), боковые панели (таймер сна, очередь, плейлисты),
   список записей с фильтрами и нижняя плашка, которая остаётся на экране,
   пока звук идёт.

   Файл подключается только на этой странице (см. moigrani-player.php), все
   имена — с префиксом .mgp, чтобы не спорить с остальными модулями.
   ========================================================================== */

/* Safari и iOS рисуют у <button> нативную заливку, скругление и цвет:
   `appearance: button` в computed так и остаётся, сколько бы ни стояло
   `background: none` в классе. В плеере все кнопки призрачные — снимаем
   нативность один раз здесь, конкретные заливки (круг play, «Слушать всё»)
   заданы ниже и перебивают это правило. */
.mgp :where(button) {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	color: inherit;
}

.mgp {
	/*
	 * Kadence красит ЛЮБУЮ кнопку своими переменными: `button:hover`,
	 * `button:focus` и `button:active` подставляют --global-palette-btn-bg*,
	 * а в нашей палитре hover-цвет — золото. Отсюда была «сплошная заливка»
	 * у кнопок после клика (фокус остаётся на кнопке). Внутри плеера эти
	 * переменные прозрачные: заливки задаём сами и только там, где надо.
	 */
	--global-palette-btn-bg: transparent;
	--global-palette-btn-bg-hover: transparent;
	--global-palette-btn: var(--mg-text);
	--global-palette-btn-hover: var(--mg-cream);
	--global-palette-btn-sec-bg: transparent;
	--global-palette-btn-sec-bg-hover: transparent;

	--mgp-art: 220px;      /* сторона обложки на сцене */
	--mgp-row: 64px;       /* высота строки списка */
	--mgp-dock: 68px;      /* высота нижней плашки */
	--mgp-gap: 1.35rem;

	/* Горизонтальные поля даёт .content-container темы: второй такой же
	   отступ съедал на телефоне по 44 px с каждой стороны. */
	padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(4rem, 8vw, 7rem);
	max-width: var(--global-content-width, 1180px);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* ---------- Шапка ---------- */

.mgp__head { max-width: 62ch; margin-bottom: clamp(1rem, 2vw, 1.6rem); }

.mgp__title {
	margin: .2rem 0 .7rem;
	font-size: clamp(2.1rem, 4.4vw, 3.1rem);
	line-height: 1.06;
	color: var(--mg-cream);
}

.mgp__lead {
	margin: 0 0 .8rem;
	color: var(--mg-text);
	font-size: 1.02rem;
	line-height: 1.62;
}

.mgp__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem;
	margin: 0;
	font-family: var(--mg-sans);
	font-size: .66rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__dot { color: rgba(138, 129, 117, .75); }

/* ---------- Замок для гостя ---------- */

.mgp__gate {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: var(--mgp-gap);
	padding: 1rem 1.15rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 3px;
	background: linear-gradient(120deg, rgba(212, 162, 78, .08), rgba(212, 162, 78, .015));
}

.mgp__gate-icon { display: inline-flex; color: var(--mg-gold); }
.mgp__gate-icon .mg-lock { width: 22px; height: 22px; }
.mgp__gate-body { flex: 1 1 20rem; min-width: 0; }
.mgp__gate-title { margin: 0 0 .2rem; color: var(--mg-cream); font-family: var(--mg-serif); font-size: 1.2rem; }
.mgp__gate-text { margin: 0; color: var(--mg-muted); font-size: .9rem; line-height: 1.55; }

/* Пустое состояние */

.mgp__empty-state {
	padding: clamp(2rem, 5vw, 3.4rem);
	border: 1px dashed var(--mg-line);
	border-radius: 4px;
	text-align: center;
}

.mgp__empty-title { margin: 0 0 .5rem; font-family: var(--mg-serif); font-size: 1.5rem; color: var(--mg-cream); }
.mgp__empty-text { margin: 0 0 1.2rem; color: var(--mg-muted); }

/* ---------- Сетка: сцена + боковые панели ---------- */

.mgp__grid {
	display: grid;
	/* Боковых панелей по умолчанию нет: таймер и очередь открываются
	   кнопками, плейлисты спрятаны. Пустая вторая колонка отбирала у сцены
	   400 px, поэтому по умолчанию она одна, а вторая появляется, когда
	   панель действительно видна. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mgp-gap);
	align-items: start;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---------- Сцена ---------- */
.mgp__grid:has(> .mgp__side > .mgp__panel:not([hidden])) {
	grid-template-columns: minmax(0, 1.62fr) minmax(0, .92fr);
}

.mgp__stage {
	display: grid;
	grid-template-columns: var(--mgp-art) minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--mg-line);
	border-radius: 4px;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(212, 162, 78, .07), transparent 60%),
		var(--mg-surface);
	min-width: 0;
}

.mgp__art {
	position: relative;
	width: var(--mgp-art);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 3px;
	background:
		radial-gradient(70% 70% at 30% 25%, rgba(212, 162, 78, .22), transparent 70%),
		linear-gradient(150deg, #1b1610, #0d0a07);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}

.mgp__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mgp__art-fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(45% 45% at 50% 50%, rgba(212, 162, 78, .18), transparent 70%),
		repeating-linear-gradient(45deg, rgba(242, 232, 213, .03) 0 2px, transparent 2px 8px);
}

.mgp__art-veil {
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(180deg, transparent, rgba(10, 8, 6, .72));
	pointer-events: none;
}

.mgp__art-badge {
	position: absolute;
	top: .5rem;
	left: .5rem;
	padding: .16rem .45rem;
	border: 1px solid rgba(212, 162, 78, .4);
	border-radius: 2px;
	background: rgba(10, 8, 6, .78);
	color: var(--mg-gold-soft);
	font-family: var(--mg-sans);
	font-size: .56rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mgp__stage-body { display: flex; flex-direction: column; min-width: 0; }

.mgp__kicker {
	margin: 0 0 .35rem;
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mgp__now {
	margin: 0 0 .25rem;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.18;
	color: var(--mg-cream);
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

.mgp__now-sub {
	margin: 0 0 1rem;
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

/* Перемотка */

/* Описание истории под подписью: две строки, чтобы сцена не разъезжалась
   от длинного отрывка. Полный текст — на странице истории. */
.mgp__now-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 .9rem;
	max-width: 62ch;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--mg-muted);
}

.mgp__now-desc:empty { display: none; }

.mgp__progress { margin-top: auto; }

/* Тема красит `input[type="range"]` рамкой и скруглением (global.min.css) —
   селектор класса её не перебивает, поэтому здесь есть родитель. */
.mgp input.mgp__seek {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: none;
	outline-offset: 4px;
	width: 100%;
	height: 22px;
	background: none;
	cursor: pointer;
}

.mgp__seek::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mg-gold) var(--mg-progress, 0%), rgba(242, 232, 213, .14) var(--mg-progress, 0%));
}

.mgp__seek::-moz-range-track {
	height: 3px;
	border-radius: 2px;
	background: rgba(242, 232, 213, .14);
}

.mgp__seek::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--mg-gold); }

.mgp__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -4.5px;
	border-radius: 50%;
	background: var(--mg-gold-soft);
	box-shadow: 0 0 0 3px rgba(212, 162, 78, .18);
}

.mgp__seek::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--mg-gold-soft);
}

.mgp__seek:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 4px; }
.mgp__seek:disabled { opacity: .4; cursor: default; }

.mgp__times {
	display: flex;
	justify-content: space-between;
	margin-top: -.1rem;
	font-family: var(--mg-sans);
	font-size: .66rem;
	letter-spacing: .08em;
	color: var(--mg-muted);
	font-variant-numeric: tabular-nums;
}

/* Кнопки управления */

.mgp__controls {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .6rem 0 .2rem;
	flex-wrap: wrap;
}

.mgp__ctl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 3px;
	color: var(--mg-text);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.mgp__ctl svg { width: 20px; height: 20px; }
.mgp__ctl:hover { color: var(--mg-gold-soft); border-color: var(--mg-line-gold); }
.mgp__ctl:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__ctl[aria-pressed="true"] {
	color: var(--mg-gold);
	border-color: var(--mg-line-gold);
	background: rgba(212, 162, 78, .1);
}

.mgp__play {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 .3rem;
	padding: 0;
	background: var(--mg-gold);
	border: 0;
	border-radius: 50%;
	color: var(--mg-ink);
	cursor: pointer;
	transition: transform .16s ease, background .18s ease, box-shadow .18s ease;
	box-shadow: 0 10px 26px -14px rgba(212, 162, 78, .9);
}

.mgp__play svg { width: 24px; height: 24px; }
.mgp__play:hover { background: var(--mg-gold-soft); transform: scale(1.03); }
.mgp__play:active { transform: scale(.97); }
.mgp__play:focus-visible { outline: 2px solid var(--mg-cream); outline-offset: 3px; }
.mgp__play[aria-disabled="true"] { opacity: .75; }

/* Дополнительные настройки */

.mgp__extras {
	display: flex;
	align-items: center;
	gap: .55rem;
	flex-wrap: wrap;
	margin-top: .7rem;
	padding-top: .8rem;
	border-top: 1px solid var(--mg-line);
}

.mgp__rate { display: inline-flex; align-items: center; gap: .4rem; }

.mgp__rate-label,
.mgp__sort-label {
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__rate select {
	padding: .3rem .5rem;
	background: var(--mg-surface-2);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .72rem;
	cursor: pointer;
}

.mgp__rate select:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__volume { display: inline-flex; align-items: center; gap: .35rem; }
.mgp__vol-label { display: inline-flex; color: var(--mg-muted); }
.mgp__vol-label svg { width: 18px; height: 18px; }

.mgp__volume input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: none;
	width: 82px;
	height: 20px;
	background: none;
	cursor: pointer;
}

.mgp__volume input[type="range"]::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--mg-gold) var(--mg-vol, 100%), rgba(242, 232, 213, .14) var(--mg-vol, 100%));
}

.mgp__volume input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(242, 232, 213, .14); }
.mgp__volume input[type="range"]::-moz-range-progress { height: 3px; background: var(--mg-gold); }
.mgp__volume input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: var(--mg-gold-soft);
}
.mgp__volume input[type="range"]::-moz-range-thumb {
	width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--mg-gold-soft);
}

.mgp__chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .34rem .6rem;
	background: none;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .06em;
	text-decoration: none;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.mgp__chip svg { width: 15px; height: 15px; }
.mgp__chip:hover { color: var(--mg-gold-soft); border-color: var(--mg-line-gold); }

/*
 * Наведение у всех призрачных кнопок — как у «Читать текст»: меняются цвет
 * и рамка, фон остаётся прозрачным. Заливка в наведении осталась только у
 * золотого play, где она и есть смысл кнопки.
 */
.mgp :where(
	.mgp__chip,
	.mgp__ctl,
	.mgp__row-play,
	.mgp__row-fav,
	.mgp__row-more,
	.mgp__tag,
	.mgp__facet-link,
	.mgp__sleep-time,
	.mgp__link-btn,
	.mgp__more-btn,
	.mgp__playall,
	.mgp__filter-reset,
	.mgp__queue-title,
	.mgp__queue-del,
	.mgp__list-name,
	.mgp__list-del,
	.mgp__dock-btn,
	.mgp__row-pop button,
	.mgp__row-pop a,
	.mgp__sort-btn,
	.mgp__sort-opt
):hover,
.mgp :where(
	.mgp__chip,
	.mgp__ctl,
	.mgp__row-play,
	.mgp__row-fav,
	.mgp__row-more,
	.mgp__tag,
	.mgp__facet-link,
	.mgp__sleep-time,
	.mgp__link-btn,
	.mgp__more-btn,
	.mgp__playall,
	.mgp__filter-reset,
	.mgp__queue-title,
	.mgp__queue-del,
	.mgp__list-name,
	.mgp__list-del,
	.mgp__dock-btn,
	.mgp__row-pop button,
	.mgp__row-pop a,
	.mgp__sort-btn,
	.mgp__sort-opt
):focus-visible {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

/* На тач-экранах браузер сам подсвечивает нажатое серым — тоже снимаем. */
.mgp :where(button, a) { -webkit-tap-highlight-color: transparent; }

/* Подсказка к «Мини-плееру»: почему кнопка вообще нужна. Своя плашка, а не
   `title`: тот появляется через секунду и на тач-экране не появляется вовсе. */
.mgp__chip--mini { position: relative; }

.mgp__chip--mini::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + .5rem);
	right: 0;
	z-index: 40;
	width: max-content;
	max-width: 17rem;
	padding: .45rem .6rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 3px;
	background: rgba(10, 8, 6, .97);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .7);
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .68rem;
	line-height: 1.4;
	letter-spacing: .01em;
	text-transform: none;
	white-space: normal;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.mgp__chip--mini:hover::after,
.mgp__chip--mini:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.mgp__chip:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__chip[aria-pressed="true"],
.mgp__chip.is-on {
	color: var(--mg-gold);
	border-color: var(--mg-line-gold);
	background: rgba(212, 162, 78, .1);
}

.mgp__chip.is-on svg { color: var(--mg-gold); }


/* ---------- Боковые панели ---------- */

.mgp__side { display: grid; gap: .85rem; min-width: 0; }

.mgp__panel {
	padding: .95rem 1rem;
	border: 1px solid var(--mg-line);
	border-radius: 4px;
	background: var(--mg-surface);
}

.mgp__panel-title {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .35rem;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-gold);
}

.mgp__panel-count {
	padding: .02rem .35rem;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-muted);
	font-size: .58rem;
	letter-spacing: .06em;
}

.mgp__panel-lead { margin: 0 0 .7rem; font-size: .82rem; color: var(--mg-muted); line-height: 1.5; }
.mgp__panel-empty { margin: .5rem 0 0; font-size: .8rem; color: var(--mg-muted); line-height: 1.5; }

/* Таймер сна */

.mgp__sleep-times { display: flex; flex-wrap: wrap; gap: .35rem; }

.mgp__sleep-time {
	padding: .34rem .6rem;
	background: none;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .7rem;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.mgp__sleep-time:hover { color: var(--mg-gold-soft); border-color: var(--mg-line-gold); }
.mgp__sleep-time.is-on { color: var(--mg-gold); border-color: var(--mg-line-gold); background: rgba(212, 162, 78, .1); }

.mgp__sleep-status {
	margin: .7rem 0 0;
	padding: .5rem .6rem;
	border-left: 2px solid var(--mg-gold);
	background: rgba(212, 162, 78, .06);
	color: var(--mg-cream);
	font-size: .82rem;
	font-variant-numeric: tabular-nums;
}

.mgp__link-btn {
	margin-top: .7rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-muted);
	font-family: var(--mg-sans);
	font-size: .7rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mgp__link-btn:hover { color: var(--mg-gold-soft); }

/* Очередь */

.mgp__queue { margin: .4rem 0 0; padding: 0; list-style: none; counter-reset: mgp-q; }

.mgp__queue li {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .38rem 0;
	border-bottom: 1px solid rgba(242, 232, 213, .05);
	font-size: .82rem;
	color: var(--mg-text);
}

.mgp__queue li.is-current { color: var(--mg-gold); }
.mgp__queue li:last-child { border-bottom: 0; }

.mgp__queue-title {
	flex: 1 1 auto;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mgp__queue-del {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-muted);
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
}

.mgp__queue-del:hover { color: var(--mg-cream); }

/* Плейлисты */

.mgp__list-new { display: flex; gap: .4rem; margin: .2rem 0 .6rem; }

.mgp__list-new input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .38rem .55rem;
	background: var(--mg-ink-2);
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .8rem;
}

.mgp__list-new input::placeholder { color: rgba(138, 129, 117, .8); }
.mgp__list-new input:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 1px; }

.mgp__list-hint { margin: .1rem 0 .5rem; font-size: .74rem; color: var(--mg-muted); }

.mgp__lists { display: grid; gap: .3rem; }

.mgp__list-head { display: flex; align-items: center; gap: .3rem; }

.mgp__list-name {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: .45rem;
	min-width: 0;
	padding: .34rem .1rem;
	background: none;
	border: 0;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .82rem;
	text-align: left;
	cursor: pointer;
}

.mgp__list-name:hover { color: var(--mg-gold-soft); }
.mgp__list-name.is-on { color: var(--mg-gold); }

.mgp__list-num {
	flex: 0 0 auto;
	padding: .02rem .3rem;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-muted);
	font-size: .58rem;
}

.mgp__list-del {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 2px;
	color: rgba(138, 129, 117, .8);
	font-size: .9rem;
	line-height: 1;
	cursor: pointer;
}

.mgp__list-del:hover { color: var(--mg-cream); border-color: var(--mg-line); }

/* «Продолжить» */

.mgp__continue { margin: .4rem 0 0; padding: 0; list-style: none; }

.mgp__continue li { padding: .3rem 0; font-size: .8rem; }

.mgp__continue button {
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mgp__continue button:hover { color: var(--mg-gold-soft); }
.mgp__continue .mgp__continue-pos { color: var(--mg-muted); font-size: .7rem; }

/* ---------- Список записей ---------- */

/* Без `overflow: hidden`: меню строки («···») выезжает за нижний край
   карточки, и обрезка превращала его в светлую щепку. Углы держим радиусом
   на самих элементах. */
.mgp__browse {
	border: 1px solid var(--mg-line);
	border-radius: 4px;
	background: var(--mg-surface);
	overflow: visible;
}

.mgp__browse-head {
	border-radius: 4px 4px 0 0;
	position: sticky;
	top: 0;
	z-index: 5;
	display: grid;
	gap: .7rem;
	padding: 1rem 1.1rem;
	border-bottom: 1px solid var(--mg-line);
	background: linear-gradient(180deg, rgba(20, 17, 13, .98), rgba(20, 17, 13, .94));
	backdrop-filter: blur(6px);
}

/* Активный фильтр: одна строка вместо ряда пузырьков */
.mgp__filter-note {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: -.1rem 0 .1rem;
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__filter-note[hidden] { display: none; }
.mgp__filter-note-label { color: var(--mg-muted); }
.mgp__filter-note-value { color: var(--mg-gold); }

.mgp__filter-reset {
	padding: 0;
	border: 0;
	background: none;
	color: var(--mg-muted);
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mgp__filter-reset:hover { color: var(--mg-gold-soft); }

.mgp__browse-title {
	margin: 0;
	font-family: var(--mg-serif);
	font-weight: 400;
	font-size: 1.45rem;
	color: var(--mg-cream);
}

.mgp__browse-tools {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
}

.mgp__search {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex: 1 1 15rem;
	min-width: 0;
	padding: .34rem .6rem;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	background: var(--mg-ink-2);
	color: var(--mg-muted);
}

.mgp__search svg { width: 16px; height: 16px; flex: 0 0 auto; }

.mgp__search input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .82rem;
}

.mgp__search input::placeholder { color: rgba(138, 129, 117, .85); }
.mgp__search input:focus-visible { outline: none; }
.mgp__search:focus-within { border-color: var(--mg-line-gold); }

.mgp__sort { position: relative; display: inline-flex; align-items: center; gap: .45rem; }

.mgp__sort-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .34rem .6rem;
	background: none;
	border: 1px solid var(--mg-line);
	border-radius: 2px;
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .72rem;
	letter-spacing: .02em;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}

.mgp__sort-btn:hover { color: var(--mg-gold-soft); border-color: var(--mg-line-gold); }
.mgp__sort-btn:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__sort-btn[aria-expanded="true"] {
	color: var(--mg-gold);
	border-color: var(--mg-line-gold);
}

.mgp__sort-chev {
	width: 10px;
	height: 7px;
	color: var(--mg-muted);
	transition: transform .18s ease, color .18s ease;
}

.mgp__sort-btn[aria-expanded="true"] .mgp__sort-chev { transform: rotate(180deg); color: var(--mg-gold); }

.mgp__sort-pop {
	position: absolute;
	top: calc(100% + .4rem);
	right: 0;
	z-index: 40;
	min-width: 15.5rem;
	padding: .35rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 3px;
	background: var(--mg-surface-2);
	box-shadow: 0 22px 46px -24px rgba(0, 0, 0, .95);
}

.mgp__sort-pop[hidden] { display: none; }

.mgp__sort-group {
	margin: .4rem .5rem .3rem;
	font-family: var(--mg-sans);
	font-size: .54rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__sort-group:first-child { margin-top: .18rem; }

.mgp__sort-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .7rem;
	width: 100%;
	padding: .42rem .5rem;
	background: none;
	border: 0;
	border-left: 2px solid transparent;
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .78rem;
	text-align: left;
	cursor: pointer;
	transition: color .14s ease, border-color .14s ease, padding-left .14s ease;
}

.mgp__sort-opt:hover,
.mgp__sort-opt:focus-visible {
	color: var(--mg-gold-soft);
	border-left-color: var(--mg-line-gold);
	padding-left: .7rem;
	outline: none;
}

.mgp__sort-opt.is-on {
	color: var(--mg-gold);
	border-left-color: var(--mg-gold);
}

.mgp__sort-mark {
	visibility: hidden;
	color: var(--mg-gold);
	font-size: .72rem;
}

.mgp__sort-opt.is-on .mgp__sort-mark { visibility: visible; }

.mgp__playall {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .42rem .75rem;
	background: rgba(212, 162, 78, .14);
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	color: var(--mg-gold);
	font-family: var(--mg-sans);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.mgp__playall svg { width: 14px; height: 14px; }
.mgp__playall:hover { color: var(--mg-gold-soft); border-color: var(--mg-gold); }
.mgp__playall:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }


/* Строки */

.mgp__list { margin: 0; padding: 0; list-style: none; }

.mgp__row {
	position: relative;
	display: grid;
	grid-template-columns: 44px 26px 48px minmax(0, 1fr) auto 34px 32px;
	align-items: center;
	gap: .65rem;
	min-height: 0;
	padding: .75rem 1.1rem;
	border-bottom: 1px solid rgba(242, 232, 213, .05);
	transition: background .16s ease;
}

.mgp__row:last-child { border-bottom: 0; border-radius: 0 0 4px 4px; }
.mgp__row:hover { background: rgba(242, 232, 213, .022); }
.mgp__row.is-current { background: rgba(212, 162, 78, .07); }
.mgp__row.is-hidden { display: none; }

/* Запись за порцией пагинации: она есть в разметке, но не на экране */
.mgp__row.is-over { display: none; }

/* Прослушанное приглушаем: список читается как «что ещё осталось» */
.mgp__row.is-seen .mgp__row-title { color: rgba(242, 232, 213, .62); }
.mgp__row.is-seen .mgp__row-art { opacity: .6; }
.mgp__row.is-seen .mgp__row-play { opacity: .7; }

.mgp__row.is-current.is-seen .mgp__row-title { color: var(--mg-gold); }
.mgp__row.is-current.is-seen .mgp__row-art { opacity: 1; }

.mgp__row-flags { display: flex; flex-wrap: wrap; gap: .35rem .7rem; }

.mgp__row-seen,
.mgp__row-is-hidden {
	font-family: var(--mg-sans);
	font-size: .58rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mgp__row-seen { color: rgba(138, 129, 117, .95); }
.mgp__row-is-hidden { color: rgba(212, 162, 78, .9); }

/* Порция списка: «Показать ещё» и счётчик */
.mgp__more {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .9rem;
	padding: 1.1rem 1.1rem 1.3rem;
	border-top: 1px solid rgba(242, 232, 213, .06);
}

.mgp__more[hidden] { display: none; }

.mgp__more-btn {
	padding: .48rem .95rem;
	background: none;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	color: var(--mg-gold);
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.mgp__more-btn:hover { color: var(--mg-gold-soft); border-color: var(--mg-gold); }
.mgp__more-btn:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__more-count {
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__row-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	padding: 0;
	background: none;
	border: 1px solid var(--mg-line);
	border-radius: 50%;
	color: var(--mg-text);
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.mgp__row-play svg { width: 15px; height: 15px; }
.mgp__row:hover .mgp__row-play { color: var(--mg-gold-soft); border-color: var(--mg-line-gold); }
.mgp__row-play:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }
.mgp__row.is-current .mgp__row-play { color: var(--mg-gold); border-color: var(--mg-line-gold); background: rgba(212, 162, 78, .12); }

.mgp__row-num {
	font-family: var(--mg-sans);
	font-size: .68rem;
	color: rgba(138, 129, 117, .75);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Номер у играющей строки не убираем из раскладки, а прячем: `display:none`
   выкидывает ячейку из сетки, и все следующие колонки съезжают на одну —
   строка играющего трека разваливалась (поймано 26.10). */
.mgp__row.is-current .mgp__row-num { visibility: hidden; }

.mgp__row-art {
	width: 44px; height: 44px;
	overflow: hidden;
	border-radius: 2px;
	background: linear-gradient(150deg, #1b1610, #0d0a07);
}

.mgp__row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgp__row-art--empty { background: radial-gradient(60% 60% at 40% 35%, rgba(212, 162, 78, .18), transparent 70%), linear-gradient(150deg, #1b1610, #0d0a07); }

.mgp__row-main { min-width: 0; display: grid; gap: .22rem; }

/* Описание — как в каталоге историй: две строки, дальше многоточие. */
.mgp__row-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 74ch;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--mg-text);
}

/* Теги — кнопки: клик фильтрует ленту по тегу. */
.mgp__row-tags { display: flex; flex-wrap: wrap; gap: .1rem .55rem; }

.mgp__tag {
	padding: 0;
	border: 0;
	background: none;
	color: rgba(138, 129, 117, .95);
	font-family: var(--mg-sans);
	font-size: .68rem;
	letter-spacing: .03em;
	cursor: pointer;
	transition: color .16s ease;
}

.mgp__tag:hover { color: var(--mg-gold-soft); }
.mgp__tag:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

/* Строка граней: «Грани — Маска · Раненый · Тень». Служебное слово тихое,
   названия золотом, как в карточке каталога. */
.mgp__row-facets {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .35rem;
	font-family: var(--mg-sans);
	font-size: .64rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__row-facets-label { color: var(--mg-muted); }
.mgp__row-facets-dash { margin-right: .15rem; color: rgba(138, 129, 117, .75); }
.mgp__row-facets-sep { color: rgba(138, 129, 117, .75); }

.mgp__facet-link {
	padding: 0;
	border: 0;
	background: none;
	color: rgba(212, 162, 78, .9);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: color .16s ease;
}

.mgp__facet-link:hover { color: var(--mg-gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.mgp__facet-link:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__row-date { color: rgba(138, 129, 117, .85); }

.mgp__row-title {
	color: var(--mg-cream);
	font-family: var(--mg-serif);
	font-size: 1.05rem;
	line-height: 1.25;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mgp__row-title:hover { color: var(--mg-gold-soft); }
.mgp__row.is-current .mgp__row-title { color: var(--mg-gold); }

.mgp__row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	font-family: var(--mg-sans);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__row-facet { color: rgba(212, 162, 78, .85); }


.mgp__row.is-current .mgp__row-facet { color: var(--mg-gold); }

.mgp__row-dur {
	font-family: var(--mg-sans);
	font-size: .7rem;
	color: var(--mg-muted);
	font-variant-numeric: tabular-nums;
}

.mgp__row.is-current .mgp__row-dur { color: var(--mg-gold-soft); }

.mgp__row-fav,
.mgp__row-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 2px;
	color: rgba(138, 129, 117, .7);
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease;
}

.mgp__row-fav svg { width: 16px; height: 16px; }
.mgp__row-more { font-size: 1rem; letter-spacing: .06em; line-height: 1; }

.mgp__row-fav:hover,
.mgp__row-more:hover { color: var(--mg-cream); border-color: var(--mg-line); }
.mgp__row-fav:focus-visible,
.mgp__row-more:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

.mgp__row-fav.is-on { color: var(--mg-gold); }
.mgp__row-fav.is-on svg { fill: var(--mg-gold); }

/* Меню строки */

.mgp__row-pop {
	position: absolute;
	right: 1.1rem;
	top: calc(100% - .4rem);
	z-index: 20;
	display: grid;
	min-width: 12rem;
	padding: .35rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 3px;
	background: var(--mg-surface-2);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .95);
}

.mgp__row-pop[hidden] { display: none; }

/* У нижней кромки экрана меню раскрывается вверх — класс ставит скрипт. */
.mgp__row-pop.is-up {
	top: auto;
	bottom: calc(100% + .2rem);
}

.mgp__row-pop button,
.mgp__row-pop a {
	padding: .42rem .55rem;
	background: none;
	border: 0;
	border-radius: 2px;
	color: var(--mg-text);
	font-family: var(--mg-sans);
	font-size: .78rem;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.mgp__row-pop button:hover,
.mgp__row-pop a:hover { color: var(--mg-gold-soft); }

.mgp__nothing {
	margin: 0;
	padding: 2rem 1.1rem;
	text-align: center;
	color: var(--mg-muted);
}

/* ---------- Нижняя плашка ---------- */

.mgp__dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: 44px 40px minmax(0, 1fr) auto 40px auto;
	align-items: center;
	gap: .6rem;
	padding: .55rem var(--mg-gutter);
	min-height: var(--mgp-dock);
	border-top: 1px solid var(--mg-line-gold);
	background: rgba(16, 13, 10, .96);
	backdrop-filter: blur(10px);
	box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .9);
}

.mgp__dock[hidden] { display: none; }

.mgp__dock-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	padding: 0;
	background: var(--mg-gold);
	border: 0;
	border-radius: 50%;
	color: var(--mg-ink);
	cursor: pointer;
}

.mgp__dock-play svg { width: 18px; height: 18px; }
.mgp__dock-play:focus-visible { outline: 2px solid var(--mg-cream); outline-offset: 2px; }

.mgp__dock-art {
	width: 38px; height: 38px;
	border-radius: 2px;
	background: linear-gradient(150deg, #1b1610, #0d0a07) center / cover no-repeat;
}

.mgp__dock-main { min-width: 0; display: grid; gap: .05rem; }

.mgp__dock-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mg-cream);
	font-family: var(--mg-serif);
	font-size: .98rem;
}

.mgp__dock-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

.mgp__dock-time {
	font-family: var(--mg-sans);
	font-size: .68rem;
	color: var(--mg-muted);
	font-variant-numeric: tabular-nums;
}

.mgp__dock-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--mg-text);
	cursor: pointer;
}

.mgp__dock-btn svg { width: 17px; height: 17px; }
.mgp__dock-btn:hover { color: var(--mg-gold-soft); border-color: var(--mg-line-gold); }
.mgp__dock-btn:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 2px; }

/* Закрытие полосы: кнопка тише соседних — это уборка, а не управление звуком. */
.mgp__dock-close { color: var(--mg-muted); }
.mgp__dock-close:hover { color: var(--mg-gold-soft); }

.mgp__dock-timer {
	padding: .14rem .4rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	color: var(--mg-gold-soft);
	font-family: var(--mg-sans);
	font-size: .6rem;
	letter-spacing: .1em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mgp__dock-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(242, 232, 213, .08);
}

.mgp__dock-fill {
	display: block;
	height: 100%;
	width: var(--mg-dock, 0%);
	background: var(--mg-gold);
	transition: width .25s linear;
}

/* Место под плашку, чтобы она не накрывала подвал */
body.mgp-has-dock { padding-bottom: calc(var(--mgp-dock, 68px) + 1rem); }

/* ---------- Узкие экраны ---------- */

@media (max-width: 980px) {
	.mgp__grid { grid-template-columns: minmax(0, 1fr); }

	.mgp__stage { grid-template-columns: 168px minmax(0, 1fr); }
	.mgp { --mgp-art: 168px; }
}

@media (max-width: 640px) {
	.mgp { --mgp-art: 170px; --mgp-gap: 1rem; }

	/* Обложка сверху и по центру: рядом с ней на 390 px оставалось 130 px
	   на название и кнопки, и управление вставало в столбик. */
	.mgp__stage { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding: 1rem; }

	.mgp__art { width: 100%; max-width: 170px; margin: 0 auto; }

	.mgp__now { font-size: clamp(1.2rem, 5.5vw, 1.5rem); }

	/*
	 * Приборы одной строкой с горизонтальной прокруткой. Было: на 390 px они
	 * ломались в три ряда («Скорость», «В избранное / Очередь / Таймер сна»,
	 * «Читать текст / Мини-плеер») и съедали около 150 px — почти четверть
	 * блока «сейчас играет».
	 */
	.mgp__extras {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		gap: .45rem;
		padding-bottom: .1rem;
	}
	.mgp__extras::-webkit-scrollbar { display: none; }
	.mgp__extras > * { flex: 0 0 auto; }

	/* Описание на телефоне дублирует строку в списке ниже — убираем. */
	.mgp__now-desc { display: none; }
	.mgp__volume input[type="range"] { width: 62px; }

	.mgp__row {
		grid-template-columns: 44px minmax(0, 1fr) 44px 40px;
		gap: .4rem;
		padding: .55rem .8rem;
	}

	.mgp__row-num { display: none; }
	.mgp__row-dur { display: none; }

	/* Обложка в строке на телефоне съедала 40 px из 300 — название
	   обрезалось до «Голос мате…». Кадр остаётся на сцене. */
	.mgp__row-art { display: none; }

	.mgp__row-main { gap: .18rem; }

	/* На телефоне название переносится на две строки: в одну оно
	   обрезалось до «Голос матери звучит в …». */
	.mgp__row-title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		white-space: normal;
	}

	.mgp__row-meta {
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
	}

	.mgp__row-meta > span { flex: 0 0 auto; }

	.mgp__row-fav { width: 44px; justify-self: end; }
	.mgp__row-more { width: 40px; justify-self: end; }

	/* Инструменты списка: поиск во всю ширину, под ним сортировка и «слушать всё» */
	.mgp__search { flex: 1 1 100%; }
	.mgp__sort { flex: 1 1 auto; }
	.mgp__sort-label { display: none; }
	.mgp__sort-pop { right: auto; left: 0; min-width: min(15.5rem, calc(100vw - 2.5rem)); }
	.mgp__playall { flex: 0 0 auto; letter-spacing: .08em; }

	/* Управление в одну строку: на 390 px семь кнопок по 38 px не влезали
	   и «следующая» с «повтором» уезжали во второй ряд. */
	.mgp__controls { flex-wrap: nowrap; justify-content: space-between; gap: .3rem; }
	/* Ниже общей нормы «44 px под палец»: семь кнопок по 44 px в строку не
	   встают, и «повтор» уезжал за край экрана. 36 px — компромисс, которым
	   пользуются все мобильные плееры для транспорта. */
	.mgp__ctl { width: 36px; height: 40px; min-width: 36px; min-height: 40px; }
	.mgp__ctl svg { width: 18px; height: 18px; }
	.mgp__play { width: 52px; height: 52px; margin: 0 .1rem; }
	.mgp__play svg { width: 22px; height: 22px; }

	.mgp__browse-head { padding: .85rem .9rem; }

	.mgp__dock {
		grid-template-columns: 40px 36px minmax(0, 1fr) 34px auto;
		gap: .45rem;
		padding: .45rem var(--mg-gutter) calc(.45rem + env(safe-area-inset-bottom, 0px));
	}

	.mgp__dock-time { display: none; }

	/* Кнопки под палец: 44 px — не украшение, а норма. Исключение —
	   транспорт плеера (.mgp__ctl): семь кнопок по 44 px в строку не встают,
	   ему размер задан выше, 36×40. */
	.mgp__row-fav,
	.mgp__row-more,
	.mgp__dock-btn { min-height: 44px; min-width: 44px; }

	.mgp__row-play { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.mgp * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Выбор плейлиста — дописанный блок под меню строки, не замена его */
.mgp__chooser {
	display: grid;
	gap: .1rem;
	margin-top: .25rem;
	padding-top: .35rem;
	border-top: 1px solid var(--mg-line);
}

.mgp__chooser-head {
	margin: 0 0 .1rem;
	padding: 0 .55rem;
	font-family: var(--mg-sans);
	font-size: .56rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mg-muted);
}

/* ==========================================================================
   Мини-плеер (?mini=1): только сцена, крупные кнопки, ничего лишнего
   ==========================================================================
   Окно 520×430 — это «плеер на краю экрана»: шапка сайта, панели, список и
   нижняя плашка спрятаны, сцена занимает всё окно.
   ========================================================================== */

.mgp-mini-mode .site-header,
.mgp-mini-mode .site-footer,
.mgp-mini-mode #wpadminbar,
.mgp-mini-mode .mgp__head,
.mgp-mini-mode .mgp__side,
.mgp-mini-mode .mgp__browse,
.mgp-mini-mode .mgp__dock,
.mgp-mini-mode .mgp__gate,
.mgp-mini-mode .mgp__chip--link,
.mgp-mini-mode .mgp__chip--mini,
.mgp-mini-mode .mgp__rate,
.mgp-mini-mode .mgp__volume { display: none; }

.mgp-mini-mode .mgp { padding: .6rem; max-width: none; }
.mgp-mini-mode .mgp__grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.mgp-mini-mode .mgp__stage { grid-template-columns: 96px minmax(0, 1fr); gap: .7rem; padding: .7rem; }
.mgp-mini-mode .mgp__art { width: 88px; }
.mgp-mini-mode .mgp__stage { grid-template-columns: 88px minmax(0, 1fr); }
.mgp-mini-mode .mgp__now-desc { -webkit-line-clamp: 1; margin-bottom: .45rem; font-size: .78rem; }
.mgp-mini-mode .mgp__now {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.05rem;
}

.mgp-mini-mode .mgp__now-sub {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: .62rem;
	margin-bottom: .5rem;
}
.mgp-mini-mode .mgp__controls { flex-wrap: nowrap; justify-content: space-between; gap: .2rem; margin: .35rem 0 0; }
.mgp-mini-mode .mgp__ctl { width: 34px; height: 34px; min-width: 34px; }
.mgp-mini-mode .mgp__play { width: 46px; height: 46px; }
.mgp-mini-mode .mgp__play svg { width: 20px; height: 20px; }
.mgp-mini-mode .mgp__extras { margin-top: .35rem; padding-top: .45rem; }
.mgp-mini-mode .mgp__times { font-size: .6rem; }