/* ==========================================================================
   DESIGN SYSTEM VARIABLES (Глобальные переменные темы сайта)
   ========================================================================== */
:root {
    /* Фирменные цвета (Брендинг) */
    --color-primary: #16a34a;          /* Основной зеленый (кнопки, успехи) */
    --color-primary-hover: #15803d;    /* Темно-зеленый для наведения */
    --color-primary-light: #dcfce7;    /* Светло-зеленый фон для правильных ответов */

    /* Статусы ошибок */
    --color-danger: #dc2626;           /* Красный для ошибок (.wrongVal) */
    --color-danger-border: #f87171;    /* Мягкая красная рамка для ошибок */
    --color-danger-light: #fee2e2;     /* Светло-красный фон для ошибок */

    /* Нейтральная палитра (Текст и границы) */
    --color-text-main: #1f2937;        /* Глубокий темный для основного текста */
    --color-text-muted: #4b5563;       /* Серый для второстепенного текста */
    --color-text-light: #6b7280;       /* Бледный серый (номера списков, подсказки) */
    --color-border: #d1d5db;           /* Стандартный цвет границ */
    --color-border-light: #e5e7eb;     /* Мягкие внутренние разделители (включая линии) */
    --color-border-ultra-light: #f3f4f6; /* Ультра-мягкий серый для внутренних линий таблиц (НАШ СВЕЖИЙ ПЕРЕМЕННЫЙ) */

    /* Фоновые цвета */
    --color-bg-light: #f8fafc;         /* Фон для карточек теории (.grammar-infobox) */
    --color-bg-hover: #f1f5f9;         /* Цвет подсветки строк при наведении */
    --color-bg-page: #ffffff;          /* Основной фон страниц */

    /* Типографика и скругления */
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Дополнение для ссылок и декоративных элементов */
    --color-accent: #0f766e;           /* Глубокий бирюзовый (вместо старого teal) */
    --color-accent-hover: #115e59;     /* Еще более темный бирюзовый для ховера */
    --color-nav-text: #1e3a8a;         /* Благородный темно-синий для sub-header (вместо navy) */
}

/* ==========================================================================
   DARK THEME (Автоматическая тёмная тема)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Фоновые цвета */
        --color-bg-page: #111827;          /* Глубокий тёмный фон страницы (вместо белого) */
        --color-bg-light: #1f2937;         /* Тёмно-серый фон для карточек теории и инпутов */
        --color-bg-hover: #374151;         /* Цвет подсветки строк таблицы при наведении */

        /* Нейтральная палитра (Текст и границы) */
        --color-text-main: #f9fafb;        /* Чистый светлый цвет для основного текста */
        --color-text-muted: #e5e7eb;       /* Мягкий светлый для второстепенного текста */
        --color-text-light: #9ca3af;       /* Серый для номеров списков и подсказок */
        --color-border: #4b5563;           /* Контрастные границы для тёмной темы */
        --color-border-light: #374151;     /* Мягкие внутренние разделители */
        --color-border-ultra-light: #1f2937; /* Линии внутри таблиц */

        /* Дополнение для ссылок и sub-header */
        --color-nav-text: #93c5fd;         /* Светло-синий для sub-header (вместо темно-синего) */
        --color-accent: #2dd4bf;           /* Яркий бирюзовый для ссылок, чтобы они горели в темноте */
        --color-accent-hover: #5eead4;     /* Ховер для бирюзовых ссылок */

        /* Фирменные цвета (Брендинг — делаем чуть мягче для темноты) */
        --color-primary: #22c55e;          /* Неоново-зелёный (кнопки, успехи) */
        --color-primary-hover: #4ade80;    /* Ховер для зелёной кнопки */
        --color-primary-light: rgba(34, 197, 94, 0.15); /* Прозрачный зелёный фон для .okVal */

        /* Статусы ошибок */
        --color-danger: #f87171;           /* Яркий красный для .wrongVal в темноте */
        --color-danger-border: #ef4444;    /* Рамка ошибки */
        --color-danger-light: rgba(239, 68, 68, 0.15); /* Прозрачный красный фон для .wrongVal */
    }
    /* Мягко приглушаем картинки в заданиях, чтобы они не слепили ночью */
    .task-description img {
        filter: brightness(.85) contrast(1.05);
    }
}

/* ==========================================================================
   1. PAGE STRUCTURE
   ========================================================================== */

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-page);
    font-family: var(--font-main);
    -webkit-text-size-adjust: 100%; /* Запрещает iOS принудительно менять размер шрифта */
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-main);
}

/* ЭТОТ БЛОК ЗАМЕНЯЕТ ТАБЛИЦЫ: Идеальное центрирование */
.page-wrapper {
    display: flex;           /* Включаем режим гибких контейнеров */
    justify-content: center; /* Центрируем контент по горизонтали */
    align-items: center;     /* Центрируем контент по вертикали */
    min-height: 100vh;       /* Растягиваем контейнер на 100% высоты экрана */
}

