@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--cs-bg: #0a0c10;
	--cs-bg-sidebar: #0f1117;
	--cs-bg-header: #0f1117;
	--cs-bg-card: #151922;
	--cs-bg-pill: #1a1f2b;
	--cs-bg-hover: #1e2433;
	--cs-border: rgba(255, 255, 255, 0.06);
	--cs-text: #eef0f4;
	--cs-text-dim: #7d8496;
	--cs-accent: #5c6cff;
	--cs-accent-hover: #7080ff;
	--cs-gold: #f0b429;
	--cs-green: #3dd68c;
	--cs-moon: #c8d4f0;
	--cs-moon-bright: #eef2ff;
	--cs-moon-glow: rgba(186, 205, 255, 0.28);
	--cs-moon-bg: rgba(186, 205, 255, 0.08);
	--cs-moon-border: rgba(200, 212, 240, 0.24);
	--cs-radius: 14px;
	--cs-radius-sm: 10px;
	--cs-sidebar: 232px;
	--cs-chat: 320px;
	--cs-chat-offset: var(--cs-chat);
	--cs-chat-height: calc(100vh - var(--cs-header));
	--cs-header: 60px;
}

body.cs-chat-collapsed {
	--cs-chat-offset: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	overflow-x: hidden;
	background: var(--cs-bg) !important;
	color: var(--cs-text) !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; }

/* Убираем белую обводку при клике / фокусе */
.cs-app button:focus,
.cs-app button:active,
.cs-app a:focus,
.cs-app a:active,
.cs-app .btn:focus,
.cs-app .btn:active,
.cs-app [tabindex]:focus {
	outline: none !important;
	box-shadow: none;
}

.cs-app button::-moz-focus-inner,
.cs-app input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* ========== APP SHELL ========== */
.cs-app {
	display: flex;
	min-height: 100vh;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	background: var(--cs-bg);
}

.cs-sidebar {
	width: var(--cs-sidebar);
	flex-shrink: 0;
	background: var(--cs-bg-sidebar);
	border-right: 1px solid var(--cs-border);
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 200;
	padding: 22px 14px 18px;
	overflow-x: hidden;
}

.cs-sidebar-head {
	padding: 8px 6px 18px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cs-sidebar-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: opacity 0.15s;
	line-height: 0;
}

.cs-sidebar-brand:hover {
	opacity: 0.88;
}

.cs-logo {
	display: block;
	padding: 0;
	line-height: 0;
	color: inherit;
	text-decoration: none;
}

.cs-sidebar-brand__logo,
.cs-logo img {
	display: block;
	height: 38px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.cs-header-online {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0;
	min-height: 32px;
}

.cs-header-online__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #5c9dff;
	box-shadow:
		0 0 0 3px rgba(92, 157, 255, 0.14),
		0 0 14px rgba(92, 157, 255, 0.55);
	flex-shrink: 0;
}

#servers-line .cs-header-online__dot--info,
#servers-line .cs-header-online__dot--success,
#servers-line .cs-header-online__dot--warning,
#servers-line .cs-header-online__dot--danger {
	background: #5c9dff;
	box-shadow:
		0 0 0 3px rgba(92, 157, 255, 0.14),
		0 0 14px rgba(92, 157, 255, 0.55);
}

.cs-header-online__dot--info {
	background: var(--cs-accent);
	box-shadow: 0 0 8px rgba(92, 108, 255, 0.55);
}

.cs-header-online__dot--success {
	background: #3ecf8e;
	box-shadow: 0 0 8px rgba(62, 207, 142, 0.45);
}

.cs-header-online__dot--warning {
	background: #f0b429;
	box-shadow: 0 0 8px rgba(240, 180, 41, 0.45);
}

.cs-header-online__dot--danger {
	background: #f05d5e;
	box-shadow: 0 0 8px rgba(240, 93, 94, 0.45);
}

.cs-header-online__count {
	font-size: 15px;
	font-weight: 700;
	color: #f3f5f9;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	min-width: 1.25em;
}

.cs-logo:hover {
	opacity: 0.9;
}

.cs-nav {
	flex: 1;
	overflow-y: auto;
	padding: 0 4px;
}

.cs-nav > li,
.cs-nav li {
	margin-bottom: 2px;
}

.cs-nav > li > a,
.cs-nav > li:not(.collapsible) > a,
#nav > .collapsible > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: var(--cs-radius-sm);
	color: var(--cs-text-dim) !important;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s, color 0.15s;
	border: none;
	outline: none;
}

#nav > .collapsible > a {
	cursor: pointer;
	user-select: none;
}

#nav > .collapsible > a::after {
	content: '';
	margin-left: auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--cs-text-dim);
	border-top: 1.5px solid var(--cs-text-dim);
	transform: rotate(45deg);
	opacity: 0.45;
	flex-shrink: 0;
}

.cs-nav > li > a:hover,
.cs-nav > li:not(.collapsible) > a:hover,
#nav > .collapsible > a:hover {
	background: var(--cs-bg-hover);
	color: var(--cs-text) !important;
}

/* Текущая страница */
.cs-nav > li.active > a {
	background: var(--cs-bg-hover);
	color: var(--cs-text) !important;
}

/* Flyout открыт, но это не текущий раздел — без «ложной» подсветки */
#nav > .collapsible.is-open:not(.active) > a {
	background: rgba(255, 255, 255, 0.03);
	color: var(--cs-text-dim) !important;
}

/* Подменю — flyout справа, только пункты верхнего уровня */
#nav > .collapsible > ul {
	display: none !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 8px !important;
	position: fixed !important;
	left: calc(var(--cs-sidebar) + 6px);
	min-width: 300px;
	max-width: 340px;
	max-height: calc(100vh - 40px);
	overflow-x: hidden;
	overflow-y: auto;
	background: #151922 !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: var(--cs-radius) !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
	z-index: 300;
}

#nav > .collapsible.is-open > ul {
	display: block !important;
}

#nav > .collapsible > ul > li {
	margin: 0;
}

#nav > .collapsible > ul > li > a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--cs-radius-sm);
	color: var(--cs-text) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	transition: background 0.15s;
	border: none;
	outline: none;
	background: transparent;
}

#nav > .collapsible > ul > li > a:hover {
	background: var(--cs-bg-hover);
	color: #fff !important;
}

#nav > .collapsible > ul > li > a img,
#nav > .collapsible > ul > li > a .glyphicon,
#nav > .collapsible > ul > li > a .fas,
#nav > .collapsible > ul > li > a .fa {
	width: 36px;
	height: 36px;
	min-width: 36px;
	padding: 8px;
	border-radius: 10px;
	background: var(--cs-bg-pill);
	object-fit: contain;
	display: grid;
	place-items: center;
	font-size: 16px;
	opacity: 1;
}

.cs-flyout-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.cs-flyout-desc {
	font-size: 12px;
	font-weight: 400;
	color: var(--cs-text-dim);
	line-height: 1.4;
}

/* Перебиваем primary.css и mix.js accordion */
#nav li ul {
	margin: 0 !important;
}

.cs-nav img,
.cs-nav i,
.cs-nav .glyphicon,
.cs-nav .fas,
.cs-nav .fa {
	width: 18px;
	text-align: center;
	flex-shrink: 0;
	opacity: 0.85;
}

.cs-sidebar-user {
	margin-top: auto;
	padding: 14px 10px 10px;
	border-top: 1px solid var(--cs-border);
}

.cs-sidebar-user-card {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.cs-sidebar-user-card img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.cs-sidebar-user-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--cs-text);
}

.cs-sidebar-user-role {
	font-size: 12px;
	color: var(--cs-text-dim);
}

.cs-sidebar-footer {
	margin-top: auto;
	padding: 16px 10px 10px;
	border-top: 1px solid var(--cs-border);
}

.cs-sidebar-footer:empty {
	display: none;
	padding: 0;
	border-top: none;
}

.cs-sidebar-social {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0;
}

.cs-sidebar-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--cs-text-dim);
	text-decoration: none;
	transition: opacity 0.15s, transform 0.15s;
}

.cs-sidebar-social__link:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.cs-sidebar-social__icon {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
	opacity: 0.58;
	transition: opacity 0.15s;
}

.cs-sidebar-social__link:hover .cs-sidebar-social__icon {
	opacity: 0.95;
}

.cs-sidebar-social__link--steam:hover .cs-sidebar-social__icon {
	opacity: 1;
}

.cs-sidebar-social__link--vk:hover .cs-sidebar-social__icon {
	opacity: 1;
}

.cs-sidebar-social__link--telegram:hover .cs-sidebar-social__icon {
	opacity: 1;
}

