/* Стили сервиса по макету Figma.
   Компоненты (кнопки, бейджи, поля, выпадающие списки, пагинация, модалки) - из UI-кита
   808 Utilities (style.css), здесь их размеры подогнаны под макет. Каркас страницы,
   карточки и строки списков - свои: в ките их аналогов с таким видом нет.
   Цвета - только переменные из theme.css. */

body {
	background: var(--page-bg);
	color: var(--ink);
	font-family: var(--font-main);
}

.text-muted-2 {
	color: var(--muted);
}

/* ==========================================================
   1. Каркас: боковое меню + содержимое
   ========================================================== */

.app-logo {
	display: flex;
	align-items: center;
	gap: 13px;
	color: var(--paper);
	font-family: var(--font-logo);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}
.app-logo:hover {
	color: var(--paper);
}

.app-sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	width: 240px;
	display: flex;
	flex-direction: column;
	padding: 32px 16px 16px;
	background: var(--primary-gradient);
	border-radius: 0 32px 32px 0;
	color: var(--paper);
	transition: transform 0.3s ease;
}

/* Пункты меню: белые, неактивные - с прозрачностью 60% */
.app-menu {
	margin-top: 44px;
	overflow-y: auto;
	overflow-x: hidden; /* стрелка подменю, пока крутится, чуть вылезает вбок - без этого мелькает прокрутка */
}
.app-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.app-menu a,
.app-menu button {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 43px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--paper);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	opacity: 0.6;
	transition: opacity 0.15s;
}
.app-menu a:hover,
.app-menu a.active,
.app-menu button:hover,
.app-menu button.open {
	color: var(--paper);
	opacity: 1;
}
.app-menu i {
	font-size: 19px;
	flex-shrink: 0;
}
.app-menu__arrow {
	margin-left: auto;
	transition: transform 0.2s;
}
.app-menu button.open .app-menu__arrow {
	transform: rotate(180deg);
}
/* Проекты в «Выбранных проектах» - без иконок, с отступом под текст пунктов */
.app-menu__submenu ul a {
	min-height: 34px;
	padding-left: 32px;
}

/* Пользователь внизу меню */
.app-user {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(254, 254, 254, 0.2);
}
.app-user__button {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--paper);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}
.app-user__avatar.avatar {
	width: 31px;
	height: 31px;
	margin: 0;
	font-size: 11px;
	background: rgba(254, 254, 254, 0.2);
	color: var(--paper);
}
.app-user .dropdown-menu {
	min-width: 208px;
}
.app-user .dropdown-menu form {
	margin: 0;
}
.app-user .dropdown-menu button.dropdown-item {
	width: 100%;
	text-align: left;
}

.app-main {
	min-height: 100vh;
	margin-left: 240px;
	padding: 40px 56px 56px;
}

/* Полоса с логотипом на телефоне */
.app-topbar {
	display: none;
}
.app-topbar__menu {
	padding: 8px;
	border: 0;
	background: none;
}
.app-overlay {
	display: none;
}

@media (max-width: 991.98px) {
	.app-topbar {
		position: sticky;
		top: 0;
		z-index: 1030;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64px;
		padding: 0 16px;
		background: var(--primary-gradient);
	}
	.app-sidebar {
		transform: translateX(-100%);
	}
	.app.menu-open .app-sidebar {
		transform: none;
	}
	.app.menu-open .app-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1035;
		background: rgba(18, 24, 42, 0.4);
	}
	.app-main {
		margin-left: 0;
		padding: 24px 16px 40px;
	}
}

/* ==========================================================
   2. Заголовок страницы: крошки, название, подпись
   ========================================================== */

.breadcrumbs {
	margin-bottom: 24px;
	color: var(--muted);
	font-size: 14px;
}
.breadcrumbs a {
	color: var(--muted);
}
.breadcrumbs a:hover {
	color: var(--ink);
}
.breadcrumbs span {
	color: var(--ink);
}

