html, body {
	font-family: 'Arial';
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	color: #ffffff;
/*	background: #04033d;*/
	background: transparent;
}

a {
	color: #0059b2;
	text-decoration: none;
}
a:hover {
	color: #CC0000;
	text-decoration: underline;
}

img {max-width: 600px; height: auto;}

img.img-article-left {
	max-width: 300px;
	height: auto;
	float: left;
	padding: 0 10px 10px 0;
	position: relative;
  	z-index: 1;	
}

img.img-article-left.thumb {
	max-width: 300px;
	height: auto;
	position: relative;
  	z-index: 1;
}

p.link-read-post {
	text-align: right;
}
p.link-read-post a {
	padding: 10px;
	min-width: 100px;
	background: transparent;
	color: #fff;
	text-decoration: none;
}

div.article-panel {
    background: transparent;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    overflow: hidden;
/*    color: #555;*/
    color: #fff;
}
div.article-panel p.first {
    margin: 0;
    float: left;
}
div.article-panel p.last {
    margin: 0;
    float: right;
}

.list-articles {
  text-align: justify;
  padding: 10px;
}

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

ul.list-articles {
    font-size: 16px;
}

ul.list-articles li {
    border-top: 1px solid white;
    padding-top: 20px;
    margin-top: 20px;
	border-bottom: 1px solid #04033d;
}

.table-page {
	width: 100%;
	height: 100%;
	vertical-align: top;
	background: transparent;
}
.table-page tr {height: 100%;}

.clear {clear: both;}

.header {
	background: transparent;
	height: 60px;
	position: relative;
  	z-index: 1;
}

/*.logo {
	background: url('../images/logo.png') no-repeat 10px 5px;
	width: 200px;
	height: 60px;
}*/

.logo-block {
    text-align: left;
    margin-top: 10px;
    margin-left: 50px;
}

.logo-block .logo {
    display: inline-block;
    width: 600px;
    height: 360px;
    background: url('../images/logo.png') no-repeat center center;
    background-size: contain;
}

.mainmenu {
    display: flex;
    flex-wrap: wrap; /* чтобы элементы переносились */
    align-items: center;
}



ul.mainmenu {
	list-style: none;
/*	margin: 0;*/
	margin-top: 40px;
	margin-left: 40px;
	padding: 0;
	height: 60px;
	color: #ffffff;
	font-size: 20px;
	overflow: hidden;
}

ul.mainmenu li {
	float: left;
	margin: 18px 40px 0 30px;
}


/*Стили для Главной страницы Сервисов*/

.card-grid-container-main {
    max-width: calc(100% - 100px);
    margin-left: 50px;
    margin-right: auto;
}
.card-grid-container-main.authenticated {
    margin-top: 500px; /* Меньший отступ, когда пользователь авторизован */
}
.card-grid-container-main:not(.authenticated) {
    margin-top: 100px; /* Больший отступ, когда форма присутствует */
}

.card-grid-main {
    display: grid;
    grid-template-columns: repeat(4, 260px);
    gap: 40px;
    justify-content: start;
    margin-top: 30px;
    margin-left: 40px;
}

.card-link {
    text-decoration: none;
    display: block;
}

.card-content {
    font-family: 'Arial';
    text-transform: uppercase;
    font-weight: normal;
}

.card {
    border: 1px solid #8586fe;
    border-radius: 8px;
    background: #1a1a2e;
    text-align: center;
    padding: 12px;
    transition: transform 0.2s ease;
    height: 200px;
    box-sizing: border-box;
}

.card:hover {
    transform: translateY(-4px);
}

.card-image img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

/* Быстрая регистрация */
.quick-register-container {
    max-width: 600px;
    margin-top: 400px;
    margin-left: 80px;
    padding: 10px;
    text-align: left;
    background-color: transparent;
    position: relative;
    z-index: 1000 !important;
    pointer-events: auto !important;
}

.quick-register-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto !important;
    z-index: 1000 !important;
}

.quick-register-input-group {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
}

.quick-register-input-group p {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.quick-register-input-group input {
    width: 260px;
    padding: 8px;
    border: 1px solid #fff; /* Белая рамка вместо #04033d */
    border-radius: 4px;
    font-size: 16px;
    color: #fff; /* Белый цвет шрифта */
    background-color: transparent; /* Прозрачный фон */
    box-sizing: border-box;
    pointer-events: auto !important;
    user-select: auto !important;
    z-index: 1000 !important;
    height: 40px;
}

.quick-register-input-group input:-webkit-autofill,
.quick-register-input-group input:-webkit-autofill:hover,
.quick-register-input-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px transparent inset; /* Убираем белый фон автозаполнения */
    -webkit-text-fill-color: #fff; /* Белый цвет текста при автозаполнении */
    border: 1px solid #fff; /* Белая рамка при автозаполнении */
}

.form-label {
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
    text-align: left;
}

.quick-register-button {
    padding: 8px 16px;
    font-size: 15px;
    background-color: #8586fe;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    align-self: flex-end;
    height: 40px;
    line-height: 1;
}

.quick-register-button:hover {
    background-color: #6b6cff;
}

.quick-register-agreement {
    font-size: 14px;
    color: #fff;
    margin-top: -10px;
    margin-left: 0;
}

.quick-register-agreement a {
    color: #8586fe;
    text-decoration: none;
}

.quick-register-agreement a:hover {
    text-decoration: underline;
}

.form-error {
    color: #ff0000;
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
}

#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    background: #040423; /* Фон сайта */
    pointer-events: none !important;
}

/* === ПОЛНОЕ ОТКЛЮЧЕНИЕ ФОНА АВТОЗАПОЛНЕНИЯ === */
.quick-register-input-group input {
    /* Твои базовые стили */
    background-color: transparent !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    box-shadow: none !important;
}

/* Переопределяем все состояния автозаполнения */
.quick-register-input-group input:-webkit-autofill,
.quick-register-input-group input:-webkit-autofill:hover,
.quick-register-input-group input:-webkit-autofill:focus,
.quick-register-input-group input:-webkit-autofill:active,
.quick-register-input-group input:-internal-autofill-selected,
.quick-register-input-group input:focus:-webkit-autofill,
.quick-register-input-group input:focus:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s !important;
    /* Хак: задержка на 5000 секунд, чтобы фон не появлялся при анимации */
}

/* Дополнительно: убираем тень и свечение при фокусе */
.quick-register-input-group input:focus {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
/*Стили для Главной страницы Сервисов*/



/*Стили для RankTraker*/

/*.mainmenu {
  display: flex;
*//*  align-items: center;*//*
}*/

/*.mainmenu .logo {
  margin-right: 40px; *//* Увеличь значение при необходимости *//*
}*/


/*Стили для сдвига всего кроме лого вправо*/
/*.mainmenu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mainmenu .logo {
  margin-right: 80px; *//* отступ после логотипа *//*
}

.menu-items-wrapper .sub-menu {
  display: flex;
  gap: 15px; *//* расстояние между пунктами *//*
  list-style: none;
  margin-left: 30px;
  padding: 0;
}

.mainmenu .last {
  margin-left: auto; *//* уводим "Войти"/профиль вправо *//*
}*/

/*Стили для сдвига всего, кроме лого вправо*/

ul.mainmenu li.logo {margin: 0;}
ul.mainmenu li.last {float: right;}

ul.mainmenu li a {
	color: #ffffff;
	text-decoration: none;
}
ul.mainmenu li a:hover {
	color: #ffffff;
}

.panelitems {
	text-align: center;
}

ul.langitem {
	list-style: none;
	display: inline-block;
	margin: 30px;
	padding: 0;
	max-width: 300px
}
ul.langitem li {
	margin: 30px 0 0 0;
	width: 100%;
}
ul.langitem li.image {
	margin: 0;
	text-align: center;
	width: 100%;
	height: 250px;
	overflow: hidden;
}
ul.langitem li.descr {
	color: #fff;
	height: 170px;
	overflow: hidden;
}
ul.langitem li a {
	color: #fdc073;
	text-decoration: none;
	font-size: 20px;
}
ul.langitem li a:hover {
	color: #FDA83D;
}
div.button {
	background: #3F4137;
	max-width: 200px;
	margin: 0 auto;
	padding: 5px 20px 5px 20px;
	border-radius: 10px;
	font-size: 20px;
}

.table-content {
	width: 100%;
	min-height: 100%;
	height: 100%;
}

/*Изменение стилей учебного сайта - Главная*/

.content-wrapper {
  display: flex;
  gap: 40px;
  padding: 20px 40px 60px 70px; /* top right bottom left */
  box-sizing: border-box;
  font-family: 'Arial';
  margin-top: 50px;
}

.articles-column {
  flex: 1 1 70%;
  max-width: 70%;
}

.sidebar-news {
  flex: 1 1 30%;
  max-width: 30%;
  background-color: rgba(255, 255, 255, 0.05);
  padding: 20px;
  color: #ffffff;
  font-family: Arial, sans-serif;
}

.sidebar-news h3 {
  margin-top: 0;
  font-size: 24px;
  color: #ffffff;
}

.sidebar-news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-news li {
  margin-bottom: 10px;
}

.sidebar-news a {
  color: #fff;
  text-decoration: none;
}

.sidebar-news a:hover {
  color: #CC0000;
}

/*CSS, чтобы ссылка занимала весь блок и выглядела как обычный блок*/

.article-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 10px; /* по желанию */
}

