/* Переменные для цветовой схемы и других значений */
    :root {
      --primary-color: #1a73e8;
      --secondary-color: #f5f5f5;
      --accent-color: #e74c3c;
      --background-color: #ffffff;
      --text-color: #333333;
      --border-color: #bdc3c7;
      --error-color: #ff4d4f;
      --primary-color-toolbar-button: green;
      --shadow-color: rgba(0, 0, 0, 0.1);
      --transition-speed: 0.3s;
      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* Общие стили */
    * {
      box-sizing: border-box;
    }
    body, html {
      margin: 0;
      padding: 0;
      font-family: var(--font-family);
      background-color: var(--secondary-color);
      height: 100%;
    }
    
    html {
      scroll-behavior: smooth; /* Плавная прокрутка */
    }

#report-container {
  grid-area: report; /* Помещаем его в область 'footer' нашей сетки */
  background-color: var(--background-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px var(--shadow-color);
  display: none; /* По умолчанию скрыт */
}

/* 1. Превращаем главный контейнер в CSS Grid */
.main-container {
  display: grid;
  grid-template-rows: 1fr auto auto;   
  grid-template-columns: 25% 1fr; 
  grid-template-areas:
    "intro intro" 
    "sidebar main"
    "actions actions"
    "report report";
  gap: 20px;
  width: 100%;
  min-height: 110vh;
  padding: 20px;
}

/* 2. Размещаем панели по именованным областям сетки */

/* Панель "Инструменты" (.left-panel в HTML) отправляется в область "header" */
.left-panel {
  grid-area: header;
  background-color: var(--background-color);
  box-shadow: 0 2px 6px var(--shadow-color);
  border-radius: 8px;
  padding: 10px;
  height: auto; /* Убираем фиксированную высоту */
}

/* Панель "Операции" (.right-panel в HTML) отправляется в область "sidebar" */
.right-panel {
  grid-area: sidebar;
  background-color: var(--background-color);
  box-shadow: 2px 0 6px var(--shadow-color);
  border-radius: 8px;
  padding: 20px;
  overflow-y: auto; /* Добавляем прокрутку, если контент не помещается */
  max-height: 100vh; 
}

/* Панель "Холст" (.center-panel в HTML) отправляется в область "main" */
.center-panel {
  grid-area: main;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0; /* Убираем лишние отступы */
  overflow: hidden; /* Чтобы холст не вылезал за пределы */
 min-height: 0;
}

/* 3. Стилизуем тулбар внутри верхней панели под горизонтальное меню */
/* Стили для самого тулбара, чтобы он был горизонтальным */
#toolbar {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
  color: var(--text-color);

  /* --- ГЛАВНЫЕ ИЗМЕНЕНИЯ --- */
  display: flex;
  flex-direction: row;    /* !! Явно указываем направление В РЯД */
  flex-wrap: wrap;        /* Позволяем переноситься на новую строку */
  align-items: center;    /* Выравниваем по центру по вертикали */
  gap: 15px;              /* Пространство между элементами */
}

/* Стили для групп "метка + поле" внутри тулбара */
#toolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px; /* Расстояние между меткой и полем ввода */
}

/* Сбрасываем лишние отступы у кнопок и полей */
#toolbar button,
#toolbar input,
#toolbar select {
  margin: 0;
}

