/* --- Стили полностью взяты из файла 20.txt --- */
		html, body {
			height: 100%;
			margin: 0;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background-color: #fff;
		}

		.app-container {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		.content-wrapper {
			display: flex;
			height: 950px;
			padding: 20px;
		}
		
		.settings-panel {
			flex: 0 0 35%;
			padding: 20px;
			overflow-y: auto;
			background: #fdfdfd;
			border-right: 1px solid #ddd;
			box-sizing: border-box;
			order: 1; 
			margin: 10px;
			border-radius: 8px;
			box-shadow: 0 0 15px 1px #dddddd;
		}
		
		#schemeContainer {
			flex: 1;
			background: #fff;
			padding: 20px;
			overflow: auto;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			order: 2;
			margin: 10px;
			border-radius: 8px;
			box-shadow: 0 0 15px 1px #dddddd;
		}


		#calculationContainerContainer {
			display: none; /* Изменено с none, чтобы было видно по умолчанию */
			width: auto;
			background: #fdfdfd;
			padding: 20px;
			box-shadow: 0 0 15px 1px #dddddd;
			box-sizing: border-box;
			margin: 30px;
			border-radius: 8px;
		}
		
		/* --- Стили для мобильных устройств --- */
		@media (max-width: 768px) {
			.app-container {
				min-height: initial;
			}
			.content-wrapper {
				flex-direction: column;
				height: auto;
			}

			.settings-panel,
			#schemeContainer {
				order: initial;
				flex-basis: auto;
			}
			.settings-panel {
				border-right: none;
			}

			#schemeContainer {
				position: -webkit-sticky;
				position: sticky;
				top: 0;
				z-index: 5;
				height: 60vh; 
				width: 100%;
				box-sizing: border-box;
				border-bottom: 2px solid #ccc;
				background: #fff;
				overflow-x: auto; 
			}
		}

		h2 {
			text-align: left; color: #333; font-weight: 700; font-size: 1.5em; margin-bottom: 20px;
		}
		h3 {
			font-size: 18px;
			color: #34495e;
			margin-top: 20px;
			margin-bottom: 10px;
			border-bottom: 2px solid #ecf0f1;
			padding-bottom: 5px;
		}
		.input-block {
			background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 20px;
		}
		.input-block label {
			display: block; margin-bottom: 10px; color: #555;
		}
		.input-block input[type="number"], .input-block select {
			width: 90%; padding: 8px 12px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px;
		}
		.sections-container {
			margin-top: 20px;
		}
		.section-data {
			display: flex; flex-wrap: wrap; align-items: center; 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;
		}
		.section-data label {
			flex: 1; min-width: 150px;
		}
		.section-data input[type="number"], .section-data select {
			width: 100%;
			box-sizing: border-box;
			padding: 8px 12px;
			margin-top: 4px;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		.section-data h4 {
			margin-top: 0; color: #333; margin: 0px;
		}
		.remove-section {
			position: absolute; top: 5px; right: 10px; background: #e74c3c; color: #fff; border: none; border-radius: 50%; width: 25px; height: 25px; cursor: pointer; font-weight: bold;
		}
		.add-section-btn {
			background: #3498db; color: #fff; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; width: 100%;
		}
		.add-section-btn:hover, .remove-section:hover, #calculateBtn:hover {
			opacity: 0.9;
		}
		.calculate-button-container {
			padding: 20px;
			text-align: center;
		}

		#calculateBtn {
			background: #2ecc71;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			font-size: 18px;
			padding: 12px 40px;
			width: auto;
		}
		#calculateBtn:hover {
			opacity: 0.9;
		}
		
		.units-selection {
			margin-top: 15px; background: bisque; padding: 10px; border-radius: 8px;
		}
		.units-selection label {
			display: block; margin-bottom: 5px; color: #555;
		}
		.units-selection select {
			width: auto; margin-bottom: 10px;
		}
		#newFormContainer {
			display: none; margin-top: 15px; background: #7fffd4; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}
		#newFormContainer h4 {
			margin-bottom: 10px; color: #333;
		}
		#newFormContainer label {
			display: block; margin-bottom: 10px; color: #555;
		}
		#newFormContainer input {
			width: 95%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;
		}

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

	#calculateBtn:disabled {
		cursor: not-allowed;
		opacity: 0.6; /* Дополнительно делаем кнопку полупрозрачной для наглядности */
	}

.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; /* Более темная синяя рамка */
	}