/* ОБЩИЕ СТИЛИ СТРАНИЦЫ */
body {
    margin: 0;                  /* Убираем внешние отступы */
    padding: 0;                 /* Убираем внутренние отступы по умолчанию */
    background-color: #99dfff;  /* Основной светло-голубой фон страницы */
    font-family: 'Comic Sans MS', sans-serif; /* Детский шрифт, используемый во всех уроках */
}

.content-wrapper { 
    padding: 15px 10px;         /* Отступы вокруг всего контента */
}

.main-header { 
    text-align: center;         /* Центрирование шапки урока */
}

.lesson-badge {
    display: inline-block;      /* Плашка отображается как блочный элемент в строке */
    background: #fff9c4;        /* Светло-жёлтый фон плашки заголовка урока */
    padding: 8px 30px;          /* Внутренние отступы плашки */
    border-radius: 15px;        /* Скругление углов плашки */
    color: #ff6d00;             /* Ярко-оранжевый цвет текста */
    font-weight: bold;          /* Жирное начертание текста */
    font-size: 1.6em;           /* Размер шрифта заголовка урока */
    margin-bottom: 15px;        /* Отступ снизу от плашки */
    box-shadow: 0 4px 0 #ffd600; /* Тень под плашкой для объёма */
}

.white-card {
    background: #f0faff;        /* Светлый голубовато-белый фон карточки задания */
    border: 6px solid #ffd600;  /* Толстая жёлтая рамка вокруг карточки */
    border-radius: 30px;        /* Большое скругление углов карточки */
    padding: 15px 25px;         /* Внутренние отступы внутри карточки */
    max-width: 750px;           /* Максимальная ширина карточки */
    margin: 0 auto 20px;        /* Центрирование и отступ между карточками */
    box-shadow: 0 10px 0 rgba(0,0,0,0.05); /* Лёгкая тень под карточкой */
}

.card-title {
    color: #ff7043;             /* Оранжевый цвет заголовка задания */
    text-align: center;         /* Центрирование заголовка */
    font-size: 1.8em;           /* Размер шрифта заголовка */
    margin: 0 0 10px 0;         /* Отступы вокруг заголовка */
}

.yellow-divider {
    height: 4px;                /* Высота разделительной линии */
    background-color: #ffd600;  /* Жёлтый цвет разделителя */
    margin-bottom: 20px;        /* Отступ снизу от линии */
}

.card-instruction {
    font-size: 1.25rem;         /* Размер текста инструкции */
    color: #2c3e50;             /* Тёмно-синий цвет текста инструкции */
    text-align: left;         /* Центрирование инструкции */
    margin: 15px 0 25px 0;      /* Отступы сверху и снизу */
    line-height: 1.2;           /* Межстрочный интервал для удобства чтения */
}

/* СТИЛИ ДЛЯ ЦЕНТРИРОВАНИЯ И ОФОРМЛЕНИЯ КНОПКИ ПРОВЕРКИ */

.btn-box {
    display: flex;                                              /* Включаем флекс-контейнер для кнопки */
    justify-content: center;                                    /* Центрируем кнопку строго по горизонтали */
    margin-top: 0px;                                           /* Добавляем отступ сверху от задания до кнопки */
}

