/* ============================================================
   ГЛОБАЛЬНЫЙ ФАЙЛ СТИЛЕЙ – site.css (РЕФАКТОРИНГ)
   ТЁПЛАЯ СВЕТЛАЯ ТЕМА + спокойный синий акцент
   Полная поддержка тёмной темы через data-bs-theme
   Все дубли объединены, !important сведены к минимуму
   ============================================================ */

/* ========== ПЕРЕМЕННЫЕ ========== */
:root {
	/* Шрифты – увеличены на 2px */
	--font-family: "Open Sans", sans-serif;
	--font-size-body: 14px; /* было 12 */
	--font-size-label: 16px; /* было 14 */
	--font-size-test-notice: 14px; /* было 12 */
	--font-size-input: 16px; /* было 14 */
	--font-size-header: 22px; /* было 20 (опционально) */
	--font-size-paragraph: 16px; /* было 14 */
	--font-size-link: 14px; /* было 12 */
	--font-size-error: 14px; /* было 12 */
	--font-size-html-h1: 28px; /* оставлено как есть */
	--font-size-html-h2: 20px;
	--font-size-html-h3: 16px;
	--font-size-html-h4: 14px;
	--font-size-html-h5: 12px;
	--font-size-html-h6: 10px;
	/* Цветовая гамма (светлая) */
	--color-background: #f0ede8;
	--color-test-notice-text: #7f6f5e;
	--color-test-notice-bg: #f6f2ec;
	--color-test-notice-border: #ddd6cc;
	--color-card-bg: #fcfaf7;
	--color-card-border: #ddd6cc;
	--color-card-shadow: rgba(100, 85, 70, 0.06);
	--color-link: #6b655a;
	--color-header: #2d2a24;
	--color-label: #3d3831;
	--color-input-border: #ccc5bb;
	--color-input-text: #3d3831;
	--color-input-bg: #fcfaf7;
	--color-focus-border: #7d9ab8;
	--color-submit-btn-bg: #7d9ab8;
	--color-submit-btn-text: #ffffff;
	--color-error: #b34a4a;
	--color-required: #7d9ab8;
	--color-clear-button-bg: #8c8580;
	--color-html-text: #3d3831;
	--color-html-link: #7d9ab8;
	/* Радиусы */
	--border-radius-card: 8px;
	--border-radius-input: 6px;
	--border-radius-clear-btn: 50%;
	/* Отступы */
	--padding-container-top: 20px;
	--padding-container-bottom: 20px;
	--padding-card: 32px 24px;
	--padding-card-small: 16px 12px;
	--padding-test-notice-vertical: 10px;
	--padding-test-notice-horizontal: 20px;
	--margin-bottom-card: 24px;
	--padding-form-input: 12px;
	--card-margin-x: 8px;
	/* Размеры */
	--container-width: 850px;
	--submit-btn-height: 48px;
	--checkbox-size: 18px;
	/* Прочее */
	--box-shadow-card: 0px 2px 12px 0px rgba(100, 85, 70, 0.06);
	--opacity-placeholder: 0.5;
}

/* ========== ГЛОБАЛЬНЫЕ СБРОСЫ И ТЕЛО ========== */
*,
::after,
::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-family);
	font-weight: 300;
	font-size: var(--font-size-body);
	display: flex;
	flex-direction: column;
	justify-content: start;
	background-color: var(--color-background);
	min-height: 100vh;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* ========== КОНТЕЙНЕР И КАРТОЧКА ========== */
.container {
	margin: auto;
	text-align: left;
	padding-top: var(--padding-container-top);
	padding-bottom: var(--padding-container-bottom);
	width: var(--container-width);
	max-width: 100%;
}

.test-notice {
	padding: var(--padding-test-notice-vertical) var(--padding-test-notice-horizontal);
	color: var(--color-test-notice-text);
	background-color: var(--color-test-notice-bg);
	border-radius: var(--border-radius-card);
	border: 1px solid var(--color-test-notice-border);
	font-size: var(--font-size-test-notice);
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	margin-bottom: var(--margin-bottom-card);
}
/* Базовые стили (светлая тема) */
.test-notice {
	/* Переменные для светлой темы */
	--notice-bg: #e8f0fe;
	--notice-text: #1a3a5c;
	--notice-border: #b8d1f0;
	--notice-accent: var(--color-focus-border, #7d9ab8);
	padding: var(--padding-test-notice-vertical) var(--padding-test-notice-horizontal);
	padding-left: calc(var(--padding-test-notice-horizontal) + 16px);
	color: var(--notice-text);
	background-color: var(--notice-bg);
	border-radius: 0;
	border: 1px solid var(--notice-border);
	border-left-width: 6px;
	border-left-color: var(--notice-accent);
	font-size: var(--font-size-test-notice);
	font-weight: 500;
	line-height: 1.6;
	text-align: left;
	margin-bottom: var(--margin-bottom-card);
	box-shadow: none;
}

/* Тёмная тема (data-bs-theme="dark") */
[data-bs-theme="dark"] .test-notice {
	--notice-bg: #2a3a4a;
	--notice-text: #e8f0fe;
	--notice-border: #4a6a8a;
	--notice-accent: #5b9bd5;
}

.card {
	padding: var(--padding-card);
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	border-radius: var(--border-radius-card);
	box-shadow: var(--box-shadow-card);
	margin-bottom: var(--margin-bottom-card);
	/* margin-left/right удалены */
	overflow: hidden;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ========== КОМПОНЕНТЫ СТРАНИЦ ========== */
/* --- Заголовки --- */
.form-header h1 {
	color: var(--color-header);
	font-size: var(--font-size-header);
	font-weight: 400;
	margin-bottom: 8px;
}

.form-header p {
	padding-top: 4px;
	color: var(--color-link);
	font-size: var(--font-size-paragraph);
	font-weight: 400;
}

.inputs-wrapper {
	padding-top: var(--padding-container-top);
	padding-bottom: var(--padding-container-top);
}

.content-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-header);
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

/* --- Списки --- */
.items-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 16px;
	max-height: 65vh;
	overflow-y: auto;
	padding-right: 4px;
	scroll-behavior: smooth;
}

	.items-grid::-webkit-scrollbar {
		width: 6px;
	}

	.items-grid::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	.items-grid::-webkit-scrollbar-thumb {
		background: #d0cbc4;
		border-radius: 3px;
	}

		.items-grid::-webkit-scrollbar-thumb:hover {
			background: #b0aaa2;
		}

.item-card {
	padding: 14px 18px;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	border-radius: var(--border-radius-card);
	box-shadow: 0 1px 4px rgba(0,0,0,0.02);
	text-align: left;
	transition: box-shadow 0.2s, transform 0.2s, background-color 0.25s, border-color 0.25s;
}

	.item-card:hover {
		box-shadow: 0 4px 16px rgba(120, 100, 80, 0.06);
		transform: translateY(-2px);
	}
.item-title-row {
	display: block;
	align-items: center; /* выравнивание по вертикали по центру */
	flex-wrap: wrap; /* если не влезают – перенос на новую строку */
	gap: 8px 12px; /* отступы между элементами */
}


.item-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.item-icon {
	font-size: 64px;
	line-height: 1;
	flex-shrink: 0;
}

.item-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}

	.item-title a {
		color: var(--color-header);
		text-decoration: none;
		transition: color 0.2s;
	}

		.item-title a:hover {
			color: var(--color-submit-btn-bg);
			text-decoration: underline;
		}

.item-description {
	color: var(--color-link);
	font-size: 14px;
	margin: 4px 0 0 0;
}

.item-meta {
	font-size: 12px;
	color: var(--color-link);
	margin-top: 4px;
}

	.item-meta.inactive {
		color: #b0aaa2;
	}

/* --- Карточка агента --- */
.agent-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	border-radius: var(--border-radius-card);
	padding: 20px 24px;
	margin-bottom: 24px;
	box-shadow: var(--box-shadow-card);
}

.agent-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.agent-name {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-header);
	margin: 0;
}

.agent-description {
	font-size: 16px;
	color: var(--color-link);
	margin: 0 0 16px 0;
}

.agent-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Баланс --- */
.balance-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.balance-info {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

.balance-item {
	display: flex;
	align-items: baseline;
	gap: 4px 8px;
}

	.balance-item .label {
		font-size: 14px;
		color: var(--color-link);
	}

	.balance-item .value {
		font-size: 18px;
		font-weight: 600;
		color: var(--color-header);
	}

.balance-actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

	.balance-actions .btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

.balance-divider {
	margin: 16px 0 12px 0;
	border: 0;
	border-top: 1px solid var(--color-card-border);
}

.balance-description {
	margin-top: 4px;
}

	.balance-description .card-title {
		font-size: 18px;
		font-weight: 600;
		color: var(--color-header);
		margin-bottom: 8px;
	}

/* --- Успех --- */
.success-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 20px;
}