.article-link:hover {
/*  background-color: #f0f0f0; *//* эффект наведения */
  background-color: rgba(240, 240, 240, 0.5); /* светло-серый с прозрачностью 50% */
  text-decoration: underline;
  color: #04033d;
}


/*CSS, чтобы ссылка занимала весь блок и выглядела как обычный блок*/

/*Изменение стилей учебного сайта - Главная*/

.left-chapters {
	margin: 0;
	background: transparent;
/*	border-right: 1px solid #ccc;*/
	position: relative;
  	z-index: 1;
}

.left-chapters ul {
	width: 230px;
	margin: 0;
	padding: 55px 10px 10px 20px;
	list-style: none;
	font-size: 20px;
}
.left-chapters ul li {
	margin: 30px 0 0 0;
	color: #ffffff;
}

/* .left-chapters ul li.selected {color: #0059b2; } */
.left-chapters ul li a {
	color: #ffffff;
	text-decoration: none;
}

.left-chapters ul li.selected {
    color: #0059b2;
    position: relative;
	text-decoration: underline;
}

/*Стили для РанкТрекера*/

.left-chapters ul li.selected a {
    color: #0059b2;
    text-decoration: underline;
    font-weight: bold;
}

/*Стили для РанкТрекера*/

.left-chapters ul li.share {
  color: #ffffff !important;
}


.left-chapters ul li.selected::before {
    content: "";
    position: absolute;
    left: -30px; /* сместим левее от вертикальной линии */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
}