.orange-check-btn {
    background: linear-gradient(to bottom, #ff9244, #f57c00);   /* Создаем оранжевый градиент как на макете */
    color: #ffffff;                                             /* Устанавливаем белый цвет текста */
    font-family: 'Comic Sans MS', sans-serif;                   /* Поддерживаем единый детский шрифт */
    font-size: 1.5em;                                           /* Устанавливаем крупный, читаемый размер шрифта */
    font-weight: bold;                                          /* Делаем текст жирным */
    padding: 12px 60px;                                         /* Задаем внутренние отступы для вытянутой формы */
    border: none;                                               /* Убираем стандартную браузерную рамку */
    border-radius: 40px;                                        /* Делаем края сильно скругленными (овальными) */
    box-shadow: 0 6px 0 #d84315;                                /* Добавляем темный "объем" под кнопкой */
    cursor: pointer;                                            /* Меняем курсор на палец при наведении */
    transition: all 0.2s ease;                                  /* Плавная анимация при нажатии */
}

.orange-check-btn:hover {
    transform: translateY(-2px);                                /* Легкое приподнятие кнопки при наведении */
    box-shadow: 0 8px 0 #d84315;                                /* Увеличение тени для эффекта парения */
}

.orange-check-btn:active {
    transform: translateY(4px);                                 /* Кнопка "вдавливается" при клике */
    box-shadow: 0 2px 0 #d84315;                                /* Тень уменьшается при нажатии */
}

.result-text {
    text-align: center;                                         /* Центрируем текст результата над кнопкой */
    font-size: 1.3em;                                           /* Размер шрифта сообщения об успехе */
    margin: 15px 0;                                             /* Вертикальные отступы для текста */
    min-height: 1.5em;                                          /* Резервируем место, чтобы контент не прыгал */
}


/* ЗАДАНИЕ №1. ЧИСТОГОВОРКИ (ОДИН СТОЛБЕЦ И ОДИН РЯД) */

.l16-t1-main-box {
    display: flex;                                              /* Включаем гибкий контейнер для всего задания */
    flex-direction: column;                                     /* Располагаем список и склад друг под другом */
    gap: 10px;                                                  /* Устанавливаем вертикальный зазор между блоками */
}

.l16-t1-list-phrases {
    display: flex;                                              /* Включаем флекс для формирования столбца */
    flex-direction: column;                                     /* Выстраиваем строки строго в один столбец */
    gap: 2px;                                                  /* Отступ между строками чистоговорок */
}

.l16-t1-phrase-row {
    display: flex;                                              /* Горизонтальный флекс внутри каждой строки */
    align-items: center;                                        /* Центрируем текст и окошко по вертикали */
    justify-content: space-between;                             /* Раздвигаем текст влево, окошко вправо */
    background: #ffffff;                                        /* Белый фон строки */
    padding: 10px 20px;                                         /* Внутренние отступы для свободного пространства */
    border-radius: 15px;                                        /* Скругляем углы строки */
    border: 2px solid #e1f5fe;                                  /* Голубая рамка вокруг строки */
}

.l16-t1-phrase-row p {
    margin: 0;                                                  /* Убираем внешние отступы у текста */
    font-size: 1.3em;                                           /* Размер шрифта для удобства чтения ребенком */
    color: #333;                                                /* Цвет текста */
    flex: 1;                                                    /* Текст занимает всё доступное место слева */
}

.l16-t1-drop-zone {
    width: 80px;                                                /* Фиксированная ширина окошка для картинки */
    height: 80px;                                               /* Фиксированная высота окошка для картинки */
    border: 2px dashed #ffd600;                                 /* Жёлтая пунктирная рамка зоны ожидания */
    border-radius: 12px;                                        /* Скругление углов окошка */
    background: #fffde7;                                        /* Светло-жёлтый фон пустого окошка */
    display: flex;                                              /* Флекс для центрирования картинки в окошке */
    justify-content: center;                                    /* Центрируем по горизонтали */
    align-items: center;                                        /* Центрируем по вертикали */
    flex-shrink: 0;                                             /* Запрещаем окошку сжиматься */
    transition: all 0.2s ease;                                  /* Плавная анимация при наведении */
}

.l16-t1-images-source {
    display: flex;                                              /* Формируем горизонтальный ряд для картинок */
    justify-content: center;                                    /* Центрируем ряд картинок по середине страницы */
    gap: 10px;                                                  /* Зазор между картинками на складе */
    padding: 10px;                                              /* Внутренний отступ складской зоны */
    background: #e3f2fd;                                        /* Нежно-голубой фон подложки склада */
    border-radius: 20px;                                        /* Скругление углов подложки */
    border: 3px solid #ffd600;                                  /* Жёлтая рамка складского ряда */
}

.l16-t1-pic {
    width: 100px;                                                /* Ширина картинки на складе */
    height: 100px;                                               /* Высота картинки на складе */
    object-fit: contain;                                        /* Вписываем изображение без искажений */
    cursor: grab;                                               /* Курсор захвата для интерактивности */
    /*background: #fff;                                           /* Белый фон под картинкой */
    /*border: 1px solid #ddd;                                     /* Тонкая серая рамка */
    border-radius: 10px;                                        /* Скругление углов самой картинки */
    padding: 4px;                                               /* Внутренний отступ картинки от края её рамки */
}

/* ЯРКОСТЬ КАРТИНКИ В ОКОШКЕ */
.l16-t1-drop-zone img {
    width: 100%;                                                /* Картинка заполняет ширину окошка */
    height: 100%;                                               /* Картинка заполняет высоту окошка */
    object-fit: contain;                                        /* Сохраняем пропорции при заполнении */
    opacity: 1 !important;                                      /* Принудительная полная непрозрачность */
}

/* ЗАДАНИЕ №2. СТИЛИ ОБЩЕГО БЛОКА (ПОСТРОЧНО) */

.l16-t2-main-list {
    display: flex;                                              /* Включаем флекс для формирования вертикального списка */
    flex-direction: column;                                     /* Выстраиваем элементы строго друг под другом */
    gap: 20px;                                                  /* Устанавливаем зазор между парами вопрос-ответ */
    background: #ffffff;                                        /* Белый фон общего блока для всех вопросов */
    padding: 20px;                                              /* Внутренние отступы общего блока */
    border-radius: 20px;                                        /* Скругление углов общего контейнера */
    border: 2px solid #e1f5fe;                                  /* Нежная голубая рамка для всей группы вопросов */
}

.l16-t2-item {
    display: flex;                                              /* Включаем флекс внутри пары */
    flex-direction: column;                                     /* Текст вопроса располагается НАД полем ввода */
    gap: 8px;                                                   /* Отступ между текстом вопроса и инпутом */
}

.l16-t2-item p {
    margin: 0;                                                  /* Убираем лишние отступы у текста вопроса */
    font-size: 1.25em;                                          /* Крупный размер шрифта для удобства чтения */
    color: #333;                                                /* Цвет текста вопроса */
    padding-left: 5px;                                          /* Небольшой отступ текста от левого края */
}

.l16-t2-input {
    width: 100%;                                                /* Поле ввода занимает всю ширину блока */
    padding: 12px 15px;                                         /* Внутренние отступы внутри поля для текста */
    border: 2px solid #ffd600;                                  /* Жёлтая рамка поля ввода в стиле урока */
    border-radius: 12px;                                        /* Скругление углов рамки инпута */
    font-family: 'Comic Sans MS', sans-serif;                   /* Основной шрифт для детских ответов */
    font-size: 1.15em;                                          /* Размер вводимого текста */
    outline: none;                                              /* Убираем системную подсветку браузера */
    box-sizing: border-box;                                     /* Паддинги не увеличивают общую ширину поля */
}

.l16-t2-input:focus {
    background-color: #fffde7;                                  /* Подсветка поля при вводе текста */
    border-color: #ff9244;                                      /* Смена цвета рамки при активном вводе */
}

/* СОСТОЯНИЯ ПРОВЕРКИ */
.l16-t2-input.correct {
    border-color: #27ae60 !important;                           /* Зелёная рамка при успехе */
    background-color: #e8f5e9 !important;                       /* Зеленоватый фон при успехе */
}

.l16-t2-input.error {
    border-color: #e74c3c !important;                           /* Красная рамка при ошибке */
    background-color: #ffebee !important;                       /* Красноватый фон при ошибке */
}

/* ЗАДАНИЕ №3. ПОДБЕРИ КАРТИНКИ (ПОСТРОЧНО) */

.l16-t3-tables-container {
    display: flex;                                              /* Включаем флекс для расположения столбцов в ряд */
    justify-content: space-around;                              /* Распределяем столбцы с равным свободным местом */
    gap: 20px;                                                  /* Зазор между левым и правым столбцом */
    margin-bottom: 30px;                                        /* Отступ снизу до блока с картинками */
}

.l16-t3-column {
    display: flex;                                              /* Включаем флекс для вертикального списка слов */
    flex-direction: column;                                     /* Выстраиваем слова в колонку */
    flex: 1;                                                    /* Оба столбца имеют одинаковую ширину */
    max-width: 250px;                                           /* Ограничиваем максимальную ширину столбца */
}

.l16-t3-word {
    padding: 10px;                                              /* Внутренние отступы для ячейки слова */
    border: 1px solid #b3e5fc;                                  /* Тонкая голубая рамка вокруг каждого слова */
    text-align: center;                                         /* Центрируем текст внутри ячейки */
    font-size: 1.2em;                                           /* Размер шрифта слов */
    background: #ffffff;                                        /* Белый фон ячейки */
    cursor: pointer;                                            /* Курсор-указатель для кликабельности */
    transition: all 0.2s ease;                                  /* Плавная смена стилей при взаимодействии */
    font-weight: bold;                                          /* Жирный шрифт для лучшей читаемости */
}

.l16-t3-word:hover {
    background-color: #f1f8ff;                                  /* Подсветка при наведении мыши */
}

/* Состояние при выборе (активное слово) */
.l16-t3-word.selected {
    background-color: #fff9c4;                                  /* Желтый фон при выборе слова */
    border-color: #ffd600;                                      /* Усиление рамки при выборе */
}

/* Состояние при правильном соединении (зеленый шрифт) */
.l16-t3-word.matched {
    color: #27ae60 !important;                                  /* ЗЕЛЕНЫЙ ЦВЕТ ШРИФТА ДЛЯ НАЙДЕННЫХ ПАР */
    pointer-events: none;                                       /* Отключаем клики по уже найденным словам */
}

.l16-t3-images-grid {
    display: grid;                                              /* Включаем сетку для картинок */
    grid-template-columns: repeat(4, 1fr);                      /* Создаем 4 колонки в ряду */
    gap: 15px;                                                  /* Расстояние между картинками */
    background: #ffffff;                                        /* Белый фон под сеткой картинок */
    padding: 20px;                                              /* Внутренние отступы сетки */
    border-radius: 20px;                                        /* Скругление углов блока картинок */
}

.l16-t3-img-box {
    display: flex;                                              /* Включаем флекс для группировки картинки и подписи */
    flex-direction: column;                                     /* Располагаем подпись под картинкой */
    align-items: center;                                        /* Центрируем содержимое по горизонтали */
    padding: 10px;                                              /* Внутренний отступ бокса */
    border: 3px solid transparent;                              /* Прозрачная рамка по умолчанию */
    border-radius: 15px;                                        /* Скругление углов бокса */
    transition: border-color 0.3s ease;                         /* Плавное появление рамки */
}

.l16-t3-img-box img {
    width: 100px;                                               /* Фиксированная ширина картинки */
    height: 100px;                                              /* Фиксированная высота картинки */
    object-fit: contain;                                        /* Сохраняем пропорции изображения */
    margin-bottom: 5px;                                         /* Отступ от картинки до текста */
}

.l16-t3-img-box span {
    font-size: 1em;                                             /* Размер шрифта подписи под картинкой */
    color: #555;                                                /* Серый цвет текста подписи */
}

/* ЗЕЛЕНЫЙ КОНТУР КАРТИНКИ ПРИ ВЫБОРЕ ПРАВИЛЬНЫХ СЛОВ */
.l16-t3-img-box.matched {
    border-color: #27ae60;                                      /* ЗЕЛЕНЫЙ КОНТУР КАРТИНКИ */
    background-color: #e8f5e9;                                  /* Легкий зеленый фон бокса */
}
/* ЗАДАНИЕ №3. ЛОГИКА ВЫДЕЛЕНИЯ (ПОСТРОЧНО) */

.l16-t3-tables-container {
    display: flex;                                              /* Располагаем два столбца рядом */
    justify-content: center;                                    /* Центрируем таблицу слов */
    gap: 40px;                                                  /* Расстояние между столбцами */
    margin-bottom: 20px;                                        /* Отступ до блока картинок */
}

.l16-t3-column {
    display: flex;                                              /* Вертикальный список слов */
    flex-direction: column;                                     /* Направление — колонка */
    width: 200px;                                               /* Фиксированная ширина колонки */
}

.l16-t3-word {
    padding: 12px;                                              /* Внутренние отступы ячейки слова */
    border: 2px solid #e1f5fe;                                  /* Светло-голубая рамка ячейки */
    margin-bottom: -2px;                                        /* Схлопывание рамок для единого вида */
    text-align: center;                                         /* Текст по центру */
    background: #fff;                                           /* Белый фон слова */
    cursor: pointer;                                            /* Курсор в виде руки */
    font-weight: bold;                                          /* Жирный шрифт */
    transition: background 0.2s;                                /* Плавная подсветка фона */
}

/* Цвет слова при простом нажатии (активное состояние) */
.l16-t3-word.active {
    background-color: #fff9c4;                                  /* Жёлтая подсветка при клике */
}

/* КРИТИЧЕСКОЕ ПРАВИЛО: ЗЕЛЕНЫЙ ШРИФТ ПОСЛЕ ВЕРНОГО ВЫБОРА */
.l16-t3-word.matched {
    color: #27ae60 !important;                                  /* ШРИФТ СТАНОВИТСЯ ЗЕЛЕНЫМ */
    background-color: #f1f8e9;                                  /* Светло-зеленый фон ячейки */
    border-color: #a5d6a7;                                      /* Зеленоватая рамка ячейки */
    pointer-events: none;                                       /* Запрещаем повторные клики по найденным словам */
}

.l16-t3-images-grid {
    display: grid;                                              /* Сетка для картинок */
    grid-template-columns: repeat(4, 1fr);                      /* 4 картинки в ряду */
    gap: 10px;                                                  /* Зазор между карточками картинок */
    padding: 10px;                                              /* Отступ внутри блока сеток */
}

.l16-t3-img-box {
    border: 3px solid transparent;                              /* Изначально рамка прозрачная */
    border-radius: 15px;                                        /* Скругление углов рамки */
    padding: 10px;                                              /* Внутренний отступ от рамки до картинки */
    text-align: center;                                         /* Текст под картинкой по центру */
    transition: all 0.3s ease;                                  /* Плавное появление зеленого контура */
}

.l16-t3-img-box img {
    width: 100px;                                                /* Размер картинок */
    height: 100px;                                               /* Высота картинок */
    object-fit: contain;                                        /* Вписываем картинку в размер */
}

/* ЗЕЛЕНЫЙ КОНТУР ПРИ ПРАВИЛЬНОМ ВЫБОРЕ СЛОВ */
.l16-t3-img-box.matched {
    border-color: #27ae60;                                      /* ОБВОДКА ПО КОНТУРУ ЗЕЛЕНЫМ ЦВЕТОМ */
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.2);                /* Легкое зеленое свечение */
}