/* Расширяем общую область, давая элементам еще больше свободы */
.content-box {
    width: 100%;
    max-width: 724px;
    /* 12px — верх/низ. max(12px, 2vw) — идеальные ~12-15px на смартфонах */
    padding: 12px max(12px, 2vw);
    box-sizing: border-box;
}

/* ==========================================================================
   2. HR SEPARATOR
   ========================================================================== */

.separator {
    border: none;                    /* Убираем стандартную рамку */
    height: 1px;                     /* Толщина линии ровно в 1 пиксель */
    background-color: var(--color-border-light); /* Мягкий светло-серый цвет */
    margin: 30px 0;                  /* Отступы 30px сверху и снизу */
    width: 100%;                     /* Растягиваем линию на всю ширину карточки */
}

.separator-home {
    max-width: 395px;                /* Ограничиваем ширину под размер кнопок */
    margin: 50px auto 30px auto;     /* Центрирование: 50px сверху, 30px снизу */
}

.separator-voc {
    max-width: 540px;                /* Ограничиваем ширину под размер web-тренажера */
    margin: 30px auto 30px auto;     /* Центрирование: 30px сверху и снизу */
}

/* ==========================================================================
   3. ELEMENT SET & TOOLBAR
   ========================================================================== */

.sub-header {
    display: block;         /* Занимает всю ширину контейнера */
    box-sizing: border-box; /* Гарантирует правильный расчет размеров с рамкой */
    background: var(--color-bg-light);
    border: 1px var(--color-border) solid;
    border-radius: var(--radius-sm);
    width: 100%;            /* Растягивается на все 100% ширины content-box */
    text-align: center;
    font-size: 20px;
    color: var(--color-nav-text); /* Современный темно-синий */
    padding: 10px 0;        /* Внутренние отступы для высоты */
}

.toolbar-section {
    display: flex;               /* Включаем флекс-режим */
    justify-content: space-between; /* Магия: толкает навигацию влево, а словарь вправо */
    align-items: center;         /* Выравнивает обе части строго по центру по вертикали */
    width: 100%;                 /* Растягиваем на всю ширину */
    margin: 20px 0;
}

/* Изменяем внешние отступы у меню, так как теперь за них отвечает общий тулбар */
.navigation-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;  /* Обнулили маргины здесь */
}

/* Правая часть тулбара: зона ссылки на словарь (каркас для выравнивания) */
.vocabulary-zone {
    display: flex;
    align-items: center;
}

/* Переопределяем только размер шрифта для навигации */
.toolbar-section .nav-size {
    font-size: 15px;
}

/* Информация о книге: делаем аккуратный отступ снизу */
.book-info {
    margin-bottom: 30px;
}

/* Заголовок группы упражнений */
.section-title {
    font-size: 16px;
    font-weight: normal;
    font-style: italic;          /* Делает текст курсивом */
    color: var(--color-text-muted);
    margin-top: 25px;
    margin-bottom: 15px;
}

/* ==========================================================================
   4. EXERCISE LIST
   ========================================================================== */

/* Стили для самого списка упражнений */
.exercise-list {
    list-style-type: none;       /* Отключаем стандартную грубую нумерацию браузера */
    counter-reset: exercise-counter; /* Создаем свой собственный независимый счетчик */
    padding-left: 10px;          /* Комфортный «воздух» от левого края экрана до цифры */
    margin-bottom: 40px;
}

/* Каждый пункт списка */
.exercise-list li {
    display: flex;               /* Включаем флекс, чтобы цифра и текст были на одной линии */
    align-items: flex-start;     /* Выравниваем по верхней границе строки */
    margin-bottom: 10px;         /* Приятное расстояние между строками списка */
    counter-increment: exercise-counter; /* Заставляем счетчик прибавлять по +1 */
}

/* Генерируем и стилизуем саму цифру */
.exercise-list li::before {
    content: counter(exercise-counter) "."; /* Выводим номер и точку */
    min-width: 24px;             /* Фиксируем ширину колонки для цифры */
    margin-right: 8px;           /* Задаем аккуратный зазор до текста */
    color: var(--color-text-light); /* Делаем цифры приятного серого цвета */
    font-weight: 500;
    text-align: left;            /* Выравниваем цифры по левому краю своей колонки */
}

/* Ссылки внутри списка */
.exercise-list a {
    color: var(--color-accent);  /* Использовали благородный бирюзовый */
    text-decoration: none;       /* Изначально без подчёркивания */
    transition: color 0.15s ease; /* Плавное потемнение за 0.15 секунды */
}