.success-card {
	background: var(--color-card-bg);
	border-radius: var(--border-radius-card);
	box-shadow: var(--box-shadow-card);
	padding: 48px 40px;
	max-width: 480px;
	width: 100%;
	text-align: center;
	animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.success-icon {
	margin-bottom: 20px;
}

	.success-icon svg {
		display: inline-block;
		vertical-align: middle;
	}

.success-card h1 {
	font-size: 28px;
	font-weight: 600;
	color: var(--color-header);
	margin: 0 0 12px 0;
}

.success-message {
	font-size: 16px;
	color: var(--color-link);
	margin: 0 0 32px 0;
	line-height: 1.5;
}

.success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

	.success-actions .btn {
		min-width: 140px;
	}

/* --- Приветствие / Выход --- */
.welcome-container {
	text-align: center;
	padding: 16px 0;
}

.welcome-title {
	font-size: 28px;
	font-weight: 600;
	color: var(--color-header);
	margin-bottom: 12px;
}

.welcome-text {
	font-size: var(--font-size-paragraph);
	color: var(--color-link);
	line-height: 1.6;
	margin-bottom: 24px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.welcome-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.logout-container {
	text-align: center;
	padding: 32px 0;
}

	.logout-container h1 {
		font-size: var(--font-size-header);
		font-weight: 600;
		color: var(--color-header);
		margin-bottom: 12px;
	}

	.logout-container .text-muted {
		color: var(--color-link);
		font-size: var(--font-size-paragraph);
		margin-bottom: 24px;
	}

.logout-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ========== ФОРМЫ ========== */
.form-group {
	margin-bottom: 18px;
}

form label {
	display: block;
	text-align: left;
	font-size: var(--font-size-label);
	font-weight: 600;
	color: var(--color-label);
	padding-bottom: 4px;
}

form textarea {
	max-width: 100%;
}

form .form-input {
	border: 1px solid var(--color-input-border);
	border-radius: var(--border-radius-input);
	width: 100%;
	font-size: var(--font-size-input);
	color: var(--color-input-text);
	background-color: var(--color-input-bg);
	font-weight: 400;
	padding: var(--padding-form-input);
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.25s, color 0.25s;
}

form textarea:focus,
form input:focus {
	outline: none;
	border-color: var(--color-focus-border);
	box-shadow: 0 0 0 3px rgba(90, 123, 156, 0.15);
}

.select-input {
	border: 1px solid var(--color-input-border);
	border-radius: var(--border-radius-input);
}

	.select-input:focus-within {
		border-color: var(--color-focus-border);
		box-shadow: 0 0 0 3px rgba(90, 123, 156, 0.15);
	}

form select {
	outline: transparent;
	border: none;
	border-radius: var(--border-radius-input);
	width: 100%;
	font-size: var(--font-size-input);
	color: var(--color-input-text);
	font-weight: 400;
	background-color: var(--color-card-bg);
	padding: var(--padding-form-input);
	border-right: 12px solid transparent;
}

input[type='date'] {
	font-family: var(--font-family);
}

::placeholder {
	opacity: var(--opacity-placeholder);
	color: var(--color-link);
}

label.form-required::after {
	content: ' *';
	color: var(--color-required);
}

.error-hidden,
.field-validation-error {
	display: block;
	position: relative;
	color: var(--color-error);
	text-align: left;
	font-size: var(--font-size-error);
	font-weight: 400;
	padding-top: 4px;
	padding-bottom: 4px;
}

.field-validation-error {
	visibility: visible;
}

.input-validation-error {
	border-color: var(--color-error) !important; /* требуется для валидации */
}

/* Мультиселект */
.multiselect {
	padding-left: 4px;
	padding-right: 4px;
}

.multiselect-option {
	padding-top: 6px;
	display: flex;
	align-items: center;
}

	.multiselect-option label {
		padding-left: 12px;
		color: var(--color-link);
		font-weight: 400;
		cursor: pointer;
	}

.multiselect-checkbox {
	vertical-align: middle;
	min-width: var(--checkbox-size);
	appearance: none;
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	border: 1px solid var(--color-input-border);
	border-radius: 3px;
	cursor: pointer;
	position: relative;
}

	.multiselect-checkbox:checked {
		background: var(--color-focus-border);
		border-color: var(--color-focus-border);
	}

		.multiselect-checkbox:checked::after {
			content: '✔';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			font-size: var(--font-size-label);
			font-weight: bold;
		}

.multiselect[data-radio-select] .multiselect-checkbox {
	border-radius: 50%;
	width: var(--checkbox-size);
	height: var(--checkbox-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

	.multiselect[data-radio-select] .multiselect-checkbox:checked {
		background: white;
		border-color: var(--color-focus-border);
		border-width: 4px;
		border-radius: 50%;
	}

		.multiselect[data-radio-select] .multiselect-checkbox:checked::after {
			content: '';
		}

/* ========== КНОПКИ ========== */
.btn {
	height: var(--submit-btn-height);
	padding: var(--padding-form-input) 28px;
	border-radius: var(--border-radius-input);
	border: 0;
	font-size: var(--font-size-input);
	font-weight: 600;
	font-family: var(--font-family);
	background-color: var(--color-submit-btn-bg);
	color: var(--color-submit-btn-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: opacity 0.2s, background 0.2s, color 0.2s;
}

	.btn:hover {
		opacity: 0.85;
	}

.btn-full {
	width: 100%;
}

.btn-secondary {
	background-color: #8c8580;
}

	.btn-secondary:hover {
		background-color: #6e6863;
	}

.btn-primary,
.btn-submit {
	background-color: var(--color-submit-btn-bg);
	color: var(--color-submit-btn-text);
}

	.btn-primary:hover,
	.btn-submit:hover {
		opacity: 0.85;
	}

	.btn span,
	.btn-primary span,
	.btn-secondary span,
	.btn-submit span {
		padding-right: 6px;
		display: none;
	}

		.btn span svg,
		.btn-primary span svg,
		.btn-secondary span svg,
		.btn-submit span svg {
			display: inline-block;
			vertical-align: middle;
			fill: var(--color-submit-btn-text);
			animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		}

@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#submit-btn {
	width: 100%;
	height: var(--submit-btn-height);
	padding: var(--padding-form-input);
	border-radius: var(--border-radius-input);
	border: 0;
	font-size: var(--font-size-input);
	font-weight: 600;
	font-family: var(--font-family);
	background-color: var(--color-submit-btn-bg);
	color: var(--color-submit-btn-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

	#submit-btn:hover {
		opacity: 0.85;
	}

	#submit-btn span {
		padding-right: 6px;
		display: none;
	}

		#submit-btn span svg {
			display: inline-block;
			vertical-align: middle;
			fill: var(--color-submit-btn-text);
			animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		}

/* Дополнительные кнопки */
.btn-action {
	height: 38px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-input, 14px);
	font-weight: 600;
	border-radius: var(--border-radius-input, 6px);
	transition: opacity 0.2s;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	text-decoration: none;
	line-height: 1;
}

.btn-action-icon-only {
	padding: 0;
	width: 38px;
	min-width: 38px;
}

.btn-icon-xs {
	height: auto;
	padding: 6px 6px;
	line-height: 1;
	min-height: unset;
}

/* ========== HTML-КОНТЕНТ ========== */
div.html {
	text-align: left;
	color: var(--color-html-text);
	font-size: var(--font-size-input);
}

	div.html h1, div.html h2, div.html h3, div.html h4, div.html h5, div.html h6,
	div.html p, div.html ul, div.html ol, div.html a {
		font-weight: 400;
		font-style: normal;
		margin-bottom: 8px;
	}

	div.html li {
		margin-bottom: 8px;
		margin-left: 24px;
	}

	div.html ul, div.html ol {
		font-size: var(--font-size-input);
		display: flex;
		flex-direction: column;
		align-self: stretch;
		line-height: normal;
	}

	div.html b {
		font-weight: 600;
	}

	div.html h1 {
		font-size: var(--font-size-html-h1);
		line-height: 35px;
	}

	div.html h2 {
		font-size: var(--font-size-html-h2);
		line-height: 26px;
	}

	div.html h3 {
		font-size: var(--font-size-html-h3);
		line-height: 24px;
	}

	div.html h4 {
		font-size: var(--font-size-html-h4);
		line-height: 18px;
	}

	div.html h5 {
		font-size: var(--font-size-html-h5);
	}

	div.html h6 {
		font-size: var(--font-size-html-h6);
	}

	div.html p {
		margin-bottom: 8px;
	}

	div.html a {
		color: var(--color-html-link);
		font-size: var(--font-size-input);
	}

/* ========== НАВИГАЦИЯ ========== */
/* Основная обёртка */
.navbar-wrapper {
	position: relative;
	background: var(--bs-body-bg);
	border-bottom: 1px solid var(--color-card-border, #e0e0e0);
	padding: 0.5rem 0;
}

.nav-main-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Первая строка */
.nav-row-primary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding-bottom: 0.5rem;
}

.nav-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
	margin-right: auto;
}

.nav-logo {
	height: 40px;
	width: auto;
	display: block;
}

.nav-logo-desktop {
	display: block;
}

.nav-logo-mobile {
	display: none;
}

.nav-right-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
}

