/* --------------------------------------------------------------------------
   0. Сброс чужих стилей для всех кнопок набора

   В styles222.css есть общее правило
       button:not(.color-btn), input[type=submit] { height:40px; line-height:40px;
                                                    padding:0 15px; border-radius:4px }
   со специфичностью 0,1,1 — оно перебивает одиночные классы вроде .hs-pchip__ok
   и растягивает наши компактные кнопки до 40px. Плюс группа .grey задаёт им
   серый градиент. Поэтому сбрасываем всё явно и с запасом по специфичности.
   -------------------------------------------------------------------------- */

button.gf__add,
button.gf-chip__plus,
button.gf-chip__minus,
button.gf__reset,
button.hs-pchip__plus,
button.hs-pchip__ok,
button.hs-pchip__del,
button.hs-pl-btn,
button.hs-pl__item,
button.hs-modal__close,
button.hs-plm__tab,
button.hs-plm__del,
button.gf-tag,
button.gf-h-tab,
button.chips__more {
	height: auto;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   suite.css — оформление модулей Hentaro Suite
   Фильтр жанров, голосование, плейлисты, лайки и ответы в комментариях.
   Использует токены из theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Фильтр жанров в боковой колонке
   -------------------------------------------------------------------------- */

.gf { margin-bottom: 4px; }

.gf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.gf__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-dim);
}
.xf-block__title .gf__add,
.gf__head .gf__add,
button.gf__add {
	/* Явный сброс: общее правило styles222 `button:not(.color-btn)
	   {height:40px; line-height:40px; padding:0 15px}` специфичнее, чем
	   одиночный класс, и растягивало кнопку до 40px. */
	width: 24px;
	height: 24px;
	min-width: 0;
	line-height: 1;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	display: grid; place-items: center;
	flex: none;
	border-radius: var(--r-pill);
	border: 1px dashed var(--glass-border);
	background: transparent;
	color: var(--fg-dim);
	cursor: pointer;
	padding: 0;
	transition: all var(--t) var(--e-out);
}
.gf__add:hover {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	border-style: solid;
	transform: rotate(90deg);
}
.gf__add .fa { font-size: 12px; }

/* Выбранные условия */
.gf__chosen {
	margin-bottom: 10px;
	padding: 8px;
	border-radius: var(--r-md);
	background: rgba(255,255,255,.04);
	border: 1px solid var(--glass-border);
}
.gf__chosen-list { display: flex; flex-wrap: wrap; gap: 5px; }

