/* 1. Современные переменные и базовые стили */
    :root {
        --primary-color: #2c5282; /* Более глубокий синий */
        --primary-hover: #2a4365;
        --secondary-color: #f7fafc; /* Светло-серый фон */
        --accent-color: #3182ce; /* Яркий синий для акцентов */
        --danger-color: #e53e3e;
        --danger-hover: #c53030;
        --text-color: #2d3748;
        --text-light-color: #4a5568;
        --background-color: #ffffff;
        --border-color: #e2e8f0;
        --shadow-color: rgba(0, 0, 0, 0.05);
        --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
        font-family: var(--font-family);
        background-color: var(--secondary-color);
        color: var(--text-color);
        line-height: 1.6;
    }

    /* 2. Общий контейнер приложения */
    .app-container {
        width: 100%;
        margin: 0 auto;
        padding: 20px;
    }

    /*
    ============================================
    СТИЛИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (ПО УМОЛЧАНИЮ)
    ============================================
    */
    .content-wrapper {
        display: flex;
        flex-direction: column; /* Все блоки друг под другом */
    }

    #canvasContainer {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
        height: 60vh; /* 60% высоты экрана */
        width: 100%;
        background-color: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 4px 12px var(--shadow-color);
        z-index: 10;
        margin-bottom: 20px; /* Отступ до сайдбара */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    #sidebar {
        width: 100%;
        background-color: var(--background-color);
        padding: 30px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 12px var(--shadow-color);
    }
    
    /* 
    Ключевой момент для требования №2:
    Холст (`#canvasContainer`) является "липким" внутри своего родителя (`.content-wrapper`).
    Он будет оставаться на экране, пока вы прокручиваете его "соседа" - сайдбар.
    Как только вы прокрутите до конца `.content-wrapper` (т.е. пролистаете весь сайдбар),
    холст начнет уходить вверх вместе с ним, не залезая на отчет.
    */

    /*
    ============================================
    СТИЛИ ДЛЯ КОМПЬЮТЕРОВ (ЭКРАНЫ ШИРЕ 1024px)
    ============================================
    */
    @media (min-width: 1024px) {
        .content-wrapper {
            flex-direction: row; /* Сайдбар и холст в одну строку */
            align-items: flex-start; /* Выравнивание по верху */
            gap: 20px; /* Расстояние между колонками */
        }

        #sidebar {
            flex: 0 0 400px; /* Сайдбар: не сжимается, не растет, ширина 400px */
            order: 1; /* Сайдбар будет первым (слева) */
        }
        
        #canvasContainer {
            flex: 1; /* Холст занимает все оставшееся место */
            order: 2; /* Холст будет вторым (справа) */
            height: 95vh; /* На десктопе можно сделать повыше */
            /* `position: sticky` уже задан, и он отлично работает и на десктопе,
               позволяя видеть схему при прокрутке длинного отчета. */
        }
    }

    /* --- Общие стили для элементов, не меняющиеся от размера экрана --- */

    canvas { max-width: 100%; max-height: 100%; object-fit: contain; }

    .calculate-button-container {
        display: flex;
        justify-content: center;
        margin: 30px 0;
    }
    #calculateButton {
        padding: 15px 40px; font-size: 18px; font-weight: bold;
        background-color: var(--primary-color); color: #fff; border: none; border-radius: 8px;
        cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 2px 8px rgba(44, 82, 130, 0.4);
    }
    #calculateButton:hover { background-color: var(--primary-hover); transform: translateY(-2px); }

	#resultContainer {
		display: none; 
		width: 100%;
		background-color: var(--background-color);
		padding: 30px;
		border-radius: 12px;
		border: 1px solid var(--border-color);
		box-shadow: 0 4px 12px var(--shadow-color);
		min-height: 200px;
	}
    #result { margin-top: 20px; overflow-x: auto; margin-bottom: 30px; padding-bottom: 30px;}

    h2 { text-align: center; margin-bottom: 25px; color: var(--text-color); font-size: 24px; }
    label { display: block; margin-bottom: 8px; color: var(--text-light-color); font-weight: 500; font-size: 14px; }
    input, select {
        width: 100%; padding: 10px 12px; margin-block: 4px; border: 1px solid var(--border-color);
        border-radius: 8px; font-size: 16px; background-color: #fff;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    input:focus, select:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3); }

    .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
    .input-group { display: flex; flex-direction: column; }
    .force-input-group {
        display: none; margin-bottom: 20px; padding: 20px; border: 1px dashed var(--border-color);
        border-radius: 8px; background-color: var(--secondary-color);
    }
    .force-input-group.active { display: block; }
    
    .delete-button {
        background-color: transparent; border: 1px solid var(--danger-color); color: var(--danger-color);
        padding: 5px 8px; border-radius: 50%; cursor: pointer; font-size: 14px;
        line-height: 1; margin-left: 10px; align-self: center; transition: all 0.3s ease;
    }
    .delete-button:hover { background-color: var(--danger-color); color: #fff; }

    .flex-row { display: flex; align-items: center; margin-bottom: 10px; }
    .flex-row label { flex: 0.4; margin-bottom: 0; }
    .flex-row input { flex: 1; margin-block: 0; }
    
    .info-icon {
        margin-left: 10px; background-color: var(--accent-color); color: #fff; border-radius: 50%;
        width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 14px; position: relative;
    }
    .tooltip {
        display: none; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.85); color: #fff; padding: 10px 15px; border-radius: 8px;
        font-size: 12px; width: 220px; text-align: center; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .tooltip.active { display: block; }
    
    .error-message {
        color: var(--danger-color); margin-bottom: 10px; font-weight: bold; text-align: center;
        padding: 10px; background-color: rgba(229, 62, 62, 0.1); border: 1px solid var(--danger-color);
        border-radius: 8px;
    }

	/* Утилита для визуального скрытия элементов */
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	/* Стили для нового блока выбора */
	.full-width-group {
		grid-column: 1 / -1; /* Заставляет этот блок занимать всю ширину грида */
		margin-bottom: 15px;
	}

	.icon-selector-grid {
		display: grid;
		/* Адаптивное количество колонок: 4 для нагрузок, 3 для балок */
		grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
		gap: 15px;
		margin-top: 5px;
	}

	/* Стиль для каждой отдельной иконки-кнопки */
	.icon-option {
		border: 2px solid var(--border-color);
		border-radius: 8px;
		padding: 15px 10px;
		text-align: center;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
	}

	.icon-option svg {
		width: 100%;
		height: 30px; /* Фиксированная высота для всех иконок */
		margin-bottom: 8px;
		color: var(--text-light-color);
		transition: color 0.2s ease-in-out;
	}

	.icon-option span {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-color);
		display: block; /* Гарантирует, что текст будет на новой строке */
	}

	.icon-option:hover {
		border-color: var(--accent-color);
		background-color: #f0f8ff;
	}

	/* Стиль для активного (выбранного) элемента */
	.icon-option.active {
		border-color: var(--accent-color);
		box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.3);
		background-color: #eaf5ff;
	}

	.icon-option.active svg {
		color: var(--accent-color);
	}

	#calculateButton.disabled {
		background-color: #a0aec0; /* Тусклый серый цвет */
		cursor: not-allowed; /* Курсор "запрещено" */
		box-shadow: none; /* Убираем тень */
		transform: none; /* Убираем эффект "приподнимания" */
	}

	/* Стиль для контейнера с сообщением об ошибке */
	.validation-message {
		color: var(--danger-color);
		text-align: center;
		margin-top: -15px; /* Располагаем ближе к кнопке */
		margin-bottom: 20px;
		font-weight: 500;
		display: none; /* По умолчанию скрыто */
	}


	/* Стили для контейнера кнопок и новой кнопки */
	.calculate-button-container {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}
	#quickCalculateButton {
		padding: 15px 30px; font-size: 16px; font-weight: bold;
		background-color: #fff; color: var(--primary-color);
		border: 2px solid var(--primary-color); border-radius: 8px;
		cursor: pointer; transition: all 0.3s ease;
	}
	#quickCalculateButton:hover {
		background-color: #eaf5ff; transform: translateY(-2px);
	}

    #сохранить {
        padding: 15px 40px; font-size: 18px; font-weight: bold;
        background-color: #2c5282; /* Цвет как у кнопки "Рассчитать" */
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 2px 8px rgba(44, 82, 130, 0.4);
    }
    #сохранить:hover {
        background-color: #2a4365;
        transform: translateY(-2px);
    }

    .sticky-save-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        padding: 15px 25px;
        font-size: 16px;
        font-weight: bold;
        background-color: #2c5282;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 1000;
    }

	/* Общие стили для нового попапа */
	.modal-overlay {
		position: fixed; top: 0; left: 0; width: 100%; height: 100%;
		background-color: rgba(45, 55, 72, 0.6);
		display: flex; justify-content: center; align-items: center;
		z-index: 1000; opacity: 0; visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.modal-overlay.active { opacity: 1; visibility: visible; }
	.modal-content {
		background-color: var(--background-color); padding: 25px 30px;
		border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
		transform: scale(0.95); transition: transform 0.3s ease;
	}
	.modal-overlay.active .modal-content { transform: scale(1); }
	#quickResultContent { max-width: 550px; display: flex; flex-direction: column; }
	#quickResultBody { font-size: 1.1em; flex-grow: 1; }
	#quickResultBody h4 { margin-bottom: 15px; color: var(--text-color); }
	#quickResultBody p { font-size: 1.2em; line-height: 1.8; }
	.quick-result-prompt {
		margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color);
		text-align: center; font-size: 0.9em; color: var(--text-light-color);
	}
	.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
	.modal-header h2 { margin: 0; text-align: left; font-size: 22px; }
	.modal-close-btn { background: transparent; border: none; font-size: 32px; color: var(--text-light-color); cursor: pointer; line-height: 1; }