/* ЗАДАНИЕ №4. СЕТКА НА 5 РЯДОВ */

.l16-t4-grid {
    display: flex;                                              /* Флекс-контейнер для вертикального стека рядов */
    flex-direction: column;                                     /* Направление — сверху вниз */
    gap: 8px;                                                  /* Уменьшенный зазор между рядами для компактности */
    margin-bottom: 25px;                                        /* Отступ перед кнопкой проверки */
}

.l16-t4-row {
    display: flex;                                              /* Горизонтальный ряд для картинок */
    justify-content: space-between;                             /* Равномерное распределение элементов в ряду */
    background: #ffffff;                                        /* Белый фон подложки ряда */
    padding: 10px;                                              /* Внутренний отступ ряда */
    border-radius: 15px;                                        /* Скругление углов ряда */
    border: 1px solid #e1f5fe;                                  /* Тонкая рамка для визуального разделения */
}

.l16-t4-item {
    width: 105px;                                                /* Оптимизированная ширина под 4 картинки в ряд */
    height: 105px;                                               /* Оптимизированная высота */
    display: flex;                                              /* Центрирование изображения внутри */
    align-items: center;                                        /* Вертикальное выравнивание */
    justify-content: center;                                    /* Горизонтальное выравнивание */
    cursor: pointer;                                            /* Курсор выбора */
    border: 3px solid transparent;                              /* Прозрачная рамка для состояния выбора */
    border-radius: 12px;                                        /* Скругление углов картинки */
    transition: background 0.2s;                                /* Плавная подсветка при клике */
}