/* Сбрасываем лишние отступы у меток */
.add-section label {
  margin-top: 0;
  margin-bottom: 0;
}



    #toolbar button {
      margin: 5px;
      padding: 10px 20px;
      background-color: #34495e;
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color var(--transition-speed);
      font-size: 14px;
    align-self: auto;
    }

    #toolbar button.active,
    #toolbar button:hover {
      background-color: var(--primary-color-toolbar-button);
    }

    #toolbar input,
    #toolbar select {
      margin: 5px;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
    }

    /* Стили холста */
	  #canvas {
		  border: 2px solid var(--border-color);
		  background-color: var(--background-color);
		  /* Заставляем холст полностью заполнить родительский контейнер */
		  width: 100%;
		  height: 100%;
		  border-radius: 8px;
		  box-shadow: 0 4px 6px var(--shadow-color);
		  display: block; /* Убирает возможные отступы под элементом */
		  touch-action: none
	  }

    /* Стили правой панели (свойства и операции) */
    #sidebar h2.Properties {
      cursor: default;
      font-weight: 700;
      background-color: var(--primary-color);
      height: 40px;
      line-height: 40px;
      border: none;
      border-radius: 8px;
      margin-bottom: 20px;
      text-align: center;
      padding: 0;
      font-size: 18px;
      color: white;
      box-shadow: 0 2px 4px var(--shadow-color);
    }

    /* Современный стиль заголовков секций */
    .model-section-header {
      font-size: 1.2rem;
      color: var(--primary-color);
      text-align: left;
      margin: 20px 0 10px;
      padding: 10px 15px;
      background: linear-gradient(90deg, #e3f2fd, #ffffff);
      border-radius: 6px;
      font-weight: bold;
      box-shadow: 0px 2px 5px var(--shadow-color);
      border-left: 5px solid var(--primary-color);
    }

    /* Стили для элементов модели */
    .model-item {
      display: flex;
      flex-direction: column;
      background-color: var(--background-color);
      border: 1px solid var(--border-color);
      margin-bottom: 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
      width: 100%;
      box-shadow: 0 2px 4px var(--shadow-color);
    }

    .model-item:hover {
      background-color: #f0f8ff;
      box-shadow: 0 4px 8px var(--shadow-color);
    }

    .model-item-header {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      background-color: var(--background-color);
      position: relative;
      border-radius: 8px;
    }

    .property-icon {
      width: 35px;
      height: 35px;
      margin-right: 5px;
    }
    .property-icon-container {
      display: inline-block;
      vertical-align: middle;
      margin-right: 0px;
    }
    .model-item-header span {
      flex-grow: 1;
      font-size: 16px;
      color: var(--text-color);
    }

    .delete-icon {
      color: var(--accent-color);
      font-size: 18px;
      cursor: pointer;
      transition: color var(--transition-speed), transform var(--transition-speed);
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }

    .delete-icon:hover {
      color: #c0392b;
      transform: translateY(-50%) scale(1.2);
    }

    /* Стили для содержимого аккордеона */
    .accordion-content {
      padding: 16px;
      background-color: #f9f9f9;
      border-top: 1px solid var(--border-color);
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      box-sizing: border-box;
      animation: fadeIn var(--transition-speed) ease-in-out;
      max-height: 10000px !important;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Стили для групп форм */
    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text-color);
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    }

    .form-group input:focus,
    .form-group select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 5px rgba(26, 115, 232, 0.5);
      outline: none;
    }

    /* Стили для кнопок сохранения и закрытия */
    .accordion-content button {
      padding: 10px 16px;
      background-color: var(--primary-color);
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;
      transition: background-color var(--transition-speed);
      margin-right: 10px;
    }

    .accordion-content button:hover {
      background-color: #1558b0;
    }

    /* Стили для вкладок */
    .tabs {
      display: flex;
      border-bottom: 2px solid var(--border-color);
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .tab-label {
      padding: 10px 20px;
      cursor: pointer;
      background-color: #f1f1f1;
      border: 1px solid var(--border-color);
      border-bottom: none;
      border-radius: 5px 5px 0 0;
      margin-right: 5px;
      transition: background-color var(--transition-speed);
      font-weight: bold;
      white-space: nowrap;
    }

    .tab-label:hover {
      background-color: #ddd;
    }

    .tabs input[type="radio"] {
      display: none;
    }

    .tabs input[type="radio"]:checked + .tab-label {
      background-color: #ffffff;
      border-bottom: 2px solid #ffffff;
      color: var(--primary-color);
    }

    /* Стили для панелей вкладок */
    .tab-content {
      width: 100%;
    }

    .tab-content .tab-panel {
      display: none;
    }

    .tabs input[type="radio"]:checked ~ .tab-content .tab-panel {
      display: block;
    }

    /* Стили для форм */
    .add-section form {
      max-width: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .form-group input,
    .form-group select {
      width: 100%;
      box-sizing: border-box;
    }

    /* Стили для кнопок закрытия и добавления */
    form button {
      display: inline-block;
      margin: 5px 10px 5px 0;
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 5px;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    form button:hover {
      opacity: 0.9;
    }

    form .close-button {
      background-color: #e74c3c !important;
      color: white;
    }

    form .close-button:hover {
      background-color: #c0392b !important;
    }

    form button[type="button"]:not(.close-button) {
      background-color: #1abc9c;
      color: white;
      font-size: 12px;
    }

    form button[type="button"]:not(.close-button):hover {
      background-color: #16a085;
    }

    /* Контейнер кнопок */
    .form-buttons {
      display: flex;
      justify-content: flex-start;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    /* Обеспечиваем, чтобы вкладки не растягивались на всю ширину */
    .tab-label {
      flex: 0 1 auto;
    }

    /* Улучшаем адаптивность вкладок */
    @media (max-width: 600px) {
      .tabs {
        flex-direction: column;
      }

      .tab-label {
        margin-right: 0;
        margin-bottom: 5px;
        border-radius: 5px;
      }

      .tab-content .tab-panel {
        padding-top: 10px;
      }
    }

    /* Стили для сообщений об ошибках */
    .error-message {
      color: var(--error-color);
      font-size: 14px;
      font-weight: 500;
      margin-top: 8px;
      border-left: 3px solid var(--error-color);
      padding: 8px;
      background-color: #fff1f0;
      border-radius: 4px;
      box-shadow: 0 1px 3px var(--shadow-color);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
      margin-bottom: 10px;
    }

    .error-message:not(:empty) {
      opacity: 1;
      visibility: visible;
    }

    /* Стили для секций добавления элементов */
    .add-section {
      background-color: var(--background-color);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 4px var(--shadow-color);
      display: flex;
      justify-content: center;
      flex-direction: column;
    }

    .add-section h3 {
      margin-top: 0;
      font-size: 1.2rem;
      color: var(--primary-color);
      margin-bottom: 15px;
    }

    .add-section form {
      display: none;
      flex-direction: column;
      animation: slideDown var(--transition-speed) ease-in-out;
    }

    @keyframes slideDown {
      from { max-height: 0; opacity: 0; }
      to { max-height: 1000px; opacity: 1; }
    }

    .add-section form.active {
      display: flex;
    }

    .add-section label {
      margin-bottom: 5px;
      font-weight: 600;
      font-size: 14px;
      color: var(--text-color);
      margin-top: 10px;
    }

    .add-section input,
    .add-section select {
      margin-bottom: 15px;
      padding: 10px 14px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
      width: -webkit-fill-available;
      margin-top: 5px;
    }

    .add-section input:focus,
    .add-section select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 5px rgba(26, 115, 232, 0.5);
      outline: none;
    }

    .add-section button {
      padding: 10px 20px;
      background-color: var(--primary-color);
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 4px;
      font-size: 12px;
      transition: background-color var(--transition-speed);
      align-self: center;
    }

    .add-section button:hover {
      background-color: #1558b0;
    }

    /* Стили для выбора метода добавления */
    .method-selection {
      margin-bottom: 20px;
    }

    .method-selection label {
      margin-right: 15px;
      font-weight: 500;
      font-size: 14px;
      color: var(--text-color);
      display: flex;
      align-items: center;
    }

    .method-selection input {
      margin-right: 8px;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    /* Медиа-запросы для адаптивности */
    @media (max-width: 1024px) {
      #canvas-container {
        flex-direction: column;
        align-items: center;
      }

      #canvas {
        width: 100%;
        max-width: 800px;
        height: auto;
        aspect-ratio: 4 / 3;
      }

      #sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        height: auto;
      }
    }

@media (max-width: 768px) {
  /* --- ПЕРЕСТРОЙКА ОСНОВНОЙ СЕТКИ НА МОБИЛЬНЫХ --- */

.main-container {
    grid-template-columns: 1fr;
    /* Убрали первое "auto" */
    grid-template-rows: auto auto auto 1fr; 
    grid-template-areas:
      "intro" 
      "main"
      "sidebar"
      "actions"
      "report";
  }
  .report-schemes-flex-container {
    flex-direction: column; /* Меняем направление с горизонтального (row) на вертикальное (column) */
  }
  /* --- КОРРЕКТИРОВКА РАЗМЕРОВ ПАНЕЛЕЙ --- */
  
  /* Сайдбар (.right-panel) теперь должен быть во всю ширину */
  .right-panel {
    width: 100%;
    height: auto; /* Высота по содержимому */
    max-height: 50vh; /* Ограничиваем высоту, чтобы он не был слишком большим */
	  min-height: 500px;
  }
  

  /* --- Существующие стили для гамбургер-меню ... --- */
  .hamburger-button {
    display: block;
  }

  #toolbar {
    display: none;
  }
  
  #toolbar.is-active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--background-color);
    padding: 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px var(--shadow-color);
    z-index: 100;
  }
  
  #toolbar.is-active button,
  #toolbar.is-active .toolbar-group {
    width: 100%;
  }
}}
    
    .success {
      color: #28a745;
      font-weight: bold;
      font-size: 14px;
      margin: 10px 0;
      line-height: 1.5;
      background-color: #d4edda;
      border: 1px solid #c3e6cb;
      border-radius: 4px;
      padding: 10px;
      box-shadow: 0 2px 4px var(--shadow-color);
    }

    .error {
      color: var(--error-color);
      font-weight: bold;
      font-size: 14px;
      margin: 10px 0;
      line-height: 1.5;
      background-color: #f8d7da;
      border: 1px solid #f5c6cb;
      border-radius: 4px;
      padding: 10px;
      box-shadow: 0 2px 4px var(--shadow-color);
    }
    
    .notification {
      background-color: #ffeb3b;
      border-left: 6px solid #fbc02d;
      padding: 10px 15px;
      margin: 10px 0;
      font-family: Arial, sans-serif;
      font-size: 14px;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .hidden {
      display: none;
    }

    .custom-select {
      position: relative;
      width: 300px;
      cursor: pointer;
    }

    .selected-option {
      display: flex;
      align-items: center;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #fff;
      width: fit-content;
    }

    .selected-option img {
      margin-right: 5px;
      width: 24px;
      height: 24px;
    }

    .dropdown-options {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1000;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #fff;
      max-height: 200px;
      overflow-y: auto;
      display: none;
      padding: 0;
      width: fit-content;
      margin: 0;
    }

    .dropdown-options.show {
      display: block;
    }

    .dropdown-options li {
      padding: 5px;
      margin: 0;
      display: flex;
      align-items: center;
      list-style: none;
      cursor: pointer;
    }

    .dropdown-options li img {
      margin-right: 8px;
      width: 20px;
      height: 20px;
    }

    .dropdown-options li:hover {
      background-color: #f0f0f0;
    }

/* Центрирование изображений и выстраивание в ряд */
    .image-container {
      display: flex !important;       /* Принудительно включаем Flex */
      flex-direction: row !important; /* Принудительно В РЯД (горизонтально) */
      flex-wrap: wrap;                /* Разрешаем перенос на новую строку, если не влезают */
      justify-content: center;        /* Центрируем содержимое */
      align-items: center;            /* Выравниваем по вертикали */
      gap: 15px;                      /* Отступ между картинками */
      margin-top: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      width: 100%;                    /* Растягиваем на всю доступную ширину */
      box-sizing: border-box;         /* Учитываем отступы в ширине */
    }
    
    /* Дополнительно убедимся, что элементы внутри не растягиваются */
    .image-item {
      flex: 0 0 auto;
      text-align: center;
    }

    /* Стиль для изображений */
	  .form-group img,
	  .form-group svg {
      width: 56px;
      height: 56px;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
      padding: 3px;
      transition: transform 0.2s, box-shadow 0.2s;
    }

	  .form-group img:hover,
	  .form-group svg:hover {
		  border-color: #007bff;
		  transform: scale(1.05); /* Добавим небольшой эффект увеличения для наглядности */
	  }

    /* Стиль для отключенного поля ввода */
    #support-angle:disabled {
      background-color: #f5f5f5;
      color: #aaa;
      border: 1px solid #ddd;
      cursor: not-allowed;
    }
    /* Стиль для выбранного изображения */
	  .image-container .image-item.selected,
	  .image-container img.selected,
	  .image-container svg.selected {
		  border-color: #ff0000 !important; /* Добавляем !important для надежности */
	  }
    .image-item p {
      margin-top: 5px;
      font-size: 14px;
      color: #333;
      text-align: center;
    }

	  .top-panel-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  width: 100%;
	  }

	  /* Стили для самой кнопки-гамбургера */
	  .hamburger-button {
		  display: none; /* По умолчанию скрыта на больших экранах */
		  width: 40px;
		  height: 35px;
		  background: transparent;
		  border: none;
		  cursor: pointer;
		  padding: 0;
		  z-index: 101; /* Чтобы была поверх других элементов */
	  }

	  /* Стили для "палочек" внутри кнопки */
	  .hamburger-button span {
		  display: block;
		  width: 100%;
		  height: 4px;
		  background-color: var(--text-color);
		  margin: 6px 0;
		  border-radius: 2px;
	  }

	  /* Стили, которые применяются только на мобильных устройствах */
	  @media (max-width: 768px) {
		  /* Показываем кнопку-гамбургер */
		  .hamburger-button {
			  display: block;
		  }

		  /* Панель .left-panel должна быть готова к выпадающему меню */
		  .left-panel {
			  position: relative;
		  }

		  /* Скрываем панель инструментов по умолчанию */
		  #toolbar {
			  display: none;
		  }

		  /* Когда меню АКТИВНО (класс .is-active), мы его показываем */
		  #toolbar.is-active {
			  display: flex;
			  flex-direction: column; /* Элементы снова вертикально */
			  align-items: flex-start;
			  gap: 15px;

			  /* Делаем его выпадающим списком */
			  position: absolute;
			  top: 100%; /* Появляется сразу под шапкой */
			  left: 0;
			  right: 0;
			  background-color: var(--background-color);
			  padding: 20px;
			  border-radius: 0 0 8px 8px;
			  box-shadow: 0 4px 6px var(--shadow-color);
			  z-index: 100;
		  }

		  /* Растягиваем элементы внутри активного меню на всю ширину для удобства нажатия */
		  #toolbar.is-active button,
		  #toolbar.is-active .toolbar-group {
			  width: 100%;
		  }
	  }

	  /* --- СТИЛИ ДЛЯ ЭЛЕМЕНТОВ ПОВЕРХ ХОЛСТА --- */

	  /* 1. Делаем контейнер холста точкой отсчета для позиционирования */
	  .canvas-panel {
		  position: relative;
		  max-height: 110vh;
		  touch-action: none;
	  }

	  /* 2. Стили для контейнера в правом верхнем углу (настройки сетки) */
	  .canvas-overlay-top-right {
		  position: absolute;
		  top: 15px;
		  right: 15px;
		  z-index: 10; /* Чтобы быть поверх холста */

		  /* Внешний вид "стеклянной" панели */
		  background-color: rgba(255, 255, 255, 0.7);
		  backdrop-filter: blur(5px);
		  -webkit-backdrop-filter: blur(5px);
		  padding: 10px 15px;
		  border-radius: 8px;
		  border: 1px solid rgba(0, 0, 0, 0.1);
		  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

		  display: flex;
		  flex-direction: column; /* Располагаем настройки друг под другом */
		  gap: 8px;
	  }

	  /* Стилизуем элементы внутри панели сетки */
	  .canvas-overlay-top-right .toolbar-group {
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  gap: 10px;
	  }
	  .canvas-overlay-top-right label {
		  font-size: 13px;
		  font-weight: 500;
		  color: #333;
	  }
	  .canvas-overlay-top-right input {
		  width: 60px; /* Делаем поля ввода компактными */
		  font-size: 13px;
		  padding: 4px 6px;
		  border: 1px solid #ccc;
		  border-radius: 4px;
	  }

	  /* 3. Стили для контейнера в левом верхнем углу (кнопка "Назад") */
	  .canvas-overlay-top-left {
		  position: absolute;
		  top: 15px;
		  left: 15px;
		  z-index: 10;
		  /* Добавлено для расположения кнопок в ряд */
		  display: flex;
		  gap: 10px;
	  }

	  /* Стилизуем саму кнопку "Назад" */
	  .overlay-button {
		  padding: 8px 16px;
		  font-size: 14px;
		  background-color: rgba(255, 255, 255, 0.7);
		  backdrop-filter: blur(5px);
		  -webkit-backdrop-filter: blur(5px);
		  border: 1px solid rgba(0, 0, 0, 0.1);
		  color: #333;
		  border-radius: 8px;
		  cursor: pointer;
		  /* ИЗМЕНЕНИЕ: Добавляем transform в transition для плавной анимации "приподнимания" */
		  transition: background-color 0.2s ease, transform 0.2s ease;
		  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	  }