.nav-user-info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 4px;
}

.nav-user-icon-link {
	color: var(--bs-body-color);
	text-decoration: none;
	display: flex;
	align-items: center;
}

	.nav-user-icon-link:hover {
		opacity: 0.7;
	}

.nav-user-icon {
	font-size: 1.8rem;
	width: 20px;
	height: 20px;
	color: var(--color-header);
}

.nav-user-details {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.nav-username {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-header);
}

.nav-username-short {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--bs-body-color);
	margin-left: 0.2rem;
}

.nav-email {
	font-size: 0.75rem;
	color: var(--color-link, #777);
}

.nav-auth-link {
	color: var(--bs-primary);
	text-decoration: none;
	margin-right: 0.5rem;
}

	.nav-auth-link:hover {
		text-decoration: underline;
	}

.nav-theme-link,
.nav-logout-link {
	color: var(--bs-body-color);
	text-decoration: none;
	padding: 0.25rem;
	display: flex;
	align-items: center;
}

	.nav-theme-link:hover,
	.nav-logout-link:hover {
		opacity: 0.7;
	}

	.nav-theme-link span,
	.nav-logout-link span {
		width: 20px;
		height: 20px;
	}

.nav-logout-link {
	color: var(--bs-body-color);
}

/* Вторая строка (основное меню) */
.nav-row-secondary-wrapper {
	background: var(--bs-body-bg);
}

.nav-row-secondary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding-top: 0.5rem;
	border-top: 1px solid var(--color-card-border, #e0e0e0);
}

.nav-menu-secondary {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
	flex-wrap: wrap;
	align-items: center;
}

	.nav-menu-secondary > li {
		position: relative;
	}

.nav-link-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--bs-body-color);
	text-decoration: none;
	padding: 0.25rem 0;
	font-size: 0.95rem;
	transition: color 0.2s;
}

	.nav-link-secondary:hover {
		color: var(--bs-primary);
	}

.nav-more-trigger {
	cursor: pointer;
}

/* Выпадающее меню "Ещё" */
.nav-dropdown-wrapper {
	position: relative !important;
}

.nav-more-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--bs-body-bg);
	border: 1px solid var(--color-card-border, #e0e0e0);
	border-radius: 6px;
	padding: 0.5rem 0;
	list-style: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 9999;
}

	.nav-more-dropdown-menu.show {
		display: block;
	}

.dropdown-link-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	color: var(--bs-body-color);
	text-decoration: none;
	font-size: 0.9rem;
}

	.dropdown-link-item:hover {
		background: rgba(255,255,255,0.05);
		color: var(--bs-primary);
	}

/* Тариф в навигации */
.nav-mode-item {
	display: inline-flex;
	align-items: center;
	margin-left: 0;
}

	.nav-mode-item .tariff-badge {
		font-size: 0.75rem;
		padding: 0.2rem 0.6rem;
		border-radius: 1rem;
		white-space: nowrap;
	}

.nav-mode {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	background: #e0e7ff;
	color: #3730a3;
}

	.nav-mode.триал {
		background: #fef3c7;
		color: #b45309;
	}

	.nav-mode.бесплатный {
		background: #e0f2fe;
		color: #0369a1;
	}

	.nav-mode.нормальный {
		background: #dcfce7;
		color: #15803d;
	}

/* Кнопка-гамбургер (мобильная) */
.navbar-toggler {
	border: none;
	background: rgba(255,255,255,0.15);
	backdrop-filter: blur(4px);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var(--bs-body-color);
	transition: background 0.2s;
	order: -1;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

	.navbar-toggler:hover {
		background: rgba(255,255,255,0.25);
	}

	.navbar-toggler:focus {
		outline: none;
		box-shadow: 0 0 0 2px var(--bs-primary);
	}

/* Переключение темы в навигации */
.hide-theme-dark {
	display: none !important;
}

.hide-theme-light {
	display: inline-block !important;
}

[data-bs-theme="light"] .hide-theme-dark {
	display: none !important;
}

[data-bs-theme="light"] .hide-theme-light {
	display: inline-block !important;
}

[data-bs-theme="dark"] .hide-theme-light {
	display: none !important;
}

[data-bs-theme="dark"] .hide-theme-dark {
	display: inline-block !important;
}

/* ========== ФУТЕР ========== */
.footer {
	margin-top: 20px;
	text-align: right;
	color: #8c8580;
	font-size: 13px;
	background: transparent;
	padding: 16px 0;
	border-top: 1px solid var(--color-card-border);
}

	.footer a {
		color: var(--color-link);
		text-decoration: none;
		border-bottom: 1px dotted var(--color-card-border);
	}

		.footer a:hover {
			color: var(--color-submit-btn-bg);
			border-bottom-color: var(--color-submit-btn-bg);
		}

	.footer p {
		margin: 0;
		text-align: right;
	}

.footer-logo {
	display: block;
	width: 60%;
	height: auto;
	margin-left: auto;
	margin-bottom: 12px;
	opacity: 0.7;
	transition: opacity 0.2s;
}

	.footer-logo:hover {
		opacity: 1;
	}

/* Компактный футер (для страниц с .footer-compact) */
.footer-compact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--tblr-border-color, rgba(255,255,255,0.08));
	width: 100%;
}

.footer-compact-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.25rem 1rem;
	width: 100%;
}