.l16-t4-item img {
    max-width: 90%;                                             /* Масштабирование картинки под бокс */
    max-height: 90%;                                            /* Сохранение пропорций */
}

/* СОСТОЯНИЯ: ВЫБРАНО, ВЕРНО, ОШИБКА */
.l16-t4-item.selected {
    background-color: #fff9c4;                                  /* Жёлтый фон при нажатии на картинку */
}

.l16-t4-item.correct {
    border-color: #27ae60 !important;                           /* Зеленая рамка для правильного "лишнего" */
    background-color: #e8f5e9;                                  /* Зеленоватый фон успеха */
}

.l16-t4-item.error {
    border-color: #e74c3c !important;                           /* Красная рамка для неверного выбора */
    background-color: #ffebee;                                  /* Розоватый фон ошибки */
}

/* ЗАДАНИЕ №5. ЧТЕНИЕ ТЕКСТА (ПОСТРОЧНО) */

.l16-t5-container {
    display: flex;                                              /* Включаем флекс для центрирования */
    justify-content: center;                                    /* Горизонтальное выравнивание картинки */
    background-color: #ffffff;                                  /* Белый фон подложки */
    padding: 15px;                                              /* Отступ от краев картинки до рамки */
    border-radius: 20px;                                        /* Скругление углов контейнера */
    border: 2px solid #e1f5fe;                                  /* Голубая рамка вокруг картинки */
    margin-bottom: 15px;                                        /* Отступ снизу до сообщения */
}

