/* Общие настройки для обоих блоков */
.generator-form,
#code-output {
  width: 800px; /* Фиксированная ширина 800 px */
  margin: 25px auto; /* Отступы сверху/снизу 25 px, центрирование */
  padding: 25px; /* Внутренние отступы 25 px */
  border-radius: 16px; /* Скругление углов 12 px */
  box-shadow:
    0px 0px 0px 1px rgba(0, 255, 136, 0.3),
    0px 20px 60px -20px rgba(0, 255, 136, 0.15); /* Обновлённая тень */
  box-sizing: border-box; /* Учёт padding и border в ширине */
  border: 1px solid #008246; /* Бордер 2 px, цвет #00ffd5 */
  /* position: relative; /* ОБЯЗАТЕЛЬНО: делает блок точкой отсчёта для псевдоэлемента */
  transition: box-shadow 0.3s ease; /* Плавный переход для тени при наведении */
}

.generator-form:hover,
#code-output:hover {
  box-shadow:
    0px 0px 1px 1px rgba(0, 255, 136, 0.8),
    0px 0px 30px 0px rgba(0, 255, 136, 0.3); /* Тень при наведении */
}

/* Стили для формы */
.generator-form {
background: linear-gradient(0.375turn,rgba(26,26,36,1) 50%,rgba(26,26,36,0.15) 100%);
color: #00FF88;
}

/* Строки формы */
.form-row {
display: flex;
gap: 20px; /* Расстояние между полями 20 px */
margin-bottom: 20px; /* Отступ снизу 20 px */
flex-wrap: wrap;
}

.form-group {
flex: 1;
min-width: 0;
}

/* Подписи к полям */
.form-group label {
display: block;
margin-bottom: 10px; /* Отступ снизу 8 px */
font-weight: bold;
color: #F0F0F5;
font-size: 16px; /* Размер шрифта 16 px */
}

/* Текстовые и числовые поля */
.form-group input[type="text"],
.form-group input[type="number"] {
width: 100%; /* Занимает всю ширину родителя */
padding: 12px 15px; /* Вертикальные отступы 12 px, горизонтальные 15 px */
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 8px; /* Скругление 8 px */
box-sizing: border-box;
font-size: 14px; /* Размер шрифта 14 px */
height: 48px; /* Высота 48 px */
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}

/* Поля выбора цвета */
.form-group input[type="color"] {
width: 100%;
height: 48px; /* Высота 48 px */
padding: 5px; /* Отступ 5 px */
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
box-sizing: border-box;
}

/* Блок вывода кода */
#code-output {
background: #2d3748; /* Тёмный фон */
color: #e2e8f0; /* Светлый текст */
display: none; /* Скрыт по умолчанию */
}

#code-output h4 {
margin: 0 0 15px 0; /* Отступ снизу 15 px */
color: #e2e8f0;
font-size: 16px; /* Размер шрифта 16 px */
}

/* Текстовое поле для кода */
#generated-code {
width: 100%; /* Занимает всю ширину родителя */
height: 220px; /* Высота 220 px */
padding: 12px 15px; /* Как у полей ввода */
background: #1a202c; /* Тёмный фон внутри */
color: #e2e8f0; /* Цвет текста */
border: 1px solid #4a5568; /* Граница */
border-radius: 8px; /* Скругление */
font-family: 'Courier New', monospace; /* Моноширинный шрифт */
font-size: 13px; /* Размер шрифта 13 px */
resize: vertical; /* Разрешаем изменять высоту */
box-sizing: border-box;
margin: 0; /* Убираем внешние отступы */
line-height: 1.4; /* Межстрочный интервал */
/*pointer-events: none; /* Отключаем взаимодействие */
}

/* Кнопка копирования */
#copy-btn {
padding: 12px 24px; /* Вертикальные отступы 12 px, горизонтальные 24 px */
background: #48bb78; /* Зелёный фон */
color: white; /* Белый текст */
border: none; /* Без границы */
border-radius: 8px; /* Скругление 8 px */
cursor: pointer; /* Курсор-указатель */
font-size: 14px; /* Размер шрифта 14 px */
transition: all 0.3s ease; /* Плавная анимация */
font-weight: 500; /* Полужирный шрифт */
}

#copy-btn:hover {
background: #38a169; /* Темнее при наведении */
transform: translateY(-2px); /* Лёгкий подъём */
box-shadow: 0 2px 8px rgba(72, 187, 120, 0.4); /* Тень при наведении */
}

/* Статус копирования */
#copy-status {
color: #48bb78; /* Зелёный цвет */
display: none; /* Скрыт по умолчанию */
font-size: 14px; /* Размер шрифта 14 px */
align-self: center; /* Выравнивание по центру */
}