.gf-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 8px;
	border-radius: var(--r-pill);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	border: 0;
	cursor: pointer;
	transition: filter var(--t) var(--e-out);
}
.gf-tag:hover { filter: brightness(1.12); }
.gf-tag span { font-weight: 800; opacity: .85; }
.gf-tag .fa { font-size: 9px; opacity: .7; }
.gf-tag--inc { background: linear-gradient(118deg, #2ea36a, #35c07d); }
.gf-tag--exc { background: linear-gradient(118deg, #b3283f, #d8384f); }

.gf__reset {
	margin-top: 8px;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: var(--fg-dim);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline dotted;
}
.gf__reset:hover { color: var(--accent); }

/* Чипса жанра с двумя кнопками */
.gf__list { display: flex; flex-wrap: wrap; gap: 5px; }

.gf-chip {
	display: inline-flex;
	align-items: stretch;
	flex: 0 1 auto;
	max-width: 100%;
	height: 26px;
	border-radius: var(--r-pill);
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	transition: color var(--t-fast) var(--e-out), border-color var(--t) var(--e-out),
	            background var(--t) var(--e-out);
}
.gf-chip__name {
	display: flex;
	align-items: center;
	padding: 0 4px 0 9px;
	white-space: nowrap;
	cursor: pointer;
	flex: 1 1 auto;
	justify-content: center;
}
.gf-chip__count {
	display: flex;
	align-items: center;
	padding-right: 5px;
	font-size: 10px;
	font-weight: 700;
	color: var(--fg-dim);
}
.gf__list .gf-chip__plus,
.gf__list .gf-chip__minus,
.gf-chip__plus,
.gf-chip__minus {
	/* В styles222 есть общее `button:not(.color-btn) {height:40px;
	   line-height:40px; padding:0 15px; border-radius:4px}` — без явного
	   сброса кнопки разъезжались красными прямоугольниками поверх чипсы. */
	width: 20px;
	min-width: 0;
	height: auto;
	line-height: 1;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-items: center;
	flex: none;
	padding: 0;
	border: 0;
	background: rgba(255,255,255,.05);
	color: var(--fg-dim);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.gf-chip__plus:hover  { background: #2ea36a; color: #fff; }
.gf-chip__minus:hover { background: #b3283f; color: #fff; }

.gf-chip:hover { border-color: var(--glass-hi); color: var(--fg); }

/* Состояния */
.gf-chip.is-inc {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(118deg, #2ea36a, #35c07d);
	box-shadow: 0 6px 18px -8px rgba(53,192,125,.7);
}
.gf-chip.is-exc {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(118deg, #b3283f, #d8384f);
	box-shadow: 0 6px 18px -8px rgba(216,56,79,.7);
}
.gf-chip.is-inc .gf-chip__count,
.gf-chip.is-exc .gf-chip__count { color: rgba(255,255,255,.75); }
.gf-chip.is-inc .gf-chip__plus,
.gf-chip.is-exc .gf-chip__minus { background: rgba(0,0,0,.22); color: #fff; }
/* Зачёркиваем исключённый жанр — состояние читается без наведения */
.gf-chip.is-exc .gf-chip__name { text-decoration: line-through; opacity: .85; }

/* Пул голосования */
.gf__pool {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed var(--glass-border);
}
.gf__pool-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--warn);
	margin-bottom: 8px;
}
.gf-chip--pool {
	border-style: dashed;
	border-color: rgba(255,176,32,.4);
	background: rgba(255,176,32,.08);
}
.gf-chip--pool .gf-chip__plus { background: rgba(255,176,32,.2); color: var(--warn); }
.gf-chip--pool .gf-chip__plus:hover { background: var(--warn); color: #1a1a1a; }
.gf-chip__done {
	display: grid;
	place-items: center;
	width: 20px;
	flex: none;
	color: var(--ok);
	font-size: 11px;
	background: rgba(50,193,122,.14);
}

/* --------------------------------------------------------------------------
   1б. Горизонтальный интерактивный подбор (+ / −) над пагинацией
   -------------------------------------------------------------------------- */

.gf-horizontal-bar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	margin: 28px 0 12px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
	        backdrop-filter: blur(var(--blur)) saturate(150%);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-2), inset 0 1px 0 var(--glass-hi);
	box-sizing: border-box;
	width: 100%;
}

.gf-h-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--glass-border);
}

.gf-h-title-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gf-h-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--r-md);
	background: var(--accent-soft);
	color: var(--accent);
	display: grid;
	place-items: center;
	font-size: 16px;
	flex: none;
}

.gf-h-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fg);
	line-height: 1.2;
}

.gf-h-hint {
	font-size: 12px;
	color: var(--fg-dim);
	margin-top: 2px;
}

.gf-plus-hint {
	color: #35c07d;
	font-weight: 800;
}

.gf-minus-hint {
	color: #d8384f;
	font-weight: 800;
}

.gf-h-tabs {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border-radius: var(--r-pill);
	background: var(--surface-2);
	border: 1px solid var(--glass-border);
}

button.gf-h-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fg-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: all var(--t-fast) var(--e-out);
}

button.gf-h-tab:hover {
	color: var(--fg);
	background: rgba(255, 255, 255, 0.08);
}

button.gf-h-tab.is-active {
	color: #ffffff !important;
	background: var(--accent-grad) !important;
	box-shadow: 0 2px 8px var(--accent-glow) !important;
}

.gf-h-katalog-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 16px;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.gf-h-katalog-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px 0 var(--accent-glow);
}

.gf-h-content {
	width: 100%;
}

.gf-chips-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.gf__chosen-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.gf__chosen-label {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--fg-dim);
}

/* Скрытие дубля при двойной навигации DLE */
#dle-content > .gf-horizontal-bar:first-child {
	display: none;
}

