/* ==========================================================================
   Hentaro Profile — страница пользователя, косметика, свечение
   --------------------------------------------------------------------------
   Слой поверх стилей шаблона. Цвета берутся из переменных theme.css,
   поэтому при смене палитры профиль меняется вместе с сайтом.

   Про кнопки: в styles222.css есть общее `button:not(.color-btn)` с высотой
   40px. Его специфичность 0,1,1, поэтому двух классов у нашего селектора
   достаточно, чтобы перебить. Тип элемента в селектор НЕ добавляем —
   он поднял бы специфичность до 0,2,1 и базовый сброс начал бы бить
   собственные модификаторы .hp-btn-main.
   ========================================================================== */

.hp-profile {
	--hp-line: var(--glass-border, rgba(255,255,255,.09));
	--hp-txt:  var(--fg, #eef0f5);
	--hp-mut:  var(--fg-muted, #a2a8b8);
	--hp-dim:  var(--fg-dim, #6f7686);
	--hp-acc:  var(--accent, #ff2f52);
	--hp-ok:   var(--ok, #32c17a);

	position: relative;
	margin-top: 18px;
	padding: 20px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-lg, 20px);
	background: var(--glass, rgba(69,69,69,.62));
	color: var(--hp-txt);
	overflow: hidden;
}

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

.hp-head {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--hp-line);
}

.hp-ava {
	position: relative;
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--glass-light, rgba(255,255,255,.045));
	display: grid;
	place-items: center;
}
.hp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-ava-stub { font-size: 38px; font-weight: 800; color: var(--hp-dim); }

.hp-head-main { flex: 1 1 260px; min-width: 0; }

.hp-name {
	margin: 0 0 4px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.hp-group { font-size: 13px; color: var(--hp-mut); margin-bottom: 10px; }

.hp-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--hp-mut); }
.hp-stat b { color: var(--hp-txt); font-size: 15px; font-weight: 700; margin-right: 4px; }

.hp-wallet {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-pill, 999px);
	background: var(--glass-light, rgba(255,255,255,.045));
	font-size: 13px;
	white-space: nowrap;
}
.hp-wallet i { color: var(--hp-acc); }
.hp-wallet b { font-size: 17px; font-weight: 700; }
.hp-wallet span { color: var(--hp-mut); }

/* --------------------------------------------------------------------------
   Вкладки и панели
   -------------------------------------------------------------------------- */

.hp-tabs {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	overflow-x: auto;
	scrollbar-width: none;
}
.hp-tabs::-webkit-scrollbar { display: none; }

.hp-profile .hp-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: auto;
	padding: 9px 15px;
	margin: 0;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-pill, 999px);
	background: transparent;
	color: var(--hp-mut);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--t-fast, .16s), border-color var(--t-fast, .16s);
}
.hp-profile .hp-tab:hover { color: var(--hp-txt); border-color: var(--glass-hi, rgba(255,255,255,.16)); }
.hp-profile .hp-tab.is-active {
	color: #fff;
	border-color: transparent;
	background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
}

.hp-tab-count {
	min-width: 19px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	font-size: 11px;
	font-weight: 700;
}

.hp-pane { display: none; position: relative; z-index: 1; }
.hp-pane.is-active { display: block; }

.hp-sub-title {
	margin: 20px 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hp-mut);
}
.hp-sub-title:first-child { margin-top: 0; }

.hp-note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--hp-mut); }
.hp-note.is-warn { color: var(--warn, #ffb020); }
.hp-empty { color: var(--hp-dim); font-size: 13px; }

/* --------------------------------------------------------------------------
   Сетки: награды, плейлисты, косметика
   -------------------------------------------------------------------------- */

.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hp-grid-lists { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.hp-grid-cos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.hp-award {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 12px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-md, 14px);
	background: var(--glass-light, rgba(255,255,255,.045));
	opacity: .5;
}
.hp-award.is-earned { opacity: 1; border-color: rgba(50,193,122,.35); }

.hp-award-ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-sm, 10px);
	background: rgba(255,255,255,.06);
	color: var(--hp-dim);
	font-size: 17px;
}
.hp-award.is-earned .hp-award-ico {
	background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
	color: #fff;
}

.hp-award-body { min-width: 0; }
.hp-award-title { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.hp-award-descr { font-size: 11.5px; line-height: 1.35; color: var(--hp-mut); }

.hp-bar {
	margin-top: 7px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	overflow: hidden;
}
.hp-bar span { display: block; height: 100%; background: var(--hp-acc); border-radius: 999px; }

.hp-list {
	padding: 14px 12px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-md, 14px);
	background: var(--glass-light, rgba(255,255,255,.045));
	text-align: center;
}
.hp-list-n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.hp-list-t { margin-top: 3px; font-size: 12px; color: var(--hp-mut); }

