  <style>
body {
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  height: auto !important;
}

body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;   /* скролл теперь у body */
  overflow: hidden;
  height: auto !important;
}

.layout {
top: 0;
  margin-top: 0;
  width: 100vw;              /* 80% ширины экрана */
  margin: 0 auto;           /* центрируем по горизонтали */
  box-sizing: border-box;   /* учитываем padding в ширине */
  display: flex;            /* если у тебя там flex-раскладка */
  flex-direction: row;   /* элементы идут сверху вниз */
  height: 100vh;
  border-radius: 10px;      /* лёгкое скругление */
  justify-content: flex-start; /* 👈 теперь без промежутков */
}

.sidebar {
  position: sticky;     /* позиционирование внутри .layout */
  top: 0;
  width: 15vw;              /* 🟢 ровно 21% ширины экрана */
  justify-content: flex-start; /* 👈 блоки идут подряд без пустоты */
  height: 100vh;
  box-sizing: border-box; /* учитываем padding и border в ширину */
  background: #e8eef4;    /* фон панели */
  padding: 15px 0 15px 0; /* сверху, справа, снизу, слева */
  min-height: 100%;       /* тянется по высоте родителя */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.sidebar-top {
  flex: 0 0 auto; /* верхний блок остаётся на месте */
  flex-shrink: 0; /* меню не сжимается */
  margin-bottom: 2vh;
}



/* Заголовок навигации */
.sidebar-top h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1f3b73;
  background: #dbe3ec;  /* однотонно, современно */
  border-bottom: 1px solid #cfd6e0;  text-transform: uppercase;
  margin: 0 0 10px 0;
  padding: 6px 10px;
}

/* Список навигации */
.sidebar-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 1vw;
}

/* Пункты навигации */
.sidebar-top li {
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Ссылки навигации */
.sidebar-top a {
  display: block;
  color: #003366;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

/* Наведение */
.sidebar-top a:hover {
  text-decoration: underline;
  color: #000;
}

/* === Выпадающее меню === */
.has-submenu {
  position: relative;
}

.submenu {
  display: none;
  list-style: none;
  margin: 6px 0 0 10px;
  padding: 0;
  border-left: 2px solid #ccc;
}

.submenu li {
  margin: 4px 0;
}

.submenu a {
  font-size: 0.9rem;
  font-weight: 500;
  color: #003366;
  text-decoration: none;
}

.submenu a:hover {
  text-decoration: underline;
  color: #000;
}

/* При активном состоянии */
.has-submenu.open > .submenu {
  display: block;
}

.submenu-toggle {
  cursor: pointer;
  user-select: none;
}




.sidebar-bottom {
  flex: 1 1 auto;
  margin-top: 0; /* нижний блок прижат вниз */
  overflow-y: auto;        /* включаем вертикальный скролл */
  padding-top: 0;        /* отступ после линии */
  flex-direction: column;
  z-index: 1;
  overflow: hidden;  
  display: flex;
}


.sidebar-bottom h3 {
  flex: 0 0 auto;
  margin: 0 0 8px 0;
  padding: 6px 10px;
  font-size: 1rem;
  font-weight: 700;
  color: #1f3b73;
  background: #dbe3ec;  /* однотонно, современно */
  border-bottom: 1px solid #cfd6e0;
  text-transform: uppercase;
}


.list {
  flex: 1 1 auto;
  overflow-y: auto;     /* ✅ скролл только тут */
  margin-left: 1vw;
  height: 100%;
  padding: 0;
}


.sidebar-bottom ul {
  flex: 1 1 auto;
  overflow-y: auto;   /* скролл только у списка */
  margin: 0;
  padding: 0 6px 6px 0;
}


.list::-webkit-scrollbar {
  width: 8px;
}

.list::-webkit-scrollbar-track {
  background: transparent; /* без фона, чтобы не мешал */
}

.list::-webkit-scrollbar-thumb {
  background-color: #a7b3c2;
  border-radius: 6px;
  border: 2px solid #f8fafc; /* фон совпадает с панелью */
}

.list::-webkit-scrollbar-thumb:hover {
  background-color: #7f8ea0;
}

#pdf-links {
  list-style: none;
  padding-left: 2wh;
  margin: 10px 0;
  margin-top: auto; /* ⬇ прижимает вниз */
margin: 0;
}

#pdf-links li {
  margin-bottom: 10px;
  line-height: 1.3;
}