.left-chapters ul li a:hover { color: #CC0000; }
.left-chapters ul li.share {margin: 60px 0 0 0;}
.left-chapters ul li.share p {margin: 30px 0 30px 0;}
.left-chapters ul li.share a {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 0 20px 0 0;
}
.left-chapters ul li.share a.share-yt {
	width: 100%;
	height: 30px;
	background: url('../images/share_yt.png') no-repeat 0 0
}
.left-chapters ul li.share a.share-yt:hover {
	width: 100%;
	height: 30px;
	background: url('../images/share_yt.png') no-repeat 0 -30px
}

.tags-list {
	margin-top: 100px;
	margin-left: 90px;

}

ul.tags-list {
/*    width: 100%;*/
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.tags-list li {
	margin: 0;
/*	padding: 0 0 10px;*/
    display: inline-block;
    color: #fff;
}

ul.tags-list li a {
	padding: 5px;
	margin-top: 10px;
	font-size: 16px;
	border: 1px solid #04033d;
	color: #04033d;
}

.content {
	padding: 40px 20px 20px 40px;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
  	position: relative;
  	z-index: 1;
}

.table-content {
	background: transparent;
}

ul.breadcrumbs {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 20px;
	font-family: Sans-serif, Arial, Tahoma;
}
ul.breadcrumbs li {
	display: inline-block;
}
ul.breadcrumbs li a {
	color: #0059b2;
	text-decoration: none;
}
ul.breadcrumbs li a:hover { color: #CC0000; }
ul.breadcrumbs li:after{
	padding: 0 10px 0 10px;
	content: "\2192";
}
ul.breadcrumbs li.last:after {content: "";}

ul.control {
	margin: 0;
	padding: 60px 0 0 0;
	list-style: none;
	font-family: Sans-serif, Arial, Tahoma;
	font-size: 18px;
	width: 100%;
}
ul.control li {	float: left; padding: 0 0 0 10px;}
ul.control li.first:before {content: "\2190"; padding: 0 10px 0 0;}
ul.control li.last {float: right; padding: 0 40px 0 0;}
ul.control li.last:after {content: "\2192"; padding: 0 0 0 10px;}
ul.control li a { color: #0059b2; text-decoration: none; }
ul.control li a:hover { color: #CC0000; }

ul.content-table {
	margin: 0;
	padding: 60px 0 0 30px;
	list-style: none;
	font-family: Sans-serif, Arial, Tahoma;
	font-size: 28px;
}
ul.content-table li {
	margin: 0 0 40px 0;
}
ul.content-table li a {
	color: #BB5715;
	text-decoration: none;
}
ul.content-table li a:hover {color: #F0711C;}

/*
.content-text {
	margin: 60px 0 0 30px;
	color: #ffffff;
	font-size: 20px;
	font-family: Yandex Sans Display Light;
}

.content-text h1 {font-size: 32px;}

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

.content-text {
    flex: 1;
    padding: 20px;
}
*/

/*Форма логина*/
.login-form-container {
    margin: 100px 0 30px 70px;
    flex: 1;
    padding: 20px;
}

.login-form-container h1 {
    font-size: 20px;
    margin-bottom: 30px;
    font-family: 'Arial';
    text-decoration: none;
    color: #04033d;
}

.login-form {
    background-color: rgba(255, 255, 255, 0.75);
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #04033d;
    border-radius: 4px;
    font-size: 16px;
    color: #04033d;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
}

.login-form label {
    font-size: 16px;
    color: #04033d;
    margin-bottom: 5px;
    display: block;
}

.login-form .form-error {
    color: #ff0000;
    font-size: 14px;
    margin-bottom: 10px;
}

.login-form button {
    position: relative;
    padding: 6px 14px;
    font-size: 14px;
    background-color: #04033d;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.login-form button:hover {
    background-color: #061060;
}

.login-form a {
    color: #04033d;
    text-decoration: none;
    font-size: 14px;
}

.login-form a:hover {
    text-decoration: underline;
}
/*Форма логина*/

/* Форма регистрации */
.register-form-container {
    margin: 100px 0 30px 70px;
    flex: 1;
    padding: 20px;
}

.register-form-container h1 {
    font-size: 20px;
    margin-bottom: 10px;
    font-family: 'Arial';
    font-weight: normal; /* Не жирный шрифт */
    text-decoration: none;
    color: #04033d;
    text-transform: uppercase; /* На случай, если текст заголовка будет меняться */
}

.register-form-container hr {
    border: 0;
    border-top: 1px solid #04033d;
    margin: 10px 0 20px 0;
}

.register-form {
    background-color: rgba(255, 255, 255, 0.75);
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
}

.register-form input[type="text"],
.register-form input[type="password"],
.register-form input[type="email"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #04033d;
    border-radius: 4px;
    font-size: 16px;
    color: #04033d;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
}

.register-form label {
    font-size: 16px;
    color: #04033d;
    margin-bottom: 5px;
    display: block;
}

.register-form .form-error {
    color: #ff0000;
    font-size: 14px;
    margin-bottom: 10px;
}

.register-form button {
    position: relative;
    padding: 6px 14px;
    font-size: 14px;
    background-color: #04033d;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.register-form button:hover {
    background-color: #061060;
}

.register-form a {
    color: #04033d;
    text-decoration: none;
    font-size: 14px;
}

.register-form a:hover {
    text-decoration: underline;
}
/* Форма регистрации */

/*Стили для страницы поста Блога*/
.post-container {
    margin: 10px 0 30px 70px; /* Смещение вниз на 100px и влево на 70px */
    flex: 1;
    padding: 20px;
}

.post-content {
    background-color: rgba(255, 255, 255, 0.75); /* Полупрозрачная белая подложка */
    padding: 20px;
    border-radius: 8px;
    max-width: 800px; /* Ограничение ширины контента */
    color: #04033d; /* Синий цвет текста */
    font-size: 16px;
    line-height: 1.6;
}

.post-content h1 {
    font-size: 24px;
    margin-bottom: 30px;
    font-family: 'Arial';
    color: #04033d; /* Синий цвет заголовка */
    width: 100%; /* Ограничение ширины заголовка */
    box-sizing: border-box; /* Учет padding и border в ширине */
}

.post-content img.img-article-left {
    max-width: 300px;
    height: auto;
    float: left;
    margin: 0 20px 20px 0;
    border-radius: 8px;
}

.tags-list {
    list-style: none;
    padding: 0;
/*    margin: 30px 0 20px 70px; *//* Смещение вниз на 30px и влево на 70px для выравнивания со статьей */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #04033d; /* Синий цвет текста для тегов */
}

.tags-list li {
    font-size: 14px;
}

.tags-list li a {
    color: #04033d; /* Синий цвет ссылок тегов */
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #04033d;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.tags-list li a:hover {
    background-color: #04033d; /* Синий фон при наведении */
    color: #fff; /* Белый текст при наведении */
}
/*Стили для страницы поста Блога*/

ul.lang-list {
	list-style: none;
	margin: 0;
	padding: 14px 0 0 0;
	background: #04033d;
	width: 100%;
	height: 50px;
	border-top: 1px solid #959A82;
	box-sizing: border-box;
	font-size: 18px;
	font-family: Sans-serif, Arial, Tahoma;
}
ul.lang-list li {
	display: inline-block;
	margin-left: 40px;
}
ul.lang-list li.selected {color: #fdc073; border-bottom: 1px solid #fdc073;}
ul.lang-list li a {
	color: #eee;
	text-decoration: none;
}
ul.lang-list li a:hover {color: #fdc073;}

.topic-subject .topic-line {
	border-bottom: 1px solid #CC0000;
	margin-top: -16px;
}

.topic-subject .topic-text {
	display: inline-block;
	font-size: 28px;
	color: #777;
	padding: 0 10px 0 10px;
	margin-left: 30px;
	background: #04033d;
	font-family: Sans-serif, Arial, Tahoma;
}

.list-topic {
	margin: 40px 0 60px 0;
	font-family: Sans-serif, Arial, Tahoma;
}
.list-topic p {
	margin: 0;
	font-size: 28px;
}
.list-topic ol {
	columns: 2;
	-webkit-columns: 2;
	column-gap: 40px;
}
.list-topic ol li {
	display: list-item;
	margin: 10px 10px 0 0px;
	padding: 0 0 0 10px;
}
.list-topic ol li a {
	color: #ffffff;
	text-decoration: none;
}
.list-topic ol li a:hover {color: #CC0000;}

.highlight {
	max-width: 350px;
	padding: 0 10px 0 10px;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	background: #04033d;
}
.highlight p { margin: 0; }
.highlight .block {
	width: 100%;
	margin: 0;
}
.highlight .block p { margin: 0; }

.quote {
	background: url('../images/blockquote.png') no-repeat 0 10px;
	padding: 5px 5px 5px 70px;
	font-family: Sans-serif, Arial, Tahoma;
	font-style: italic;
}

#footer {
	box-sizing: border-box;
	background: transparent;
/*	background: #04033d;*/
	padding: 0px;
	color: #aaa;
	font-size: 14px;
	font-family: Verdana, Geneva, Arial, Helvetica;
	text-align: left;
	overflow: hidden;
}
#footer a {
	text-decoration: underline;
	color: #aaa;
}

.form-input {
    width: 300px;
    font-size: 16px;
}

.form-label {
    display: inline-block;
    min-width: 150px;
    vertical-align: top;
}

.form-error ul {
    list-style: none;
    padding: 0;
    color: #CC0000;
}

.form-button {
    min-width: 200px;
    font-size: 16px;
}

/*Стили для пагинации*/

/*.list-pages {
	text-align: center;
	margin: 0 0 20px 0;
}
.list-pages ul {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
}
.list-pages ul li {
	display: inline-block;
	margin: 0 20px 0 0;
}
.list-pages a {
	color: #ffffff;
	font-size: 24px;
	text-decoration: none;
}
.list-pages .page-num, .page-num-selected {
	display: inline-block;
	width: 60px;
	height: 44px;
	padding: 16px 0 0 0;
	border: 1px solid #d0d0d0;
	border-radius: 30px;
}
.list-pages .page-num:hover {
	box-shadow: 3px 3px 1px #d0d0d0;
}
.list-pages .page-num-selected {
	border: none;
	color: #ffffff;
	font-size: 20px;
}
.list-pages .page-num-selected:hover {
	box-shadow: none;
}*/

/*Стили для пагинации*/

/*Новые стили для пагинации*/
/* === СОВРЕМЕННАЯ ПАГИНАЦИЯ === */
.list-pages {
  text-align: center;
  margin: 30px 0 40px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.list-pages ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* адаптивность */
}

.list-pages ul li {
  margin: 0;
}

/* Кнопки навигации: Prev / Next */
.list-pages .page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  color: #04033d;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  transition: all 0.25s ease;
  user-select: none;
}

.list-pages .page-nav:hover {
  background: #04033d;
  color: white;
  border-color: #04033d;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(4, 3, 61, 0.15);
}

.list-pages .page-nav:disabled,
.list-pages .page-nav.disabled {
  color: #aaa;
  border-color: #ddd;
  background: #f9f9f9;
  pointer-events: none;
  transform: none;
}

/* Цифры страниц */
.list-pages .page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #04033d;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  border: 1.5px solid #ccc;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-pages .page-num:hover {
  background: #04033d;
  color: white;
  border-color: #04033d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 3, 61, 0.2);
}

/* Активная страница */
.list-pages .page-num-selected {
  background: #04033d;
  color: white;
  border-color: #04033d;
  font-weight: 600;
  cursor: default;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(4, 3, 61, 0.25);
}

.list-pages .page-num-selected:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(4, 3, 61, 0.25);
}

/* Эллипсис (многоточие) */
.list-pages .page-ellipsis {
  color: #666;
  font-weight: 500;
  padding: 0 8px;
  user-select: none;
}
/* Для неактивных кнопок */
.list-pages .page-nav.disabled {
  color: #aaa;
  border-color: #ddd;
  background: #f9f9f9;
  pointer-events: none;
  cursor: default;
}

/* Активная страница — ссылка, но не кликабельна */
.list-pages .page-num-selected {
  pointer-events: none;
}
/*Новые стили для пагинации*/

/*Современный дизайн страницы поста
==========================================================================*/

/* Основной контейнер страницы */
.article-page {
    max-width: 1320px;
    width: 92%;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

@media (min-width: 768px) {
    .article-page {
        padding: 60px 40px 100px;
    }
}

/* Подложка */
.article-body-wrapper {
    background-color: rgba(255, 255, 255, 0.94);
/*    border-radius: 16px;*/
    padding: 48px 40px;
/*    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.10);*/
    backdrop-filter: blur(10px);
}

/* Тёмная тема */
@media (prefers-color-scheme: dark) {
    .article-body-wrapper {
        background-color: rgba(31, 41, 55, 0.94);
/*        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);*/
    }

    .article-title,
    .article-body,
    .meta-date,
    .meta-category,
    .meta-tags-label,
    .tags-list li a,
    .article-body h2,
    .article-body h3 {
        color: #04033d !important;
    }

    .article-body a {
        color: #04033d !important;
    }

    .article-body a:hover {
        color: #60a5fa !important;
    }
}

/* Заголовок статьи */
.article-header {
    margin-bottom: 32px;
}

.article-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px 0;
    color: #04033d;
}

/* Мета-строка */
.article-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    font-size: 1rem;
    color: #04033d;
}

.meta-date,
.meta-category,
.meta-tags-label {
    color: #04033d;
    font-weight: 500;
}

.meta-tags-label {
    color: #04033d !important;
    font-weight: 600;
}

.meta-separator {
    color: #d1d5db;
}

/* Блок с картинкой и первым абзацем — обтекание работает */
.article-intro-with-image {
    margin-bottom: 32px;
    overflow: hidden;  /* clearfix — обязательно для float */
}

/* Фото — обтекание текстом справа */
.article-hero {
    float: left;
    width: 640px;
    margin: 0 32px 32px 0;  /* поле справа — 32px, можно уменьшить до 24px/16px */
/*    border-radius: 12px;*/
    overflow: hidden;
/*    box-shadow: 0 8px 24px rgba(0,0,0,0.12);*/
}

.article-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Первый абзац — обтекает картинку справа */
.article-lead-paragraph {
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.6;
    color: #04033d;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

/* На мобильных отключаем обтекание */
@media (max-width: 768px) {
    .article-hero {
        float: none;
        width: 100%;
        margin: 0 0 24px 0;
    }

    .article-lead-paragraph {
        margin-top: 16px;  /* небольшой отступ сверху на мобильных */
    }
}

/* Остальной контент — начинается после обтекания */
.article-body-rest {
    font-size: 1.25rem;
    line-height: 1.35;
    color: #04033d;
    clear: both;  /* на всякий случай прерывает обтекание */
}

.article-body-rest {
    margin-top: 0 !important;     /* убираем любой отступ сверху */
    padding-top: 0;               /* если есть внутренний отступ — тоже убираем */
}

/* Заголовки в основном контенте */
.article-body-rest h2,
.article-body-rest h3 {
    clear: both;
    margin: 1.5em 0 1em;
    color: #04033d;
}

.article-body-rest h2 {
    font-size: 2.0rem;
    font-weight: 800;
}

.article-body-rest h3 {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Списки */
.article-body-rest ul,
.article-body-rest ol {
    margin: 1.5em 0;
    padding-left: 1.5em;
}

.article-body-rest li {
    margin-bottom: 0em;
}

/* Ссылки */
.article-body-rest a {
    color: #04033d;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.article-body-rest a:hover {
    color: #1e40af;
}

/* Теги */
.tags-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tags-list li a {
    color: #04033d;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #04033d;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.2s ease;
}

.tags-list li a:hover {
    background-color: #04033d;
    color: white;
}

/* Защита от inline-стилей CKEditor */
.article-body-rest [style*="color:#000000"],
.article-body-rest [style*="color: #000000"] {
    color: inherit !important;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .article-lead-paragraph {
        font-size: 1.25rem;
    }

    .article-body-rest {
        font-size: 1.125rem;
    }

    .article-hero {
        margin-bottom: 24px;
    }
}

/*Новые стили для страницы поста Блога 2.0*/

/* Превью статей на главной — единый стиль */

.list-articles .article-link {
    color: white;
    font-family: inherit;
    font-weight: normal !important;
    font-size: 16px;              /* или 18px — подбери под себя */
    line-height: 1.5;
    text-align: left;
}

/* Заголовок в сниппете — жирный */
.list-articles .article-link h2 {
    font-weight: bold !important;    /* только заголовок жирный */
    font-size: 1.25rem;              /* можно чуть крупнее заголовка */
    margin: 0.5em 0 0.8em 0;
    color: white;
}

/* Всё остальное в сниппете (текст, span, strong и т.д.) — не жирное */
.list-articles .article-link p,
.list-articles .article-link div,
.list-articles .article-link span,
.list-articles .article-link strong,
.list-articles .article-link b,
.list-articles .article-link [style*="font-weight"] {
    font-weight: normal !important;
    color: white !important;
    background-color: transparent !important;
}

/* Перебиваем любые inline-стили CKEditor */
.list-articles .article-link [style*="color"],
.list-articles .article-link [style*="font-weight"],
.list-articles .article-link [style*="bold"] {
    font-weight: normal !important;
    color: white !important;
}
/* Стили index.html для сниппета статьи */

/* Добавим к стилям следующий CSS: */

/* Стили для вывода результата Парсинг лев колонки WS

/* Контейнер: flex, горизонтально */
/* Внешний контейнер для изоляции */
/* Внешний контейнер для изоляции */


/*Стили парсинга левой колонки Wordstat 2000*/

/* Контейнер: flex, горизонтально */

/* Контейнер: flex, горизонтально */
.ws-lev-kol-container-all-and-back {
  display: flex;
}

.back-to-form {
  display: block;
}

.ws-lev-kol-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Левая часть (таблица) */
.table-result-container {
  flex: 1 1 70%;
  max-width: 1000px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* Правая часть (панель групп) */
.table-group-container {
  flex: 1 1 30%;
  font-family: Arial, sans-serif;
  color: #04033d;
}

/* Общий стиль для панелей поиска */
.search-phrase-panel,
.search-group-panel {
  background-color: rgba(255, 255, 255, 0.95);
  color: #04033d;
  padding: 10px 0 10px 10px;
  border: 1px solid #ccc;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin-bottom: 10px;
}

/* Таблица групп: фон + высота */
.groups-table {
  min-height: 270px;
  background-color: rgba(255, 255, 255, 0.95);
}

/* Стили для отображения таблицы минусов под таблицей групп */
#groups-minusa-container {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: 0 auto;
}

#groups-table-wrapper, #minusa-table-wrapper {
  width: 100%;
}

#minusa-table th:first-child,
#minusa-table td:first-child {
  width: 20px;
  text-align: center;
}

/* Унифицированный стиль таблиц */
.table-common {
  box-sizing: border-box;
  border-collapse: collapse;
  color: #04033d;
  font-family: Arial, sans-serif;
  font-size: 16px;
  width: 100%;
}

.table-common th {
  text-align: left;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px;
  border: 1px solid #ccc;
}

.table-common td {
  padding: 10px;
  border: 1px solid #ccc;
}

.table-common tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.75);
}

.table-common tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.95);
}

