/* =========================================================================
   CS:Bans — тема "default"
   Современное оформление (обновление визуального слоя, 2026)
   Имена классов/идентификаторов сохранены — обновлены только их значения.
   ========================================================================= */

:root {
	/* Шрифт в стиле Apple (San Francisco на устройствах Apple, Inter — на остальных) */
	--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
		'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Поверхности и фон */
	--bg: #eef1f6;
	--surface: #ffffff;
	--surface-2: #f5f7fa;
	--surface-3: #eef1f6;

	/* Текст */
	--ink: #1b2333;
	--ink-muted: #5a6473;
	--ink-soft: #8a93a3;

	/* Границы */
	--border: #e7eaf0;
	--border-strong: #d7dce6;

	/* Акцент */
	--accent: #f97316;
	--accent-strong: #ea640c;
	--accent-ink: #c2560a;
	--accent-soft: rgba(249, 115, 22, .10);

	/* Статусы */
	--success: #16a34a; --success-soft: #e9f7ef; --success-ink: #0f7a37; --success-border: #cdeed8;
	--danger:  #e11d48; --danger-soft:  #fdecef; --danger-ink:  #b4123a; --danger-border:  #f8d4dc;
	--info:    #2563eb; --info-soft:    #eaf1fe; --info-ink:    #1d4ed8; --info-border:    #d4e2fd;
	--warning: #d97706; --warning-soft: #fdf3e6; --warning-ink: #b4610a; --warning-border: #f6e2c2;

	/* Скругления */
	--radius-sm: 8px;
	--radius: 10px;
	--radius-lg: 16px;

	/* Внутренний отступ карточки */
	--pad: 40px;

	/* Тёмное обрамление: шапка и подвал (фирменный «каркас») */
	--shell: #121c2e;
	--shell-2: #0c1422;
	--shell-ink: #f4f6fa;
	--shell-muted: rgba(244, 246, 250, .60);
	--shell-border: rgba(255, 255, 255, .08);

	/* Тени и фокус */
	--shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -22px rgba(16, 24, 40, .22);
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
	--shadow-pop: 0 10px 30px -10px rgba(16, 24, 40, .26);
	--ring: 0 0 0 3px rgba(249, 115, 22, .18);
}

/* --- База ------------------------------------------------------------- */

body {
	margin: 0;

	font: 400 14.5px/1.6 var(--font-sans);
	letter-spacing: -.005em;
	color: var(--ink);

	background: var(--bg);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

p {
	margin: 0 0 1rem;
	font: inherit;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
}

h1 {
	margin-bottom: .35em;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

h2 {
	margin-bottom: .5em;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
}

h3 {
	margin-bottom: .6em;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

h4, h5, h6 {
	margin-bottom: .9em;
	font-weight: 700;
}

a {
	color: var(--info-ink);
	text-decoration: none;
	transition: color .15s ease;
}

a:hover {
	color: var(--info);
	text-decoration: none;
}

hr {
	height: 0;
	margin: 1.75rem 0;
	border: 0;
	border-top: 1px solid var(--border);
}

.muted {
	color: var(--ink-soft);
}

.text-success { color: var(--success-ink); }
.text-error   { color: var(--danger-ink); }
.text-info    { color: var(--info-ink); }
.text-warning { color: var(--warning-ink); }

.slash {
	padding-right: .25em;
	color: var(--accent);
}

/* --- Каркас / карточка ------------------------------------------------- */

#wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 1040px;
	padding: 0 var(--pad);
	margin: 28px auto;

	background: var(--surface);

	border: 1px solid var(--border);
	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-card);
}

.container {
	width: 100%;
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}

#header .container:after,
#nav .container:after {
	content: "";
	display: table;
	clear: both;
}

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

#header {
	background: var(--shell);

	padding: 26px var(--pad) 22px;
	margin: 0 calc(-1 * var(--pad));

	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#header h1 {
	width: auto;
	height: auto;
	margin: 0;

	font-size: 33px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
	text-align: center;
}

