/* === Общий контейнер === */
.tz-generator {
  max-width: 980px;
  margin: 40px auto;
  padding: 26px 28px;
  background: #ffffff;
  color: #262626;
  border-radius: 16px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
  font-family: "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

/* === Заголовок плагина === */
.tz-title {
  text-align: center;
  font-size: 1.7rem;
  color: #266826;
  font-weight: 700;
  margin-bottom: 24px;
}

/* === Карточки-блоки === */
details.tz-block,
.tz-block {
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
  background: #fbfbfb;
  transition: all 0.25s ease;
  font-size: 15px;
}

details.tz-block[open] {
  background: #ffffff;
  border-color: #b6e5b6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* --- закрытые (неразвёрнутые) блоки --- */
details.tz-block:not([open]) {
  background: linear-gradient(to right, #f9fdf9, #f8f8f8);
  border-color: #e4e4e4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transform: scale(1.01);
}

/* === Заголовки сворачиваемых блоков === */
summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: #266826;
  user-select: none;
  background: linear-gradient(to right, #f8fff8, #f7f7f7);
  border-bottom: 1px solid #e7e7e7;
  transition: background 0.2s, box-shadow 0.2s;
  line-height: 1.4;
}

/* убираем стандартный маркер браузера */
summary::-webkit-details-marker,
summary::marker {
  display: none !important;
  content: "";
}

/* стрелка увеличена и выровнена */
summary::before {
  content: "▸";
  display: inline-block;
  font-size: 22px; /* крупнее */
  color: #266826;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.25s ease;
  position: relative;
  top: 0.5px;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

summary:hover {
  background: #f3fff3;
  box-shadow: inset 0 -1px 0 #cfe9cf;
}

/* одинаковые отступы сверху и снизу */
details.tz-block summary {
  padding-top: 18px;
  padding-bottom: 18px;
}


/* === Контент блоков === */
details[open] > *:not(summary),
.tz-block > *:not(h3) {
  padding: 12px 20px 12px 20px;
}

/* === Поля === */
input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #c8c8c8;
  background: #fff;
  font-size: 15px;
  transition: all 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: #3a7c3a;
  box-shadow: 0 0 0 3px rgba(58, 124, 58, 0.15);
  outline: none;
}

/* === Числовые поля (блоки 5 и 6) === */
input[type="number"] {
  width: 120px;
  height: 38px;
  padding: 12px 20px 12px 20px
}


/* одинаковые отступы между полями и подписями */
label + input[type="number"],
label + input[type="text"] {
  margin-top: 6px;
  margin-bottom: 10px;
}

/* чтобы надпись и поле шли ровно */
.tz-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* === Сетка строк и чекбоксов === */
.tz-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: center;
}

.tz-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 10px 0 14px 0;
}

.tz-section label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
}

.tz-section input[type="radio"] {
  accent-color: #3a7c3a;
  transform: scale(1.1);
  cursor: pointer;
}


/* === Подсказки === */
small {
  display: block;
  color: #666;
  font-style: italic;
  margin: -2px 0 8px 0;
  font-size: 13px;
}

/* === Ползунки === */
input[type="range"] {
  width: 100%;
  max-width: 320px;
  margin: 8px 0;
  accent-color: #3a7c3a;
  cursor: pointer;
}

#humanHint, #densityHint {
  margin: 6px 0 12px 0;
  color: #333;
  font-weight: 600;
  font-size: 14.5px;
}

/* === Таблицы === */
.tz-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px 0;
  font-size: 14px;
}
.tz-table th, .tz-table td {
  border: 1px solid #ddd;
  padding: 7px 9px;
}
.tz-table th {
  background: #f1faf1;
  color: #266826;
}

/* === Кнопки === */
.tz-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 18px 12px 18px;
}

.tz-buttons button {
  flex: 1;
  background: #3a7c3a;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.05s;
}

.tz-buttons button:hover { background: #2f612f; }
.tz-buttons button:active { transform: translateY(1px); }

/* Кнопки сохранения / загрузки */
#save, #load {
  background: #f6f6f6;
  color: #2f6d2f;
  border: 1px solid #cfcfcf;
}
#save:hover, #load:hover {
  background: #e9f8e9;
  border-color: #b0e0b0;
}

/* === Поле результата === */
#result {
  width: calc(100% - 36px);
  margin: 0 18px 20px 18px;
  height: 280px;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  padding: 10px;
  resize: vertical;
  background: #fafafa;
  font-size: 14.5px;
  font-family: "Consolas", monospace;
  color: #222;
}