/* Эффект при наведении на ссылку упражнения */
.exercise-list a:hover {
    color: var(--color-accent-hover); /* Цвет становится более глубоким и тёмным */
    text-decoration: none;       /* Никакого подчёркивания при наведении */
}

/* ==========================================================================
   5. MAIN MENU LINKS (Главное меню)
   ========================================================================= */

/* Стили для родительского контейнера кнопок */
.link-section {
    display: flex;           /* Включает режим гибкой раскладки */
    justify-content: center; /* Центрирует кнопки по горизонтали */
    gap: 25px 15px;          /* Вертикальный и горизонтальный зазоры между ссылками */
    flex-wrap: wrap;         /* Перенос объектов в столбик на смартфоне */
}

.link-section a {
    display: inline-block;   /* Позволяет задавать размеры и отступы */
    box-sizing: border-box;   /* Гарантирует, что размеры не превысят 190px */
    background: var(--color-bg-light);       /* Использовали светлый фон карточек */
    border: 1px var(--color-border) solid;  /* Заменили #aaa на системную границу */
    border-radius: var(--radius-md);         /* Стандартизировали скругление углов */
    width: 190px;
    text-align: center;
    text-decoration: none;   /* Убирает стандартное подчеркивание ссылки */
    color: var(--color-nav-text);            /* Современный благородный темно-синий */
    padding: 14px 0;         /* Внутренние отступы для высоты */
    /* Плавный переход: меняет цвет и фон за 0.2 секунды */
    transition: all 0.2s ease-in-out;
}

/* Эффект при наведении мыши */
.link-section a:hover {
    background: var(--color-bg-hover); /* Кнопки меню будут подсвечиваться так же благородно, как и строки таблицы! */
    border-color: var(--color-border); /* Рамку сделаем чуть мягче */
    color: var(--color-text-main);
}

/* ==========================================================================
   6. LINE-TEXT SEPARATOR (Декоративный текстовый разделитель)
   ========================================================================== */

.line {
    display: flex;           /* Включает флекс-контейнер */
    align-items: center;     /* Центрирует линии и текст строго по вертикали */
    text-align: center;
    gap: 10px;               /* Фиксированный отступ между текстом и линиями */
    margin-top: 30px;
    margin-bottom: 20px;
    color: var(--color-text-muted); /* Системный серый цвет для текста */
}

.line::before,
.line::after {
    content: '';
    flex-grow: 1;            /* Магия: заставляет линии занять всё свободное место */
    height: 1px;             /* Толщина линии */
    background-color: var(--color-border-light); /* Системный цвет разделителей */
}

.line-home {
    max-width: 395px;        /* Ограничиваем ширину под размер кнопок */
    margin: 40px auto 30px auto; /* Сбалансированное центрирование */
}

/* ==========================================================================
   7. FOOTER (Подвал сайта)
   ========================================================================== */

.site-footer {
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем футер на мобильных и десктопе */
    gap: 12px;               /* Отступы между элементами */
    padding: 0 0 40px 0;     /* Обнулен отступ сверху, 40px снизу */
    width: 100%;
    margin: 0 auto;          /* Центрирует контейнер подвала */
}

/* Стили для ссылок в подвале */
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;                /* Расстояние между иконкой и текстом */
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-light); /* Серый цвет, соответствующий общей дизайн-системе */
    text-decoration: none;
    transition: color 0.2s ease, stroke 0.2s ease;
    padding: 8px 4px;        /* Увеличивает невидимую зону клика для смартфонов */
}

/* Эффект при наведении мышкой */
.footer-link:hover {
    color: var(--color-text-main); /* Текст становится глубоким темным */
}

/* Точка-разделитель между ссылками */
.footer-dot {
    color: var(--color-text-muted);
    font-weight: bold;
    user-select: none;       /* Чтобы точка не выделялась при копировании текста */
}

/* Центрирование SVG внутри ссылки */
.footer-link svg {
    display: block;
}

/* ==========================================================================
   8. INPUT & VALIDATION (Поля ввода и проверка ответов)
   ========================================================================== */

/* Цвет правильного ответа: красим текст, рамку и фон */
.okVal {
    color: var(--color-primary-hover) !important;   /* Читаемый тёмно-зелёный текст */
    border-color: var(--color-primary) !important;  /* Насыщенная зелёная рамка */
    background-color: var(--color-primary-light) !important; /* Нежнейший зелёный фон */
    animation: smoothGreen 0.4s ease-in-out; /* плавно наливаем зеленым цветом */
}

/* Цвет неправильного ответа: гармоничные красные оттенки */
.wrongVal {
    color: var(--color-danger) !important;          /* Читаемый темно-красный текст */
    border-color: var(--color-danger-border) !important; /* Мягкая красная рамка из переменных */
    background-color: var(--color-danger-light) !important; /* Нежнейший светло-красный фон */
    animation: smoothRed 0.4s ease-in-out;  /* плавно наливаем красным цветом */
}

