/* Подборки экскурсий (excursium.com): кнопка «Сохранить в подборку», модалка / нижний шит,
   страница подборки, «Мои подборки». Токены по хэндоффу дизайнера (Makets/program-lists/design-handoff),
   при расхождении приоритет у site.css. Префикс классов pl- (подборки). Фиолетовый запрещён. */

:root {
	--pl-blue: #008ef1;
	--pl-blue-hover: #0077cc;
	--pl-blue-ink: #0b5fa5;
	--pl-blue-bg: #e8f3fd;
	--pl-blue-bg-soft: #f4fafe;
	--pl-blue-border: #bfe0f8;
	--pl-blue-on-dark: #7cc4ff;
	--pl-ink: #0F172A;
	--pl-ink-2: #425565;
	--pl-ink-3: #5B6478;
	--pl-ink-4: #94A3B8;
	--pl-border: #E4E8EF;
	--pl-border-soft: #EEF1F5;
	--pl-border-dash: #CBD5E1;
	--pl-surface-2: #F1F5F9;
	--pl-surface-3: #fbfcfe;
	--pl-page: #f4f6f9;
	--pl-green: #0cbc87;
	--pl-ok-bg: #ecfdf5;
	--pl-ok-fg: #047857;
	--pl-ok-dot: #10b981;
	--pl-warn-bg: #fff7e6;
	--pl-warn-border: #fde7b3;
	--pl-warn-fg: #8a5a00;
	--pl-warn-strong: #7c5a00;
	--pl-warn-ico: #d97706;
	--pl-warn-dot: #f59e0b;
	--pl-warn-icon: #d97706;
	--pl-note-label: #a97a1a;
	--pl-like: #e11d48;
	--pl-like-border: #fecdd3;
	--pl-danger: #dc2626;
	--pl-sub-bg: #ecfeff;
	--pl-sub-border: #cffafe;
	--pl-sub-fg: #0e7490;
	--pl-sub-strong: #155e75;
	--pl-wa: #25D366;
	--pl-tg: #229ED9;
	--pl-scrim: rgba(15, 23, 42, .5);
	--pl-sh-card: 0 3px 20px rgba(29, 58, 83, .07);
	--pl-sh-modal: 0 40px 90px -24px rgba(15, 23, 42, .6);
	--pl-sh-toast: 0 24px 50px -16px rgba(15, 23, 42, .7);
	--pl-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@keyframes plPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* у тоста на десктопе центрирование через translateX(-50%): plPop затирал его, и тост на время появления съезжал вправо */
@keyframes plToastPop { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes plPopA { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes plTick { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.3); } to { opacity: 1; transform: none; } }
@keyframes plBump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes plBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes plRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes plSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes plFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plSpin { to { transform: rotate(360deg); } }

/* #region Кнопка «Сохранить в подборку» (каталог, карточка программы, карта) */
.pl-savebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border-radius: 11px;
	border: 1.5px solid var(--pl-blue-border);
	background: #fff;
	color: var(--pl-blue);
	font: 700 14.5px/1.2 var(--pl-font);
	cursor: pointer;
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
	max-width: 100%;
}
.pl-savebtn:hover { background: var(--pl-blue-bg-soft); }
.pl-savebtn:active { transform: scale(.985); }
.pl-savebtn svg { flex: none; }
.pl-savebtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-savebtn.is-saved { background: var(--pl-blue-bg); border-color: var(--pl-blue-bg); color: var(--pl-blue-ink); }
.pl-savebtn.is-saved .pl-tick { animation: plTick .4s ease-out; }
.pl-savebtn-row { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.pl-savebtn-row .pl-savebtn { flex: 1; min-width: 0; margin-top: 0; }
.pl-savebtn-add {
	flex: none;
	width: 46px;
	min-height: 46px;
	border-radius: 11px;
	border: 1.5px dashed var(--pl-blue-border);
	background: #fff;
	color: var(--pl-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.pl-savebtn-add:hover { background: var(--pl-blue-bg-soft); }
/* круглая иконка-закладка рядом с сердцем (плитка, карта, попап) */
.pl-iconbtn { color: #425565; }
.pl-iconbtn.is-saved { color: var(--pl-blue); }
.exlrow-actbtn.pl-iconbtn.is-saved, .exlrow-roundbtn.pl-iconbtn.is-saved { border-color: var(--pl-blue-border); background: var(--pl-blue-bg); }
.exd-iconbtn.pl-iconbtn.is-saved, .exd-mbtn.pl-iconbtn.is-saved { border-color: var(--pl-blue-border); background: var(--pl-blue-bg); }
/* карта: закладка левее сердца (.exm-fav-btn стоит в правом верхнем углу фото) */
.exm-fav-btn.exm-save-btn { right: 50px; }
.exm-fav-btn.exm-save-btn.is-saved { color: var(--pl-blue); }
/* кнопки подборок скрыты, пока модуль не подтвердил режим показа (страницы каталога кешируются на час) */
.pl-hidden { display: none !important; }
/* #endregion */

/* #region Модалка «Сохранить в подборку» и общий каркас модалок */
body.pl-lock { overflow: hidden; }
.pl-scrim {
	position: fixed;
	inset: 0;
	background: var(--pl-scrim);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	animation: plFadeIn .2s ease-out;
	font-family: var(--pl-font);
}
.pl-scrim.is-top { align-items: flex-start; overflow: auto; }
.pl-modal {
	width: 460px;
	max-width: 100%;
	max-height: calc(100vh - 80px);
	overflow: auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--pl-sh-modal);
	animation: plPop .16s ease-out;
	color: var(--pl-ink);
	display: flex;
	flex-direction: column;
}
.pl-modal--wide { width: 560px; }
.pl-modal--stats { width: 640px; }
.pl-modal-head { padding: 20px 22px 8px; position: relative; }
.pl-modal-title { font-size: 19px; font-weight: 800; line-height: 1.25; margin: 0; padding-right: 40px; }
.pl-modal-sub { font-size: 13.5px; font-weight: 600; color: var(--pl-ink-3); margin-top: 4px; }
/* адрес ссылки в подзаголовке — одной строкой, GUID не рвём посередине */
.pl-modal-sub--url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 40px; }
.pl-modal-close {
	position: absolute;
	right: 16px;
	top: 16px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 0;
	background: var(--pl-surface-2);
	color: var(--pl-ink-2);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
/* шапка строкой по макету (mHowto, mEdit): заголовок с подзаголовком слева, крестик SVG в плашке 34 px справа */
.pl-modal-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-modal-head--row .pl-modal-title { padding-right: 0; }
.pl-modal-x {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 0;
	background: var(--pl-surface-2);
	color: var(--pl-ink-2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.pl-modal-x:hover { background: var(--pl-border); }
.pl-modal-body { padding: 8px 22px 4px; }
.pl-modal-foot { padding: 16px 22px 20px; display: flex; gap: 8px; justify-content: flex-end; }
.pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 18px;
	border-radius: 11px;
	border: 1.5px solid var(--pl-border);
	background: #fff;
	color: var(--pl-ink);
	font: 700 14.5px/1.2 var(--pl-font);
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease;
}
.pl-btn:hover { background: var(--pl-surface-3); color: var(--pl-ink); }
.pl-btn:active { transform: scale(.985); }
.pl-btn--primary { background: var(--pl-blue); border-color: var(--pl-blue); color: #fff; min-height: 48px; font-size: 15px; }
.pl-btn--primary:hover { background: var(--pl-blue-hover); border-color: var(--pl-blue-hover); color: #fff; }
.pl-btn--primary:disabled { opacity: .55; cursor: default; }
.pl-btn--dark { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
.pl-btn--dark:hover { background: #1e293b; color: #fff; }
.pl-btn--ghost { background: transparent; border-color: transparent; color: var(--pl-ink-3); }
.pl-btn--like { border-color: var(--pl-like-border); color: var(--pl-like); font-weight: 800; }
.pl-btn--like.is-on { background: #fff1f2; }
.pl-btn--danger { color: var(--pl-danger); }
.pl-btn--block { width: 100%; }
.pl-btn--wa { background: var(--pl-wa); border-color: var(--pl-wa); color: #fff; }
.pl-btn--tg { background: var(--pl-tg); border-color: var(--pl-tg); color: #fff; }
.pl-btn--wa:hover, .pl-btn--tg:hover { color: #fff; filter: brightness(.95); }
.pl-btn--grow { flex: 1; }
.pl-plate {
	margin: 0 0 8px;
	background: var(--pl-warn-bg);
	border: 1px solid var(--pl-warn-border);
	border-radius: 11px;
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pl-warn-fg);
	line-height: 1.45;
}
/* ссылка в плашке синяя (макет: a { color:#008ef1 }, hover #0077cc, без подчёркивания), вес 800, размер текста плашки.
   Состояния перечислены, иначе --bs-link-color перекрашивает; кнопку (.pl-plate-btn) исключаем — у неё белый текст и свой размер */
.pl-plate a:not(.pl-plate-btn):link, .pl-plate a:not(.pl-plate-btn):visited,
.pl-plate a:not(.pl-plate-btn):focus, .pl-plate a:not(.pl-plate-btn):active { color: var(--pl-blue); font-weight: 800; text-decoration: none; }
.pl-plate a:not(.pl-plate-btn):hover { color: var(--pl-blue-hover); font-weight: 800; text-decoration: none; }
.pl-plate--info { background: var(--pl-blue-bg-soft); border-color: var(--pl-blue-border); color: var(--pl-blue-ink); }
/* site.css задаёт a { font-size: 17px } — внутри подборок ссылка должна быть размером своего текста */
.pl-plate a:not(.pl-plate-btn), .pl-hint a, .pl-lead a, .pl-radio-text a:not(.pl-plate-btn), .pl-modal-note a, .pl-mine-meta a, .pl-mine-title a, .pl-howto-step a { font-size: inherit; }
/* заголовок плашки отдельным классом: голый <b> в плашке бывает и внутри предложения (витрина, фильтр).
   Размеры — замер по макету «Подборки Прототип.dc.html», блок «Сохранено в этом браузере» */
.pl-plate-title { display: block; font-size: 13px; font-weight: 800; color: var(--pl-warn-strong); line-height: 1.3; }
.pl-plate p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.pl-plate-foot { margin-top: 8px; }
/* плашка с восклицательным треугольником — макет, модалка «Сохранить себе»: иконка 16 px слева, текст колонкой */
.pl-plate--icon { display: flex; gap: 10px; align-items: flex-start; }
.pl-plate-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pl-warn-ico); }
/* тёмная кнопка «Войти» в плашке — замер по макету: h34, pad 0 12, r9, 12.5/800, белый текст на #0F172A.
   Геометрия — одним классом, иначе модификатор размера ниже проиграет по специфичности */
.pl-plate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 12px;
	border-radius: 9px;
	border: 0;
	background: var(--pl-ink);
	font: 800 12.5px/1 var(--pl-font);
	cursor: pointer;
	text-decoration: none;
}
/* в модалке кнопка крупнее — макет, радио «Публичная»: h38, pad 0 14, r10, 13/800 */
.pl-plate-btn--md { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.pl-plate-btn:link, .pl-plate-btn:visited, .pl-plate-btn:hover, .pl-plate-btn:focus, .pl-plate-btn:active { color: #fff; text-decoration: none; }
.pl-plate-btn:hover { background: #1e293b; }
.pl-modal-foot--split { justify-content: space-between; align-items: center; }
.pl-howto-link {
	border: 0;
	background: transparent;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pl-ink-3);
	font: 700 13.5px var(--pl-font);
	cursor: pointer;
	text-decoration: none;
}
.pl-howto-link:hover { color: var(--pl-blue); }
.pl-radio.is-locked { cursor: default; background: var(--pl-surface-3); }
.pl-radio.is-locked .pl-radio-title { color: var(--pl-ink-3); }
.pl-radio-lock { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--pl-ink-4); margin-top: 1px; }
.pl-picklist { display: flex; flex-direction: column; gap: 2px; }
.pl-pick {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	border-radius: 12px;
	cursor: pointer;
	border: 0;
	background: transparent;
	width: 100%;
	text-align: left;
	font-family: var(--pl-font);
	color: var(--pl-ink);
}
.pl-pick:hover { background: #F4F6F9; }
.pl-pick.is-disabled { opacity: .45; cursor: default; }
.pl-pick-box {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 2px solid var(--pl-border-dash);
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: transparent;
}
.pl-pick.is-on .pl-pick-box { border-color: var(--pl-blue); background: var(--pl-blue); color: #fff; }
.pl-pick-box--new { border: 1.5px dashed var(--pl-blue-border); color: var(--pl-blue); }
.pl-pick-text { min-width: 0; flex: 1; }
/* название и мета — строчные span внутри button: без display:block они склеивались в одну строку.
   Длинное название переносится, а не режется многоточием — в модалке его нужно прочитать целиком */
.pl-pick-title { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.pl-pick-meta { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--pl-ink-3); margin-top: 3px; }
.pl-pick--new .pl-pick-title { color: var(--pl-blue); }
.pl-pick-counter { font-size: 12px; font-weight: 700; color: var(--pl-ink-4); flex: none; }
.pl-newform { padding: 6px 0px 10px; display: flex; flex-direction: column; gap: 8px; animation: plPopA .25s ease-out; }
.pl-input, .pl-textarea {
	width: 100%;
	border: 1.5px solid var(--pl-border);
	border-radius: 10px;
	padding: 11px 13px;
	font: 600 16px/1.35 var(--pl-font);
	color: var(--pl-ink);
	background: #fff;
	outline: none;
	resize: none;
}
.pl-input:focus, .pl-textarea:focus { border-color: var(--pl-blue); box-shadow: 0 0 0 3px rgba(0, 142, 241, .14); }
.pl-textarea { min-height: 70px; overflow: hidden; }
/* «Описание»: тянется за уголок и разворачивается кнопкой «Развернуть» */
.pl-textarea--resize { resize: vertical; }
.pl-textarea.is-expanded { min-height: min(360px, 50vh); overflow: auto; }
.pl-field { margin-bottom: 14px; }
.pl-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.pl-label small { font-size: 12px; font-weight: 700; color: var(--pl-ink-4); }
.pl-label small.is-full { color: var(--pl-warn-fg); }
.pl-label--count { justify-content: flex-end; margin-bottom: 4px; }
.pl-label--count span + small { margin-left: auto; }
.pl-newform .pl-label--count { justify-content: space-between; margin-bottom: -2px; }
.pl-label-tools { display: inline-flex; align-items: baseline; gap: 12px; }
.pl-expand-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0; color: var(--pl-blue); font: 800 12.5px var(--pl-font); cursor: pointer; }
.pl-expand-btn:hover { color: var(--pl-blue-hover); }
.pl-expand-btn:focus-visible { outline: 2px solid var(--pl-blue); outline-offset: 2px; border-radius: 4px; }
.pl-hint { font-size: 12px; font-weight: 600; color: var(--pl-ink-3); line-height: 1.4; margin-top: 5px; }
.pl-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--pl-ink-2); line-height: 1.4; cursor: pointer; }
.pl-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
/* «Голосование сердечками» в «Изменить подборку»: галочка в рамке, как вариант доступа ниже */
.pl-check--card { padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--pl-border); background: #fff; transition: border-color .15s ease, background .15s ease; }
.pl-check--card.is-on { border-color: var(--pl-blue); background: var(--pl-blue-bg-soft); }
.pl-check--card input { accent-color: var(--pl-blue); }
.pl-check--card b { display: block; font-size: 15px; font-weight: 800; color: var(--pl-ink); margin-bottom: 3px; }
.pl-check--card span { font-size: 12.5px; color: var(--pl-ink-3); line-height: 1.45; }
.pl-radio {
	display: flex;
	gap: 11px;
	padding: 13px 14px;
	border-radius: 12px;
	border: 1.5px solid var(--pl-border);
	background: #fff;
	cursor: pointer;
	margin-bottom: 8px;
	align-items: flex-start;
}
.pl-radio.is-on { border-color: var(--pl-blue); background: var(--pl-blue-bg-soft); }
.pl-radio-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pl-border-dash); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.pl-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.pl-radio.is-on .pl-radio-dot { border-color: var(--pl-blue); }
.pl-radio.is-on .pl-radio-dot::after { background: var(--pl-blue); }
.pl-radio-title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pl-radio-text { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); line-height: 1.45; margin-top: 3px; }
.pl-req { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.pl-req .is-ok { color: var(--pl-ok-fg); }
.pl-req .is-bad { color: var(--pl-warn-fg); }
.pl-req span { display: inline-flex; align-items: center; gap: 6px; }
.pl-req svg { flex: none; }
/* «Изменить подборку»: плашка о проверке всплывает при выборе «Публичная» (макет, popA) */
.pl-plate--pop { animation: plPopA .25s ease-out; }
.pl-plate--pop .pl-plate-title { font-size: 13.5px; }
.pl-plate--pop p { font-size: 12.5px; line-height: 1.45; margin-top: 4px; }
.pl-linkbar { display: flex; align-items: center; gap: 8px; background: var(--pl-page); border: 1px solid var(--pl-border); border-radius: 11px; padding: 9px 12px; }
.pl-linkbar-url { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ряд вкладок и кнопки мессенджеров — тот же вид, что на карточке программы (.exd-tab / .exd-msg-btn),
   но со своим префиксом: excursion-details.css на страницах подборок не подключается */
.pl-switch { margin-top: 12px; }
.pl-switch-row { display: flex; gap: 7px; }
.pl-switch-btn {
	flex: 1;
	min-width: 0;
	background: #f5f5f6;
	border: 1px solid var(--pl-border-soft);
	border-radius: 8px;
	padding: 10px 6px;
	font: 700 13px/1.2 var(--pl-font);
	color: var(--pl-ink-2);
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
}
.pl-switch-btn:hover, .pl-switch-btn.is-on { background: #eaf4fe; border-color: #cfe6fb; color: var(--pl-blue); }
.pl-switch-dots { flex: none; width: 42px; padding: 10px 0; }
/* сердечко в ряду вторичных действий получателя: узкая кнопка с числом, после лайка закрашено и «подпрыгивает» */
.pl-switch-btn.pl-switch-like { flex: none; min-width: 64px; padding: 10px 12px; color: var(--pl-like); font-weight: 800; }
.pl-switch-btn.pl-switch-like:hover, .pl-switch-btn.pl-switch-like.is-liked { background: #fff1f2; border-color: var(--pl-like-border); color: var(--pl-like); }
.pl-switch-like.is-liked svg { animation: plBump .35s ease; }
/* ряд получателя «Сохранить себе · Оставить заявку · ♥» стоит прямо на фоне страницы: светло-серые кнопки сливались с ним,
   поэтому здесь белая подложка, заметная рамка и тень; заявка — насыщенный голубой, сердечко — розовая рамка */
.pl-switch-row--actions .pl-switch-btn { background: #fff; border-color: #d5dde8; color: var(--pl-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.pl-switch-row--actions .pl-switch-btn:hover { background: var(--pl-blue-bg-soft); border-color: #9fd0f5; color: var(--pl-blue-hover); }
.pl-switch-row--actions .pl-switch-btn.is-on { background: #d9eeff; border-color: #8cc8f3; color: #0069b8; }
.pl-switch-row--actions .pl-switch-btn.is-on:hover { background: #c7e5fd; border-color: #6fb8ef; color: #005da3; }
.pl-switch-row--actions .pl-switch-btn.pl-switch-like { background: #fff; border-color: #fbc2cd; color: var(--pl-like); }
.pl-switch-row--actions .pl-switch-btn.pl-switch-like:hover { background: #fff1f3; border-color: #f99bae; }
.pl-switch-row--actions .pl-switch-btn.pl-switch-like.is-liked { background: #ffe3e9; border-color: #f7a1b3; }
.pl-switch-icons { display: inline-flex; align-items: center; gap: 2px; }
.pl-pane { margin-top: 9px; }
.pl-pane-row { display: flex; gap: 7px; }
.pl-pane-hint { font-size: 13px; font-weight: 600; color: #85878a; margin: 10px 0 8px; line-height: 1.4; }
.pl-msg-btn {
	flex: 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1px solid #dfdfe3;
	background: #fff;
	border-radius: 8px;
	padding: 9px 4px;
	font: 700 13px/1.2 var(--pl-font);
	color: var(--pl-ink-2);
	cursor: pointer;
	text-decoration: none;
}
.pl-msg-btn:hover { border-color: #cfe6fb; background: var(--pl-blue-bg-soft); color: var(--pl-ink-2); }
.pl-msg-btn svg { flex: none; }
.pl-copy-btn {
	flex: 1;
	min-width: 0;
	background: #f5f5f6;
	border: 1px solid var(--pl-border-soft);
	border-radius: 8px;
	padding: 9px;
	font: 700 13px/1.2 var(--pl-font);
	color: var(--pl-ink-2);
	cursor: pointer;
}
.pl-copy-btn:hover { background: #eaf4fe; border-color: #cfe6fb; color: var(--pl-blue); }
/* фирменные цвета иконок мессенджеров */
.pl-c-tg { color: #29a9ea; }
.pl-c-wa { color: #25D366; }
.pl-c-max { color: #7d5cff; }
.pl-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pl-stat-tile { background: var(--pl-page); border-radius: 12px; padding: 12px 14px; }
.pl-stat-value { font-size: 24px; font-weight: 800; line-height: 1; }
.pl-stat-key { font-size: 12px; font-weight: 700; color: var(--pl-ink-3); margin-top: 5px; line-height: 1.3; }
/* «За что голосовали»: строка экскурсии, полоска доли от лидера, число голосов */
.pl-vote-stats { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pl-vote-stats-head { font-size: 13px; font-weight: 800; color: var(--pl-ink); }
.pl-vote-stats-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 36px; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.pl-vote-stats-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pl-ink-2); }
.pl-vote-stats-bar { height: 8px; border-radius: 4px; background: var(--pl-surface-2); overflow: hidden; }
.pl-vote-stats-bar span { display: block; height: 100%; border-radius: 4px; background: var(--pl-blue); transition: width .3s ease; }
.pl-vote-stats-count { text-align: right; color: var(--pl-blue-ink); font-weight: 800; }
.pl-modal-note { font-size: 12.5px; line-height: 1.5; color: var(--pl-ink-3); margin-top: 12px; }
/* #endregion */

/* #region Страница подборки */
.pl-page { font-family: var(--pl-font); color: var(--pl-ink); padding-bottom: 24px; }
.pl-page h1, .pl-page h2, .pl-page h3 { font-family: var(--pl-font); }
.pl-head { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.pl-head-main { flex: 1 1 420px; min-width: 0; }
.pl-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-title { font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0; overflow-wrap: anywhere; min-width: 0; }
.pl-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 700;
	background: var(--pl-surface-2);
	color: var(--pl-ink-3);
	white-space: nowrap;
}
.pl-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-ink-4); }
.pl-chip--all { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }
.pl-chip--all .pl-chip-dot { background: var(--pl-ok-dot); }
.pl-chip--review { background: var(--pl-warn-bg); color: var(--pl-warn-fg); }
.pl-chip--review .pl-chip-dot { background: var(--pl-warn-dot); animation: plBlink 1.6s ease-in-out infinite; }
.pl-chip--rejected { background: #fff1f2; color: var(--pl-like); }
.pl-chip--rejected .pl-chip-dot { background: var(--pl-like); }
.pl-chip--blue { background: var(--pl-blue-bg); color: var(--pl-blue-ink); }
.pl-chip--sub { background: var(--pl-sub-bg); color: var(--pl-sub-fg); }
.pl-chip--outline { background: #fff; border: 1px solid var(--pl-border); color: var(--pl-ink-2); }
.pl-chip--copy { background: var(--pl-surface-2); color: var(--pl-ink-3); }
/* «Копия есть в «Моих подборках»» — ссылка на свою копию у страницы оригинала */
a.pl-chip--mycopy, a.pl-chip--mycopy:link, a.pl-chip--mycopy:visited { background: var(--pl-ok-bg); color: var(--pl-ok-fg); font-size: 12.5px; text-decoration: none; }
a.pl-chip--mycopy:hover, a.pl-chip--mycopy:focus { background: #d1fae5; color: #065f46; }
.pl-editbtn { background: var(--pl-blue-bg); color: var(--pl-blue); border: 0; border-radius: 9px; padding: 8px 12px; font: 700 13px/1 var(--pl-font); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pl-editbtn:hover { background: #dbeefc; }
.pl-desc { font-size: 15.5px; line-height: 1.5; color: var(--pl-ink-2); max-width: 720px; margin: 10px 0 0; white-space: pre-line; }
.pl-byline { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 700; flex-wrap: wrap; }
.pl-byline-role { font-weight: 600; color: var(--pl-ink-3); }
.pl-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #075985; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; }
.pl-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
/* фото автора вместо инициала: круг с обрезкой, картинка тянется по нему */
.pl-avatar--photo { overflow: hidden; background: var(--pl-surface-2); }
.pl-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-anon-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--pl-border-dash); border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--pl-ink-3); }
.pl-anon-pill button { border: 0; background: none; color: var(--pl-blue); font: 800 13px var(--pl-font); cursor: pointer; padding: 0; }
.pl-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pl-chips .pl-chip { padding: 5px 11px; font-size: 12.5px; }
.pl-side { flex: 0 0 440px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
/* повтор действий шапки под составом — только на телефоне (см. мобильную версию) */
.pl-side--bottom { display: none; }
.pl-actions { display: flex; gap: 8px; }
/* кнопки ряда одной высоты: у основной было 48 px, у остальных 46; «⋮» тянется вместе с соседями, когда подписи переносятся на телефоне */
.pl-actions .pl-btn { min-height: 48px; }
/* «Отправить в чат» и «Копировать ссылку» — одной ширины и одним шрифтом (16.09): раньше основная занимала весь остаток ряда.
   Только прямые дети ряда — «⋮» лежит в .pl-menu и остаётся квадратом */
.pl-actions > .pl-btn { flex: 1 1 0; min-width: 0; padding: 0 12px; font-size: 14.5px; }
.pl-actions .pl-menu { display: flex; }
/* крошки подборок: у плашек нет стрелок-разделителей, а утилиты ps-0 на телефоне склеивали их вплотную */
.pl-crumbs { gap: 6px; }
.pl-crumbs > .breadcrumb-item { padding: 0; }
.pl-crumbs > .breadcrumb-item::before { display: none; }
.pl-kebab { width: 48px; padding: 0; flex: none; }
.pl-menu { position: relative; }
/* меню «⋮»: ширина по самому длинному пункту (иначе абсолютный блок сжимался до ширины кнопки и пункты переносились),
   иконка 18 px слева, опасные действия — после разделителя */
.pl-menu-list {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	width: max-content;
	min-width: 250px;
	max-width: min(340px, calc(100vw - 24px));
	background: #fff;
	border: 1px solid var(--pl-border);
	border-radius: 14px;
	box-shadow: 0 28px 70px -14px rgba(15, 23, 42, .38);
	padding: 6px;
	z-index: 30;
	animation: plPopA .16s ease-out;
	transform-origin: top right;
}
.pl-menu-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	border: 0;
	background: none;
	text-align: left;
	padding: 10px 14px 10px 12px;
	border-radius: 10px;
	font: 700 14px/1.3 var(--pl-font);
	color: var(--pl-ink);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}
.pl-menu-item:link, .pl-menu-item:visited { color: var(--pl-ink); }
.pl-menu-item:hover, .pl-menu-item:focus-visible { background: #F4F6F9; color: var(--pl-ink); outline: none; }
.pl-menu-ico { flex: none; width: 18px; height: 18px; color: var(--pl-ink-4); transition: color .12s ease; }
.pl-menu-item:hover .pl-menu-ico, .pl-menu-item:focus-visible .pl-menu-ico { color: var(--pl-blue); }
.pl-menu-text { display: flex; flex-direction: column; min-width: 0; }
.pl-menu-sub { font-size: 12px; font-weight: 600; color: var(--pl-ink-4); margin-top: 1px; }
.pl-menu-sep { height: 1px; background: var(--pl-border-soft); margin: 5px 8px; }
.pl-menu-item.is-danger, .pl-menu-item.is-danger:hover, .pl-menu-item.is-danger .pl-menu-ico, .pl-menu-item.is-danger:hover .pl-menu-ico { color: var(--pl-like); }
.pl-menu-item.is-danger:hover, .pl-menu-item.is-danger:focus-visible { background: #fff1f2; }
.pl-statsbar { display: flex; align-items: center; gap: 12px; border: 1px solid var(--pl-border); border-radius: 12px; padding: 11px 14px; background: #fff; cursor: pointer; font-family: var(--pl-font); text-align: left; width: 100%; }
.pl-statsbar-like { display: inline-flex; align-items: center; gap: 6px; color: var(--pl-like); font-size: 15px; font-weight: 800; }
.pl-statsbar-like--vote { color: var(--pl-blue-ink); }
.pl-statsbar-mid { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); }
.pl-statsbar-link { font-size: 12.5px; font-weight: 800; color: var(--pl-blue); display: inline-flex; align-items: center; gap: 3px; }
.pl-side-plate { display: flex; gap: 10px; align-items: flex-start; background: var(--pl-warn-bg); border: 1px solid var(--pl-warn-border); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; font-weight: 600; color: var(--pl-warn-fg); line-height: 1.45; }
.pl-side-plate svg { flex: none; color: var(--pl-warn-icon); }
.pl-side-plate .pl-btn { min-height: 34px; padding: 0 12px; font-size: 12.5px; margin-top: 8px; }
.pl-author-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--pl-border); border-radius: 14px; padding: 14px 16px; }
.pl-author-card.is-staff { border: 1.5px solid var(--pl-blue-border); }
.pl-author-name { font-size: 15px; font-weight: 800; }
.pl-author-meta { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); line-height: 1.45; margin-top: 2px; }
.pl-badge-staff { display: inline-flex; align-items: center; gap: 4px; background: var(--pl-blue-bg); color: var(--pl-blue-ink); font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 4px 8px; margin-left: 6px; }
.pl-guest-hint { font-size: 12px; font-weight: 600; color: var(--pl-ink-4); line-height: 1.45; }
.pl-banner { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--pl-warn-border); border-radius: 14px; padding: 14px 16px; margin-top: 18px; }
.pl-banner svg { flex: none; color: var(--pl-warn-icon); margin-top: 2px; }
.pl-banner--rejected { border-color: var(--pl-like-border); }
.pl-banner--rejected svg { color: var(--pl-like); }
.pl-banner-title { font-size: 14.5px; font-weight: 800; }
.pl-banner-text { font-size: 13.5px; line-height: 1.45; color: var(--pl-ink-3); margin-top: 3px; }
/* сотруднику у любой подборки: статус и «Открыть в CRM» одной строкой */
.pl-staff-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 8px 12px; border: 1px dashed var(--pl-border-dash); border-radius: 10px; background: var(--pl-surface-3); font-size: 13px; font-weight: 700; color: var(--pl-ink-3); }
.pl-staff-strip a, .pl-staff-strip a:link, .pl-staff-strip a:visited { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--pl-blue); text-decoration: none; }
.pl-staff-strip a:hover { color: var(--pl-blue-hover); }
.pl-banner-quote { margin-top: 6px; padding: 8px 10px; background: var(--pl-page); border-radius: 8px; font-size: 13.5px; color: var(--pl-ink); white-space: pre-line; }
.pl-items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 12px; flex-wrap: wrap; }
.pl-items-head h2 { font-size: 20px; font-weight: 800; margin: 0; }
.pl-items-head h2 span { color: var(--pl-ink-4); font-weight: 700; margin-left: 6px; }
.pl-items-hint { font-size: 13px; font-weight: 600; color: var(--pl-ink-3); }
.pl-items { display: flex; flex-direction: column; gap: 12px; }
/* метка «Больше всего голосов» выступает над строкой на 11px — зазор шире, чтобы она не легла на строку выше */
.pl-items.has-vote-share { gap: 18px; }
.pl-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 3px 20px rgba(29, 58, 83, .08);
	padding: 12px;
	animation: plRowIn .3s ease-out both;
}
.pl-item.is-inactive { opacity: .65; }
.pl-item.is-dragging { opacity: .4; }
.pl-item.is-over { outline: 2px dashed var(--pl-blue-border); }
.pl-drag { flex: none; color: var(--pl-border-dash); cursor: grab; display: inline-flex; padding: 4px; border: 0; background: none; }
.pl-drag:active { cursor: grabbing; }
.pl-item-img { flex: none; width: 132px; height: 88px; border-radius: 10px; object-fit: cover; background: #e7eaf0; }
.pl-item-main { flex: 1; min-width: 0; }
.pl-item-name { font-size: 17px; font-weight: 800; line-height: 1.25; margin: 0; }
.pl-item-name a { color: inherit; text-decoration: none; }
.pl-item-name a:hover { color: var(--pl-blue); }
.pl-item-place { font-size: 12.5px; font-weight: 700; color: #0070c0; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item-meta { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-2); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.pl-item-off { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--pl-warn-fg); background: var(--pl-warn-bg); border-radius: 7px; padding: 3px 8px; }
.pl-item-note-col { flex: 0 0 308px; max-width: 100%; }
.pl-note { display: flex; align-items: flex-start; gap: 9px; background: #FFF7E6; border: 1px solid #FDE7B3; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--pl-warn-strong); line-height: 1.4; }
.pl-note.is-flash { animation: plPopA .35s ease-out; }
.pl-note-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-note-label); margin-bottom: 3px; }
.pl-note-text { flex: 1; white-space: pre-line; }
.pl-note-edit { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #FDE7B3; background: #fff; color: var(--pl-warn-fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pl-note-add { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--pl-border-dash); background: #fff; color: var(--pl-ink-3); border-radius: 10px; padding: 9px 12px; font: 700 12.5px var(--pl-font); cursor: pointer; }
.pl-note-add:hover { border-color: var(--pl-blue-border); color: var(--pl-blue); }
.pl-item-price { flex: 0 0 112px; text-align: right; }
.pl-item-price b { display: block; font-size: 18px; font-weight: 800; color: var(--pl-green); }
.pl-item-price s { display: block; font-size: 12.5px; font-weight: 600; color: #96969a; }
.pl-item-price span { font-size: 11.5px; font-weight: 600; color: var(--pl-ink-3); }
.pl-item-btns { display: flex; gap: 8px; flex: none; }
.pl-item-btns .pl-btn { min-height: 44px; padding: 0 14px; }
.pl-item-remove { width: 44px; padding: 0; color: var(--pl-danger); }

/* последняя крошка — название подборки: до 50 символов, на узком экране обрезаем многоточием */
.pl-crumb-current .badge { max-width: min(420px, 80vw); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* Переключатель «Списком / Плиткой» и плитка экскурсий (хэндофф, экран 4 «Страница подборки — автор») */
.pl-items-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pl-view-switch { display: flex; gap: 4px; background: var(--pl-surface-2); border-radius: 11px; padding: 4px; }
.pl-view-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--pl-ink-3); font: 800 13.5px var(--pl-font); cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.pl-view-btn:hover { color: var(--pl-ink); }
.pl-view-btn.is-on { background: #fff; color: var(--pl-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
/* minmax(0, 1fr), а не 1fr: у 1fr минимум — ширина содержимого, и строка музея без переносов (excard-place-text, nowrap)
   раздвигала колонку шире экрана — на телефоне плитки уезжали за правый край */
.pl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pl-tile { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 3px 20px rgba(29, 58, 83, .08); animation: plRowIn .3s ease-out both; }
.pl-tile.is-draggable { cursor: grab; }
.pl-tile.is-inactive { opacity: .65; }
.pl-tile.is-dragging { opacity: .4; }
.pl-tile.is-over { outline: 2px dashed var(--pl-blue-border); }
.pl-tile-media { position: relative; }
/* скругляем само фото, а не карточку через overflow: hidden — иначе обрежется тень и обводка перетаскивания */
.pl-tile-img { display: block; width: 100%; height: 196px; object-fit: cover; background: #e7eaf0; border-radius: 16px 16px 0 0; }
/* цена, строка музея и «что входит» на плитке — классы карточки каталога (excard-* в site.css); строка музея здесь не ссылка */
.pl-tile-place, .pl-tile-place:hover { color: #0070c0; }
/* цена пересоздаётся при смене группы (ключ groupSize) — короткое появление показывает, что пересчиталась */
.pl-price-swap { animation: plPopA .22s ease-out both; }
/* размер группы над составом: три кнопки как в фильтре каталога, выгода — по ценам этой подборки */
.pl-group { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 12px 10px 16px; background: #fff; border-radius: 14px; box-shadow: var(--pl-sh-card); }
.pl-group-title { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 800; color: var(--pl-ink); line-height: 1.25; }
.pl-group-title small { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); }
.pl-group-switch { display: flex; gap: 6px; flex: 0 1 460px; }
.pl-group-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 6px 12px; border: 1.5px solid var(--pl-border); border-radius: 11px; background: #fff; color: var(--pl-ink); font-family: var(--pl-font); text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pl-group-btn:hover { border-color: var(--pl-blue-border); background: var(--pl-blue-bg-soft); }
.pl-group-btn.is-on { border-color: var(--pl-blue); background: var(--pl-blue-bg); color: var(--pl-blue-ink); }
.pl-group-btn:focus-visible { outline: 2px solid var(--pl-blue); outline-offset: 2px; }
.pl-group-name { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; line-height: 1.2; }
.pl-group-name em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--pl-ok-fg); background: var(--pl-ok-bg); border-radius: 6px; padding: 1px 5px; }
.pl-group-range { font-size: 12px; font-weight: 600; color: var(--pl-ink-3); white-space: nowrap; }
.pl-group-btn.is-on .pl-group-range { color: var(--pl-blue-ink); }
@media (max-width: 575.98px) {
	.pl-group { padding: 10px; }
	.pl-group-switch { flex: 1 1 100%; }
	.pl-group-btn { padding: 6px 7px; }
	.pl-group-name { font-size: 13px; gap: 3px; }
	.pl-group-name em { font-size: 10.5px; padding: 1px 3px; }
}
.pl-tile-off { position: absolute; left: 10px; bottom: 10px; }
.pl-tile-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 16px 0; }
.pl-tile-name { font-size: 18.5px; font-weight: 800; line-height: 1.28; color: #0b0a12; margin: 0; overflow-wrap: anywhere; }
.pl-tile-name a { color: inherit; text-decoration: none; font-size: inherit; }
.pl-tile-name a:hover { color: var(--pl-blue); }
.pl-tile-meta { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: 13px; font-weight: 600; color: var(--pl-ink-2); }
.pl-tile-meta span + span::before { content: "·"; margin-right: 6px; }
.pl-tile-note-add { align-self: flex-start; }
.pl-tile-btns { display: flex; gap: 8px; padding: 14px 16px 16px; }
.pl-tile-remove { flex: none; width: 48px; padding: 0; color: var(--pl-danger); }
/* Голос за экскурсию: кнопка справа от «Смотреть программу» / «Программа». Палец вверх и синий цвет, а не сердечко:
   сердце на сайте значит «в избранное» и сердечко подборки на витрине */
.pl-vote { display: inline-flex; align-items: center; justify-content: center; gap: 0; color: var(--pl-blue-ink); font: 800 14.5px var(--pl-font); }
.pl-vote svg { flex: none; }
.pl-btn.pl-vote { position: relative; flex: none; min-width: 52px; padding: 0 14px; border-color: var(--pl-blue-border); color: var(--pl-blue-ink); transition: transform .12s ease, background .15s ease, border-color .15s ease; }
.pl-btn.pl-vote:hover { background: var(--pl-blue-bg-soft); border-color: #9fd0f5; color: var(--pl-blue-hover); }
.pl-btn.pl-vote.is-voted { background: var(--pl-blue-bg); border-color: #8cc8f3; color: #0069b8; }
.pl-btn.pl-vote.is-voted:hover { background: #d9eeff; }
.pl-vote.is-static { flex: none; min-height: 44px; padding: 0 6px; font-size: 13.5px; cursor: default; }
/* вариант 6 из Makets/program-lists/mockup-vote-button.html (решение владельца 15.09.2026): полоска доли от лидера под числом,
   метка «Больше всего голосов» над карточкой лидера, число прокручивается, свой голос — кивок и искры, чужой — «+1» и подсветка карточки */
.pl-btn.pl-vote.has-share { padding-bottom: 5px; }
.pl-vote-icon { display: inline-flex; transform-origin: 40% 80%; }
.pl-vote-count { display: inline-grid; overflow: hidden; height: 1.25em; line-height: 1.25em; max-width: 4em; margin-left: 6px; font-variant-numeric: tabular-nums; transition: max-width .25s ease, margin .25s ease, opacity .2s ease; }
/* ноль не показываем: число схлопывается, палец остаётся по центру */
.pl-vote.is-empty .pl-vote-count { max-width: 0; margin-left: 0; opacity: 0; }
.pl-vote-digit { grid-area: 1 / 1; text-align: center; }
.pl-count-up-enter-active, .pl-count-up-leave-active, .pl-count-down-enter-active, .pl-count-down-leave-active { transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .34s ease; }
.pl-count-up-enter, .pl-count-down-leave-to { transform: translateY(100%); opacity: 0; }
.pl-count-up-leave-to, .pl-count-down-enter { transform: translateY(-100%); opacity: 0; }
.pl-vote-share { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(0, 142, 241, .14); overflow: hidden; }
.pl-vote-share span { display: block; height: 100%; border-radius: 2px; background: var(--pl-blue); transition: width .5s cubic-bezier(.3, .7, .2, 1); }
/* слой для искр и «+1»: разметки внутри у Vue нет, и перерисовка кнопки его не трогает */
.pl-vote-fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.pl-vote-spark { position: absolute; width: 7px; height: 2.5px; border-radius: 2px; background: var(--pl-blue); }
.pl-vote-plus { position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px; padding: 4px 7px; border-radius: 8px; background: var(--pl-blue); color: #fff; font: 800 12px/1 var(--pl-font); white-space: nowrap; }
/* одна метка на подборку; при равенстве голосов у лидеров её нет */
.pl-leader { position: absolute; top: -11px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--pl-blue); color: #fff; font: 800 12px/1 var(--pl-font); white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 142, 241, .3); opacity: 0; transform: translateY(6px) scale(.9); pointer-events: none; transition: opacity .3s ease, transform .36s cubic-bezier(.3, 1.5, .5, 1); }
.pl-leader.is-on { opacity: 1; transform: none; }
.pl-leader svg { flex: none; }
.pl-vote:focus-visible { outline: 2px solid var(--pl-blue); outline-offset: 2px; }
.pl-items-hint--vote { display: inline-flex; align-items: center; gap: 6px; color: var(--pl-blue-ink); }
.pl-link-btn { border: 0; background: transparent; padding: 0; color: var(--pl-blue); font: inherit; font-weight: 800; cursor: pointer; }
.pl-link-btn:hover { color: var(--pl-blue-hover); }
.pl-link-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 1023px) {
	.pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* «Соберите свою подборку» не должна читаться как ещё одна экскурсия: голубая подложка без тени плиток,
   пунктир «новой подборки» (как .pl-savebtn-add) и значок закладки с плюсом */
.pl-cta-card { margin-top: 28px; background: linear-gradient(135deg, var(--pl-blue-bg) 0%, var(--pl-blue-bg-soft) 100%); border: 1.5px dashed #9fd0f5; border-radius: 16px; padding: 20px 22px; display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.pl-cta-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--pl-blue); box-shadow: 0 4px 14px rgba(0, 142, 241, .16); }
.pl-cta-text { flex: 1 1 0; min-width: 0; }
.pl-cta-card h3 { font-size: 19px; font-weight: 800; margin: 0; }
.pl-cta-card p { font-size: 14px; line-height: 1.5; color: var(--pl-ink-2); margin: 6px 0 0; }
.pl-cta-card .pl-btn { flex: none; }
.pl-static { display: none; }
.pl-static.is-visible { display: block; }
.pl-empty { text-align: center; background: #fff; border-radius: 16px; box-shadow: var(--pl-sh-card); padding: 32px 20px; }
.pl-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--pl-blue-bg); color: var(--pl-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.pl-empty h3 { font-size: 19px; font-weight: 800; margin: 0; }
.pl-empty p { font-size: 14.5px; line-height: 1.5; color: var(--pl-ink-3); max-width: 360px; margin: 8px auto 16px; }
/* страница «удалена» */
.pl-deleted { background: #fff; border-radius: 16px; box-shadow: var(--pl-sh-card); padding: 26px 28px; max-width: 760px; }
.pl-deleted-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--pl-surface-2); color: var(--pl-ink-3); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pl-deleted h1 { font-size: 24px; font-weight: 800; margin: 0 0 8px; }
.pl-deleted p { font-size: 15px; line-height: 1.55; color: var(--pl-ink-2); max-width: 640px; }
.pl-facts { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 18px; font-size: 13.5px; line-height: 1.45; }
.pl-facts div { display: flex; gap: 9px; align-items: flex-start; }
.pl-facts svg { flex: none; margin-top: 2px; }
.pl-facts .is-ok { color: var(--pl-ok-fg); }
.pl-facts .is-info { color: var(--pl-ink-4); }
.pl-deleted-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* #endregion */

/* #region «Мои подборки» */
.pl-mine-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pl-mine-head-btns { display: flex; align-items: center; gap: 14px; flex: none; }
.pl-mine-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.pl-lead { font-size: 14.5px; line-height: 1.5; color: var(--pl-ink-3); max-width: 660px; margin: 6px 0 0; }
.pl-mine-list { display: flex; flex-direction: column; gap: 12px; }
/* строка подборки (макет program-lists/mockup-my-collections.html, вариант C): верх — статус, что внутри, сигналы и кнопки, ниже раскрытый состав */
.pl-mine-row { background: #fff; border-radius: 16px; box-shadow: var(--pl-sh-card); padding: 16px 18px; animation: plRowIn .3s ease-out both; }
.pl-mine-top { display: flex; align-items: center; gap: 20px; }
.pl-mine-main { flex: 1; min-width: 0; }
.pl-mine-title { font-size: 19px; font-weight: 800; line-height: 1.25; margin: 6px 0 0; overflow-wrap: anywhere; }
.pl-mine-title a { color: inherit; text-decoration: none; }
.pl-mine-title a:hover { color: var(--pl-blue); }
.pl-mine-meta { font-size: 13px; font-weight: 600; color: var(--pl-ink-3); margin-top: 4px; line-height: 1.45; }
.pl-mine-meta b { color: var(--pl-green); font-weight: 800; }
.pl-mine-actions { display: flex; gap: 8px; flex: none; }
.pl-mine-actions .pl-btn { min-height: 44px; }
.pl-mine-actions .pl-btn--icon { width: 44px; padding: 0; color: var(--pl-ink-3); }
.pl-mine-actions .pl-btn--icon.pl-btn--danger { color: var(--pl-danger); }
/* статус, которому нужно действие автора: «Проверяем текст» и причина отказа */
.pl-status-line { margin-top: 8px; font-size: 12.5px; font-weight: 700; line-height: 1.4; border-radius: 9px; padding: 6px 10px; display: inline-flex; gap: 6px; align-items: flex-start; }
.pl-status-line svg { flex: none; margin-top: 1px; }
.pl-status-line--review { background: var(--pl-warn-bg); color: var(--pl-warn-fg); }
.pl-status-line--rejected { background: #fff1f2; color: #9f1239; }
/* сигналы: голоса по ссылке, сердечки на витрине, открытия, дата */
.pl-signals { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--pl-ink-3); }
.pl-signal { display: inline-flex; align-items: center; gap: 6px; }
.pl-signal svg { flex: none; }
.pl-signal--votes { color: var(--pl-like); font-weight: 800; flex-wrap: wrap; }
.pl-signal--voters { color: var(--pl-blue-ink); }
.pl-signal-leader { color: var(--pl-ink-2); font-weight: 700; }
.pl-mine-expand { margin-top: 8px; border: 0; background: transparent; padding: 0; color: var(--pl-blue); font: 800 13px var(--pl-font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pl-mine-expand:hover { color: var(--pl-blue-hover); }
.pl-mine-expand svg { transition: transform .2s ease; }
.pl-mine-expand.is-open svg { transform: rotate(180deg); }
@keyframes plProgramsOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pl-mine-programs { margin-top: 12px; border-top: 1px solid var(--pl-border-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; animation: plProgramsOpen .2s ease-out; }
.pl-mine-program { display: grid; grid-template-columns: 56px minmax(0, 1fr) 96px 150px; gap: 12px; align-items: center; padding: 4px 0; }
.pl-mine-program.is-no-votes { grid-template-columns: 56px minmax(0, 1fr) 96px; }
.pl-mine-program.is-inactive { opacity: .6; }
.pl-mine-program-img { width: 56px; height: 40px; border-radius: 8px; object-fit: cover; background: #e7eaf0; display: block; }
.pl-mine-program-name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-mine-program-name small { display: block; font-size: 12px; font-weight: 600; color: var(--pl-ink-3); overflow: hidden; text-overflow: ellipsis; }
.pl-mine-program-price { font-size: 13.5px; font-weight: 800; color: var(--pl-green); white-space: nowrap; }
.pl-mine-program-votes { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; }
.pl-mine-bar { height: 8px; border-radius: 4px; background: var(--pl-surface-2); overflow: hidden; }
.pl-mine-bar span { display: block; height: 100%; border-radius: 4px; background: var(--pl-blue); transition: width .3s ease; }
.pl-mine-program-count { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 13px; font-weight: 800; color: var(--pl-blue-ink); text-align: right; white-space: nowrap; }
.pl-mine-program-count.is-zero { color: var(--pl-ink-4); }
.pl-mine-leader { font-size: 11px; font-weight: 800; color: var(--pl-blue-ink); background: var(--pl-blue-bg); border-radius: 6px; padding: 1px 6px; margin-right: 6px; }
.pl-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 7px; padding: 3px 9px; font-size: 11.5px; font-weight: 800; background: var(--pl-surface-2); color: var(--pl-ink-3); }
.pl-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-ink-4); }
.pl-badge--all { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }
.pl-badge--all .pl-badge-dot { background: var(--pl-ok-dot); }
.pl-badge--review { background: var(--pl-warn-bg); color: var(--pl-warn-fg); }
.pl-badge--review .pl-badge-dot { background: var(--pl-warn-dot); animation: plBlink 1.6s ease-in-out infinite; }
.pl-badge--rejected { background: #fff1f2; color: var(--pl-like); }
.pl-badge--rejected .pl-badge-dot { background: var(--pl-like); }
.pl-badge--sub { background: var(--pl-sub-bg); color: var(--pl-sub-fg); }
.pl-badge--sub .pl-badge-dot { background: #06b6d4; }
/* «Нужен вход или регистрация» у подписки в «Сохранить себе»: кнопка сохранения у гостя выключена */
.pl-badge--auth { background: var(--pl-warn-bg); color: var(--pl-warn-fg); border: 1px solid var(--pl-warn-border); margin-top: 8px; gap: 5px; }
.pl-skeleton { height: 92px; border-radius: 16px; background: linear-gradient(90deg, #eef1f5 25%, #f6f8fb 50%, #eef1f5 75%); background-size: 200% 100%; animation: plShimmer 1.2s linear infinite; }
@keyframes plShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* пустые «Мои подборки» (макет, вариант B): три коротких шага вместо второй ссылки на объяснение */
.pl-mine-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 720px; margin: 18px auto 20px; text-align: left; }
.pl-mine-step { background: var(--pl-page); border-radius: 12px; padding: 12px 14px; }
.pl-mine-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--pl-blue); color: #fff; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pl-mine-step b { display: block; font-size: 14px; font-weight: 800; margin-top: 8px; }
.pl-mine-step-text { display: block; font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); margin-top: 3px; line-height: 1.4; }
/* #endregion */

/* #region Модалка «Как работают подборки» (объяснение из модалки сохранения, попапа шапки и «Моих подборок») */
/* геометрия — замер по «Подборки Прототип.dc.html», модалка mHowto: шапка флексом, крестик SVG в плашке 34 px, кнопки слева */
.pl-modal--howto { width: 660px; max-height: none; overflow: hidden; line-height: normal; }
.pl-howto-head { padding: 22px 24px 10px; }
.pl-howto-title { font-size: 21px; line-height: normal; padding-right: 0; }
.pl-howto-body { padding: 6px 24px 4px; }
.pl-howto-foot { justify-content: flex-start; align-items: center; gap: 10px; padding: 16px 24px 22px; }
.pl-howto-foot .pl-btn { min-height: 48px; font-size: 15px; }
.pl-howto-steps { display: flex; flex-direction: column; gap: 10px; }
.pl-howto-step { display: flex; gap: 13px; align-items: flex-start; background: var(--pl-page); border-radius: 13px; padding: 13px 15px; }
.pl-howto-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pl-blue); color: #fff; font: 800 14px/1 var(--pl-font); display: inline-flex; align-items: center; justify-content: center; }
.pl-howto-step b { display: block; font-size: 15px; font-weight: 800; }
.pl-howto-step p { margin: 4px 0 0; font-size: 13.5px; color: var(--pl-ink-3); line-height: 1.5; }
.pl-howto-access { border: 1px solid var(--pl-border); border-radius: 13px; overflow: hidden; margin-top: 14px; }
.pl-howto-access-head { background: var(--pl-surface-3); padding: 10px 15px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-ink-4); }
.pl-howto-access-row { padding: 12px 15px; border-top: 1px solid var(--pl-border-soft); display: flex; gap: 12px; align-items: flex-start; }
/* чип в таблице крупнее бейджа списков: 12.5/700, пилюля r20, точка 7 px, без мигания — как в макете */
.pl-howto-access-row .pl-badge { flex: none; gap: 7px; border-radius: 20px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pl-howto-access-row .pl-badge-dot { width: 7px; height: 7px; animation: none; }
.pl-howto-access-text { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--pl-ink-3); line-height: 1.45; }
/* #endregion */

/* #region Попап «Мои подборки» в шапке сайта */
.pl-nav { position: relative; }
/* бейдж не должен обрезаться кнопкой-иконкой */
.pl-nav, #plNavBtn { overflow: visible; }
.pl-menu-new {
	display: inline-block;
	margin-left: 7px;
	border-radius: 6px;
	padding: 3px 6px;
	background: var(--pl-green);
	color: #fff;
	font: 800 10px/1 var(--pl-font);
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.pl-nav-badge {
	position: absolute;
	top: -5px;
	right: -6px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--pl-blue);
	color: #fff;
	font: 800 11px/19px var(--pl-font);
	text-align: center;
	pointer-events: none;
}
/* иконка «Мои подборки» в шапке — те же движения, что у сердечка избранного (site.css: favBump / favHeartBeat) */
@keyframes plNavBump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 55% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes plNavBeat { 0% { transform: scale(1); } 25% { transform: scale(1.25); } 45% { transform: scale(.92); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
#plNavBtn svg { transition: transform .15s ease; transform-origin: center; }
#plNavBtn svg.pl-nav-bump { animation: plNavBeat .55s ease; }
#plNavBtn svg.pl-nav-press { animation: plNavBump .35s ease; }
#plNavBtn:active svg { transform: scale(.85); }
.pl-nav-badge.pl-nav-bump { animation: plNavBump .45s ease; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
	#plNavBtn svg.pl-nav-bump, #plNavBtn svg.pl-nav-press, .pl-nav-badge.pl-nav-bump { animation: none; }
}
.pl-navpop {
	position: absolute;
	top: 46px;
	right: 0;
	width: 424px;
	max-width: calc(100vw - 24px);
	background: #fff;
	border: 1px solid var(--pl-border);
	border-radius: 14px;
	box-shadow: 0 28px 70px -14px rgba(15, 23, 42, .38);
	padding: 8px;
	z-index: 1050;
	font-family: var(--pl-font);
	color: var(--pl-ink);
	animation: plPopA .16s ease-out;
}
.pl-navpop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; }
.pl-navpop-title { font-size: 14.5px; font-weight: 800; }
.pl-navpop-count { font-size: 12.5px; font-weight: 700; color: var(--pl-ink-4); }
.pl-navpop .pl-plate { margin: 0 8px 6px; }
.pl-navpop-list { max-height: 46vh; overflow: auto; }
.pl-navpop-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: inherit; }
.pl-navpop-row:hover { background: #F4F6F9; color: inherit; }
.pl-navpop-icon { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--pl-blue-bg); color: var(--pl-blue); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pl-navpop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-navpop-name { font-size: 15px; font-weight: 800; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-navpop-meta { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); }
.pl-navpop-go { flex: none; color: var(--pl-ink-4); margin-top: 9px; }
.pl-navpop-loading { display: flex; align-items: center; gap: 9px; padding: 10px 12px 12px; font-size: 13px; font-weight: 700; color: var(--pl-ink-3); }
.pl-navpop-spinner { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pl-blue-border); border-top-color: var(--pl-blue); animation: plSpin .8s linear infinite; }
.pl-navpop-empty { padding: 4px 12px 10px; }
.pl-navpop-empty-title { font-size: 14px; font-weight: 800; }
.pl-navpop-empty-sub { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-3); line-height: 1.45; margin-top: 3px; }
.pl-navpop-sep { height: 1px; background: var(--pl-border-soft); margin: 5px 12px; }
.pl-navpop-foot { display: flex; gap: 6px; padding: 2px; }
.pl-navpop-foot > * {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 44px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--pl-font);
}
.pl-navpop-foot > *:hover { background: #F4F6F9; }
.pl-navpop-all { color: var(--pl-blue); font-size: 14px; font-weight: 800; }
.pl-navpop-all:hover { color: var(--pl-blue-hover); }
.pl-navpop-how { color: var(--pl-ink-3); font-size: 13.5px; font-weight: 700; }
/* #endregion */

/* #region Тост с действием («Вернуть») */
.pl-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 100002;
	background: var(--pl-ink);
	color: #fff;
	border-radius: 14px;
	/* светлое кольцо отделяет тост от фото и темных блоков, где цвет фона не определить */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), var(--pl-sh-toast);
	padding: 13px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: min(640px, calc(100vw - 24px));
	animation: plToastPop .18s ease-out;
	font-family: var(--pl-font);
}
.pl-toast svg { flex: none; color: #6ee7b7; animation: plTick .35s ease-out; }
.pl-toast-text { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pl-toast-sub { font-size: 12.5px; font-weight: 600; color: var(--pl-ink-4); margin-top: 2px; }
.pl-toast-action { border: 0; background: transparent; color: var(--pl-blue-on-dark); font: 800 13.5px var(--pl-font); cursor: pointer; white-space: nowrap; padding: 4px 6px; }
/* над темным фоном (футер) — светлый вариант; классы ставит Collections.trackToastSurface (collection-modal.js) */
.pl-toast.is-surface-ready { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.pl-toast.is-surface-ready svg, .pl-toast.is-surface-ready .pl-toast-sub, .pl-toast.is-surface-ready .pl-toast-action { transition: color .2s ease; }
.pl-toast.is-on-dark { background: #fff; color: var(--pl-ink); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .75); }
.pl-toast.is-on-dark svg { color: var(--pl-ok-dot); }
.pl-toast.is-on-dark .pl-toast-sub { color: var(--pl-ink-3); }
.pl-toast.is-on-dark .pl-toast-action { color: var(--pl-blue-ink); }
/* #endregion */

/* #region Мобильная версия: шиты снизу, панель действий, одна колонка */
@media (max-width: 767.98px) {
	.pl-head { gap: 14px; }
	.pl-title { font-size: 23px; }
	.pl-side { flex: 1 1 100%; }
	.pl-item { flex-wrap: wrap; gap: 12px; }
	.pl-item-img { width: 96px; height: 78px; }
	.pl-item-note-col { flex: 1 1 100%; order: 5; }
	/* Цена уходит на свою строку: при flex: 1 она оставалась рядом с названием, колонка названия сжималась
	   до ~108 px на телефоне и длинное слово наезжало на цену */
	.pl-item-price { flex: 1 1 100%; text-align: left; order: 4; }
	.pl-item-price b, .pl-item-price s { display: inline; margin-right: 6px; }
	.pl-item-name { overflow-wrap: anywhere; }
	.pl-item-btns { flex: 1 1 100%; order: 6; }
	.pl-item-btns .pl-btn { flex: 1; }
	.pl-item-btns .pl-vote { flex: none; }
	.pl-drag { display: none; }
	/* на телефоне вид не переключается — collection-page.js держит плитку */
	.pl-view-switch { display: none; }
	/* плитки программ на телефоне — от края до края экрана: отрицательные поля съедают отступ контейнера .pl-page (px-2 = .5rem) */
	.pl-tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-left: -.5rem; margin-right: -.5rem; }
	.pl-side--bottom { display: flex; margin-top: 22px; }
	/* значок и заголовок одной строкой, кнопка — на всю ширину под текстом */
	.pl-cta-card { align-items: flex-start; padding: 18px 16px; }
	.pl-cta-icon { width: 42px; height: 42px; border-radius: 12px; }
	.pl-cta-card h3 { font-size: 18px; }
	.pl-cta-card .pl-btn { flex: 1 1 100%; }
	.pl-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.pl-mine-top { flex-wrap: wrap; gap: 12px; }
	.pl-mine-actions { flex: 1 1 100%; }
	.pl-mine-actions .pl-btn { flex: 1; }
	.pl-mine-actions .pl-btn--icon { flex: none; }
	/* лидер голосования — своей строкой под числом голосов */
	.pl-signal-leader { flex-basis: 100%; padding-left: 21px; }
	.pl-mine-program, .pl-mine-program.is-no-votes { grid-template-columns: 48px minmax(0, 1fr) 76px; }
	.pl-mine-program-img { width: 48px; height: 36px; }
	.pl-mine-program-price { font-size: 12.5px; }
	.pl-mine-program-votes { grid-column: 2 / span 2; }
	.pl-mine-steps { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
	/* две равные кнопки на 390 px: подписи «Отправить в чат» и «Копировать ссылку» в одну строку */
	.pl-actions > .pl-btn { padding: 0 8px; gap: 6px; font-size: 13.5px; }
	.pl-scrim { align-items: flex-end; padding: 0; }
	.pl-scrim.is-top { align-items: flex-end; overflow: hidden; }
	.pl-modal, .pl-modal--wide, .pl-modal--stats, .pl-modal--howto {
		width: 100%;
		max-width: 100%;
		max-height: 92vh;
		border-radius: 24px 24px 0 0;
		padding-bottom: env(safe-area-inset-bottom);
		animation: plSheetUp .26s cubic-bezier(.2, .9, .25, 1);
	}
	.pl-modal::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--pl-border); margin: 8px auto 0; }
	.pl-modal-head { padding: 12px 16px 8px; }
	.pl-modal-body { padding: 6px 16px 4px; }
	.pl-modal-foot { padding: 14px 16px 18px; position: sticky; bottom: 0; background: #fff; }
	/* на десктопе модалка тянется и прокручивается подложкой, шит снизу — внутри себя */
	.pl-modal--howto { max-height: 92vh; overflow: auto; }
	.pl-howto-title { font-size: 19px; }
	/* на узком шите чип не влезает рядом с текстом — ставим его над текстом */
	.pl-howto-access-row { flex-direction: column; gap: 7px; }
	.pl-howto-foot .pl-btn { flex: 1; min-height: 52px; padding: 0 10px; white-space: nowrap; }
	.pl-modal-foot .pl-btn { min-height: 52px; }
	/* на шите «Как это работает» уезжает под кнопку и растягивается на всю ширину */
	.pl-modal-foot--split { flex-direction: column-reverse; align-items: stretch; }
	.pl-modal-foot--split .pl-howto-link { justify-content: center; min-height: 44px; }
	.pl-btn--primary { min-height: 50px; }
	.pl-toast { left: 12px; right: 12px; transform: none; max-width: none; bottom: calc(88px + env(safe-area-inset-bottom)); animation-name: plPop; }
	.pl-switch-row { flex-wrap: wrap; }
	.pl-switch-btn { flex: 1 1 40%; }
	/* ряд получателя «Сохранить себе · Оставить заявку · ♥» остаётся одной строкой */
	.pl-switch-row--actions { flex-wrap: nowrap; }
	.pl-switch-row--actions .pl-switch-btn { flex: 1 1 0; }
	.pl-switch-row--actions .pl-switch-btn.pl-switch-like { flex: none; }
	.pl-savebtn { min-height: 50px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.pl-scrim, .pl-modal, .pl-item, .pl-tile, .pl-mine-row, .pl-mine-programs, .pl-toast, .pl-note.is-flash, .pl-savebtn.is-saved .pl-tick, .pl-navpop-spinner, .pl-price-swap { animation: none; }
	.pl-vote-count, .pl-vote-share span, .pl-leader, .pl-count-up-enter-active, .pl-count-up-leave-active, .pl-count-down-enter-active, .pl-count-down-leave-active { transition: none; }
}
/* #endregion */


/* #region Витрина /ekskursii-dlya-shkolnikov-podborki (хэндофф, экран 8): шапка, вкладки, строка фильтров, сетка карточек */
/* display: flex в базовом правиле перебивает [hidden] браузера — прячем явно */
.pl-scrim[hidden], .pl-toast[hidden] { display: none; }
body.pl-lock { overflow: hidden; }
.pl-sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
.pl-sc-head-main { max-width: 720px; }
.pl-sc-h1 { font-size: 32px; }
.pl-sc-head-btns { display: flex; gap: 8px; flex: none; flex-wrap: wrap; }
.pl-tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--pl-border); }
.pl-tab { padding: 10px 14px; font-weight: 800; font-size: 15px; color: var(--pl-ink-3); text-decoration: none; margin-bottom: -1px; border-bottom: 3px solid transparent; }
.pl-tab:hover { color: var(--pl-ink); }
.pl-tab.is-active { color: var(--pl-ink); border-bottom-color: var(--pl-blue); }
.pl-tab-count { background: var(--pl-surface-2); color: var(--pl-ink-3); border-radius: 10px; padding: 1px 8px; font-size: 12.5px; margin-left: 2px; }
.pl-sc-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 10px; }
.pl-sc-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--pl-border); color: var(--pl-ink-2); font-weight: 700; font-size: 13px; border-radius: 20px; padding: 6px 12px; text-decoration: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.pl-sc-chip span { font-size: 11.5px; opacity: .65; }
.pl-sc-chip:hover { border-color: var(--pl-blue-border); color: var(--pl-blue-ink); }
.pl-sc-chip.is-on { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
.pl-sc-chip.is-on span { opacity: .8; }
.pl-sc-chip--dash { border: 1px dashed var(--pl-blue-border); color: var(--pl-blue); font-weight: 800; }
.pl-sc-divider { width: 1px; height: 22px; background: var(--pl-border); margin: 0 6px; }
.pl-sc-hint { margin: 0 0 18px; font-size: 12.5px; color: var(--pl-ink-4); font-weight: 600; }
/* ровно три карточки в ряд — как в макете (repeat(3, 1fr), gap 20); карточки ряда одной высоты, кнопки прижаты к низу */
.pl-sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pl-sc-card { background: #fff; border-radius: 16px; box-shadow: 0 3px 20px rgba(29,58,83,.08); display: flex; flex-direction: column; overflow: hidden; border: 1.5px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.pl-sc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(29,58,83,.12); }
.pl-sc-card.is-mine { border-color: var(--pl-blue); }
.pl-sc-mine { background: var(--pl-blue-bg); color: var(--pl-blue-ink); font-size: 12px; font-weight: 800; padding: 7px 18px; display: flex; align-items: center; gap: 7px; }
.pl-sc-body { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pl-sc-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.pl-sc-by { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pl-ink-3); font-weight: 600; min-width: 0; }
.pl-sc-by b { color: var(--pl-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sc-by .pl-avatar { width: 28px; height: 28px; font-size: 11px; }
.pl-sc-by .pl-avatar.is-staff { background: var(--pl-blue); color: #fff; }
.pl-sc-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-sc-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 4px 8px; }
/* «Новая» — как бейдж новой программы в каталоге (.excard-newbadge) */
.pl-sc-badge--new { background: #f7c32e; color: #0b0a12; font-size: 12px; line-height: 1; padding: 5px 8px; }
.pl-sc-badge--pick { background: var(--pl-blue-bg); color: var(--pl-blue-ink); }
.pl-sc-title { font-size: 20px; font-weight: 800; line-height: 1.25; color: #0b0a12; margin: 0; }
.pl-sc-title a { color: inherit; text-decoration: none; }
.pl-sc-title a:hover { color: var(--pl-blue); }
.pl-sc-desc { font-size: 13.5px; color: var(--pl-ink-3); line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pl-sc-items { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; border-top: 1px solid var(--pl-border-soft); padding-top: 11px; }
.pl-sc-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--pl-ink); }
.pl-sc-thumb { width: 36px; height: 27px; border-radius: 6px; object-fit: cover; flex: none; background: #e7eaf0; }
.pl-sc-thumb.is-empty { display: inline-block; background: var(--pl-blue-bg); }
.pl-sc-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sc-item-price { font-size: 12.5px; color: var(--pl-green); font-weight: 800; white-space: nowrap; }
.pl-sc-toggle { align-self: flex-start; margin-left: 46px; background: none; border: 0; padding: 2px 0; color: var(--pl-blue); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.pl-sc-toggle svg { transition: transform .2s ease; }
.pl-sc-toggle.is-open svg { transform: rotate(180deg); }
.pl-sc-chips { margin-top: 4px; }
.pl-sc-foot { padding: 14px 18px 18px; display: flex; gap: 8px; align-items: stretch; }
.pl-sc-foot .pl-btn { flex: 1; justify-content: center; }
/* «Открыть» и «Изменить» — фиксированные 46 px по макету; «Сохранить себе» выше за счёт второй строки */
.pl-sc-foot .pl-btn:not(.pl-sc-save) { height: 46px; min-height: 46px; }
/* line-height не 1.2 из .pl-btn, а обычный — по макету кнопка на 2 строки выходит 52 px */
.pl-sc-save { flex-direction: column; gap: 1px; padding: 8px 12px; line-height: normal; }
.pl-sc-save b { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; }
.pl-sc-save-count { font-size: 11.5px; opacity: .8; font-weight: 600; }
.pl-sc-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 10px; flex-wrap: wrap; }
.pl-sc-pages { display: flex; gap: 4px; }
.pl-sc-pages a, .pl-sc-pages b { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--pl-ink-2); border: 1px solid var(--pl-border); background: #fff; }
.pl-sc-pages b { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
/* скелетон карточек, пока подгружается сортировка / тег / страница (collection-showcase.js) */
.pl-sc-card--skeleton { pointer-events: none; }
.pl-sc-card--skeleton:hover { transform: none; box-shadow: 0 3px 20px rgba(29,58,83,.08); }
.pl-sc-card--skeleton .pl-sc-body { gap: 10px; }
.pl-sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1f5 25%, #f6f8fb 50%, #eef1f5 75%); background-size: 200% 100%; animation: plShimmer 1.2s linear infinite; }
.pl-sk--avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.pl-sk--name { width: 45%; height: 13px; }
.pl-sk--title { width: 92%; height: 20px; border-radius: 7px; }
.pl-sk--line { width: 100%; }
.pl-sk--short { width: 62%; }
.pl-sk--thumb { flex: none; width: 36px; height: 27px; }
.pl-sk--grow { flex: 1; width: auto; }
.pl-sk--price { flex: none; width: 58px; }
.pl-sk--chip { width: 92px; height: 28px; border-radius: 20px; }
.pl-sk--btn { flex: 1; height: 46px; border-radius: 11px; }
/* пришли новые карточки — мягко проявляем; класс снимается скриптом, иначе fill-mode перебьёт подъём по наведению */
.pl-sc-results.is-fresh .pl-sc-card { animation: plRowIn .28s ease-out both; }
.pl-sc-results.is-fresh .pl-sc-card:nth-child(2) { animation-delay: .03s; }
.pl-sc-results.is-fresh .pl-sc-card:nth-child(3) { animation-delay: .06s; }
.pl-sc-results.is-fresh .pl-empty { animation: plFadeIn .2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
	.pl-sk, .pl-sc-results.is-fresh .pl-sc-card, .pl-sc-results.is-fresh .pl-empty { animation: none; }
}
.pl-sc-group { margin-bottom: 14px; }
.pl-sc-group-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* на планшете три колонки становятся уже 230 px — переходим на две */
@media (max-width: 1023px) {
	.pl-sc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.pl-sc-h1 { font-size: 23px; }
	.pl-sc-head-btns { width: 100%; }
	.pl-sc-head-btns .pl-btn { flex: 1; justify-content: center; }
	.pl-sc-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
	.pl-sc-filters::-webkit-scrollbar { display: none; }
	.pl-sc-grid { grid-template-columns: 1fr; gap: 14px; }
	.pl-sc-toggle { margin-left: 0; }
}
/* #endregion */

/* #region Страница подборки: баннер сотрудника и модалка «Оставить заявку» */
.pl-lead-list { display: flex; flex-direction: column; gap: 8px; }
.pl-lead-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--pl-border); border-radius: 12px; text-decoration: none; color: var(--pl-ink); transition: border-color .15s ease, background .15s ease; }
.pl-lead-row:hover { border-color: var(--pl-blue-border); background: var(--pl-blue-bg-soft); color: var(--pl-ink); }
.pl-lead-img { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; background: #e7eaf0; }
.pl-lead-img.is-empty { display: inline-block; background: var(--pl-blue-bg); }
.pl-lead-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-lead-main b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pl-lead-main small { font-size: 12px; color: var(--pl-ink-3); }
.pl-lead-price { font-size: 13px; font-weight: 800; color: var(--pl-green); white-space: nowrap; }
.pl-lead-go { font-size: 13px; font-weight: 800; color: var(--pl-blue); white-space: nowrap; }
/* модалка «Убрать экскурсию из подборки?»: строка программы как в «Оставить заявку», но без ссылки и ховера */
.pl-remove-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--pl-border); border-radius: 12px; background: var(--pl-surface-3); }
.pl-remove-place { font-size: 12px; font-weight: 600; color: var(--pl-ink-3); }
.pl-btn--danger-solid { background: var(--pl-danger); border-color: var(--pl-danger); color: #fff; min-height: 48px; font-size: 15px; }
.pl-btn--danger-solid:hover, .pl-btn--danger-solid:focus { background: #b91c1c; border-color: #b91c1c; color: #fff; }
@media (max-width: 575px) {
	.pl-lead-go { display: none; }
}
/* #endregion */