/* Ширина колонки "Фраза" */
#phrase-table td:nth-child(2),
#phrase-table th:nth-child(2) {
  width: 75%;
}

/* Добавление группы */
#add-group-btn {
  margin-left: 10px;
  font-size: 18px;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #04033d;
  color: white;
  border: none;
  border-radius: 4px;
}

/* Стили для модальных окон 1.0 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  font-family: Arial, sans-serif;
  color: #04033d;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.modal-content input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

.modal-content button {
  padding: 8px 16px;
  background-color: #04033d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-content .close {
  float: right;
  font-size: 20px;
  cursor: pointer;
}

/* Стили для контекстного меню Удаления группы */
#context-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(1,0,0,0.2);
  font-size: 14px;
  z-index: 1000;
  padding: 4px 0;
  border-radius: 4px;
  min-width: 180px;
}

#context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#context-menu li {
  padding: 8px 12px;
  cursor: pointer;
}

#context-menu li:hover {
  background-color: #f0f0f0;
}

/* Стили для переноса фраз группы */
#phrase-context-menu .menu-item {
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
}

#phrase-context-menu .menu-item:hover {
  background-color: #eee;
}

#groups-submenu .submenu-item {
  padding: 6px 12px;
  cursor: pointer;
}

#groups-submenu .submenu-item:hover {
  background-color: #ddd;
}

/* Стили для модальных окон 2.0 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: auto;
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 320px;
  padding: 20px 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  color: #04033d;
  font-family: Arial, sans-serif;
  position: relative;
}

.modal-content .close {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #555;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}

.modal-content .close:hover {
  color: #CC0000;
}

.modal-content input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  margin: 15px 0 20px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  color: #04033d;
  box-sizing: border-box;
}

.modal-content button {
  background-color: #04033d;
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.25s ease;
  margin-right: 10px;
}

.modal-content button:hover {
  background-color: #30345a;
}

#context-menu,
#phrase-context-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  font-size: 14px;
  z-index: 1100;
  border-radius: 6px;
  min-width: 180px;
  padding: 4px 0;
  user-select: none;
}

#context-menu li,
#phrase-context-menu .menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

#context-menu li:hover,
#phrase-context-menu .menu-item:hover {
  background-color: #f0f0f0;
}

#groups-submenu {
  border-radius: 6px;
  min-width: 160px;
  top: 0;
  left: 100%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  background: #fff;
  position: absolute;
  display: none;
}

#copy-move-group, #copy-move-modal, #delete-selected-group {
  font-family: 'Arial';
  color: #04033d;
  border-radius: 6px;
}

.menu-item:hover #groups-submenu {
  display: block;
}

/* Вместо :nth-child() — ручное чередование */
.table-common tbody tr.row-even {
  background-color: rgba(255, 255, 255, 0.95);
}

.table-common tbody tr.row-odd {
  background-color: rgba(255, 255, 255, 0.75);
}

/* Стили для полосы прокрутки */
#phrase-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ccc;
  overflow-y: scroll;
}

#phrase-table {
  border-collapse: collapse;
  width: 100%;
}

#phrase-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

#phrase-table th:nth-child(3),
#phrase-table td:nth-child(3) {
  width: 100px;
  min-width: 220px;
}

#phrase-table th, #phrase-table td {
  padding: 8px;
  border: 1px solid #ccc;
}

#minusa-table-wrapper {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #ccc;
  margin-top: 10px;
}

#minusa-table thead th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

/* Стили для нового контейнера проекта */
.project-container {
  max-width: 1200px;
/*  margin: 0 auto;
  padding: 20px;*/
  margin-top: 100px;
  margin-left: 90px;
  margin-bottom: 50px;
}

.project-container h2 {
    margin-bottom: 50px;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 20px;
}

/*Стили парсинга левой колонки Wordstat 2000*/


/*Стили для RankTrakers*/

.tracker-page-container {
    margin-top: 150px;
    display: flex;
    align-items: stretch; /* оба блока будут одинаковой высоты */
    gap: 20px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    padding: 0 60px;
    align-items: stretch; /* оба блока в одну высоту */
}

/* Левый блок — проекты */
.rank-tracker-projects-list {
    flex: 0 0 20%; /* фиксированная ширина 40% */
/*    max-width: 450px; *//* можно задать в px если хочешь */
    box-sizing: border-box;
    /*background-color: rgba(255, 255, 255, 0.95);*/
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.left-chapters ul li.chapter-title {
    color: white;
    font-weight: bold; /* по желанию — чтобы выделить заголовок */
}

#sidebar-projects-rank-tracker {
  box-sizing: border-box;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #04033d;
  list-style: none;
  margin: 0;
  padding: 0;
  /*border: 1px solid #ccc;*/
  border-collapse: collapse; /* как у таблицы */
}