.page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.page-title {
	margin: 0;
	color: var(--ink);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
}
.page-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 14px;
}
.page-subtitle a {
	color: var(--muted);
}
.page-subtitle a:hover {
	color: var(--ink);
}
.page-subtitle i {
	font-size: 18px;
}

/* Проект: квадрат с первой буквой вместо логотипа */
.project-head {
	display: flex;
	align-items: center;
	gap: 16px;
}
.project-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--primary-gradient);
	color: var(--paper);
	font-size: 22px;
	font-weight: 700;
}
.project-head .page-subtitle {
	margin-top: 8px;
}

/* ==========================================================
   3. Кнопки и бейджи кита в размерах макета
   ========================================================== */

/* «Таблетка»: основная - градиент, контурная - серая рамка */
.btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 32px;
	border-radius: 560px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.4;
}
.btn-pill.btn-outline-primary {
	border-width: 1.2px;
}
.btn-pill i {
	font-size: 18px;
}
.btn-pill-sm {
	padding: 7px 24px;
}
/* Круглая кнопка с иконкой (скачать) */
.btn-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	padding: 0;
	border-radius: 50%;
	font-size: 18px;
}

/* Бейдж-«таблетка» макета: мелкий текст, мягкий фон статуса */
.custom-badge {
	flex-shrink: 0; /* в строке рядом с длинным текстом бейдж не сжимается */
	min-width: 0;
	padding: 4px 9px;
	border-radius: 514px;
	font-size: 10px;
	line-height: 1.3;
	white-space: nowrap;
}

/* ==========================================================
   4. Карточки и строки
   ========================================================== */

.panel {
	margin-bottom: 24px;
	padding: 32px;
	border-radius: 16px;
	background: var(--paper);
	box-shadow: var(--shadow-card);
}
.panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border);
}
.panel__title {
	margin: 0;
	color: var(--ink);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
}
.panel__meta {
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.panel__meta a {
	color: var(--muted);
}
.panel__meta a:hover {
	color: var(--ink);
}
.panel__empty {
	margin: 24px 0 0;
	color: var(--muted);
	font-size: 14px;
}
.panel__footer {
	margin-top: 24px;
}

/* Строка «параметр - значение» */
.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
	font-weight: 500;
}
.info-row__label {
	color: var(--muted);
}
.info-row__value {
	color: var(--ink);
	text-align: right;
}

/* Строка списка: название и подпись слева, действия справа */
.list-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--border);
}
.list-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.panel > .list-row:first-child {
	padding-top: 0;
}
.list-row__main {
	flex-grow: 1;
	min-width: 0;
}
.list-row__title {
	margin: 0;
	color: var(--ink);
	font-size: 17px;
	font-weight: 500;
}
.list-row__sub {
	margin-top: 4px;
	color: var(--muted);
	font-size: 14px;
}
.list-row__aside {
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}

/* Плитка с иконкой: залитая - градиент, контурная - рамка основного цвета */
.icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 41px;
	height: 41px;
	border-radius: 8px;
	background: var(--primary-gradient);
	color: var(--paper);
	font-size: 19px;
}
.icon-box.icon-box-outline {
	background: none;
	border: 1px solid var(--primary);
	color: var(--primary);
}
.icon-box-sm {
	width: 38px;
	height: 38px;
	border-radius: 7px;
	font-size: 18px;
}

/* Автор: аватар и имя в серой «таблетке» */
.author-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 3px 9px 3px 5px;
	border-radius: 560px;
	background: var(--muted-bg);
	color: var(--ink);
	font-size: 11px;
}
.author-chip .avatar {
	width: 19px;
	height: 19px;
	margin: 0;
	font-size: 8px;
}

/* ==========================================================
   5. Поиск, фильтры, пагинация
   ========================================================== */