.l16-t5-image {
    max-width: 100%;                                            /* Картинка не вылезает за ширину карточки */
    height: auto;                                               /* Пропорциональное изменение высоты */
    display: block;                                             /* Убираем лишние зазоры снизу */
    border-radius: 10px;                                        /* Легкое скругление углов изображения */
}

/* Стили для сообщения об успехе (используются общие, но на всякий случай) */
#res-16-5 {
    text-align: center;                                         /* Центрируем похвалу */
    min-height: 1.5em;                                          /* Резервируем место под текст */
    margin-bottom: 10px;                                        /* Отступ до кнопки */
}

/* ЗАДАНИЕ №6. КАТЕГОРИИ РОДА (ПОСТРОЧНО) */

.l16-t6-zones {
    display: flex;                                              /* Располагаем зоны в ряд */
    justify-content: space-between;                             /* Равномерно распределяем колонки */
    gap: 15px;                                                  /* Зазор между колонками */
    margin-bottom: 25px;                                        /* Отступ до пула картинок */
}

.l16-t6-drop-zone {
    flex: 1;                                                    /* Колонки одинаковой ширины */
    min-height: 250px;                                          /* Минимальная высота зоны сброса */
    border-radius: 25px;                                        /* Скругление углов колонки */
    padding: 15px;                                              /* Внутренний отступ */
    display: flex;                                              /* Флекс для размещения картинок внутри */
    flex-wrap: wrap;                                            /* Разрешаем перенос картинок на новую строку */
    align-content: flex-start;                                  /* Прижимаем контент к верху */
    gap: 10px;                                                  /* Зазор между сброшенными картинками */
    transition: background 0.3s, transform 0.2s;                /* Плавная реакция на перетаскивание */
}