/* Не используется. Лёгкое увеличение от 100% до 102% и возврат обратно */
@keyframes popIn {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes smoothGreen {
    0% {
        background-color: var(--color-bg-light);
        border-color: var(--color-border);
    }
    100% {
        background-color: var(--color-primary-light);
        border-color: var(--color-primary);
    }
}

@keyframes smoothRed {
    0% {
        background-color: var(--color-bg-light);
        border-color: var(--color-border);
    }
    100% {
        background-color: var(--color-danger-light);
        border-color: var(--color-danger-border);
    }
}

/* Базовые стили для ВСЕХ текстовых полей ввода */
input[type="text"] {
    font-family: inherit;      /* Наследует красивый системный шрифт из body */
    font-size: 15px;
    margin: 3px 0;             /* 3px сверху/снизу, 0 по бокам */
    padding: 5px 8px;          /* Внутренние отступы для удобства на смартфонах */
    color: var(--color-text-main);
    background: var(--color-bg-light); /* Мягкий светлый фон до проверки */
    outline: none;

    /* Красивая аккуратная рамка без эффекта "вдавленности" */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);   /* Стандартизированное скругление инпута */
    box-sizing: border-box;    /* Защищает от вылезания за границы при расчете размеров */

    /* Для JavaScript: Плавно меняем цвет, рамку и фон за 0.3 секунды */
    /*transition: background-color 0.8s ease-in-out, border-color 0.8s ease-in-out, color 0.8s ease-in-out;*/

    /* ИСПРАВЛЕНИЕ ДЛЯ ДЛИННЫХ ПОЛЕЙ (Размер больше 35) */
    width: auto;     /* Позволяет браузеру учитывать атрибут size, если место есть */
    max-width: 100%;
}

/* ==========================================================================
   9. BUTTONS (Кнопки и интерактивные элементы)
   ========================================================================== */

/* КНОПКА ПРОВЕРКИ ОТВЕТА (Контурный минимализм) */
input[type="submit"] {
    display: block;            /* Превращаем в блочный элемент для центрирования */
    width: 140px;              /* Комфортная ширина */
    margin: 0 auto;            /* Центрируем кнопку строго по центру страницы */

    background: var(--color-bg-page);    /* Белый фон в цвет страницы */
    color: var(--color-primary);         /* Фирменный зеленый цвет текста */
    border: 1px solid var(--color-primary); /* Аккуратная тонкая зеленая рамка */
    border-radius: var(--radius-md);     /* Стандартизированное скругление углов */

    font-size: 15px;           /* В тон основному тексту */
    font-weight: 500;          /* Средняя плотность шрифта */
    padding: 10px 20px;        /* Удобная высота для нажатия пальцем на смартфоне */
    cursor: pointer;           /* Указатель-палец на компьютерах */

    /* Плавная анимация изменения цвета и эффекта нажатия */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.1s ease;
}

/* Эффект при наведении курсора мыши (на ПК) */
input[type="submit"]:hover {
    background-color: var(--color-primary);       /* Кнопка плавно заливается зеленым цветом */
    color: var(--color-bg-page);                  /* Текст внутри нее становится белым */
    border-color: var(--color-primary);
}

/* Эффект в момент самого клика (для ПК и смартфонов) */
input[type="submit"]:active {
    transform: scale(0.97);    /* Кнопка визуально слегка «вдавливается» под пальцем */
}

/* ==========================================================================
   10. EXERCISE DESCRIPTION & BASIC TASKS (Описание и простые задания)
   ========================================================================== */

/* Номер текущего упражнения (например, 1.1) */
.content-box h4 {
    font-size: 17px;         /* Чуть крупнее основного текста */
    font-weight: 600;        /* Опрятная полужирность */
    color: var(--color-text-muted); /* Системный благородный грифельно-серый цвет */

    /* Управляем отступами вокруг номера */
    margin-top: 5px;         /* Минимальный зазор от тулбара навигации */
    margin-bottom: 15px;     /* Аккуратное расстояние до описания задания */
    text-align: left;
}

/* Базовый стиль описания задания (когда дальше идет список вопросов) */
.task-description {
    font-size: 15px;
    font-weight: 500;              /* Чуть плотнее для акцента */
    color: var(--color-text-main); /* Основной глубокий темный цвет */
    margin-top: 15px;
    margin-bottom: 24px;           /* СИНХРОНИЗАЦИЯ: Установили эталонный зазор до вопросов */
    line-height: 1.6;
}

.task-description b {
    font-weight: 600;
    color: var(--color-primary); /* Подкрашиваем "use(d) to" в наш фирменный зеленый */
}