.cs-sidebar-social__link--discord:hover .cs-sidebar-social__icon {
	opacity: 1;
}

.cs-sidebar-social__link--youtube:hover .cs-sidebar-social__icon {
	opacity: 1;
}

.cs-main {
	flex: 1;
	margin-left: var(--cs-sidebar);
	width: calc(100% - var(--cs-sidebar));
	max-width: calc(100% - var(--cs-sidebar));
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
}

.cs-body {
	flex: 1;
	display: flex;
	align-items: stretch;
	min-height: 0;
	min-width: 0;
	margin-top: var(--cs-header);
	padding-right: var(--cs-chat-offset);
	box-sizing: border-box;
	transition: padding-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-page {
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 22px 28px 40px;
	max-width: none;
	width: auto;
	-webkit-overflow-scrolling: touch;
}

.cs-header {
	height: var(--cs-header);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	background: var(--cs-bg-header);
	border-bottom: 1px solid var(--cs-border);
	position: fixed;
	top: 0;
	left: var(--cs-sidebar);
	right: 0;
	width: auto;
	z-index: 150;
	box-sizing: border-box;
}

.cs-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cs-burger {
	display: none;
	width: 38px;
	height: 38px;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-bg-pill);
	color: var(--cs-text);
	cursor: pointer;
}

.cs-burger.is-active .glyphicon-menu-hamburger::before {
	content: '\e014';
}

.cs-game-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: var(--cs-bg-pill);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--cs-text);
}

.cs-header-right {
	display: flex;
	align-items: center;
}

.cs-header-tools {
	display: flex;
	align-items: center;
	gap: 0;
}

.cs-header-tools .cs-balance {
	margin-right: 10px;
}

.cs-header-topup {
	margin-right: 12px;
	padding: 8px 14px !important;
	font-size: 13px !important;
	line-height: 1;
	white-space: nowrap;
}

.cs-header-icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cs-header .cs-header-icons .cs-icon-btn,
.cs-header .cs-header-icons .cs-header-chat-open {
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	display: grid;
	place-items: center;
	background: transparent;
	border: none;
	border-radius: 0;
	color: var(--cs-text-dim);
	font-size: 16px;
	line-height: 1;
}

.cs-header .cs-header-icons .cs-icon-btn:hover,
.cs-header .cs-header-icons .cs-header-chat-open:hover {
	background: transparent;
	color: var(--cs-text);
}

.cs-header .cs-header-icons .cs-icon-btn .cs-notify-dot {
	top: 6px;
	right: 6px;
}

.cs-header-tools .cs-profile {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0 4px 0 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.cs-header-tools .cs-profile img {
	width: 32px;
	height: 32px;
}

.cs-profile-caret {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--cs-text-dim);
	border-bottom: 1.5px solid var(--cs-text-dim);
	transform: rotate(45deg);
	margin-top: -3px;
	transition: transform 0.22s ease, border-color 0.15s ease;
	flex-shrink: 0;
}

.cs-header-profile.open .cs-profile-caret {
	transform: rotate(-135deg);
	margin-top: 2px;
}

.cs-header-tools .cs-profile:hover .cs-profile-caret,
.cs-header-tools .cs-profile:focus .cs-profile-caret {
	border-color: var(--cs-text);
}

.cs-header-tools .cs-profile:hover,
.cs-header-tools .cs-profile:focus {
	background: transparent;
	color: var(--cs-text);
	opacity: 0.9;
	outline: none;
}

.cs-header-profile .dropdown-menu {
	display: block !important;
	margin-top: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top right;
	transition:
		opacity 0.22s ease,
		transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.22s ease;
	pointer-events: none;
}

.cs-header-profile.open .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.cs-header-profile .dropdown-menu,
	.cs-profile-caret {
		transition: none !important;
		transform: none !important;
	}

	.cs-header-profile.open .cs-profile-caret {
		transform: none;
		margin-top: -3px;
	}
}

.cs-balance {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	font-weight: 700;
	font-size: 14px;
	color: var(--cs-text);
}

.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	border: none;
	border-radius: var(--cs-radius-sm);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	text-decoration: none !important;
}

.cs-btn:active { transform: scale(0.98); }

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

.cs-btn-primary:hover {
	background: var(--cs-accent-hover);
	color: #fff !important;
}

.cs-btn-balance {
	background:
		linear-gradient(135deg, rgba(210, 220, 255, 0.12) 0%, rgba(140, 160, 220, 0.05) 100%);
	border: 1px solid var(--cs-moon-border);
	color: var(--cs-moon) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 0 0 0 transparent;
	text-shadow: 0 0 14px rgba(186, 205, 255, 0.18);
	transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.cs-btn-balance::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d8e2ff 45%, #a8b8e8 100%);
	box-shadow: 0 0 10px rgba(200, 215, 255, 0.45);
	flex-shrink: 0;
}

.cs-btn-balance:hover {
	background:
		linear-gradient(135deg, rgba(220, 230, 255, 0.18) 0%, rgba(160, 180, 235, 0.1) 100%);
	border-color: rgba(220, 230, 255, 0.42);
	color: var(--cs-moon-bright) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 0 20px var(--cs-moon-glow);
}

.cs-btn-ghost {
	background: var(--cs-bg-pill);
	border: 1px solid var(--cs-border);
	color: var(--cs-text) !important;
}

.cs-btn-ghost:hover {
	background: var(--cs-bg-hover);
}

.cs-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.cs-icon-btn {
	width: 38px;
	height: 38px;
	border-radius: var(--cs-radius-sm);
	background: var(--cs-bg-pill);
	border: 1px solid var(--cs-border);
	color: var(--cs-text-dim);
	display: grid;
	place-items: center;
	cursor: pointer;
	position: relative;
}

.cs-icon-btn:hover {
	background: var(--cs-bg-hover);
	color: var(--cs-text);
}

.cs-notify-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ef4444;
}

.cs-notify-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 0 0 2px var(--cs-bg-header);
}

.cs-header .cs-header-icons .cs-icon-btn .cs-notify-badge {
	top: 4px;
	right: 4px;
}

.cs-profile {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	background: var(--cs-bg-pill);
	border: 1px solid var(--cs-border);
	border-radius: 999px;
	cursor: pointer;
	color: var(--cs-text);
}

.cs-profile img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
}

.cs-profile-avatar-wrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.cs-pm-badge {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 999px;
	background: #ef4444 !important;
	color: #fff !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--cs-bg-header);
}

.cs-pm-badge:not(.disp-n) {
	display: inline-flex !important;
}

.cs-pm-badge--profile {
	position: absolute;
	top: -3px;
	right: -3px;
	z-index: 2;
	pointer-events: none;
}

.cs-header-messages-link {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.cs-header-messages-link__label {
	flex: 1 1 auto;
}

.cs-pm-badge--menu {
	flex: 0 0 auto;
	min-width: 18px;
	height: 18px;
	font-size: 11px;
	box-shadow: none;
}

.cs-pm-toast-stack {
	position: fixed;
	right: 20px;
	bottom: 20px;
	top: auto;
	z-index: 10050;
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	width: min(380px, calc(100vw - 40px));
	pointer-events: none;
}

.cs-pm-toast {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 38px 12px 12px;
	border-radius: 12px;
	border: 1px solid rgba(92, 108, 255, 0.22);
	border-left: 3px solid var(--cs-accent);
	background: linear-gradient(135deg, rgba(24, 28, 42, 0.98), rgba(14, 17, 26, 0.98));
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
	color: #fff;
	cursor: pointer;
	outline: none;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.cs-pm-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.cs-pm-toast:focus,
.cs-pm-toast:focus-visible {
	outline: none;
	box-shadow: 0 16px 42px rgba(0, 0, 0, 0.42);
}

.cs-pm-toast__avatar-wrap {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.cs-pm-toast__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cs-pm-toast__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cs-pm-toast__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cs-pm-toast__text {
	font-size: 12px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.72);
}

.cs-pm-toast__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.cs-pm-toast__close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.cs-pm-toast:hover {
	border-color: rgba(92, 108, 255, 0.38);
}

.cs-modes-bar .cs-filter {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--cs-bg-pill);
	border: 1px solid var(--cs-border);
	color: var(--cs-text-dim);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-modes-bar .cs-filter:hover,
.cs-modes-bar .cs-filter.is-active {
	background: var(--cs-bg-hover);
	color: var(--cs-text);
	border-color: rgba(92, 108, 255, 0.35);
}

.cs-header-logo {
	width: 46px;
	height: 46px;
	object-fit: contain;
	flex-shrink: 0;
	margin-left: 4px;
}

/* ========== HOME: всплывающие уведомления ========== */
#notifications_line.cs-home-notifications {
	padding: 0;
	background: var(--cs-bg-card);
	border-radius: var(--cs-radius);
	color: inherit;
}

.cs-home-notifications {
	margin-bottom: 18px;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	background: var(--cs-bg-card);
	overflow: hidden;
}

.cs-home-notifications__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--cs-bg-pill);
	border-bottom: 1px solid var(--cs-border);
}