#header h1 a {
	display: inline-block;

	padding-left: 0;

	background: linear-gradient(180deg, #ffffff 0%, #ffe3c2 52%, #ff9d4d 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;

	text-shadow: 0 2px 26px rgba(249, 115, 22, .38);

	border-left: none;
	border-radius: 0;

	transition: filter .2s ease;
}

#header h1 a:hover {
	color: transparent;
	text-decoration: none;
	filter: brightness(1.07);
}

/* --- Навигация --------------------------------------------------------- */

#nav {
	background: var(--shell);

	padding: 0 var(--pad);
	margin: 0 calc(-1 * var(--pad)) 28px;

	border-bottom: none;
}

#nav .container > .main-nav {
	padding: 0;
	margin: 0;
	border-top: none;
}

#nav .container > .main-nav > li {
	position: relative;
	top: auto;

	float: left;

	padding: 0;
	margin: 0 28px 0 0;

	list-style: none;

	border-top: none;
}

#nav .container > .main-nav > li:last-child {
	margin-right: 0;
}

#nav .container > .main-nav > li > a {
	position: static;
	top: auto;

	display: block;

	padding: 18px 2px;

	color: var(--shell-muted);

	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;

	border-top: none;
	border-bottom: 2px solid transparent;

	transition: color .15s ease, border-color .15s ease;
}

#nav .container > .main-nav > li > a:hover,
#nav .container > .main-nav > li.dropdown.open > a {
	color: var(--shell-ink);

	text-decoration: none;

	border-bottom-color: rgba(255, 255, 255, .28);
}

#nav .container > .main-nav > li.active a {
	padding-top: 18px;

	color: var(--shell-ink);

	border-bottom-color: var(--accent);
}

#nav .container > .main-nav > li > a > .caret {
	position: relative;
	top: -2px;

	margin-left: .45em;

	border-top-color: var(--shell-muted);
	opacity: 1;
}

#nav .container > .main-nav > li > a:hover > .caret,
#nav .container > .main-nav > li.open > a > .caret {
	border-top-color: var(--shell-ink);
}

/* Выпадающие меню навигации */
#nav .dropdown-menu a:hover {
	background-color: var(--accent-soft);
	color: var(--accent-ink);
}

#nav .dropdown-menu::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: -7px;
	left: 16px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid var(--border);
}

#nav .dropdown-menu::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -6px;
	left: 17px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--surface);
}

/* Меню в правом блоке навигации открывается по правому краю (без выхода за карточку) */
#nav .main-nav.pull-right .dropdown-menu {
	left: auto;
	right: 0;
}

#nav .main-nav.pull-right .dropdown-menu::before {
	left: auto;
	right: 16px;
}

#nav .main-nav.pull-right .dropdown-menu::after {
	left: auto;
	right: 17px;
}

/* --- Адаптивная навигация (создаётся theme.js) ------------------------- */

#responsive-nav-trigger {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;

	background: var(--surface-2);
	background-image: none;

	color: var(--ink);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;

	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);

	cursor: pointer;
}

#responsive-nav-trigger.open {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

#responsive-nav {
	position: relative;
	z-index: 1001;

	display: none;

	margin: 0 0 22px;
}

#responsive-nav-items {
	display: none;

	padding: 8px;
	margin: 0 0 18px;

	background: var(--surface);

	border: 1px solid var(--border-strong);
	border-top: none;

	border-bottom-right-radius: var(--radius-sm);
	border-bottom-left-radius: var(--radius-sm);
}

#responsive-nav-items ul {
	padding: 0;
	margin: 0;
}

#responsive-nav-items li {
	list-style: none;
}

#responsive-nav-items > li > ul > li > a {
	padding-left: 26px;
}

#responsive-nav-items a {
	display: block;

	padding: 9px 12px;

	color: var(--ink);

	font-size: 14px;
	font-weight: 600;

	border-radius: var(--radius-sm);
}

#responsive-nav-items a:hover {
	text-decoration: none;
	background: var(--surface-2);
}

#responsive-nav-items li.active a {
	color: #fff;
	text-decoration: none;
	background: var(--accent);
}

/* --- Контент ----------------------------------------------------------- */