.search-pill {
	position: relative;
	margin-bottom: 24px;
}
.search-pill i {
	position: absolute;
	top: 50%;
	left: 32px;
	transform: translateY(-50%);
	color: var(--muted);
	font-size: 19px;
	pointer-events: none;
}
.search-pill .form-control {
	height: 44px;
	padding-left: 61px;
	border: 0;
	border-radius: 640px;
	background: var(--paper);
	font-size: 14px;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.filters__sort {
	margin-left: auto;
}
/* Кнопка фильтра - белая «таблетка» со стрелкой; меню - dropdown-menu кита */
.filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 41px;
	padding: 0 16px;
	border: 0;
	border-radius: 560px;
	background: var(--paper);
	color: var(--ink);
	font-size: 14px;
}
.filter-pill::after {
	display: none;
}
.filter-pill i {
	font-size: 19px;
}
.filters .dropdown-menu {
	min-width: 240px;
}
.filters .custom_check {
	display: block;
	margin: 0;
	padding: 6px 16px 6px 44px;
	font-size: 14px;
}
.filters .custom_check .checkmark {
	left: 16px;
	top: 7px;
}
.filters__apply {
	padding: 8px 16px 4px;
}

/* Пагинация кита: круглые кнопки, активная - градиент */
.pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
	color: var(--muted);
	font-size: 14px;
}
.pager .pagination {
	gap: 8px;
	margin: 0 0 0 auto;
}
.pager .pagination > li > a,
.pager .pagination > li > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0 !important;
	border: 0;
	border-radius: 50% !important;
	background: var(--paper);
	color: var(--ink);
}
.pager .page-item.active .page-link {
	color: var(--paper);
}
.pager .page-item.disabled .page-link {
	background: transparent;
}
.pager .page-arrow .page-link {
	border: 1px solid var(--ink);
	background: transparent;
	font-size: 19px;
}
.pager .page-arrow.disabled .page-link {
	border-color: var(--border);
	color: var(--muted);
}

/* ==========================================================
   6. Дашборд проекта
   ========================================================== */

/* Сценарий в списке */
.scenario-row__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 500;
}

/* Окно подтверждения запуска (модальное окно кита): шаги сценария */
.launch-modal__hint {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 13px;
}
.launch-step {
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
}
.launch-step:first-child {
	padding-top: 0;
}
.launch-step:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.launch-step__head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.launch-step__head .step-badge {
	margin-right: 0;
}
.launch-step__head h5 {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}
.launch-step__meta {
	margin-left: auto;
	color: var(--muted);
	font-size: 13px;
}
.launch-step__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0 44px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 500;
}
.launch-step__list li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.launch-step__text {
	margin: 10px 0 0 44px;
	color: var(--muted);
	font-size: 13px;
}
.launch-modal .modal-footer {
	justify-content: flex-start;
	gap: 8px;
}

/* Плитки категорий в сводке */
.stat-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 24px;
	margin-top: 24px;
}
.stat-tile {
	padding: 14px 8px;
	border-radius: 16px;
	background: var(--muted-bg);
	text-align: center;
}
.stat-tile__value {
	display: block;
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}
.stat-tile__label {
	display: block;
	margin-top: 6px;
	color: var(--ink);
	font-size: 11px;
}

/* Последние отчёты: строка - ссылка на отчёт */
.report-link-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
}
.report-link-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.report-link-row:hover {
	color: var(--primary);
}
.report-link-row__date {
	margin-left: auto;
	color: var(--muted);
	font-weight: 400;
}

/* ==========================================================
   7. Отчёт
   ========================================================== */

/* Сводка: тёмная плашка с кольцом процента */
.report-hero {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding: 13px 32px;
	border-radius: 16px;
	background: var(--primary-gradient);
	color: var(--paper);
}
.report-hero__ring {
	position: relative;
	flex-shrink: 0;
	width: 104px;
	height: 104px;
}
.report-hero__ring svg {
	width: 100%;
	height: 100%;
}
.report-hero__ring b {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 500;
}
.report-hero__title {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
}
.report-hero__text {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 14px;
}