.cs-home-notifications__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-text);
}

.cs-home-notifications__label .glyphicon {
	font-size: 13px;
	color: var(--cs-accent);
}

.cs-home-notifications__hide {
	flex-shrink: 0;
	padding: 5px 12px;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-sm);
	background: transparent;
	color: var(--cs-text-dim);
	font-size: 12px;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cs-home-notifications__hide:hover {
	border-color: var(--cs-accent);
	color: var(--cs-text);
	background: rgba(99, 102, 241, 0.08);
}

.cs-home-notifications__list {
	padding: 12px 14px 2px;
}

.cs-home-notifications__list .bs-callout:last-child {
	margin-bottom: 10px;
}

/* ========== HOME: главная страница ========== */
.cs-home-page {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.cs-home-panel {
	margin-bottom: 0;
}

.cs-home-panel--servers {
	margin-bottom: 0;
}

.cs-home-servers {
	min-width: 0;
}

.cs-home-servers .cs-servers-grid {
	width: 100%;
}

.cs-home-feed-block:empty {
	display: none;
}

.cs-home-intro {
	margin-bottom: 4px;
}

.cs-home-intro__eyebrow {
	display: inline-block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cs-moon);
}

.cs-home-intro__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--cs-text-dim);
}

/* Sidebar widgets */
.cs-home-sidebar {
	position: sticky;
	top: calc(var(--cs-header) + 16px);
}

.cs-home-widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.cs-home-widget-head__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--cs-text);
}

.cs-home-widget-head__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(92, 108, 255, 0.14);
	border: 1px solid rgba(92, 108, 255, 0.24);
	font-size: 11px;
	font-weight: 700;
	color: #c8d0ff;
	flex-shrink: 0;
}

.cs-home-widget-head__count--muted {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--cs-border);
	color: var(--cs-text-dim);
}

.cs-home-widget-head__inline-count {
	margin-left: 4px;
	font-weight: 600;
	color: var(--cs-text-dim);
}

#users_online_number_class.info {
	background: rgba(56, 189, 248, 0.14);
	border-color: rgba(56, 189, 248, 0.35);
	color: #7dd3fc;
}

#users_online_number_class.success {
	background: rgba(74, 222, 128, 0.14);
	border-color: rgba(74, 222, 128, 0.35);
	color: #86efac;
}

#users_online_number_class.warning {
	background: rgba(251, 191, 36, 0.14);
	border-color: rgba(251, 191, 36, 0.35);
	color: #fcd34d;
}

#users_online_number_class.danger {
	background: rgba(248, 113, 113, 0.14);
	border-color: rgba(248, 113, 113, 0.35);
	color: #fca5a5;
}

/* Сейчас онлайн — как в standart (#online_users a) */
.cs-home-sidebar .cs-home-online-list.cs-forum-widget__body {
	display: block;
	padding: 0 !important;
	max-height: 320px;
	overflow-y: auto !important;
	margin: 0 !important;
}

.cs-home-sidebar .cs-home-online-list .online_user {
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	line-height: inherit !important;
	white-space: normal !important;
	list-style: none;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user {
	display: block;
	height: 60px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	overflow: hidden;
	box-sizing: border-box;
	text-decoration: none;
	background: transparent;
	transition: background 0.12s;
}

.cs-home-sidebar #online_users.cs-home-online-list .online_user:last-child .cs-home-online-user {
	border-bottom: none;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user:hover {
	background: rgba(255, 255, 255, 0.03);
	text-decoration: none;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__avatar-wrap {
	float: left;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	position: relative;
	line-height: 0;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__avatar {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__avatar-wrap::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4ade80;
	border: 2px solid var(--cs-bg-card);
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__name,
.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__group {
	display: block;
	line-height: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: 50px;
	float: none;
	width: auto;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__name {
	font-size: 14px;
	font-weight: 500;
}

.cs-home-sidebar #online_users.cs-home-online-list .cs-home-online-user__group {
	font-size: 13px;
	color: var(--cs-text-dim);
}

.cs-home-online-list .empty-element {
	display: block;
	padding: 12px 14px;
	font-size: 13px;
	color: var(--cs-text-dim);
}

/* Сегодня были — nick, nick */
.cs-home-sidebar #load_last_online.cs-home-visits-text {
	display: block !important;
	flex-direction: unset !important;
}

.cs-home-visits-text {
	display: block !important;
	padding: 14px 16px 16px !important;
	font-size: 13px;
	line-height: 1.85;
	color: var(--cs-text-dim);
	word-wrap: break-word;
}

.cs-home-visits-text a {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s;
	white-space: normal;
	word-break: break-word;
}

.cs-home-visits-text a:not(:last-of-type)::after {
	content: ', ';
	font-weight: 400;
	color: var(--cs-text-dim);
}

.cs-home-visits-text a:hover {
	opacity: 0.85;
	text-decoration: none;
}

.cs-home-visits-text .empty-element {
	display: block;
	font-size: 13px;
	color: var(--cs-text-dim);
}

.cs-home-sidebar .cs-forum-widget__body:has(.cs-forum-widget-item) {
	gap: 0;
	padding: 4px 0;
}

.cs-home-sidebar .cs-forum-widget-item {
	padding: 9px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	margin: 0;
}

.cs-home-sidebar .cs-forum-widget-item:last-child {
	border-bottom: none;
}

.cs-home-sidebar__banner:empty {
	display: none;
}

/* Слайдер — как в standart */
.cs-home-slider {
	border-radius: var(--cs-radius);
	overflow: hidden;
	border: 1px solid var(--cs-border);
	background: var(--cs-bg-card);
	margin-bottom: 0;
}

.cs-home-slider__carousel,
.cs-home-slider #main-slider.carousel {
	position: relative;
	margin: 0;
}

.cs-home-slider .carousel-inner {
	position: relative;
	overflow: hidden;
	height: 360px;
}

.cs-home-slider .carousel-inner > .item {
	height: 100%;
	overflow: hidden;
	line-height: 0;
}

.cs-home-slider.carousel-fade .carousel-inner > .item {
	display: block !important;
	position: absolute;
	inset: 0;
	left: 0 !important;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	-webkit-transition: opacity 0.55s ease-in-out;
	-o-transition: opacity 0.55s ease-in-out;
	transition: opacity 0.55s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cs-home-slider.carousel-fade .carousel-inner > .item.next,
.cs-home-slider.carousel-fade .carousel-inner > .item.prev {
	left: 0 !important;
}

.cs-home-slider.carousel-fade .carousel-inner > .item.active {
	opacity: 1;
	z-index: 2;
}

.cs-home-slider.carousel-fade .carousel-inner > .item.active.left,
.cs-home-slider.carousel-fade .carousel-inner > .item.active.right {
	left: 0 !important;
	opacity: 0;
	z-index: 1;
}

.cs-home-slider.carousel-fade .carousel-inner > .item.next.left,
.cs-home-slider.carousel-fade .carousel-inner > .item.prev.right {
	left: 0 !important;
	opacity: 1;
	z-index: 2;
}

.cs-home-slider .carousel-inner > .item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.cs-home-slider__slide-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.cs-home-slider__slide-link:hover,
.cs-home-slider__slide-link:focus {
	color: inherit;
	text-decoration: none;
}

.cs-home-slider .carousel-inner > .item .carousel-caption,
.cs-home-slider .cs-home-slider__caption {
	position: absolute;
	top: 10%;
	right: 2%;
	left: 6%;
	bottom: auto !important;
	z-index: 2;
	width: auto;
	max-width: 58%;
	padding: 0;
	display: block;
	text-align: left;
	background: none;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.cs-home-slider__title {
	margin: 0;
	font-size: 230%;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	max-width: 100%;
}

.cs-home-slider__text {
	margin: 20px 0;
	max-width: 520px;
	font-size: 14px;
	line-height: 1.5;
	color: #ddd;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.cs-home-slider__nav-group {
	position: absolute;
	right: 20px;
	bottom: 22px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.cs-home-slider .carousel-control,
.cs-home-slider__nav {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex: 0 0 36px;
	box-sizing: border-box;
	line-height: 1 !important;
	vertical-align: top;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.12) !important;
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	box-shadow:
		0 4px 18px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.24);
	background-image: none !important;
	filter: none !important;
	opacity: 1 !important;
	text-shadow: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cs-home-slider .carousel-control.left,
.cs-home-slider .carousel-control.right,
.cs-home-slider__nav--prev,
.cs-home-slider__nav--next {
	left: auto !important;
	right: auto !important;
}

.cs-home-slider .carousel-control:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.36) !important;
}

.cs-home-slider .carousel-control:focus {
	outline: none;
}

.cs-home-slider .carousel-control:focus-visible {
	box-shadow:
		0 0 0 2px rgba(255, 255, 255, 0.35),
		0 4px 18px rgba(0, 0, 0, 0.22);
}

.cs-home-slider .carousel-control:active {
	opacity: 1 !important;
	background: rgba(255, 255, 255, 0.28) !important;
	border-color: rgba(255, 255, 255, 0.52) !important;
	transform: scale(0.94);
	box-shadow:
		0 2px 10px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cs-home-slider .carousel-control .glyphicon,
.cs-home-slider__nav .glyphicon,
.cs-home-slider .carousel-control .glyphicon-chevron-left,
.cs-home-slider .carousel-control .glyphicon-chevron-right {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	transform: none !important;
	display: block;
	width: 12px;
	height: 12px;
	line-height: 12px;
	font-size: 12px;
	text-align: center;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: none;
	opacity: 0.92;
}

.cs-home-slider .carousel-control .sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}

/* Новости на главной */
.cs-home-news-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cs-home-news-grid > a {
	display: block;
	text-decoration: none;
}

.cs-home-news-grid .small_new {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--cs-border);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.02);
	white-space: normal;
	transition: background 0.15s, border-color 0.15s;
}