@media (max-width: 900px) {
	.gf-h-header {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.gf-h-tabs {
		width: 100%;
		justify-content: space-between;
	}

	.gf-h-tab {
		flex: 1;
		justify-content: center;
	}

	.gf-h-katalog-link {
		justify-content: center;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   2. Выдача фильтра
   -------------------------------------------------------------------------- */

.hs-result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 20px;
	border-bottom: 1px solid var(--glass-border);
	font-size: 13.5px;
	color: var(--fg-dim);
}
.hs-result-count b { color: var(--fg); font-size: 15px; }

#grid.is-loading { opacity: .45; pointer-events: none; transition: opacity var(--t) var(--e-out); }

.hs-empty {
	grid-column: 1 / -1;
	padding: 40px 20px;
	text-align: center;
	color: var(--fg-dim);
	font-size: 15px;
}
.hs-pager {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 18px 0 4px;
}

/* --------------------------------------------------------------------------
   3. Уведомления
   -------------------------------------------------------------------------- */

.hs-toasts {
	position: fixed;
	right: 18px;
	bottom: 78px;
	z-index: 950;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
	max-width: min(360px, calc(100vw - 36px));
}
.hs-toast {
	padding: 11px 15px;
	border-radius: var(--r-md);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fg);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
	        backdrop-filter: blur(var(--blur)) saturate(170%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-3);
	opacity: 0;
	transform: translateX(20px);
	transition: opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.hs-toast.is-in { opacity: 1; transform: none; }
.hs-toast--ok    { border-color: rgba(50,193,122,.45); }
.hs-toast--error { border-color: rgba(255,47,82,.5); }

/* --------------------------------------------------------------------------
   4. Модальное окно
   -------------------------------------------------------------------------- */

.hs-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	/* Прижимаем к верху, а не центрируем: при центрировании окно
	   пересчитывает позицию каждый раз, когда меняется высота содержимого
	   (переключение вкладок плейлистов, подгрузка списка) — и визуально
	   дёргается вверх-вниз. */
	place-items: start center;
	padding: 8vh 20px 20px;
	overflow-y: auto;
	background: rgba(5,6,9,.68);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--t) var(--e-out);
}
.hs-modal.is-open { opacity: 1; }
.hs-modal__box {
	width: min(460px, 100%);
	max-height: 86vh;
	overflow-y: auto;
	border-radius: var(--r-lg);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	        backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
	transform: translateY(14px) scale(.97);
	transition: transform var(--t) var(--e-spring);
}
.hs-modal.is-open .hs-modal__box { transform: none; }
.hs-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--glass-border);
}
.hs-modal__title { font-size: 16px; font-weight: 700; color: var(--fg); }
.hs-modal__close {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	border: 1px solid var(--glass-border);
	background: var(--glass-light);
	color: var(--fg-muted);
	cursor: pointer;
	padding: 0;
	transition: all var(--t) var(--e-out);
}
.hs-modal__close:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }
.hs-modal__body { padding: 18px; }

/* Формы в модалке */
.hs-form__hint { font-size: 13px; line-height: 1.55; color: var(--fg-dim); margin-bottom: 14px; }
.hs-form__hint b { color: var(--fg-muted); }
.hs-field { display: block; margin-bottom: 12px; }
.hs-field span {
	display: block;
	font-size: 12px;
	color: var(--fg-dim);
	margin-bottom: 5px;
}
.hs-field input {
	width: 100%;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--r-sm);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg);
	font: inherit;
	font-size: 14px;
	transition: border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.hs-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hs-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.hs-form__slots { font-size: 12px; color: var(--fg-dim); }
.hs-pool-preview { margin-top: 16px; }

/* --------------------------------------------------------------------------
   5. Плейлисты
   -------------------------------------------------------------------------- */