/* Карточки категорий в две колонки */
.test-groups {
	columns: 2 400px;
	column-gap: 33px;
}
.test-group {
	break-inside: avoid;
	margin-bottom: 23px;
	padding: 29px;
	border-radius: 15px;
	background: var(--paper);
	box-shadow: var(--shadow-card);
}
.test-group__head {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	padding: 0 0 22px;
	border: 0;
	border-bottom: 1px solid var(--border);
	background: none;
	color: var(--ink);
	text-align: left;
}
.test-group__head.collapsed {
	padding-bottom: 0;
	border-bottom: 0;
}
.test-group__title {
	font-size: 16px;
	font-weight: 500;
}
.test-group__arrow {
	display: inline-block;
	margin-left: auto;
	font-size: 18px;
	transform: rotate(180deg);
	transition: transform 0.2s;
}
.test-group__head.collapsed .test-group__arrow {
	transform: none;
}

/* Один тест */
.test-item {
	padding: 22px 0;
	border-bottom: 1px solid var(--border);
}
.test-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.test-item__head {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.test-item__icon {
	flex-shrink: 0;
	margin-top: 1px;
	font-size: 17px;
}
.test-item__body {
	flex-grow: 1;
	min-width: 0;
	overflow-wrap: anywhere; /* длинные адреса без пробелов переносятся, а не растягивают страницу */
}
.test-item__title {
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
}
.test-item__comment {
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
	white-space: pre-line; /* у некоторых тестов комментарий в несколько строк */
}
.test-item__problems {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--muted);
}
.test-item__problems li {
	padding: 12px 0;
	border-top: 1px solid var(--border);
}
.test-item__pages {
	margin-top: 10px;
	color: var(--muted);
	font-size: 12px;
}
.test-item__pages a {
	color: var(--ink);
}
/* «Показать ещё» - серая «таблетка» со стрелкой */
.more-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	padding: 3px 8px;
	border: 0;
	border-radius: 514px;
	background: var(--muted-bg);
	color: var(--ink);
	font-size: 13px;
}
/* Медиафайлы - серые плитки с иконкой, по клику открываются крупно */
.media-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 14px;
}
.media-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: var(--muted-bg);
	color: var(--ink);
	font-size: 18px;
}
.media-tile:hover {
	background: var(--border);
}
.media-modal-image,
.media-modal-video {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}

/* Прогресс идущей проверки */
.report-progress .progress {
	height: 8px;
	margin-top: 16px;
}
.report-progress .progress-bar {
	background: var(--primary-gradient);
}

/* ==========================================================
   8. Профиль
   ========================================================== */

.profile-head {
	display: flex;
	align-items: center;
	gap: 24px;
}
.profile-head .avatar {
	width: 64px;
	height: 64px;
	margin: 0;
	font-size: 22px;
}
.profile-head__name {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
}
.profile-head__email {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 14px;
}
.field {
	margin-top: 20px;
}
.field label {
	display: block;
	margin-bottom: 8px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}
.field .form-control {
	height: 44px;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 14px;
}
.field .form-control[readonly] {
	background: var(--paper);
}
.field .form-control.is-empty {
	border-color: var(--muted-bg);
	background: var(--muted-bg);
	color: var(--muted);
}
.field__hint {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 11px;
}
.project-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
}
.project-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.project-row .project-logo {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	font-size: 16px;
}

/* ==========================================================
   9. Вход
   ========================================================== */

.login-center .btn-primary {
	border-radius: 560px;
}
/* Пока поля пустые, кнопка серая (макет) */
.login-center .btn-primary:disabled {
	background: var(--muted-2);
	border-color: var(--muted-2);
	opacity: 1;
}

/* ==========================================================
   10. Телефон
   ========================================================== */