/* Адаптивные изображения внутри описания задания */
.task-description img {
    display: block;      /* Убирает лишний микро-отступ снизу картинки */
    max-width: 100%;     /* Картинка никогда не вылезет за границы экрана */
    height: auto;        /* Идеально сохраняет пропорции при сжатии */
    /* СИНХРОНИЗАЦИЯ С СЕТКОЙ 24px: Идеальная половина шага сверху и снизу */
    padding: 12px 0;     /* Небольшой аккуратный зазор сверху и снизу от картинки */
    border-radius: var(--radius-sm); /* При желании: слегка скруглит уголки картинки в тон инпутам */
    transition: filter 0.3s ease;    /* Браузер готов мягко анимировать фильтры */
}

/* МАГИЯ КОНТЕКСТА: Если СРАЗУ ЗА описанием идет пул глаголов или карточка теории */
.task-description + .verbs-pool,
.task-description + .grammar-infobox {
    margin-top: -12px; /* Чуть скорректировали, чтобы плашка аккуратно притянулась к тексту */
}

/* МАГИЯ КОНТЕКСТА №2: Если два или три описания задания идут друг за другом подряд */
.task-description + .task-description {
    margin-top: -12px; /* Отлично стягивает и тексты Лауры, и блоки Карен благодаря внутреннему padding картинки */
}

/* МАГИЯ КОНТЕКСТА №3: Если после пула глаголов или карточки теории идет еще один абзац инструкции */
.verbs-pool + .task-description,
.grammar-infobox + .task-description {
    margin-top: -12px;   /* Притягиваем уточнение ближе к рамке, убирая дыру */
    margin-bottom: 24px; /* Гарантируем эталонный просторный зазор от этого текста до вопросов */
}

/* МИКРО-КОРРЕКЦИЯ ОПТИЧЕСКОЙ ИЛЛЮЗИИ:
   Если текстовый абзац с картинкой идет сразу после обычного текста */
.task-description:not(:has(img)) + .task-description:has(img) img {
    padding-top: 8px; /* Уменьшаем верхний зазор на 4 пикселя, чтобы обмануть глаз! */
}

/* Выделение списка глаголов для подсказки (рамка-пул) */
.verbs-pool {
    background-color: var(--color-bg-light);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 24px; /* СИНХРОНИЗАЦИЯ: Теперь зазор до списка вопросов абсолютно идентичен */
    color: var(--color-text-muted);
}

/* Контейнер списка стандартных заданий */
.task-list {
    list-style-type: none;       /* Отключаем стандартную нумерацию */
    counter-reset: task-counter; /* Инициализируем счетчик */
    padding-left: 10px;          /* Отступ для десктоп-версии */
    margin-bottom: 30px;
}

/* Каждая строка с заданием */
.task-list li {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.8;
    counter-increment: task-counter;

    /* МАГИЯ ВЫРАВНИВАНИЯ (Висячий отступ): */
    padding-left: 24px;          /* Сдвигаем весь контент li вправо на 24px */
    text-indent: -24px;          /* Выталкиваем обратно влево только ПЕРВУЮ строку */
}

/* Стабильная нумерация вопросов (всегда на своем месте) */
.task-list li::before {
    content: counter(task-counter) ". "; /* Выводим номер, точку и пробел */
    display: inline-block;               /* Позволяет зафиксировать ширину */
    width: 24px;                         /* Ширина колонки под цифру */

    color: var(--color-text-light);      /* Делаем цифры мягкого серого цвета */
    font-weight: normal;
    text-align: left;

    /* Сбрасываем текстовый отступ для самой цифры */
    text-indent: 0;
}

/* ==========================================================================
   11. IRREGULAR VERBS TABLE (Таблица неправильных глаголов)
   ========================================================================== */

/* Контейнер таблицы неправильных глаголов */
.verbs-table {
    width: 100%;
    margin: 20px 0;
    font-size: 15px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden; /* Чтобы скругленные углы красиво обрезали фоны внутренних ячеек */
}

/* Нарезаем сетку Grid на 3 равные колонки прямо внутри каждой строки */
.verbs-table .tr,
.verbs-table .tr-head {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/* Общие стили для всех ячеек */
.verbs-table .tr > div,
.verbs-table .tr-head > div {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-ultra-light); /* Мягкие внутренние линии */
}

/* Стили для ячеек шапки */
.verbs-table .tr-head > div {
    background: var(--color-bg-light);
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: capitalize;
    border-bottom: 2px solid var(--color-border-light);
}

/* Элегантная и простая "Зебра" для четных строк */
.verbs-table .tr:nth-child(even) {
    background-color: var(--color-bg-light); /* Используем наш стандартный мягкий фон */
}

/* ИДЕАЛЬНАЯ ПОДСВЕТКА всей строки на компьютерах */
@media (hover: hover) {
    .verbs-table .tr:hover {
        background-color: var(--color-bg-hover) !important; /* Вся строка целиком мягко окрасится */
    }
    .verbs-table .tr > div {
        cursor: default; /* Опрятный курсор без выделения */
    }
}