.hs-pl__list { display: grid; gap: 8px; }
.hs-pl__item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--r-md);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-muted);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: all var(--t) var(--e-out);
}
.hs-pl__item:hover { color: var(--fg); border-color: var(--glass-hi); transform: translateX(2px); }
.hs-pl__item.is-on {
	color: #fff;
	background: rgba(50,193,122,.14);
	border-color: rgba(50,193,122,.45);
}
.hs-pl__name { flex: 1 1 auto; }
.hs-pl__count {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,.08);
	color: var(--fg-dim);
}
.hs-pl__item.is-on .hs-pl__mark { color: var(--ok); }
.hs-pl__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--glass-border);
}
.hs-pl__balance { font-size: 12px; color: var(--fg-dim); }
.hs-pl__balance b { color: var(--warn); font-size: 14px; }

/* Кнопка «в плейлист» в карточке и полной новости */
button.hs-pl-btn,
.hs-pl-btn {
	/* тот же сброс общего правила button из styles222 */
	min-width: 0;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 34px; height: 34px;
	padding: 0;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-muted);
	cursor: pointer;
	transition: all var(--t) var(--e-spring);
}
.hs-pl-btn:hover { color: var(--ok); border-color: var(--ok); transform: scale(1.08); }
.hs-pl-btn.is-on { color: var(--ok); border-color: rgba(50,193,122,.45); background: rgba(50,193,122,.14); }
.hs-pl-btn--wide { width: auto; padding: 0 16px; height: 42px; font-size: 14px; font-weight: 600; }

/* Баланс в шапке профиля */
.hs-wallet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	background: rgba(255,176,32,.12);
	border: 1px solid rgba(255,176,32,.32);
	color: var(--warn);
	font-size: 12.5px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.hs-toasts { right: 12px; left: 12px; bottom: 68px; max-width: none; }
	.hs-modal { padding: 12px; }
	.hs-modal__box { max-height: 92vh; }
	.gf__list { max-height: none; }
}


/* --------------------------------------------------------------------------
   8. Предложенные жанры публикации (голосование)
   -------------------------------------------------------------------------- */

/* Кнопка + рядом с заголовком «Жанры» */
.xf-block__title .gf__add {
	margin-left: 8px;
	vertical-align: middle;
}

.hs-pool { margin-top: 6px; }