.overlay-button:hover {
		  /* Делаем фон полностью НЕПРОЗРАЧНЫМ белым для лучшего контраста */
		  background-color: rgba(255, 255, 255, 1);
		  /* Добавляем эффект "приподнимания" на 2 пикселя вверх */
		  transform: translateY(-2px);
	  }

/* --- СТИЛИ ДЛЯ КНОПОК СОХРАНЕНИЯ/ЗАГРУЗКИ --- */
    .sidebar-actions {
      margin-top: 25px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
      display: flex;
      gap: 15px;
    }

    .sidebar-actions button {
      flex-grow: 1; /* Кнопки поделят пространство */
      padding: 12px;
      font-size: 16px;
      font-weight: bold;
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.1s;
    }
    
    .sidebar-actions button:hover {
        opacity: 0.9;
    }
    .sidebar-actions button:active {
        transform: scale(0.98);
    }

    #saveButton {
      background-color: #28a745; /* Зеленый */
    }

    #loadButton {
      background-color: #007bff; /* Синий */
    }

/* --- СТИЛИ ДЛЯ СХЕМ В ОТЧЕТЕ (FLEXBOX) --- */
    .report-schemes-flex-container {
      display: flex;
      gap: 20px; /* Расстояние между схемами */
      margin-bottom: 25px;
      padding-bottom: 25px;
      border-bottom: 2px solid var(--border-color);
    }

    .report-image-container {
      flex: 1; /* Каждая схема займет половину доступного пространства */
      text-align: center;
    }
    
    .report-image-container h3 {
        margin-bottom: 15px; /* Отступ от заголовка до картинки */
    }

    .report-scheme-image {
      max-width: 100%; /* Изображение будет вписываться в свой контейнер */
      height: auto;
      background-color: #ffffff;
    }