#pdf-links a {
  color: #003366;
  text-decoration: none;
}

#pdf-links a:hover {
  text-decoration: underline;
  color: #000;
}






/* Левая часть (сайдбар) */
.left-conteiner {
  width: 31vw;              /* 🟢 занимает всю область от левого края до полосы */
  background: #6b8ea8;
  display: flex;
  justify-content: flex-end;   /* сайдбар прижат к правому краю */
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;        /* на всю высоту экрана */  
  position: fixed;      /* всегда на месте */  
}





/* === ВЕРХНЯЯ СТРОКА: заголовок + кнопка === */
.page-header {
  display: flex;
  align-items: center;         /* 🔹 выравнивает по вертикали */
  justify-content: center;     /* 🔹 заголовок остаётся по центру */
  position: relative;
  background: #f8fafc;
  padding: 8px 0;
  margin-bottom: 4px;
}

/* сам заголовок остаётся в центре */
.page-header h1 {
  flex: 0 1 auto;
  margin: 0;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 700;
color: #003366;
text-transform: uppercase;
}

/* кнопка печати — прижата к правому краю */
.page-header #printBtn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%); /* 🔹 идеальное выравнивание по центру строки */
  width: 42px;
  height: 42px;
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 0;
  line-height: 0;
}

/* иконка строго по центру */
.page-header #printBtn svg {
  width: 22px;
  height: 22px;
  stroke: #444;
  display: block;
  margin: auto;
  transition: transform 0.2s ease, stroke 0.2s ease;
}

/* hover и active эффекты */
.page-header #printBtn:hover {
  background: #e6e6e6;
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.page-header #printBtn:hover svg {
  stroke: #111;
  transform: scale(1.1);
}
.page-header #printBtn:active {
  background: #dcdcdc;
  transform: translateY(-48%) scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}



/* Правая часть */
.right-conteiner {
  width: calc(100vw - 31vw);      /* ← оставшееся место */
  background: #6b8ea8;
  box-sizing: border-box;
  overflow: visible;     /* без внутреннего скролла */
  margin-left: 31vw; 
  overflow-x: hidden;
  overflow-y: auto;
}


/* Общий контейнер для панели и схемы */
.main-container {
  top: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* 👈 растягивает контент ровно по ширине */
  width: 53vw;
  box-sizing: border-box;
  background: #f8fafc;               /* светлый фон */
  border: 1px solid #bbb;  	  /*  */         /* строгая рамка */
  border-radius: 0;                /* чуть скруглённые углы */
  box-shadow: none; /* лёгкая тень */
  box-sizing: border-box;
  right: 0px;             /* отступ от левого края layout */
  margin-left: 0.5%; /* <-- прижимаем контейнер к правому краю */
  overflow-y: auto;
  overflow-x: hidden; /* 👈 предотвращает горизонтальный скролл */
  position: relative; /* нужно, чтобы абсолютное позиционирование было внутри контейнера */
  -ms-overflow-style: none;   /* старый Edge/IE */
  scrollbar-width: none;      /* Firefox */
}

/* Чтобы при скролле не прыгало содержимое */
.main-container::-webkit-scrollbar {
  width: 8px;
}
.main-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.main-container::-webkit-scrollbar-thumb:hover {
  background: #999;
}


/* ввод данных для расчета  border: solid #000;*/
.section-title {
  background: #dbe3ec;  /* однотонно, современно */
  color: #003366;         /* тёмный текст для контраста */
  font-weight: 600;
  font-size: 1.1rem;
  padding: 8px 16px;         /* немного воздуха вокруг текста */
  margin-top: 0;          /* отступ сверху от схемы */
  margin-bottom: 0;
  text-align: left;          /* 👈 смещаем текст к левому краю */
  border-bottom: 1px solid #ccc;
  min-width: 100%;
}