/* === Мобильная адаптация === */
@media (max-width: 768px) {
  .tz-generator { padding: 18px; font-size: 14.5px; }
  summary { font-size: 15px; padding: 14px; }
  input[type="number"] { width: 110px; }
  .tz-buttons button { font-size: 14px; padding: 10px; }
}
/* === Блок 9️⃣ Генерация и итоговое ТЗ === */
.tz-output {
  background: #f9fdf9;
  border: 1px solid #dfeadf;
  border-radius: 14px;
  padding-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tz-output h3 {
  font-size: 16px; /* как у summary */
  font-weight: 600;
  color: #276827;
  text-align: center;
  padding: 16px 18px;
  margin: 0 0 10px 0;
  background: linear-gradient(to right, #f8fff8, #f7f7f7);
  border-bottom: 1px solid #e2efe2;
  letter-spacing: 0.2px;
}


/* === Кнопки: одинаковые, светлые === */
.tz-output .tz-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 10px auto 14px auto;
  max-width: 800px;
}

/* Все кнопки одинаковые */
.tz-output .tz-buttons button {
  flex: 1 1 0;
  min-width: 150px;   /* шире */
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  background: #f6f6f6;
  color: #2f6d2f;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: all 0.25s ease;
}

/* Иконки под цвет текста */
.tz-output .tz-buttons button .icon {
  font-size: 15px;
  color: inherit;
  transition: color 0.25s ease;
}

/* Наведение и нажатие */
.tz-output .tz-buttons button:hover {
  background: #ecfaec;
  border-color: #b9e0b9;
  color: #266826;
}
.tz-output .tz-buttons button:hover .icon {
  color: #266826;
}
.tz-output .tz-buttons button:active {
  transform: translateY(1px);
  background: #e5f8e5;
}

/* Поле результата */
.tz-output #result {
  width: calc(100% - 36px);
  margin: 0 18px;
  height: 260px;
  border: 1px solid #c9c9c9;
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
  font-size: 14.5px;
  font-family: "Consolas", monospace;
  resize: vertical;
  color: #222;
}

/* === Общий блок секции === */
.tz-block {
  border: 1px solid #e3e8e3;
  border-radius: 14px;
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* === Заголовок секции === */
.tz-header {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* выравнивание влево */
  padding: 24px 24px 24px 80px; /* увеличен отступ под стрелку */
  font-size: 1.7rem; /* крупный заголовок */
  font-weight: 700;
  color: #1c2f1c;
  background: linear-gradient(90deg, #f9fcf9 0%, #ffffff 100%);
  user-select: none;
  text-align: left;
  border-radius: 14px;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  line-height: 1.4;
}

/* === Крупная стрелка слева === */
.tz-header::before {
  content: "▸";
  position: absolute;
  left: 28px; /* чуть дальше от текста */
  font-size: 2.2rem; /* ещё крупнее */
  color: #63ce63;
  line-height: 1;
  transition: transform 0.35s ease, color 0.3s ease;
}

/* === Наведение === */
.tz-header:hover {
  background: linear-gradient(90deg, #f3fbf3 0%, #ffffff 100%);
  color: #125212;
}

.tz-header:hover::before {
  color: #125212;
}

/* === Контейнер содержимого === */
.tz-inner {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: #ffffff;
  padding: 0 30px;
  border-top: 1px solid #edf2ed;
  transition: none; /* высоту управляет JS */
}

/* === Активный блок === */
.tz-block.open {
  border-color: #b5d9b5;
  background: #fbfffb;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.tz-block.open .tz-header {
  color: #1c5f1c;
  background: linear-gradient(90deg, #f0fff0 0%, #ffffff 100%);
}

.tz-block.open .tz-header::before {
  transform: rotate(90deg);
  color: #1d611d;
}

.tz-block.open .tz-inner {
  opacity: 1;
  padding: 28px 32px 32px;
}

/* === Текст и элементы внутри блоков === */
.tz-inner label {
  display: block;
  font-size: 1.4rem; /* увеличен шрифт */
  font-weight: 500;
  color: #1c1c1c;
  margin-top: 14px;
  margin-bottom: 6px;
}

.tz-inner input,
.tz-inner textarea,
.tz-inner select {
  width: 100%;
  font-size: 1.1rem; /* комфортный текст */
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid #c9d9c9;
  border-radius: 8px;
  background: #f9fcf9;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tz-inner input:focus,
.tz-inner textarea:focus,
.tz-inner select:focus {
  border-color: #6bc56b;
  box-shadow: 0 0 0 2px rgba(107, 197, 107, 0.25);
  outline: none;
  background: #ffffff;
}

/* === Дополнительные элементы === */
.tz-inner p,
.tz-inner div,
.tz-inner table,
.tz-inner small {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #202020;
  transition: opacity 0.4s ease;
}

/* === Мобильная адаптация === */
@media (max-width: 640px) {
  .tz-header {
    font-size: 1.4rem;
    padding: 20px 16px 20px 70px;
  }
  .tz-header::before {
    left: 20px;
    font-size: 2rem;
  }
}
.tz-header {
  padding-left: 100px !important;
}
.tz-header::before {
  left: 30px !important;
}