/* -------------------------------------------
	fs-18
------------------------------------------- */
.fs-18 {
	font-size: 1.125rem;
}

.small2x {
	font-size: 0.75em;
}

/* -------------------------------------------
	fw-
------------------------------------------- */
.fw-800 {
	font-weight: 800;
}

.fw-900 {
	font-weight: 900;
}

/* -------------------------------------------
	to-el
------------------------------------------- */
.to-el {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -------------------------------------------
	text-help
------------------------------------------- */
.text-help {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
	cursor: help;
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}

/* -------------------------------------------
	link decoration none
------------------------------------------- */
.link-decoration-none a {
	text-decoration: none;
}

/* ----------------------------------------
	hide-long-text
---------------------------------------- */
.hide-long-text {
	--hide-long-text: 120px;

	max-width: var(--hide-long-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hide-long-text.hlt-160p {
	--hide-long-text: 160px;
}
@media (min-width: 1500px) {
	.hide-long-text.hlt-160p {
		--hide-long-text: 260px;
	}
}

/* Утилита .bg-blur удалена 2026-07-16: 0 использований в разметке (tpl/js/html).
   Числа saturate(180%) blur(20px) дублировали --backdrop-filter-blur; разбор
   числил её «хардкодом мимо шкалы», но подсчёт читателей показал, что чинить
   было нечего — класс мёртв. Стекло собирается ролями --glass-* (root.css). */

/* -------------------------------------------
	img-db
------------------------------------------- */
.img-db, .db-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------
	mh-100vh
------------------------------------------- */
.mh-100vh {
	min-height: 100vh;
}

/* -------------------------------------------
	animation-delay
------------------------------------------- */
:root {
	--animate-delay: 1s;
	--animate-delay-2: calc(1s * 2);
	--animate-delay-3: calc(1s * 3);
	--animate-delay-4: calc(1s * 4);
	--animate-delay-5: calc(1s * 5);
}
.animate-delay-1s {
	--animate-delay: 1s;
	animation-delay: var(--animate-delay);
}
.animate-delay-2s {
	--animate-delay: calc(1s * 2);
	animation-delay: var(--animate-delay);
}
.animate-delay-3s {
	--animate-delay: calc(1s * 3);
	animation-delay: var(--animate-delay);
}
.animate-delay-4s {
	--animate-delay: calc(1s * 4);
	animation-delay: var(--animate-delay);
}
.animate-delay-5s {
	--animate-delay: calc(1s * 5);
	animation-delay: var(--animate-delay);
}

/* -------------------------------------------
	animY
------------------------------------------- */
.animY {
	--animate-delay: 1s;
	--animation-animY-value: 12s infinite ease var(--animate-delay) both;
	animation: animY var(--animation-animY-value);
}

@keyframes animY {
	0% {
		transform: translate3d(0, 0, 0);
	}
	15% {
		transform: translate3d(0, 3px, 0);
	}
	30% {
		transform: translate3d(0, -3px, 0);
	}
	45% {
		transform: translate3d(0, 4px, 0);
	}
	60% {
		transform: translate3d(0, -4px, 0);
	}
	75% {
		transform: translate3d(0, 5px, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* -------------------------------------------
	verif-icon
------------------------------------------- */
.verif-icon {
	--fa-primary-color: var(--bs-white);
	--fa-secondary-color: var(--bs-primary);
	--fa-secondary-opacity: 1;
}

.verif-icon.not-verif {
	--fa-primary-color: transparent;
	--fa-secondary-color: var(--bs-secondary-400);
}

/* -------------------------------------------
	avatar
------------------------------------------- */
.avatar-container {
	--avatar-size: 40px;

	width: var(--avatar-size);
	height: var(--avatar-size);
	/*overflow: hidden;*/
	/*border: 1px solid rgba(var(--bs-gray-200-rgb), 1);*/
	background-color: rgba(var(--bs-info-400-rgb), 0.0);
	box-shadow: 0 0 0 1px rgba(var(--bs-info-600-rgb), 0.45);
	border-radius: var(--bs-border-radius-pill);
	transition: box-shadow var(--transition-options-15), transform var(--transition-options-15);
}
.avatar-container:hover {
	box-shadow: 0 0 0 1px rgba(var(--bs-info-600-rgb), 0.6), 0 0 0 5px rgba(var(--bs-info-600-rgb), 0.1);
	transform: rotate(5deg) scale(1.05);
}
.avatar-container:active {
	transform: scale(0.98);
}

.avatar {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	border-radius: var(--bs-border-radius-pill);
}
.avatar::after {
	content: "";
	display: none;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	z-index: 1;
	/*box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -2px 0 rgba(255, 255, 255, 0.1),
		inset 0 -6px 12px rgba(255, 255, 255, 0.1),
		inset 0 4px 0 rgba(255, 255, 255, 0.4),
		inset 0 6px 0 rgba(255, 255, 255, 0.3),
		inset 0 6px 12px rgba(255, 255, 255, 0.5);*/
	border-radius: var(--bs-border-radius);
}

.avatar img,
.avatar svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.avatar svg {
	fill: rgba(var(--bs-info-800-rgb), 0.3);
}

/* -------------------------------------------
	mask
------------------------------------------- */
.mask {
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center
}

.mask-squircle {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-decagon {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTkyJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTk2IDAgNTguNzc5IDE5LjA5OCAzNi4zMjcgNTB2NjEuODA0bC0zNi4zMjcgNTBMOTYgMjAwbC01OC43NzktMTkuMDk4LTM2LjMyNy01MFY2OS4wOThsMzYuMzI3LTUweicgZmlsbC1ydWxlPSdldmVub2RkJy8+PC9zdmc+");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-diamond {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTEwMCAwIDEwMCAxMDAtMTAwIDEwMEwwIDEwMHonIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-heart {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzE4NScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDE4NC42MDZhMTUuMzg0IDE1LjM4NCAwIDAgMS04LjY1My0yLjY3OEM1My41NjUgMTU2LjI4IDM3LjIwNSAxMzguNjk1IDI4LjE4MiAxMjcuNyA4Ljk1MiAxMDQuMjY0LS4yNTQgODAuMjAyLjAwNSA1NC4xNDYuMzA4IDI0LjI4NyAyNC4yNjQgMCA1My40MDYgMGMyMS4xOTIgMCAzNS44NjkgMTEuOTM3IDQ0LjQxNiAyMS44NzlhMi44ODQgMi44ODQgMCAwIDAgNC4zNTYgMEMxMTAuNzI1IDExLjkyNyAxMjUuNDAyIDAgMTQ2LjU5NCAwYzI5LjE0MiAwIDUzLjA5OCAyNC4yODcgNTMuNCA1NC4xNTEuMjYgMjYuMDYxLTguOTU2IDUwLjEyMi0yOC4xNzYgNzMuNTU0LTkuMDIzIDEwLjk5NC0yNS4zODMgMjguNTgtNjMuMTY1IDU0LjIyOGExNS4zODQgMTUuMzg0IDAgMCAxLTguNjUzIDIuNjczWicgZmlsbD0nYmxhY2snIGZpbGwtcnVsZT0nbm9uemVybycvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-hexagon {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTgyJyBoZWlnaHQ9JzIwMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNLjMgNjUuNDg2YzAtOS4xOTYgNi42ODctMjAuMDYzIDE0LjIxMS0yNS4wNzhsNjEuODYtMzUuOTQ2YzguMzYtNS4wMTYgMjAuODk5LTUuMDE2IDI5LjI1OCAwbDYxLjg2IDM1Ljk0NmM4LjM2IDUuMDE1IDE0LjIxMSAxNS44ODIgMTQuMjExIDI1LjA3OHY3MS4wNTVjMCA5LjE5Ni02LjY4NyAyMC4wNjMtMTQuMjExIDI1LjA3OWwtNjEuODYgMzUuOTQ1Yy04LjM2IDQuMTgtMjAuODk5IDQuMTgtMjkuMjU4IDBMMTQuNTEgMTYxLjYyQzYuMTUxIDE1Ny40NC4zIDE0NS43MzcuMyAxMzYuNTRWNjUuNDg2WicgZmlsbD0nYmxhY2snIGZpbGwtcnVsZT0nbm9uemVybycvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-hexagon-2 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzE4MicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNNjQuNzg2IDE4MS40Yy05LjE5NiAwLTIwLjA2My02LjY4Ny0yNS4wNzktMTQuMjFMMy43NjIgMTA1LjMzYy01LjAxNi04LjM2LTUuMDE2LTIwLjkgMC0yOS4yNTlsMzUuOTQ1LTYxLjg2QzQ0LjcyMyA1Ljg1MSA1NS41OSAwIDY0Ljc4NiAwaDcxLjA1NWM5LjE5NiAwIDIwLjA2MyA2LjY4OCAyNS4wNzkgMTQuMjExbDM1Ljk0NSA2MS44NmM0LjE4IDguMzYgNC4xOCAyMC44OTkgMCAyOS4yNThsLTM1Ljk0NSA2MS44NmMtNC4xOCA4LjM2LTE1Ljg4MyAxNC4yMTEtMjUuMDc5IDE0LjIxMUg2NC43ODZaJyBmaWxsPSdibGFjaycgZmlsbC1ydWxlPSdub256ZXJvJy8+PC9zdmc+");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-circle {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48Y2lyY2xlIGZpbGw9J2JsYWNrJyBjeD0nMTAwJyBjeT0nMTAwJyByPScxMDAnIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-parallelogram {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzE1NCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTQ2LjE1NCAwSDIwMGwtNDYuMTU0IDE1My44NDZIMHonIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-parallelogram-2 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzE1NCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTE1My44NDYgMEgwbDQ2LjE1NCAxNTMuODQ2SDIwMHonIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-parallelogram-3 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTU0JyBoZWlnaHQ9JzIwMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTS4wNzcgNDcuMDc3djE1My44NDZsMTUzLjg0Ni00Ni4xNTRWLjkyM3onIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-parallelogram-4 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTU0JyBoZWlnaHQ9JzIwMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTE1My45MjMgNDcuMDc3djE1My44NDZMLjA3NyAxNTQuNzdWLjkyM3onIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-pentagon {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTkyJyBoZWlnaHQ9JzE4MScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTk2IDAgOTUuMTA2IDY5LjA5OC0zNi4zMjcgMTExLjgwNEgzNy4yMkwuODk0IDY5LjA5OHonIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-square {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTAgMGgyMDB2MjAwSDB6JyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4=");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-star {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTkyJyBoZWlnaHQ9JzE4MCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTk2IDEzNy4yNjMtNTguNzc5IDQyLjAyNCAyMi4xNjMtNjguMzg5TC44OTQgNjguNDgxbDcyLjQ3Ni0uMjQzTDk2IDBsMjIuNjMgNjguMjM4IDcyLjQ3Ni4yNDMtNTguNDkgNDIuNDE3IDIyLjE2MyA2OC4zODl6JyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4=");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-star-2 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTkyJyBoZWlnaHQ9JzE4MCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTk2IDE1My4wNDQtNTguNzc5IDI2LjI0MyA3LjAyLTYzLjUxM0wuODk0IDY4LjQ4MWw2My4xMTctMTMuMDFMOTYgMGwzMS45ODkgNTUuNDcyIDYzLjExNyAxMy4wMS00My4zNDcgNDcuMjkyIDcuMDIgNjMuNTEzeicgZmlsbC1ydWxlPSdldmVub2RkJy8+PC9zdmc+");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-triangle {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTc0JyBoZWlnaHQ9JzE0OScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTg3IDE0OC40NzYtODYuNjAzLjE4NUw0My44NiA3NC40MjMgODcgMGw0My4xNCA3NC40MjMgNDMuNDYzIDc0LjIzOHonIGZpbGwtcnVsZT0nZXZlbm9kZCcvPjwvc3ZnPg==");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-triangle-2 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTc0JyBoZWlnaHQ9JzE1MCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTg3IC43MzggODYuNjAzLS4xODQtNDMuNDYzIDc0LjIzOEw4NyAxNDkuMjE0IDQzLjg2IDc0Ljc5Mi4zOTcuNTU0eicgZmlsbC1ydWxlPSdldmVub2RkJy8+PC9zdmc+");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-triangle-3 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTUwJyBoZWlnaHQ9JzE3NCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTE0OS4zNjkgODcuMTA3LjE4NSA4Ni42MDMtNzQuMjM5LTQzLjQ2M0wuODkzIDg3LjEwN2w3NC40MjItNDMuMTRMMTQ5LjU1NC41MDV6JyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4=");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
.mask-triangle-4 {
	--mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTUwJyBoZWlnaHQ9JzE3NCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsPSdibGFjaycgZD0nTS42MzEgODcuMTA3LjQ0Ni41MDVsNzQuMjM5IDQzLjQ2MiA3NC40MjIgNDMuMTQtNzQuNDIyIDQzLjE0TC40NDYgMTczLjcxeicgZmlsbC1ydWxlPSdldmVub2RkJy8+PC9zdmc+");

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}





/* -------------------------------------------
	navbar
------------------------------------------- */
.navbar {
	--bs-navbar-padding-x: 0;
	--bs-navbar-padding-y: 0;
	/* Пункты — на РОЛЬ body-color, а не на примитив secondary-700 (был тот же
	   корень, что топил дропдаун до 2.74: примитив не знает про подложку).
	   Дивиденд: dark-переопределение цвета не нужно — роль адаптируется сама. */
	--bs-navbar-color: var(--bs-body-color);
	--bs-navbar-hover-color: rgba(var(--bs-primary-rgb), 1);
	--bs-navbar-disabled-color: rgba(var(--bs-secondary-600-rgb), 0.3);
	/* active-color НЕ переопределяем: дефолт BS уже верный — rgba(--bs-emphasis-color-rgb).
	   Здесь стоял БЕЛЫЙ (наследие тёмной шапки) — и это ломало не только .active:
	   правило BS `.navbar-nav .nav-link.active, .navbar-nav .nav-link.show` красит и
	   ОТКРЫТЫЙ дропдаун, а .show наша заплатка на .active не покрывала → «Категории»
	   при клике становились белыми на белой шапке (контраст 1.04). Чиним основание,
	   а не симптом; роль emphasis адаптируется по теме сама. */
	--bs-nav-link-font-size: 0.875rem;

	/*--bs-navbar-nav-link-padding-x: 0.5rem;*/
	/*--bs-nav-link-padding-x: 0.5rem;*/
	/*--bs-nav-link-padding-y: 0.625rem;*/

	--bs-navbar-toggler-padding-y: var(--space-2xs);
	--bs-navbar-toggler-padding-x: var(--space-2xs);
	--bs-navbar-toggler-font-size: 1.25rem;
	--bs-navbar-toggler-icon-bg: var(--icon-navbar-toggler);
	--bs-navbar-toggler-border-color: var(--bs-blue-200);
	--bs-navbar-toggler-border-radius: var(--bs-border-radius);
	--bs-navbar-toggler-focus-width: 0.25rem;
	--bs-navbar-toggler-transition: box-shadow var(--transition-options-15);

	height: var(--navbar-h);
	/* Фон нельзя ставить на саму .navbar: backdrop-filter создаёт containing
	   block для fixed-потомков, и лежащий внутри .offcanvas схлопнулся бы в
	   полосу высотой с шапку (проверено замером — см. glass-effect). Поэтому
	   стекло живёт в ::after ниже. */
	/* Покой: шапка лежит ЗАПОДЛИЦО со страницей → тени нет (ступень rest),
	   только hairline-грань. Отрыв кодирует .scrolled ниже — тенью, а НЕ
	   плотностью стекла (плотность теперь одна на оба состояния: под шапкой
	   в покое всегда однородный верх страницы, там стекла не видно в принципе —
	   порог .scrolled = 8px, замер 2026-07-16). */
	box-shadow: inset 0 -1px 0 var(--bs-border-color);
	transition: box-shadow .25s ease;
}
.navbar::after {
	content: "";
	/*display: none;*/
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	z-index: -1;
	/* Роль читается здесь напрямую (раньше значение объявлялось на .navbar
	   как --bs-navbar-bg и доезжало сюда наследованием — работало, но точка
	   объявления и точка применения были разнесены, а имя обещало штатную
	   переменную BS, которой нет). */
	background: var(--glass-bar-bg);
	/* Было saturate(160%) blur(16px) числами. Шкала признала ступень 16px
	   (--backdrop-filter-blur-md), saturate унифицирован 160→180: замер показал
	   разницу 0–2.3 ед. RGB при пороге ~3 — вид не изменился. */
	-webkit-backdrop-filter: var(--backdrop-filter-blur-md);
	backdrop-filter: var(--backdrop-filter-blur-md);
}

/* Отрыв при прокрутке: класс .scrolled вешает JS (main.tpl) в обеих темах,
   порог 8px. Состояние кодирует ТОЛЬКО тень — ступень лестницы rest → overlay
   (шапка перестаёт лежать заподлицо и всплывает над контентом). Плотность
   стекла НЕ трогаем: раньше она росла .8 → .95, то есть эффект гас именно
   тогда, когда под шапку заезжал контент и стекло наконец было нужно.
   Тень была хардкодом 0 8px 24px мимо лестницы — теперь ступень overlay.
   Dark-версия — своя, в bs-style.css (перебивает по специфичности). */
.navbar.scrolled {
	box-shadow: inset 0 -1px 0 var(--bs-border-color), var(--bs-box-shadow);
}

/* -------------------------------------------
	navbar offcanvas
------------------------------------------- */
.navbar .offcanvas {
	border-left: none;
}

/* -------------------------------------------
	navbar offcanvas-header
------------------------------------------- */
.navbar .offcanvas-header {}

/* -------------------------------------------
	navbar offcanvas-title
------------------------------------------- */
.navbar .offcanvas-title {}

/* -------------------------------------------
	navbar offcanvas-header btn-close
------------------------------------------- */
.navbar .offcanvas-header .btn-close {}

/* -------------------------------------------
	navbar offcanvas-body
------------------------------------------- */
.navbar .offcanvas-body {
	/* Фон намеренно не задаётся: панель наследует стекло шапки.
	   (Раньше здесь стояла закомментированная ссылка на --bs-navbar-bg —
	   переменной больше нет, роль называется --glass-bar-bg, root.css.) */
}

/* -------------------------------------------
	navbar-toggler
------------------------------------------- */
.navbar-toggler {}

.navbar-toggler-sidebar {
	--bs-navbar-toggler-icon-bg: var(--icon-navbar-toggler-sidebar);
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 .25rem rgba(var(--bs-blue-100-rgb), .5);
}

.navbar-toggler-icon {
	background-size: 60% 60%;
}

/* -------------------------------------------
	navbar-nav
------------------------------------------- */
.navbar-nav {
	/* Единая высота элементов шапки = 36px: 8 + 20 (14px × lh 1.429) + 8.
	   Было 0.875rem (14px) хардкодом → пункт 48px в шапке 56px (86% высоты):
	   pill почти касался краёв, ряд «распирало». Заодно ушло на шкалу —
	   padding-x рядом уже был токеном (узор «шкала есть, хардкод рядом»). */
	--bs-nav-link-padding-x: var(--space-xs);
	--bs-nav-link-padding-y: var(--space-xs);
}

/* ⚠️ Тот же <ul class="navbar-nav"> служит ДВУМ контекстам: он лежит внутри
   .offcanvas-body, а на десктопе (≥992px, navbar-expand-lg) offcanvas раскрыт.
   Значит десктопные 36px уезжали и в мобильное меню — а там это тач-цель:
   36px ниже нормы (44 Apple HIG / 48 Material). Разводим по брейкпоинту:
   в шапке нужен ВОЗДУХ, в меню — ПАЛЕЦ. 12 + 20 + 12 = 44 ✓ */
@media (max-width: 991.98px) {
	.navbar .offcanvas .navbar-nav {
		--bs-nav-link-padding-y: var(--space-sm);
	}
}

.navbar-nav .nav-link {
	line-height: 1.429;
}

/* Пункт-дропдаун («Категории») — раскладка под chevron: сам chevron рисует общее
   правило .navbar .dropdown-toggle::after (bs-style.css), ему нужен flex-родитель
   (у ::after там flex: 0 0 auto). Раньше эту роль играли инлайн-костыли в разметке
   (translate/vertical-align) — элемент был .btn среди пунктов.
   ⚠️ Здесь ЖИЛ мёртвый дубль того же chevron под .nav-link.dropdown-toggle (0
   потребителей: пункта-дропдауна не существовало). Он отличался ОДНИМ — брал
   --icon-chevron-right-WHITE (остаток тёмной шапки) и, будучи специфичнее (0,3,0 >
   0,2,0), ожил бы при переводе «Категорий» в .nav-link и сделал стрелку невидимой
   на светлой шапке. Удалён вместе с парным [aria-expanded] — поворот 90°→270° тоже
   даёт общее правило. */
.navbar-nav .nav-link.dropdown-toggle {
	display: inline-flex;
	align-items: center;
	column-gap: var(--space-2xs);
}

/* Иконка пункта-дропдауна качается на hover — «указатель оживает под курсором».
   Язык шапки уже задан переключателем темы (луна поворачивается на -40°). */
.navbar-nav .nav-link.dropdown-toggle:hover .fa-layer-group {
	animation: navToggleIconWobble .5s ease;
}
@keyframes navToggleIconWobble {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-9deg); }
	50%  { transform: rotate(7deg); }
	75%  { transform: rotate(-4deg); }
	100% { transform: rotate(0deg); }
}

/* -------------------------------------------
	navbar-brand
------------------------------------------- */
.navbar-brand {
	--bs-navbar-brand-font-size: 1.25rem;

	height: var(--navbar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-green-500);
	font-size: var(--bs-navbar-brand-font-size);
	/*font-weight: 900;*/
	letter-spacing: 0.063rem;
	position: relative;
	/*border-radius: var(--bs-border-radius-xl);*/
	transition: color var(--transition-options-15);
}
.navbar-brand:hover {
	color: var(--bs-green-600);
}
@media (min-width: 1807px) {
	.navbar-brand {
		/*max-width: var(--sidebar-max-width);*/
	}
}

/* -------------------------------------------
	brand-mark — ЗНАК БРЕНДА (символ #brand-mark в спрайте)

	Три плитки + галочка: «каталог программ, и он проверен».
	Решения и проверки — __wiki/decisions/brand-mark.md

	⚠️ Цвета — БРЕНД-КОНСТАНТЫ, не адаптивные роли. Замерено 2026-07-18:
	`--bs-primary` и `--bs-success` одинаковы в light и dark — и это верно:
	логотип не должен менять цвет при переключении темы, иначе бренд
	«мигает». Роли `*-text-emphasis` здесь были бы ошибкой (они адаптируются).
	Галочка вынесена в `--tick` — тем же приёмом, что `i-accent` у иконок:
	на цветной подложке знак переводится в один цвет одной переменной.
------------------------------------------- */
.brand-mark {
	--tick: var(--bs-success);

	color: var(--bs-primary);
	flex-shrink: 0;             /* в шапке знак не сплющивается */
	margin-right: var(--space-xs);
}

/* -------------------------------------------
	brand-logo-img
------------------------------------------- */
.brand-logo-img {
	max-width: 104px;
	max-height: 22px;
	/*width: auto;*/
	/*aspect-ratio: 256 / 55;*/
	transition: transform var(--transition-options-25), filter var(--transition-options-25);
}
.navbar-brand:hover .brand-logo-img {
	transform: /*rotate(1deg)*/ translateY(-2px) scale(1.015);
	filter:
		drop-shadow(0 2px 4px rgba(var(--bs-primary-600-rgb), 0.7))
		drop-shadow(0 4px 8px rgba(var(--bs-primary-600-rgb), 0.7))
		drop-shadow(0 8px 16px rgba(var(--bs-primary-600-rgb), 0.3));
}

/* -------------------------------------------
	brand-tagline
------------------------------------------- */
.brand-tagline {
	--bs-secondary-text-emphasis: var(--bs-secondary-950);
	--bs-secondary-bg-subtle: rgba(var(--bs-secondary-200-rgb), 0.6);
	--bs-secondary-border-subtle: rgba(var(--bs-secondary-200-rgb), 0.6);
	--bs-info-text-emphasis: var(--bs-info-950);
	--bs-info-bg-subtle: rgba(var(--bs-info-200-rgb), 0.6);
	--bs-info-border-subtle: rgba(var(--bs-info-200-rgb), 0.6);
	/*--brand-tagline-color: var(--bs-info-text-emphasis);*/

	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	/*color: var(--brand-tagline-color) !important;*/
	font-size: 10px;
	line-height: 1.1;
	font-weight: 600;
	/*letter-spacing: 0.063rem;*/
	letter-spacing: 0;
	bottom: 0;
	left: 50%;
	position: absolute;
	z-index: 1021;
	transform: translate(-50%, 50%) !important;
	border-radius: var(--radius-pill);

	-webkit-backdrop-filter: var(--backdrop-filter-blur-sm);
	backdrop-filter: var(--backdrop-filter-blur-sm);
}

/* -------------------------------------------
	theme-toggle — кнопка-клавиша, утопленная в стекло шапки.
	Форма/гнездо/контур/hover — в обеих темах (консистентность при
	переключении); свечение иконки — только dark (bs-style.css).
	Значения из конструктора (согласовано 2026-07-10).
------------------------------------------- */
#themeToggle {
	--tt-nest: .27;
	/* 36px — единая высота элементов шапки (пункты, «Категории», переключатель). */
	width: 36px;
	height: 36px;
	padding: 0;
	flex: none;
	display: inline-grid;
	place-items: center;
	font-size: 15px;
	cursor: pointer;
	/* Канон вместо процента: 30% был ЕДИНСТВЕННЫМ процентным радиусом в теме
	   (30% от 36px = 10.8px). Ступень --radius-sm (10px) описана ровно под этот
	   случай — «мелкие варианты: .btn-sm, поля-sm, навигация/пагинация»; разница
	   0.8px неразличима → признаём факт (как вес бейджа 600→700).
	   + squircle на канонной переменной — рифма с pill активного пункта. */
	border-radius: var(--radius-sm);
	corner-shape: superellipse(var(--corner-shape));
	/* Контур — на РОЛИ, а не на чёрном примитиве. Было rgba(0,0,0,.5) шириной
	   0.1px: комментарий обещал «контур в обеих темах для консистентности», но
	   одно значение давало ПРОТИВОПОЛОЖНОЕ — замер к фону шапки: light 3.92
	   (жёсткий тёмный контур), dark 1.17 (почти не видно). Роль симметрична по
	   восприятию: light 1.22 (лёгкая серая), dark 2.10. Вдавленность («гнездо»,
	   --tt-nest) не трогаем — её дают inset-тени ниже. */
	border: var(--bs-border-width) solid var(--bs-border-color);
	/* Подложка — В ТОН шапке, тот же рецепт, что у pill активного пункта
	   (rgba(primary-400, α)), только ТИШЕ: .10 против .16 — служебная кнопка не
	   должна кричать громче, чем «где я нахожусь».
	   Было rgba(0,0,0, .14) — чёрный примитив, и он давал ДВЕ беды сразу:
	   (1) НЕЙТРАЛЬНО-СЕРОЕ пятно (214,216,219) посреди голубоватой гаммы шапки;
	   (2) заметность light 1.38 — ГРОМЧЕ активного пункта (1.15), иерархия
	   перевёрнута. В dark то же значение давало 1.06 (тонуло) — третий случай
	   «одно значение, противоположный результат» после контура и active-color.
	   Буквально «сделать светлой» (проверено) сломало бы dark: gray-50 → 14.93,
	   белый круг на тёмной шапке. Полупрозрачный ЦВЕТ адаптируется сам — сквозь
	   него просвечивает фон темы: 1.09 light / 1.18 dark, ниже pill в ОБЕИХ.
	   Вдавленность («гнездо») не трогаем — выбивал цвет, не форма. */
	background: rgba(var(--bs-primary-rgb), .10);
	box-shadow:
		inset 0 1.5px 3px rgba(0, 0, 0, calc(var(--tt-nest) * .9)),
		inset 0 -1px 1px rgba(255, 255, 255, calc(var(--tt-nest) * .14)),
		0 1px 0 rgba(255, 255, 255, .06);
	transition: transform var(--transition-options-25), box-shadow var(--transition-options-25), border-color var(--transition-options-25);
}
/* ⚠️ Носитель поворота — сам <svg>, НЕ #themeToggleIcon.
   С переходом на SVG id `themeToggleIcon` переехал на <use> (его дёргает JS,
   подменяя href: #i-moon ⇄ #i-sun). Вращать <use> НЕЛЬЗЯ: у элементов внутри SVG
   transform-origin по умолчанию — точка 0,0 системы координат, а не центр, как
   у HTML-элементов. Иконка уходила за пределы кнопки и обрезалась overflow
   (симптом владельца: «уезжает за края, поворачивается одним краем»).
   <svg> — replaced-элемент, вращается вокруг своего центра, как раньше <i>. */
#themeToggle .icon {
	position: relative; /* для оптического сдвига солнца в dark (top задаётся там) */
	color: var(--bs-indigo-500); /* луна (light) — прохладный «ночной»; солнце (dark) — тёплый, см. bs-style.css */
	transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
/* Угол подобран ПОД СВОЮ геометрию луны (кадр с вариантами, выбор владельца).
   Прежние −40° писались под иконку FA с другой ориентацией рогов: на нашей луне
   тот же угол опрокидывал её рогами вверх — получалась «чаша», а не луна.
   +25°: движение заметное, силуэт узнаваем, наклон читается как «клонит в сон». */
#themeToggle:hover .icon {
	transform: rotate(25deg);
}

/* -------------------------------------------
	logo-animated
------------------------------------------- */
.logo-animated {
	animation-duration: 13s;
	animation-fill-mode: both;

	animation-name: logoAnim;

	animation-delay: 1s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

@keyframes logoAnim {
	0% {
		transform: translate3d(0px, 0px, 0px);
	}

	15% {
		transform: translate3d(0px, 3px, 0px);
	}

	30% {
		transform: translate3d(0px, -5px, 0px);
	}

	45% {
		transform: translate3d(0px, 3px, 0px);
	}

	60% {
		transform: translate3d(0px, -2px, 0px);
	}

	80% {
		transform: translate3d(0px, 3px, 0px);
	}

	95% {
		transform: translate3d(0px, -2px, 0px);
	}

	100% {
		transform: translate3d(0px, 0px, 0px);
	}
}



/* -------------------------------------------
	hero-section
------------------------------------------- */
.hero-section {
	/*background: var(--bs-gray-700) url("../images/hero-section.webp") no-repeat center center;*/
	/*background-size: cover;*/
}
.hero-section-box {
	min-height: calc(100vh - var(--navbar-h));
	/*max-height: 360px;*/
	display: flex;
	align-items: center;
	/*background: rgba(var(--bs-gray-800-rgb), 0.5);*/
	/*-webkit-backdrop-filter: var(--backdrop-filter-blur-smlr);*/
	/*backdrop-filter: var(--backdrop-filter-blur-smlr);*/
}
@media (max-width: 767.98px) {
	.hero-section-box {
		max-height: 100%;
		text-align: center;
	}
}
@media (max-width: 575.98px) {
	.hero-section-box {}
}
/* Плашка-анонс над заголовком hero — одиночная, капсульная.
   Цвет/фон/рамку задаёт сама (носитель без .text-bg-*-outline). */
.hero-section-badge {
	--box-shadow-color: var(--bs-primary-200-rgb);
	display: inline-flex;
	align-items: center;
	color: var(--bs-primary-text-emphasis);
	border: 1px solid var(--bs-primary-border-subtle);
	background: var(--bs-primary-bg-subtle);
	box-shadow: var(--bs-box-shadow-sm);
	border-radius: var(--bs-border-radius-pill);
}

/* Бейджи доверия под статами — ряд из трёх, скруглённый прямоугольник.
   ⭐ Отдельный класс намеренно: у одиночной плашки-анонса и у ряда бейджей
   разный характер, и раньше эту разницу держала утилита `rounded-3` в разметке —
   класс задавал pill, а утилита его перебивала (живое по CSSOM, мёртвое по
   эффекту). Теперь вид закреплён ИМЕНЕМ. Значение то же: `rounded-3` = `-lg`
   = `--radius-lg`, то есть пиксели не изменились, изменилась устойчивость.
   ⚠️ Цвет/фон/рамку НЕ задаём — их даёт `.text-bg-*-outline` с `!important`
   (в старом классе они дублировались, а на зелёном бейдже были мертвы). */
.hero-section-trust {
	--box-shadow-color: var(--bs-primary-200-rgb);
	display: inline-flex;
	align-items: center;
	box-shadow: var(--bs-box-shadow-sm);
	border-radius: var(--bs-border-radius-lg);
}
.hero-section-title {
	font-size: var(--text-display-sm);   /* 48px */
	line-height: 1.2;
	font-weight: 900;
	color: var(--bs-heading-color, var(--bs-secondary-950));
	margin-top: 0;                       /* сброс заголовочной отбивки h1 */
	margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
	.hero-section-title {
		font-size: var(--text-display-lg);   /* 72px */
		/*line-height: 1;*/
	}
}
/* span, а не div: сидит внутри h1, куда блочные элементы класть нельзя
   (заголовок принимает только строчный контент). Перенос строки, который
   раньше давал div, держим display: block. */
.hero-section-title-grd {
	display: block;
	background: linear-gradient(to right, var(--bs-blue-600), var(--bs-purple-600), var(--bs-pink-600));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-section-card {
	text-align: center;
	border: 1px solid var(--bs-border-color);
	background: rgba(var(--bs-body-bg-rgb), 0.8);
	box-shadow: var(--bs-box-shadow-sm);
	border-radius: var(--bs-border-radius-xl);
	corner-shape: superellipse(var(--corner-shape));
}

/* -------------------------------------------
	cats-section
------------------------------------------- */
.cats-section {
}
.cats-section-box {
	border-top: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
}
@media (max-width: 767.98px) {
	.cats-section-box {}
}
@media (max-width: 575.98px) {
	.cats-section-box {}
}
/* .cats-section-badge удалён 2026-07-18: 0 носителей в шаблонах, БД и плагинах
   (контроль отрицания пройден: тот же запрос находит `bd-callout` в 106 постах).
   Был дословным дублем .hero-section-badge. Понадобится плашка в секции
   категорий — брать общий класс бейджа, а не заводить вторую копию правил. */

.cats-section-card {
	color: var(--bs-body-color);
	text-decoration: none;
	border: 2px solid var(--bs-border-color);
	background: rgba(var(--bs-body-bg-rgb), 0.8);
	box-shadow: var(--bs-box-shadow-sm);
	border-radius: var(--bs-border-radius-xl);
	corner-shape: superellipse(var(--corner-shape));
	transition: color var(--transition-options-15), border-color var(--transition-options-15);
}

.cats-section-card:hover {
	color: var(--bs-link-color);
	text-decoration: none;
	border-color: var(--bs-primary-400);
}

/* h3 + класс роли — тот же паттерн, что .short-story-title: тег несёт семантику,
   класс метрику. Кегль и вес прежде приезжали утилитами (fs-5 fw-900) прямо из
   разметки — вне системы: роль заголовков (--bs-heading-color) до span не
   доходила, и сдвиг базы текста ронял плитки вместе с обычным текстом. */
.cats-section-card-title {
	display: block;
	font-size: var(--text-h4);   /* 20px — было fs-5, та же ступень */
	font-weight: 900;
	line-height: var(--lh-ui);   /* 1.4 */
	margin-top: 0;               /* сброс заголовочной отбивки h3 */
	margin-bottom: 0;
	letter-spacing: -1px;
}

/* -------------------------------------------
	short-story-def — карточка листинга рейтингов, блога, сравнений
------------------------------------------- */
/* Баннер во всю ширину сверху, под ним заголовок и описание (выбор владельца
   2026-07-19, вариант «В» на полигоне). Прежняя раскладка — превью 220px сбоку —
   отменена замером: обложка 1200×630 в такой ширине давала кегль бренда ≈12px,
   баннер 1200×220 во всю ширину даёт ≈45px при почти той же высоте карточки.
   Картинку в блок подставляет плагин [post-images] тегом {post-thumb}: он берёт
   баннер <id>-banner.png, если тот сгенерирован парой к обложке <id>-og.png. */
.short-story-row {
	display: block;
}
.short-story-thumb {
	margin-bottom: var(--space-sm);
}
/* ⚠️ У постов без картинки блок пуст — схлопываем, иначе он держит пустой отступ.
   Пустым он остаётся и когда плагин не нашёл картинку в кратком описании. */
.short-story-thumb:empty {
	display: none;
}
.short-story-thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--bs-border-radius-lg);
	border: 1px solid var(--bs-border-color);
}
.short-story-body {
	min-width: 0;   /* иначе длинный заголовок распирает элемент */
}
/* Описание поста: тег {post-lead} плагина — краткое описание без картинок. */
.short-story-lead {
	color: var(--bs-secondary-text-emphasis);
}

/* Отбивка первой карточки от вводного текста категории (замечание владельца 2026-07-20:
   «у блога отступ пропал между текстом и картинкой первой новости»).
   Корень: вводный текст выводится как <div class="lead"> (main.tpl), а правило .lead
   в bs-style.css задаёт кегль и цвет, но НЕ нижний отступ — у <div>, в отличие от <p>,
   своего margin нет. В каталоге зазор приезжал СЛУЧАЙНО, от утилиты mt-3 на карточках
   сетки; у строчных карточек этого шаблона mt-3 нет — отсюда 0px.
   Замер по всем 10 листингам с вводным текстом: 16px везде, кроме блога и рейтингов (0).
   ⚠️ Лечим НЕ через .lead {margin-bottom}: замер показал, что отступы складываются, и
   каталог получил бы 32px вместо 16. И не через .row {row-gap}: там он сложился с зазором
   карточек (32 → 48).
   Селектор через .short-story-row — тот же приём, что у .short-story-title ниже: класс
   живёт только в shortstory-def.tpl, поэтому правка не выходит за блог/рейтинги/сравнения
   (контроль: в каталоге расстояние до заголовка карточки не изменилось — 139px при обоих
   пробных значениях). Значение — «между блоками» по шкале, совпадает с зазором между
   карточками (32px), как в каталоге совпадает 16/16. */
.row > article:first-child .short-story-row {
	margin-top: var(--space-xl);   /* 32px */
}

/* Заголовок карточки контентных разделов — на ступень выше базового (20 → 24px).
   ⚠️ Селектор через .short-story-row НАМЕРЕННО: класс .short-story-title общий для
   ТРЁХ шаблонов (карточка обзора в каталоге и на главной, блок «Аналоги»), а
   .short-story-row живёт только в shortstory-def.tpl — то есть правка не выходит
   за блог/рейтинги/сравнения.
   Зачем: замечание владельца «заголовок кажется маленьким». Замер: надпись на баннере
   давала 39px против 20px у заголовка — отношение 1.96, картинка спорила с заголовком.
   Лечим с двух сторон: кегль бренда на баннере вниз (генератор) + заголовок на ступень
   вверх. Стало 28px против 24px = 1.16. */
.short-story-row .short-story-title {
	font-size: var(--text-h3);   /* 24px */
}

/* -------------------------------------------
	contentbar
------------------------------------------- */
.contentbar {}
@media (min-width: 1807px) {
	.contentbar {
		/*width: var(--contentbar-max-width);*/
	}
}



/* -------------------------------------------
	content-container
------------------------------------------- */
.content-container {
	/*min-height: var(--cont-fix-h-100vh);*/
	background: var(--bs-body-bg);
	border-bottom-left-radius: var(--bs-border-radius-xl);
	border-bottom-right-radius: var(--bs-border-radius-xl);
	corner-shape: superellipse(var(--corner-shape));
}

/* -------------------------------------------
	content
------------------------------------------- */
.content {}
.content > p:last-child,
.content > ul:last-child,
.content > ol:last-child,
.content > blockquote p:last-child {
	margin-bottom: 0;
}

/* Inline-код: нейтральная плашка (серый фон, без границы) вместо BS-розового */
code {
	background: var(--bs-secondary-bg-subtle);
	color: var(--bs-secondary-text-emphasis);
	padding: .12em .4em;
	border-radius: .35em;
	font-size: .88em;
}

/* Выделение маркером: жёлтая подсветка под палитру (warning) */
mark {
	background: var(--bs-warning-bg-subtle);
	color: var(--bs-warning-text-emphasis);
	padding: .05em .3em;
	border-radius: .25em;
}

/* -------------------------------------------
	short-story
------------------------------------------- */
.short-story {
	position: relative;
	margin-top: var(--space-xl);
}
.short-story::before {
	content: "";
	position: absolute;
}


.short-story:first-child {
	margin-top: 0;
}

.short-story:last-child p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------
	short-story-title (заголовок карточки каталога)
	UI-точка клика, единый для карточки программы и статьи.
	Роль h4/20 + вес 700 (см. root.css --text-h4), НЕ контентный h2.
	Носитель может быть и не заголовком: в блоке «Аналоги» карточка —
	навигация, там div (см. fullstory-reviews-relative-news.tpl).
------------------------------------------- */
.short-story-title {
	font-size: var(--text-h4);   /* 20px */
	font-weight: 700;
	line-height: var(--lh-ui);   /* 1.4 */
	margin-top: 0;               /* сброс заголовочной отбивки h2 */
}

/* -------------------------------------------
	short-story-title-sm — компактный вариант карточки (блок «Аналоги»).
	Кегль тот же, что давала утилита fs-6, но приезжает из шкалы:
	--text-ui = --fs-sm = 16px («вторичный текст, база UI»).
	Значение было здоровым — врало имя (fs-6 совпал со ступенью случайно).
	Модификатор идёт ПОСЛЕ базового класса: специфичность равна (0,1,0),
	решает порядок в файле — как у модификаторов Bootstrap.
------------------------------------------- */
.short-story-title-sm {
	font-size: var(--text-ui);   /* 16px */
}

/* -------------------------------------------
	short-story-cat — метка категории на карточке.
	⚠️ Класс НЕ ищется грепом по .tpl: его отдаёт наш плагин [sub-cat-link]
	(живёт в БД, dle_plugins). В шаблонах ищи сам тег [sub-cat-link].
	Метка — мета-информация о карточке, не вторая ссылка-заголовок:
	тише заголовка кеглем и цветом, подчёркивание только на ховер.
	Носитель бывает двух видов, стиль общий:
	  a  — ссылка на ЧПУ подкатегории (главная, /obzory/, «Аналоги», сайдбар);
	  span — в листинге СВОЕЙ категории, где ссылка вела бы на текущий URL.
------------------------------------------- */
.short-story-cat {
	font-size: var(--text-ui-sm);            /* 14px, было 15.75 от утилиты .small */
	color: var(--bs-secondary-text-emphasis); /* приглушённый, но читаемый: 5.29 / 8.06 */
	text-decoration: none;
}
a.short-story-cat:hover {
	color: var(--bs-link-hover-color);
	text-decoration: underline;
}

/* -------------------------------------------
	СВОЙ НАБОР ИКОНОК (штриховой). Спрайт: images/icons.svg
	Свод правил и границы — __wiki/decisions/icon-system.md

	Размер иконки задаёт КЕГЛЬ соседнего текста (1em) — поэтому утилиты
	Bootstrap `fs-*` продолжают работать так же, как работали с <i class="fa-*">.
	Цвет — currentColor, то есть приезжает от роли текста, а не задаётся здесь.
------------------------------------------- */
.icon {
	--icon-stroke: 2;

	width: 1em;
	height: 1em;
	vertical-align: -0.125em;   /* посадка на базовую линию рядом с текстом */
	flex-shrink: 0;             /* во flex-строке иконка не сплющивается */

	fill: none;
	stroke: currentColor;
	stroke-width: var(--icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Оптическая коррекция: на мелком кегле штрих 2 выглядит бледнее заливки,
   на крупном — наоборот тяжелит. Правило набора, не вкус (см. пилот 2026-07-18). */
.icon-sm  { --icon-stroke: 2.25; }   /* 16px и мельче */
.icon-lg  { --icon-stroke: 1.75; }   /* 40px и крупнее */

/* Двухцветность: акцентная часть символа (class="i-accent" внутри symbol).
   По умолчанию совпадает с основным цветом — иконка выглядит одноцветной,
   пока акцент не задан явно у носителя. CSS-переменные проникают в shadow DOM
   от <use>, поэтому это работает и с внешним спрайтом. */
.icon .i-accent {
	stroke: var(--icon-accent, currentColor);
}

/* -------------------------------------------
	short-story-title-icon — УДАЛЁН 2026-07-18 (волна 4 иконок)

	Класс носил зелёный маркер перед заголовком карточки в
	shortstory-def.tpl — иконку `fa-disease` (ВИРУС), дефолт исходной
	темы. Один маркер обслуживал три раздела сразу (рейтинги, сравнения,
	блог) и ничего о них не сообщал, а на сайте про безопасность значок
	заразы рядом с «Лучшие бесплатные PDF-ридеры» читался наоборот.
	Решение владельца — убрать маркер совсем, а не заменять символом.
	Вместе с ним ушли правило `.short-story-title-icon i {color}`
	(оно всё равно умерло бы: селектор целился в тег `i`) и пустой
	блок-заготовка. Заголовок остался `.short-story-title` — ссылка,
	которой маркер не требуется.
------------------------------------------- */

/* -------------------------------------------
	btn-anim
------------------------------------------- */
.btn-anim {
	animation-duration: 1.25s;
	animation-fill-mode: both;

	animation-name: btnAnim;

	animation-delay: 1s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;

	transform-origin: bottom center;
}

@keyframes btnAnim {
	10% {
		transform: rotate3d(0, 0, 1, 1deg);
	}

	25% {
		transform: rotate3d(0, 0, 1, -1deg);
	}

	40% {
		transform: rotate3d(0, 0, 1, 1deg);
	}

	65% {
		transform: rotate3d(0, 0, 1, -1deg);
	}

	80% {
		transform: rotate3d(0, 0, 1, 0deg);
	}
}

/* -------------------------------------------
	btn-anim-heartBeat
------------------------------------------- */
.btn-anim-heartBeat {
	animation-duration: 1.75s;
	animation-fill-mode: both;

	animation-name: btn-anim-heartBeat;

	animation-delay: 1s;
	/*animation-timing-function: ease;*/
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes btn-anim-heartBeat {
	0% {
		transform: scale(1);
	}

	14% {
		transform: scale(1.03);
	}

	28% {
		transform: scale(1);
	}

	42% {
		transform: scale(1.03);
	}

	70% {
		transform: scale(1);
	}

	100% {
		transform: scale(1);
	}
}

/* -------------------------------------------
	next-prev
------------------------------------------- */
.next-prev {
	/*display: flex;*/
}
.next-prev a {
	display: block;
	color: var(--bs-info-600);
	text-align: center;
	text-decoration: none;

	padding: var(--space-md);
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-info-100);
	background-color: var(--bs-info-50);
	border-radius: var(--bs-border-radius-xl);
	corner-shape: superellipse(var(--corner-shape));

	transition: color var(--transition-options-15), border-color var(--transition-options-15), background-color var(--transition-options-15);
}
.next-prev a:hover {
	color: var(--bs-info-700);
	border-color: var(--bs-info-200);
	background-color: var(--bs-info-100);
}



/* ----------------------------------------
	program-short-container
---------------------------------------- */
.program-short-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	border: 1px solid rgba(var(--bs-gray-50-rgb), 1);
	background: var(--bs-white);
	border-radius: var(--bs-border-radius-lg);
	corner-shape: superellipse(var(--corner-shape));
}

/* ----------------------------------------
	program-icon
---------------------------------------- */
.program-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.program-icon img {
	max-width: 90px;
}

/* ----------------------------------------
	fullstory-prose (long-form статья)
	Ограничение measure: у статьи нет sidebar-колонки (в отличие от обзора
	в col-md-8), поэтому текст растягивался на всю ширину. Держим ~70 симв.
---------------------------------------- */
.fullstory-prose {
	max-width: var(--measure-prose);
	margin-inline: auto;
}

/* ----------------------------------------
	Зона чтения: тело статьи (.fullstory-prose) и тело обзора (таб «Обзор»).
	text-wrap: pretty — против висячего слова в конце абзаца. В отличие от
	balance (герой-роли, h1/.lead в bs-style.css) работает на длинных текстах
	и дёшев. Замер 2026-07-16 на живом обзоре: висячих слов на десктопе
	8 из 29 → 4; на мобильной ширине 17 → 14.
	Заголовкам тела pretty не нужен — им хватает переносов (см. root.css/body).
---------------------------------------- */
.fullstory-prose p,
#review-tab-pane p {
	text-wrap: pretty;
}

/* ----------------------------------------
	fullstory-program-head
---------------------------------------- */
/* Имя программы в h1 — всегда тёмный заголовок, даже если в допполе
   btn_prog_name оно занесено ссылкой (у части программ это self-ссылка на
   саму страницу). Ссылка остаётся кликабельной, но не красится/не
   подчёркивается как ссылка — h1 не должен выглядеть синим. */
.fullstory-program-head h1 a {
	color: var(--bs-heading-color, var(--bs-secondary-950));
	text-decoration: none;
}

/* ----------------------------------------
	fullstory-program-head-icon
---------------------------------------- */
.fullstory-program-head-icon img {
	max-width: 90px;
	width: 90px;
}

/* ----------------------------------------
	program-rating
---------------------------------------- */
.program-rating {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
}

/* ----------------------------------------
	program-specs
---------------------------------------- */
.program-specs {
	/* Роли, не примитивы: примитивы едины для обеих тем — на info-50/100
	   сайдбар оставался светлым в dark (заголовок 1.00, текст 1.24). */
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-info-border-subtle);
	background-color: var(--bs-info-bg-subtle);
}

/* ----------------------------------------
	safety-scan-badge
---------------------------------------- */
/* Подзаголовок блока сканирования. НЕ заголовок по семантике (в оглавление не идёт —
   см. решение по табам и врезкам), поэтому тег `div`, а метрика — классом.
   Было `fs-5`: утилита BS с ХАРДКОДОМ `1.25rem !important`, мимо шкалы кеглей.
   ⚠️ Отличие от `rounded-3`, который оказался на нашей шкале через мост
   `--bs-border-radius-lg`: у `fs-*` такого моста нет, мы их не переопределяем.
   Пиксели те же (20px = ступень --text-h4), меняется устойчивость к правке шкалы. */
.safety-scan-title {
	font-size: var(--text-h4);
	font-weight: 700;
}

.safety-scan-badge {
	width: 100%;
	height: 100%;
}
/* Трек кольца — роль, а не примитив. На `gray-50` он в dark давал 14.26 к фону:
   белое кольцо кричало громче зелёной дуги. Пряталось за дугой только при высокой
   оценке (99 ≈ полный круг) и вылезало бы на первой же низкой — проверено кадром
   с моделью оценки 45. Роль адаптируется: 1.35 light / 2.01 dark — трек тихий в обеих. */
.safety-scan-badge-circle {
	stroke-width: 8px;
	stroke: var(--bs-border-color);
}
.safety-scan-badge-path {
	stroke-width: 8px;
	stroke: var(--bs-green-600);
	stroke-linecap: round;
}
.safety-scan-badge-text-1 {
	/* Роль «акцент»: в light та же ступень (gray-950), в dark становится
	   светлой — на примитиве число оценки пропадало (1.16). */
	fill: var(--bs-emphasis-color);
	font-size: 1.75rem;
	font-weight: 600;
}
.safety-scan-badge-text-1 tspan tspan {
	font-size: 0.75rem;
}
/* «/100» — вторичный текст, значит роль вторичного текста, а не примитив.
   На `gray-600` давало 3.49 в light (провал AA 4.5) и 4.46 в dark — впритык.
   Роль: 5.29 / 8.06. Тот же рецепт, что у подписей hero-статов и крошек —
   ⚠️ НЕ `--bs-secondary-color` (тот muted 2.87, приглушён осознанно). */
.safety-scan-badge-text-2 {
	fill: var(--bs-secondary-text-emphasis);
	/*font-family: Inter, Arial Fallback, arial, sans-serif;*/
	font-size: .75rem;
}

/* ----------------------------------------
	poster-choice & poster-rating
---------------------------------------- */
.poster-choice,
.poster-rating {
	color: var(--bs-white);
	text-align: center;
	font-weight: 900;
	top: 0.5rem;
	position: absolute;
	z-index: 3;
	box-shadow:
			0 0 0 2px rgba(0, 0, 0, 0),
			0 1px 2px 0 rgba(0, 0, 0, 0.1),
			0 2px 4px 0 rgba(0, 0, 0, 0.1),
			0 4px 8px 0 rgba(0, 0, 0, 0.1);
	border-radius: var(--bs-border-radius-sm);
	corner-shape: superellipse(var(--corner-shape));
	-webkit-backdrop-filter: var(--backdrop-filter-blur-smlr);
	backdrop-filter: var(--backdrop-filter-blur-smlr);
}
.poster-choice {
	font-size: 0.75rem;
	left: 0.5rem;
	padding: 0.25rem 0.563rem;
	background: rgba(var(--bs-primary-rgb), 0.9);
}

.poster-rating {
	line-height: 1;
	right: 0.5rem;
	padding: 0.563rem 0.5rem 0.313rem;
	background: rgba(var(--bs-danger-600-rgb), 0.99);
}

/* ----------------------------------------
	poster-rating-icons
---------------------------------------- */
.poster-rating-icons {
	color: var(--bs-warning-300);
	font-size: 0.313rem;
	margin-bottom: 0.188rem;
}

/* ----------------------------------------
	article-head-info
---------------------------------------- */
.article-head-info {
	/*--navbar-bg: #13111c;*/
	/*--navbar-bg-rgb: 19, 17, 28;*/

	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*background: rgba(var(--bs-white-rgb), 0.3);*/
	border-radius: var(--bs-border-radius);
	corner-shape: superellipse(var(--corner-shape));
}





/* Стили для кнопки "Вверх" */
.back-to-top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 60px;
	height: 60px;
	/*background: linear-gradient(135deg, #3498db, #2980b9);*/
	background: linear-gradient(135deg, rgba(var(--bs-teal-400-rgb), 1), rgba(var(--bs-teal-600-rgb), 1));
	color: white;
	border: none;
	border-radius: var(--radius-circle);
	cursor: pointer;
	font-size: 24px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all var(--transition-options-25);
	z-index: 1000;
	box-shadow: var(--bs-box-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-to-top:hover {
	/*background: linear-gradient(135deg, #2980b9, #1c5a7a);*/
	background: linear-gradient(135deg, var(--bs-green-500), var(--bs-green-700));
	transform: translateY(-3px);
	box-shadow: var(--bs-box-shadow-lg);
}

.back-to-top:active {
	transform: translateY(0);
}

.back-to-top.show {
	opacity: 0.8;
	visibility: visible;
	transform: translateY(0);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
	.back-to-top {
		width: 50px;
		height: 50px;
		bottom: 20px;
		right: 20px;
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.back-to-top {
		width: 45px;
		height: 45px;
		bottom: 15px;
		right: 15px;
		font-size: 18px;
	}
}


/* Анимация исчезновения кнопки */
@keyframes backToTopHide {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(20px);
	}
}

.back-to-top {
	animation: backToTopHide 0.2s ease forwards;
}

/* Анимация появления кнопки */
@keyframes backToTopShow {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.back-to-top.show {
	animation: backToTopShow 0.3s ease forwards;
}

/* ----------------------------------------
	cookies
---------------------------------------- */
.cookie-banner {
	position: fixed;
	bottom: 10px;
	left: 20px;
	right: 20px;
	z-index: 999;
	/*background: #2c3e50;*/
	background: rgba(var(--bs-gray-950-rgb), 0.95);
	border-radius: var(--bs-border-radius-xl);
	corner-shape: superellipse(var(--corner-shape));
	box-shadow: var(--bs-box-shadow);
	color: white;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	transform: translateY(200%);
	transition: transform 0.5s ease, background 0.25s ease;


	-webkit-backdrop-filter: var(--backdrop-filter-blur-sm);
	backdrop-filter: var(--backdrop-filter-blur-sm);
}
.cookie-banner:hover {
	background: rgba(var(--bs-gray-950-rgb), 1);
}

.cookie-banner.show {
	transform: translateY(-10px);
}

.cookie-banner p {
	margin: 0;
}

.cookie-banner span {
	font-size: 0.9em;
	opacity: 0.8;
	display: block;
	margin-top: 5px;
}





/* ----------------------------------------
	table-max-height
---------------------------------------- */
.table-max-height {
	/*--table-height: 752px;*/
	--table-height: 654px;

	max-height: var(--table-height);
}

/* ----------------------------------------
	thead-col1-sticky
---------------------------------------- */
.thead-col1-sticky table {}

.thead-col1-sticky thead {
	top: 0;
	position: sticky;
	z-index: 2;
}

/*.thead-col1-sticky :not(caption) > * > *:not([colspan]):first-child*/
.thead-col1-sticky thead > * > *:not([colspan]):first-child,
.thead-col1-sticky tfoot > * > *:not([colspan]):first-child,
.thead-col1-sticky tbody > * > *:first-child {
	left: 0;
	position: sticky;
	z-index: 1;
}
.thead-col1-sticky thead > * > *:not([colspan]):first-child {
	z-index: 2;
}

.cell-sticky-x {
	/*left: 0;*/
	position: sticky;
	z-index: 1;
}
.cell-subs {
	/*left: var(--vwcelldate);*/
}
.cell-rebills {
	/*left: calc(var(--vwcelldate) + var(--vwcellsubs));*/
}
.cell-subs .badge,
.cell-rebills .badge {
	/*display: none !important;*/
}

/* ----------------------------------------
	td-cont
---------------------------------------- */
.td-cont,
.td-cont-center {
	display: flex;
	align-items: center;
}
.td-cont-center {
	justify-content: center;
}
.td-cont > *,
.td-cont-center > * {
	align-self: center;
}
@media (max-width: 1499.98px) {}
@media (max-width: 1399.98px) {}



/* -------------------------------------------
	auth-container
------------------------------------------- */
.auth-container {}

/* -------------------------------------------
  auth-content
------------------------------------------- */
.auth-content {}

/* -------------------------------------------
  auth-title
------------------------------------------- */
.auth-title {}

/* -------------------------------------------
  auth-title-tagline
------------------------------------------- */
.auth-title-tagline {}

/* -------------------------------------------
  form-auth-btn
------------------------------------------- */
.form-auth-btn {}

/* -------------------------------------------
	form-signin
------------------------------------------- */
.form-signin {}

.form-signin .form-floating:focus-within {
	z-index: 2;
}

.form-signin .form-floating:first-child input {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.form-signin .form-floating .invalid-tooltip {
	font-size: 0.75rem;
	left: 50%;
	margin-top: 0;
	padding: 0.25rem 0.625rem;
	transform: translate(-50%,-50%)!important;
	border-radius: var(--bs-border-radius-sm);
}

.form-signin .form-floating:first-child .invalid-tooltip {
	top: auto;
	bottom: 100%;
	margin-top: 0;
	transform: translate(-50%,50%)!important;
}





/* ----------------------------------------
	comments-container
---------------------------------------- */
.comments-container {}

/* ----------------------------------------
	dle-comments-list
---------------------------------------- */
#dle-comments-list > div {
	margin-top: var(--space-xl);
}
#dle-comments-list > div:nth-child(1),
#dle-comments-list > div:nth-child(2),
#dle-comments-list > div:nth-child(3) {
	margin-top: 0;
}

/* ----------------------------------------
	comment-container
---------------------------------------- */
.comment-container {
	border: 1px solid var(--bs-gray-50);
	border-radius: var(--bs-border-radius);
	corner-shape: superellipse(var(--corner-shape));
}

/* ----------------------------------------
	comment-head-container
---------------------------------------- */
.comment-head-container {
	display: flex;
	align-items: baseline;
	margin-right: auto;
	margin-bottom: var(--space-lg);
}

/* ----------------------------------------
	comment-head
---------------------------------------- */
.comment-head {
	display: inline-flex;
	align-items: baseline;
	margin-right: auto;
}

/* ----------------------------------------
	comment-author
---------------------------------------- */
.comment-author {}

/* ----------------------------------------
	comment-date
---------------------------------------- */
.comment-date {
	color: var(--bs-secondary-300);
}

/* ----------------------------------------
	comment-link
---------------------------------------- */
.comment-link {}

/* ----------------------------------------
	comment-link-list
---------------------------------------- */
.comment-link-list {
	font-size: 0.875em;
	margin-bottom: 0;
}

/* ----------------------------------------
	comment-content
---------------------------------------- */
.comment-content {}

/* ----------------------------------------
	title_quote
---------------------------------------- */
.title_quote {
	font-weight: 300;
	/*padding-bottom: 0;*/
	margin-bottom: 0;
	border-bottom: 0.063rem solid var(--bd-callout-border, var(--bs-gray-300))
}

/* ----------------------------------------
	quote
---------------------------------------- */
.quote {}
.title_quote + .quote {
	margin-top: 0;
}

/* ----------------------------------------
	add-comment-title
---------------------------------------- */
.add-comment-title {
	text-align: center;
}

/* ----------------------------------------
	bb-editor textarea
---------------------------------------- */
.bb-editor textarea {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--bs-body-bg);
	background-clip: padding-box;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	corner-shape: superellipse(var(--corner-shape));
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.bb-editor textarea {
		transition: none;
	}
}
.bb-editor textarea:focus {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border-color: var(--bs-primary-300);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
.bb-editor textarea::-moz-placeholder {
	color: var(--bs-secondary-color);
	opacity: 1;
}
.bb-editor textarea::placeholder {
	color: var(--bs-secondary-color);
	opacity: 1;
}
.bb-editor textarea:disabled {
	background-color: var(--bs-secondary-bg);
	opacity: 1;
}

/* -------------------------------------------
	navigation-container
------------------------------------------- */
.navigation-container {
	user-select: none;
}

/* -------------------------------------------
	navigation-list
------------------------------------------- */
.navigation-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* -------------------------------------------
	navigation-list item
------------------------------------------- */
.navigation-list span,
.navigation-list a {
	padding: 2px 10px 2px;
	border-radius: var(--bs-border-radius-sm);
	corner-shape: superellipse(var(--corner-shape));
	margin-top: 0.188rem;
	margin-left: 0.188rem;
}

.navigation-list span:first-child,
.navigation-list a:first-child {
	margin-left: 0;
}

/* Текущая страница — «где я нахожусь». Тот же рецепт, что pill активного
   пункта шапки: подложка полупрозрачная, адаптируется просветом.
   Было: фон на примитиве --bs-white → в dark белая плашка со светлым
   текстом (контраст 1.35). Примитивы едины для обеих тем. */
.navigation-list span {
	cursor: default;
	color: var(--bs-emphasis-color);
	background: rgba(var(--bs-primary-rgb), 0.16);
	box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.3);
}

/* «...» и неактивная стрелка — служебные, а не «где я»: pill им не положен.
   Бледность здесь НАМЕРЕННА — роль muted у BS несёт в том числе смысл
   disabled, WCAG такие элементы из-под нормы выводит. */
.navigation-list span.nav_ext,
.navigation-list span:has(i) {
	color: var(--bs-secondary-color);
	background: none;
	box-shadow: none;
}

/* Ссылка на страницу. Цвет не задаём — роль ссылки приезжает сама
   (--bs-link-color, переключается 600/400 по теме). */
.navigation-list a {
	text-decoration: none;
	background: rgba(var(--bs-primary-rgb), 0.05);

	transition: var(--transition-options-15);
}

/* Ховер тише текущей страницы: alpha .10 против .16 — иначе состояния
   слипаются (замер: .16 даёт ту же заметность 1.20, что и pill).
   Было: белый текст на сплошном primary = 3.68 в обеих темах. */
.navigation-list a:hover {
	color: var(--bs-link-hover-color);
	background: rgba(var(--bs-primary-rgb), 0.10);
}

/* Тач-цель. Десктопные 34.6px пальцем не нажать: норма 44 (Apple HIG) /
   48 (Material). Тот же случай, что пункты меню в шапке. */
@media (max-width: 991.98px) {
	.navigation-list span,
	.navigation-list a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}


/* -------------------------------------------
	Авторский E-E-A-T блок (.author-box)
	Контент — из допполей developer/check_date, оформление здесь.
	Цвета через var(--bs-*) — авто-адаптация light/dark.
------------------------------------------- */
.author-box {
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	/* lg — в пару к соседям-врезкам, среди которых блок и стоит в конце обзора.
	   Было 1rem (16) — ничья ступень между md 14 и lg 20. */
	border-radius: var(--radius-lg);
	padding: 1.15rem 1.35rem;
}

.author-box-head {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: .9rem;
}

.author-box-avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bs-info-bg-subtle);
	color: var(--bs-info-text-emphasis);
	font-size: 1.3rem;
}

.author-box-title {
	font-weight: 600;
	line-height: 1.3;
}

.author-box-sub {
	font-size: .85rem;
	/* Приглушённый, но ЧИТАЕМЫЙ: роль muted в light = gray-500 (2.87 < 4.5),
	   а это мелкий текст E-E-A-T. Роль emphasis: light 700, dark адаптируется. */
	color: var(--bs-secondary-text-emphasis);
}

.author-box-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .6rem 1.5rem;
	border-top: 1px solid var(--bs-border-color);
	padding-top: .9rem;
}

.author-box-item {
	display: flex;
	gap: .6rem;
}

.author-box-ico {
	color: var(--bs-info);
	font-size: 1.05rem;
	margin-top: .15rem;
}

.author-box-label {
	font-size: .8rem;
	color: var(--bs-secondary-text-emphasis);
}

.author-box-val {
	font-weight: 600;
	color: var(--bs-emphasis-color);
}

.author-box-note {
	font-size: .85rem;
	color: var(--bs-secondary-text-emphasis);
	line-height: 1.6;
	border-top: 1px solid var(--bs-border-color);
	margin-top: .9rem;
	padding-top: .9rem;
}