.cs-home-news-grid .small_new:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(92, 108, 255, 0.28);
}

.cs-home-news-grid .small_new img {
	float: none;
	flex-shrink: 0;
	width: 72px;
	height: 52px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
}

.cs-home-news-grid .small_new > div {
	min-width: 0;
	flex: 1;
}

.cs-home-news-grid .small_new p {
	color: var(--cs-text);
	white-space: nowrap;
}

/* События */
.cs-home-events {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Статистика */
.cs-home-page #site_stats .l_block {
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	background: var(--cs-bg-card);
	overflow: hidden;
	margin: 0;
}

.cs-home-page #site_stats .l_block_head {
	padding: 16px 18px;
	border-bottom: 1px solid var(--cs-border);
	font-size: 18px;
	font-weight: 700;
	color: var(--cs-text);
	background: transparent;
}

.cs-home-page #site_stats .l_block_c {
	padding: 16px 18px 18px;
	color: var(--cs-text-dim);
	font-size: 13px;
	line-height: 1.7;
}

.cs-home-page #site_stats .l_block_c b {
	color: var(--cs-text);
	font-weight: 700;
}

.cs-guest-layout > .cs-page-main {
	min-width: 0;
}

@media (max-width: 900px) {
	.cs-home-slider .carousel-inner {
		height: 220px;
	}

	.cs-home-slider .carousel-inner > .item .carousel-caption,
	.cs-home-slider .cs-home-slider__caption {
		top: 8%;
		left: 5%;
		right: 5%;
		max-width: none;
	}

	.cs-home-slider__title {
		font-size: 18px;
	}

	.cs-home-slider__text {
		margin: 12px 0 14px;
		font-size: 13px;
	}

	.cs-home-slider__nav-group {
		right: 14px;
		bottom: 14px;
		gap: 6px;
	}

	.cs-home-slider .carousel-control,
	.cs-home-slider__nav {
		width: 32px !important;
		height: 32px !important;
	}

	.cs-home-sidebar {
		position: static;
	}

	.cs-home-visits-text {
		line-height: 1.6 !important;
	}

	.cs-home-visits-text a {
		display: inline-block !important;
		margin: 0 6px 4px 0 !important;
	}
}

/* ========== HOME: карточки категорий (legacy) ========== */
.cs-modes-home {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cs-modes-bar--home {
	justify-content: flex-start;
	width: auto;
	margin-bottom: 16px;
}

.cs-modes-home__stage {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	max-width: none;
}

.cs-mode-card-pick {
	position: relative;
	display: block;
	width: 100%;
	max-width: 196px;
	padding: 0;
	border: 1px solid var(--cs-border);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	min-height: 240px;
	background: var(--cs-bg-card);
	cursor: pointer;
	text-align: center;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.cs-mode-card-pick:hover {
	transform: translateY(-4px);
	border-color: rgba(92, 108, 255, 0.45);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.cs-mode-card-pick__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.35s ease;
}

.cs-mode-card-pick:hover .cs-mode-card-pick__bg {
	transform: scale(1.06);
}

.cs-mode-card-pick__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 12, 16, 0.15) 0%, rgba(10, 12, 16, 0.55) 45%, rgba(10, 12, 16, 0.88) 100%);
}

.cs-mode-card-pick__title {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px 36px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.cs-mode-card-pick__online {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 1;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.68);
	text-align: center;
}

.cs-category-view {
	width: 100%;
	max-width: none;
}

.cs-category-view__toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.cs-category-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-bg-pill);
	color: var(--cs-text-dim);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.cs-category-back:hover {
	background: var(--cs-bg-hover);
	color: var(--cs-text);
}

.cs-category-view__title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.cs-category-view__tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(92, 108, 255, 0.18);
	color: var(--cs-accent);
	font-size: 11px;
	font-weight: 800;
}

.cs-category-view__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cs-text);
}

.cs-category-block__count {
	font-size: 12px;
	color: var(--cs-text-dim);
	white-space: nowrap;
}

/* ========== SERVERS GRID ========== */
.cs-modes-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.cs-category-block {
	background: var(--cs-bg-card);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	overflow: hidden;
	margin-bottom: 20px;
}

.cs-category-hero {
	position: relative;
	min-height: 140px;
	overflow: hidden;
}

.cs-category-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.cs-category-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 12, 16, 0.92) 0%, rgba(10, 12, 16, 0.55) 55%, rgba(10, 12, 16, 0.25) 100%);
}

.cs-category-hero__content {
	position: relative;
	z-index: 1;
	padding: 24px 28px;
}

.cs-category-hero__tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(92, 108, 255, 0.2);
	color: var(--cs-accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

.cs-category-hero__title {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.cs-category-hero__meta {
	margin: 0;
	font-size: 13px;
	color: var(--cs-text-dim);
}

.cs-category-block__body {
	padding: 18px 20px 22px;
	border-top: 1px solid var(--cs-border);
}

.cs-category-block__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.cs-category-block__label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cs-text-dim);
}

.cs-category-block__count {
	font-size: 12px;
	color: var(--cs-text-dim);
}

.cs-servers-grid,
#servers.cs-servers-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
	gap: 0.8rem;
	align-content: start;
	width: 100%;
	padding-bottom: 20px;
}

.cs-servers-loading {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px;
}

/* Карточка сервера — CyberShoke (.home-body-servers) */
.cs-server-tile,
#servers.cs-servers-grid .server.server_line {
	position: relative;
	width: 100% !important;
	max-width: none;
	height: 80px !important;
	min-height: 80px !important;
	margin-bottom: 0 !important;
	border-radius: 12px;
	overflow: hidden;
	border: none !important;
	background: #11171f !important;
	cursor: default;
	transition: opacity 0.3s ease;
	float: none !important;
}

.cs-server-tile--interactive {
	cursor: pointer;
}

.cs-server-tile--interactive .cs-server-tile__meta {
	cursor: pointer;
}

.cs-server-tile__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.3;
	transition: opacity 0.3s ease, transform 0.35s ease;
}

.cs-server-tile__shade {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
	transition: background 0.3s ease;
}

.cs-server-tile:hover .cs-server-tile__bg,
.cs-server-tile:focus-within .cs-server-tile__bg {
	opacity: 1;
	transform: scale(1.03);
}

.cs-server-tile:hover .cs-server-tile__shade,
.cs-server-tile:focus-within .cs-server-tile__shade {
	background: transparent;
}

.cs-server-tile__body {
	position: relative;
	z-index: 2;
	height: 100%;
	min-width: 0;
	padding: 0;
}

.cs-server-tile__info {
	position: static;
	height: 100%;
	min-width: 0;
}

.cs-server-tile__head {
	position: absolute;
	top: 16px;
	left: 24px;
	right: 48px;
	z-index: 35;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	pointer-events: none;
}

.cs-server-tile__gear {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	pointer-events: auto;
	transition: color 0.2s ease, transform 0.2s ease;
}

.cs-server-tile__gear:hover {
	color: #fff;
}