@media (max-width: 767.98px) {
	.page-head {
		flex-direction: column;
	}
	.panel {
		padding: 20px;
	}
	.panel__title {
		font-size: 18px;
	}
	.list-row {
		flex-wrap: wrap;
	}
	.list-row__aside {
		width: 100%;
		justify-content: flex-end;
		flex-wrap: wrap;
	}
	.filters__sort {
		margin-left: 0;
	}
	.report-hero {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}
	.report-hero__title {
		font-size: 20px;
	}
	.stat-tiles {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 12px;
	}
	.test-group {
		padding: 20px;
	}
	.pager .pagination {
		margin-left: 0;
	}
}

/* ==========================================================
   11. Сценарии
   ========================================================== */

/* Галочка кита рисуется значком Font Awesome, а сервис его не подключает -
   берём ту же галочку из Feather. Чёрточка - часть тестов категории выбрана */
.custom_check .checkmark::after {
	content: "\e92b";
	font-family: "feather";
	font-weight: 400;
	font-size: 12px;
}
.custom_check input:indeterminate ~ .checkmark {
	background-color: var(--primary);
	border-color: var(--primary);
}
.custom_check input:indeterminate ~ .checkmark::after {
	content: "\e996";
	display: flex;
}

/* Переключатель «Активные / Неактивные» - вкладки кита в белой «таблетке» */
.tabs-pill {
	display: inline-block;
	margin-bottom: 24px;
	padding: 3px;
	border-radius: 560px;
	background: var(--paper);
}
.tabs-pill .nav-tabs {
	border: 0;
	flex-wrap: nowrap;
}
.tabs-pill .nav-link {
	padding: 10px 32px;
	border: 0;
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap;
}
.tabs-pill .nav-link.active {
	color: var(--paper);
}

/* Строка сценария: название со статусом и параметры мелким текстом */
.scenario-row__title a {
	color: var(--ink);
}
.scenario-row__title a:hover {
	color: var(--primary);
}
.scenario-row__title .custom-badge {
	margin-left: 8px;
	vertical-align: middle;
}
.scenario-row__link {
	margin-left: 16px;
	color: var(--muted);
	font-size: 11px;
	text-decoration: underline;
}
.meta-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	color: var(--ink);
	font-size: 11px;
}
.meta-items b {
	font-weight: 500;
}
/* Крупный бейдж с иконкой - статус регулярности */
.custom-badge-lg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 14px;
}
.custom-badge-lg i {
	margin: 0;
	font-size: 16px;
}

/* Категория с тестами: шапка со стрелкой и список под ней */
.tree-group {
	border-bottom: 1px solid var(--border);
}
.tree-group:last-child {
	border-bottom: 0;
}
.tree-group__head {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 22px 0;
	border: 0;
	background: none;
	color: var(--ink);
	text-align: left;
}
.tree-group:last-child .tree-group__head.collapsed,
.tree-group:last-child .tree-group__head:has(.collapsed) {
	padding-bottom: 0;
}
.tree-group__title,
.tree-group__check {
	flex-grow: 1;
	font-size: 16px;
	font-weight: 500;
}
.tree-group__check.custom_check {
	margin: 0;
	padding-left: 30px;
	font-size: 16px;
	line-height: 20px;
}
.tree-group__count {
	color: var(--muted);
	font-size: 13px;
	white-space: nowrap;
}
.tree-group__toggle {
	padding: 4px;
	border: 0;
	background: none;
	color: var(--ink);
}
.tree-group__arrow {
	display: inline-block; /* transform не действует на строчные элементы */
	font-size: 18px;
	transform: rotate(180deg);
	transition: transform 0.2s;
}
.tree-group__head.collapsed .tree-group__arrow,
.tree-group__toggle.collapsed .tree-group__arrow {
	transform: none;
}
/* Тесты - с отступом под иконку категории и линией слева */
.tree-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 22px 27px;
	padding: 0 0 0 26px;
	border-left: 1px solid var(--border);
	list-style: none;
	font-size: 13px;
	font-weight: 500;
}
.tree-items li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.tree-items li i {
	margin-top: 1px;
	font-size: 15px;
}
.tree-items .custom_check {
	margin: 0;
	font-weight: 500;
}
/* Строка с галочкой (выборки на странице сценария) */
.check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 22px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
	font-weight: 500;
}
.check-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}
/* Кнопки внизу страницы по центру */
.actions-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}
.actions-bar form {
	margin: 0;
}
/* «Деактивировать», «Отменить проверку» - красный текст на мягком красном фоне */
.btn-soft-danger {
	border: 0;
	background: var(--error-bg);
	color: var(--error);
}
.btn-soft-danger:hover {
	background: var(--error);
	color: var(--paper);
}