/* --- СТИЛИ ДЛЯ БЛОКА ДЕЙСТВИЙ И КНОПОК --- */

/* --- СТИЛИ ДЛЯ БЛОКА ДЕЙСТВИЙ И КНОПОК --- */
#calculation-actions {
    grid-area: actions;
    display: flex;
    /* Изменяем направление на колонку, чтобы сообщение было под кнопками */
    flex-direction: column;
    /* Выравниваем все по центру горизонтально */
    align-items: center; 
    gap: 5px; /* Небольшой отступ между кнопками и сообщением */
    padding: 10px 0;
}

/* Новый стиль для обертки кнопок, чтобы они были в ряд */
#calculation-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px; /* Сохраняем отступ между кнопками */
}

/* --- ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ КНОПОК (Усиленные) --- */
    #calculation-actions button {
        padding: 12px 30px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.1s;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin: 0 5px; /* Небольшой отступ */
    }

    #calculation-actions button:hover {
        opacity: 0.9;
    }

    #calculation-actions button:active {
        transform: scale(0.98);
    }

    /* Цвета кнопок */
    #quickAnswerButton {
        background-color: #28a745 !important; /* Зеленый */
    }
    
    #calculateButton {
        background-color: #007bff !important; /* Синий */
    }

    #openReportButton {
        background-color: #8e44ad !important; /* Фиолетовый */
    }

    /* Стили для ОТКЛЮЧЕННОГО состояния (когда расчет невозможен) */
    #calculation-actions button:disabled {
        background-color: #b0b0b0 !important; /* Серый */
        cursor: not-allowed;
        opacity: 0.6;
        box-shadow: none;
        transform: none;
    }

    /* --- СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА --- */
    .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: 1;
        transition: opacity 0.3s ease;
    }
    .modal-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .modal-content {
        background-color: white;
        padding: 30px 40px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        position: relative;
        min-width: 300px;
        transform: scale(1);
        transition: transform 0.3s ease;
    }
    .modal-overlay.hidden .modal-content {
        transform: scale(0.9);
    }
    
    .modal-close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 28px;
        font-weight: bold;
        color: #aaa;
        cursor: pointer;
        line-height: 1;
    }
    .modal-close-btn:hover {
        color: #333;
    }

    #quick-answer-content h3 {
        margin-top: 0;
        color: var(--primary-color);
    }
    #quick-answer-content div {
        font-size: 1.1rem;
        line-height: 1.6;
    }

	  /* --- СТИЛИ ДЛЯ БЛОКА "ДАНО" В ОТЧЕТЕ --- */
	  .report-given-data-container {
		  margin-bottom: 25px;
		  padding-bottom: 25px;
		  border-bottom: 2px solid var(--border-color);
	  }

	  .given-data-content div {
		  font-size: 1.05rem; /* Немного увеличим шрифт для читаемости */
		  line-height: 1.9;  /* Увеличим межстрочный интервал */
		  padding-left: 10px;
	  }

	  /* --- СТИЛИ ДЛЯ ОТКЛЮЧЕННЫХ КНОПОК РАСЧЕТА --- */
	  #calculation-actions button:disabled {
		  background-color: #b0b0b0; /* Серый фон */
		  cursor: not-allowed;      /* Курсор "запрещено" */
		  opacity: 0.6;             /* Небольшая прозрачность */
		  box-shadow: none;         /* Убираем тень */
		  transform: none;          /* Убираем эффект нажатия */
	  }

	  #calculation-actions button:disabled:hover {
		  opacity: 0.6; /* Убираем эффект при наведении */
	  }

	  /* --- СТИЛИ ДЛЯ КОНТЕЙНЕРА ЕДИНИЦ ИЗМЕРЕНИЯ В САЙДБАРЕ --- */
	  .sidebar-units-container {
		  display: flex;
		  align-items: center;
		  gap: 10px; /* Расстояние между "Ед. изм." и выпадающим списком */
		  padding: 15px;
		  margin-bottom: 20px; /* Отступ от секции "Узел" */
		  background-color: #f9f9f9;
		  border: 1px solid var(--border-color);
		  border-radius: 8px;
	  }

	  .sidebar-units-container label {
		  font-weight: 600;
		  color: var(--text-color);
	  }

	  .sidebar-units-container select {
		  padding: 8px 12px;
		  border: 1px solid var(--border-color);
		  border-radius: 4px;
		  font-size: 14px;
		  flex-grow: 1; /* Позволяет селекту занять оставшееся место */
	  }

	  /* --- СТИЛИ ДЛЯ КНОПКИ "НОВЫЙ РАСЧЕТ" В САЙДБАРЕ --- */
	  .sidebar-new-calc-container {
		  margin-bottom: 20px; /* Отступ до секции "Узел" */
		  padding: 0 15px; /* Боковые отступы, как у .sidebar-units-container */
	  }

	  #newCalculationButton {
		  width: 100%; /* На всю ширину контейнера */
		  padding: 12px;
		  font-size: 16px;
		  font-weight: bold;
		  border: none;
		  border-radius: 5px;
		  color: white;
		  cursor: pointer;
		  transition: background-color 0.3s, transform 0.1s;

		  /* Используем цвет акцента/ошибки для этой кнопки */
		  background-color: var(--accent-color); 
	  }

	  #newCalculationButton:hover {
		  background-color: #c0392b; /* Более темный красный при наведении */
	  }

	  #newCalculationButton:active {
		  transform: scale(0.98); /* Эффект нажатия */
	  }

	  /* --- СТИЛИ ДЛЯ ОПИСАНИЯ МЕТОДА ПОЗИЦИОНИРОВАНИЯ --- */
	  .position-method-description {
		  display: none; /* По умолчанию скрыт */
		  margin-top: 10px;
		  padding: 12px;
		  background-color: #f8f9fa; /* Слегка сероватый фон */
		  border-left: 3px solid var(--primary-color);
		  border-radius: 4px;
		  font-size: 14px;
		  color: #333;
		  line-height: 1.5;
		  transition: all 0.3s ease-in-out;
	  }


	  /* 2. Стили для нового блока вступления */
	  .intro-panel {
		  grid-area: intro;
		  background-color: var(--background-color);
		  border-radius: 8px;
		  padding: 25px 30px;
		  box-shadow: 0 2px 6px var(--shadow-color);
		  border-left: 5px solid var(--primary-color); /* Синяя полоска слева для красоты */
		  margin-bottom: 10px;
	  }

	  .intro-panel h1 {
		  margin-top: 0;
		  color: var(--primary-color);
		  font-size: 1.8rem;
		  margin-bottom: 15px;
	  }

	  .intro-panel p {
		  font-size: 1.05rem;
		  line-height: 1.6;
		  color: var(--text-color);
		  margin-bottom: 15px;
	  }

	  .intro-panel ul {
		  list-style-type: disc;
		  margin-left: 20px;
		  margin-bottom: 15px;
	  }

	  .intro-panel li {
		  margin-bottom: 8px;
		  line-height: 1.5;
	  }

	  .intro-alert {
		  background-color: #fff3cd;
		  border: 1px solid #ffeeba;
		  color: #856404;
		  padding: 15px;
		  border-radius: 5px;
		  margin-top: 20px;
		  font-weight: 500;
		  display: flex;
		  align-items: center;
		  gap: 10px;
	  }