.cs-server-tile__gear:hover svg {
	transform: rotate(30deg);
}

.cs-server-tile:hover .cs-server-tile__gear {
	color: rgba(255, 255, 255, 0.95);
}

.cs-server-tile__gear svg {
	display: block;
	transition: transform 0.2s ease;
}

.cs-server-tile__title {
	position: static;
	flex: 1;
	min-width: 0;
	z-index: 20;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	letter-spacing: 0.06em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
}

.cs-server-tile__meta {
	position: absolute;
	bottom: 18px;
	left: 24px;
	right: 48px;
	z-index: 20;
	display: flex;
	align-items: center;
	min-width: 0;
	cursor: pointer;
}

.cs-server-tile__fill-wrap {
	width: 4px;
	height: 16px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-right: 11px;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.5);
}

.cs-server-tile--offline .cs-server-tile__fill-wrap {
	background: rgba(0, 0, 0, 0.35);
}

.cs-server-tile__fill {
	width: 100%;
	border-radius: 4px;
	transition: height 0.3s ease, box-shadow 0.3s ease;
	min-height: 0;
}

.cs-server-tile--offline .cs-server-tile__fill {
	height: 0 !important;
	box-shadow: none !important;
}

.cs-server-tile:not(.cs-server-tile--offline) .cs-server-tile__fill {
	min-height: 2px;
}

.cs-server-tile__fill--success {
	background: #22c55e;
	box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
}

.cs-server-tile__fill--warning {
	background: #f59e0b;
	box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.cs-server-tile__fill--danger {
	background: #ef4444;
	box-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
}

.cs-server-tile__fill--info {
	background: #64748b;
	box-shadow: none;
}

.cs-server-tile__meta-text {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cs-server-tile__actions {
	position: absolute;
	inset: 0;
	z-index: 30;
	width: auto;
	pointer-events: none;
}

.cs-server-tile__icon {
	position: absolute;
	right: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.78);
	cursor: pointer;
	text-decoration: none !important;
	pointer-events: auto;
	opacity: 0.92;
	transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.cs-server-tile:hover .cs-server-tile__icon,
.cs-server-tile:focus-within .cs-server-tile__icon {
	color: rgba(255, 255, 255, 0.95);
	opacity: 1;
}

.cs-server-tile:hover .cs-server-tile__icon:first-child,
.cs-server-tile:focus-within .cs-server-tile__icon:first-child,
.cs-server-tile:hover .cs-server-tile__icon--play,
.cs-server-tile:focus-within .cs-server-tile__icon--play {
	background: rgba(0, 0, 0, 0.1);
}

.cs-server-tile__icon:hover {
	background: rgba(0, 0, 0, 0.22) !important;
	color: #fff;
}

.cs-server-tile__icon svg {
	width: 16px;
	height: 16px;
}

.cs-server-tile__icon:first-child {
	top: 0;
	border-radius: 0 12px 0 12px;
}

.cs-server-tile__icon--play {
	bottom: 0;
	top: auto;
	border-radius: 12px 0 12px 0;
}

.cs-server-tile__icon--play svg {
	width: 23px;
	height: 23px;
}

.cs-server-tile__icon--play svg circle {
	stroke: rgba(255, 255, 255, 0.85);
}

.cs-server-tile__icon--play svg path {
	fill: rgba(255, 255, 255, 0.95);
}

.cs-server-tile--offline .cs-server-tile__bg {
	opacity: 0.18;
}

.cs-server-tile--offline:hover .cs-server-tile__bg,
.cs-server-tile--offline:focus-within .cs-server-tile__bg {
	opacity: 0.28;
	transform: none;
}

.cs-server-tile--offline .cs-server-tile__shade {
	background: rgba(8, 10, 14, 0.35);
}

.cs-server-tile--offline:hover .cs-server-tile__shade,
.cs-server-tile--offline:focus-within .cs-server-tile__shade {
	background: rgba(8, 10, 14, 0.2);
}

/* Toast — «IP Скопирован» */
.cs-toast {
	position: fixed;
	top: 20px;
	left: 50%;
	z-index: 10050;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 12px;
	background: rgba(18, 22, 30, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
	color: #eef0f4;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.cs-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.cs-toast__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(92, 108, 255, 0.18);
	color: var(--cs-accent);
	flex-shrink: 0;
}

.cs-toast__text {
	color: #fff;
}

/* ========== CHAT RAIL (справа) ========== */
.cs-chat-rail {
	width: var(--cs-chat);
	max-width: var(--cs-chat);
	height: var(--cs-chat-height);
	max-height: var(--cs-chat-height);
	flex-shrink: 0;
	position: fixed;
	top: var(--cs-header);
	right: 0;
	z-index: 140;
	background: var(--cs-bg-sidebar);
	border-left: 1px solid var(--cs-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	transition:
		max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.28s ease,
		transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		border-color 0.28s ease,
		box-shadow 0.28s ease;
}

.cs-chat-rail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--cs-border);
	flex-shrink: 0;
}

.cs-chat-rail-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cs-text);
}

.cs-chat-rail-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(92, 108, 255, 0.18);
	color: var(--cs-accent);
	display: grid;
	place-items: center;
	font-size: 13px;
}

.cs-chat-rail-toggle {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--cs-text-dim);
	cursor: pointer;
	display: grid;
	place-items: center;
}

.cs-chat-rail-toggle:hover {
	background: var(--cs-bg-hover);
	color: var(--cs-text);
}

#chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

#chat form,
#drop_zone {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

#chat_messages {
	flex: 1 1 auto;
	height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 10px 12px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#chat_messages::-webkit-scrollbar {
	width: 6px;
}

#chat_messages::-webkit-scrollbar-track {
	background: transparent;
}

#chat_messages::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 999px;
}

#chat_messages::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.28);
}

.cs-chat-compose {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--cs-border);
	flex-shrink: 0;
	background: var(--cs-bg-card);
}

.cs-chat-input-wrap {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: 40px;
}

.cs-chat-input-wrap .form-control {
	width: 100%;
	padding: 10px 12px 10px 40px !important;
	background: var(--cs-bg-pill) !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: 999px !important;
	color: var(--cs-text) !important;
	font-size: 13px !important;
	height: 40px !important;
	line-height: 20px !important;
}

.cs-chat-smile,
.cs-chat-input-wrap .smile_btn {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	opacity: 0.55;
	background-image: url('../img/smile.svg');
	background-size: 18px 18px;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	border-radius: 0;
}

.cs-chat-send {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: var(--cs-accent);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.15s;
}

.cs-chat-send:hover {
	background: var(--cs-accent-hover);
}

.cs-chat-guest {
	padding: 12px;
	border-top: 1px solid var(--cs-border);
}

.chat_message {
	display: flex;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--cs-border);
	overflow: hidden;
}

.chat_message:last-child {
	border-bottom: none;
}

.chat_message .user_img {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	object-fit: cover;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	float: none;
}

.chat_message .message {
	flex: 1;
	min-width: 0;
	margin-left: 0 !important;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cs-text-dim);
}

.chat_message .message [id^="message_text_"] {
	color: rgba(238, 240, 244, 0.62);
}

.chat_message .message [id^="message_text_"] a {
	color: var(--cs-accent);
}

.chat_message .message .info {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	height: auto;
}

.chat_message .message .info .author {
	float: none;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
}

.chat_message .message .info .date {
	float: none;
	margin-left: auto;
	font-size: 11px;
	color: var(--cs-text-dim);
	font-weight: 500;
	white-space: nowrap;
}

.chat_message .dell_message,
.chat_message .edit_message {
	position: static;
	font-size: 11px;
	opacity: 0.6;
}

.chat_message hr { display: none; }

.chat_message .thumbnail {
	max-width: 180px;
	border-radius: 8px;
}

body.cs-chat-collapsed .cs-chat-rail {
	max-width: 0;
	width: 0;
	opacity: 0;
	transform: translateX(20px);
	border-left-color: transparent;
	pointer-events: none;
}

.cs-header-chat-open {
	flex-shrink: 0;
	display: grid;
	width: auto;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.85);
	overflow: hidden;
	transition:
		opacity 0.22s ease,
		transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0.22s ease,
		width 0.22s ease,
		min-width 0.22s ease,
		margin 0.22s ease,
		padding 0.22s ease,
		border-width 0.22s ease;
}

body:not(.cs-chat-collapsed) .cs-header-chat-open {
	width: 0;
	min-width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border-width: 0;
	font-size: 0;
	overflow: hidden;
}

body.cs-chat-collapsed .cs-header-chat-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: scale(1);
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	font-size: 16px;
	transition-delay: 0.1s;
}

