/* Стили остаются такими же, как в v3/v4 */
/* Общие стили для страницы */
body {
    display: block; /* Убрали flex, чтобы элементы шли друг под другом */
    margin: 0;
    min-height: 100vh;
}

/* Контейнер для верхней части: панель управления + первая схема */
.main-content-top {
    display: flex; /* Панель и первая схема рядом */
    margin-bottom: 20px; /* Отступ перед секциями расчетов */
}

/* Панель управления */
.controls-container {
    width: 500px;
    margin-right: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    max-height: calc(100vh - 40px); /* Высота панели управления */
    flex-shrink: 0; /* Панель не будет сжиматься */
}

.controls-container h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #2c3e50;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.control-group {
    margin-bottom: 20px;
}

.control-group h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #34495e;
    font-size: 1.1em;
}

.control-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.control-item label {
    flex-basis: 180px;  /* Оптимальная ширина для большинства меток */
    flex-shrink: 0;     /* Запрещаем метке сжиматься для ровного выравнивания */
    margin-right: 10px;
    font-size: 0.95em;
    color: #555;
    word-break: break-word; /* Оставляем перенос слов на всякий случай */
}

.control-item input[type="number"],
.control-item input[type="text"],
.control-item select {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out;

    /* --- КЛЮЧЕВЫЕ ДОБАВЛЕНИЯ --- */
    min-width: 0;       /* Позволяет полю ввода сжиматься меньше его содержимого */
    flex-basis: 0;      /* Улучшает работу flex-grow, заставляя поле занимать всё ОСТАВШЕЕСЯ место */
}

.control-item input[type="number"]:focus,
.control-item input[type="text"]:focus,
.control-item select:focus {
    border-color: #3498db;
    outline: none;
}

/* Контейнер для первой схемы (рядом с панелью управления) */
.canvases-container-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Занимает оставшееся место */
}

/* Общая обертка для каждой схемы или секции с расчетами */
.canvas-wrapper {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 15px;
    box-sizing: border-box; /* Важно для .full-width-section */
}

.canvas-wrapper h3 { /* Заголовки H3 для основных секций (Схема 1, Расчеты) */
    margin-top: 0;
    margin-bottom: 15px; /* Увеличил немного отступ */
    color: #2c3e50;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea; /* Слегка ослабил линию */
}

/* Стиль для самого элемента canvas */
canvas {
    background-color: #fdfdfd;
    display: block; /* Чтобы занимал всю ширину родителя и не было лишних отступов снизу */
    max-width: 100%; /* Чтобы канвас не вылезал за пределы родителя, если он слишком широкий */
    height: auto;   /* Позволяет сохранять пропорции, если ширина ограничивается max-width */
}

/* Обертки для секций с расчетами (6 и 7) */
.calculations-section-wrapper {
    width: 100%;
    margin-bottom: 20px; /* Отступ между секциями 6 и 7 */
}

/* Класс для секций, которые должны занимать всю ширину */
.canvas-wrapper.full-width-section {
    width: 100%;
}

/* Кнопки */
#exportButton
 {
    padding: 10px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
    width: 100%; /* Кнопка экспорта тоже на всю ширину панели */
    margin-top: 10px;
    margin-bottom: 10px;
}



#exportButton:hover {
    background-color: #2980b9;
}

/* Контейнеры для вывода уравнений и объяснений */
.equations-output {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fdfdfd;
    font-size: 1.1em;
    line-height: 2.2;
    min-height: 100px;
    overflow-x: auto; /* Горизонтальная прокрутка, если формулы слишком широкие */
}

/* Стили для вложенных канвасов внутри секций расчетов */
.nested-canvas-wrapper {
    margin-top: 15px;    /* Отступ сверху от заголовка секции или предыдущего элемента */
    margin-bottom: 20px; /* Отступ снизу перед следующим элементом или выводом MathJax */
    padding: 10px;
    background-color: #f8f9fa; /* Слегка другой фон для визуального отделения */
    border: 1px solid #e9ecef;
    border-radius: 6px; /* Чуть меньше радиус */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Легкая тень */
}

.nested-canvas-wrapper h4 { /* Заголовки H4 для вложенных схем */
    margin-top: 0;
    margin-bottom: 10px;
    color: #495057; /* Менее контрастный цвет */
    font-size: 1.05em;
    border-bottom: 1px dotted #ced4da;
    padding-bottom: 6px;
}