/* Стили для выделенного блока с единицами измерения */
	.units-block {
		background-color: #f0f5fa; /* Приятный светло-голубой фон */
		border: 1px solid #cce1f7;  /* Слегка затемненная рамка в тон */
		border-radius: 8px;         /* Скругление углов, как у других элементов */
		padding: 20px 15px 15px 15px; /* Внутренние отступы для воздуха */
		margin-top: 15px;           /* Внешний отступ сверху */
		margin-bottom: 25px;        /* Увеличенный отступ снизу для заметки */
	}

	/* Стили для текстовой заметки под блоком */
	.units-note {
		display: flex;       /* Включаем flexbox для выравнивания иконки и текста */
		align-items: flex-start; /* Выравниваем по верху */
		gap: 12px;           /* Расстояние между иконкой и текстом */

		background-color: #f7fafc; /* Легкий фон, как у всего сайдбара */
		color: var(--text-light-color); /* Слегка приглушенный цвет текста */
		font-size: 13px;        /* Немного уменьшенный шрифт */
		line-height: 1.5;

		border-left: 3px solid var(--accent-color); /* Акцентная полоска слева */
		padding: 12px;
		border-radius: 0 6px 6px 0; /* Небольшое скругление */

		/* Придвигаем заметку чуть ближе к блоку, создавая визуальную связь */
		margin-top: -15px; 
	}

	/* Стили для иконки в заметке */
	.units-note .fas {
		color: var(--accent-color); /* Цвет иконки из вашей палитры */
		font-size: 18px;            /* Немного увеличим иконку */
		margin-top: 2px;            /* Небольшая коррекция положения по вертикали */
	}


	/* Стили для внешнего, полноэкранного контейнера */
	.intro-container {
		width: auto;
		background-color: var(--background-color); /* Белый фон */
		padding: 30px; /* Только вертикальные отступы */
		margin: 25px; /* Отступ до основного контента */
		border-bottom: 1px solid var(--border-color); /* Тонкая линия-разделитель */
		border: 1px solid var(--border-color);
		border-radius: 12px;
		box-shadow: 0 4px 12px var(--shadow-color);
	}

	/* Стили для внутреннего контейнера, который центрирует контент */
	.intro-content-wrapper {
		display: flex;
		align-items: center;
		gap: 25px;

		/* Эти три строки центрируют блок и ограничивают его ширину на больших экранах */
		width: 100%;
		max-width: 1280px; /* Такая же ширина, как у app-container, или по вашему выбору */
		margin: 0 auto;
		padding: 0 20px; /* Отступы по бокам для мобильных устройств */
	}

	/* Стили для иконки и текста остаются прежними */
	.intro-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
		background-color: #eaf5ff;
		border-radius: 50%;
	}

	.intro-icon .fas {
		font-size: 28px;
		color: var(--primary-color);
	}

	.intro-text h2 {
		margin: 0 0 8px 0;
		font-size: 22px;
		color: var(--primary-color);
		font-weight: 600;
		text-align: left;
	}

	.intro-text p {
		margin: 0;
		font-size: 15px;
		line-height: 1.6;
		color: var(--text-light-color);
	}

	/* Адаптивность теперь применяется к внутреннему контейнеру */
	@media (max-width: 768px) {
		.intro-content-wrapper {
			flex-direction: column;
			text-align: center;
		}
		.intro-icon {
			margin-bottom: 15px;
		}
		.intro-text h2 {
			font-size: 20px;
		}
	}

	/* 1. Базовый класс для всех секций (только отступ снизу) */
	.input-section {
		margin-bottom: 25px;
	}

	/* 2. Стиль "Карточка" для интерактивных блоков с иконками */
	.input-section--card {
		background-color: var(--background-color); /* Чистый белый фон */
		border: 1px solid var(--border-color); /* Стандартная серая рамка */
		border-radius: 12px; /* Увеличенное скругление для солидности */
		padding: 20px 15px;
		box-shadow: 0 2px 4px var(--shadow-color); /* Легкая тень для объема */
	}

	/* 3. Стиль "Разделитель" для блоков с вводом данных */
	.input-section--separator {
		/* Убираем фон, боковые рамки и скругления */
		background-color: transparent;
		border: none;
		border-radius: 0;
		/* Добавляем только рамки сверху и снизу */
		border-top: 1px solid var(--border-color);
		border-bottom: 1px solid var(--border-color);
		padding: 20px 0; /* Только вертикальные отступы */
	}

	input.input-error, select.input-error {
		border-color: var(--danger-color); /* Используем ваш цвет для ошибок */
		box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.3); /* Тень, похожая на фокус, но красная */
	}