/* Общий стиль для панелей поиска */
.search-project-rank-tracker-panel,
 .rank-tracker-search-phrase-panel{
  background-color: rgba(255, 255, 255, 0.95);
  color: #04033d;
  padding: 10px 0 10px 10px;
  border: 1px solid #ccc;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 16px;
/*  margin-bottom: 10px;*/
}


.rank-tracker-title-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  color: #04033d;
  padding: 10px;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}

.chapter-title-rank-trackers-project {
/*  background-color: rgba(255, 255, 255, 1);*/
  display: flex;           /* включаем flexbox */
  justify-content: space-between;
  align-items: center;     /* вертикальное центрирование */
  margin-top: 17px;
  margin-bottom: 15px;
  height: 48px;
  padding: 10px 10px;
}

.rank-tracker-title-panel .title-text {
  font-weight: bold;
}

.rank-tracker-title-panel .update-button {
  padding: 6px 12px;
  font-size: 14px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.rank-tracker-title-panel .update-button:hover {
  background-color: #e6e6e6;
}

#sidebar-projects-rank-tracker li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  background-color: rgba(255, 255, 255, 0.75);
}

/* Чётные и нечётные строки */
#sidebar-projects-rank-tracker li:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.95);
}

/* Стиль ссылки по умолчанию */
#sidebar-projects-rank-tracker li a {
  color: #04033d;
  text-decoration: none;
  display: block;
}

/* Заголовок */
#sidebar-projects-rank-tracker .chapter-title {
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.95);
}

/* Выбранный элемент */
#sidebar-projects-rank-tracker li.selected a {
  color: #0059b2;
  text-decoration: underline;
}

/*Чтобы sidebar занимал 20% остальной контент 80%*/

/* Структура двухколоночного layout'а */
.table-content-rank-tracker {
  margin-top: 0px; /* сдвиг вниз на 30px */
  margin-left: 40px;
  width: 100%;
}

.left-chapters-rank-tracker-inner-padding {
    margin-top: 0px; /* сдвиг вниз на 30px */
}

/* Sidebar с проектами */
.left-chapters-rank-tracker {
  padding-top: 0px;
  width: 40%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 10px;
}

.sidebar-projects {
    margin-top: 30px; /* сдвиг вниз на 30px */
}

/* Основной контент */
.content-rank-tracker {
  width: 60%;
  vertical-align: top;
  box-sizing: border-box;
  padding: 10px;
  padding-right: 30px;
}

.large-checkbox {
  width: 15px;
  height: 15px;
  transform: scale(1.3);
  cursor: pointer;
}

.edit-project-modal {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  font-family: Arial, sans-serif;
  color: #04033d;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/*Чтобы sidebar занимал 20% остальной контент 80%*/

/*Стили для страницы первого экрана сервиса Съем позиций*/

.tracker-create-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
/*  max-width: 1200px;*/
  color: #04033d;
  margin-top: 0px; /* сдвиг вниз на 30px */
  box-sizing: border-box;
  flex: 1; /* занимает всё оставшееся место */
/*  height: 600px; *//* фиксированная высота формы */
}

.tracker-section-title {
  background-color: rgba(255, 255, 255, 0.95);
  text-align: center;    /* центрируем текст по горизонтали */
  height: 50px;          /* фиксированная высота */
  display: flex;         /* чтобы центрировать по вертикали */
  align-items: center;   /* центрирование по вертикали */
  justify-content: center; /* центрирование по горизонтали */
}

.tracker-section-title h2 {
  font-weight: normal;   /* обычный шрифт */
  margin: 0;
}

.tracker-section {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px;
}

.full-width {
  width: 100%;
}

.tracker-row {
  display: flex;
  gap: 15px;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
}


.tracker-section.half-width {
  flex: 1 1 calc(50% - 7.5px); /* половина ширины минус половина gap */
  min-width: 0; /* чтобы корректно сжималась */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tracker-section label {
  display: block;
  margin-bottom: 5px;
}

.tracker-section.half-width label {
  display: block;
  margin-bottom: 15px; /* отступ под надписью */
  font-weight: bold;   /* жирный шрифт */
}

.tracker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.tracker-actions button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.tracker-actions button:hover {
  background-color: #e6e6e6;
}

.tracker-section-name {
  position: relative; /* привязка кнопки к этому блоку */
  height: 50px;
  display: flex;
  align-items: center;
}

.tracker-section-name input {
  width: 100%;
  height: 100%;
  padding: 0 90px 0 10px; /* отступ справа под кнопку */
  font-size: 14px;
  box-sizing: border-box;
}

.save-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 14px;
  font-size: 14px;
  background-color: #04033d; /* синий фон */
  color: #fff; /* белый текст */
  border: none;
  border-radius: 6px; /* скруглённые углы */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.save-button:hover {
  background-color: #061060; /* чуть светлее или темнее при наведении */
}

.tracker-section-name {
  height: 50px;
  display: flex;
  align-items: center;
}

.tracker-section-name input {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.95);
}


.key-label {
  display: block;
  margin-bottom: 8px; /* отступ под заголовком */
}

.tracker-section.half-width input,
.tracker-section.half-width textarea {
  width: 100%;           /* инпут занимает всю ширину контейнера */
  padding-left: 8px;     /* отступы внутри инпута */
  padding-right: 8px;
  box-sizing: border-box;
}

.setting-item {
  margin-bottom: 30px;
}

.setting-item input {
  padding: 5px;
}

.table-result-rank-tracker-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
/*  max-width: 1200px;*/
  color: #04033d;
  margin-top: 0px; /* сдвиг вниз на 30px */
  box-sizing: border-box;
  flex: 1; /* занимает всё оставшееся место */
  height: 600px; /* фиксированная высота формы */
}

.search-engine-radio-group {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.search-engine-option {
  flex: 1;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  transition: all 0.2s ease;
}

.search-engine-option img {
  flex-shrink: 0;
/*  vertical-align: middle;*/
  margin-top: 4px;
}

.engine-name {
  font-weight: 600;
  font-size: 16px;
  color: #04033d;
}

.search-engine-option:hover {
  border-color: #04033d;
  background: rgba(4,3,61,0.05);
}

.search-engine-option:has(input[type="radio"]:checked) {
  border-color: #04033d;
  background: rgba(4,3,61,0.1);
  box-shadow: 0 0 0 1px #04033d;
}


/* Блок с индексом изменений */

/* Панель заголовка — оставляем как есть, только уберём дублирование font-weight */
.index-changes-title-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
  color: #04033d;
  min-height: 53px;
  padding: 10px;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 30px;
  width: 100%;
  box-sizing: border-box;
}

.index-changes-title-panel h3 {
  margin: 0;
  font-size: 16 px;
  font-weight: inherit; /* теперь наследует bold от родителя */
}

/* ========== НОВЫЕ СТИЛИ ДЛЯ ТАБЛИЦЫ ========== */
.index-changes-table-container {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  color: #04033d;
  font-family: Arial, sans-serif;
}

.index-changes-table {
  background-color: rgba(255, 255, 255, 0.95);
  width: 100% !important;           /* растягиваем на всю ширину */
  border-collapse: collapse;        /* убираем двойные границы */
  table-layout: fixed;              /* равномерные колонки */
  color: #04033d;
  font-size: 15px;
}

.index-changes-table th,
.index-changes-table td {
  padding: 8px;
  text-align: center;
  border: 1px solid #ccc;
  word-wrap: break-word;
}

.index-changes-table th {
  background-color: rgba(4, 3, 61, 0.1);
  font-weight: bold;
  color: #04033d;
}

.index-changes-table tbody tr:hover {
  background-color: rgba(4, 3, 61, 0.05);
}

/* Блок с индексом изменений - нормируем высоту */
.index-changes-block {
    height: 424px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
}

.index-changes-title-panel {
    background: #f8f9fa;
    padding: 9px 10px;
    text-align: center;
    font-weight: bold;
    font-size: 13.5px;
    flex-shrink: 0;
}

/* Выравнивание заголовка "Проекты" по высоте с заголовками большой таблицы */
.projects-table thead th:nth-child(2) {
  height: 61px; /* подберите точно под высоту двух строк в большой таблице (обычно 70–85px) */
  line-height: 61px;
  vertical-align: middle;
}

/* Делаем строки таблицы проектов такой же высоты, как у большой таблицы позиций */
.projects-table th,
.projects-table td {
  padding: 6px 8px; /* тот же padding, что и в .table-common */
  height: 24px; /* подберите 42–48px — точно под высоту строк в rank-tracker-phrase-table */
  line-height: 24px; /* центрирует текст по вертикали */
  vertical-align: middle;
}
/* Ключевое — таблица занимает всё оставшееся место */
.index-changes-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.index-changes-table thead {
    flex-shrink: 0;
}