body:not(.cs-chat-collapsed) .cs-header-chat-open {
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.cs-chat-rail,
	.cs-header-chat-open {
		transition: none !important;
	}
}

/* ========== INNER PAGES ========== */
.cs-panel,
.r_block,
.l_block {
	background: var(--cs-bg-card) !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: var(--cs-radius) !important;
	margin-bottom: 16px !important;
	overflow: hidden;
	box-shadow: none !important;
}

.r_block_head,
.l_block_head {
	background: transparent !important;
	border-bottom: 1px solid var(--cs-border) !important;
	padding: 14px 18px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--cs-text) !important;
}

.r_block_c,
.l_block_c {
	padding: 18px !important;
	color: var(--cs-text-dim);
}

.cs-page-main {
	min-width: 0;
}

/* standart-модули (col-lg-*) внутри moon-оболочки: float не схлопывает блок */
.cs-page-main::after {
	content: "";
	display: table;
	clear: both;
}

.cs-page-main:has(> .left_block) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

.cs-page-main:has(> .left_block) > :not(.left_block) {
	grid-column: 1;
	min-width: 0;
}

.cs-page-main > .left_block {
	grid-column: 2;
	grid-row: 1 / span 20;
	min-width: 0;
}

/* Главная: серверы на всю ширину, сайдбар на уровне слайдера */
.cs-page-main:has(> #cs-home-servers) > #cs-home-servers {
	grid-column: 1 / -1;
	grid-row: 1;
}

.cs-page-main:has(> #cs-home-servers) > #cs-home {
	grid-column: 1;
	grid-row: 2;
}

.cs-page-main:has(> #cs-home-servers) > .left_block {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

/* legacy: left_block as direct child of cs-page */
.cs-page:has(> .left_block) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}

.cs-page:has(> .left_block) > .cs-page-main {
	grid-column: 1;
}

.cs-page > .left_block {
	grid-column: 2;
	grid-row: 1 / span 20;
	min-width: 0;
}

.left_block .l_block {
	margin-bottom: 16px;
}

.bs-callout {
	padding: 12px 14px;
	border-radius: var(--cs-radius-sm);
	border: 1px solid var(--cs-border) !important;
	border-left-width: 4px !important;
	margin-bottom: 12px;
	background: var(--cs-bg-pill) !important;
	color: var(--cs-text-dim);
}

.bs-callout h4 {
	margin: 0 0 6px;
	color: var(--cs-text);
	font-size: 14px;
}

.bs-callout-info { border-left-color: var(--cs-accent) !important; }
.bs-callout-success { border-left-color: var(--cs-green) !important; }
.bs-callout-error { border-left-color: #ef4444 !important; }

.input-group .btn-default,
.input-group-btn .btn-default,
.input-group-btn .shop1 {
	background: var(--cs-bg-pill) !important;
	border: 1px solid var(--cs-border) !important;
	color: var(--cs-text-dim) !important;
}

.input-group .form-control {
	min-width: 0;
}

.btn-default {
	background: var(--cs-bg-pill) !important;
	border: 1px solid var(--cs-border) !important;
	color: var(--cs-text-dim) !important;
}

.btn-default:hover {
	background: var(--cs-bg-hover) !important;
	color: var(--cs-text) !important;
}

.table-responsive {
	border-radius: var(--cs-radius-sm);
}

.with_code img,
.r_block_c img,
.new img {
	max-width: 100%;
	height: auto;
}

.form-control {
	background: var(--cs-bg-pill) !important;
	border: 1px solid var(--cs-border) !important;
	color: var(--cs-text) !important;
	border-radius: var(--cs-radius-sm) !important;
}

select.form-control,
.cs-settings-select,
.cs-shop-key-select {
	color-scheme: dark;
}

.form-control:focus {
	border-color: var(--cs-accent) !important;
	box-shadow: none !important;
	outline: none !important;
}

.btn2 {
	background: var(--cs-accent) !important;
	border: none !important;
	color: #fff !important;
	border-radius: var(--cs-radius-sm) !important;
	font-weight: 600 !important;
}

.btn2:hover {
	background: var(--cs-accent-hover) !important;
	color: #fff !important;
}

.table { color: var(--cs-text-dim) !important; background: transparent !important; }
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td { border-color: var(--cs-border) !important; }

.modal-content {
	background: var(--cs-bg-card) !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: var(--cs-radius) !important;
	color: var(--cs-text) !important;
}

.modal-header { border-bottom-color: var(--cs-border) !important; }
.modal-footer { border-top-color: var(--cs-border) !important; }

.modal-title {
	background: transparent !important;
	padding: 0 !important;
}

.modal-backdrop.in {
	background: rgba(4, 6, 10, 0.78);
}

.modal {
	z-index: 10050 !important;
}

.modal-backdrop {
	z-index: 10040 !important;
}

.dropdown-menu {
	background: var(--cs-bg-card) !important;
	border: 1px solid var(--cs-border) !important;
	border-radius: var(--cs-radius-sm) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-menu > li > a {
	color: var(--cs-text-dim) !important;
	padding: 9px 16px !important;
	-webkit-tap-highlight-color: transparent;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:active {
	background: var(--cs-bg-hover) !important;
	color: var(--cs-text) !important;
	outline: none !important;
	box-shadow: none !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:active {
	background: rgba(92, 108, 255, 0.12) !important;
	color: var(--cs-accent) !important;
	outline: none !important;
	box-shadow: none !important;
}

.cs-header-profile .dropdown-menu > li > a {
	transition: background 0.12s ease, color 0.12s ease;
}

.cs-header-tools .cs-profile:active,
.cs-header-profile.open > .cs-profile.dropdown-toggle {
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

.dropdown-menu .divider {
	height: 1px;
	margin: 8px 0 !important;
	overflow: hidden;
	background-color: var(--cs-border) !important;
}

.online_users:not(.cs-home-online-list) { padding: 0; }
.online_users:not(.cs-home-online-list) .online_user a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
}

.online_users:not(.cs-home-online-list) .online_user img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

/* Kill ghost layout (не трогаем cs-page-main) */
.wapper, .content, .left1_block, .right_block, #header, .top_line, .headmenu,
.bottom .col-md-4 { all: unset; display: revert; }

.cs-site-footer.bottom {
	margin-left: var(--cs-sidebar);
	margin-right: var(--cs-chat-offset);
	width: auto;
	max-width: none;
	box-sizing: border-box;
	padding: 0;
	border-top: 1px solid var(--cs-border);
	background: var(--cs-bg-sidebar);
	color: var(--cs-text-dim);
	font-size: 14px;
	position: relative;
	z-index: 120;
	transition: margin-right 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-site-footer__inner {
	padding: 30px 28px 24px;
}

.cs-site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
}

.cs-site-footer__brand img {
	display: block;
	height: 52px;
	width: auto;
	max-width: 100%;
	margin-bottom: 16px;
}

.cs-site-footer__desc {
	color: var(--cs-text-dim);
	font-size: 14px;
	line-height: 1.55;
}

.cs-site-footer__desc h4 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--cs-text);
}

.cs-site-footer__desc p {
	margin: 0;
}

.cs-site-footer__desc a {
	color: var(--cs-accent);
	text-decoration: none;
}

.cs-site-footer__desc a:hover {
	color: var(--cs-accent-hover);
}

.cs-site-footer__title {
	display: block;
	margin-bottom: 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--cs-text);
}

.cs-site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-site-footer__links li {
	margin: 0 0 6px;
}

.cs-site-footer__links a {
	color: var(--cs-text-dim);
	text-decoration: none;
	transition: color 0.15s;
}

.cs-site-footer__links a:hover {
	color: var(--cs-text);
}

.cs-site-footer a:focus,
.cs-site-footer a:active,
.cs-site-footer a:focus-visible {
	outline: none !important;
	box-shadow: none;
}

.cs-site-footer__hr {
	margin: 24px 0 20px;
	border: 0;
	border-top: 1px solid var(--cs-border);
}

.cs-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.cs-site-footer__copyright {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 12px;
	color: var(--cs-text-dim);
	font-size: 13px;
}

.cs-site-footer__copyright p {
	margin: 0;
	display: inline;
}

.cs-site-footer__copyright a {
	color: var(--cs-text);
	font-weight: 600;
	text-decoration: none;
}

.cs-site-footer__copyright a:hover {
	color: var(--cs-accent);
}

.cs-site-footer__copyright #copyright {
	display: inline-block;
	margin: 0;
	padding-left: 12px;
	border-left: 1px solid var(--cs-border);
	line-height: 1.4;
}

.cs-site-footer__copyright #copyright br {
	display: none;
}