#wrap {
	padding-bottom: 8px;
}

#sidebar {
	margin-top: 4px;
}

/* Хлебные крошки используются как заголовок страницы */
.breadcrumb {
	padding: 0;
	margin: 0 0 22px;

	list-style: none;

	background: transparent;
	border: 0;
	border-radius: 0;

	box-shadow: none;

	font-size: 13px;
	color: var(--ink-soft);
}

.breadcrumb li {
	display: inline-block;
	text-shadow: none;
}

.breadcrumb > li > a {
	color: var(--ink-muted);
}

.breadcrumb > li > a:hover {
	color: var(--accent-strong);
}

.breadcrumb .active {
	color: var(--ink);
}

.breadcrumb .divider {
	padding: 0 8px;
	color: var(--ink-soft);
}

/* Приветственный блок (hero) */
.hero-unit {
	padding: 36px 40px;
	margin: 0 0 28px;

	background: var(--surface-2);

	border: 1px solid var(--border);
	border-radius: var(--radius-lg);

	color: var(--ink);
}

.hero-unit h1 {
	margin-bottom: 10px;

	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;

	color: var(--ink);
}

.hero-unit p {
	margin-bottom: 0;

	font-size: 15px;
	color: var(--ink-muted);
}

/* --- Кнопки ------------------------------------------------------------ */

.btn {
	display: inline-block;
	vertical-align: middle;

	padding: 8px 16px;
	margin-bottom: 0;

	color: var(--ink);

	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	text-shadow: none;
	white-space: nowrap;

	background: var(--surface);
	background-image: none;

	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);

	box-shadow: var(--shadow-sm);

	cursor: pointer;

	transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .04s ease;
}

.btn:hover {
	color: var(--ink);

	background: var(--surface-2);
	border-color: var(--border-strong);

	text-decoration: none;
}

.btn:active {
	transform: translateY(1px);
}

.btn:focus,
.btn:focus-visible {
	outline: none;
	box-shadow: var(--ring);
}

.btn[disabled],
.btn.disabled {
	opacity: .55;
	box-shadow: none;
	cursor: default;
}