/* --------------------------------------------------------------------------
   Магазин
   -------------------------------------------------------------------------- */

.hp-cos {
	padding: 12px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-md, 14px);
	background: var(--glass-light, rgba(255,255,255,.045));
	text-align: center;
}
.hp-cos.is-on { border-color: var(--hp-ok); }

.hp-cos-demo { display: grid; place-items: center; height: 64px; margin-bottom: 9px; }
.hp-cos-demo span {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
}
/* Демонстрация фона — прямоугольником, кружок для фона бессмыслен */
.hp-demo-b span { width: 100%; height: 46px; border-radius: var(--r-sm, 10px); }

.hp-cos-name  { font-size: 13px; font-weight: 600; }
.hp-cos-price { margin: 3px 0 8px; font-size: 12px; color: var(--hp-mut); }
.hp-cos-until { margin: 3px 0 8px; font-size: 11.5px; color: var(--hp-ok); }

/* --------------------------------------------------------------------------
   Кнопки, поля, сообщения
   -------------------------------------------------------------------------- */

.hp-profile .hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: auto;
	padding: 9px 16px;
	margin: 0;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-pill, 999px);
	background: var(--glass-light, rgba(255,255,255,.045));
	color: var(--hp-txt);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--t-fast, .16s), border-color var(--t-fast, .16s);
}
.hp-profile .hp-btn:hover { transform: translateY(-1px); }
.hp-profile .hp-btn:active { transform: none; }
.hp-profile .hp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.hp-profile .hp-btn-main {
	border-color: transparent;
	background: var(--accent-grad, linear-gradient(118deg,#ff2f52,#ff5a3c));
	color: #fff;
}
.hp-profile .hp-btn-mini { width: 100%; padding: 7px 12px; font-size: 12px; }

.hp-fg { margin-bottom: 12px; max-width: 380px; }

.hp-profile .hp-file { padding: 8px 10px; font-size: 13px; cursor: pointer; }
.hp-profile .hp-file::file-selector-button {
	margin-right: 10px;
	padding: 6px 12px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-pill, 999px);
	background: var(--glass-light, rgba(255,255,255,.045));
	color: var(--hp-txt);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.hp-lb { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; }
.hp-help { margin-top: 5px; font-size: 11.5px; color: var(--hp-dim); }

.hp-profile .hp-in {
	width: 100%;
	height: auto;
	padding: 10px 13px;
	border: 1px solid var(--hp-line);
	border-radius: var(--r-sm, 10px);
	background: rgba(0,0,0,.22);
	color: var(--hp-txt);
	font: inherit;
	font-size: 14px;
	box-sizing: border-box;
}
.hp-profile .hp-in:focus { outline: none; border-color: var(--hp-acc); }

.hp-msg {
	position: relative;
	z-index: 1;
	padding: 10px 14px;
	margin-bottom: 14px;
	border-radius: var(--r-sm, 10px);
	font-size: 13px;
}
.hp-msg.is-ok    { background: rgba(50,193,122,.12); color: var(--hp-ok); }
.hp-msg.is-error { background: rgba(255,47,82,.12);  color: var(--hp-acc); }

/* ==========================================================================
   Косметика
   --------------------------------------------------------------------------
   Правила общие: одни и те же классы работают и на аватаре в шапке,
   и на образце в магазине. Поэтому селекторы НЕ привязаны к .hp-ava.

   Про специфичность — здесь на этом уже обожглись. Базовое правило рамки
   раньше было `.hp-ava[class*="hp-frame-"]::after` (0,2,0) и задавало
   `border: 3px solid transparent`. Шорткат ставит и цвет, а правило цвета
   `.hp-frame-gold::after` весит 0,1,0 — и проигрывало. Рамка надевалась,
   класс стоял, но кольцо оставалось прозрачным.

   Теперь база тоже 0,1,0 (`[class*="hp-frame-"]`), и цвет, идущий ниже
   по файлу, выигрывает по порядку. Добавлять сюда тип элемента или
   .hp-ava нельзя — специфичность снова перевесит цвет.
   ========================================================================== */

[class*="hp-frame-"] { position: relative; }

[class*="hp-frame-"]::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid transparent;
	pointer-events: none;
}

.hp-frame-steel::after  { border-color: #9aa4b2; }
.hp-frame-gold::after   { border-color: #e8b44a; box-shadow: 0 0 14px -2px rgba(232,180,74,.65); }
.hp-frame-ember::after  { border-color: #ff6a3c; box-shadow: 0 0 14px -2px rgba(255,106,60,.65); }
.hp-frame-ice::after    { border-color: #6fd4ff; box-shadow: 0 0 14px -2px rgba(111,212,255,.6); }
.hp-frame-orchid::after { border-color: #c86bff; box-shadow: 0 0 16px -2px rgba(200,107,255,.65); }

/* Призма: радуга по кольцу. Маской вырезаем середину, иначе градиент
   залил бы весь круг и закрыл аватар. */
.hp-frame-prism::after {
	border: 0;
	padding: 3px;
	background: conic-gradient(from 0deg, #ff2f52, #ffb020, #32c17a, #6fd4ff, #c86bff, #ff2f52);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
}

/* --- Свечение в комментариях -------------------------------------------- */

[class*="hp-glow-"] { position: relative; border-radius: var(--r-md, 14px); }

.hp-glow-soft    { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 0 18px -6px rgba(255,255,255,.35); }
.hp-glow-crimson { box-shadow: 0 0 0 1px rgba(255,47,82,.45),   0 0 22px -6px rgba(255,47,82,.6); }
.hp-glow-mint    { box-shadow: 0 0 0 1px rgba(50,193,122,.45),  0 0 22px -6px rgba(50,193,122,.6); }
.hp-glow-violet  { box-shadow: 0 0 0 1px rgba(200,107,255,.45), 0 0 22px -6px rgba(200,107,255,.6); }
.hp-glow-solar   { box-shadow: 0 0 0 1px rgba(255,176,32,.5),   0 0 26px -6px rgba(255,176,32,.7); }

/* --- Фон профиля --------------------------------------------------------- */
/* База не задаёт background — его ставит только правило конкретного фона,
   поэтому конфликта специфичности здесь нет. */

[class*="hp-bg-"] { position: relative; }

[class*="hp-bg-"]::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
}

.hp-bg-dusk::before   { background: linear-gradient(160deg, rgba(94,60,150,.30), transparent 62%); }
.hp-bg-aurora::before { background: radial-gradient(120% 90% at 12% 0%, rgba(50,193,122,.26), transparent 60%),
                                    radial-gradient(100% 80% at 88% 10%, rgba(111,212,255,.22), transparent 62%); }
.hp-bg-sakura::before { background: radial-gradient(120% 90% at 85% 0%, rgba(255,140,180,.26), transparent 62%); }
.hp-bg-abyss::before  { background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 58%); }
.hp-bg-noise::before  {
	opacity: .28;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}

/* Образцы в магазине: фон — прямоугольником, рамка и свечение — кругом.
   Своя заливка, чтобы прозрачный градиент было видно на тёмной карточке. */
.hp-demo-b span {
	width: 100%;
	height: 46px;
	border-radius: var(--r-sm, 10px);
	background: rgba(255,255,255,.06);
}

/* ==========================================================================
   Старый блок профиля от DLE
   --------------------------------------------------------------------------
   Штатная таблица «Группа / Регистрация / Заходил / Публикаций» дублирует
   нашу шапку. Прячем её, но НЕ трогаем .user-edit: там лежит кнопка
   «редактировать профиль» и форма редактирования.
   ========================================================================== */

.user-inner { display: none; }

/* Загрузка аватара переехала в «Настройки» и стала платной. В штатном
   редакторе профиля поле остаётся — прячем его, иначе аватар можно
   поменять бесплатно в обход магазина. Прячем ЯЧЕЙКУ целиком, а не
   только input: рядом с ним лежит подпись и чекбокс «удалить». */
#userinfo .fieldtr:has(input[name="image"]),
#userinfo .fieldtr:has(input[name="del_foto"]) { display: none; }

/* --------------------------------------------------------------------------
   Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
	.hp-profile { padding: 14px; }
	.hp-head { gap: 12px; }
	.hp-ava { width: 68px; height: 68px; }
	.hp-name { font-size: 20px; }
	.hp-wallet { width: 100%; justify-content: center; }
}

/* --- Тумблер смены скина / шаблона --------------------------------------- */
.hs-skin-switch input:checked + .hs-skin-slider {
	background: var(--accent, #ff2a5f) !important;
	border-color: var(--accent, #ff2a5f) !important;
}
.hs-skin-slider::before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	border-radius: 50%;
	transition: transform .25s var(--e-out, ease-out);
	box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.hs-skin-switch input:checked + .hs-skin-slider::before {
	transform: translateX(24px);
}