/* Панель параметров */
.grid {
  display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
gap: 5px;
  width: 95%; 
  margin-top: 1vh;
  margin-bottom: 1.2vh;
  background: #f8f8f8;
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin-left: 2.5%;
}


.scheme-button-cell {
  height: 100%;        /* 👈 растянуть по высоте строки */
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1f3b73;
}


/* === Унифицируем высоту и выравнивание всех инпутов (как было по ритму) === */
.grid input,
.grid select {
  height: 25px;              /* ✅ возвращаем ритм как в lrsp */
  line-height: 24px;
  box-sizing: border-box;
  margin: 5px;
  vertical-align: middle;
  font-size: 14px;
  text-align: center;
  flex: 0 0 auto;
  border: 1px solid #ccc;
  color: #1e293b;
  background: #fff;
}

/* запретить инпутам растягиваться */
.grid input[type="number"] {
  width: 7ch;  /* ограничение в символах, если нужно строго 4 */
}


/* === Объёмный стиль для всех ячеек и элементов ввода === */
.grid label{
  background: #f8fafc;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 5%;          /* ✅ это и есть зазор между рамкой карточки и рамкой инпута */
  font-weight: 500;
}


.input-block,
.scheme-button-cell {
  margin: 5px;
  height: 100%;
  box-sizing: border-box;
}

button,
label,
input,
select {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #1f2937;
}



.scheme-svg-cell {
  display: flex;
  justify-content: center;
  align-items: center;
padding: 2%;
}

.span-2 {
  grid-row: span 2;
}



.grid > * {
  box-sizing: border-box;
  margin: 0;

}



.main-container h1 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 10px 0 15px;
}


.canvas-container {
justify-content: center; /* ← центрирует по горизонтали  border: solid #000;*/
  position: relative;
  width: 100%;
  background: #f8fafc;
  box-sizing: border-box;
  margin: 0 auto;
margin-top: 0  !important;
  margin-bottom: 1vh;

}

#canvas {

  display: block;
width: 100%;
  background: transparent;
  margin: 0 auto;          /* ← гарантированно центрирует */
margin-top: 0;
}






.buttons {
  display: flex;              /* в линию */
  justify-content: center;    /* центрируем */
  align-items: center;        /* выравниваем по высоте */
  gap: 20px;                  /* расстояние между кнопками */
  margin: 10px auto;          /* отступ сверху и снизу */
  width: 100%;                /* растянем контейнер */
}


button {
  padding: 5px 5px;     /* больше размер кнопки */
  font-size: 16px;        /* чуть крупнее текст */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 0;       /* острая форма */
    background: #f8fafc;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

button:hover {
    background: #f8fafc;
  transform: scale(1.02);
}

button:active {
  background: #ccc;
  transform: scale(0.98);
}



.canvas-buttons {
  position: absolute;
  top: 15px;
  right: 10px;
  display: flex;
  gap: 8px;
}

.canvas-buttons button {
    background: #f8fafc;
  border: none;          /* убрать рамку */
  padding: 2%;            /* убрать внутренние отступы */
  width: auto;           /* ширина равна иконке */
  height: auto;          /* высота равна иконке */
  font-size: 24px;       /* увеличить пиктограмму (по умолчанию было 16px, стало ×1.5) */
  cursor: pointer;
  line-height: 1;        /* чтобы не было лишних отступов */
}

.canvas-buttons button:hover {
  background: #f8f8f8;   /* фон не меняется при наведении */
  transform: scale(1.1); /* лёгкое увеличение при наведении (по желанию) */
}



/* === SVG-иконки в кнопках === */
.canvas-buttons svg {
  width: 22px;
  height: 22px;
  stroke: #374151;               /* серо-графитовый цвет */
  transition: transform 0.2s, stroke 0.2s;
}

.canvas-buttons button:hover svg {
  stroke: #111;                  /* темнее при наведении */
  transform: scale(1.15);
}



.scheme-button-cell, 
.scheme-svg-cell {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scheme-button-cell {
  grid-row: 1 / span 2;  /* объединяет первую и вторую строку */
  grid-column: 4;        /* размещает строго в 4-м столбце */
}

/* Центровка всей ячейки (кнопка + схема) */
.scheme-button-cell > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* убираем лишнее пространство снизу */
  gap: 4px;                    /* небольшой отступ между кнопкой и схемой */
}








/* Поле "Шаг рам (м)" — делаем белым и с чёрной рамкой */
#step {
  background-color: #fff !important;  /* белый фон */
  border: 1px solid #000 !important;  /* чёрная рамка */
  color: #000;                        /* чёрный текст */
  cursor: default;
}