/* ==========================================================================
   12. NEWSPAPER VOCABULARY GRID (Газетный стиль для списков словарей)
   ========================================================================== */

/* Общий контейнер формы словаря */
.voc-form {
    width: 100%;
    margin-bottom: 40px;
}

/* Блок с кнопкой действий */
.voc-actions {
    margin-bottom: 15px;
}

/* Кнопка "Start" (Контурный минимализм) */
.btn-start {
    background: var(--color-bg-page);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 6px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-start:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-page);
}

/* ГАЗЕТНАЯ СЕТКА: Многоколоночный режим */
.voc-columns {
    column-count: 3;         /* На десктопе выводим строго в 3 колонки */
    column-gap: 20px;        /* Зазор между газетными колонками */
    width: 100%;
}

/* Элемент выбора (строка с чекбоксом) */
.voc-columns label {
    display: block;          /* Каждый чекбокс начинается с новой строки внутри колонки */
    padding: 6px 0;          /* Комфортный вертикальный отступ для нажатия пальцем */
    font-size: 15px;
    color: var(--color-text-muted);
    cursor: pointer;

    /* Защита: запрещает разбивать строку label между колонками */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* Небольшой зазор между квадратиком и текстом */
.voc-columns input[type="checkbox"] {
    margin-right: 8px;
    vertical-align: middle;  /* Ровняем квадратик по центру текста */
}

/* ==========================================================================
   13. COMPLEX TASKS (Сложные комплексные задания)
   ========================================================================== */

/* Контейнер для сложных комплексных заданий */
.complex-task-list {
    list-style-type: none;
    counter-reset: complex-counter;
    padding-left: 10px;
    margin-bottom: 30px;
}

/* Каждая большая строка задания */
.complex-task-list > li {
    counter-increment: complex-counter;
    position: relative;
    padding-left: 24px;         /* Место слева под номер */
    margin-bottom: 25px;
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 20px;
    align-items: start;
}

/* Стабильная нумерация, привязанная к верхнему краю строки */
.complex-task-list > li::before {
    content: counter(complex-counter) ".";
    position: absolute;
    left: 0;
    top: 2px;                   /* Ваша ювелирная подгонка пикселей */
    width: 20px;
    color: var(--color-text-light);
    font-weight: normal;
}

/* Левый блок: цепочка событий (1), (2)... */
.complex-task-list .scenarios {
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.8;
}

/* Правый блок: итоговый текст с инпутами */
.complex-task-list .story {
    color: var(--color-text-main);
    font-size: 15px;
    line-height: 1.8;
}

/* ==========================================================================
   14. COMPARISON LAYOUT (Парные сравнения предметов)
   ========================================================================== */

/* Включаем двухколоночную сетку для ДЕСКТОПА: левое и правое поле встают в один ряд */
.comparison-layout > li {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Поля делят экран строго пополам */
    gap: 20px;                      /* Зазор между левым и правым инпутом */
    margin-bottom: 25px;            /* Расстояние между пунктами 1, 2, 3... */
    position: relative;
    padding-left: 24px;             /* Место слева под цифру номера */
}

/* Стабильная цифра номера */
.comparison-layout > li::before {
    content: counter(complex-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-text-light);
    font-weight: normal;
}

/* Контейнер "Подсказка + Инпут" */
.comparison-layout .field-group {
    display: flex;
    flex-direction: column;         /* Магия: выстраиваем подсказку строго НАД инпутом */
    align-items: flex-start;
    gap: 6px;                       /* Зазор между текстом подсказки и инпутом */
}

/* Стиль подписи над полем */
.comparison-layout .field-label {
    font-size: 14px;
    color: var(--color-text-muted);  /* Мягкий системный грифельный цвет */
}

.comparison-layout .field-label i {
    color: var(--color-primary);    /* Подсвечиваем маркер времени нашим зеленым */
    font-weight: 500;
}

/* Заставляем текстовые поля ввода занять ВСЮ ширину своей колонки */
.comparison-layout .field-group input[type="text"] {
    width: 100%;                    /* Инпут занимает всё доступное место */
}

/* ==========================================================================
   15. GRAMMAR INFOBOX (Теоретические врезки и карточки-шпаргалки)
   ========================================================================== */

/* Общий контейнер для грамматических врезок и таблиц-шпаргалок */
.grammar-infobox {
    display: flex;
    gap: 40px;                      /* Зазор между левой и правой колонкой */
    margin: 20px 0;
    padding: 18px 20px;
    background-color: var(--color-bg-light); /* Системный мягкий фоновый цвет */
    border-radius: var(--radius-lg);         /* Стандартизированное большое скругление */
    border-left: 4px solid var(--color-primary); /* Наш фирменный зеленый маркер слева */
}

/* Каждая из двух колонок */
.grammar-infobox .infobox-column {
    flex: 1;                        /* Колонки делят пространство строго поровну */
}

/* Заголовки "He stopped:" и "He started:" */
.grammar-infobox h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-main);
}

