html, body {
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f4f4f4;
    }
	.app-container {

		padding: 10px;
		min-height: 100vh; 
	}
	.content-wrapper {
		display: flex;
		gap: 20px;
	}
    .settings-panel {
        flex: 1;
        min-width: 350px;
        background: #fdfdfd;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 15px 1px #dddddd;
        box-sizing: border-box;
		max-height: calc(1350px); 
		overflow-y: auto;
    }
    #schemeContainer, #calculationContainerContainer {
        flex: 2;
        min-width: auto;
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 15px 1px #dddddd;
        box-sizing: border-box;
    }
    #schemeContainer {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow: auto;
    }
    #calculationContainerContainer {
       flex-basis: 100%;
       margin-top: 20px;
    }
    h2, h3, h4 {
        color: #333;
        font-weight: 700;
        margin-top: 0;
    }
    h2 { font-size: 1.6em; margin-bottom: 25px; }
    h3 { font-size: 1.3em; margin-top: 25px; border-bottom: 1px solid #eee; padding-bottom: 5px;}
    label {
        display: block;
        margin-bottom: 15px;
        color: #555;
    }
    input[type="number"], select {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 12px;
        margin-top: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .section-data {
        display: flex; flex-wrap: wrap; gap: 15px;
        background: #d6e9c6; padding: 15px; border-radius: 6px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1); margin-bottom: 15px; position: relative;
    }

	.toggle-switch-label {
		display: flex;
		align-items: center;
		gap: 10px; /* Расстояние между галочкой и текстом */
		cursor: pointer;

		background-color: #e9f5ff; /* Светло-голубой фон */
		border: 1px solid #b3d7ff; /* Голубая рамка */
		padding: 12px 15px;
		border-radius: 6px;
		margin-bottom: 20px; /* Отступ снизу */
		transition: background-color 0.2s ease-in-out; /* Плавный переход при наведении */
	}

	/* Эффект при наведении курсора */
	.toggle-switch-label:hover {
		background-color: #d9ecff; /* Чуть более темный фон */
	}

	/* Стиль для самого чекбокса */
	#toggleDiameterCalcCheckbox {
		width: auto; /* Отменяем общее правило width: 100% */
		transform: scale(1.3); /* Делаем галочку немного крупнее */
	}
    .section-data h4 { width: 100%; margin: 0 0 10px 0; }
    .section-data label { flex-basis: 100%; }
    .remove-section {
        position: absolute; top: 10px; right: 10px; background: #e74c3c;
        color: #fff; border: none; border-radius: 50%; width: 25px; height: 25px;
        cursor: pointer; font-weight: bold;
    }
    .action-btn {
        color: #fff; border: none; padding: 12px 20px; border-radius: 4px;
        cursor: pointer; width: 100%; font-size: 16px; margin-top: 15px;
    }
    .add-section-btn { background: #3498db; }
    .calculate-btn { background: #2ecc71; }
    .report-btn { background: #007bff; }
    .action-btn:hover, .remove-section:hover { opacity: 0.9; }
    

	/* Контейнер-обертка */
	#newFormContainer {
		background-color: transparent; /* Убираем старый фон */
		border: none;
		box-shadow: none;
		padding: 0;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px; /* Расстояние между карточками */
	}

	/* Стиль для каждой "карточки" с настройками */
	.setting-card {
		background-color: #f7f9fc; /* Спокойный, очень светлый сине-серый фон */
		border: 1px solid #e1e5eb; /* Мягкая серая граница */
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */
		margin-bottom: 20px;
	}

	/* Заголовок внутри карточки */
	.setting-card h5 {
		margin-top: 0;
		margin-bottom: 20px;
		padding-bottom: 10px;
		font-size: 1.1em;
		font-weight: 600;
		color: #2c3e50; /* Профессиональный темно-синий цвет */
		border-bottom: 1px solid #e1e5eb; /* Разделительная линия */
	}

	/* Группа полей ввода внутри карточки */
	.setting-card .input-group {
		display: flex;
		flex-direction: column;
		gap: 15px; /* Расстояние между label */
	}

	/* Вложенные настройки (под-группы) */
	.setting-card .sub-group {
		margin-top: 15px;
		padding-left: 15px;
		border-left: 2px solid #a0bcdf; /* Акцентная синяя линия */
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	/* Стилизация информационных блоков с формулами */
	#hypothesisExplanation, #gExplanation {
		font-size: 13px;
		color: #333;
		margin-top: 8px;
		background-color: #e6f4ff; /* Приятный светло-голубой фон для подсказок */
		border: 1px solid #b3d7ff;
		padding: 10px;
		border-radius: 4px;
	}

	.settings-group {
		background-color: #e9f5ff; /* Светло-голубой фон */
		border: 1px solid #b3d7ff; /* Голубая рамка */
		padding: 20px;
		border-radius: 8px;
		margin-bottom: 20px; /* Отступ от следующего элемента */
	}

	.settings-group h4 {
		margin-top: 0;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #d9ecff; /* Светлая линия-разделитель */
		color: #333;
	}

	.calculate-button-container {
		padding: 20px;
		padding-top: 0;
		text-align: center;
		background-color: #f4f4f4; /* Тот же фон, что и у body */
	}

	/* Применяем стили к кнопке внутри нового контейнера */
	.calculate-button-container .calculate-btn {
		/* Отменяем ширину 100% от класса .action-btn */
		width: auto; 
		/* Делаем кнопку крупнее и заметнее, как в файле 30.txt */
		font-size: 18px;
		padding: 12px 40px;
	}

	.header-description-container {
		background-color: #ffffff;
		padding: 20px 30px;
		margin: 10px; /* Отступы вокруг блока */
		border-radius: 8px;
		box-shadow: 0 0 15px 1px #dddddd;
		border: 1px solid #ddd;
		box-sizing: border-box;
	}
	.header-description-container h2 {
		font-size: 24px;
		color: #2c3e50;
		margin-top: 0;
		margin-bottom: 10px;
		border-bottom: 2px solid #ecf0f1;
		padding-bottom: 10px;
	}
	.header-description-container h3 {
		font-size: 18px;
		color: #34495e;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.header-description-container p {
		font-size: 15px;
		line-height: 1.6;
		color: #333;
	}
	.header-description-container ul {
		list-style-type: '✓  '; /* Симпатичный маркер списка */
		padding-left: 20px;
		margin: 10px 0 0 0;
	}
	.header-description-container li {
		margin-bottom: 8px;
		padding-left: 5px;
		font-size: 15px;
		color: #333;
	}

	.toggle-switch-label {
		/* Изменяем направление, чтобы текст был под галочкой */
		flex-direction: column;
		align-items: flex-start; /* Выравниваем все по левому краю */
		gap: 5px; /* Небольшой отступ между основной строкой и текстом <small> */
	}

	.toggle-switch-header {
		display: flex;
		align-items: center;
		gap: 10px; /* Расстояние между галочкой, текстом и иконкой */
	}

	/* Стили для иконки-кнопки, как в файле 30.txt */
	.info-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #007bff;
		color: white;
		text-align: center;
		font-weight: bold;
		line-height: 20px; /* Вертикальное центрирование текста */
		cursor: pointer;
		user-select: none; /* Запрещаем выделение текста "?" */
	}
	.info-icon:hover {
		opacity: 0.85;
	}

	.modal-overlay {
		display: none; /* По умолчанию окно скрыто */
		position: fixed; /* Поверх всего контента */
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */

		/* Используем flexbox для идеального центрирования */
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		background-color: #fff;
		padding: 20px 30px;
		border-radius: 8px;
		box-shadow: 0 5px 15px rgba(0,0,0,0.3);
		position: relative;
		width: 90%;
		max-width: 600px; /* Ограничиваем максимальную ширину на больших экранах */
		max-height: 80vh; /* Ограничиваем высоту, чтобы помещалось на экране */
		overflow-y: auto; /* Добавляем прокрутку, если таблица не помещается */
	}

	.modal-close {
		position: absolute;
		top: 10px;
		right: 20px;
		color: #aaa;
		font-size: 28px;
		font-weight: bold;
		cursor: pointer;
	}
	.modal-close:hover,
	.modal-close:focus {
		color: black;
	}

	.error-message {
		color: #c7254e; /* Красный цвет для ошибки */
		background-color: #f9f2f4; /* Очень светлый розовый фон */
		border: 1px solid #e5b3be;
		border-radius: 4px;
		padding: 10px 15px;
		margin-top: 15px;
		display: none; /* По умолчанию сообщение скрыто */
		text-align: left; /* Выравнивание текста по левому краю для лучшей читаемости */
	}

	#thetaLockExplanation {
		color: #c0392b; /* Приглушенный красный цвет для привлечения внимания */
		font-style: italic;
		font-size: 12px;
		margin-top: 5px;
		display: block; /* Чтобы текст был на новой строке */
		line-height: 1.4;
	}

	#calculateBtn:disabled,
	#calculateBtn:disabled:hover { 

		/* 1. Меняем цвет на менее активный, серый */
		background-color: #bdc3c7; /* Нейтральный серый цвет */

		/* 2. Меняем курсор, чтобы показать, что кнопка неактивна */
		cursor: not-allowed; /* Стандартная иконка "запрещено" */

		/* 3. Уменьшаем прозрачность для эффекта "выцветания" */
		opacity: 0.65;
	}

