.cutting-calculator-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1000px;
            margin: 15px auto;
            background: linear-gradient(135deg, #f9f9ff 0%, #e6f0ff 100%);
            border-radius: 15px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            border: 1px solid #d0d8e8;
        }

        /* Заголовок */
        .calculator-title {
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e1e5ee;
        }

        .calculator-title h2 {
            font-size: 22px;
            color: #2c3e50;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .calculator-title p {
            color: #5a6a85;
            font-size: 16px;
        }

        /* Основное содержимое */
        .calc-content {
            display: flex;
            flex-wrap: wrap;
            padding: 25px;
        }

        /* Панель ввода данных */
        .input-panel {
            flex: 1;
            min-width: 300px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .input-row {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .input-group2 {
            flex: 1;
            min-width: 0;
        }

        .input-group2 label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 15px;
            display: flex;
            align-items: center;
        }

        .input-group2 label i {
            margin-right: 8px;
            color: #4a6491;
        }

        .input-control-group {
            display: flex;
            width: 100%;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            overflow: hidden;
            background-color: white;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
        }

        .number-btn {
            width: 40px;
            background: linear-gradient(135deg, #4a6491, #2c3e50);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s;
        }

        .number-btn:hover {
            background: linear-gradient(135deg, #5a74a1, #3c4e70);
        }

        .number-btn:active {
            transform: scale(0.95);
        }

        .number-input {
            flex: 1;
            border: none;
            padding: 14px 16px;
            font-size: 16px;
            text-align: center;
            min-width: 0;
            background-color: transparent;
        }

        .number-input:focus {
            outline: none;
        }

        /* Выбор типа бумаги */
        .paper-type-option {
            /* background-color: #fff3e0; */
            border-radius: 10px;
            padding: 15px;
            margin-top: 1px;
        }

        .paper-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

        .auto-rotate-option {
            display: flex;
            align-items: center;
            padding: 12px 0;
            margin-top: 15px;
        }

        .auto-rotate-option input {
            margin-right: 10px;
        }

        .kits-option {
            background-color: #fff8e6;
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
        }

        /* Блок пресетов размеров */
        .presets-section {
            background-color: #e6f7ff;
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
        }

        .presets-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }

        .preset-btn {
            flex: 1;
            min-width: 100px;
            padding: 10px 5px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            text-align: center;
            font-size: 14px;
        }

        .preset-btn:hover {
            background: #40a9ff;
            transform: translateY(-2px);
        }

        .preset-btn:active {
            transform: translateY(0);
        }

        .rotate-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #ffa940, #ff7a45);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
            transition: all 0.3s;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .rotate-btn:hover {
            background: linear-gradient(135deg, #ffb861, #ff9c6e);
            transform: translateY(-2px);
        }

        .rotate-btn:active {
            transform: translateY(0);
        }

        /* Блок цветности печати */
        .color-option {
            /* background-color: #f6ffed; */
            border-radius: 10px;
            padding: 15px;
            margin-top: 1px;

        }

        .color-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

        /* Стили для аккордеона */
            .post-processing-accordion {
              margin-top: 15px;
              border: 1px solid #d0d8e8;
              border-radius: 10px;
              overflow: hidden;
            }

            .post-processing-accordion details {
              background-color: #f8f9fa;
            }

            .post-processing-accordion summary {
              padding: 12px 15px;
              background: linear-gradient(135deg, #f0f4ff 0%, #e1e8ff 100%);
              cursor: pointer;
              font-weight: 600;
              color: #2c3e50;
              display: flex;
              align-items: center;
              list-style: none; /* Убираем стандартный маркер */
            }

            .post-processing-accordion summary::marker {
              display: none;
            }

            .post-processing-accordion summary::after {
              content: '▼';
              margin-left: auto;
              font-size: 12px;
              transition: transform 0.3s;
            }

            .post-processing-accordion details[open] summary::after {
              transform: rotate(180deg);
            }

            .accordion-content {
              padding: 10px;
              background-color: white;
              border-top: 1px solid #e1e5ee;
            }

        /* Панель результатов */
        .results-panel {
            flex: 1;
            min-width: 300px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* ДОБАВИТЬ ВЫРАВНИВАНИЕ */
            align-self: flex-start;
        }

        /* Ширина скотча: */
        .duct-tape select {
            width: 100%;
            padding: 14px; /* Высота полня ввода: */
            margin-top: 1px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

        /* Поля для фольги */
        .foil-tape select {
            width: 100%;
            padding: 14px; /* Высота полня ввода: */
            margin-top: 1px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

        /* Карточки */
        .combined-cost-card {
            display: flex;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 14px;
            box-shadow: 0 8px 10px rgba(0, 0, 0, 0.08);
            border: 1px solid #e1e5ee;
            position: relative;
            overflow: hidden;
        }

        .combined-cost-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #4a6491, #2c3e50);
        }

        .cost-section {
            flex: 1;
            padding: 20px;
            text-align: center;
        }

        .total-cost-section {
            background: linear-gradient(135deg, #ffffff 0%, #e8f5e9 100%);
            border-right: 1px solid #e1e5ee;
        }

        .per-item-section {
            background: linear-gradient(135deg, #ffffff 0%, #ffebee 100%);
        }

        .divider {
            width: 1px;
            background: #e1e5ee;
            margin: 15px 0;
        }

        @media (max-width: 768px) {
            .combined-cost-card {
                flex-direction: column;
            }

            .total-cost-section {
                border-right: none;
                border-bottom: 1px solid #e1e5ee;
            }

            .divider {
                width: 100%;
                height: 1px;
                margin: 0;
            }
        }

        /* Гл. карточки */
        .main-result-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            border: 1px solid #e1e5ee;
            position: relative;
            overflow: hidden;
        }

        .main-result-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #4a6491, #2c3e50);
        }

        .main-result-card.total-cost {
            background: linear-gradient(135deg, #ffffff 0%, #e8f5e9 100%);
            border: 2px solid #4CAF50;
            box-shadow: 0 10px 30px rgba(76, 175, 80, 0.2);
        }

        .main-result-card.cost-per-item {
            background: linear-gradient(135deg, #ffffff 0%, #ffebee 100%);
            border: 2px solid #f44336;
            box-shadow: 0 10px 30px rgba(244, 67, 54, 0.2);
        }

        .result-title {
            font-weight: 700;
            color: #4a6491;
            margin-bottom: 1px;
            font-size: 16px;
            display: flex;
            align-items: center;
            padding-left: 10px;
        }

        .result-value {
            font-size: 28px;
            font-weight: 800;
            color: #2c3e50;
            padding: 8px 0 5px 10px;
            letter-spacing: -0.5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 100%;
        }

        .result-value.smaller {
            font-size: 24px;
        }

        .result-value.smallest {
            font-size: 20px;
        }

        .cost-value {
            color: #2E7D32;
            position: relative;
            font-size: 32px;
        }

        .cost-value::after {
            content: 'руб';
            font-size: 18px;
            font-weight: 700;
            color: #388E3C;
            margin-left: 5px;
        }

        .per-item-value {
            color: #D32F2F;
            position: relative;
            font-size: 32px;
        }

        .per-item-value::after {
            content: 'руб/шт';
            font-size: 18px;
            font-weight: 700;
            color: #E53935;
            margin-left: 5px;
        }

        /* Карточки результатов */
        .additional-cards-container {
            display: flex;
            gap: 15px;
            margin-top: 1px;
            width: 100%;
        }

        .result-card {
            flex: 1;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 12px;
            padding: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e1e5ee;
            text-align: center;
            position: relative;
            overflow: hidden;
            min-height: 80px;
        }

        .result-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
        }

        .post-processing-card::before {
            background: linear-gradient(to bottom, #ff9800, #f57c00);
        }

        .cost-price-card::before {
            background: linear-gradient(to bottom, #4caf50, #2e7d32);
        }

        .production-time-card::before {
            background: linear-gradient(to bottom, #2196f3, #1976d2);
        }

        .result-card .result-title {
            font-weight: 600;
            color: #4a6491;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .result-card .result-value {
            font-size: 18px;
            font-weight: 700;
            color: #2c3e50;
        }

        @media (max-width: 768px) {
            .additional-cards-container {
                flex-direction: column;
            }

            .result-card {
                min-height: 70px;
            }
        }


        /* Список результатов */
        .result-list {
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e1e5ee;
            /* flex-grow: 1; */
            display: flex;
            flex-direction: column;
        }

        .result-list-title {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f4f8;
            font-size: 18px;
            display: flex;
            align-items: center;
        }

        .result-list-title i {
            margin-right: 10px;
        }

        .result-list-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 10px;
            border-bottom: 1px solid #f0f4f8;
            font-size: 15px;
        }

        .result-list-item:last-child {
            border-bottom: none;
        }

        .result-list-label {
            color: #5a6a85;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .result-list-label i {
            margin-right: 8px;
            color: #4a6491;
        }

        .result-list-value {
            color: #2c3e50;
            font-weight: 600;
            text-align: right;
            min-width: 100px;
        }

        /* Визуал */
        .visualization {
            display: block;
            padding: 25px;
            background-color: #f8f9fa;
            border-top: 1px solid #e1e5ee;
            border-bottom: 1px solid #e1e5ee;
        }

        .generate-btn {
            background: linear-gradient(135deg, #4a6491, #2c3e50);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 14px;
        }

        .generate-btn:hover {
            background: linear-gradient(135deg, #5a74a1, #3c4e70);
            transform: translateY(-2px);
        }

        .generate-btn:active {
            transform: translateY(0);
        }

        .visual-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .visual-title {
            font-weight: 700;
            color: #2c3e50;
            font-size: 18px;
        }

        .sheet-container {
            background-color: #e1e5ee;
            border: 2px solid #a5b1c2;
            margin: 0 auto;
            position: relative;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            border-radius: 6px;
        }

        .item {
            background-color: #e74c3c;
            position: absolute;
            border: 1px solid #c0392b;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2);
        }

        .item.rotated {
            background-color: #3498db;
        }

        .legend {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 30px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            font-size: 15px;
            color: #2c3e50;
            font-weight: 500;
        }

        .legend-color {
            width: 25px;
            height: 25px;
            margin-right: 10px;
            border: 1px solid rgba(0,0,0,0.1);
            border-radius: 4px;
        }

        .legend-sheet {
            background-color: #e1e5ee;
        }

        .legend-product {
            background-color: #e74c3c;
        }

        .legend-rotated {
            background-color: #3498db;
        }

        .legend-gap {
            background-color: #f8f9fa;
            border: 1px dashed #a5b1c2;
        }

        .orientation-info {
            background-color: #e3f2fd;
            padding: 10px 15px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .orientation-info i {
            margin-right: 10px;
            font-size: 20px;
        }

        /* Инфо блок */
        .info-note {
            background-color: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 20px;
            margin: 25px;
            border-radius: 0 12px 12px 0;
            font-size: 15px;
            line-height: 1.6;
            color: #2c3e50;
        }

        /* Выбор ламинации */
        .lamination-option {
            /* background-color: #f0f8ff; */
            border-radius: 10px;
            padding: 15px;
            margin-top: 1px;
        }

        .lamination-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 10px;
        }

        .lamination-group {
            flex: 1;
            min-width: 200px;
        }

        .lamination-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

         /* Блок биговки */
        .creasing-option {
            /* background-color: #fff3e0; */
            border-radius: 10px;
            border: 1px solid #d0e3ff;
            padding: 15px;
            margin-top: 1px;
        }

        .creasing-option .input-group2 {
            width: 100%;
        }

        .method-selection {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            background: white;
            border-radius: 8px;
            border: 2px solid #d0d8e8;
            transition: all 0.3s;
        }



        .radio-option:hover {
            border-color: #4a6491;
            background-color: #f0f4ff;
        }

        .radio-option input {
            margin: 0;
        }

        /* Блока скругления углов */
            .corner-rounding-option {
            /* background-color: #f0f7ff; */
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
            border: 1px solid #d0e3ff;
        }

        /* Блока сверления */
        .drilling-option {
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
            border: 1px solid #d0e3ff;
        }

        .drilling-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

        @media (max-width: 768px) {
            .calc-content {
                flex-direction: column;
            }

            .results-panel {
                grid-template-columns: 1fr;
            }

            .sheet-container {
                max-width: 100%;
            }

            .calc-header h2 {
                font-size: 24px;
            }

            .calc-header p {
                font-size: 15px;
            }

            .input-row {
                flex-direction: column;
                gap: 20px;
            }

            .presets-row {
                flex-direction: column;
            }

            .lamination-row {
                flex-direction: column;
                gap: 10px;
            }
        }

        @media (max-width: 480px) {
            .input-panel, .results-panel {
                padding: 10px;
            }

            .calc-content {
                padding: 15px;
            }

            .visualization {
                padding: 15px;
            }

            .result-value {
                font-size: 24px;
            }

            .cost-value, .per-item-value {
                font-size: 26px;
            }

            .legend {
                gap: 15px;
                flex-direction: column;
                align-items: center;
            }

            .number-btn {
                width: 35px;
                font-size: 16px;
            }

            .preset-btn {
                min-width: 80px;
                font-size: 13px;
                padding: 8px 4px;
            }

            .result-list-item {
                flex-direction: column;
                gap: 5px;
            }

            .result-list-value {
                text-align: left;
            }
        }

        @media (max-width: 768px) {
            .calc-header {
                padding: 12px 15px;
            }

            .calc-header h2 {
                font-size: 20px;
            }

            .calc-header p {
                font-size: 14px;
            }
        }

        /* Компакт. блок размеров изделия */
        .item-size-row {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .item-size-inputs {
            flex: 2;
            min-width: 250px;
            display: flex;
            gap: 15px;
        }

        /* .size-input-group {
            flex: 1;
            min-width: 0;
        } */

        .presets-dropdown-container {
            flex: 1;
            min-width: 200px;
        }

        .presets-dropdown {
            width: 100%;
            padding: 12px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
        }

        .presets-dropdown {
            width: 100%;
            padding: 12px;
            border: 2px solid #d0d8e8;
            border-radius: 10px;
            background-color: white;
            font-size: 15px;
            cursor: pointer;
            transition: border-color 0.3s;
        }

        .presets-dropdown:hover {
            border-color: #4a6491;
        }

        /* Стили label для иконки поворота */
        .input-group2 label {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
        }

        /* Кнопка ротейт */
        .rotate-icon-btn {
          background: none;
          border: none;
          cursor: pointer;
          width: 24px;
          height: 20px;
          padding: 4px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #5a6a85;
          transition: all 0.2s;
        }

        .rotate-icon-btn:hover {
          background-color: rgba(74, 100, 145, 0.1);
          color: #2c3e50;
        }

        .rotate-icon-btn:active {
          transform: scale(0.9);
        }

        .rotate-icon-btn svg {
          display: block;
          stroke: currentColor;
          stroke-width: 2;
          fill: none;
        }

        @media (max-width: 768px) {
            .item-size-inputs {
                flex-direction: column;
            }

            .presets-dropdown-container {
                min-width: 100%;
            }
        }

        /* Для мобилок */
            @media (max-width: 768px) {
            .paper-group .input-row {
            flex-direction: column;
            gap: 15px;
            }
        }


        .floating-cost-container {
            position: fixed;
            bottom: 0;
            left: 0;
            transform: none;
            background: linear-gradient(135deg, #f9f9ff 0%, #e6f0ff 100%);
            padding: 5px 10px;
            box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
            z-index: 1000;
            border-top: 1px solid #d0d8e8;
            border-radius: 0 15px 0 0;
            max-width: 300px;
            width: auto;
            display: block;
        }

        .floating-cost-card {
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .floating-cost-section {
            flex: 1;
            padding: 8px;
            text-align: center;
            border-radius: 8px;
            min-width: 70px;
        }

        .floating-cost-section.total-cost-section {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
        }

        .floating-cost-section.per-item-section {
            background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
        }

        .floating-result-title {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 3px;
            font-size: 12px;
        }

        .floating-result-value {
            font-size: 16px;
            font-weight: 800;
            color: #2c3e50;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .floating-divider {
            width: 1px;
            background: #e1e5ee;
            margin: 10px 0;
        }

        .cutting-calculator-container {
            margin-bottom: 60px;
        }

    @media (max-width: 768px) {
        .floating-cost-container {
            display: none;
            bottom: 70px; /* Поднимаем над кнопкой */
        }

        /* Показываем при активации чекбокса */
        #toggle-floating:checked ~ .floating-cost-container {
            display: block !important;
        }

        /* Кнопка переключения */
        .floating-toggle {
            display: flex;
            position: fixed;
            bottom: 15px;
            right: 15px;
            z-index: 1001;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4a6491, #2c3e50);
            color: white;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            cursor: pointer;
        }

        .floating-toggle::after {
            content: "💰";
        }

        /* Скрываем чекбокс */
        #toggle-floating {
            display: none;
        }
    }

            /* Кнопка экспорта */
                .export-btn {
                    background: linear-gradient(135deg, #27ae60, #2ecc71);
                    color: white;
                    border: none;
                    padding: 10px 15px;
                    border-radius: 8px;
                    cursor: pointer;
                    font-weight: 600;
                    transition: all 0.3s;
                    font-size: 14px;
                    margin-left: 10px;
                }

                .export-btn:hover {
                    background: linear-gradient(135deg, #2ecc71, #27ae60);
                    transform: translateY(-2px);
                }

                .export-btn:active {
                    transform: translateY(0);
                }

                .visual-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;
                    flex-wrap: wrap;
                }
            /* Группы кнопок экспорта и визуализации */
                .btn-group {
                    display: flex;
                    gap: 10px;
                }

            /* Для десктопов: кнопки справа */
                @media (min-width: 769px) {
                    .visual-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }

                    .btn-group {
                        margin-left: auto;
                        flex-direction: row;
                    }
                }

            /* Для мобильных: вертикальное расположение кнопок */
                @media (max-width: 768px) {
                    .visual-header {
                        flex-direction: column;
                        align-items: stretch;
                    }

                .btn-group {
                    width: 100%;
                    flex-direction: column;
                    gap: 8px;
                    margin-top: 10px;
                    margin-left: 0;
                }

                .btn-group button {
                    width: 100%;
                    box-sizing: border-box;
                    padding: 12px 15px;
                    font-size: 16px;
                    margin-left: 0 !important;
                }
            /* Для очень мал. экранов */
            @media (max-width: 480px) {
                .visual-header {
                    padding: 10px;
                }

                .visual-title {
                    font-size: 18px;
                    margin-bottom: 10px;
                }
            }

            .share-btn {
                background: linear-gradient(135deg, #25D366, #128C7E);
                /* Зеленый цвет WhatsApp */
            }
        
</head>
<body>
    <input type="checkbox" id="toggle-floating">
<label for="toggle-floating" class="floating-toggle"></label>
    <!-- Контейнер с дубликатами карточек -->
<div class="floating-cost-container">
    <div class="floating-cost-card">
        <!-- Первая строка -->
        <div class="floating-row">
            <div class="floating-cost-section total-cost-section">
                <div class="floating-result-title">Стоимость</div>
                <div class="floating-result-value total-cost-display" id="floatingTotalCost">0</div>
            </div>
            <div class="floating-cost-section per-item-section">
                <div class="floating-result-title">За изделие</div>
                <div class="floating-result-value cost-per-item-display" id="floatingCostPerItem">0</div>
            </div>
        </div>

        <!-- Вторая строка -->
        <div class="floating-row">
            <div class="floating-cost-section" style="background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);">
                <div class="floating-result-title">Постпечатка</div>
                <div class="floating-result-value" id="floatingPostProcessing">0</div>
            </div>
            <div class="floating-cost-section" style="background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);">
                <div class="floating-result-title">Себестоимость</div>
                <div class="floating-result-value" id="floatingCostPrice">0</div>
            </div>
            <div class="floating-cost-section" style="background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);">
                <div class="floating-result-title">Время</div>
                <div class="floating-result-value" id="floatingTime">0 мин</div>
            </div>
        </div>
    </div>
</div>

    <div class="cutting-calculator-container">
        <div class="calc-content">
            <!-- Панель ввода данных -->
            <div class="input-panel">
        <div class="calculator-title">
            <h2>Калькулятор расчета стоимости</h2>
        </div>
                <!-- Размеры листа -->
                <div class="input-row">
                    <div class="input-group2">
                        <label for="sheetWidth">Ширина листа (мм):</label>
                        <div class="input-control-group">
                            <input type="number" class="number-input" id="sheetWidth" min="1" value="320" step="1" readonly>
                        </div>
                    </div>

                    <div class="input-group2">
                        <label for="sheetHeight">Длина листа (мм):</label>
                        <div class="input-control-group">
                            <input type="number" class="number-input" id="sheetHeight" min="1" value="450" step="1" readonly>
                        </div>
                    </div>
                </div>

                <!-- Размеры изделия -->
                <div class="input-row">
                  <div class="input-group2">
                    <label for="itemWidth">Ширина изделия (мм):</label>
                    <div class="input-control-group">
                      <button class="number-btn minus" data-target="itemWidth">-</button>
                      <input type="number" class="number-input" id="itemWidth" value="60">
                      <button class="number-btn plus" data-target="itemWidth">+</button>
                    </div>
                  </div>

                  <div class="input-group2">
                    <label for="itemHeight">
                      Высота изделия (мм):
                      <button id="rotateIcon" class="rotate-icon-btn" title="Повернуть изделие на 90°">
                        <svg width="16" height="16" viewBox="0 0 24 24">
                          <path d="M17 2l4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3"/>
                        </svg>
                      </button>
                    </label>
                    <div class="input-control-group">
                      <button class="number-btn minus" data-target="itemHeight">-</button>
                      <input type="number" class="number-input" id="itemHeight" value="80">
                      <button class="number-btn plus" data-target="itemHeight">+</button>
                    </div>
                  </div>
                </div>

                <!-- Пресеты размеров -->
        <div class="input-group2">
            <label for="sizePresets">Пресеты размеров:</label>
            <select id="sizePresets" class="presets-dropdown">
                <option value="custom" selected>Выберите пресет</option>
                <option value="a7" data-width="74" data-height="105">А7 (74×105)</option>
                <option value="a6" data-width="105" data-height="148">А6 (105×148)</option>
                <option value="a5" data-width="148" data-height="210">А5 (148×210)</option>
                <option value="a4" data-width="210" data-height="297">А4 (210×297)</option>
                <option value="a3" data-width="297" data-height="420">А3 (297×420)</option>
                <option value="euro" data-width="98" data-height="210">Евро (98×210)</option>
                <option value="visiting" data-width="90" data-height="50">Визитка (90×50)</option>
                <option value="eurovisiting" data-width="85" data-height="55">Евровизитка (85×55)</option>
            </select>
        </div>

                <div class="input-group2">
                    <label for="gap">Вылеты (мм):</label>
                    <div class="input-control-group">
                        <button type="button" class="number-btn minus" data-target="gap">-</button>
                        <input type="number" class="number-input" id="gap" min="0" value="3" step="1">
                        <button type="button" class="number-btn plus" data-target="gap">+</button>
                    </div>
                </div>



                <!-- Цветность печати -->
                <div class="color-option">
                    <div class="color-group">
                    <div class="input-group2">
                        <label for="colorPrinting">Цветность печати:</label>
                        <select id="colorPrinting">
                            <option value="1+0">1+0 (Односторонняя печать)</option>
                            <option value="1+1">1+1 (Двусторонняя печать)</option>
                            <option value="4+0">4+0 (Цветная с одной стороны)</option>
                            <option value="4+4">4+4 (Цветная с двух сторон)</option>
                        </select>
                    </div>
                </div>
                </div>

                <!-- Тип материала -->
<div class="paper-type-option">
    <div class="paper-group">
        <div class="input-row">
            <!-- Выбор фактуры -->
            <div class="input-group2">
                <label for="paperTexture">Тип бумаги:</label>
                <select id="paperTexture">
                    <option value="coated_matte">Мелованные матовые</option>
                    <option value="coated_glossy">Мелованные глянцевые</option>
                    <option value="offset">Офсетные</option>
                    <option value="c2s_glossy">Картон C2S глянцевый</option>
                    <option value="self_adhesive">Самоклейка</option>
                </select>
            </div>

            <!-- Выбор плотности -->
            <div class="input-group2">
                <label for="paperDensity">Плотность:</label>
                <select id="paperDensity">
                </select>
            </div>
        </div>
    </div>
</div>


                <div class="post-processing-accordion">
                  <details>
                    <summary>Постпечатная обработка</summary>
                    <div class="accordion-content">

                <!-- Ламинация -->
                <div class="lamination-option">
                    <div class="lamination-row">
                        <div class="lamination-group">
                            <div class="input-group2">
                            <label for="laminationSides">Ламинация:</label>
                            <select id="laminationSides">
                                <option value="none">Без ламинации</option>
                                <option value="one">Одна сторона</option>
                                <option value="two">Две стороны</option>
                            </select>
                        </div>

                        <div class="lamination-group" id="laminationEquipmentContainer" style="display:none;">
                            <label for="laminationEquipment">Оборудование:</label>
                            <select id="laminationEquipment">
                                <optgroup label="GMP">
                                    <option value="gmp_matte">Матовая 28 мкм</option>
                                    <option value="gmp_glossy">Глянцевая 28 мкм</option>
                                    <option value="gmp_soft">Soft Touch 28 мкм</option>
                                </optgroup>
                                <optgroup label="China">
                                    <option value="china_matte">Матовая 28 мкм</option>
                                    <option value="china_glossy">Глянцевая 28 мкм</option>
                                    <option value="china_soft">Soft Touch 28 мкм</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
                </div>


                <!-- Биговка -->
                <div class="creasing-option">
                    <div class="input-group2">
                        <label>Биговка:</label>
                        <div class="method-selection">
                            <label class="radio-option">
                                <input type="radio" name="creasingMethod" value="manual" checked>
                                <span>Ручная</span>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="creasingMethod" value="automatic">
                                <span>Автомат</span>
                            </label>
                        </div>

                        <div class="input-row">
                            <div class="input-group2">
                                <label for="creasingCount">Кол-во бигов:</label>
                                <div class="input-control-group">
                                    <button type="button" class="number-btn minus" data-target="creasingCount">-</button>
                                    <input type="number" class="number-input" id="creasingCount" min="0" max="10" value="0" step="1">
                                    <button type="button" class="number-btn plus" data-target="creasingCount">+</button>
                                </div>
                            </div>

                            <div class="input-group2">
                                <label for="foldingCount">Кол-во фальцев:</label>
                                <div class="input-control-group">
                                    <button type="button" class="number-btn minus" data-target="foldingCount">-</button>
                                    <input type="number" class="number-input" id="foldingCount" min="0" max="10" value="0" step="1">
                                    <button type="button" class="number-btn plus" data-target="foldingCount">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Скругление углов -->
                <div class="corner-rounding-option">
                    <div class="input-group2">
                        <label>Скругление углов:</label>
                        <div class="method-selection">
                            <label class="radio-option">
                                <input type="radio" name="cornerRoundingMethod" value="automatic" checked>
                                <span>Автомат</span>
                            </label>
                            <label class="radio-option">
                                <input type="radio" name="cornerRoundingMethod" value="manual">
                                <span>Ручное</span>
                            </label>
                        </div>

                        <div class="input-control-group">
                            <button type="button" class="number-btn minus" data-target="cornerRounding">-</button>
                            <input type="number" class="number-input" id="cornerRounding" min="0" max="4" value="0" step="1">
                            <button type="button" class="number-btn plus" data-target="cornerRounding">+</button>
                        </div>

                        <div class="explanation" style="font-size: 13px; color: #7f8c8d; margin-top: 8px; text-align: center;">
                            <i>ℹ️</i> Укажите количество углов для скругления (0-4)
                        </div>
                    </div>
                </div>

                 <!-- Сверления -->
                <div class="drilling-option">
                    <div class="drilling-group">
                    <div class="input-group2">
                        <label for="drillingSize">Сверление:</label>
                        <select id="drillingSize">
                            <option value="none">Без сверления</option>
                            <option value="2mm">2 мм</option>
                            <option value="3mm">3 мм</option>
                            <option value="4mm">4 мм</option>
                            <option value="5mm">5 мм</option>
                        </select>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        </details>


                <!-- Аккор доп обработки -->
                <div class="post-processing-accordion">
                  <details>
                    <summary>Дополнительная обработка</summary>
                    <div class="accordion-content">
                      <!-- Двусторонн. скотч -->
                      <div class="double-tape-option">
                        <div class="input-group2">
                          <label>
                            <input type="checkbox" id="doubleTapeEnabled"> Двусторонний скотч
                          </label>
                        </div>

                        <div id="doubleTapeOptions" style="display: none; margin-top: 15px;">
                          <div class="input-row">
                            <div class="input-group2">
                              <label for="tapeLength">Длина на изделие (мм):</label>
                              <div class="input-control-group">
                                <input type="number" class="number-input" id="tapeLength" min="1" value="100" step="1">
                              </div>
                            </div>

                            <div class="input-group2">
                              <div class="duct-tape">
                              <label for="tapeWidth">Ширина скотча:</label>
                              <select id="tapeWidth">
                                <option value="3">4 мм</option>
                                <option value="5">5 мм</option>
                                <option value="10">6 мм</option>
                                <option value="20">10 мм</option>
                              </select>
                            </div>
                            </div>
                          </div>

                          <div class="input-group2">
                            <label for="tapeStrips">Кол-во полос на изделие:</label>
                            <div class="input-control-group">
                              <button type="button" class="number-btn minus" data-target="tapeStrips">-</button>
                              <input type="number" class="number-input" id="tapeStrips" min="1" value="1" step="1">
                              <button type="button" class="number-btn plus" data-target="tapeStrips">+</button>
                            </div>
                          </div>
                        </div>

                    <!-- Фольгирование -->
                    <div class="foiling-option">
                        <div class="input-group2">
                            <label>
                                <input type="checkbox" id="foilingEnabled"> Фольгирование
                            </label>
                        </div>
                        <div id="foilingOptions" style="display: none; margin-top: 15px;">
                            <div class="input-row">
                                <!-- Ширина фольги -->
                                <div class="input-group2">
                                    <div class="duct-tape">
                                    <label for="foilingWidth">Ширина:</label>
                                    <select id="foilingWidth">
                                        <option value="21">21 см</option>
                                        <option value="30">30 см</option>
                                    </select>
                                    </div>
                                </div>

                                <!-- Стороны фольги -->
                                <div class="input-row">
                                    <div class="input-group2">
                                        <div class="duct-tape">
                                        <label for="foilingSides">Стороны:</label>
                                        <select id="foilingSides">
                                            <option value="one">Одна сторона</option>
                                            <option value="two">Две стороны</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Цвет фольги -->
                                <div class="input-group2">
                                    <div class="duct-tape">
                                    <label for="foilingColor">Цвет:</label>
                                    <select id="foilingColor">
                                        <option value="gold">Золото</option>
                                        <option value="silver">Серебро</option>
                                    </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    </div>
            </details>
        </div>

                <div class="input-row">
                    <!-- Тираж -->
                    <div class="kits-option input-group2">
                        <label for="quantity">Тираж:</label>
                        <div class="input-control-group">
                            <button type="button" class="number-btn minus" data-target="quantity">-</button>
                            <input type="number" class="number-input" id="quantity" min="1" value="100" step="50">
                            <button type="button" class="number-btn plus" data-target="quantity">+</button>
                        </div>
                    </div>

                    <!-- Комплекты -->
                    <div class="kits-option input-group2">
                        <label for="kits">Комплекты:</label>
                        <div class="input-control-group">
                            <button type="button" class="number-btn minus" data-target="kits">-</button>
                            <input type="number" class="number-input" id="kits" min="1" max="10" value="1" step="1">
                            <button type="button" class="number-btn plus" data-target="kits">+</button>
                        </div>
                        <div class="explanation" style="font-size: 13px; color: #7f8c8d; margin-top: 8px; text-align: center;">
                           <!--  <i>ℹ️</i> Все значения будут умножены на количество комплектов -->
                        </div>
                    </div>
                </div>


                <div class="auto-rotate-option">
                    <input type="checkbox" id="autoRotate" checked>
                    <label for="autoRotate">Автоповорот изделий для оптимизации раскладки</label>
                </div>

            </div>

            <div class="results-panel">
                <!-- Карточка стоимости -->
                <div class="combined-cost-card">
                    <div class="cost-section total-cost-section">
                        <div class="result-title">
                            Общая стоимость
                        </div>
                        <div class="result-value cost-value" id="totalCost">0</div>
                    </div>
                    <div class="divider"></div>
                    <div class="cost-section per-item-section">
                        <div class="result-title">
                            За изделие
                        </div>
                        <div class="result-value per-item-value" id="costPerItem">0</div>
                    </div>
                </div>

                <!-- Три карточки с результатами -->
<div class="additional-cards-container">
    <div class="result-card post-processing-card">
        <div class="result-title">Постпечатка</div>
        <div class="result-value" id="postProcessingCost">0 руб</div>
    </div>

    <div class="result-card cost-price-card">
        <div class="result-title">Себестоимость</div>
        <div class="result-value" id="totalCostPrice">0 руб</div>
    </div>

    <div class="result-card production-time-card">
        <div class="result-title">Время</div>
        <div class="result-value" id="totalProductionTime">0 мин</div>
    </div>
</div>

                <!-- Остальные результаты -->
                <div class="result-list">
                    <div class="result-list-title">
                        Детали расчета
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Изделий на листе
                        </div>
                        <div class="result-list-value" id="perSheet">0</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Требуется листов
                        </div>
                        <div class="result-list-value" id="sheetsNeeded">0</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Эффективность раскроя
                        </div>
                        <div class="result-list-value" id="efficiency">0%</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Всего изделий
                        </div>
                        <div class="result-list-value" id="totalItems">0</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Тип материала
                        </div>
                        <div class="result-list-value" id="paperTypeResult">-</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Цветность печати
                        </div>
                        <div class="result-list-value" id="colorPrintingResult">1+0</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Стоимость печати
                        </div>
                        <div class="result-list-value" id="printingCost">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Стоимость бумаги
                        </div>
                        <div class="result-list-value" id="paperSellingCost">0 руб</div>
                    </div>

                     <div class="result-list-item">
                        <div class="result-list-label">
                            Вес тиража
                        </div>
                        <div class="result-list-value" id="totalWeight">0 кг</div>
                    </div>
                </div>

                <div class="post-processing-accordion">
                  <details>
                    <summary>Постпечатные работы</summary>
                    <div class="accordion-content">


                    <div class="result-list-item">
                        <div class="result-list-label">
                            Ламинация
                        </div>
                        <div class="result-list-value" id="laminationCostTotal">0 руб</div>
                    </div>

                <div class="result-list-item">
                     <div class="result-list-label">
                            Расход пленки
                    </div>
                    <div class="result-list-value" id="laminationFilmUsage">0 п.м.</div>
                </div>

                <div class="result-list-item">
                    <div class="result-list-label">
                        Биговка
                    </div>
                    <div class="result-list-value" id="creasingCostTotal">0 руб</div>
                </div>
                <div class="result-list-item">
                    <div class="result-list-label">
                        Фальцовка
                    </div>
                    <div class="result-list-value" id="foldingCostTotal">0 руб</div>
                </div>

                <div class="result-list-item">
                    <div class="result-list-label">
                        Скругление углов
                    </div>
                    <div class="result-list-value" id="cornerRoundingCostTotal">0 руб</div>
                </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Фольгирование
                        </div>
                        <div class="result-list-value" id="foilingCostTotal">0 руб</div>
                    </div>
                    <div class="result-list-item">
                        <div class="result-list-label">
                            Расход фольги
                        </div>
                        <div class="result-list-value" id="foilingUsage">0 п.м.</div>
                    </div>

                    </div>
                  </details>
                </div>


                                <div class="post-processing-accordion">
                  <details>
                    <summary>Время на производство</summary>
                    <div class="accordion-content">

                    <div class="result-list-item">
                        <div class="result-list-label">
                            <i>⏱️</i> Время печати
                        </div>
                        <div class="result-list-value" id="printingTime">-</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                             Время резки
                        </div>
                        <div class="result-list-value" id="cuttingTime">-</div>
                    </div>

                    <div class="result-list-item">
                         <div class="result-list-label">
                            Время ламинации
                        </div>
                    <div class="result-list-value" id="laminationTime">-</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Время биговки
                        </div>
                        <div class="result-list-value" id="creasingTime">-</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Время фальцовки
                        </div>
                        <div class="result-list-value" id="foldingTime">-</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Время скругления углов
                        </div>
                        <div class="result-list-value" id="cornerRoundingTime">-</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Время фольгирования
                        </div>
                        <div class="result-list-value" id="foilingTime">-</div>
                    </div>

                    <div class="result-list-item" style="font-weight: bold; border-top: 1px solid #ccc;">
                        <div class="result-list-label">Итого время</div>
                        <div class="result-list-value" id="totalProductionTimeResult">-</div>
                    </div>

                    </div>
                  </details>
                </div>

                <div class="post-processing-accordion">
                  <details>
                    <summary>Себестоимость тиража</summary>
                    <div class="accordion-content">

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Себестоимость печати
                        </div>
                        <div class="result-list-value" id="printingCostPrice">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Бумага за изделие
                        </div>
                        <div class="result-list-value" id="paperCostPerItem">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Бумага за тираж
                        </div>
                        <div class="result-list-value" id="paperCostForRun">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                        Себестоимость ламинации
                    </div>
                    <div class="result-list-value" id="laminationCostPrice">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Себестоимость биговки (min)
                        </div>
                        <div class="result-list-value" id="creasingCostPrice">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Себестоимость фальцовки (min)
                        </div>
                        <div class="result-list-value" id="foldingCostPrice">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Себестоимость скругления углов (min)
                        </div>
                        <div class="result-list-value" id="cornerRoundingCostPrice">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Себестоимость фольгирования
                        </div>
                        <div class="result-list-value" id="foilingCostPrice">0 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Предпечатная подготовка
                        </div>
                        <div class="result-list-value" id="prepressCost">100 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">
                            Приладка
                        </div>
                        <div class="result-list-value" id="makereadyCost">140 руб</div>
                    </div>

                    <div class="result-list-item">
                        <div class="result-list-label">Налоги 6%</div>
                        <div class="result-list-value" id="taxAmount">0 руб</div>
                    </div>

                <div class="result-list-item" style="font-weight: bold; border-top: 1px solid #ccc;">
                    <div class="result-list-label">Итого с налогом</div>
                    <div class="result-list-value" id="totalCostWithTax">0 руб</div>
                </div>
                    </div>
                  </details>
                </div>

            </div>
        </div>

        <div class="info-note">
            <strong>💡 Примечание:</strong>
            При включенной опции автоповорота изделия могут быть повернуты на 90°, если это позволяет разместить больше изделий на листе.
            Параметр "Комплекты" умножает все расчётные значения на указанное количество (от 1 до 10).
        </div>

        <!-- Визуал -->
        <div class="visualization">
            <div class="visual-header">
                <div class="visual-title">Схема расположения изделий на листе</div>
                <div class="btn-group">
                    <button id="generateLayoutBtn" class="generate-btn">Сформировать раскладку</button>
                    <!-- PDF (потом) -->
                    <button id="shareWhatsAppBtn" class="export-btn">Поделиться в WhatsApp</button>
                </div>
            </div>
            <div id="sheetVisual" class="sheet-container"></div>

            <div class="orientation-info">
                <i>🔄</i>
                <span id="orientationText">Используется стандартная ориентация изделий</span>
            </div>

            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color legend-sheet"></div>
                    <span>Лист материала</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color legend-product"></div>
                    <span>Стандартная ориентация</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color legend-rotated"></div>
                    <span>Повернутые изделия</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color legend-gap"></div>
                    <span>Технологический зазор</span>
                </div>
            </div>
        </div>
    </div>