/* Если оно заблокировано — убрать "серость" и курсор */
#step:disabled,
#step[readonly] {
  opacity: 1 !important;              /* отменяем тусклый эффект */
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #003366;
  cursor: default !important;
  border-radius: 2px;    
}

/* кнопка схемы связей */
#schemeButton {
  background: linear-gradient(to bottom, #f3f6fa, #e0e7ef);
  border: 1px solid #b6c4d7;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#schemeButton:hover {
  background: linear-gradient(to bottom, #e6edf7, #d3dfef);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

#schemeButton #currentLinkScheme {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;              /* 👈 добавляем равномерный внутренний отступ */
  box-sizing: border-box;    /* чтобы padding не растягивал кнопку */

}

#schemeButton svg {
  width: 90%;
  height: 90%;
  display: block;
  color: #1f2937;
}

.scheme-button-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: span 2;      /* 👈 Растянуть на 2 строки */
  padding: 0;                      /* убираем лишние внутренние отступы */
  margin: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: linear-gradient(to bottom, #f3f6fa, #e0e7ef);
  border: 1px solid #b6c4d7;
 background: transparent;  
}


/* Кнопка */
#schemeButton {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #f3f6fa, #e0e7ef);  box-shadow: none;
  box-sizing: border-box;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-shadow: none;
  padding: 5px;
  cursor: pointer;
}

/* Эффект при наведении */
#schemeButton:hover {
  background: linear-gradient(to bottom, #e6edf7, #d3dfef);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* Эффект при нажатии */
#schemeButton:active {
  background: linear-gradient(to bottom, #e0e0e0, #c8c8c8);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
  transform: translateY(1px);
}

/* Контейнер SVG внутри кнопки */
#schemeButton #currentLinkScheme {
  background: inherit; /* ← вот это */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;                   /* немного воздуха вокруг схемы */
  box-sizing: border-box;
}

/* SVG внутри кнопки */
#schemeButton svg {
  width: 100%;                      /* занимает почти всю кнопку */
  height: 100%;
  display: block;
  border: none !important;         /* убирает рамку SVG */
  outline: none !important;        /* убирает контур при фокусе */
  box-shadow: none !important;     /* убирает возможные внутренние тени */
  background: transparent !important;
}
#schemeButton svg path,
#schemeButton svg line,
#schemeButton svg rect {
  stroke-linecap: round;
  shape-rendering: geometricPrecision;
}

.spec-table {
  width: 95%;
  margin: 0px auto;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  table-layout: fixed; /* <-- фиксирует проценты */
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

.spec-table th,
.spec-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: left;
  font-size: 12px;
  color: #003366;
}

.spec-table th {
  text-align: center;
  background-color: #f8fafc;
  font-weight: bold;
}

.spec-table tfoot td {
  font-weight: 600;
  background-color: #f8fafc;
}

.price-input, .weight-input {
  width: 80px;
  text-align: right;
  color: #003366;
}

#total-cost, #total-weight {
  background-color: #fef3c7;
  color: #003366;
}


/* 🔹 Убираем стрелки только в таблице спецификации */
.spec-table input[type="number"]::-webkit-outer-spin-button,
.spec-table input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.spec-table input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