.hs-pchip {
	display: inline-flex;
	align-items: stretch;
	height: 26px;
	border-radius: var(--r-pill);
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--warn);
	background: rgba(255,176,32,.09);
	border: 1px dashed rgba(255,176,32,.45);
}
.hs-pchip__name { display: flex; align-items: center; padding: 0 4px 0 10px; white-space: nowrap; }
.hs-pchip__n {
	display: flex;
	align-items: center;
	padding: 0 7px 0 4px;
	font-size: 10px;
	font-weight: 700;
	opacity: .8;
}
.hs-pchip__plus,
.hs-pchip__ok,
.hs-pchip__del,
.hs-pchip__done {
	width: 22px;
	display: grid;
	place-items: center;
	flex: none;
	min-width: 0;
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	line-height: 1;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	background: rgba(255,176,32,.2);
	color: var(--warn);
	transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.hs-pchip__plus:hover { background: var(--warn); color: #1a1a1a; }
.hs-pchip__ok { background: rgba(50,193,122,.22); color: var(--ok); font-size: 12px; }
.hs-pchip__ok:hover { background: var(--ok); color: #111111; }
.hs-pchip__done { background: rgba(50,193,122,.16); color: var(--ok); cursor: default; font-size: 10px; }

/* Удаление предложения — только у администратора. Красная, в отличие
   от зелёной «одобрить»: действие необратимое. Размер и раскладку берёт
   из общей группы выше, поэтому кнопка ровно такая же, как ✓. */
.hs-pchip__del { background: rgba(255,47,82,.18); color: var(--accent); font-size: 14px; }
.hs-pchip__del:hover { background: var(--accent); color: #fff; }
.hs-pchip__del:disabled { opacity: .5; cursor: progress; }

/* Только что добавленный голосованием жанр коротко подсвечиваем */
.xf-chips a.is-fresh {
	animation: hs-fresh 2.2s var(--e-out);
	border-color: var(--ok);
}
@keyframes hs-fresh {
	0%   { background: rgba(50,193,122,.45); transform: scale(.9); }
	40%  { background: rgba(50,193,122,.22); transform: none; }
	100% { background: var(--glass-light); }
}

.gf__hint {
	font-size: 11px;
	font-weight: 700;
	color: var(--fg-dim);
	letter-spacing: .04em;
	cursor: help;
}


/* --------------------------------------------------------------------------
   9. Возврат размеров после сброса (блок 0 обнуляет padding/height)
   -------------------------------------------------------------------------- */

button.gf__add         { width: 24px; height: 24px; border-radius: var(--r-pill); }
button.gf-chip__plus,
button.gf-chip__minus  { width: 20px; }
button.hs-pchip__plus,
button.hs-pchip__ok    { width: 22px; }
button.hs-pl-btn       { width: 34px; height: 34px; border-radius: var(--r-pill); }
button.hs-pl-btn--wide { width: auto; height: 42px; padding: 0 16px; }
button.hs-pl__item     { padding: 11px 14px; border-radius: var(--r-md); }
button.gf-tag          { height: 24px; padding: 0 8px; border-radius: var(--r-pill); }
button.chips__more     { height: 26px; padding: 0 10px; border-radius: var(--r-pill); }
button.hs-modal__close { width: 30px; height: 30px; border-radius: var(--r-pill); }
button.hs-plm__tab     { height: 30px; padding: 0 12px; border-radius: var(--r-pill); }
button.hs-plm__del     { width: 26px; height: 26px; border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   10. Меню пользователя (login.tpl) в общем стиле

   В styles222 пункты меню попадают в группу `.grey`, где им задан серый
   градиент из старого оформления — отсюда серые прямоугольники поверх
   тёмного интерфейса. Переопределяем целиком.
   -------------------------------------------------------------------------- */

/* Оверлей центрует окно сам. jQuery от DLE показывает его через
   inline display:block, поэтому свой display здесь не задаём — иначе
   окно либо не откроется, либо не закроется. */
.overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	padding: 20px;
	background: rgba(5,6,9,.68);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	overflow-y: auto;
	text-align: center;          /* центрируем inline-block окно */
}

.login-box {
	/* В styles222 у блока `position:absolute; left:50%; top:20%;
	   margin-left:-160px` — старая схема центрирования отрицательным
	   отступом. Сбрасываем ВСЕ её части: если оставить left:50%, при
	   position:relative окно уезжает вправо за край экрана. */
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	width: min(360px, 100%);
	max-width: 100%;
	margin: 40px auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 14px;
	border-radius: var(--r-lg);
	background: var(--glass-strong);
	background-image: none;
	-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	        backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-3), inset 0 1px 0 var(--glass-hi);
}
.login-title {
	padding: 16px 18px 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--fg);
	text-align: center;
	background: none;
	background-image: none;
	border-bottom: 1px solid var(--glass-border);
	text-shadow: none;
}
.login-avatar { text-align: center; padding: 16px 18px 10px; }
.login-avatar .avatar-box {
	width: 72px;
	height: 72px;
	margin: 0 auto 10px;
	border-radius: var(--r-pill);
	overflow: hidden;
	border: 2px solid var(--glass-border);
	background: var(--surface-2);
}
.login-avatar .avatar-box img { width: 100%; height: 100%; object-fit: cover; }
.login-avatar > a {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-soft);
	background-image: none;
	border: 1px solid rgba(255,47,82,.3);
	text-decoration: none;
}
.login-avatar > a:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }

.login-menu { padding: 0 14px; display: grid; gap: 5px; margin: 0; }
.login-menu li { list-style: none; float: none; height: auto; line-height: normal; }
.login-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	padding: 9px 13px;
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--fg-muted);
	background: var(--glass-light);
	background-image: none;
	border: 1px solid var(--glass-border);
	text-decoration: none;
	text-shadow: none;
	transition: color .16s ease, background .26s ease, border-color .26s ease, transform .26s ease;
}
.login-menu a:hover {
	color: var(--fg);
	background: rgba(255,255,255,.09);
	background-image: none;
	border-color: var(--glass-hi);
	transform: translateX(2px);
}
.login-menu a .fa { width: 16px; flex: none; font-size: 14px; opacity: .75; }
.login-menu .lm-count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--r-pill);
	background: rgba(255,255,255,.08);
	color: var(--fg-dim);
	float: none;
}
.login-menu .lm-exit { color: var(--accent); }
.login-menu .lm-exit:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }

.login-wallet {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 14px 10px;
	padding: 9px 13px;
	border-radius: var(--r-sm);
	background: rgba(255,176,32,.1);
	border: 1px solid rgba(255,176,32,.3);
	color: var(--warn);
	font-size: 13px;
	font-weight: 700;
}

.overlay-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-muted);
	cursor: pointer;
	font-size: 13px;
	z-index: 2;
	transition: all .26s ease;
}
.overlay-close:hover { color: #fff; background: var(--accent-grad); border-color: transparent; }

/* Форма входа для гостей */
.login-form { padding: 16px 18px 6px; }
.login-input { margin-bottom: 10px; }
.login-input input {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border-radius: var(--r-sm);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg);
	font: inherit;
	font-size: 14px;
}
.login-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.login-button button {
	width: 100%;
	height: 44px;
	line-height: 1;
	border-radius: var(--r-sm);
	background: var(--accent-grad);
	background-image: var(--accent-grad);
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.login-button button:hover { filter: brightness(1.07); }
.login-checkbox { margin: 10px 0; font-size: 13px; color: var(--fg-dim); }
.login-links {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	padding-top: 6px;
}
.login-links a { color: var(--fg-dim); }
.login-links a:hover { color: var(--accent); }
.login-links .log-register { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Менеджер плейлистов (открывается из меню пользователя)
   -------------------------------------------------------------------------- */

.hs-plm { display: grid; gap: 12px; }
.hs-plm__tabs {
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	min-height: 36px;
	gap: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--glass-border);
}
.hs-plm__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: var(--r-pill);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--fg-muted);
	background: var(--glass-light);
	background-image: none;
	border: 1px solid var(--glass-border);
	cursor: pointer;
	transition: all .26s ease;
}
.hs-plm__tab:hover { color: var(--fg); border-color: var(--glass-hi); }
.hs-plm__tab.is-on {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	box-shadow: var(--sh-glow);
}
.hs-plm__tab b { font-weight: 700; opacity: .75; }

/* Фиксированная область списка: пустой плейлист и плейлист на 20 позиций
   дают одинаковую высоту окна, поэтому оно не прыгает при переключении. */
.hs-plm__items {
	display: grid;
	gap: 8px;
	align-content: start;
	min-height: 264px;
	max-height: 46vh;
	overflow-y: auto;
}
.hs-plm__item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px;
	border-radius: var(--r-sm);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-muted);
	text-decoration: none;
	transition: all .26s ease;
}
.hs-plm__item:hover { color: var(--fg); border-color: var(--glass-hi); transform: translateX(2px); }
.hs-plm__item img {
	width: 40px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--r-xs);
	flex: none;
	background: var(--surface-2);
}
.hs-plm__t { flex: 1 1 auto; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.hs-plm__del {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	flex: none;
	border-radius: var(--r-pill);
	background: transparent;
	background-image: none;
	border: 1px solid var(--glass-border);
	color: var(--fg-dim);
	font: inherit;
	font-size: 11px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: all .26s ease;
}
.hs-plm__del:hover { color: #fff; background: var(--accent); border-color: transparent; }
.hs-plm__empty { padding: 26px; text-align: center; color: var(--fg-dim); font-size: 14px; }
.hs-plm__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 12px;
	border-top: 1px solid var(--glass-border);
	font-size: 12px;
	color: var(--fg-dim);
}

/* Публикация и удаление в менеджере плейлистов */
.hs-plm__share {
	padding: 12px;
	background: var(--surface-2, rgba(255, 255, 255, 0.03));
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
	border-radius: var(--r-md, 10px);
}
.hs-plm__pub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.hs-plm__descr {
	flex: 1 1 200px;
	height: 34px;
	padding: 0 12px;
	border-radius: var(--r-pill, 999px);
	background: var(--glass-light, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
	color: #fff;
	font-size: 13px;
	box-sizing: border-box;
}
.chip.is-danger,
button.chip.is-danger {
	background: rgba(235, 47, 75, 0.15) !important;
	border: 1px solid rgba(235, 47, 75, 0.35) !important;
	color: #ff4d6d !important;
	transition: all 0.2s ease !important;
	cursor: pointer;
}
.chip.is-danger:hover,
button.chip.is-danger:hover {
	background: rgba(235, 47, 75, 0.9) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(235, 47, 75, 0.45) !important;
}


/* --------------------------------------------------------------------------
   12. Сводная страница доп. полей (жанры, студии, режиссёры, годы)
   -------------------------------------------------------------------------- */

.xcat { padding: 4px 0 20px; }

.xcat__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--glass-border);
}
.xcat__nav { display: flex; flex-wrap: wrap; gap: 6px; }
.xcat__nav .chip { text-decoration: none; }