.index-changes-table th {
/*    background: #f5f5f5;*/
    padding: 0;
    height: 36px;
    line-height: 30px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    background-color: rgba(4, 3, 61, 0.1);
}

.index-changes-table tbody {
    flex: 1;
    display: block;
    overflow: hidden;
}

.index-changes-table tr {
    display: table;
    width: 100%;
    height: 13.7657%;               /* ровно 100% / 7 = 14.2857% */
    table-layout: fixed;
}

.index-changes-table td {
    padding: 0 6px;
    text-align: center;
    font-size: 14.5px;
    border-bottom: 1px solid #eee;
    height: 100%;
    box-sizing: border-box;
    display: table-cell;
    vertical-align: middle;
}

.index-changes-table tr:last-child td {
    border-bottom: none;
}
 /*Блок с индексом изменений - нормируем высоту 2 */

/*Стили для RankTraker*/

/* Стили для вывода Результата Сервиса: Сбор левой колонки WS*/

.parsing-lev-kol-main-wrapper{
    margin-top: 400px;
}

.freg-parser-main-wrapper{
    margin-top: 400px;
}

/*Стили для сайдбара вертикальной полоски*/

.layout {
    display: flex;
    min-height: 100vh;
}

/* Сайдбар */
.sidebar {
    width: 120px;
/*    background-color: #2c3e50;*/
    background-color: #1a1a2e;
    color: #fff;
    padding-top: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

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

.sidebar li {
    padding: 10px;
    text-align: center;
}

.sidebar a {
    color: white;
    text-decoration: none;
}

/* Основная колонка */
.main-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Шапка */
.header {
/*    background-color: #34495e;*/
    padding: 10px 20px;
}

.mainmenu {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainmenu .logo {
    width: 50px;
    height: 50px;
    background: url('/static/maineur/images/main.ico') no-repeat center/contain;
    margin-right: 20px;
}

/* Последний пункт прижать к правому краю */
.mainmenu li.last {
    margin-left: auto;
    margin-right: 30px;
}


/* Футер */
#footer {
    background: #222;
    color: #bbb;
    text-align: center;
    padding: 0px;
    font-size: 12px;
}

/*Стили для сайдбара вертикальной полоски*/

/* Основной контейнер меню */
#leftchapters {
  position: relative;
  list-style: none;
  margin: 40px;
  padding-left: 0px; /* отступ для линии */
/*  border-left: 2px solid white; *//* вертикальная белая линия */
}

/* Элементы меню */
#leftchapters li {
  position: relative;
  padding: 0px 0;
  padding-bottom: 20px;
  color: #0059b2;
  cursor: pointer;
}

/* Размеры иконок категорий */
.category-icon {
    width: 50px;
    height: 50px;
    object-fit: cover; /* чтобы пропорции сохранялись и не было искажений */
    display: block;    /* чтобы убрать возможные отступы вокруг картинки */
}

/*Стили для plagins*/

html, body {
/*    height: 100%;*/
    margin: 0;
}

.page-container-tools {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


.layout-tools {
    display: flex;
/*    min-height: 10vh;*/
    flex: 1; /* занимает всё пространство между верхом и футером */
}

/* Сайдбар */
.sidebar {
    width: 120px;
/*    background-color: #2c3e50;*/
    background-color: #1a1a2e;
    color: #fff;
    padding-top: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

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

.sidebar li {
    padding: 10px;
    text-align: center;
}

.sidebar a {
    color: white;
    text-decoration: none;
}

/* Основная колонка */
.main-section-tools {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Шапка */
.header-tools {
/*    background-color: #34495e;*/
    padding: 10px 20px;
}

.mainmenu-tools {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainmenu-tools .logo {
    width: 50px;
    height: 50px;
    background: url('/static/maineur/images/main.ico') no-repeat center/contain;
    margin-right: 20px;
}

/* Последний пункт прижать к правому краю */
.mainmenu-tools li.last {
    margin-left: auto;
    margin-right: 30px;
}
/* Контент */
.tools-content-text {
    margin-top: 150px;
    margin-left: 70px;
    display: flex;
    align-items: stretch; /* оба блока будут одинаковой высоты */
    gap: 20px;
    width: 1000px;
    max-width: none;
/*    margin-left: 0;*/
    margin-right: 0;
    box-sizing: border-box;
/*    padding: 0 60px;*/
    align-items: stretch; /* оба блока в одну высоту */
    flex: 1;
    flex-direction: column; /* заголовок сверху, посты ниже */
    padding: 20px;
}

/* Заголовок рубрики */
.tools-content-text h1 {
    font-size: 32px;      /* размер заголовка */
    margin-bottom: 20px;  /* отступ снизу */
    text-align: left;
}

.tools-list-articles {
  text-align: justify;
  padding: 10px;
}

/* Список постов */
ul.tools-list-articles {
    list-style: none;     /* убираем маркеры */
    padding: 0;
    margin: 0;
/*    width: 100%;  */        /* растягиваем на всю ширину контейнера */
    width: 2000px;    /* можно увеличить до желаемой ширины */
}

ul.tools-list-articles li {
    border-top: 1px solid white;
    padding-top: 20px;
    margin-top: 20px;
	border-bottom: 1px solid #04033d;
}

.tools-article-link {
    display: block;
    text-decoration: none;
    color: inherit; /* наследуем цвет текста */
    font-size: 16px;
/*    padding: 15px;
    border: 1px solid #ddd;
    border-top: 3px solid #007bff; *//* линия сверху *//*
    border-radius: 8px;
    background: #f9f9f9;
    transition: background 0.2s, text-decoration 0.2s;*/
}

/* При наведении */
.tools-article-link:hover {
    background-color: rgba(240, 240, 240, 0.5); /* светло-серый с прозрачностью 50% */
    text-decoration: underline;
    color: #04033d;
    padding: 10px;
}

/* Каждый пост */
/*ul.tools-list-articles {
*//*    background: #f9f9f9;  *//**//* светлый фон для поста *//*
*//*    border: 1px solid #ddd;*//*
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
}*/

/* Панель с категорией и датой */
.tools-article-panel {
    display: flex;
    justify-content: space-between; /* категория слева, дата справа */
    font-size: 14px;
    margin-bottom: 10px;
}

.tools-link-read-post a:hover {
    text-decoration: underline;
}

/* Ссылка "Читать пост" */
/*.tools-link-read-post a {
    display: inline-block;
    margin-top: 10px;
    color: #007bff;
    text-decoration: none;
}*/

/*ul.list-articles li {
*//*    background: #f9f9f9;      *//**//* светлый фон для поста *//*
    border: 1px solid #ddd;   *//* рамка вокруг поста *//*
    border-top: 3px solid #007bff; *//* горизонтальная линия сверху *//*
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 20px;
    padding: 20px;
}*/


#footer {
    background: transparent;
    padding: 10px;
    text-align: center;
}

/*Стили для news*/
/* Сброс дефолтных отступов */
html, body, h1, h2, h3, p, ul {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Основной контейнер */
.page-container-news {
    display: flex;
    min-height: 100vh;
}

/* Основная часть */
.main-section-news {
    flex: 1;
    padding: 20px;
}

/* Главный контейнер */
.page-container-news {
    display: flex;
    min-height: 100%;
}

/* Правая часть с контентом */
.main-section-news {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Футер */
#footer {
    margin-top: auto;
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
    color: #777;
}

/* Стили для страницы профиля */
.profile-mainwrapper {
    margin: 100px 0 30px 90px; /* Смещение вниз и влево */
    font-family: 'Arial';
    font-size: 18px;
}

.profile-container {
    padding: 0px;
}

.profile-content {
    background-color: rgba(255, 255, 255, 0.75); /* Полупрозрачная белая подложка */
    padding: 20px;
    border-radius: 8px;
    max-width: 1000px; /* Увеличенная ширина для соответствия таблице */
    color: #04033d; /* Синий цвет текста */
    font-size: 16px;
    line-height: 1.6;
}

.profile-content h1 {
    font-size: 24px;
    margin-bottom: 30px;
    font-family: 'Arial';
    color: #04033d; /* Синий цвет заголовка */
    width: 100%; /* Ограничение ширины заголовка */
    box-sizing: border-box; /* Учет padding и border в ширине */
}

.profile-content h3 {
    font-size: 20px;
    margin-bottom: 20px;
    font-family: 'Arial';
    color: #04033d; /* Синий цвет заголовка */
}

.profile-content p {
    padding-bottom: 20px;
    font-weight: normal;
    font-size: 20px;
    color: #04033d; /* Синий цвет текста */
}

.profile-content form {
    padding-bottom: 10px;
}

.profile-content .form-label {
    color: #04033d; /* Синий цвет меток формы */
}

.profile-content input[type="text"],
.profile-content input[type="email"],
.profile-content input[type="password"] {
    background-color: #fff; /* Белый фон полей формы */
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    color: #04033d; /* Синий цвет текста в полях */
    font-size: 16px;
}

.profile-content button {
    position: relative;
    padding: 6px 14px;
    font-size: 14px;
    background-color: #04033d;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.profile-content button:hover {
    background-color: #0a0a6b; /* Темнее при наведении */
}

.profile-content a {
    color: #04033d; /* Синий цвет ссылки */
    text-decoration: none;
}

.profile-content a:hover {
    text-decoration: underline;
}

.profile-table {
    width: 100%;
    max-width: 1000px; /* Увеличенная ширина таблицы */
    border-collapse: collapse;
    background-color: #fff; /* Белый фон таблицы */
    color: #04033d; /* Синий цвет текста */
    font-size: 16px;
}

.profile-table th,
.profile-table td {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}

.profile-table th {
    background-color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый фон заголовков */
    color: #04033d;
    font-weight: bold;
}

.profile-table th:nth-child(1),
.profile-table td:nth-child(1) {
    width: 40%; /* Увеличенная ширина столбца "Название проекта" */
}

.profile-table th:nth-child(2),
.profile-table td:nth-child(2) {
    width: 30%; /* Увеличенная ширина столбца "Сервис" */
}

.profile-table th:nth-child(3),
.profile-table td:nth-child(3) {
    width: 20%; /* Увеличенная ширина столбца "Дата создания" */
}

.profile-table th:nth-child(4),
.profile-table td:nth-child(4) {
    width: 10%; /* Столбец "Потраченные лимиты" */
}

.profile-table td a {
    color: #04033d;
    text-decoration: none;
}

.profile-table td a:hover {
    text-decoration: underline;
}

/*Стили для Профиля*/

/*.page-container-tools {
    display: flex;
    flex-direction: row; *//* горизонтальная раскладка: sidebar + main *//*
    min-height: 100vh;
}

.sidebar {
    width: 220px; *//* фиксированная ширина боковой панели *//*
    background: #f4f4f4;
}

.main-section {
    flex: 1; *//* основной контент занимает всё оставшееся пространство *//*
    display: flex;
    flex-direction: column;
}*/

/*Стили для plagins*/

/* Добавим кружочек через псевдоэлемент ::before */
/*#leftchapters::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 94px;
  width: 10px;
  height: 10px;
*//*  background-color: white;*//*
  background-color: #8586fe;
  border-radius: 50%;
  transition: top 0.5s ease;
}*/

#leftchapters {
  position: relative;
  overflow: visible; /* разрешаем кружку вылезать за границы */
  z-index: 10; /* выше фонового блока */
}

#leftchapters::before {
  content: "";
  position: absolute;
  right: -35px; /* выходит за границу справа */
  top: 20px;
  width: 10px;
  height: 10px;
  background-color: #8586fe;
  border-radius: 50%;
  transition: top 0.5s ease;
  z-index: 20; /* поверх всего остального */
}

/* Обновление позиции кружочка при наведении */
#leftchapters li:hover ~ li,
#leftchapters li:hover {
  /* ничего не делаем, чтобы сохранить позицию на hovered элементе */
}

/* Когда наводим, изменяем top у ::before */
#leftchapters:hover::before {
  top: var(--bullet-top, 0px);
}

