:root {
            --bg-color: #f4f7f6;
            --sidebar-bg: #ffffff;
            --canvas-bg: #ffffff;
            --primary-text: #2c3e50;
            --secondary-text: #7f8c8d;
            --accent-color: #3498db;
            --accent-hover: #5dade2;
            --danger-color: #e74c3c;
            --danger-hover: #f1948a;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --icv-color: #8e44ad; /* Цвет для МЦС */
            --border-color: #e0e0e0;
            --shadow-color: rgba(0, 0, 0, 0.08);
            --selection-color-rgba: rgba(52, 152, 219, 0.7);
        }

		body, html {
			margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			height: 100%; /* Убираем overflow: hidden; */ background-color: var(--bg-color); color: var(--primary-text);
		}
        .app-container { display: flex; height: 100vh; margin: 20px;}
        .sidebar {
            width: 30%; min-width: 400px; background-color: var(--sidebar-bg);
            padding: 25px; box-sizing: border-box; display: flex; flex-direction: column;
            border-right: 1px solid var(--border-color); overflow-y: auto; 
			border-radius: 8px;
			box-shadow: 0 4px 15px var(--shadow-color);
        }
		.main-content {
			flex: 1; padding: 20px; box-sizing: border-box;
			display: flex; justify-content: center; align-items: center;
			position: relative; /* <-- ДОБАВЬТЕ ЭТО СВОЙСТВО */
		}
        #canvas { background-color: var(--canvas-bg); border-radius: 8px; box-shadow: 0 4px 15px var(--shadow-color); cursor: default;}
        h2, h3 { margin-top: 0; font-weight: 600; }
        h3 { font-size: 1.1em; color: var(--primary-text); margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
        h4 { font-size: 0.9em; color: var(--secondary-text); text-transform: uppercase; margin: 20px 0 10px 0; }
        .control-group { margin-bottom: 25px; }
        select, input { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid var(--border-color); box-sizing: border-box; margin-bottom: 10px; }
        button {
            width: 100%; padding: 12px; border: none; border-radius: 5px; background-color: var(--accent-color);
            color: white; font-size: 1em; cursor: pointer; transition: background-color 0.2s; margin-bottom: 10px;
        }
        button:hover { background-color: var(--accent-hover); }
        button.danger-btn { background-color: var(--danger-color); }
        button.danger-btn:hover { background-color: var(--danger-hover); }
        button.success-btn { background-color: var(--success-color); }
        #properties-panel { border-top: 2px solid var(--accent-color); padding-top: 20px; }
        .property-list { font-size: 0.9em; background-color: #f8f9f9; padding: 10px; border-radius: 5px; margin-bottom: 15px; line-height: 1.6; }
        .property-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .property-item label { font-size: 0.95em; }
        .property-item input, .property-item select { width: 140px; padding: 8px; margin: 0; }
        .attachment-editor { border: 1px solid var(--border-color); padding: 10px; border-radius: 5px; margin-bottom: 10px; background: #fff; }


		#modal-overlay {
			position: fixed;
			top: 0; left: 0; width: 100%; height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1000;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s, visibility 0s 0.3s;
		}

		#modal-overlay:not(.modal-hidden) {
			opacity: 1;
			visibility: visible;
			transition: opacity 0.3s;
		}

		#modal-box {
			background: var(--sidebar-bg);
			padding: 25px 30px;
			border-radius: 8px;
			box-shadow: 0 5px 20px rgba(0,0,0,0.2);
			width: 90%;
			max-width: 450px;
			text-align: center;
			transform: scale(0.9);
			transition: transform 0.3s;
		}

		#modal-overlay:not(.modal-hidden) #modal-box {
			transform: scale(1);
		}

		#modal-title {
			margin-top: 0;
			color: var(--primary-text);
		}

		#modal-message {
			color: var(--secondary-text);
			margin-bottom: 20px;
		}

		#modal-prompt-input-container {
			margin-bottom: 20px;
		}
		#modal-prompt-input {
			width: 100%;
		}

		#modal-buttons {
			display: flex;
			justify-content: center;
			gap: 15px;
		}

		#modal-buttons button {
			width: auto;
			min-width: 120px;
			padding: 10px 20px;
		}

		.modal-hidden {
			display: none; /* Или visibility: hidden; opacity: 0; */
		}

		#modal-select-input-container {
			margin-bottom: 20px;
		}
		#modal-select-input {
			width: 100%;
			padding: 10px;
			border-radius: 5px;
			border: 1px solid var(--border-color);
			box-sizing: border-box;
		}

		#kinematics-container {
			width: 90%; /* Ширина 90% */
			margin: 40px auto; /* Отступ сверху/снизу и авто-центрирование по горизонтали */
			min-height: 85vh; /* Минимальная высота, чтобы он не был слишком маленьким */

			/* Ваши старые стили для внешнего вида */
			background-color: var(--sidebar-bg);
			border-radius: 8px;
			box-shadow: 0 4px 15px var(--shadow-color);
			border: 1px solid var(--border-color);
			display: flex;
			flex-direction: column;
			padding: 15px;
			box-sizing: border-box;
		}

		#kinematics-header {
			flex-shrink: 0; /* Заголовок не будет сжиматься */
			text-align: center;
			margin-bottom: 10px;
		}

		#kinematics-header h3 {
			margin: 0;
		}

		#kinematics-canvas-wrapper {
			flex-grow: 1; /* Контейнер холста займет все доступное место */
			position: relative; /* Необходимо для абсолютного позиционирования холста */
			background-color: var(--canvas-bg);
			border-radius: 5px;
			overflow: hidden; /* Скрыть все, что выходит за пределы */
		}

		#kinematics-canvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#kinematics-canvas.draggable {
			cursor: move;
		}

        #status-bar {
            position: absolute;
            bottom: 30px; /* Отступ от нижнего края main-content */
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(44, 62, 80, 0.85); /* Полупрозрачный темный фон */
            color: white;
            padding: 8px 15px;
            border-radius: 15px;
            font-size: 0.9em;
            pointer-events: none; /* Чтобы не мешала кликать по холсту */
            transition: opacity 0.3s, transform 0.3s;
            opacity: 1;
            white-space: nowrap; /* Чтобы текст не переносился */
        }

		button:disabled,
		button:disabled:hover {
			opacity: 0.5;                      /* Делаем кнопку полупрозрачной */
			cursor: not-allowed;               /* Меняем курсор на "запрещено" */
			background-color: var(--secondary-text); /* Можно задать серый цвет */
		}