.btn-primary {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

.btn-primary:hover {
	color: #fff;
	background: var(--accent-strong);
	border-color: var(--accent-strong);
}

.btn-success {
	color: #fff;
	background: var(--success);
	border-color: var(--success);
}

.btn-success:hover {
	color: #fff;
	background: #138a3f;
	border-color: #138a3f;
}

.btn-info {
	color: #fff;
	background: var(--info);
	border-color: var(--info);
}

.btn-info:hover {
	color: #fff;
	background: var(--info-ink);
	border-color: var(--info-ink);
}

.btn-danger,
.btn-error {
	color: #fff;
	background: var(--danger);
	border-color: var(--danger);
}

.btn-danger:hover,
.btn-error:hover {
	color: #fff;
	background: var(--danger-ink);
	border-color: var(--danger-ink);
}

.btn-warning {
	color: #fff;
	background: var(--warning);
	border-color: var(--warning);
}

.btn-warning:hover {
	color: #fff;
	background: var(--warning-ink);
	border-color: var(--warning-ink);
}

.btn-large {
	padding: 11px 22px;
	font-size: 15px;
	border-radius: var(--radius);
}

.btn-small {
	padding: 5px 11px;
	font-size: 12px;
}

.btn-mini {
	padding: 3px 8px;
	font-size: 11px;
}

.btn-block {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.btn.span12,
input.span12 {
	box-sizing: border-box;
	width: 100%;
}

/* --- Формы ------------------------------------------------------------- */

input,
textarea,
select {
	font: inherit;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea,
select,
.uneditable-input {
	box-sizing: border-box;
	display: inline-block;

	padding: 9px 12px;

	color: var(--ink);

	font-size: 14px;
	line-height: 1.4;

	background: var(--surface);
	background-image: none;

	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);

	box-shadow: none;

	transition: border-color .15s ease, box-shadow .15s ease;
}

select {
	height: 38px;
}

textarea {
	min-height: 96px;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: var(--ring);
}

::placeholder {
	color: var(--ink-soft);
}

label {
	color: var(--ink);
	font-weight: 600;
}

.control-label {
	color: var(--ink-muted);
	font-weight: 600;
}

.checkbox,
.radio {
	color: var(--ink);
	font-weight: 400;
}

.help-block,
.help-inline {
	color: var(--ink-soft);
	font-size: 12.5px;
}

.note {
	color: var(--ink-soft);
}

.required {
	color: var(--danger);
}

.form-actions {
	padding: 16px 20px;
	margin: 20px 0 0;

	background: var(--surface-2);

	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.input-append .add-on,
.input-prepend .add-on {
	padding: 9px 12px;

	color: var(--ink-muted);

	font-size: 13px;

	background: var(--surface-2);

	border: 1px solid var(--border-strong);
	text-shadow: none;
}

/* Ошибки валидации */
input.error,
textarea.error,
.form-vertical textarea.error {
	border-color: var(--danger);
	color: var(--danger-ink);
}

.form-inline .help-block.error, .form-inline .help-inline.error,
.form-horizontal .help-block.error, .form-horizontal .help-inline.error,
.form-vertical .help-block.error, .form-vertical .help-inline.error {
	color: var(--danger-ink);
}

.form-inline label.error,
.form-horizontal label.error,
.form-vertical label.error {
	color: var(--danger-ink);
}

/* --- Таблицы ----------------------------------------------------------- */

.table {
	width: 100%;
	margin-bottom: 18px;

	color: var(--ink);

	font-size: 13.5px;

	background: var(--surface);

	border-collapse: collapse;
}

.table th,
.table td {
	padding: 10px 12px;

	vertical-align: middle;
	text-align: left;

	border-top: 1px solid var(--border);
}

.table thead th {
	vertical-align: bottom;

	color: var(--ink-muted);

	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;

	background: var(--surface-2);

	border-top: 0;
	border-bottom: 1px solid var(--border-strong);
}

.table-condensed th,
.table-condensed td {
	padding: 7px 10px;
}

.table-bordered {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;

	overflow: hidden;
}

.table-bordered th,
.table-bordered td {
	border-left: 1px solid var(--border);
}

.table-bordered th:first-child,
.table-bordered td:first-child {
	border-left: 0;
}

.table-bordered thead th {
	border-bottom: 1px solid var(--border-strong);
}

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
	background: var(--surface-2);
}

/* Контекстные строки */
.table tbody tr.success td, .table tbody tr.success th { background: var(--success-soft); }
.table tbody tr.error td,   .table tbody tr.error th   { background: var(--danger-soft); }
.table tbody tr.warning td, .table tbody tr.warning th { background: var(--warning-soft); }
.table tbody tr.info td,    .table tbody tr.info th,
.table td.info                                         { background: var(--info-soft); }

/* Подсветка строки при наведении (последней — чтобы давать отклик) */
.table tbody tr:hover td {
	background: var(--accent-soft);
}

/* Обёртка TbGridView */
.grid-view {
	padding: 0;
	background: transparent;
	border: 0;
}

.grid-view .summary {
	margin-bottom: 10px;
	color: var(--ink-soft);
	font-size: 12.5px;
}

.grid-view .empty {
	padding: 14px;
	color: var(--ink-soft);
}

/* Иконки-действия в таблицах */
a.view, a.update, a.delete, a.download {
	color: var(--ink-muted);
	margin: 0 3px;
}

a.view:hover, a.update:hover, a.download:hover {
	color: var(--info-ink);
}

a.delete:hover {
	color: var(--danger-ink);
}

/* --- Оповещения -------------------------------------------------------- */

.alert {
	position: relative;

	padding: 12px 40px 12px 16px;
	margin-bottom: 18px;

	color: var(--ink);

	font-size: 13.5px;
	text-shadow: none;

	background: var(--surface-2);

	border: 1px solid var(--border);
	border-left: 3px solid var(--border-strong);
	border-radius: var(--radius-sm);
}

.alert h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: inherit;
}

.alert-success { color: var(--success-ink); background: var(--success-soft); border-color: var(--success-border); border-left-color: var(--success); }
.alert-info    { color: var(--info-ink);    background: var(--info-soft);    border-color: var(--info-border);    border-left-color: var(--info); }
.alert-error,
.alert-danger  { color: var(--danger-ink);  background: var(--danger-soft);  border-color: var(--danger-border);  border-left-color: var(--danger); }
.alert-warning { color: var(--warning-ink); background: var(--warning-soft); border-color: var(--warning-border); border-left-color: var(--warning); }

.alert .close {
	position: absolute;
	top: 8px;
	right: 12px;
}

.close {
	float: right;

	color: var(--ink-soft);

	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-shadow: none;

	background: none;
	border: 0;

	opacity: 1;
	cursor: pointer;
}

.close:hover {
	color: var(--ink);
	opacity: 1;
}

/* --- Метки и счётчики -------------------------------------------------- */

.label,
.badge {
	display: inline-block;

	padding: 2px 8px;

	color: #fff;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	text-shadow: none;
	white-space: nowrap;

	background: var(--ink-soft);
	border-radius: 999px;
}

.label {
	border-radius: 6px;
}

.label-success,  .badge-success   { background: var(--success); }
.label-important, .badge-important,
.label-danger                     { background: var(--danger); }
.label-warning,  .badge-warning   { background: var(--warning); }
.label-info,     .badge-info      { background: var(--info); }
.label-inverse,  .badge-inverse   { background: var(--ink); }

/* --- Вкладки (админцентр) ---------------------------------------------- */

.nav-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;

	margin: 0;
	padding: 0;

	list-style: none;

	border-bottom: 1px solid var(--border);
}