/* Подсказка вверху формы обновления */
.info-panel {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--muted);
	font-size: 13px;
}
.info-panel i {
	font-size: 18px;
}
.info-panel p {
	margin: 0;
}
.scenario-name-field {
	max-width: 768px;
}
.scenario-name-field .form-control {
	border-color: var(--muted-bg);
	background: var(--muted-bg);
}

/* Шаги создания сценария */
.stepper {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin-bottom: 24px;
	padding: 16px 32px;
	border-radius: 560px;
	background: var(--paper);
	box-shadow: var(--shadow-card);
	color: var(--muted);
	font-size: 16px;
	font-weight: 500;
}
.stepper__step {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.stepper__step.is-current {
	color: var(--ink);
}
.stepper__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--muted-bg);
	font-size: 14px;
}
.stepper__step.is-current .stepper__num {
	border: 2px solid var(--primary);
	background: var(--primary-gradient);
	background-clip: padding-box;
	color: var(--paper);
	box-shadow: 0 0 0 2px var(--paper) inset;
}
.stepper__line {
	width: 80px;
	height: 1px;
	background: var(--muted-2);
}
/* Номер шага в заголовке карточки */
.step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--primary-gradient);
	color: var(--paper);
	font-size: 14px;
	vertical-align: middle;
}
.step-badge-muted {
	background: var(--muted-bg);
	color: var(--muted);
}

@media (max-width: 767.98px) {
	/* Вкладки шире экрана - прокручиваются внутри «таблетки», а не растягивают страницу */
	.tabs-pill {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.tabs-pill .nav-link {
		padding: 8px 14px;
		font-size: 13px;
	}
	.stepper {
		border-radius: 16px;
		padding: 16px 20px;
	}
	.stepper__line {
		display: none;
	}
}

/* --- Регулярные и отложенные проверки --- */

/* Подпись под названием в строке сводки: «По расписанию», «Отложенная» */
.info-row__label a {
	color: inherit;
}
.info-row__label a:hover {
	color: var(--primary);
}
.info-row__note {
	display: block;
	margin-top: 4px;
	color: var(--muted-2);
	font-size: 11px;
	font-weight: 400;
}

/* «Отложенная проверка» - жёлтый текст на мягком жёлтом фоне */
.btn-soft-warning {
	border: 0;
	background: var(--warning-bg);
	color: var(--warning);
}
.btn-soft-warning:hover,
.btn-soft-warning:focus-visible {
	background: var(--warning);
	color: var(--paper);
}
.panel__actions form {
	margin: 0;
}

/* Серая плашка внутри карточки: форма отложенной проверки, расписание */
.soft-box {
	margin-top: 24px;
	padding: 24px 32px;
	border-radius: 13px;
	background: var(--muted-bg);
}

/* Дата и время отложенной проверки */
.deferred-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}
.deferred-form__field label {
	display: block;
	margin-bottom: 8px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}
.deferred-form .form-control {
	width: auto;
	height: 44px;
	border: 0;
	border-radius: 13px;
	background: var(--paper);
	font-size: 14px;
}

/* Сообщение в карточке: «Отложенная проверка запланирована на ...» */
.notice-box {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 24px;
	padding: 17px 32px;
	border-radius: 13px;
	font-size: 14px;
	font-weight: 700;
}
.notice-box i {
	font-size: 19px;
}
.notice-box-warning {
	background: var(--warning-bg);
	color: var(--warning);
}