.xcat__sort {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.xcat__sort-label { font-size: 12px; color: var(--fg-dim); }
button.xcat__sort-btn { height: 26px; padding: 0 10px; }

/* Поиск по значениям */
.xcat__search {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.xcat__input {
	flex: 1 1 260px;
	height: 42px;
	padding: 0 16px;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg);
	font: inherit;
	font-size: 14px;
	transition: border-color .26s ease, box-shadow .26s ease;
}
.xcat__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.xcat__input::placeholder { color: var(--fg-dim); }
.xcat__found { font-size: 13px; color: var(--fg-dim); }

/* Группа значений */
.xcat__group { margin-bottom: 28px; scroll-margin-top: 100px; }
.xcat__group.is-empty { display: none; }

.xcat__title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 17px;
	font-weight: 700;
	color: var(--fg);
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--glass-border);
}
.xcat__title .fa { color: var(--accent); font-size: 15px; }
.xcat__n {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--r-pill);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	color: var(--fg-dim);
}

.xcat__chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* Чипса значения: ссылка + счётчик + «в подбор» */
.xcat-chip {
	display: inline-flex;
	align-items: stretch;
	height: 28px;
	border-radius: var(--r-pill);
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px solid var(--glass-border);
	transition: color .16s ease, border-color .26s ease, background .26s ease,
	            transform .26s ease, box-shadow .26s ease;
}
.xcat-chip:hover {
	color: var(--fg);
	border-color: var(--glass-hi);
	transform: translateY(-1px);
}
.xcat-chip.is-hidden { display: none; }
.xcat-chip.is-filtered { display: none; }

