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

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

		.content-wrapper {
			display: flex;
			height: 950px;
			padding: 20px;
		}
		
		.settings-panel {
			flex: 0 0 25%;
			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: center;
			align-items: flex-start;
			order: 2; 
			margin: 10px;
			border-radius: 8px;
			box-shadow: 0 0 15px 1px #dddddd;
		}


		#calculationContainerContainer {
			display: none;
			width: auto;
			background: #ffffff;
			padding: 20px;
			margin: 10px;
		}
		
		/* --- Стили для мобильных устройств --- */
		@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;
		}
		.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: nowrap; align-items: flex-start; 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; flex-direction: column;
		}
		.section-data label {
			flex: 1; min-width: 150px;
		}
		.section-data input[type="number"],
		.section-data input[type="text"],
        .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;
            padding-top: 0;
			text-align: center;
			background-color: #f4f4f4;
		}

		#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;
		}

		.support-selection {
			margin-top: 10px;
			margin-bottom: 10px;
		}
		.support-selection label {
			margin-right: 10px; color: #555;
		}
		.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;
		}

		/* Стили для нового информационного блока */
		.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;
		}

		#exportControlsContainer {
			background: bisque; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-top: 20px; margin-bottom: 20px;
		}
		#exportControlsContainer button {
			padding: 10px 15px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;
		}


	h2, h3, h4, h5 {
		color: #000;
		font-weight: 700;
		line-height: 1.2;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	/* Индивидуальные размеры и компактные отступы */
	h2 {
		font-size: 1.8rem;  /* ~29px */
		margin: 1.5rem 0 0.75rem 0; 
	}

	h3 {
		font-size: 1.5rem;  /* ~24px */
		margin: 1.2rem 0 0.6rem 0;
	}

	h4 {
		font-size: 1.2rem;  /* ~19px */
		margin: 1rem 0 0.5rem 0;
	}

	h5 {
		font-size: 1.05rem; /* ~17px */
		margin: 0.8rem 0 0.4rem 0;
	}