/*#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
*//*  background: #04033d;*//*
  background: #040423;
  pointer-events: none;
}*/

/*Стили для сервисов автопилота*/

.avtopilot-main-container {
    margin-top: 160px; /* Текущий margin-top (100px) + 60px */
    margin-left: 90px; /* Текущий margin-left (50px) - 70px */
    max-width: calc(100% - 100px);
}

.avtopilot-card-grid-container {
    max-width: 100%;
}

.avtopilot-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
    justify-content: start;
    margin-top: 20px;
}

.avtopilot-card-link {
    text-decoration: none;
    color: #8586fe;
    display: block;
}

.avtopilot-card-content {
    font-family: 'Arial', sans-serif;
    text-transform: uppercase;
    font-weight: normal;
}

.avtopilot-card {
    border: 1px solid #8586fe;
    border-radius: 12px;
    background: #1a1a2e;
    text-align: center;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.avtopilot-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.avtopilot-card-image img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 12px;
}

.avtopilot-card-title {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.avtopilot-title {
    color: white;
    font-family: 'Arial';
    font-size: 20px;
    margin-bottom: 40px;
    font-weight: normal;
}

/*Стили для сервиса Старатель*/

/*.table-container {
  max-height: 800px; *//* фиксируем высоту *//*
  overflow-y: auto;  *//* вертикальная прокрутка *//*
  border: 1px solid #ddd;
}*/

/*Стили для автоподбора минусов*/

/* Общий контейнер для блока Автоподбор минусов */
.table-container.autopodbor {
  margin-top: 30px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Заголовок таблицы Автоподбор минусов */
.autopodbor th {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  padding: 10px;
  background: #f2f2f2;
  border-bottom: 2px solid #ddd;
}

/* Контейнер с датами */
.date-form-container.autopodbor {
  margin-top: 15px;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.date-form-container.autopodbor label {
  font-size: 14px;
  margin-right: 10px;
  color: #333;
}

.date-form-container.autopodbor input[type="date"] {
  padding: 5px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Кнопка "Обновить" */
.date-form-container.autopodbor .save-button-minusator {
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  background: #4285f4;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.date-form-container.autopodbor .save-button-minusator:hover {
  background: #3367d6;
}

/* Таблица для автоподбора */
.projects-table.autopodbor {
  width: 100%;
  margin-top: 15px;
  border-collapse: collapse;
}

.projects-table.autopodbor th,
.projects-table.autopodbor td {
  padding: 8px 10px;
  border: 1px solid #ddd;
  text-align: left;
  font-size: 14px;
}

.projects-table.autopodbor thead th {
  background: #f9f9f9;
  font-weight: 500;
}

.projects-table.autopodbor tbody td {
  color: #444;
}

.projects-table.autopodbor tbody tr.empty-row td {
  text-align: center;
  color: #777;
  font-style: italic;
}
/*Стили для автоподбора минусов*/


.projects-table {
  width: 100%;
  border-collapse: collapse;
}

.projects-table th,
.projects-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.projects-table thead th {
  position: sticky;
  top: 0;
  background: #f9f9f9; /* фон для читаемости */
  z-index: 2;
}

/* check_freq_detail.css — стили для check_freq_detail.html */

.check-freq-main-container {
    padding: 20px;
    max-width: 1800px;
    margin-top: 100px;
    margin-left: 60px;
/*    margin: 0 auto;*/
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.check-freq-title {
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
    padding: 14px 18px;
    background-color: rgba(255, 255, 255, 0.95);
/*    border-left: 5px solid #007bff;*/
/*    border-radius: 8px;*/
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    box-sizing: border-box;
    height: 50px;
}

.check-freq-title h2 {
    margin: 0;
    font-size: 1.5em;
    color: #04033d;
    font-family: Arial, sans-serif;
    font-weight: normal !important;
}

.check-freq-columns {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.check-freq-left-col {
    flex: 2;
    min-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.check-freq-right-col {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.check-freq-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background-color: rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
    color: #04033d;
}

/*.check-freq-panel.groups {
    border-left: 5px solid #ffc107;
}*/

.check-freq-search-input,.search-group-input {
    flex: 1;
    max-width: 300px;
    padding: 5px;
    border: 1px solid #ced4da;
/*    border-radius: 6px;*/
    font-size: 0.95em;
}

.check-freq-btn-group {
    display: flex;
    gap: 10px;
}

.check-freq-btn {
    padding: 6px 14px;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
}

.check-freq-btn.new {
    background: #04033d;
}

.check-freq-btn.export {
    background: #04033d;
}

.check-freq-add-group-btn {
    margin-left: 10px;
    width: 30px;
    height: 30px;
    background: #04033d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.check-freq-table-wrapper {
    flex: 1;
    border: 1px solid #ccc;
/*    border-radius: 8px;*/
    overflow: hidden;
/*    box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
    box-sizing: border-box;
    overflow-y: scroll;
    color: #04033d;

}

.check-freq-table-scroll {
/*    max-height: 600px;*/
    overflow-y: auto;
}

/* Фикс для пустых строк */
.empty-group-row {
    height: 40px;
}

.check-freq-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    border: 1px solid #ccc;
}

.check-freq-table tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.75);
}

.check-freq-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.95);
}

.check-freq-table thead {
    background: #e9ecef;
    position: sticky;
    top: 0;
    z-index: 10;
}

.check-freq-table th {
    padding: 12px 10px;
    text-align: left;
    border: 1px solid #ccc;
    border-bottom: 2px solid #dee2e6;
}

/*.check-freq-table th.geo {
    color: #1a73e8;
    font-weight: 500;
}*/

.check-freq-table th.type,
.check-freq-table th.shows {
    text-align: center;
}

.check-freq-table th.shows {
    text-align: right;
}

.check-freq-table td {
    padding: 10px;
    border: 1px solid #ccc;
    border-bottom: 1px solid #dee2e6;
}

.check-freq-table td.phrase {
    max-width: 300px;
    word-break: break-word;
}

/*.check-freq-table td.geo {
    color: #1a73e8;
    font-weight: 500;
}*/

/*.check-freq-table td.group {
    color: #6c757d;
}*/

.check-freq-table .badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    color: white;
}

.check-freq-table .badge.phrase {
    background: #007bff;
}

.check-freq-table .badge.other {
    background: #6c757d;
}

.check-freq-table td.shows {
    text-align: right;
    font-weight: 500;
}

.check-freq-table .no-results {
    padding: 24px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/*.check-freq-groups-table thead {
    background: #04033d;
}*/

.check-freq-groups-table th {
    padding: 8px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.95);
    color: #04033d;
}

/* Чередование строк для таблицы групп — zebra style */
.check-freq-groups-table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.check-freq-groups-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.check-freq-groups-table td {
    padding: 10px 12px;
/*    padding: 0 9px !important;
    height: 40px !important;*/
    cursor: pointer;
    check-freq-groups-table tbody td
}

/* === ЯЧЕЙКИ === */
#phrase-table tbody td,
.check-freq-groups-table tbody td {
    padding: 0 10px !important;
    height: 40px !important;
    border: 1px solid #ccc !important;
    border-bottom: 1px solid #dee2e6 !important;
    vertical-align: middle !important;
    font-size: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.check-freq-pagination {
    margin-top: 24px;
    text-align: center;
    font-size: 1em;
    max-width: 100%;
    box-sizing: border-box;
}

.check-freq-pagination a {
    margin: 0 8px;
    color: #007bff;
    text-decoration: none;
}

.check-freq-pagination span {
    color: #495057;
}

.check-freq-table td.type {
    display: flex;
    justify-content: center;    /* по горизонтали */
    align-items: center;        /* по вертикали */
    padding: 8px 10px;          /* отступы */
    height: 100%;               /* на всякий случай */
}

/* Размер иконки */
.check-freq-table td.type img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

/* === ЕДИНЫЕ ЧЕКБОКСЫ 16×16px ДЛЯ ВСЕХ БРАУЗЕРОВ === */
.check-freq-table input[type="checkbox"] {
    /* Сброс браузерных стилей */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Единый размер */
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;

    /* Граница и фон */
    border: 2px solid #04033d;
    border-radius: 4px;
    background-color: white;

    /* Центрирование в ячейке */
    display: inline-block;
    vertical-align: middle;

    /* Курсор */
    cursor: pointer;

    /* Плавное изменение */
    transition: all 0.2s ease;
}

/* Галочка при выборе */
.check-freq-table input[type="checkbox"]:checked {
    background-color: #04033d;
    border-color: #04033d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Интермедиат (часть выбрана) */
.check-freq-table input[type="checkbox"]:indeterminate {
    background-color: #04033d;
    border-color: #04033d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 12h12v-2H6z'/%3E%3C/svg%3E");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Ховер */
.check-freq-table input[type="checkbox"]:hover:not(:disabled) {
    border-color: #30345a;
    box-shadow: 0 0 0 3px rgba(4, 3, 61, 0.1);
}

/* Фокус */
.check-freq-table input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 3, 61, 0.2);
}

/* === МОДАЛЬНОЕ ОКНО ДОБАВЛЕНИЯ ГРУППЫ === */
.custom-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.custom-modal-content {
    background: white;
    padding: 24px;
    border-radius: 8px;
    width: 320px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    position: relative;
}

.custom-modal-close {
    position: absolute;
    top: 12px; right: 16px;
    font-size: 24px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
}

.custom-modal-close:hover {
    color: #CC0000;
}

.custom-modal h3 {
    margin: 0 0 16px;
    color: #04033d;
    font-size: 1.2em;
}

#new-group-name {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    margin-bottom: 16px;
    box-sizing: border-box;
}

#save-group-btn {
    background: #04033d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

#save-group-btn:hover {
    background: #30345a;
}