/* Внутри вашего существующего <style> */
.controls-container button { /* Общий стиль для кнопок в панели, если еще не задан */
    padding: 10px 15px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
    /* width: 100%; /* Убрал, так как кнопки теперь в flex-контейнере */
    margin-top: 5px; /* Небольшой отступ сверху, если нужно */
    margin-bottom: 5px;
}

.controls-container button:hover {
    background-color: #2980b9;
}

.controls-container button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

/* Стили для контейнера с двумя кнопками */
.export-buttons-container {
    display: flex;
    justify-content: space-between; /* Распределяет кнопки по краям с пространством между ними */
    gap: 10px; /* Пространство между кнопками */
    margin-top: 10px;
}

.export-buttons-container button {
    flex-grow: 1; /* Кнопки будут растягиваться, чтобы занять доступное место */
    flex-basis: 0; /* Позволяет flex-grow работать корректно */
    /* Можно задать flex-basis: 48%; если нужно фиксированное разделение с gap */
    font-size: 0.9em; /* Можно сделать шрифт чуть меньше, если текст не влезает */
}


/* ===================================================== */
/* НОВЫЕ СТИЛИ ДЛЯ БЛОКА С УСЛОВИЕМ ЗАДАЧИ */
/* ===================================================== */
.task-description-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 25px 35px;
    margin-bottom: 25px;
    border-left: 5px solid #3498db; /* Цветовой акцент */
}

.task-description-container .task-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}

.task-description-container .task-header svg {
    color: #3498db; /* Цвет иконки */
    flex-shrink: 0;
}

.task-description-container .task-header h2 {
    margin: 0;
    padding: 0;
    border: none;
    color: #2c3e50;
    text-align: left;
}

.task-description-container p {
    font-size: 1.05em;
    line-height: 1.7;
    color: #444;
}

/* Стилизация <strong> для соответствия другим выделениям */
.task-description-container p strong {
    color: #c0392b; 
    font-weight: 600;
}

/* Заголовок для списка целей */
.task-description-container .goals-header {
    color: #34495e;
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Стилизация нумерованного списка */
.goals-list {
    list-style: none; /* Убираем стандартные маркеры */
    padding-left: 0;
    counter-reset: goals-counter; /* Инициализируем счетчик */
}

.goals-list li {
    position: relative;
    padding-left: 45px; /* Место для кастомного номера */
    margin-bottom: 15px;
    font-size: 1.05em;
    line-height: 1.6;
    counter-increment: goals-counter; /* Увеличиваем счетчик для каждого элемента */
}

.goals-list li::before {
    content: counter(goals-counter); /* Отображаем значение счетчика */
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #3498db; /* Основной синий цвет */
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    font-family: Arial, sans-serif;
}

/* Блок с инструкциями */
.instructions-box {
    margin-top: 30px;
    padding: 15px 20px;
    background-color: #f8f9fa; /* Светло-серый фон */
    border: 1px solid #e9ecef;
    border-radius: 6px;
}

.instructions-box h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #495057; /* Темно-серый цвет текста */
    font-size: 1.1em;
}

.instructions-box h4 svg {
    color: #495057; /* Цвет иконки в тон тексту */
    flex-shrink: 0;
}

.instructions-box p {
    font-size: 1em;
    color: #555;
    margin-bottom: 5px;
}

/* ПОЛНОСТЬЮ ЗАМЕНИТЕ СТАРЫЕ СТИЛИ НА ЭТОТ БЛОК */

/* 1. Контейнер, который будет центрировать наши кнопки */
.calculation-buttons-container {
    display: flex;          /* Включаем flex-режим */
    justify-content: center;/* Центрируем кнопки внутри контейнера */
    gap: 15px;              /* Расстояние между кнопками */
    margin-bottom: 20px;    /* Отступ снизу, как и был */
}

/* 2. Общие стили для ОБЕИХ кнопок, чтобы они выглядели и вели себя одинаково */
#showEquationsButton,
#showPreviewButton {
    /* Стили внешнего вида */
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
}

/* 3. Общие стили для состояния наведения */
#showEquationsButton:hover,
#showPreviewButton:hover {
    background-color: #2980b9;
}