/* Расписание на странице сценария: подпись, крупный текст и кнопка «Изменить» */
.schedule-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.schedule-box__label {
	display: block;
	color: var(--muted);
	font-size: 14px;
	font-weight: 500;
}
.schedule-box__value {
	display: block;
	margin-top: 8px;
	color: var(--ink);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}
.schedule-box__next {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
}

/* Переключатель «Регулярная / Нерегулярная»: радиокнопки btn-check в серой «таблетке» */
.segmented {
	display: inline-flex;
	padding: 3px;
	border-radius: 520px;
	background: var(--muted-bg);
}
.segmented__item {
	padding: 9px 29px;
	border-radius: 520px;
	color: var(--muted);
	font-size: 13px;
	cursor: pointer;
}
.btn-check:checked + .segmented__item {
	background: var(--ink);
	color: var(--paper);
	font-weight: 500;
}
.btn-check:focus-visible + .segmented__item {
	outline: 2px solid var(--muted-2);
}

/* Варианты расписания: пока выбрано «Нерегулярная», они скрыты */
.schedule-manual {
	display: none;
	margin: 24px 0 0;
	color: var(--muted);
	font-size: 14px;
}
.schedule-fields:has(#regular-no:checked) .schedule-options {
	display: none;
}
.schedule-fields:has(#regular-no:checked) .schedule-manual {
	display: block;
}
.schedule-options {
	margin-top: 20px;
	border-top: 1px solid var(--border);
}
.schedule-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 80px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}
.schedule-option:last-child {
	border-bottom: 0;
}
.schedule-option__title.custom_check {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}
.schedule-option__hint {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 400;
}
.schedule-option__inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}
.schedule-option__unit {
	margin-right: 8px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
}
.schedule-input.form-control {
	width: auto;
	height: 41px;
	padding: 0 14px;
	border: 0;
	border-radius: 12px;
	background: var(--muted-bg);
	font-size: 13px;
}
.schedule-input-number.form-control {
	width: 72px;
}

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

/* Синяя подсказка про Telegram-бота */
.notice-box-info {
	margin-top: 0;
	margin-bottom: 8px;
	background: var(--info-bg);
	color: var(--info);
	font-size: 13px;
}
.notice-box-info a {
	color: inherit;
	text-decoration: underline;
}

/* Вопрос формы и выбор способа: Тг / Почта / Нет */
.notify-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--border);
}
.notify-row__question {
	display: block;
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
}
.notify-row__hint {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px;
}
.notify-row__percent {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--muted);
	font-size: 13px;
}
.notify-row__percent .schedule-input-number.form-control {
	width: 64px;
	height: 34px;
}
.notify-row__channels {
	display: flex;
	gap: 16px;
}
.notify-row__channel.custom_check {
	margin: 0;
	padding-left: 24px;
	font-size: 11px;
}
.notify-fields .field:first-of-type {
	margin-top: 24px;
}

/* Получатели «чипами»: серое поле, белые «таблетки» с крестиком.
   Плагин прячет исходное поле классом sr-only из Bootstrap 4 - в Bootstrap 5 его нет, задаём сами. */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}
.notify-fields .bootstrap-tagsinput {
	min-height: 43px;
	padding: 6px 12px;
	border: 0;
	border-radius: 12px;
	background: var(--muted-bg);
}
.notify-fields .bootstrap-tagsinput .badge {
	margin-right: 6px;
	padding: 2px 10px;
	border-radius: 669px;
	background: var(--paper) !important; /* плагин ставит класс badge-info, у которого в ките !important */
	color: var(--ink);
	font-size: 13px;
	font-weight: 400;
}
.notify-fields .bootstrap-tagsinput .badge [data-role="remove"] {
	margin-left: 6px;
	cursor: pointer;
}
.notify-fields .bootstrap-tagsinput .badge [data-role="remove"]::after {
	content: "×";
}
.notify-fields .bootstrap-tagsinput .badge [data-role="remove"]:hover {
	color: var(--error);
}