/* Списки с примерами внутри колонок */
.grammar-infobox ul {
    list-style-type: none;          /* Полностью убираем круглые маркеры-точки */
    padding-left: 16px;             /* Заменяем   на красивый, ровный CSS-отступ */
    margin: 0;
}

/* Строки внутри списков */
.grammar-infobox ul li {
    font-size: 14.5px;
    line-height: 1.7;               /* Комфортный межстрочный интервал */
    color: var(--color-text-muted);
    position: relative;
}

/* Элегантный дефис перед каждой строкой примера */
.grammar-infobox ul li::before {
    content: "—";
    position: absolute;
    left: -16px;                    /* Уводим дефис влево на территорию отступа */
    color: var(--color-text-light);
}

/* ==========================================================================
   ИНТЕГРАЦИЯ TASK-LIST В КАРТОЧКИ ТЕОРИИ (Правка для инфобоксов с цифрами)
   ========================================================================== */
/* Убираем лишний двойной отступ у списков заданий внутри карточек теории */
.grammar-infobox .task-list {
    padding-left: 0;          /* Убираем двойной отступ слева, прижимая цифры к краю */
}

/* Если внутри карточки теории используется готовый список заданий, отключаем дефисы */
.grammar-infobox .task-list li::before {
    content: counter(task-counter) ". "; /* Полностью доверяем генерацию цифры стилю task-list */
    position: static;                    /* Возвращаем цифру в общий поток (отменяем абсолют дефиса) */
    left: auto;                          /* Сбрасываем левое смещение дефиса */
}

/* ==========================================================================
   16. DIARY SCHEDULE TASK (Задания с картинкой-расписанием)
   ========================================================================== */

/* Общая обертка задания */
.diary-task-wrapper {
    display: grid;
    /* ИСПОЛЬЗУЕМ ПЕРЕМЕННУЮ: если она задана в HTML, подставится она, иначе — дефолтные 40% */
    grid-template-columns: var(--img-col-width, 40%) 1fr;
    column-gap: 30px;               /* 30px зазор между колонками */
    row-gap: 0;                     /* 0px зазор между рядами */
    align-items: start;             /* Прижимаем всё к верхнему краю */
    margin-bottom: 0;
}

/* Кнопка отправки: занимает обе колонки на десктопе и идеально центрируется */
.diary-task-wrapper input[type="submit"] {
    grid-column: 1 / -1; /* Магия Grid: растягивается от первой до последней колонки */
    margin-top: 0;       /* Теперь здесь честный ноль. Никаких наложений и лишних дыр! */
}

/* Контейнер для картинки */
.diary-image-box {
    width: 100%;
}

/* Сама картинка-дневник */
.diary-image-box img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    /* Используем наше проверенное решение с паддингом без схлопывания */
    padding: 10px 0;
    transition: filter 0.3s ease;
}

/* Контейнер с вопросами */
.diary-content-box {
    width: 100%;
}

/* ==========================================================================
   16b. MULTI-DIARY LAYOUT (Задания с множественными картинками-сюжетами)
   ========================================================================== */