.cs-site-footer__banners {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 6px;
}

.cs-site-footer__banners img {
	display: block;
	border-radius: 2px;
}

@media (max-width: 991px) {
	.cs-site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.cs-site-footer__brand {
		grid-column: 1 / -1;
	}

	.cs-site-footer__copyright #copyright {
		display: block;
		margin-top: 8px;
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 575px) {
	.cs-site-footer__inner {
		padding: 24px 16px 20px;
	}

	.cs-site-footer__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.cs-site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.cs-site-footer__banners {
		justify-content: flex-start;
	}
}

/* Hide vk widget block on sidebar */
.cs-sidebar .vk_groups,
.cs-sidebar iframe { display: none !important; }

/* Guest layout */
.cs-guest-home,
.cs-guest-layout {
	display: block;
}

.cs-guest-home > .cs-page-main,
.cs-guest-layout > .cs-page-main {
	min-width: 0;
}

.cs-header-auth-btn {
	height: 36px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.cs-auth-modal.modal-dialog {
	width: calc(100% - 28px);
	max-width: 420px;
	margin: 28px auto;
}

.cs-auth-surface,
.cs-auth-modal .modal-content.cs-auth-surface {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(92, 108, 255, 0.16) !important;
	background:
		radial-gradient(ellipse 90% 55% at 100% 0%, rgba(92, 108, 255, 0.14), transparent 58%),
		radial-gradient(ellipse 70% 45% at 0% 100%, rgba(3, 251, 243, 0.06), transparent 55%),
		linear-gradient(168deg, #171b26 0%, #12151d 52%, #0d0f14 100%) !important;
	box-shadow:
		0 28px 80px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.cs-auth-surface::before,
.cs-auth-modal .modal-content.cs-auth-surface::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(92, 108, 255, 0.55), rgba(61, 210, 255, 0.35), transparent);
	pointer-events: none;
}

.cs-auth-modal .modal-header,
.cs-auth-modal__head,
.cs-auth-surface__head {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 56px 18px 22px;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: transparent;
}

.cs-auth-surface__head--recovery {
	padding: 24px 22px 18px;
}

.cs-auth-modal__head::before,
.cs-auth-surface__head::before {
	content: '';
	position: absolute;
	top: 0;
	left: 22px;
	right: 22px;
	height: 1px;
	background: linear-gradient(90deg, rgba(92, 108, 255, 0.45), rgba(61, 210, 255, 0.25), transparent);
	opacity: 0.8;
}

.cs-auth-modal__head--register::before,
.cs-auth-surface__head--recovery::before {
	background: linear-gradient(90deg, rgba(123, 140, 255, 0.5), rgba(3, 251, 243, 0.22), transparent);
}

.cs-auth-modal__head-icon,
.cs-auth-surface__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid rgba(92, 108, 255, 0.22);
	background: rgba(92, 108, 255, 0.1);
	color: #dbe2ff;
	font-size: 17px;
}

.cs-auth-modal__head--register .cs-auth-modal__head-icon,
.cs-auth-surface__head--recovery .cs-auth-surface__icon {
	border-color: rgba(240, 180, 41, 0.24);
	background: rgba(240, 180, 41, 0.1);
	color: #ffe6a8;
}

.cs-auth-modal__head-text,
.cs-auth-surface__head-text {
	min-width: 0;
	flex: 1;
}

.cs-auth-modal .modal-header .close,
.cs-auth-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	float: none;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	color: var(--cs-text-dim);
	opacity: 1;
	text-shadow: none;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cs-auth-modal .modal-header .close:hover,
.cs-auth-modal__close:hover,
.cs-auth-modal .modal-header .close:focus,
.cs-auth-modal__close:focus {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--cs-text);
	opacity: 1;
	outline: none;
}

.cs-auth-modal .modal-title,
.cs-auth-surface__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--cs-text);
}

.cs-auth-modal__head-sub,
.cs-auth-surface__sub {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--cs-text-dim);
}

.cs-auth-modal .modal-body,
.cs-auth-surface__body {
	padding: 20px 22px 24px;
	background: transparent;
}

.cs-auth-modal__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cs-auth-modal__form .form-control {
	height: 44px;
	padding: 0 14px;
	border-radius: var(--cs-radius-sm);
	background: rgba(8, 10, 16, 0.72) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: var(--cs-text) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cs-auth-modal__form .form-control::placeholder {
	color: #6d7588;
	opacity: 1;
}

.cs-auth-modal__form .form-control:focus {
	border-color: rgba(92, 108, 255, 0.5) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.03),
		0 0 0 3px rgba(92, 108, 255, 0.14) !important;
	outline: none;
}

.cs-auth-modal__form .form-control:-webkit-autofill,
.cs-auth-modal__form .form-control:-webkit-autofill:hover,
.cs-auth-modal__form .form-control:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #151a24 inset !important;
	-webkit-text-fill-color: var(--cs-text) !important;
	border-color: rgba(92, 108, 255, 0.35) !important;
	caret-color: var(--cs-text);
	transition: background-color 9999s ease-out 0s;
}

.cs-auth-modal__result:not(:empty) {
	margin-top: 2px;
	font-size: 13px;
}

.cs-auth-modal__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 2px;
}

.cs-auth-modal__link {
	font-size: 13px;
	color: var(--cs-text-dim);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cs-auth-modal__link:hover {
	color: var(--cs-accent);
}

.cs-auth-modal__oauth {
	display: flex;
	gap: 10px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cs-auth-modal__oauth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--cs-radius-sm);
	border: 1px solid rgba(92, 108, 255, 0.28);
	background: rgba(255, 255, 255, 0.03);
	color: var(--cs-text);
	font-size: 18px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cs-auth-modal__oauth-btn:hover,
.cs-auth-modal__oauth-btn:focus {
	background: rgba(92, 108, 255, 0.14);
	border-color: rgba(92, 108, 255, 0.45);
	color: #fff;
	text-decoration: none;
}

.cs-auth-modal__policy {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--cs-radius-sm);
	border: 1px solid rgba(92, 108, 255, 0.14);
	background:
		linear-gradient(135deg, rgba(92, 108, 255, 0.08), rgba(255, 255, 255, 0.02));
	font-size: 12px;
	line-height: 1.55;
	color: rgba(238, 240, 244, 0.78);
}

.cs-auth-modal__policy a {
	color: var(--cs-accent);
}

.cs-auth-modal__captcha {
	transform: scale(0.9);
	transform-origin: 0 0;
	margin-bottom: -4px;
}

.cs-auth-modal__hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--cs-text-dim);
}

.cs-recovery-page {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 28px 16px 48px;
	min-height: min(72vh, 680px);
}

.cs-auth-surface--page {
	width: 100%;
	max-width: 440px;
}

.cs-recovery-page__back {
	display: inline-block;
	margin-top: 4px;
	text-align: center;
}

.cs-recovery-page__message {
	font-size: 14px;
	line-height: 1.55;
	color: var(--cs-text-dim);
}

.cs-recovery-page__message p {
	margin: 0;
}

.cs-recovery-page__message .text-success {
	color: var(--cs-green) !important;
}

.cs-recovery-page__message .text-danger {
	color: #ff7b7b !important;
}

.cs-auth-box {
	background: var(--cs-bg-card);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	padding: 22px;
	margin-bottom: 16px;
}

.cs-auth-box h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
}

.cs-home-extra {
	display: none;
}


/* Loader in grid */
#servers > center {
	grid-column: 1 / -1;
	padding: 60px;
}

.disp-n { display: none !important; }
.w-100 { width: 100%; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: 8px; }
.pd-10 { padding: 10px; }