.nav-tabs > li {
	margin-bottom: -1px;
	list-style: none;
}

.nav-tabs > li > a {
	display: block;

	padding: 10px 16px;

	color: var(--ink-muted);

	font-size: 13.5px;
	font-weight: 600;

	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-tabs > li > a:hover {
	color: var(--ink);
	text-decoration: none;
	background: var(--surface-2);
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
	color: var(--ink);
	background: var(--surface);
	border-color: var(--border);
	border-bottom-color: var(--surface);
}

.tab-content {
	padding: 18px 2px;
}

ul.inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	margin: 0;
	padding: 0;

	list-style: none;
}

ul.inline > li {
	padding: 0;
	list-style: none;
}

/* --- Боковое меню / портлеты / well ----------------------------------- */

.well {
	padding: 18px 20px;

	background: var(--surface-2);

	border: 1px solid var(--border);
	border-radius: var(--radius);

	box-shadow: none;
}

.well-small {
	padding: 12px;
}

.portlet {
	margin-bottom: 18px;

	background: var(--surface);

	border: 1px solid var(--border);
	border-radius: var(--radius);

	overflow: hidden;
}

.portlet-decoration {
	padding: 12px 16px;

	background: var(--surface-2);

	border-bottom: 1px solid var(--border);
}

.portlet-title {
	color: var(--ink-muted);

	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.portlet-content {
	padding: 10px;
}

.nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list > li {
	list-style: none;
}

.nav-list > li > a {
	display: block;

	padding: 8px 12px;
	margin: 2px 0;

	color: var(--ink-muted);

	font-size: 13.5px;
	font-weight: 600;
	text-shadow: none;

	border-radius: var(--radius-sm);
}

.nav-list > li > a:hover {
	color: var(--ink);
	text-decoration: none;
	background: var(--surface-2);
}

.nav-list > .active > a,
.nav-list > .active > a:hover {
	color: #fff;
	background: var(--accent);
}

.nav-list > li > a > i {
	margin-right: 8px;
	color: inherit;
}

.nav-list .divider {
	height: 1px;
	margin: 8px 0;
	background: var(--border);
}

/* --- Пагинация --------------------------------------------------------- */

.pagination {
	margin: 14px 0;
}

.pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;

	margin: 0;
	padding: 0;

	border-radius: 0;
	box-shadow: none;
}

.pagination ul > li {
	display: inline;
}