/* Включённое уведомление на странице сценария: событие, значок способа, получатели */
.notify-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--border);
}
.notify-item__title {
	display: block;
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
}
.notify-item__hint {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 14px;
}
.notify-item__to {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.notify-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--primary-gradient);
	color: var(--paper);
	font-size: 16px;
}
.notify-item__chip {
	padding: 8px 16px;
	border-radius: 40px;
	background: var(--muted-bg);
	color: var(--ink);
	font-size: 14px;
	overflow-wrap: anywhere;
}

/* --- Сводка по сценарию на дашборде --- */

/* Список сценариев: серое поле со стрелкой, как в макете */
.summary-select.form-select {
	height: 44px;
	padding-left: 32px;
	border: 0;
	border-radius: 13px;
	background-color: var(--muted-bg);
	color: var(--ink);
	font-size: 14px;
}
.scenario-summary {
	margin-top: 16px;
}

/* --- Аватарка проекта --- */

.project-logo-image {
	overflow: hidden;
	background: var(--paper);
}
.project-logo-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* На дашборде аватарка - кнопка: при наведении поверх появляется значок камеры */
.project-logo-change {
	position: relative;
	display: block;
	cursor: pointer;
}
.project-logo-change__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(18, 24, 42, 0.55);
	color: var(--paper);
	font-size: 20px;
	opacity: 0;
	transition: opacity 0.15s;
}
.project-logo-change:hover .project-logo-change__icon,
.project-logo-change:focus-within .project-logo-change__icon {
	opacity: 1;
}

/* --- API-ключи (Настройки) --- */

/* Только что созданный ключ: показывается один раз */
.api-key-new {
	margin-top: 24px;
	padding: 24px 32px;
	border-radius: 13px;
	background: var(--success-bg);
}
.api-key-new__title {
	margin: 0 0 16px;
	color: var(--success);
	font-size: 14px;
	font-weight: 700;
}
.api-key-new__row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.api-key-new__row .form-control {
	flex: 1 1 320px;
	height: 44px;
	border: 0;
	border-radius: 13px;
	background: var(--paper);
	font-size: 14px;
}
.list-row form {
	margin: 0;
}
/* Создание ключа: поле с названием и кнопка в одну строку */
.api-key-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-top: 24px;
}
.api-key-form__name {
	flex: 1 1 320px;
	margin-top: 0;
}

/* --- Справка по API (Настройки -> Справка по API) --- */

/* Таблица: слева подпись, справа значение или пример */
.api-table {
	width: 100%;
	margin-top: 20px;
	border-collapse: collapse;
	font-size: 14px;
}
.api-table th,
.api-table td {
	padding: 12px 16px;
	border: 1px solid var(--border);
	vertical-align: top;
}
.api-table th {
	width: 210px;
	color: var(--muted);
	font-weight: 500;
}
.api-table code {
	color: var(--ink);
	font-size: 13px;
}
/* Запрос и ответ: моноширинный текст, длинные строки переносятся */
.api-table pre {
	margin: 0;
	color: var(--ink);
	font-size: 12.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.api-example {
	margin-top: 24px;
}
.api-example__head {
	background: var(--muted-bg);
}
.api-example__title {
	display: block;
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
}
.api-example__note {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
}
/* Ссылки на разделы */
.api-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

@media (max-width: 767.98px) {
	.api-table th {
		width: 90px;
	}
	.api-table th,
	.api-table td {
		padding: 10px;
	}
}

/* Раздел справки: заголовок-кнопка со стрелкой, по нему раздел раскрывается */
.api-section__head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	text-align: left;
}
.api-section__head .panel__title {
	margin: 0;
}
.api-section__count {
	color: var(--muted);
	font-size: 14px;
}
.api-section__arrow {
	display: inline-block;
	margin-left: auto;
	font-size: 20px;
	transform: rotate(180deg);
	transition: transform 0.2s;
}
.api-section__head.collapsed .api-section__arrow {
	transform: none;
}