.button-with-help {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px; /* Заменяем margin у кнопок */
        }
        .button-with-help button {
            flex-grow: 1; /* Кнопка займет все доступное место */
            margin-bottom: 0; /* Убираем старый отступ */
        }
        .help-icon {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            line-height: 18px;
            border-radius: 50%;
            background-color: var(--secondary-text);
            color: white;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
            font-size: 14px;
        }
        .help-icon:hover {
            background-color: var(--accent-color);
        }

        #shape-grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .shape-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border: 2px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            transition: border-color 0.2s, background-color 0.2s;
            background-color: #fdfdfd;
        }
        .shape-item:hover {
            border-color: var(--accent-hover);
            background-color: #f8f9f9;
        }
        .shape-item.active {
            border-color: var(--accent-color);
            background-color: #eaf2f8;
        }
        .shape-item img {
            height: 40px;
            width: auto;
            margin-bottom: 5px;
            pointer-events: none; /* Чтобы клик всегда срабатывал на родительском div */
        }
        .shape-item span {
            font-size: 0.8em;
            text-align: center;
            color: var(--primary-text);
            pointer-events: none;
        }

		#history-controls-container {
			position: absolute;
			top: 30px;
			right: 30px;
			z-index: 10;
			display: flex;
			gap: 12px;
		}

		#history-controls-container button {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid var(--border-color);
			background-color: var(--sidebar-bg);
			box-shadow: 0 2px 8px var(--shadow-color);

			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 24px;
			font-weight: bold;
			color: var(--primary-text);

			cursor: pointer;
			transition: all 0.2s ease-in-out;
		}

		#history-controls-container button:hover:not(:disabled) {
			background-color: var(--accent-color);
			color: white;
			transform: translateY(-2px);
		}

		#history-controls-container button:disabled {
			opacity: 0.6;
			background-color: var(--bg-color);
			cursor: not-allowed;
			box-shadow: none;
		}


		/* --- Стили для мобильной адаптации --- */
		@media (max-width: 768px) {
			/* 1. Скрываем блок с описанием теоремы */
			#problem-description {
				display: none;
			}

			/* 2. Перестраиваем основной контейнер: холст над сайдбаром */
			.app-container {
				flex-direction: column; /* Элементы теперь идут друг под другом */
				height: auto; /* Убираем фиксированную высоту, чтобы разрешить скролл */
				margin: 10px; /* Уменьшаем отступы для мобильных */
			}

			/* 3. Делаем холст (main-content) липким и задаем ему высоту */
			.main-content {
				order: -1; /* Ставим холст первым в потоке, даже если в HTML он второй */
				height: 65vh; /* Задаем высоту 65% от высоты экрана */
				min-height: 400px; /* Минимальная высота на случай очень маленьких экранов */
				position: sticky; /* Делаем блок "липким" */
				top: 10px; /* Отступ сверху при прилипании */
				z-index: 100; /* Чтобы он был поверх других элементов при скролле */
				padding: 10px;
				flex: none; /* Отменяем растягивание */
			}

			/* 4. Адаптируем сайдбар */
			.sidebar {
				width: 100%; /* Сайдбар теперь занимает всю ширину */
				min-width: unset; /* Сбрасываем минимальную ширину */
				height: auto;
				margin-top: 15px; /* Добавляем отступ сверху от холста */
				border-right: none; /* Убираем границу справа */
				overflow-y: visible; /* Отключаем внутренний скролл, скроллится вся страница */
			}

			/* 5. Разрешаем скролл всей страницы */
			body, html {
				height: auto;
			}

			/* Небольшая поправка для кнопок истории на холсте */
			#history-controls-container {
				top: 20px;
				right: 20px;
			}
			#kinematics-results-container {
				white-space: normal; /* <-- Главное исправление: разрешаем перенос формул */
				margin: 20px 10px;   /* Уменьшаем боковые отступы */
				font-size: 1.1em;    /* Немного уменьшаем шрифт для лучшей читаемости */
			}
		}


        button.warning-btn {background-color: var(--warning-color); }
        button.warning-btn:hover { background-color: #f1c40f;}