.pagination ul > li > a,
.pagination ul > li > span {
	display: inline-block;

	min-width: 18px;
	padding: 7px 12px;

	color: var(--ink-muted);

	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	background: var(--surface);

	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
}

.pagination ul > li > a:hover {
	color: var(--ink);
	background: var(--surface-2);
	border-color: var(--border-strong);
}

.pagination ul > .active > a,
.pagination ul > .active > span {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

.pagination ul > .disabled > a,
.pagination ul > .disabled > span {
	opacity: .5;
}

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

.modal {
	background: var(--surface);
	background-clip: padding-box;

	border: 1px solid var(--border);
	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-pop);
}

.modal-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}

.modal-header h3,
.modal-header h4 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.modal-header .close {
	margin-top: 2px;
}

.modal-body {
	padding: 20px;
}

.modal-footer {
	padding: 14px 20px;

	text-align: right;

	background: var(--surface-2);

	border-top: 1px solid var(--border);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);

	box-shadow: none;
}

.modal-backdrop,
.modal-backdrop.fade.in {
	background: #0b1220;
	opacity: .5;
}

/* --- Выпадающие меню (общие) ------------------------------------------- */

.dropdown-menu {
	min-width: 200px;
	padding: 6px;
	margin: 6px 0 0;

	background: var(--surface);
	background-clip: padding-box;

	border: 1px solid var(--border);
	border-radius: var(--radius);

	box-shadow: var(--shadow-pop);
}

.dropdown-menu > li > a {
	display: block;

	padding: 8px 10px;

	color: var(--ink);

	font-size: 13px;
	font-weight: 600;

	border-radius: var(--radius-sm);
}

.dropdown-menu > li > a:hover {
	color: var(--accent-ink);
	text-decoration: none;
	background: var(--accent-soft);
}

.dropdown-menu i {
	margin-right: 8px;
	font-size: 14px;
}

.dropdown-menu .divider,
.dropdown-menu li hr {
	height: 1px;
	margin: 6px 4px;
	background: var(--border);
	border: 0;
}

.dropdown-menu form {
	padding: 6px 8px;
}

.dropdown-menu form input[type="text"],
.dropdown-menu form input[type="password"] {
	width: 100%;
	margin-bottom: 8px;
}

/* --- Подвал ------------------------------------------------------------ */

#copyright {
	clear: both;

	padding: 18px var(--pad);
	margin: 0 calc(-1 * var(--pad));

	color: var(--ink-soft);

	font-size: 12px;
	text-transform: none;

	background: var(--shell-2);

	border-top: none;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);

	box-shadow: none;
}

#copyright .row {
	display: flex;
	align-items: center;
	gap: 12px;

	margin: 0;
}

#copyright .grid-6 {
	width: auto;
	float: none;
	margin: 0;
}

#copyright #rights {
	flex: 1 1 0;
	text-align: left;
}

#copyright #totop {
	flex: 1 1 0;
	text-align: right;
}

#copyright b {
	color: #e2e8f0;
}

#copyright a {
	color: #cbd5e1;
}

#copyright a:hover {
	color: #fff;
	text-decoration: none;
}

#copyright .footer-vk {
	flex: 0 0 auto;
}

#copyright .vk-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 6px 13px;

	color: #fff;

	font-size: 12px;
	font-weight: 600;

	background: #0077ff;

	border-radius: 999px;

	transition: background-color .15s ease, transform .04s ease;
}

#copyright .vk-link:hover {
	color: #fff;
	background: #0a66d6;
}

#copyright .vk-link:active {
	transform: translateY(1px);
}

#copyright .vk-link svg {
	flex: none;
	display: block;
}

/* --- Прелоадер --------------------------------------------------------- */

#loading {
	display: none;
	position: fixed;
	top: 40%;
	left: 50%;
	z-index: 1150;

	transform: translate(-50%, -50%);

	text-align: center;
}

#loading h1 {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-muted);
}