/* 🔹 Изменение размера шрифта в полях ввода */
.spec-table input[type="number"] {
  font-size: 12px;     /* ← выбери нужный размер */
  padding: 2px 4px;    /* уменьшить/увеличить отступы внутри */
  text-align: right;   /* выравнивание числа (по желанию) */
  width: 90%;          /* чтобы не прижималось к краям */
  box-sizing: border-box;
border: 1px solid #f8fafc;
}


.spec-table th:nth-child(1),
.spec-table td:nth-child(1) { width: 4%; }   /* № */
.spec-table th:nth-child(2),
.spec-table td:nth-child(2) { width: 30%; }  /* Наименование */
.spec-table th:nth-child(3),
.spec-table td:nth-child(3) { width: 12%; }  /* Кол-во */
.spec-table th:nth-child(4),
.spec-table td:nth-child(4) { width: 12%; }  /* Вес ед. */
.spec-table th:nth-child(5),
.spec-table td:nth-child(5) { width: 12%; }  /* Вес */
.spec-table th:nth-child(6),
.spec-table td:nth-child(6) { width: 15%; }  /* Цена за ед. */
.spec-table th:nth-child(7),
.spec-table td:nth-child(7) { width: 15%; }  /* Стоимость */


.spec-table th:nth-child(1),
.spec-table td:nth-child(1) {
  text-align: center;
  width: 5%;
}


.spec-table td:nth-child(2) {
  text-align: left;
  width: 25%;
}

.spec-table td:nth-child(3),
.spec-table td:nth-child(4),
.spec-table td:nth-child(5),
.spec-table td:nth-child(6),
.spec-table td:nth-child(7) {
  text-align: right;
}

/* Ячейки "Итого" — текст слева */
.spec-table tfoot td {
  font-weight: bold;
}
.spec-table tfoot td:nth-child(4),
.spec-table tfoot td:nth-child(6) {
  text-align: left;
}

.spec-table th, .spec-table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


.spec-table tfoot td:empty {
  background-color: #f8fafc;
}




.invoice-btn-wrap {
  display: flex;
  justify-content: center;
  margin: 2.4vh 0 2.0vh 0;
}



.invoice-btn-wrap {
  display: flex;
  justify-content: center;
  margin: 2.4vh 0 2.0vh 0;
}

/* Основная кнопка */
.action-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, #ffb347, #ff7b00);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  padding: 14px 36px;
  transition: all 0.25s ease;
  animation: pulseLight 3s infinite ease-in-out;
}

/* Наведение — мягкий золотистый оттенок */
.action-btn:hover {
  background: linear-gradient(145deg, #ffc86b, #ff9e42);
  filter: brightness(1.05);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Нажатие — чуть темнее, как нажали вглубь */
.action-btn:active {
  background: linear-gradient(145deg, #ff9933, #e27200);
  transform: translateY(1px);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25);
}

/* Мягкое дыхание */
@keyframes pulseLight {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  }
  50% {
    filter: brightness(1.1);
    box-shadow: 0 6px 14px rgba(255, 200, 80, 0.35);
  }
}

/* SVG-текст */
.btn-svg-text {
  height: 40px;
  width: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}





.accessory-carousel {
  position: relative;
  width: 100%;
  overflow: visible;
  background: #f8fafc;    /* ← вот этот цвет фона основного контейнера */
  border-top: none;
  border-bottom: none
  padding: 10px 0 0;
  height: 150px; /* фиксируем высоту */
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y; /* чтобы пальцем тянулось */
  perspective: 1000px; /* ✅ создаёт общий 3D контекст */
  margin-bottom: 0; /* уменьшает отступ под лентой border: solid #000; */

margin-top: 1vh;
}

.accessory-track {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  display: flex;
  position: relative; /* вместо absolute */
  will-change: transform;
  transform: translateZ(0); /* форсируем слой GPU */
  transform-style: preserve-3d; /* ✅ сохраняет глубину */
align-items: flex-end;
gap: 25px;
margin-bottom: 1vh;
}

.accessory-item {
  flex: 0 0 auto;
  width: 160px;
  text-align: center;
  background: #fff;
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  margin-right: 15px;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
 margin: 0;
  color: #003366;  
}

.accessory-item:last-child {
  margin-right: 0;
}

.accessory-item img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: contain;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
padding: 6px;
  max-width: 100%;           /*    не позволит вылезти за пределы */
  overflow: hidden;
  object-position: center;   /* центрирует изображение внутри */
}