@media (max-width: 768px) {
    .app-container {
        display: block; 
    }

    .content-wrapper {
        flex-direction: column;
        height: auto; 
    }
    
    #schemeContainer {
        order: 1; 
        flex: none; /* <-- ВОТ КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ: Отменяем растягивание */

        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 5;
        height: 50vh; /* <-- Теперь это свойство будет работать! */
        background: #fff;
        box-sizing: border-box;
        width: 100%;
        overflow-x: auto;
        border-bottom: 2px solid #ccc;
    }

    .settings-panel {
        order: 2;
        flex: none; /* <-- Также сбрасываем flex и для панели для консистентности */
    }

    /* 1. Превращаем <body> в flex-контейнер на мобильных */
    body {
        display: flex;
        flex-direction: column;
    }

    /* 2. Основной блок приложения будет первым */
    .app-container {
        display: block; 
        order: 1; /* <-- Устанавливаем порядок */
    }

    /* 3. Блок с описанием будет вторым (в самом низу) */
    .header-description-container {
        order: 2; /* <-- Устанавливаем порядок */
    }
}

/* Контейнер для промо-блока */
.promo-block-alt {
    text-align: center;
    margin-top: 30px;
    padding: 25px 20px;
    background-color: #eaf6ff; /* Светло-голубой фон */
    border: 1px solid #c0d9ec; /* Слегка затемненная синяя рамка */
    border-radius: 12px; /* Более скругленные углы, как на картинке */
}

/* Стили для текста внутри промо-блока */
.promo-block-alt p {
    color: #34495e;
    font-size: 16px; /* Стандартный размер текста */
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* Делаем текст в скобках жирным */
.promo-block-alt p strong {
    font-weight: 600;
}

/* Стили для кнопки-ссылки (стиль "ghost button") */
.promo-button-alt {
    display: inline-block;
    padding: 10px 24px;
    background-color: #ffffff; /* Белый фон */
    color: #3498db; /* Синий текст */
    border: 1px solid #3498db; /* Синяя рамка */
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.2s ease-in-out; /* Плавный переход для всех свойств */
}

/* Эффект при наведении на кнопку */
.promo-button-alt:hover {
    background-color: #f8f9fa; /* Слегка серый фон */
    color: #2980b9; /* Более темный синий текст */
    border-color: #2980b9; /* Более темная синяя рамка */
}