body {
  margin: 0;
  min-width: 300px;
  max-width: 3000px;
  width: 100%; /* Используем 100%, чтобы не ограничивать ширину */
  background: #abcef5; /* Светлый фон */
  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт */
  box-sizing: border-box;
}

div.container {
  display: flex;
  flex-direction: column;
  padding: 1px;
  width: 100%; /* Обеспечиваем, чтобы контейнер растягивался по ширине */
}

div.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 6px;
}

h1 {
  padding: 6px;
}

h3 {
  padding: 6px;
  font-family: Helvetica, Arial, sans-serif; /* Более минималистичный шрифт для категорий */
  font-size: 16px; /* Уменьшен размер шрифта */
  font-weight: normal; /* Уменьшен вес шрифта для минималистичного вида */
  color: #333; /* Цвет шрифта для категорий */
}

i {
  width: 20px;
}

button.template-add,
button.template-edit,
button.template-delete {
  margin: 0 4px; /* Меньше отступов */
  padding: 5px 10px; /* Более компактные кнопки */
  background-color: transparent; /* Без фона */
  border: 1px solid #abcef5; /* Тонкая рамка */
  color: #333; /* Цвет текста */
  cursor: pointer;
  font-size: 14px; /* Меньший размер текста */
  border-radius: 5px; /* Скругленные углы */
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Плавные переходы */
}

/* Эффект при наведении */
button.template-add:hover,
button.template-edit:hover,
button.template-delete:hover {
  background-color: #abcef5; /* Подсветка фоном */
  color: #fff; /* Белый цвет текста */
  border-color: #88aee5; /* Немного темнее рамка */
}

/* Эффект при фокусе */
button.template-add:focus,
button.template-edit:focus,
button.template-delete:focus {
  outline: none; /* Убираем стандартную обводку */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* Легкая тень для фокуса */
}

div.templates {
  display: flex;
  flex-direction: column;
  min-height: 200px;
  width: 100%; /* Обеспечиваем, чтобы шаблоны занимали всю доступную ширину */
  padding: 0;
}

span.template {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: fit-content;
  padding: 8px 7px;
  border: 1px solid #8888c6; /* Цвет рамки совпадает с рамкой категории */
  border-radius: 8px; /* Скругленные углы */
  overflow: hidden;
  width: 100%; /* Шаблоны должны растягиваться на всю ширину */
  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Плавный переход при наведении */
}

/* Подсветка шаблонов при наведении */
span.template:hover {
  background: #d0e6ff; /* Подсветка для светлой темы */
  border-color: #a56fbf; /* Немного темнее рамка при наведении */
}

.dark-theme span.template:hover {
  background: #444; /* Подсветка для тёмной темы */
  color: #fff; /* Белый цвет текста в тёмной теме */
}

.formochka {
  margin-left: 10px;
}

#template-title-input {
  margin-bottom: 7px;
}

span.buttons {
  display: flex;
  align-items: center;
}

span.buttonsLong {
  display: flex;
  justify-content: center;
}

span.template:hover {
  background: #d0e6ff; /* Подсветка при наведении */
}

.hidden {
  display: none;
}

.category {
  margin-bottom: 10px;
  border: solid #8888c6 1px; /* Тонкая рамка для категории */
  border-radius: 1px 10px / 12px;
  box-shadow: 5px 3px 5px #8888c6; /* Легкая тень для категории */
  width: 100%; /* Категория растягивается на всю ширину */
  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
}

.category h3 {
  display: flex;
  justify-content: space-between; /* Располагаем элементы по краям */
  align-items: center;
  cursor: pointer; /* Курсор при наведении на весь блок */
  width: 100%; /* Заголовок занимает всю ширину */
  box-sizing: border-box; /* Чтобы паддинги не влияли на размер */
}

.toggle-icon {
  cursor: pointer;
  margin-left: 10px;
}

.category-content {
  display: none;
  padding-left: 20px;
  width: 100%; /* Содержимое категории растягивается на всю ширину */
}

.category-content.show {
  display: block;
}

.category h3 i {
  transition: transform 0.3s ease;
}

/* Стили для темной темы */
body.dark-theme {
  background: #333; /* Темный фон */
  color: white; /* Светлый текст */
}

/* Базовый стиль кнопок */
.btn {
  color: #000;
  background-color: #fff;
  border: 1px solid #8888c6;
}

/* Стили для кнопок в тёмной теме */
.dark-theme .btn {
  color: #fff;
  background-color: #333;
  border: 1px solid #555;
}

.theme-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #333;
  z-index: 1000;
  transition: color 0.3s ease;
}

.dark-theme .theme-btn {
  color: #fff;
}

/* Кнопка добавления шаблона */
.add-template-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background-color: #abcef5;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s;
  z-index: 1000;
}

.add-template-btn i {
  margin-right: 8px;
}

.add-template-btn:hover {
  background-color: #88aee5;
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}

.add-template-btn:focus {
  outline: none;
}

/* Для кнопок и textarea, чтобы не "гуляли" */
.template {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 7px;
  border: 1px solid #8888c6;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Скрытие полей */
.hidden {
  display: none;
}

/* Стили для input и textarea */
input, textarea {
  width: 100%;
  height: 40px; /* Сделаем высоту фиксированной */
  padding: 8px;
  box-sizing: border-box;
  margin-top: 4px;
}

/* Убираем возможность изменения размеров textarea */
textarea {
  resize: none;
}