.accessory-item p {
  margin: 6px 0;
  font-weight: 500;
  font-size: 14px;
}
.accessory-carousel:active {
  cursor: grabbing;
}

.accessory-item.active {
  transform: scale(1.5) translateZ(80px);
  z-index: 10;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* вспомогательный класс, пока карточка "уходит назад" */
.accessory-item.releasing {
  z-index: 10; /* держим на переднем плане, пока не закончится анимация */
}

.accessory-item.dimmed {
  transform: translateZ(-20px);
  opacity: 0.9;
}



.summary-table {
  width: 95%;
  margin: 10px auto 20px;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background: #f8fafc;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
margin-bottom: 0;
}

.summary-table td {
  border: 1px solid #cfd6e0;
  padding: 6px 8px;
  vertical-align: middle;
  color: #003366;
}

.summary-table strong {
  font-weight: 600;
}





.messenger-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 6000;
}

.messenger-modal.active {
  display: flex;
}

.modal-content {
  background: white;
  border-radius: 16px;
  padding: 24px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

.messenger-icons {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

/* Квадратная кнопка-мессенджер */
.messenger-icon {
  width: 70px;
  height: 70px;
  border: none;
  border-radius: 16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform; /* 👈 браузер готовит отдельный слой */
  backface-visibility: hidden;
  transform: translateZ(0); /* устраняет подёргивание шрифта */
  transform-origin: center center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* фон зададим ниже для каждого сервиса */
}

/* Скрываем сам <img>, используем его только как источник файла */
.messenger-icon > img { display: none; }

/* Рисуем белый знак поверх цветного фона через mask */
.messenger-icon::before {
  content: "";
  width: 40px;
  height: 40px;
  background: #fff;                      /* сам «цвет логотипа» = белый */
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}

/* Фирменные фоны + путь к svg через CSS-переменную */
.messenger-icon[data-type="whatsapp"] {
  --icon: url("svg/whatsapp.svg");
  background-color: #25D366;
}
.messenger-icon[data-type="telegram"] {
  --icon: url("svg/telegram.svg");
  background-color: #0088cc;
}
.messenger-icon[data-type="viber"] {
  --icon: url("svg/viber.svg");
  background-color: #7360F2;
}
.messenger-icon[data-type="email"] {
  --icon: url("svg/gmail.svg");
  background-color: #EA4335; /* Gmail-красный */
}

/* Ховер-эффект */
.messenger-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,.25);
}

/* === Авторский знак внизу страницы === */
.site-footer {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #555;
  margin-top: 24px;
  padding: 16px 0;
  background: #dbe3ec;  /* однотонно, современно */

  border-bottom: 1px solid #ccc;
}

.site-footer a {
  color: #0077cc;
  text-decoration: none;
  font-weight: 500;
}

.site-footer a:hover {
  text-decoration: underline;
}




/* 🟢 для summary фиксируем ширины, чтобы не "прыгали" */
.summary-table td:nth-child(odd) {
  width: 30%;
}
.summary-table td:nth-child(even) {
  width: 20%;
}

body {
  background-color: #6b8ea8 !important;
}




/* скрываем все печатные блоки при просмотре в браузере */
.print-layout
{
  display: none !important;
}


/* === Кнопка "Печать" над схемой (ПК) === */
#canvas-container #printBtn,
.canvas-buttons #printBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 0;
  line-height: 0;
  stroke: #002b55; /* чуть темнее, чем #003366 */
  transition: color 0.2s, transform 0.2s;
  stroke: currentColor;       /* 👈 теперь цвет из color */
  transition: transform 0.2s ease, stroke 0.2s ease;
  transform-origin: center center;
}

/* Центровка SVG — строго в середине */
#canvas-container #printBtn svg,
.canvas-buttons #printBtn svg {
  width: 22px;
  height: 22px;
  stroke: #444;
  display: block;
  margin: auto;
  transition: transform 0.2s ease, stroke 0.2s ease;
  transform-origin: center center;
}

