/* Сброс базовых отступов и общая коробочная модель */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Тело страницы: светло-серый фон, текст по умолчанию чёрный */
body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2; /* Светло-серый */
  color: #000;              /* Основной цвет текста */
}

/* Верхняя полоса (логотип + бургер) */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  background-color: #000;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
}

/* Контейнер для логотипа и бургера */
.logo-container {
  display: flex;
  align-items: center;
}

/* Логотип */
.logo {
  height: 60px;
  margin-right: 20px;
}

.logo-link {
  cursor: pointer;
}

/* Бургер-меню */
.burger {
  font-size: 24px;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s;
  color: #fff; /* Устанавливаем белый цвет */
}

.burger:hover {
  color: #3169f0;
}

/* Сайдбар (левое меню) */
.sidebar {
  position: fixed;
  top: 92px; /* Отступ равен высоте top-header */
  left: 0;
  width: 240px;
  height: calc(100vh - 92px);
  background-color: #2f2f2f;
  padding: 0;
  transition: width 0.3s ease;
}

/* При сворачивании сайдбара – ширина 40px */
.sidebar.sidebar-hidden {
  width: 40px;
}

/* Стили для списка в сайдбаре */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 10px 0;
}

/* Ссылки меню с иконками и текстом */
.sidebar a {
  display: flex;
  align-items: center;
  color: #fff; /* Текст в сайдбаре остаётся белым */
  text-decoration: none;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

/* Иконки в меню */
.sidebar a i {
  font-size: 20px;
  margin-right: 10px;
}

/* Текст пунктов меню */
.sidebar .menu-text {
  font-size: 16px;
}

/* Состояние при наведении */
.sidebar a:hover {
  background-color: #444;
}

/* При сворачивании – центрируем содержимое и скрываем текст */
.sidebar.sidebar-hidden a {
  justify-content: center;
  padding: 10px;
}

.sidebar.sidebar-hidden .menu-text {
  display: none;
}

/* Основной контент – отступ сверху и слева для учёта шапки и сайдбара */
.main-content {
  margin-top: 92px;   /* Отступ сверху равен высоте top-header */
  margin-left: 240px; /* Отступ слева равен ширине сайдбара */
  padding: 20px;
  transition: margin-left 0.3s ease;
  min-height: 100vh;  /* Чтобы тянуться по высоте экрана */
}

/* Если сайдбар свёрнут, основной контент можно сдвинуть левее */
.sidebar.sidebar-hidden ~ .main-content {
  margin-left: 40px;
}

/* Белый блок (карточка) внутри main-content */
.content-card {
  background-color: #fff;
  color: #000;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.6; /* Увеличенное расстояние между строками */
}

.content-card p {
  margin-bottom: 16px;
}

/* Заголовок платформы */
#header-text {
  text-align: left;
  margin-bottom: 20px;
}

#header-text h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

#header-text p {
  font-size: 18px;
}

/* Контейнер для поискового блока */
#search-container {
  margin: 20px auto;
  max-width: 800px;
  text-align: center;
}

.search-inner {
  display: inline-block;
  text-align: left;
}

#search-container span {
  font-size: 16px;
  margin-right: 10px;
  /* color: #fff; Убираем белый цвет, теперь по умолчанию #000 из body */
}

#search-container input[type="text"] {
  width: 400px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#search-container button {
  padding: 10px 20px;
  font-size: 16px;
  margin-left: 10px;
  background-color: #3169f0;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Стили для таблицы */
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  background-color: #fff; /* Белый фон таблицы */
  color: #000;           /* Чёрный текст */
}
table, th, td {
  border: 1px solid #ccc;
}
th, td {
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

.categories-table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  background-color: #fff;
  color: #000;
}

.categories-table thead {
  background-color: #f2f2f2;
}

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

.categories-table th {
  font-weight: bold;
}


   .search-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* domains */
       .search-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* Единый контейнер для переключателей (склеенные кнопки) */
    .toggle-group {
      display: inline-flex;
      border: 2px solid #808080; /* Серый цвет границы */
      border-radius: 4px;
      overflow: hidden; /* чтобы углы оставались скруглёнными */
    }

    /* Каждая кнопка внутри группы */
    .toggle-group .mode-btn {
      background-color: #fff;    /* Белый фон */
      color: #808080;           /* Серый текст */
      padding: 10px 20px;
      font-size: 14px;
      border: none;             /* Граница убирается, т.к. есть общая */
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
    }

    /* Разделитель между кнопками (вертикальная полоса) */
    .toggle-group .mode-btn:not(:last-child) {
      border-right: 2px solid #808080;
    }

    /* При наведении кнопка слегка меняет фон */
    .toggle-group .mode-btn:hover {
      background-color: #f2f2f2;
    }

    /* Активная кнопка */
    .toggle-group .mode-btn.active {
      background-color: #808080;
      color: #fff;
    }
    
    .sidebar ul li.active a {
  background-color: #373737;
  color: #fff;
}

    /* Поле ввода */
    .search-field {
      width: 100%;
      max-width: 600px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .search-field input,
    .search-field textarea {
      width: 100%;
      padding: 14px;
      font-size: 16px;
      border: 2px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      outline: none;
      transition: border-color 0.3s;
    }
    .search-field input:focus,
    .search-field textarea:focus {
      border-color: #3169f0; /* При фокусе — синий */
    }
    .search-field textarea {
      display: none;
      resize: vertical;
      min-height: 120px;
    }

    /* Кнопка "Анализировать" (яркий синий) */
    #analyze-btn {
      background-color: #3169f0;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      padding: 14px 24px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    #analyze-btn:hover {
      background-color: #264fbd;
    }

    /* Результаты */
    #results {
      margin-top: 20px;
      width: 100%;
      max-width: 800px;
      text-align: center;
    }
    
     /* таблица для вывода результатов в одиночном режиме доменов */
 .domain-info-table {
  width: 100%;
  max-width: 800px; /* или можно увеличить до 1000px, в зависимости от макета */
  margin: 20px auto;
  border-collapse: collapse;
  background-color: #fff;
  color: #000;
}

.domain-info-table thead th {
  text-align: center;
  border: 1px solid #ccc;
  padding: 8px;
  background-color: #f2f2f2;
  font-weight: bold;
}

.domain-info-table tbody td {
  text-align: center;
  border: 1px solid #ccc;
  padding: 8px;
}
     /*  стили для кнопки «Скачать XLSX»: */
.export-btn {
  background-color: #28a745; /* зеленый оттенок */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;  /* уменьшенные отступы */
  cursor: pointer;
  font-size: 14px;    /* чуть меньше размер шрифта */
  margin-left: 10px;  /* отступ слева от текста */
  vertical-align: middle;
  transition: background-color 0.3s;
}

.export-btn:hover {
  background-color: #218838;
}


   /* таблица для вывода результатов в одиночном режиме доменов */
   

.categories-table th,
.categories-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.export-btn {
  background-color: #28a745; /* зеленый оттенок */
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.export-btn:hover {
  background-color: #218838;
}

   /* блок с ближайшими апгрейдами на главной */
.feature-upgrade ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.feature-upgrade li {
  position: relative;
  padding-left: 20px; /* пространство для номера внутри элемента */
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1.5;
}

.feature-upgrade li:before {
  content: counter(item) ".";
  counter-increment: item;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  color: #3169f0;
  font-size: 18px;
  width: 25px;
  text-align: right;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Если нужно добавить отступ сверху или задать фиксированную высоту, можно добавить: */
  /* height: 200px; */
  /* margin: 20px auto; */
  text-align: center;
}