/* Кнопка "-" */
#delete-groups-btn {
  margin-left: 10px;
  font-size: 16px;
  padding: 5px 10px;
  font-weight: 900;              /* САМЫЙ ЖИРНЫЙ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  background-color: #04033d;
  color: white;
  border: none;
  border-radius: 4px;
}

.check-freq-btn.save-groups {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 8px;
}

.check-freq-btn.save-groups:hover {
  background: #1b5e20;
}
/* check_freq_detail.css — стили для check_freq_detail.html */

/*Стили для сервиса Downloader*/

CSS/* ==========================================================================
   Стили для страницы интеграций Downloader-подпроектов
   ========================================================================== */

/* 1. Отодвигаем весь layout только на этой странице */
.downloader-integration-page .tracker-layout {
    padding-top: 130px !important;   /* подгони под высоту твоей шапки: 120–150px */
}

/* 2. Убираем margin-top у обёртки (он больше не нужен) */
.downloader-integration-page .downloader-content-wrapper {
    margin-top: 100px !important;
    margin: 0 40px 40px 90px;        /* только right, bottom, left */
}

/* 3. Если вдруг где-то ещё остался margin-top — принудительно сбрасываем */
.downloader-integration-page .tracker-right > *:first-child {
    margin-top: 0 !important;
}

/* Главная обёртка — задаёт отступы один раз и навсегда */
.downloader-content-wrapper {
    margin: 150px 40px 0 140px;   /* top | right | bottom | left */
    min-height: calc(100vh - 200px);
}

/* Заголовок страницы */
.downloader-content-wrapper .integration-header {
    background-color: rgba(255, 255, 255, 0.95);
    color: #04033d;
    padding: 12px 16px;
    padding-right: 40px;
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #04033d;
    border-radius: 4px 4px 0 0;
}

.downloader-content-wrapper .back-link {
    color: #04033d;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.downloader-content-wrapper .back-link:hover {
    text-decoration: underline;
}

/* Таблица интеграций */
.downloader-content-wrapper .integration-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 30px 0;
    table-layout: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.downloader-content-wrapper .integration-table th,
.downloader-content-wrapper .integration-table td {
    border: 1px solid #ddd;
    padding: 12px;
    color: #04033d;
    text-align: left;
    vertical-align: middle;
}

.downloader-content-wrapper .integration-table th {
    background-color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.downloader-content-wrapper .integration-table tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.95);
}

.downloader-content-wrapper .integration-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.75);
}

/* Кнопки */
.downloader-content-wrapper .btn-connect {
    background: #04033d;
    color: white;
    padding: 9px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.downloader-content-wrapper .btn-connect:hover {
    background: #03022b;
}

.downloader-content-wrapper .btn-connected {
    background: #04033d;
    color: white;
    opacity: 0.7;
    padding: 9px 18px;
    border: none;
    border-radius: 4px;
    cursor: default;
    font-size: 14px;
}

.downloader-content-wrapper .btn-settings {
    margin-left: 12px;
    color: #04033d;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.downloader-content-wrapper .btn-settings:hover {
    text-decoration: underline;
}

/* Статусы */
.downloader-content-wrapper .status-connected {
    color: #2e8b57;
    font-weight: bold;
}

.downloader-content-wrapper .status-disconnected {
    color: #999;
    font-style: italic;
}

/* Формы (выбор счётчика, цели и т.д.) */
.downloader-content-wrapper .integration-goals-form,
.downloader-content-wrapper form {
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #04033d;
    border-radius: 4px;
}

/* Ссылки в левом меню подпроектов */
.downloader-subproject-link {
    color: #04033d;
    text-decoration: none;
    padding: 4px 0;
    display: block;
}

.downloader-subproject-link:hover {
    text-decoration: underline;
}

.downloader-subproject-link.active {
    font-weight: bold;
    color: #04033d;
}

/* Адаптивность (на случай узких экранов) */
@media (max-width: 1200px) {
    .downloader-content-wrapper {
        margin: 50px 20px 0 70px;
    }
}

@media (max-width: 992px) {
    .downloader-content-wrapper {
        margin: 40px 15px 0 60px;
    }
}

.column-brick {
    background: #04033d;
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: move;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(4,3,61,0.25);
    transition: all 0.2s;
    user-select: none;
}
.column-brick:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4,3,61,0.35);
}
.column-brick .brick-icon {
    font-size: 18px;
}
.column-brick .brick-text {
    white-space: nowrap;
}

/*Стили для сервиса Downloader*/