/* 4. Общие стили для неактивного состояния */
#showEquationsButton:disabled,
#showPreviewButton:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    opacity: 0.7;
}
/* Стили для модального окна (popup) */
.modal-overlay {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; /* Для центрирования */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s;
    max-height: 85vh; 
    display: flex;
    flex-direction: column;
}


@keyframes fadeIn {
    from {opacity: 0; transform: scale(0.95);}
    to {opacity: 1; transform: scale(1);}
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5em;
}

.modal-close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: #000;
    text-decoration: none;
}

.modal-body {
    line-height: 2.2; /* Улучшаем читаемость формул */
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px;
}

/* СТИЛИ ДЛЯ ПРЕДУПРЕЖДЕНИЯ О НЕДОСТУПНОСТИ РАСЧЕТА */
#ultimateLoadWarning {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #fff8e1; /* Светло-желтый фон */
    border-left: 4px solid #f39c12; /* Оранжевый акцент слева */
    border-radius: 4px;
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
}

/* ===================================================== */
/* НОВЫЕ СТИЛИ ДЛЯ АДАПТИВНОГО ИНТЕРФЕЙСА             */
/* ===================================================== */
@media (max-width: 1024px) {
    /* Эти стили сработают только на экранах шириной 1024px или меньше */

    /* 1. Главный контейнер теперь будет располагать элементы друг под другом */
    .main-content-top {
        flex-direction: column;
    }

    /* 2. САМОЕ ГЛАВНОЕ: Меняем порядок элементов.
       Блок с canvas (который был вторым) теперь станет первым. */
    .canvases-container-column {
        order: -1; /* Это заставит его "перепрыгнуть" в начало */
    }

    /* 3. Панель управления теперь занимает всю ширину и не имеет лишних отступов */
    .controls-container {
        width: 100%;             /* Занимает всю доступную ширину */
        box-sizing: border-box;  /* Важно, чтобы padding не ломал ширину 100% */
        margin-right: 0;         /* Убираем правый отступ */
        margin-bottom: 20px;     /* Добавляем отступ снизу для красоты */
        max-height: none;        /* Позволяем панели быть любой высоты */
		margin-top: 20px;
    }

	/* 4. Делаем контейнер со схемой "липким" при прокрутке */
	.canvases-container-column {
		position: -webkit-sticky; /* Для совместимости со старыми Safari */
		position: sticky;
		top: 10px; /* Небольшой отступ от верха экрана, чтобы схема не прилипала вплотную */
		z-index: 100; /* Убедимся, что схема будет поверх других элементов при прокрутке */

		/* Важно: добавим фон, чтобы контент панели управления не "просвечивал"
		сквозь отступы схемы при прокрутке под ней.
		Используем тот же фон, что и у body. */
		background-color: #f4f7f6;
		padding-top: 1px; /* Небольшой трюк, чтобы избежать проблем с "прыжком" sticky-элемента */
        max-height: 60vh; /* Ограничиваем высоту: не более 60% высоты экрана */
        overflow-y: auto; /* Добавляем прокрутку, если сам холст окажется выше */
	}

	.canvas-wrapper {
		margin-bottom: 0px ;
	}
}

/* 1. Стили по умолчанию (для десктопов и планшетов в ширину) */
.detail-canvases-container {
    display: flex;
    justify-content: space-around; /* Распределяем элементы */
    flex-wrap: wrap;               /* Разрешаем перенос, если что */
    gap: 20px;                     /* Пространство между блоками */
    margin-top: 20px;              /* Небольшой отступ сверху */
}

.detail-canvas-item {
    flex: 1;                /* Элементы будут стараться занять равное место */
    min-width: 45%;         /* Минимальная ширина, чтобы они стояли в 2 колонки */
    box-sizing: border-box; /* Чтобы padding не ломал ширину */
}

/* 2. Адаптивные стили (для телефонов) */
/* Эти стили сработают только на экранах шириной 768px или меньше */
@media (max-width: 768px) {
    .detail-canvases-container {
        /* КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: меняем направление с горизонтального на вертикальное */
        flex-direction: column;
    }

    .detail-canvas-item {
        /* Заставляем каждый элемент занимать всю доступную ширину */
        width: 100%;
        min-width: 100%;
    }
}