.circle {
	width: 46px;
	height: 46px;
	margin: 0 auto;

	background-color: transparent;

	border: 4px solid var(--accent);
	border-right-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;

	box-shadow: none;

	animation: spinPulse 1s infinite linear;
	-webkit-animation: spinPulse 1s infinite linear;
	-moz-animation: spinPulse 1s infinite ease-in-out;
	-o-animation: spinPulse 1s infinite linear;
}

.circle1 {
	position: relative;
	top: -46px;

	width: 28px;
	height: 28px;
	margin: 0 auto;

	background-color: transparent;

	border: 4px solid var(--accent);
	border-left-color: transparent;
	border-right-color: transparent;
	border-radius: 50%;

	box-shadow: none;

	animation: spinoffPulse 1s infinite linear;
	-webkit-animation: spinoffPulse 1s infinite linear;
	-moz-animation: spinoffPulse 1s infinite linear;
	-o-animation: spinoffPulse 1s infinite linear;
}

@keyframes spinPulse {
	0%   { transform: rotate(160deg); opacity: 0; }
	50%  { transform: rotate(145deg); opacity: 1; }
	100% { transform: rotate(-320deg); opacity: 0; }
}
@keyframes spinoffPulse {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@-webkit-keyframes spinPulse {
	0%   { -webkit-transform: rotate(160deg); opacity: 0; }
	50%  { -webkit-transform: rotate(145deg); opacity: 1; }
	100% { -webkit-transform: rotate(-320deg); opacity: 0; }
}
@-webkit-keyframes spinoffPulse {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spinPulse {
	0%   { -moz-transform: rotate(160deg); opacity: 0; }
	50%  { -moz-transform: rotate(145deg); opacity: 1; }
	100% { -moz-transform: rotate(-320deg); opacity: 0; }
}
@-moz-keyframes spinoffPulse {
	0%   { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); }
}

/* --- Кастомная сетка (оставлена без изменений) ------------------------- */

.row {
	margin-left: 0;
}

.grid-1 { width: 55px; }
.grid-2 { width: 130px; }
.grid-3 { width: 205px; }
.grid-4 { width: 280px; }
.grid-5 { width: 355px; }
.grid-6 { width: 430px; }
.grid-7 { width: 505px; }
.grid-8 { width: 580px; }
.grid-9 { width: 655px; }
.grid-10 { width: 730px; }
.grid-11 { width: 805px; }
.grid-12 { width: 880px; }

.append-12 { padding-right: 900px; }
.append-11 { padding-right: 825px; }
.append-10 { padding-right: 750px; }
.append-9 { padding-right: 675px; }
.append-8 { padding-right: 600px; }
.append-7 { padding-right: 525px; }
.append-6 { padding-right: 450px; }
.append-5 { padding-right: 375px; }
.append-4 { padding-right: 300px; }
.append-3 { padding-right: 225px; }
.append-2 { padding-right: 150px; }
.append-1 { padding-right: 75px; }

.prepend-12 { padding-left: 900px; }
.prepend-11 { padding-left: 825px; }
.prepend-10 { padding-left: 750px; }
.prepend-9 { padding-left: 675px; }
.prepend-8 { padding-left: 600px; }
.prepend-7 { padding-left: 525px; }
.prepend-6 { padding-left: 450px; }
.prepend-5 { padding-left: 375px; }
.prepend-4 { padding-left: 300px; }
.prepend-3 { padding-left: 225px; }
.prepend-2 { padding-left: 150px; }
.prepend-1 { padding-left: 75px; }

.row [class^="grid-"]:first-child {
	margin-left: 0;
}

.row.nopad [class^="grid-"] {
	margin-bottom: 0;
}

.row.divider:last-child {
	margin-bottom: 0;
	border: none;
}

.row-divider {
	margin: 1.5em 0 2em;
	border: none;
	border-bottom: 1px solid var(--border);
}

.row [class^="grid-"] {
	float: left;
}

/* --- Clearfix ---------------------------------------------------------- */

.clearfix,
.row { zoom: 1; }
.clearfix:before,
.row:before,
.clearfix:after,
.row:after { content: ""; display: table; }
.clearfix:after,
.row:after { clear: both; }