/* Цвета колонок по макету */
.l16-t6-drop-zone.blue { background-color: #bbdefb; border: 3px solid #64b5f6; }
.l16-t6-drop-zone.yellow { background-color: #fff9c4; border: 3px solid #ffd54f; }
.l16-t6-drop-zone.pink { background-color: #f8d7da; border: 3px solid #f5c6cb; }

.zone-title {
    width: 100%;                                                /* Заголовок на всю ширину */
    text-align: center;                                         /* Текст по центру */
    font-size: 1.8em;                                           /* Крупный шрифт категории */
    font-weight: bold;                                          /* Жирное начертание */
    color: #ffffff;                                             /* Белый цвет текста */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);                   /* Легкая тень текста */
    margin-bottom: 10px;                                        /* Отступ до первых картинок */
}

.l16-t6-items-pool {
    display: flex;                                              /* Пул картинок в ряд */
    justify-content: center;                                    /* Центрируем картинки */
    gap: 15px;                                                  /* Зазор между картинками */
    padding: 20px;                                              /* Внутренние отступы */
    background: #fdfdfd;                                        /* Светлый фон пула */
    border-radius: 15px;                                        /* Скругление углов пула */
    min-height: 120px;                                          /* Высота, чтобы пул не схлопывался */
}

.l16-t6-drag-item {
    width: 105px;                                                /* Размер контейнера картинки */
    height: 105px;                                               /* Высота контейнера */
    cursor: grab;                                               /* Курсор "рука" для захвата */
    background: white;                                          /* Белый фон под картинкой */
    border-radius: 10px;                                        /* Скругление углов */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);                      /* Тень для объема */
    display: flex;                                              /* Центрирование картинки */
    align-items: center;                                        /* Вертикальное центрирование */
    justify-content: center;                                    /* Горизонтальное центрирование */
}

.l16-t6-drag-item img {
    max-width: 85%;                                             /* Масштабирование изображения */
    max-height: 85%;                                            /* Сохранение пропорций */
    pointer-events: none;                                       /* Отключаем события мыши на самой картинке */
}

/* Состояние при наведении картинки на зону */
.l16-t6-drop-zone.drag-over {
    transform: scale(1.02);                                     /* Легкое увеличение зоны */
    filter: brightness(0.95);                                   /* Затемнение фона */
}

/* ЗАДАНИЕ №7. ПРЕДЛОЖЕНИЯ (ПОСТРОЧНО) */

.l16-t7-images-row {
    display: flex;                                              /* Выстраиваем картинки в ряд */
    justify-content: center;                                    /* Центрируем ряд по горизонтали */
    gap: 10px;                                                  /* Зазор между карточками */
    margin-bottom: 15px;                                        /* Отступ до полей ввода */
}

.l16-t7-img-item {
    width: 150px;                                               /* Ширина контейнера */
    height: 150px;                                              /* Высота контейнера */
    background-color: #ffffff;                                  /* Строго белый фон для каждой картинки */
    border: 1px solid #e0e0e0;                                  /* Легкая серая рамка */
    border-radius: 12px;                                        /* Скругление углов */
    display: flex;                                              /* Центрирование внутри */
    align-items: center;                                        /* Центрирование по вертикали */
    justify-content: center;                                    /* Центрирование по горизонтали */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);                     /* Мягкая тень */
}

.l16-t7-img-item img {
    max-width: 95%;                                             /* Масштабируем картинку внутри белого бокса */
    max-height: 95%;                                            /* Сохраняем пропорции */
}

.l16-t7-inputs-column {
    display: flex;                                              /* Вертикальная колонка для инпутов */
    flex-direction: column;                                     /* Направление сверху вниз */
    gap: 10px;                                                  /* Расстояние между строками */
    max-width: 620px;                                           /* Ограничение ширины */
    margin: 0 auto 5px;                                        /* Центрирование блока */
}

.l16-t7-input {
    width: 100%;                                                /* Поле на всю ширину блока */
    padding: 12px;                                              /* Внутренние отступы */
    border: 2px solid #b3e5fc;                                  /* Голубая рамка */
    border-radius: 8px;                                         /* Скругление инпута */
    outline: none;                                              /* Убираем стандартный фокус */
}

.l16-t7-input:focus {
    border-color: #ffa726;                                      /* Оранжевая рамка при вводе */
}

/* ЗАДАНИЕ №8. СЫЩИК (ПОСТРОЧНО) */

.l16-t8-panorama {
    width: 100%;                                                /* Панорама занимает всю ширину */
    background: #fff;                                           /* Белый фон подложки */
    border: 2px solid #e1f5fe;                                  /* Голубая рамка */
    border-radius: 15px;                                        /* Скругление */
    margin-bottom: 20px;                                        /* Отступ до сетки */
    overflow: hidden;                                           /* Обрезка лишнего */
}

.l16-t8-main-img {
    width: 100%;                                                /* Растягиваем картинку по ширине */
    height: auto;                                               /* Пропорциональная высота */
    display: block;                                             /* Убираем зазоры */
}

.l16-t8-grid {
    display: grid;                                              /* Сетка для образцов */
    grid-template-columns: repeat(5, 1fr);                      /* 5 колонок в ряд */
    gap: 15px;                                                  /* Расстояние между ячейками */
    margin-bottom: 15px;                                        /* Отступ до кнопки */
}

.l16-t8-item {
    display: flex;                                              /* Флекс-контейнер для картинки и ввода */
    flex-direction: column;                                     /* Располагаем сверху вниз */
    align-items: center;                                        /* Центрируем содержимое */
    background: #ffffff;                                        /* Легкий фон ячейки */
    padding: 5px;                                              /* Внутренние отступы */
    border-radius: 10px;                                        /* Скругление */
}

.l16-t8-item img {
    width: 90px;                                                /* Размер картинки-образца */
    height: 90px;                                               /* Фиксированная высота */
    object-fit: contain;                                        /* Вписываем картинку */
    margin-bottom: 2px;                                         /* Отступ до поля ввода */
}

.l16-t8-input {
    width: 70px;                                                /* Ширина поля ввода */
    padding: 5px;                                               /* Внутренние зазоры */
    text-align: center;                                         /* Текст по центру */
    border: 2px solid #ccc;                                     /* Стандартная рамка */
    border-radius: 5px;                                         /* Легкое скругление */
    font-weight: bold;                                          /* Жирный шрифт для цифр */
}