.xcat-chip__link {
	display: flex;
	align-items: center;
	padding: 0 5px 0 11px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
.xcat-chip__n {
	display: flex;
	align-items: center;
	padding-right: 9px;
	font-size: 10px;
	font-weight: 700;
	color: var(--fg-dim);
}
button.xcat-chip__add {
	width: 22px;
	min-width: 0;
	height: auto;
	line-height: 1;
	display: grid;
	place-items: center;
	flex: none;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255,255,255,.05);
	background-image: none;
	box-shadow: none;
	color: var(--fg-dim);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background .16s ease, color .16s ease;
}
button.xcat-chip__add:hover { background: #2ea36a; color: #fff; }
.xcat-chip.is-picked {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(118deg, #2ea36a, #35c07d);
	box-shadow: 0 6px 18px -8px rgba(53,192,125,.7);
}
.xcat-chip.is-picked .xcat-chip__n { color: rgba(255,255,255,.75); }
.xcat-chip.is-picked .xcat-chip__add { background: rgba(0,0,0,.22); color: #fff; }

.xcat__empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--fg-dim);
	font-size: 15px;
}

/* Панель «перейти к подбору» появляется, когда что-то выбрано */
.xcat-bar {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translate(-50%, 20px);
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	max-width: min(760px, calc(100vw - 32px));
	padding: 10px 14px;
	border-radius: var(--r-pill);
	background: var(--glass-strong);
	-webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	        backdrop-filter: blur(var(--blur-lg)) saturate(180%);
	border: 1px solid var(--glass-border);
	box-shadow: var(--sh-3);
	opacity: 0;
	pointer-events: none;
	transition: opacity .26s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
}
.xcat-bar.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.xcat-bar__list { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.xcat-bar__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 18px;
	flex: none;
	border-radius: var(--r-pill);
	background: var(--accent-grad);
	background-image: var(--accent-grad);
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.xcat-bar__go:hover { color: #fff; filter: brightness(1.07); }

@media (max-width: 768px) {
	.xcat__head { flex-direction: column; gap: 12px; }
	.xcat-bar { left: 12px; right: 12px; transform: translateY(20px); max-width: none; }
	.xcat-bar.is-on { transform: none; }
}

/* Ссылка на расширенный подбор под списком жанров */
.gf__more {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	padding: 10px 13px;
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-muted);
	background: var(--glass-light);
	border: 1px dashed var(--glass-border);
	text-decoration: none;
	transition: color .16s ease, background .26s ease, border-color .26s ease;
}
.gf__more:hover {
	color: #fff;
	background: var(--accent-grad);
	border-color: transparent;
	border-style: solid;
}
.gf__more span { flex: 1 1 auto; }
.gf__more .fa { font-size: 13px; opacity: .8; }
.gf__more-arrow { flex: none; }

/* Исключённое значение в каталоге */
.xcat-chip.is-excluded {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(118deg, #b3283f, #d8384f);
	box-shadow: 0 6px 18px -8px rgba(216,56,79,.7);
}
.xcat-chip.is-excluded .xcat-chip__n { color: rgba(255,255,255,.75); }
.xcat-chip.is-excluded .xcat-chip__minus { background: rgba(0,0,0,.22); color: #fff; }
.xcat-chip.is-excluded .xcat-chip__link { text-decoration: line-through; opacity: .85; }

button.xcat-chip__minus {
	width: 22px;
	min-width: 0;
	height: auto;
	line-height: 1;
	display: grid;
	place-items: center;
	flex: none;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255,255,255,.05);
	background-image: none;
	box-shadow: none;
	color: var(--fg-dim);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background .16s ease, color .16s ease;
}
button.xcat-chip__minus:hover { background: #b3283f; color: #fff; }
.xcat-chip__link { padding-left: 8px; }

/* =====================================================================
   Выбор жанра из каталога в форме «предложить жанр»

   Сначала человек выбирает из того, что на сайте уже есть, и лишь если
   нужного нет — вводит свой вариант. Так каталог не зарастает разными
   написаниями одного жанра.
   ===================================================================== */

.hs-gpick__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 240px;
	overflow-y: auto;
	padding: 10px;
	margin-bottom: 12px;
	border: 1px solid var(--glass-border);
	border-radius: var(--r-md, 10px);
	background: var(--surface-2);
}

.hs-gpick__empty {
	font-size: 13px;
	color: var(--fg-dim);
	padding: 6px 2px;
}

button.hs-gchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	background: var(--surface-1, rgba(255, 255, 255, .04));
	color: var(--fg-muted);
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

button.hs-gchip:hover { border-color: var(--accent); color: #fff; }

button.hs-gchip.is-picked {
	background: var(--accent-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px var(--accent-glow);
}

/* Уже указан у публикации или уже на голосовании — виден, но не выбирается:
   иначе непонятно, почему привычного жанра нет в списке */
button.hs-gchip.is-off {
	opacity: .42;
	cursor: not-allowed;
	text-decoration: line-through;
}

button.hs-gchip.is-off:hover { border-color: var(--glass-border); color: var(--fg-muted); }

.hs-gchip__n {
	font-size: 11px;
	color: var(--fg-dim);
	font-variant-numeric: tabular-nums;
}

button.hs-gchip.is-picked .hs-gchip__n { color: rgba(255, 255, 255, .75); }

button.hs-gpick__own {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 9px 12px;
	border: 1px dashed var(--glass-border);
	border-radius: var(--r-md, 10px);
	background: none;
	color: var(--fg-dim);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color .16s ease, border-color .16s ease;
}

button.hs-gpick__own:hover { color: var(--accent); border-color: var(--accent); }

.hs-gpick__custom { margin-bottom: 4px; }