@media (max-width: 1100px) {
	.cs-guest-layout,
	.cs-guest-home,
	.cs-page:has(> .left_block),
	.cs-page-main:has(> .left_block) {
		display: flex;
		flex-direction: column;
		gap: 14px;
		grid-template-columns: none;
	}

	.cs-page:has(> .left_block) > .cs-page-main,
	.cs-page > .left_block,
	.cs-page-main > .left_block,
	.cs-page-main:has(> .left_block) > :not(.left_block),
	.cs-page-main:has(> #cs-home-servers) > #cs-home-servers,
	.cs-page-main:has(> #cs-home-servers) > #cs-home,
	.cs-page-main:has(> #cs-home-servers) > .left_block {
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.cs-home-sidebar {
		position: static;
		top: auto;
	}

	.cs-guest-layout > .cs-page-main {
		width: 100%;
	}

	.cs-page-main:has(> #cs-home-servers) > #cs-home-servers {
		order: 1;
	}

	.cs-page-main:has(> #cs-home-servers) > #cs-home {
		order: 2;
	}

	.cs-page-main:has(> #cs-home-servers) > .left_block {
		order: 3;
	}
}

.cs-sidebar-backdrop,
.cs-chat-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 170;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.cs-sidebar-backdrop.is-visible,
.cs-chat-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 900px) {
	.cs-sidebar {
		top: var(--cs-header);
		bottom: 0;
		height: auto;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		box-shadow: 8px 0 40px rgba(0, 0, 0, 0.45);
		padding-top: 12px;
		padding-bottom: max(18px, env(safe-area-inset-bottom));
		z-index: 180;
	}

	.cs-sidebar.is-open {
		transform: translateX(0);
	}

	.cs-header {
		z-index: 210;
	}

	.cs-sidebar-backdrop,
	.cs-chat-backdrop {
		display: block;
	}

	body.cs-sidebar-open,
	body.cs-mobile-chat-open {
		overflow: hidden;
	}

	.cs-sidebar #nav {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		flex: 1 1 auto;
		min-height: 0;
		touch-action: manipulation;
	}

	.cs-sidebar {
		display: flex;
		flex-direction: column;
		width: min(88vw, 300px);
		max-width: min(88vw, 300px);
	}

	/* Подменю в сайдбаре — аккордеон вместо flyout */
	#nav > .collapsible > ul {
		position: static !important;
		left: auto !important;
		top: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		width: 100% !important;
		margin: 4px 0 8px !important;
		padding: 4px !important;
		box-shadow: none !important;
		border: none !important;
		background: rgba(0, 0, 0, 0.22) !important;
		border-radius: var(--cs-radius-sm) !important;
		max-height: none !important;
		overflow: visible !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	#nav > .collapsible.is-open > ul {
		display: block !important;
		visibility: visible !important;
		height: auto !important;
	}

	#nav > .collapsible:not(.is-open) > ul {
		display: none !important;
	}

	#nav > .collapsible.is-open > a::after {
		transform: rotate(135deg);
	}

	#nav > .collapsible > ul > li > a {
		padding: 10px 12px;
		font-size: 13px;
	}

	.cs-main,
	.cs-site-footer.bottom,
	.bottom {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.cs-burger {
		display: grid;
		place-items: center;
		width: 42px;
		height: 42px;
	}

	.cs-header {
		left: 0;
		right: 0;
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
		padding-top: 0;
		padding-bottom: 0;
	}

	.cs-body {
		padding-right: 0;
	}

	.cs-page {
		padding: 16px;
	}

	.cs-header .cs-header-icons .cs-icon-btn,
	.cs-header .cs-header-icons .cs-header-chat-open {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.cs-header .cs-profile {
		min-width: 40px;
		min-height: 40px;
	}

	.cs-toast {
		top: max(12px, env(safe-area-inset-top));
		max-width: calc(100vw - 24px);
		white-space: normal;
		text-align: center;
	}
}

@media (max-width: 900px) {
	.cs-chat-rail {
		position: fixed;
		right: 0;
		top: var(--cs-header);
		bottom: 0;
		width: var(--cs-chat);
		max-width: var(--cs-chat);
		height: auto;
		max-height: none;
		border-radius: 0;
		z-index: 180;
		box-shadow: -8px 0 30px rgba(0, 0, 0, 0.45);
		transform: translateX(0);
		opacity: 1;
	}

	body.cs-chat-collapsed .cs-chat-rail {
		width: var(--cs-chat);
		max-width: var(--cs-chat);
		transform: translateX(100%);
		opacity: 1;
		box-shadow: none;
	}
}

@media (max-width: 600px) {
	.cs-servers-grid,
	#servers.cs-servers-grid {
		grid-template-columns: 1fr;
	}

	.cs-server-tile__head {
		left: 16px;
		right: 44px;
	}

	.cs-server-tile__title {
		font-size: 16px;
	}

	.cs-server-tile__meta {
		left: 16px;
		right: 44px;
		bottom: 14px;
	}

	.cs-header-right .cs-balance { display: none; }

	.cs-header-topup {
		padding: 8px 10px !important;
		font-size: 12px !important;
	}

	.cs-chat-rail {
		width: min(100vw, var(--cs-chat));
		padding-bottom: env(safe-area-inset-bottom);
	}

	.cs-page {
		padding: 12px;
	}
}

@media (max-width: 420px) {
	.cs-header-topup {
		display: none;
	}

	.cs-header-online__count {
		font-size: 12px;
	}
}

/* ========== MODULE PAGES (standart layout in moon) ========== */
.cs-page-main .block {
	background: var(--cs-bg-card);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	margin-bottom: 16px;
	overflow: hidden;
}

.cs-page-main .block_head {
	padding: 14px 18px;
	border-bottom: 1px solid var(--cs-border);
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-text);
}

.cs-page-main .block.block-table .table-responsive,
.cs-page-main .block .form-group,
.cs-page-main .block .with_code {
	padding: 18px;
	color: var(--cs-text-dim);
}

.cs-page-main .noty-block {
	padding: 12px 14px;
	border-radius: var(--cs-radius-sm);
	border: 1px solid var(--cs-border);
	margin-bottom: 12px;
	background: var(--cs-bg-pill);
	color: var(--cs-text-dim);
}

.cs-page-main .noty-block.success {
	border-left: 4px solid var(--cs-green);
}

.cs-page-main .noty-block.error {
	border-left: 4px solid #ef4444;
}

.cs-page-main .vertical-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0 18px 18px;
}

.cs-page-main .vertical-navigation a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--cs-radius-sm);
	color: var(--cs-text-dim);
}

.cs-page-main .vertical-navigation a:hover,
.cs-page-main .vertical-navigation .active a {
	background: var(--cs-bg-hover);
	color: var(--cs-text);
}

/* ========== NEW YEAR GARLAND (moon layout) ========== */
.cs-has-newyear {
	--cs-newyear-strip: 68px;
	--cs-layout-top: calc(var(--cs-header) + var(--cs-newyear-strip));
	--cs-chat-height: calc(100vh - var(--cs-layout-top));
}

.cs-has-newyear .b-page_newyear {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 220;
	height: auto;
	min-height: var(--cs-newyear-strip);
	overflow: visible;
	pointer-events: none;
}

.cs-has-newyear .b-page_newyear::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--cs-newyear-strip) + 1px);
	background: var(--cs-bg-header);
	border: none;
	z-index: 0;
	pointer-events: none;
}

.cs-has-newyear .b-page_newyear .b-page__content {
	height: 0;
	min-width: 0;
	background: transparent !important;
	overflow: visible;
}

.cs-has-newyear .b-page_newyear .b-head-decor {
	top: 0;
	left: 0;
	right: 0;
	margin-top: 0;
	min-width: 0;
	width: 100%;
	height: 115px;
	overflow: visible;
	z-index: 1;
	pointer-events: none;
	background-color: transparent;
}

.cs-has-newyear .b-page_newyear .b-head-decor::before {
	display: none;
}

/* Шарики, которые свисают ниже гирлянды — поверх фона шапки */
.cs-has-newyear .b-page_newyear .b-ball_n2,
.cs-has-newyear .b-page_newyear .b-ball_n3,
.cs-has-newyear .b-page_newyear .b-ball_n4,
.cs-has-newyear .b-page_newyear .b-ball_n6,
.cs-has-newyear .b-page_newyear .b-ball_n7,
.cs-has-newyear .b-page_newyear .b-ball_n9,
.cs-has-newyear .b-page_newyear .b-ball_i4 {
	z-index: 4;
}

.cs-has-newyear .b-page_newyear .b-ball,
.cs-has-newyear .b-page_newyear .b-ball__right {
	pointer-events: none;
}

.cs-has-newyear .cs-sidebar {
	top: var(--cs-newyear-strip);
	bottom: 0;
	height: auto;
}

.cs-has-newyear .cs-header {
	top: var(--cs-newyear-strip);
	z-index: 210;
	border-top: none;
}

.cs-has-newyear .cs-body {
	margin-top: var(--cs-layout-top);
}

.cs-has-newyear .cs-chat-rail {
	top: var(--cs-layout-top);
	height: var(--cs-chat-height);
	max-height: var(--cs-chat-height);
}

.cs-has-newyear .cs-home-sidebar {
	top: calc(var(--cs-layout-top) + 16px);
}

@media (max-width: 900px) {
	.cs-has-newyear {
		--cs-newyear-strip: 46px;
	}

	.cs-has-newyear .b-page_newyear .b-head-decor {
		height: 90px;
		background-size: auto 90px;
	}

	.cs-has-newyear .cs-sidebar {
		top: var(--cs-layout-top);
	}
}