.footer-compact-link {
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--tblr-text-secondary, var(--tblr-muted, #888));
	transition: color 0.15s ease;
}

	.footer-compact-link:hover {
		color: var(--tblr-primary, #206bc4);
	}

.footer-compact-law {
	font-size: 0.7rem;
	line-height: 1.3;
	color: var(--tblr-text-disabled, #666);
	width: 100%;
}

.footer-compact-law-link {
	color: var(--tblr-text-secondary, #888);
	text-decoration: none;
}

	.footer-compact-law-link:hover {
		text-decoration: underline;
		color: var(--tblr-primary, #206bc4);
	}

.footer-compact-copy {
	font-size: 0.7rem;
	color: var(--tblr-text-disabled, #555);
	margin: 0;
	width: 100%;
	text-align: right;
}

.footer-compact-partner {
	color: inherit;
	text-decoration: none;
}

	.footer-compact-partner:hover {
		text-decoration: underline;
	}




/* Родительский контейнер теперь — строка */
.footer-compact {
	display: flex;
	flex-direction: row; /* вместо column */
	align-items: center; /* вертикальное выравнивание по центру (можно flex-start, если нужно) */
	justify-content: space-between; /* или flex-start, если хотите прижать левую часть */
	gap: 2rem; /* отступ между колонками */
	margin-top: 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--tblr-border-color, rgba(255,255,255,0.08));
	width: 100%;
}

/* Левая колонка с QR-кодом — фиксированная ширина, не сжимается */
.footer-qr {
	flex: 0 0 auto; /* не растягивается */
	/* если хотите прижать к левому краю, ничего не меняем */
	/* можно задать ширину, например, width: 120px; */
}

/* Правая колонка — занимает оставшееся пространство и сохраняет правый край */
.footer-right {
	flex: 1 1 auto; /* занимает всё доступное место */
	display: flex;
	flex-direction: column; /* внутренние элементы идут вертикально */
	align-items: flex-end; /* выравнивание по правому краю (как было раньше) */
	gap: 0.1rem; /* тот же gap, что был у родителя */
	text-align: right; /* для наследования текста */
}

/* Остальные внутренние стили можно оставить без изменений */
.footer-compact-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end; /* ссылки прижаты к правому краю */
	gap: 0.25rem 1rem;
	width: 100%;
}

.footer-compact-law,
.footer-compact-copy {
	width: 100%;
	text-align: right; /* при необходимости */
}

.footer-logo {
	/* стили для логотипа, если есть */
}

@media (max-width: 576px) {
	.footer-compact {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.footer-right {
		align-items: stretch; /* или center, как вам нужно */
		text-align: center; /* или left */
	}

	.footer-compact-nav {
		justify-content: center;
	}

	.footer-compact-law,
	.footer-compact-copy {
		text-align: center;
	}
}



/* ========== БЭЙДЖИ ========== */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.badge-id {
	background: var(--color-card-border);
	color: var(--color-link);
}

.badge-cost {
	background: #fef3c7;
	color: #b45309;
}

.badge-info {
	background: #e0f2fe;
	color: #0369a1;
}

.badge-warning {
	background: #fef3c7;
	color: #b45309;
}

.badge-primary {
	background: var(--color-submit-btn-bg);
	color: #fff;
}

.badge-danger {
	background: var(--color-error);
	color: #fff;
}

.badge-success {
	background: #3f8c6b;
	color: #fff;
}

.badge-secondary {
	background: #8c8580;
	color: #fff;
}

.badge-xs {
	font-size: 0.6rem !important;
	padding: 0.15rem 0.4rem !important;
	line-height: 1.2 !important;
}

/* ========== ТАБЛИЦЫ ========== */
.table-sm {
	font-size: 13px;
}

	.table-sm th,
	.table-sm td {
		padding: 4px 8px;
	}

	.table-sm .btn-1 {
		padding: 2px 8px;
		font-size: 12px;
	}

	.table-sm .navbar-icon {
		width: 16px;
		height: 16px;
	}

/* ========== ПАГИНАЦИЯ ========== */
.pagination {
	display: flex;
	gap: 6px;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

	.pagination .page-item {
		display: inline-block;
	}

	.pagination .page-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 32px;
		height: 32px;
		padding: 0 10px;
		background: var(--color-card-bg, #ffffff);
		border: 1px solid var(--color-card-border, #e2dcd3);
		border-radius: 10px;
		color: var(--color-text, #2d2a24);
		text-decoration: none;
		font-size: 13px;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.pagination .page-item.active .page-link {
		background: var(--color-primary, #5a7b9c);
		border-color: var(--color-primary, #5a7b9c);
		color: #ffffff;
	}

	.pagination .page-link:hover {
		background: var(--color-bg, #f5f2ed);
		border-color: var(--color-primary, #5a7b9c);
		color: var(--color-primary, #5a7b9c);
	}

	.pagination .page-item:first-child .page-link,
	.pagination .page-item:last-child .page-link {
		padding: 0 12px;
	}








@keyframes slideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* ========== ПРОЧИЕ ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ ========== */
.nav-right {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.page-content {
	padding-top: 20px;
}

.footer-links {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

	.footer-links a {
		color: var(--color-link);
		text-decoration: none;
		border-bottom: 1px dotted transparent;
		font-size: 13px;
		transition: color 0.2s, border-color 0.2s;
	}

		.footer-links a:hover {
			color: var(--color-submit-btn-bg);
			border-bottom-color: var(--color-submit-btn-bg);
		}

/* ========== ТЁМНАЯ ТЕМА ========== */
[data-bs-theme="dark"] {
	--color-background: #1a1b1e;
	--color-card-bg: #27292d;
	--color-card-border: #3d4045;
	--color-card-shadow: rgba(0, 0, 0, 0.6);
	--color-link: #9aa0a8;
	--color-header: #e8eaed;
	--color-label: #c8ccd0;
	--color-input-text: #dde0e3;
	--color-input-bg: #2d2f33;
	--color-input-border: #4a4d52;
	--color-html-text: #dde0e3;
	--color-html-link: #6d8db0;
	--color-test-notice-text: #b8bcc4;
	--color-test-notice-bg: #24262a;
	--color-test-notice-border: #3d4045;
	--color-error: #cc5a5a;
	--color-clear-button-bg: #5e646c;
	--color-required: #5a7b9c;
	--color-submit-btn-bg: #5a7b9c;
	--color-submit-btn-text: #ffffff;
	--color-focus-border: #6d8db0;
}

	[data-bs-theme="dark"] body {
		background-color: var(--color-background);
		color: #dddddd;
	}

	[data-bs-theme="dark"] .container {
		background-color: transparent;
	}

	[data-bs-theme="dark"] .card {
		background-color: var(--color-card-bg);
		border-color: var(--color-card-border);
		box-shadow: var(--box-shadow-card);
	}

	[data-bs-theme="dark"] .card-header,
	[data-bs-theme="dark"] .card-footer {
		background-color: rgba(255, 255, 255, 0.03);
		border-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3,
	[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
	[data-bs-theme="dark"] .h1, [data-bs-theme="dark"] .h2, [data-bs-theme="dark"] .h3,
	[data-bs-theme="dark"] .h4, [data-bs-theme="dark"] .h5, [data-bs-theme="dark"] .h6 {
		color: var(--color-header);
	}

	[data-bs-theme="dark"] .text-muted {
		color: #9aa0a8 !important;
	}

	[data-bs-theme="dark"] .text-secondary {
		color: #9aa0a8 !important;
	}

	[data-bs-theme="dark"] .text-dark {
		color: #e0e0e0 !important;
	}

	[data-bs-theme="dark"] .text-success {
		color: #5cb85c !important;
	}

	[data-bs-theme="dark"] .text-danger {
		color: #d9534f !important;
	}

	/*[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-link-secondary) {
		color: var(--color-html-link);
	}*/

		[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-link-secondary):hover {
			color: #8aaac9;
		}

	[data-bs-theme="dark"] .form-input,
	[data-bs-theme="dark"] form .form-input,
	[data-bs-theme="dark"] form select,
	[data-bs-theme="dark"] .select-input {
		background-color: var(--color-input-bg);
		color: var(--color-input-text);
		border-color: var(--color-input-border);
	}

	[data-bs-theme="dark"] form label {
		color: var(--color-label);
	}

	[data-bs-theme="dark"] ::placeholder {
		color: #6e7278;
	}

	[data-bs-theme="dark"] .table {
		color: #dddddd;
		border-color: var(--color-card-border);
	}

		[data-bs-theme="dark"] .table th,
		[data-bs-theme="dark"] .table td {
			border-color: var(--color-card-border);
		}

		[data-bs-theme="dark"] .table thead th {
			background-color: rgba(255, 255, 255, 0.05);
			color: #cccccc;
		}

	[data-bs-theme="dark"] .table-hover tbody tr:hover {
		background-color: rgba(255, 255, 255, 0.06);
	}

	[data-bs-theme="dark"] .table-sm .btn-1 {
		background-color: #4a4d52;
		color: #eee;
	}

		[data-bs-theme="dark"] .table-sm .btn-1:hover {
			background-color: #5a5e65;
		}

	[data-bs-theme="dark"] .navbar {
		background-color: #1e2024;
		border-bottom-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .nav-title {
		color: var(--color-header);
	}

	[data-bs-theme="dark"] .nav-link {
		color: #9aa0a8;
	}

		[data-bs-theme="dark"] .nav-link:hover {
			color: var(--color-submit-btn-bg);
			border-bottom-color: var(--color-submit-btn-bg);
		}

	[data-bs-theme="dark"] .nav-logout1 {
		color: #cc5a5a;
	}

		[data-bs-theme="dark"] .nav-logout1:hover {
			color: #b34a4a;
		}

	[data-bs-theme="dark"] .nav-link-secondary {
		color: #8c929c;
	}

		[data-bs-theme="dark"] .nav-link-secondary:hover {
			color: var(--color-submit-btn-bg);
		}

	[data-bs-theme="dark"] .nav-username {
		color: var(--color-header);
	}

	[data-bs-theme="dark"] .nav-email {
		color: #9aa0a8;
	}

	[data-bs-theme="dark"] .nav-divider {
		color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .nav-row-secondary {
		border-top-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .badge-info {
		background: #2a4b6a;
		color: #aac9e0;
	}

	[data-bs-theme="dark"] .badge-warning {
		background: #6a4f2a;
		color: #e6c9a0;
	}

	[data-bs-theme="dark"] .badge-primary {
		background: var(--color-submit-btn-bg);
		color: #fff;
	}

	[data-bs-theme="dark"] .badge-danger {
		background: var(--color-error);
		color: #fff;
	}

	[data-bs-theme="dark"] .badge-success {
		background: #3f8c6b;
		color: #fff;
	}

	[data-bs-theme="dark"] .badge-secondary {
		background: #5e646c;
		color: #fff;
	}

	[data-bs-theme="dark"] .nav-mode.триал {
		background: #5a4020;
		color: #e6c9a0;
	}

	[data-bs-theme="dark"] .nav-mode.бесплатный {
		background: #1a3a5a;
		color: #aac9e0;
	}

	[data-bs-theme="dark"] .nav-mode.нормальный {
		background: #1a4a2a;
		color: #aae0aa;
	}

	[data-bs-theme="dark"] .footer {
		color: #6e7278;
	}

		[data-bs-theme="dark"] .footer a {
			color: #9aa0a8;
			border-bottom-color: #4a4d52;
		}

			[data-bs-theme="dark"] .footer a:hover {
				color: var(--color-submit-btn-bg);
				border-bottom-color: var(--color-submit-btn-bg);
			}

	[data-bs-theme="dark"] .btn-secondary {
		background-color: #4a4d52;
		color: #eeeeee;
	}

		[data-bs-theme="dark"] .btn-secondary:hover {
			background-color: #5a5e65;
		}

	[data-bs-theme="dark"] .btn-1 {
		background-color: #4a4d52;
		color: #eeeeee;
	}

		[data-bs-theme="dark"] .btn-1:hover {
			background-color: #5a5e65;
		}


	[data-bs-theme="dark"] .item-card {
		background-color: var(--color-card-bg);
		border-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .item-title a {
		color: var(--color-header);
	}

		[data-bs-theme="dark"] .item-title a:hover {
			color: var(--color-submit-btn-bg);
		}

	[data-bs-theme="dark"] .item-description {
		color: #9aa0a8;
	}

	[data-bs-theme="dark"] .item-meta {
		color: #6e7278;
	}

	[data-bs-theme="dark"] .html {
		color: var(--color-html-text);
	}

		[data-bs-theme="dark"] .html a {
			color: var(--color-html-link);
		}

			[data-bs-theme="dark"] .html a:hover {
				color: #8aaac9;
			}

	[data-bs-theme="dark"] .modal-content {
		background-color: var(--color-card-bg);
		border-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .modal-header {
		border-bottom-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .modal-footer {
		border-top-color: var(--color-card-border);
	}

	[data-bs-theme="dark"] .pagination .page-link {
		background: var(--color-card-bg, #27292d);
		border-color: var(--color-card-border, #3d4045);
		color: var(--color-text, #e8eaed);
	}

	[data-bs-theme="dark"] .pagination .page-item.active .page-link {
		background: var(--color-primary, #5a7b9c);
		border-color: var(--color-primary, #5a7b9c);
		color: #ffffff;
	}

	[data-bs-theme="dark"] .pagination .page-link:hover {
		background: #2d2f33;
		border-color: var(--color-primary, #5a7b9c);
		color: var(--color-primary, #6d8db0);
	}

	[data-bs-theme="dark"] .navbar-wrapper {
		background: var(--bs-body-bg);
	}

	[data-bs-theme="dark"] .navbar-toggler {
		background: rgba(255,255,255,0.1);
	}

		[data-bs-theme="dark"] .navbar-toggler:hover {
			background: rgba(255,255,255,0.2);
		}

/* ========== АДАПТИВНОСТЬ ========== */
@media (max-width: 550px) {
	.container {
		width: 95%;
		padding: 16px 12px;
	}

	.card {
		padding: 20px 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		/*background-color: transparent;*/
		margin-bottom: 0;
		/* margin-left/right наследуются из основного правила */
	}

	.welcome-title {
		font-size: 24px;
	}

	.welcome-text {
		font-size: 14px;
		padding: 0 10px;
	}

	.btn-lg {
		padding: 10px 28px;
		font-size: 16px;
	}

	.footer-logo {
		width: 90%;
		height: auto;
		max-width: 90%;
	}

	.item-card {
		padding: 12px 14px;
	}

	.items-grid {
		max-height: 50vh;
	}

	.nav-container {
		padding: 0 12px;
		gap: 6px;
	}

	.nav-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	.nav-brand {
		font-size: 15px;
		margin-right: auto;
	}

	.nav-logo {
		height: 24px;
	}

	.nav-menu {
		gap: 12px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.nav-link {
		font-size: 13px;
	}

	.nav-menu-secondary {
		gap: 12px;
		justify-content: center;
	}

	.nav-link-secondary {
		font-size: 12px;
	}

	.success-card {
		padding: 32px 20px;
	}

		.success-card h1 {
			font-size: 24px;
		}

	.success-actions .btn {
		min-width: 120px;
		padding: 10px 20px;
	}

	.page-content {
		padding-top: 40px;
	}

	.nav-row-secondary {
		justify-content: center;
	}

	.notification-dropdown {
		width: calc(100vw - 32px);
		right: 16px;
		bottom: 76px;
	}

	.notification-widget {
		bottom: 16px;
		right: 16px;
	}
}

@media (max-width: 576px) {
	.balance-row {
		flex-direction: column;
		align-items: stretch;
	}

	.balance-actions {
		margin-left: 0;
		justify-content: stretch;
	}

		.balance-actions .btn {
			flex: 1;
			justify-content: center;
		}

	.balance-info {
		justify-content: space-between;
	}
}

@media (max-width: 767.98px) {
	.navbar-toggler {
		display: flex;
	}

	.nav-logo-desktop {
		display: none;
	}

	.nav-logo-mobile {
		display: block;
		height: 44px;
		width: auto;
		margin-right: 0.5rem;
	}

	.nav-username-short {
		display: none !important;
	}

	.nav-right-group {
		gap: 0.3rem;
	}

	.nav-mode-item .tariff-badge {
		font-size: 0.65rem;
		padding: 0.1rem 0.4rem;
	}

	.nav-row-secondary-wrapper {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bs-body-bg);
		box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
		z-index: 1050;
		padding: 0.75rem 1rem;
		border-top: 1px solid rgba(255,255,255,0.05);
	}

		.nav-row-secondary-wrapper.open {
			display: block;
		}

	.nav-row-secondary {
		flex-direction: column;
		align-items: stretch;
	}

	.nav-menu-secondary {
		flex-direction: column;
		gap: 0.25rem;
		width: 100%;
	}

		.nav-menu-secondary > li {
			width: 100%;
		}

	.nav-link-secondary {
		padding: 0.5rem 0;
		border-bottom: 1px solid rgba(255,255,255,0.05);
		font-size: 1rem;
	}

	.nav-more-dropdown-menu {
		position: static !important;
		box-shadow: none !important;
		background: transparent !important;
		padding-left: 1.5rem;
		display: none;
		border: none;
	}

		.nav-more-dropdown-menu.open {
			display: block;
		}

	.dropdown-link-item {
		padding: 0.4rem 0;
	}

		.dropdown-link-item:hover {
			background: transparent;
		}

	.nav-dropdown-wrapper.open .nav-more-dropdown-menu {
		display: block;
	}
}

/* Активный пункт меню */
.nav-menu-secondary .active .nav-link-secondary,
.nav-menu-secondary .active .dropdown-link-item {
	/*color: var(--color-submit-btn-bg, #5a7b9c) !important;*/
	font-weight: 600;
}

.nav-more-dropdown-menu .active .dropdown-link-item {
	color: var(--color-submit-btn-bg, #5a7b9c) !important;
	font-weight: 600;
}

/* Для мобильного меню */
.nav-row-secondary-wrapper .active .nav-link-secondary {
	color: var(--color-submit-btn-bg, #5a7b9c) !important;
	font-weight: 600;
}




/* ===== Базовый стиль для НЕАКТИВНЫХ пунктов меню ===== */
.nav-menu-secondary .nav-link-secondary,
.nav-more-dropdown-menu .dropdown-link-item {
	color: var(--color-link, #6b655a); /* обычный цвет */
	font-weight: 400; /* обычная жирность */
	text-decoration: none;
	transition: color 0.15s;
}

/* ===== Активный пункт — выделяем ===== */
.nav-menu-secondary .active .nav-link-secondary,
.nav-more-dropdown-menu .active .dropdown-link-item {
	color: var(--color-submit-btn-bg, #5a7b9c); /* цвет акцента */
	font-weight: 600; /* жирный */
}

/* ===== Кнопка "Ещё" активна, если есть активный пункт внутри ===== */
.nav-dropdown-wrapper.active .nav-more-trigger {
	color: var(--color-submit-btn-bg, #5a7b9c);
	font-weight: 600;
}


/* ===== Базовый стиль для НЕАКТИВНЫХ пунктов ===== */
.nav-menu-secondary .nav-link-secondary,
.nav-more-dropdown-menu .dropdown-link-item {
	color: var(--color-link, #6b655a); /* цвет обычной ссылки */
	font-weight: 400;
	text-decoration: none;
	transition: color 0.15s;
}

/* ===== Активный пункт — выделяем ===== */
.nav-menu-secondary .active .nav-link-secondary,
.nav-more-dropdown-menu .active .dropdown-link-item,
.nav-dropdown-wrapper.active .nav-more-trigger {
	color: var(--color-submit-btn-bg, #5a7b9c); /* цвет акцента */
	font-weight: 600;
}


/* Светлая тема */
[data-bs-theme="light"] .hide-theme-light {
	display: none !important;
}

:not([data-bs-theme=light]) .hide-theme-dark {
	display: inline-block !important;
}

/* Тёмная тема */
[data-bs-theme="dark"] .hide-theme-dark {
	display: none !important;
}

:not([data-bs-theme=dark]) .hide-theme-light {
	display: inline-block !important;
}


/* ========== content-header (подзаголовок, описание) ========== */
.content-header {
	font-size: var(--font-size-paragraph, 16px);
	color: var(--color-link, #6b655a);
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-card-border, #ddd6cc);
	line-height: 1.5;
}

	/* Если внутри есть ссылки или другие элементы, можно их стилизовать */
	.content-header a {
		color: var(--color-html-link, #7d9ab8);
		text-decoration: underline;
	}

		.content-header a:hover {
			color: var(--color-submit-btn-bg, #5a7b9c);
		}









.balance-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1; /* Растягивает плашки поровну на всю ширину */
	min-width: 0; /* Защищает от вылезания за края на смартфонах */
	padding: 1rem 1.5rem;
	border-radius: 12px;
	background: var(--color-card-bg, #fcfaf7);
	border: 1px solid var(--color-card-border, #ddd6cc);
	text-align: center;
	transition: box-shadow 0.2s;
}

	.balance-tile:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	}

	.balance-tile .tile-icon {
		font-size: 24px;
		margin-bottom: 4px;
	}

	.balance-tile .tile-label {
		font-size: 13px;
		color: var(--color-link, #6b655a);
		font-weight: 500;
		white-space: nowrap; /* Чтобы текст не переносился на новую строку */
	}

	.balance-tile .tile-value {
		font-size: 20px;
		font-weight: 700;
		color: var(--color-header, #2d2a24);
		white-space: nowrap; /* Чтобы цифры всегда были в одну строку */
	}

	/* Ваши оригинальные цвета */
	.balance-tile.token .tile-icon {
		color: #4a7ea8;
	}

	.balance-tile.balance .tile-icon {
		color: #2a8e5c;
	}

	.balance-tile.bonus .tile-icon {
		color: #c9a430;
	}

/* Адаптивность для мобильных устройств */
@media (max-width: 575.98px) {
	.balance-tile {
		padding: 0.75rem 0.5rem; /* Уменьшаем отступы, чтобы на экранах телефонов всё влезло */
	}

		.balance-tile .tile-value {
			font-size: 16px; /* Чуть уменьшаем шрифт цифр на смартфонах */
		}
}


.input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
}

	.input-group .btn-voice {
		border: 1px solid #ccc;
		border-right: none;
		border-radius: 4px 0 0 4px;
		background: #f0f0f0;
		padding: 0 10px;
		cursor: pointer;
		font-size: 18px;
		line-height: 1;
		transition: background 0.2s;
	}

		.input-group .btn-voice:hover {
			background: #e0e0e0;
		}

		.input-group .btn-voice.recording {
			background: #ff4444;
			color: white;
		}

	.input-group .voice-input {
		border-radius: 0 4px 4px 0;
		flex: 1;
	}

	/* Для textarea внутри input-group */
	.input-group textarea.voice-input {
		border-radius: 0 4px 4px 0;
	}


.input-group {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0;
}

	.input-group .btn-voice {
		border: 1px solid #ccc;
		border-right: none;
		border-radius: 4px 0 0 4px;
		background: #f0f0f0;
		padding: 0 10px;
		cursor: pointer;
		font-size: 18px;
		line-height: 1;
		transition: background 0.2s;
	}

		.input-group .btn-voice:hover {
			background: #e0e0e0;
		}

		.input-group .btn-voice.listening {
			background: #ff4444;
			color: white;
		}

	.input-group .voice-input {
		border-radius: 0 4px 4px 0;
		flex: 1;
	}

	.input-group textarea.voice-input {
		border-radius: 0 4px 4px 0;
	}

.voice-status {
	display: block;
	width: 100%;
	font-size: 0.85rem;
	color: #666;
	margin-top: 4px;
	padding-left: 4px;
	min-height: 1.5em;
}

.form-group-checkbox-wide {
	display: flex;
	align-items: center;
	justify-content: space-between; /* разнести по краям */
	width: 100%;
	padding: 8px 0; /* опционально */
}

	.form-group-checkbox-wide label {
		margin-bottom: 0;
		cursor: pointer;
		flex-shrink: 0; /* чтобы текст не сжимался */
	}

	.form-group-checkbox-wide input[type="checkbox"] {
		width: 18px;
		height: 18px;
		cursor: pointer;
		flex-shrink: 0;
	}


.test-notice-title {
	font-weight: 600;
	color: #ff6d5a;
}
.card.operation-message {
	margin-top: 20px;
	border-color: #28a745;
	border-width: 2px;
}



.operation-message .ok {
	color: #28a745 !important;
}

.operation-message .error {
	color: #b34a4a !important;
}


.card.operation-message.error {
	border: 2px solid #b34a4a !important;
	color: #b34a4a !important;
}

.card.operation-message.ok {
	border: 2px solid #28a745 !important;
	color: #28a745 !important;
}

.card.operation-message {
	margin-top: 20px;
}




/* Стили для заблокированного поля */
.input-disabled {
	background-color: #e9ecef !important;
	color: #6c757d !important;
	cursor: not-allowed !important;
	opacity: 0.65;
	border-color: #ced4da !important;
	box-shadow: none !important;
}
/* Для тёмной темы */
[data-bs-theme="dark"] .input-disabled {
	background-color: #2a2a2a !important;
	color: #888 !important;
	border-color: #444 !important;
}

.form-group-checkbox-inline .d-flex {
	gap: 10px; /* можно увеличить/уменьшить отступ */
}

.form-group-checkbox-inline .field-validation-error {
	display: block;
	margin-top: 4px;
	font-size: var(--font-size-error, 14px);
	color: var(--color-error, #b34a4a);
}

.btn-action-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #6c7a91;
	border-radius: 4px;
	padding: 0px !important;
	transition: background 0.15s, color 0.15s;
	text-decoration: none !important;
}

	.btn-action-small:hover {
		background: rgba(0,0,0,0.05);
		color: #206bc4;
	}

	.btn-action-small .ti {
		font-size: 18px;
		line-height: 1;
	}
/* Для тёмной темы */
[data-bs-theme="dark"] .btn-action-small {
	color: #a0aec0;
}

	[data-bs-theme="dark"] .btn-action-small:hover {
		background: rgba(255,255,255,0.08);
		color: #6ca8e7;
	}



.footer-qr {
	background: white;
	padding: 6px;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.footer-qr img {
		width: 120px;
		height: 120px;
		display: block;
	}

	.footer-qr p {
		font-size: 10px;
		color: #2c3e50;
		/*margin-top: 8px;*/
		text-align: center;
		/*max-width: 120px;*/
	}

/* Адаптивность */
@media (max-width: 768px) {
	.footer-contact-qr {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-qr {
		margin-top: 15px;
	}
}


/******************************* QRCode  **************************/

.img-smallqrcode {
	/*max-width: 88px;
	/height: 88px; */
}

.img-middleqrcode {
	max-width: 170px;
	height: 170px;
}









/* ============================================================
   КОМПОНЕНТ: КАРТОЧКИ ТАРИФОВ И ТАРИФНЫЕ ПЛАНЫ
   Интегрировано в глобальную экосистему переменных site.css
   ============================================================ */

.tariff-grid {
	margin-top: calc(var(--margin-bottom-card) * 1);
}

/* Базовая карточка тарифа */
.tariff-card {
	position: relative;
	height: 100%;
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-card-border);
	border-radius: var(--border-radius-card);
	box-shadow: var(--box-shadow-card);
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

	/* Эффект парения при наведении */
	.tariff-card:hover {
		transform: translateY(-5px);
		box-shadow: 0px 8px 24px 0px rgba(100, 85, 70, 0.12);
		border-color: var(--color-focus-border);
	}

/* Декоративная полоса сверху */
.card-status-top {
	height: 4px;
	background-color: var(--color-submit-btn-bg);
	width: 100%;
}

/* Выделение популярного тарифа */
.tariff-card.tariff-card-popular {
	border: 2px solid var(--color-focus-border);
}

.tariff-popular-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background-color: var(--color-submit-btn-bg);
	color: var(--color-submit-btn-text);
	font-size: calc(var(--font-size-body) - 2px);
	font-weight: 700;
	padding: 0.25rem 0.75rem;
	border-radius: 50rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Внутренняя разметка карточки */
.tariff-card-body {
	display: flex;
	flex-direction: column;
	padding: 24px;
	height: 100%;
}

/* Логотип */
.tariff-logo-container {
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.tariff-logo-img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* Заголовки */
.tariff-header {
	text-align: center;
	margin-bottom: 1.5rem;
}

.tariff-title {
	font-family: var(--font-family);
	font-size: var(--font-size-header);
	font-weight: 700;
	color: var(--color-header);
	margin-bottom: 0.5rem;
}

.tariff-short-desc {
	font-family: var(--font-family);
	font-size: var(--font-size-link);
	color: var(--color-test-notice-text);
	min-height: 42px; /* Выравнивание */
}

/* Блок "Что входит" - использует цвета уведомлений (test-notice) */
.tariff-features-wrapper {
	background-color: var(--color-test-notice-bg);
	border: 1px solid var(--color-test-notice-border);
	border-radius: var(--border-radius-input);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.tariff-features-caption {
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--color-test-notice-text);
	letter-spacing: 0.05em;
	text-align: center;
	margin-bottom: 0.75rem;
}

.tariff-features-content {
	font-family: var(--font-family);
	font-size: var(--font-size-paragraph);
	color: var(--color-html-text);
}

/* Футер карточки и цены */
.tariff-footer {
	margin-top: auto;
	padding-top: 0.5rem;
}

.tariff-price-block {
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin-bottom: 1.25rem;
}

.tariff-price-value {
	font-size: var(--font-size-html-h1);
	font-weight: 800;
	color: var(--color-submit-btn-bg);
	line-height: 1;
}

.tariff-price-period {
	font-size: var(--font-size-link);
	color: var(--color-test-notice-text);
	margin-left: 0.375rem;
}

/* Блок поддержки клиентов */
.tariff-support-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--color-card-border);
}

.tariff-support-info {
	display: flex;
	flex-direction: column;
}

.tariff-support-type {
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--color-label);
	margin: 0;
}

.tariff-support-notes {
	font-family: var(--font-family);
	font-size: var(--font-size-link);
	color: var(--color-test-notice-text);
}

.tariff-support-badge {
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	font-weight: 600;
	color: var(--color-submit-btn-text);
	background-color: var(--color-submit-btn-bg);
	padding: 0.35rem 0.75rem;
	border-radius: var(--border-radius-input);
	white-space: nowrap;
}

/* Нижний блок подробных описаний */
.tariff-detailed-section {
	margin-top: calc(var(--margin-bottom-card) * 2);
	padding-top: 2rem;
	border-top: 1px solid var(--color-card-border);
}

.tariff-detailed-heading {
	font-family: var(--font-family);
	font-size: var(--font-size-html-h2);
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--color-header);
}

.tariff-detailed-item {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-card);
	padding: 1.5rem;
	border: 1px solid var(--color-card-border);
}

.tariff-detailed-title a {
	color: var(--color-html-link);
	text-decoration: none;
	font-weight: 600;
}

	.tariff-detailed-title a:hover {
		text-decoration: underline;
	}

.tariff-detailed-body {
	font-family: var(--font-family);
	font-size: var(--font-size-paragraph);
	color: var(--color-html-text);
	margin-top: 0.5rem;
}


/* ============================================================
   АДАПТИРОВАННЫЕ СТИЛИ ДЛЯ ХАРАКТЕРИСТИК ТАРИФОВ
   Интеграция с глобальной палитрой site.css и темной темой
   ============================================================ */

/* Контейнер списка */
.tariff-attributes-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px; /* Фиксированный отступ между элементами вместо mb-2 */
}

/* Строка элемента */
.tariff-attribute-item {
	display: flex;
	align-items: start; /* Выравнивание по верхней линии для длинного текста */
	gap: 12px;
}

/* Базовый класс для круглой иконки статуса */
.tariff-attr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 1px; /* Легкое смещение для идеального центра с первой строкой текста */
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- СВЕТЛАЯ ТЕМА (По умолчанию) --- */

/* Иконка "Да" — ваш синий акцент на мягкой теплой подложке */
.tariff-attr-icon-success {
	background-color: #e6eef5; /* Нежный синевато-бежевый оттенок */
	color: var(--color-submit-btn-bg); /* Ваш базовый #7d9ab8 */
}

/* Иконка "Нет" — приглушенный цвет вашей системной ошибки */
.tariff-attr-icon-danger {
	background-color: #f7ebeb; /* Мягкий розово-белый фон */
	color: var(--color-error); /* Ваша ошибка #b34a4a */
}

/* Текстовая группа */
.tariff-attr-text-group {
	font-family: var(--font-family);
	font-size: var(--font-size-body);
	color: var(--color-html-text);
	line-height: 1.5;
}

.tariff-attr-label {
	font-weight: 600;
	color: var(--color-label);
}

.tariff-attr-value {
	font-weight: 500;
	color: var(--color-html-text);
	margin-left: 4px;
}

.tariff-attr-svg {
	width: 12px;
	height: 12px;
}


/* --- АДАПТАЦИЯ ПОД ТЕМНУЮ ТЕМУ (data-bs-theme="dark") --- */

[data-bs-theme="dark"] .tariff-attr-icon-success {
	/* В темноте делаем фон едва заметным, а саму иконку ярче */
	background-color: rgba(125, 154, 184, 0.15);
	color: var(--color-focus-border);
}

[data-bs-theme="dark"] .tariff-attr-icon-danger {
	/* Ограничиваем агрессивный красный цвет в темной теме */
	background-color: rgba(179, 74, 74, 0.15);
	color: #e57373; /* Более мягкий пастельный красный */
}

[data-bs-theme="dark"] .tariff-attr-label {
	/* Повышаем читаемость названий свойств в темноте */
	color: var(--color-input-bg);
}

[data-bs-theme="dark"] .tariff-attr-value {
	color: var(--color-test-notice-text);
}













:root {
	--tariff-free-bg: #e8f5e9;
	--tariff-free-border: #4caf50;
	--tariff-free-text: #1e3a2a;
	--tariff-free-btn-color: #4caf50;
	--tariff-base-bg: #e3f2fd;
	--tariff-base-border: #1e88e5;
	--tariff-base-text: #0d3b66;
	--tariff-base-btn-color: #1e88e5;
	--tariff-enterprise-bg: #f3e5f5;
	--tariff-enterprise-border: #8e24aa;
	--tariff-enterprise-text: #3e1a4a;
	--tariff-enterprise-btn-color: #8e24aa;
	--tariff-premium-bg: #fff8e1;
	--tariff-premium-border: #ffb300;
	--tariff-premium-text: #4a3a1a;
	--tariff-premium-btn-color: #ffb300;
	--tariff-unknown-bg: #f8f9fa;
	--tariff-unknown-border: #6c757d;
	--tariff-unknown-text: #383d41;
	--tariff-unknown-btn-color: #6c757d;
}

body.dark-mode,
[data-bs-theme="dark"] {
	--tariff-free-bg: #1e2a1e;
	--tariff-free-border: #66bb6a;
	--tariff-free-text: #c8e6c9;
	--tariff-free-btn-color: #66bb6a;
	--tariff-base-bg: #1a2a3a;
	--tariff-base-border: #42a5f5;
	--tariff-base-text: #bbdefb;
	--tariff-base-btn-color: #42a5f5;
	--tariff-enterprise-bg: #2a1a2e;
	--tariff-enterprise-border: #ab47bc;
	--tariff-enterprise-text: #e1bee7;
	--tariff-enterprise-btn-color: #ab47bc;
	--tariff-premium-bg: #2a261a;
	--tariff-premium-border: #ffca28;
	--tariff-premium-text: #fff9c4;
	--tariff-premium-btn-color: #ffca28;
	--tariff-unknown-bg: #2a2a2a;
	--tariff-unknown-border: #9e9e9e;
	--tariff-unknown-text: #cccccc;
	--tariff-unknown-btn-color: #9e9e9e;
}

.tariff-notice {
	padding: 1rem 1.5rem;
	/* без border-radius */
	margin-top: 2rem;
	border-left: 4px solid var(--tariff-unknown-border);
	/* убрали box-shadow */
}

.tariff-notice-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.tariff-notice-icon {
	font-size: 2rem;
	line-height: 1;
}

.tariff-notice-content {
	flex: 1;
	min-width: 150px;
}

.tariff-notice-title {
	font-weight: 600;
	margin-bottom: 0.25rem;
	font-size: 1rem;
}

.tariff-notice-content p {
	margin-bottom: 0;
	font-size: 0.9rem;
}

.tariff-notice-btn {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	background-color: transparent;
	border: 1px solid currentColor;
	/* без border-radius, можно оставить или убрать */
	color: inherit;
	text-decoration: none;
	font-size: 0.875rem;
	transition: all 0.15s ease;
	white-space: nowrap;
}

	.tariff-notice-btn:hover {
		text-decoration: none;
		color: #fff !important;
		background-color: currentColor;
	}

/* Темы - без изменений */
.tariff-notice.notice-success {
	background-color: var(--tariff-free-bg);
	border-left-color: var(--tariff-free-border);
	color: var(--tariff-free-text);
}

	.tariff-notice.notice-success .tariff-notice-btn {
		border-color: var(--tariff-free-btn-color);
		color: var(--tariff-free-btn-color);
	}

		.tariff-notice.notice-success .tariff-notice-btn:hover {
			background-color: var(--tariff-free-btn-color);
			color: #fff !important;
		}

/* и так далее для остальных тем */




.confirmation-card {
	max-width: 500px;
	margin: 40px auto;
	position: relative;
}

.star-rating {
	display: flex;
	gap: 8px;
	font-size: 36px;
	cursor: pointer;
	user-select: none;
	color: var(--color-link, #6b655a);
}

	.star-rating .star {
		transition: color 0.2s, transform 0.1s;
	}

		.star-rating .star.active {
			color: #ffc107;
		}

		.star-rating .star:hover {
			transform: scale(1.1);
		}

.theme-toggle {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--color-card-border, #ddd6cc);
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s, transform 0.2s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	color: var(--color-header, #2d2a24);
}

	.theme-toggle:hover {
		transform: scale(1.05);
	}

	.theme-toggle .icon-sun {
		display: inline;
	}

	.theme-toggle .icon-moon {
		display: none;
	}

[data-bs-theme="dark"] .theme-toggle .icon-sun {
	display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-moon {
	display: inline;
}

[data-bs-theme="dark"] .theme-toggle {
	background: var(--color-card-border, #3d4045);
	color: var(--color-header, #e8eaed);
}

@@media (max-width: 550px) {
	.confirmation-card {
		margin: 20px auto;
	}

	.star-rating {
		font-size: 28px;
	}

	.theme-toggle {
		top: 12px;
		right: 12px;
		width: 34px;
		height: 34px;
		font-size: 16px;
	}
}










/* ----- Панель управления и фильтры ----- */
.control-panel {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 10px 0 15px 0;
	gap: 10px;
}

.category-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.view-toggle {
	display: flex;
	gap: 2px;
}

.filter-badge {
	cursor: pointer;
	font-size: 0.75rem;
	padding: 2px 8px;
	transition: border-width 0.15s, background-color 0.15s;
}

	.filter-badge.active-badge {
		border-width: 3px !important;
		background-color: rgba(0, 0, 0, 0.05);
	}

	.filter-badge:hover {
		opacity: 0.8;
	}

/* ----- Кнопки переключения (прозрачные, компактные) ----- */
.view-toggle .btn {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--color-link, #6b655a);
	padding: 0.1rem 0.3rem;
	font-size: 1.1rem;
	min-height: unset;
	height: auto;
	line-height: 1;
}

	.view-toggle .btn i {
		font-size: 1.1rem;
	}

	.view-toggle .btn.active {
		color: var(--color-submit-btn-bg, #5a7b9c);
		font-weight: 700;
	}

	.view-toggle .btn:hover {
		opacity: 0.7;
	}

/* ----- Режим "Плашки" — переопределяем глобальные стили списка ----- */
.grid-view.items-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 20px !important;
	max-height: none !important;
	overflow-y: visible !important;
}

.grid-view .item-card {
	flex: 0 0 calc(33.333% - 20px) !important;
	margin-bottom: 0 !important;
	box-sizing: border-box;
}

.grid-view .item-details {
	display: none !important;
}

.grid-view .item-icon {
	display: block;
	font-size: 2.5rem;
	margin-bottom: 6px;
	text-align: center;
}

.grid-view .item-title {
	text-align: center;
	font-size: 0.95rem;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 2.6em;
	line-height: 1.3;
}

.grid-view .item-header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.grid-view .item-title-row {
	width: 100%;
	text-align: center;
}

/* Адаптивность для плашек: на планшетах и телефонах — 2 колонки */
@media (max-width: 992px) {
	.grid-view .item-card {
		flex: 0 0 calc(50% - 20px) !important;
	}
}

@media (max-width: 576px) {
	.grid-view .item-card {
		flex: 0 0 calc(50% - 20px) !important;
	}
}

/* ----- Раскрывающийся content-header (залитая кнопка с треугольником) ----- */
.content-header-wrapper {
	position: relative;
	margin-bottom: 0.25rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.content-toggle-btn {
	display: none;
	background: var(--color-submit-btn-bg, #5a7b9c);
	border: none;
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	padding: 0.1rem 0.4rem;
	align-self: flex-end;
	transition: background 0.2s, color 0.2s;
	margin-top: 0.1rem;
	line-height: 1.4;
	min-height: unset;
	height: auto;
	font-size: 0.85rem;
}

	.content-toggle-btn:hover {
		background: var(--color-focus-border, #6d8db0);
		color: #fff;
	}

	.content-toggle-btn .triangle-icon {
		display: inline-block;
		font-size: 0.85rem;
		line-height: 1;
	}

@media (max-width: 576px) {
	.content-header.collapsed {
		max-height: 6em;
		overflow: hidden;
		transition: max-height 0.3s ease;
		mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
		-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
		margin-bottom: 0.1rem !important;
	}

	.content-header.expanded {
		max-height: none;
		mask-image: none;
		-webkit-mask-image: none;
		margin-bottom: 0.1rem !important;
	}

	.content-toggle-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}





/* ========== АНИМАЦИИ ДЛЯ СТАТУСОВ В ПРОЦЕССЕ ========== */

/* 1. Медленная пульсация (для статуса "Ожидание") */
.status-pulse-slow {
	position: relative;
	animation: statusPulseAnim 2s infinite ease-in-out;
}

/* 2. Быстрая пульсация (для статуса "Подготовка") */
.status-pulse-fast {
	position: relative;
	animation: statusPulseAnim 1.2s infinite ease-in-out;
}

@keyframes statusPulseAnim {
	0% {
		opacity: 1;
		box-shadow: 0 0 0 0 currentColor;
	}

	50% {
		opacity: 0.75;
		box-shadow: 0 0 8px 2px currentColor;
	}

	100% {
		opacity: 1;
		box-shadow: 0 0 0 0 currentColor;
	}
}

/* 3. Исправленный эффект бегущего глянцевого блика (для статуса "Выполнение") */
.status-shimmer {
	position: relative;
	overflow: hidden; /* Скрываем вылетающий за рамки блик */
	display: inline-flex; /* Изменено с inline-block на inline-flex для точного расчета размеров */
	align-items: center;
	justify-content: center;
}

	.status-shimmer::after {
		content: '';
		position: absolute;
		top: 0;
		left: -150%;
		width: 60%; /* Чуть увеличили ширину для мягкости блика */
		height: 100%;
		/* Исправлен ошибочный синтаксис 100__ на каноничные 100% */
		background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100% );
		transform: skewX(-25deg); /* Наклон глянцевой полосы */
		animation: statusShimmerAnim 2s infinite linear;
	}

@keyframes statusShimmerAnim {
	0% {
		left: -150%;
	}

	50% {
		left: 150%;
	}
	/* Блик пробегает */
	100% {
		left: 150%;
	}
	/* Короткая пауза перед следующим кругом, чтобы не рябило */
}




:root {
	--logo-img: url('~/img/company_logo_dark.svg');
}

body.dark-theme {
	--logo-img: url('~/img/company_logo_light.svg');
}
body.light-theme {
	--logo-img: url('~/img/company_logo_dark.svg');
}

.footer-logo {
	background-image: var(--logo-img);
	/* остальные стили */
}

.footer-logo {
	display: inline-block;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('/img/company_logo_light.svg');
}

/* Для тёмной темы (системной) */
@media (prefers-color-scheme: dark) {
	.footer-logo {
		background-image: url('/img/company_logo_dark.svg');
	}
}

/* Ссылка с иконкой пользователя */
.nav-user-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #1a2c5a;
	transition: background-color 0.2s, color 0.2s;
	text-decoration: none;
}

	.nav-user-icon-link:hover {
		background-color: rgba(26, 44, 90, 0.08);
		color: #0f1d3a;
	}

/* Сама иконка пользователя (если это font-icon) */
.nav-user-icon {
	font-size: 22px;
	line-height: 1;
}

/* Инициалы рядом с иконкой (или вместо неё) */
.nav-username-short {
	display: inline-block;
	font-family: 'Arial', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #1a2c5a;
	letter-spacing: 0.5px;
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
}

/* Для очень маленьких экранов (если инициалы скрыты) */
@media (max-width: 575.98px) {
	.nav-username-short.d-sm-inline {
		display: none !important;
	}
}

[data-bs-theme="dark"] .nav-user-icon-link {
	color: #e0e8f0;
}

	[data-bs-theme="dark"] .nav-user-icon-link:hover {
		background-color: rgba(224, 232, 240, 0.12);
		color: #ffffff;
	}

[data-bs-theme="dark"] .nav-username-short {
	color: #e0e8f0;
}

.nav-user-link {
	display: inline-flex;
	align-items: center;
	gap: 0; /* или 4px, если нужен маленький отступ */
	text-decoration: none;
	color: inherit;
}


.card .small {
	padding: var(--padding-card-small);
}


/* Карточка — опорная точка для абсолютного позиционирования */
.item-card {
	position: relative;
}










.item-card {
	position: relative;
}

.item-badges {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}



/* ===== СВЕТЛАЯ ТЕМА (по умолчанию) ===== */
:root {
	--notice-secondary-bg: #f0ece6; /* светлый бежевый */
	--notice-primary-bg: #6b8fa7; /* приглушённый синий */
	--notice-success-bg: #d4edda; /* светло-зелёный */
	--notice-warning-bg: #fff3cd; /* светло-жёлтый */
	--notice-info-bg: #d1ecf1; /* светло-голубой */
}

/* ===== ТЁМНАЯ ТЕМА (через атрибут) ===== */
[data-bs-theme="dark"] {
	--notice-secondary-bg: #3c3c3c; /* тёмно-серый */
	--notice-primary-bg: #2a4a66; /* глубокий синий */
}

/* ===== СТИЛИ ДЛЯ КЛАССОВ (только фон) ===== */
.notice-secondary {
	background: var(--notice-secondary-bg);
}

.notice-primary {
	background: var(--notice-primary-bg);
}
.notice-success {
	background: var(--notice-success-bg);
}

.notice-warning {
	background: var(--notice-warning-bg);
}

.notice-info {
	background: var(--notice-info-bg);
}
/* .notice-secondary и .notice-primary уже есть */