/* Задаем зазоры между сюжетами на десктопе */
.multidiary-container .diary-task-wrapper {
    margin-bottom: 30px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Обнуляем нижний маргин списка, чтобы он не складывался с отступами линии */
.multidiary-container .diary-task-wrapper .task-list {
    margin-bottom: 0;
}

/* МАГИЯ КОНТЕКСТА: Проводим разделительную линию ПЕРЕД каждым следующим сюжетом */
.multidiary-container .diary-task-wrapper + .diary-task-wrapper {
    border-top: 1px solid var(--color-border-light);
    padding-top: 25px; /* Честный, контролируемый зазор от линии до следующей картинки */
}

/* Ограничиваем отступ у самого последнего блока перед кнопкой */
.multidiary-container .diary-task-wrapper:last-of-type {
    margin-bottom: 30px;
}

/* ==========================================================================
   17. GLOBAL RESPONSIVE DESIGN (Единый блок мобильной адаптации)
   ========================================================================== */

@media (max-width: 435px) {

    /* --- Разделители и декоративные линии --- */
    .line-home {
        max-width: 100%;             /* Позволяем блоку сжиматься на весь экран */
        padding: 0 20px;             /* 20px отступа от краев экрана */
        box-sizing: border-box;      /* Защищает от появления горизонтальной прокрутки */
    }

    .separator-home,
    .separator-voc {
        max-width: 100%;
        width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }

    /* Умный тулбар на мобильных устройствах */
    .toolbar-section {
        flex-wrap: wrap;             /* Разрешаем перенос, если экран критически узкий */
        justify-content: space-between; /* Сохраняем жесткое выравнивание по краям экрана */
        gap: 12px 8px;               /* 12px зазор между строками (если случится перенос), 8px по бокам */
    }

    /* --- Панель навигации и меню --- */
    .navigation-menu {
        gap: 8px;         /* Сжимаем зазор между кнопками и точками на смартфонах */
    }

    /* --- Списки и простые упражнения --- */
    .exercise-list,
    .task-list {
        padding-left: 0;  /* Контент-бокс защищает край, а список прижимается на максимум */
    }

    /* --- Таблица неправильных глаголов --- */
    .verbs-table {
        font-size: 14px;
    }

    .verbs-table .tr > div,
    .verbs-table .tr-head > div {
        padding: 8px 6px;            /* Ужимаем отступы на смартфонах для экономии места */
    }

    /* --- Газетная сетка словаря --- */
    .voc-columns {
        column-count: 2;             /* Идеал для смартфонов: 2 компактные колонки */
        column-gap: 15px;            /* Слегка уменьшаем зазор между ними */
    }

    /* --- Сложные комплексные задания (FOR TASK 15.3) --- */
    .complex-task-list {
        padding-left: 0;             /* Прижимаем к защитной границе контент-бокса */
    }

    .complex-task-list > li {
        grid-template-columns: 1fr;  /* Перестраиваем левый и правый блоки друг под друга */
        gap: 8px;                    /* Уменьшаем зазор между условием и текстом */
        margin-bottom: 30px;         /* Делаем чуть больше зазор между блоками заданий */
    }

    .complex-task-list .scenarios {
        background-color: var(--color-bg-light); /* Мягкий системный фон */
        padding: 6px 10px;
        border-radius: var(--radius-sm);         /* Стандартизированное малое скругление */
        border-left: 2px solid var(--color-border-light); /* Системная тонкая граница */
    }

    /* --- Парные Сравнения предметов (FOR TASK 17.3) --- */
    .comparison-layout {
        padding-left: 0;             /* Прижимаем список к защитной границе контент-бокса */
    }

    .comparison-layout > li {
        grid-template-columns: 1fr;  /* На мобильном поля встают друг под друга */
        gap: 14px;                   /* Зазор между инпутами внутри одного пункта */
        margin-bottom: 35px;         /* Крупный зазор между пунктами списка для читаемости */
    }

    /* --- Карточки грамматической теории (FOR TASK 18.2) --- */
    .grammar-infobox {
        flex-direction: column;   /* Магия: превращаем ряд в вертикальную ленту */
        gap: 10px;                   /* Зазор между верхним и нижним блоками */
        padding: 14px 16px;       /* Чуть уменьшаем внутренние поля для экономии экрана */
    }

    /* --- Трансформация задания с дневником на смартфонах (FOR TASK 19.2) --- */
    .diary-task-wrapper {
        grid-template-columns: 1fr; /* Переключаем в одну колонку */
        column-gap: 15px;           /* 15px зазор между колонками */
        row-gap: 0;                 /* 0px зазор между рядами */
    }

    /* МАГИЯ STICKY: Закрепляем расписание вверху экрана телефона при скролле */
    .diary-task-wrapper .diary-image-box {
        position: sticky;
        top: 0;                     /* Прилипает к самому верху экрана */
        z-index: 10;                /* Картинка будет всегда поверх текста */
        background-color: var(--color-bg-page); /* Белый или темный фон, чтобы текст под ней не просвечивал */
        padding: 5px 0 10px 0;
        border-bottom: 1px solid var(--color-border-light); /* Легкая разделительная линия */
        /* Ограничиваем максимальную высоту картинки на телефоне, чтобы она не сожрала весь экран */
        max-height: 180px;
        display: flex;
        justify-content: center;
    }

    .diary-task-wrapper .diary-image-box img {
        max-height: 100%;           /* Картинка аккуратно впишется в отведенные ей 180px */
        width: auto;                /* Сохраняем пропорции */
        padding: 0;
    }

    .diary-task-wrapper .diary-content-box {
        padding-top: 10px;          /* Небольшой зазор от закрепленной картинки */
    }

    /* ИЗОЛЯЦИЯ ОТ СТИКЕРОВ: Отменяем "залипание" картинок на смартфонах для этого класса */
    .multidiary-container .diary-task-wrapper {
        margin-bottom: 25px;
    }

    .multidiary-container .diary-task-wrapper + .diary-task-wrapper {
        padding-top: 20px;
    }

    .multidiary-container .diary-task-wrapper .diary-image-box {
        position: static !important;
        max-height: none !important;
        border-bottom: none !important;
        padding: 0 0 10px 0 !important;
    }
}