/* Наведение */
#canvas-container #printBtn:hover,
.canvas-buttons #printBtn:hover {
  background: #e6e6e6;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#canvas-container #printBtn:hover svg,
.canvas-buttons #printBtn:hover svg {
  stroke: #111;
  transform: scale(1.1);
}

/* Нажатие */
#canvas-container #printBtn:active,
.canvas-buttons #printBtn:active {
  background: #dcdcdc;
color: #222;
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
}


.canvas-container {
  position: relative;
}

.canvas-wrap {
  position: relative;
  width: 100%;
}

/* --- Кнопка "Сохранить PNG" --- */
#savePngBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: #f5f5f5;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

#savePngBtn svg {
  width: 22px;
  height: 22px;
  stroke: #333;
  transition: transform 0.2s, stroke 0.2s;
}

#savePngBtn:hover {
  background: #e8e8e8;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

#savePngBtn:hover svg {
  stroke: #111;
  transform: scale(1.1);
}

#savePngBtn:active {
  background: #dcdcdc;
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.messenger-icon {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.messenger-icon img {
  width: 42px;
  height: 42px;
}

.messenger-icon:hover:not(.disabled) {
  transform: scale(1.1);
}

.messenger-icon.selected {
  outline: 2px solid #ff8800;
  border-radius: 8px;
}

.messenger-icon.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

#sendInvoiceBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}











#schemeButton:hover {
  background: #eef2f7;
  transform: translateY(-1px);
}

#schemeButton:active {
  background: #e0e6ed;
  transform: translateY(1px);
}

/* SVG внутри кнопки */
#schemeButton #currentLinkScheme {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}

#schemeButton svg {
  width: 95%;
  height: 95%;
  stroke: #003366;
  stroke-width: 1.4;
  display: block;
  shape-rendering: geometricPrecision;
}




/* печать и сохранить (иконки в заголовке и над схемой) */
.page-header #printBtn,
.canvas-wrap #savePngBtn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0B4D5A !important;           /* <-- тут задаёшь нужный цвет иконки */
  border-radius: 10px;
  padding: 6px;
  transition: background .2s ease, color .2s ease;
}
.page-header #printBtn:hover,
.canvas-wrap #savePngBtn:hover {
  background: rgba(0,0,0,0.06) !important;
  color: #0EA5A0 !important;           /* цвет при наведении */
}


.page-header #printBtn svg,
.canvas-wrap #savePngBtn svg {
  width: 20px; height: 20px; display: block;
  stroke: currentColor !important;
  fill: none !important;
}
.page-header #printBtn svg *,
.canvas-wrap #savePngBtn svg * {
  stroke: currentColor !important;
  fill: none !important;
}


button#savePngBtn,
button#printBtn {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}

button#savePngBtn:hover,
button#printBtn:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

button#savePngBtn:active,
button#printBtn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

button#savePngBtn svg,
button#printBtn svg {
  width: 20px;
  height: 20px;
  stroke: #0E767C; /* изумрудный акцент */
  transition: stroke 0.2s ease;
}

button#savePngBtn:hover svg,
button#printBtn:hover svg {
  stroke: #009C78; /* чуть ярче при наведении */
}

/* Подменю калькуляторов всегда раскрыто */
.has-submenu .submenu {
  display: block !important;
}

.lead-note{
  width: 95%;
  margin: 6px auto 10px;
  font-size: 11px;
  line-height: 1.3;
  color: #555;
  word-wrap: break-word;
}

/* клиентская версия: скрываем лишний функционал 
#specification{ display:none !important; }*/
#printBtn{ display:none !important; }
/* на всякий случай (даже если JS попытается открыть) */
#messengerModal, .messenger-modal{ display:none !important; }

.seo-hint{
  width:95%;
  margin:8px auto;
  font-size:12px;
  color:#6b7280;
}

#specification{
  max-height:0;
  overflow:hidden;
  opacity:0;
}

  </style>


