/* =========================================
   1. БАЗОВАЯ НАСТРОЙКА И ЛЕЙАУТ
   ========================================= */

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f4;
    overflow: hidden; /* Скролл только внутри панелей */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Компенсация глобального меню */
/* Глобальное меню Apple-style обычно float или absolute, поэтому нам нужно отступить */
#appContainer {
    margin-top: 80px; /* Высота GlobalNav + TopMenu */
    height: calc(100vh - 80px); /* Строгая высота рабочей области */
    display: flex; /* Flex-контейнер для 3-х колонок */
    width: 100vw;
}


/* =========================================
   2. ВЕРХНЕЕ МЕНЮ (TOOLBAR)
   ========================================= */
#topMenu {
    position: fixed;
    top: 44px; /* Сразу под глобальным меню (если оно 44px) */
    left: 0;
    right: 0;
    height: 36px;
    background: #2d2d2d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 900;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toolbar-group {
    display: flex;
    gap: 10px;
}

.top-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #e0e0e0;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

button.top-btn:active {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(1px);
}

/* Спец. стиль для кнопок только с иконкой (Undo/Redo) */
button.top-btn.icon-only {
    padding: 0 8px;
}

.top-btn.save-load-btn {
    border-color: #4CAF50;
    color: #81c784;
}
.top-btn.save-load-btn:hover {
    background: rgba(76, 175, 80, 0.2);
    color: #fff;
}

/* ================================================================ */
/* === ФИКС КЛИКАБЕЛЬНОСТИ КНОПОК ПОД МЕНЮ === */
/* ================================================================ */

/* 1. Делаем контейнер верхнего меню "прозрачным" для кликов мыши */
#ac-globalnav, 
#ac-globalnav .ac-gn-content,
#ac-globalnav .ac-gn-list {
    pointer-events: none;
}

/* 2. НО! Возвращаем кликабельность всем активным элементам внутри меню */
/* Ссылки, лейблы (для мобильного меню), инпуты */
#ac-globalnav a,
#ac-globalnav label,
#ac-globalnav input,
#ac-globalnav button {
    pointer-events: auto;
}

/* =========================================
   3. ЛЕВАЯ ПАНЕЛЬ (КРАСИВАЯ)
   ========================================= */
#leftPanel {
    /* ЖЕСТКИЕ РАЗМЕРЫ, КАК ТЫ ПРОСИЛ */
    flex: 0 0 15%; /* Не сжиматься, базовая ширина 15% */
    min-width: 260px; /* Минимум 260px (чуть шире для карточек) */
    max-width: 350px;
    background: #fff;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    z-index: 10;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* Закрепленный блок (Управление) */
.lp-fixed-section {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}

.lp-fixed-section h3 {
    margin: 0 0 10px 0;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Скроллируемая область */
.lp-scroll-section {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Стили Аккордеона */
details.lp-details {
    border-bottom: 1px solid #f0f0f0;
}

summary.lp-summary {
    padding: 14px 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    background: #fff;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

summary.lp-summary:hover {
    background-color: #fbfbfb;
    color: #007aff;
}

/* Убираем стандартный треугольник */
summary.lp-summary::-webkit-details-marker { display: none; }

/* Иконка стрелочки */
summary.lp-summary .arrow-icon {
    font-size: 12px;
    color: #bbb;
    transition: transform 0.3s ease;
}

details.lp-details[open] summary.lp-summary .arrow-icon {
    transform: rotate(180deg);
    color: #007aff;
}

.lp-content {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #f5f5f5;
}

/* Инпуты в панели */
.lp-input-group {
    margin-bottom: 10px;
}
.lp-input-group label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}
.lp-input-group input {
    width: 100%;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Важно для ширины */
    font-size: 13px;
}

/* Кнопки действий (Primary/Secondary) */
.lp-btn {
    width: 93%;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.2s;
}
.lp-btn:hover { filter: brightness(0.95); }

.lp-btn-primary { background: #007aff; color: white; margin-bottom: 8px;}
.lp-btn-success { background: #34c759; color: white; }
.lp-btn-default { background: #e5e5ea; color: #333; }

.lp-row { display: flex; gap: 8px; margin-top: 8px; }
.lp-btn-half { width: 50%; margin: 0; font-size: 12px; }

/* Подсказки (Hint Box) */
.hint-box {
    background: #f0f4f8;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    color: #64748b;
}
.hint-box i { font-size: 20px; margin-bottom: 5px; display: block; }
.hint-box p { margin: 0; font-size: 12px; }

.hidden { display: none !important; }

/* =========================================
   4. ГРИД КАТАЛОГА (КНОПКИ ШКАФОВ)
   ========================================= */

.catalog-grid {
    display: grid;
    /*
       ИСПРАВЛЕНИЕ РАЗМЕРА И КОЛОНОК:
       Задаем строго 2 колонки.
       minmax(90px, 115px) - колонка стремится к 115px (под картинку ~100px + рамки),
       но может сжаться до 90px в узкой панели.
    */
    grid-template-columns: repeat(2, minmax(90px, 115px));
    gap: 10px;
    /* Выравниваем колонки по левому краю (можно center, если хочешь по центру) */
    justify-content: start;
}

.catalog-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;

    /* ИСПРАВЛЕНИЕ КОЛОНОК:
       Перебиваем старые стили (типа .lower-cabinet { width: 100% }),
       чтобы элемент слушался правил Grid-контейнера */
    width: auto !important;
    margin-top: 0 !important; /* Убираем старые отступы */
}

.catalog-item:hover {
    border-color: #007aff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
    transform: translateY(-2px);
}

.catalog-item:active { cursor: grabbing; }

/* Плейсхолдер для картинки */
.cat-img-placeholder {
    width: 100%;
    aspect-ratio: 2/3; /* Пропорция под твои 100x150 */
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 32px;
    border-bottom: 1px solid #f0f0f0;
}

/* Если вставишь <img>, используй этот класс */
.cat-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполнит область, обрезаясь по краям при несовпадении пропорций */
}

.cat-title {
    font-size: 11px;
    color: #333;
    text-align: center;
    padding: 6px 4px;
    font-weight: 500;
    background: #fff;
    line-height: 1.2;
}


/* Грид для мелких инструментов (Стены, Техника) */
.tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tools-grid.single-col { grid-template-columns: 1fr; }

.tool-btn {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    width: auto !important;
}
.tool-btn i { font-size: 18px; color: #666; }
.tool-btn:hover {
    border-color: #007aff;
    color: #007aff;
}
.tool-btn:hover i { color: #007aff; }

/* ==========================================================================
   ФИНАЛЬНЫЙ ФИКС ДЛЯ КНОПОК ШКАФОВ
   (Вставьте это в самый конец файла styles.css)
   ========================================================================== */

/* 1. ПРИНУДИТЕЛЬНО ВКЛЮЧАЕМ СЕТКУ (2 КОЛОНКИ) */
/* Обращаемся по ID, чтобы перебить любые другие настройки */
#lowerCabinetContainer,
#upperCabinetContainer {
    display: grid !important;          /* Включаем режим сетки */
    grid-template-columns: 1fr 1fr !important; /* Делим ширину ровно пополам */
    gap: 10px !important;              /* Расстояние между кнопками */
    width: 100% !important;            /* Контейнер на всю ширину панели */
    box-sizing: border-box !important;
    padding: 2px !important;           /* Небольшой отступ внутри, если нужно */
}

/* 2. ВАЖНО: СОХРАНЯЕМ ФУНКЦИЮ СКРЫТИЯ */
/* Если есть класс .hidden, он должен побеждать сетку */
#lowerCabinetContainer.hidden,
#upperCabinetContainer.hidden {
    display: none !important;
}

/* 3. НАСТРОЙКА РАЗМЕРА САМОЙ КНОПКИ */
.catalog-item {
    width: auto !important;       /* Кнопка занимает свою ячейку грида */
    margin: 0 !important;         /* Убираем внешние отступы */
    height: auto !important;      /* Высота зависит от содержимого */
    min-height: 0 !important;     
}

/* 4. НАСТРОЙКА "КАРТИНКИ" (ПЛЕЙСХОЛДЕРА) ПОД ВАШ РАЗМЕР */
/* Вы просили ~100x150. Ширина будет около 110px (половина колонки),
   а высоту мы ограничим здесь. */
.cat-img-placeholder {
    width: 100% !important;
    height: 120px !important;     /* Жесткая высота картинки */
    font-size: 28px !important;   /* Размер иконки внутри */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: auto !important; /* Отключаем старое соотношение сторон */
}

/* 5. НАСТРОЙКА ПОДПИСИ */
.cat-title {
    font-size: 11px !important;
    padding: 6px 2px !important;
    line-height: 1.1 !important;
    white-space: nowrap;          /* Текст в одну строку */
    overflow: hidden;
    text-overflow: ellipsis;      /* Если не влезает — троеточие */
}

/* =========================================
   5. ХОЛСТ (CANVAS CONTAINER)
   ========================================= */
#canvasContainer {
    flex: 1 1 auto; /* Растягивается на все свободное место */
    position: relative;
    background: #e5e5e5; /* Цвет фона сцены пока грузится */
    overflow: hidden; /* Чтобы канвас не вылезал */
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    outline: none;
}

#hint-bar {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
}

/* =========================================
   6. ПРАВАЯ ПАНЕЛЬ
   ========================================= */
#rightPanel {
    flex: 0 0 160px; /* Жестко 160px */
    width: 160px;
    background: #fff;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    z-index: 10;
    
    /* --- НОВЫЕ СТРОКИ ДЛЯ СКРОЛЛА --- */
    overflow-y: auto;   /* Включаем вертикальный скролл */
    overflow-x: hidden; /* На всякий случай прячем горизонтальный */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 60px;
}

/* Делаем скроллбар тонким и красивым (чтобы не съедал много места) */
#rightPanel::-webkit-scrollbar {
    width: 4px;
}
#rightPanel::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

#costCalculatorPanel h3 {
    font-size: 14px;
    margin-top: 0;
    color: #333;
    border-bottom: 2px solid #34c759;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.price-display {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: right;
}

#kitchenOptions {
    margin-top: 20px;
    font-size: 12px;
}
#kitchenOptions h4 {
    margin: 0 0 8px 0;
    color: #888;
    text-transform: uppercase;
    font-size: 10px;
}

.option-row {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.action-btn {
    width: 100%;
    background: #34c759;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.action-btn:hover { background: #2dad4b; }

/* Стиль для селекта в правой панели */
.rp-select {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
    background-color: #fff;
    box-sizing: border-box; /* Чтобы padding не расширял блок */
    margin-bottom: 5px;
}

.rp-select:hover {
    border-color: #bbb;
}

.rp-select:focus {
    border-color: #007aff;
}




/* Динамические кнопки (Столешница/Цоколь) */
/* Стилизуем их, чтобы они выглядели как lp-btn */
#dynamicButtonsArea button {
    display: block;
    width: 90%;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #73e97d;
    border: 1px solid #5e945f;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 13px;
}
#dynamicButtonsArea button:hover {
    background-color: #9be49d;
}



/* Специфические стили для контролов */
#controls label {
    margin-right: 5px;
}

#controls input[type="number"] {
    width: 60px;
    margin-right: 10px;
    margin-bottom: 5px;
}

#controls input[type="color"] {
    width: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#controls select {
    width: 120px;
}

#controls #countertopHeight,
#controls #countertopDepth,
#controls #plinthHeight {
    width: 100px;
}

#controls #countertopThickness {
    width: 60px;
}

#controls #handleType {
    width: 150px;
}

#controls button {
    padding: 5px 10px;
}


/* Стили для wallEditMenu */
#wallEditMenu {
    margin-top: 10px;
}

#wallEditMenu button {
    display: block;
    width: 100px;
    text-align: left;
}

/* Стили для прямоугольника "Нижний шкаф" */
.lower-cabinet {
    width: 100%;
    height: 30px;
    background: #e0e0e0;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 30px;
    margin-top: 5px;
}

.upper-cabinet {
    width: 100%;
    height: 30px;
    background: #e0e0e0;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 30px;
    margin-top: 5px;
}

/* Элементы управления видом */
#rotateXContainer {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

#rotateX {
    width: 200px;
    transform: rotate(-90deg);
}

#rotateYContainer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

#rotateY {
    width: 300px;
}

.angle-display {
    width: 50px;
    text-align: center;
    margin: 5px 0;
    border: 1px solid #ccc;
    padding: 2px;
    background: #fff;
    display: inline-block;
}

#rotationValues {
    margin-top: 10px;
}

#rotationValues label {
    margin-right: 5px;
}

#zoomContainer {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 35px;
}

#zoomContainer label {
    display: block;
    margin-bottom: 50px;
}

#zoom {
    width: 100px;
    transform: rotate(-90deg);
}

#selectedFaceContainer {
    margin-top: 10px;
}

#selectedFaceContainer label {
    margin-right: 5px;
}

#selectedFace {
    width: 80px;
    text-align: center;
    padding: 2px;
    border: 1px solid #ccc;
    background: #fff;
}

#mouseCoords {
    margin-top: 10px;
}

#mouseCoords label {
    margin-right: 5px;
}

#mouseX, #mouseY {
    width: 60px;
    text-align: center;
}

#faceBounds {
    margin-top: 10px;
}

#faceBounds table {
    width: 100%;
    border-collapse: collapse;
}

#faceBounds th, #faceBounds td {
    border: 1px solid #ccc;
    padding: 2px;
    text-align: center;
    font-size: 12px;
}

/* ================================================================ */
/* === НОВЫЙ УНИФИЦИРОВАННЫЙ БЛОК ДЛЯ ВСЕХ МЕНЮ ШКАФОВ =========== */
/* ================================================================ */

/* Общий стиль для ВСЕХ всплывающих меню (основного и конфигурации) */
.popup-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    z-index: 1000;
    width: 320px; /* Единая ширина для всех меню */
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    
    /* Главная магия: Flexbox-контейнер */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px); /* Макс. высота = высота экрана минус отступы */
}

.popup-menu h3 {
    margin: 0 0 12px;
    font-size: 16px;
    text-align: center;
    color: #333;
    flex-shrink: 0; /* Заголовок не сжимается */
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

/* Контейнер для полей ввода, который будет скроллиться */
.popup-menu .menu-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    
    flex-grow: 1; /* Растягивается, занимая все доступное место */
    overflow-y: auto; /* Включает скролл, если контент не помещается */
    
    padding-bottom: 15px;
    padding-right: 5px;   /* Место для скроллбара */
    min-height: 0; /* Важный хак для правильной работы flex + overflow */
}

/* Главный контейнер меню */
#cabinetConfigMenu {
    display: flex;
    flex-direction: column; /* Элементы выстраиваются сверху вниз */
    
    /* Меню никогда не будет больше 90% высоты экрана */
    max-height: 90vh; 
    
    /* ... твои старые стили (background, position, width, z-index и т.д.) ... */
}

/* Центральная часть с настройками */
.menu-content.scrollable {
    flex: 1 1 auto; /* Позволяет блоку растягиваться и сжиматься */
    overflow-y: auto; /* Появляется вертикальный скролл, если контент не влезает */
    min-height: 0; /* КРИТИЧНО ВАЖНО для правильной работы скролла во Flexbox */
    
    padding-right: 5px; /* Немного места, чтобы скроллбар не прилипал к тексту */
}

/* Красивый скроллбар (по желанию) */
.menu-content.scrollable::-webkit-scrollbar {
    width: 6px;
}
.menu-content.scrollable::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* Стили для полей внутри .menu-content */
.popup-menu label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #444;
}

.popup-menu input[type="number"],
.popup-menu input[type="text"],
.popup-menu select {
    width: 100%;
    padding: 7px 9px;
    margin-top: 4px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}

.popup-menu input:disabled,
.popup-menu input.readonly-style[readonly],
.popup-menu select:disabled {
    background-color: #f0f0f0;
    color: #888;
    cursor: not-allowed;
}

/* Блок кнопок, прижатый к низу */
.popup-menu .menu-buttons {
    display: flex;
    justify-content: space-between; /* Распределяет кнопки по ширине */
    gap: 10px;
    
    padding-top: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;   /* Прижимает блок к низу */
    flex-shrink: 0;   /* Блок кнопок не сжимается */
    flex: 0 0 auto;
}

.popup-menu .menu-buttons button {
    padding: 8px 12px;
    font-size: 13px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    flex-grow: 1; /* Кнопки занимают равное пространство */
    text-align: center;
}

/* --- Стилизация кнопок по их ID, а не по ID меню --- */
/* Это делает стили универсальными */

.popup-menu button#configureCabinetBtn,
.popup-menu button#toggleDetailBtn,
.popup-menu button#plinthCancelBtn {
    background-color: #5bc0de; /* Голубой */
}

.popup-menu button#applyMainCabinetChangesBtn,
.popup-menu button#applyConfigBtnInMenu,
.popup-menu button#plinthApplyBtn {
    background-color: #28a745; /* Зеленый */
}

.popup-menu button#deleteCabinetBtn,
.popup-menu button#plinthDeleteBtn{
    background-color: #dc3545; /* Красный */
}

/* Кнопка "Отмена" - общая для всех */
.popup-menu button[onclick*="hideCabinet"] { /* Ищет все кнопки, у которых в onclick есть "hideCabinet" */
    background-color: #6c757d; /* Серый */
}

.delete-btn {
    background-color: #dc3545; /* Красный */
}

/* ================================================================ */
/* === КОНЕЦ УНИФИЦИРОВАННОГО БЛОКА =============================== */
/* ================================================================ */


/* Стили для контейнера меню параметров кухни */
.kitchen-params-menu {
    position: absolute;
    background-color: #fff;
    border: 1px solid #000;
    padding: 12px; /* Уменьшаем общие отступы */
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
    width: 260px; /* Можно чуть уже */
    box-sizing: border-box;
    max-height: 85vh; /* Оставляем ограничение высоты */
    overflow-y: auto;
}
/* Стили для элементов внутри меню */
/* Стили для элементов внутри меню */
.kitchen-params-menu div { /* Контейнер label+input */
    margin-bottom: 8px; /* Уменьшаем отступ между блоками */
}

.kitchen-params-menu label {
    display: block;
    margin-bottom: 3px; /* Уменьшаем отступ под лейблом */
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.kitchen-params-menu input[type="number"],
.kitchen-params-menu select {
    width: 100%;
    padding: 5px 7px; /* Уменьшаем вертикальный padding */
    font-size: 13px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.kitchen-params-menu input[type="button"] { /* Кнопки */
    width: 100%;
    padding: 8px; /* Уменьшаем padding кнопки */
    margin-top: 8px; /* Уменьшаем отступ перед кнопками */
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px; /* Уменьшаем шрифт кнопки */
    font-weight: bold;
    transition: background-color 0.2s;
}

.kitchen-params-menu input[type="button"]:hover {
    background-color: #218838;
}

/* Отдельный стиль для кнопки Настройки фасадов */
.kitchen-params-menu #facadeSetsButton {
    background-color: #007bff; /* Синий */
    margin-top: 12px; /* Чуть больше отступ перед ней */
}
.kitchen-params-menu #facadeSetsButton:hover {
    background-color: #0056b3;
}


/* Раздел для визуализации размеров */
.dimension-input {
    position: absolute;
    width: 50px; /* Увеличил ширину для удобства ввода выражений */
    height: 12px;
    font-size: 10px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 3px;
    background: #fff;
    padding: 0;
    z-index: 1010; /* Чтобы было поверх сцены */
}

.dimension-input.readonly {
    background: #a0a0a0;      /* Светло-серый фон */
    color: #666666;          /* Тёмно-серый текст */
    pointer-events: none;    /* Запрещаем клики и курсор */
    user-select: none;       /* Запрещаем выделение текста */
}

#countertop-button, #plinth-button {
    display: none;
    width: 90%;
    padding: 10px;
    margin: 5px 0;
    background-color: #4CAF50;
    color: rgb(70, 70, 70);
    border: none;
    cursor: pointer;
    font-size: 14px;
}
#countertop-button:hover, #plinth-button:hover {
    background-color: #45a049;
}


.context-menu {
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    background: #ddd;
}

.context-menu label {
    display: block;
    margin: 5px 0;
}

.context-menu input[type="text"],
.context-menu select {
    margin-left: 10px;
}


/* новое меню для наборов фасадов */
.facade-sets-manager {
    position: absolute;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 1001; /* Выше, чем меню параметров */
    width: 800px; /* Широкое меню */
    max-width: 90vw; /* Но не шире экрана */
    max-height: 85vh; /* Ограничение высоты */
    display: flex; /* Используем flexbox для компоновки */
    flex-direction: column; /* Элементы идут сверху вниз */
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.facade-sets-manager h3 {
    margin: 0 0 15px;
    font-size: 18px;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.facade-sets-table-container {
    flex-grow: 1; /* Занимает доступное пространство по высоте */
    overflow-y: auto; /* Прокрутка для таблицы, если строк много */
    margin-bottom: 15px;
    border: 1px solid #eee; /* Рамка вокруг таблицы */
}

.facade-set-row {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    border-bottom: 1px solid #eee;
    padding: 8px 5px; /* Отступы внутри строки */
}

.facade-set-row.header {
    background-color: #f8f8f8;
    font-weight: bold;
    font-size: 13px;
    color: #555;
    position: sticky; /* Залипающая шапка */
    top: 0;
    z-index: 1; /* Чтобы была над строками при прокрутке */
}

.facade-set-cell {
    padding: 0 8px; /* Отступы внутри ячейки */
    box-sizing: border-box;
    display: flex; /* Для выравнивания содержимого ячейки */
    align-items: center;
}

/* Задаем ширину колонок */
.name-col { width: 20%; }
.material-col { width: 20%; }
.texture-col { width: 20%; }
.color-col { width: 10%; text-align: center; }
.thickness-col { width: 12%; }
.actions-col { width: 8%; text-align: right; }

/* Стили для полей ввода внутри таблицы */
.facade-set-row input[type="text"],
.facade-set-row select,
.facade-set-row input[type="number"] {
    width: 100%;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}

.facade-set-row input[readonly],
.facade-set-row select[disabled],
.facade-set-row input[type="color"][disabled] {
    background-color: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.7;
}
/* Стиль для readonly поля толщины, которое не disabled */
.facade-set-row input.readonly-style[readonly] {
     background-color: #f0f0f0;
     cursor: default;
     opacity: 0.7;
}


.facade-set-row input[type="color"] {
    width: 40px; /* Размер поля цвета */
    height: 25px;
    padding: 1px;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 0 auto; /* Центрирование в ячейке */
}
.facade-set-row input[type="color"][disabled] {
    cursor: not-allowed;
}


.facade-set-row .delete-set-btn {
    background: none;
    border: none;
    color: #dc3545; /* Красный цвет */
    cursor: pointer;
    font-size: 18px; /* Размер иконки корзины */
    padding: 0 5px;
    line-height: 1;
    margin-left: auto; /* Прижимаем вправо */
}
.facade-set-row .delete-set-btn:hover {
    color: #a71d2a; /* Темнее при наведении */
}


/* Кнопки внизу менеджера */
.manager-buttons {
    display: flex;
    justify-content: space-between; /* Равномерное распределение кнопок */
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.manager-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    min-width: 120px; /* Минимальная ширина кнопок */
}

#addFacadeSetBtn {
    background-color: #007bff; /* Синий */
    color: white;
}
#addFacadeSetBtn:hover { background-color: #0056b3; }

.manager-buttons button:nth-of-type(2) { /* Применить все */
    background-color: #28a745; /* Зеленый */
    color: white;
}
.manager-buttons button:nth-of-type(2):hover { background-color: #218838; }

.manager-buttons button:nth-of-type(3) { /* Закрыть */
    background-color: #6c757d; /* Серый */
    color: white;
}
.manager-buttons button:nth-of-type(3):hover { background-color: #5a6268; }
/* ---конец меню наборов фасадов---*/

.facade-set-row .color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #888;
    margin-right: 6px;
    vertical-align: middle; /* Выравнивание по вертикали с текстом */
    flex-shrink: 0; /* Не сжиматься */
}

/* Улучшение отображения select с иконкой */
.facade-set-cell.texture-col select {
   /* Можно добавить padding-left, если текст слишком близко к иконке */
   /* padding-left: 25px; */ /* Подберите значение */
}

/* Стиль для нередактируемой толщины */
.facade-set-row input.readonly-style[readonly] {
     background-color: #eee;
     cursor: default;
     /* Убедитесь, что он перекрывает другие стили input */
}

/* --- Стили для Менеджера Фасадов --- */
.facade-sets-manager {
    /* ... (существующие стили: position, background, border, etc.) ... */
    width: 900px; /* Можно сделать шире */
}

.facade-set-row {
    display: flex;
    /* --- ИЗМЕНЕНИЕ: Выравнивание элементов внутри строки по центру вертикали --- */
    align-items: center; /* Было */
    /* align-items: stretch; */ /* Можно попробовать stretch, если хотите, чтобы элементы растягивались */
    /* ----------------------------------------------------------------------- */
    border-bottom: 1px solid #eee;
    padding: 5px;
    min-height: 40px; /* Зададим минимальную высоту строки для выравнивания */
}

.facade-set-row.header {
    /* ... */
     min-height: auto; /* Для шапки авто высота */
}

.facade-set-cell {
    padding: 0 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
     /* --- ДОБАВЛЕНО: Заставляем ячейку растягиваться по высоте строки --- */
     /* Это не обязательно, если align-items: center в .facade-set-row устраивает */
     /* align-self: stretch; */
     /* -------------------------------------------------------------------- */
}

/* Новые ширины колонок */
.name-col { width: 25%; }
.material-col { width: 20%; }
.decor-color-col { width: 30%; } /* Объединенная колонка */
.thickness-col { width: 15%; }
.actions-col { width: 10%; text-align: right; }

/* --- ИЗМЕНЕНИЕ: Общие стили для элементов управления в строке --- */
.facade-set-row input[type="text"],
.facade-set-row select,
.facade-set-row input[type="number"],
.facade-set-row .decor-select-btn { /* Добавили кнопку выбора сюда */
    width: 100%;
    height: 30px; /* Задаем единую высоту */
    padding: 4px 8px; /* Скорректируем padding */
    font-size: 13px;
    border: 1px solid #ccc; /* Единая рамка */
    border-radius: 3px;
    box-sizing: border-box; /* Важно! */
    vertical-align: middle; /* Дополнительное выравнивание */
    line-height: normal; /* Сбрасываем line-height, чтобы не влиял на высоту */
    margin: 0; /* Убираем внешние отступы по умолчанию */
}
/* ------------------------------------------------------------- */
.facade-set-row input[readonly],
.facade-set-row select[disabled] { /* Убрали input[type="color"] отсюда */
    background-color: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.7;
}
.facade-set-row input.readonly-style[readonly] {
     background-color: #eee;
     cursor: default;
     /* opacity: 0.7; */ /* Можно убрать opacity для readonly */
}

/* --- ИЗМЕНЕНИЕ: Стили для input[type="color"] --- */
.facade-set-row input[type="color"] {
    width: 40px;
    height: 30px; /* Такая же высота, как у других */
    padding: 1px; /* Минимальный паддинг */
    border: 1px solid #ccc; /* Единая рамка */
    border-radius: 3px;
    cursor: pointer;
    margin: 0 auto;
    box-sizing: border-box; /* Важно! */
    vertical-align: middle; /* Выравнивание */
}
.facade-set-row input[type="color"][disabled] {
    cursor: not-allowed;
    background-color: #f0f0f0; /* Фон для disabled color input */
    opacity: 0.7;
    border-color: #ddd; /* Серая рамка */
}
/* ------------------------------------------------- */

/* Стили для кнопки выбора декора/цвета */
.decor-select-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 8px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    overflow: hidden; /* Обрезать текст, если не влезает */
}
.decor-select-btn:hover {
    background-color: #f0f0f0;
}

.decor-select-btn .color-swatch,
.decor-select-btn .decor-preview-img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0; /* Не сжиматься */
    border: 1px solid #ddd; /* Рамка для квадрата/картинки */
    object-fit: cover; /* Для img, чтобы не искажалась */
}
.decor-select-btn .decor-preview-img {
    border: none; /* Убираем рамку для картинок */
}

.decor-select-btn .decor-select-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Многоточие для длинного текста */
    flex-grow: 1; /* Занимать доступное место */
}

/* Стили для Модального Окна Выбора Декора */
.decor-picker-modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Поверх всего */
    z-index: 1002; /* Выше менеджера */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Прокрутка, если нужно */
    background-color: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон */
    padding-top: 60px; /* Отступ сверху */
}

.decor-picker-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px; /* Макс. ширина */
    max-height: 80vh; /* Макс. высота */
    display: flex;
    flex-direction: column;
    position: relative; /* Для позиционирования кнопки закрытия */
    border-radius: 5px;
}

.decor-picker-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.decor-picker-close:hover,
.decor-picker-close:focus {
    color: black;
    text-decoration: none;
}

.decor-picker-header {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.decor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Адаптивная сетка */
    gap: 15px; /* Отступ между ячейками */
    overflow-y: auto; /* Прокрутка для сетки */
    padding: 5px;
    flex-grow: 1; /* Занимать доступное место */
    max-height: calc(80vh - 120px); /* Примерный расчет высоты сетки */
}

.decor-grid-item {
    border: 1px solid #eee;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.2s;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Распределить контент */
    min-height: 120px; /* Минимальная высота ячейки */
}
.decor-grid-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.decor-grid-item .decor-preview-img,
.decor-grid-item .color-swatch {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
    border: 1px solid #ddd;
    object-fit: cover;
}
.decor-grid-item .color-swatch {
     border-radius: 3px;
}
.decor-grid-item .decor-preview-img {
     border: none;
     border-radius: 3px;
}


.decor-grid-item span { /* Для текста */
    font-size: 12px;
    color: #333;
    word-break: break-word; /* Перенос длинных слов */
}

/* Отдельно для color picker */
.decor-color-picker-container {
     padding: 20px;
     text-align: center;
}
.decor-color-picker-container label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}
.decor-color-picker-container input[type="color"] {
     width: 100px;
     height: 50px;
     cursor: pointer;
     border: 1px solid #ccc;
     padding: 0;
}

#upperCabinetContainer {
    margin-top: 5px;
}

#countertopToolbar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

#countertopToolbar button {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    background-color: #e8f5e9; /* Легкий зеленый оттенок для отличия */
}

#countertopToolbar button:hover {
    background-color: #c8e6c9;
}

/* Стили для панели калькулятора */
#costCalculatorPanel .action-btn {
    width: 90%;
    background-color: #28a745; /* Зеленый "Деньги" */
    color: white;
    padding: 10px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}

#costCalculatorPanel .action-btn:hover {
    background-color: #218838;
}

.cost-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.cost-result input {
    width: 80px;
    text-align: right;
    font-weight: bold;
}

/* Опции */
.option-row { margin-bottom: 5px; display: flex; align-items: center; }
.option-row input { margin-right: 8px; width: auto; }

/* Модальное окно */
.modal-overlay {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0;
    width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);
}
.report-modal {
    background-color: #fff; margin: 5% auto; padding: 20px;
    border: 1px solid #888; width: 80%; max-width: 900px;
    height: 80%; display: flex; flex-direction: column;
    border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#costReportContent {
    flex-grow: 1; overflow-y: auto; margin: 15px 0; border: 1px solid #eee;
}

/* Таблица отчета */
.cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cost-table th, .cost-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
.cost-table th { background-color: #f2f2f2; position: sticky; top: 0; }
.cost-table .section-header { background-color: #e0e0e0; font-weight: bold; text-align: center; }
.cost-table .sub-row { color: #666; font-size: 11px; font-style: italic; background-color: #fafafa;}

/* Футер */
.report-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 2px solid #ccc; }
.report-total { font-size: 24px; font-weight: bold; color: #28a745; }
.close-btn { padding: 10px 20px; background: #666; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.close-btn:hover { background: #444; }
.close-modal { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-modal:hover { color: #000; }



/* ================================================================ */
/* === СТИЛИ ДЛЯ МЕНЮ ТЕХНИКИ (Appliance Menu) === */
/* ================================================================ */

/* Основной контейнер */
#applianceMenu {
    background: rgba(255, 255, 255, 0.95) !important; /* Полупрозрачный белый */
    backdrop-filter: blur(10px); /* Эффект матового стекла (как в iOS) */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important; /* Более скругленные углы */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; /* Мягкая глубокая тень */
    padding: 20px !important;
    width: 280px !important;
    box-sizing: border-box !important; /* Важно: чтобы padding не расширял блок */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    animation: fadeInMenu 0.2s ease-out;
}

/* Анимация плавного появления */
@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Заголовок */
#applianceMenu h3 {
    margin: 0 0 12px 0 !important; /* Чуть уменьшил отступ */
    font-size: 15px !important;
    font-weight: 600;
    color: #111;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 8px; /* Чуть уменьшил */
    letter-spacing: 0.5px;
}

/* Контейнер контента */
#applianceMenu .menu-content {
    gap: 8px !important; /* Уменьшил расстояние между элементами */
}

/* Лейблы */
#applianceMenu label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-bottom: 2px;
    display: block;
}

/* Селект (Выпадающий список) */
#applianceMenu select {
    width: 100%;
    padding: 6px 10px !important; /* Уменьшил padding */
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background-color: #f9f9f9;
    font-size: 13px !important;
    color: #333;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box !important; /* Важно */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

#applianceMenu select:hover {
    border-color: #ccc !important;
    background-color: #fff;
}

#applianceMenu select:focus {
    border-color: #007aff !important;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* КНОПКИ */
#applianceMenu button {
    width: 100%;
    padding: 8px !important; /* Уменьшил padding с 10px до 8px */
    margin-top: 6px !important; /* Уменьшил отступ */
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important; /* Чуть уменьшил шрифт */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    box-sizing: border-box !important; /* ИСПРАВЛЕНИЕ: Это уберет горизонтальный скролл */
}

/* Кнопка "Центрировать" (Основная) */
#centerApplianceBtn {
    background-color: #007aff !important;
    color: white !important;
    font-weight: 600 !important;
}

#centerApplianceBtn:hover {
    background-color: #0062cc !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.25) !important;
}

#centerApplianceBtn:active {
    transform: translateY(0);
}

/* Кнопка "Удалить" (Второстепенная, Danger) */
#deleteApplianceBtn {
    background-color: #de9d9d !important;
    color: #fc1205 !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
    margin-top: 4px !important; /* Еще меньше отступ */
    box-shadow: none !important;
}

#deleteApplianceBtn:hover {
    background-color: #fce1e1 !important;
    border-color: #ff3b30 !important;
}

/* Кнопка "ОК" (Закрыть) */
#closeApplianceMenuBtn {
    background-color: #b6b6f8 !important;
    color: #333 !important;
    margin-top: 8px !important;
}

#closeApplianceMenuBtn:hover {
    background-color: #bfbfe9 !important;
    color: #000 !important;
}

.dragHint {
    font-size: 10px;
    margin-bottom: 5px;;
}

/* Подсказка для перетаскивания */
.drag-instruction {
    font-size: 13px;           /* Мелкий шрифт */
    font-weight: 700;          /* Жирный */
    color: #0d6efd;            /* Яркий синий (Bootstrap primary style) */
    background-color: #f0f8ff; /* Очень светлый фон для контраста */
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #cce5ff;
    margin-bottom: 10px;       /* Отступ от кнопок снизу */
    text-align: center;
    display: block;
    line-height: 1.4;
}

/* ================================================================ */
/* === УНИВЕРСАЛЬНЫЙ СТИЛЬ МЕНЮ (GLASS STYLE) === */
/* ================================================================ */

/* Применяем этот класс ко всем всплывающим меню */
.glass-menu {
    position: absolute; /* Важно для позиционирования */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 20px !important;
    width: 280px !important; /* Базовая ширина */
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    animation: fadeInMenu 0.2s ease-out;
    z-index: 2000; /* Чтобы меню было поверх всего */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Отступы между элементами */
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Заголовки внутри меню */
.glass-menu h3 {
    margin: 0 0 10px 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    color: #111;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 8px;
}

/* Лейблы */
.glass-menu label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    margin-bottom: 2px;
    display: block;
}

/* Поля ввода и Селекты */
.glass-menu input[type="text"],
.glass-menu input[type="number"],
.glass-menu select {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    background-color: #f9f9f9;
    font-size: 13px !important;
    color: #333;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
    margin-bottom: 5px; /* Отступ снизу */
}

.glass-menu input:focus,
.glass-menu select:focus {
    border-color: #007aff !important;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* --- КНОПКИ ВНУТРИ МЕНЮ --- */
.glass-menu button {
    width: 100%;
    padding: 8px !important;
    margin-top: 5px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Красная кнопка (Удаление) */
.glass-btn-danger {
    background-color: #de9d9d !important;
    color: #fc1205 !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
}
.glass-btn-danger:hover {
    background-color: #fce1e1 !important;
    border-color: #ff3b30 !important;
}

/* Серая/Зеленая кнопка (Второстепенное/Применить) */
.glass-btn-success {
    background-color: #34c759 !important; /* Зеленый Apple */
    color: white !important;
}
.glass-btn-success:hover {
    background-color: #2da84e !important;
}

.glass-btn-secondary {
    background-color: #e5e5ea !important; /* Серый */
    color: #333 !important;
}
.glass-btn-secondary:hover {
    background-color: #d1d1d6 !important;
}
/* --- ИСПРАВЛЕННЫЙ БЛОК (ВЕРСИЯ FLEXBOX) --- */

/* Контейнер для кнопок */
/* На всякий случай уточним правило для группы, чтобы не сломалась */
.glass-btn-group {
    display: flex !important;
    gap: 10px !important;
    margin-top: 15px !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Сами кнопки внутри группы */
.glass-btn-group button {
    flex: 1 !important;    /* Растягиваем равномерно */
    margin: 0 !important;  /* Сбрасываем внешние отступы */
    justify-content: center !important; /* Центрируем текст внутри кнопок */
}

/* Кнопка на всю ширину (Настроить материал) */
.glass-btn-full {
    display: flex !important;       /* Включаем Flexbox для самой кнопки */
    justify-content: center !important; /* Центрируем текст по горизонтали */
    align-items: center !important;     /* Центрируем текст по вертикали */
    width: 100% !important;         /* Строго на всю ширину */
    margin: 0 0 10px 0 !important;  /* Убираем боковые отступы, оставляем снизу */
    padding: 8px !important;        /* Возвращаем внутренний отступ */
    box-sizing: border-box !important;
    text-align: center !important;  /* На всякий случай для старых браузеров */
    float: none !important;         /* Отключаем обтекание */
    position: static !important;    /* Возвращаем в поток */
}

/* --- ОБНОВЛЕННЫЕ ЭФФЕКТЫ --- */

/* Синяя кнопка (Основная) */
.glass-btn-primary {
    background-color: #007aff !important;
    color: white !important;
}
.glass-btn-primary:hover {
    background-color: #0062cc !important;
    transform: translateY(-1px); /* Взлет */
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.25);
}

/* Красная кнопка (Удаление) - ТЕПЕРЬ ТОЖЕ ВЗЛЕТАЕТ */
.glass-btn-danger {
    background-color: #de9d9d !important;
    color: #fc1205 !important;
    border: 1px solid rgba(255, 59, 48, 0.2) !important;
    transition: all 0.2s ease; /* Плавность */
}
.glass-btn-danger:hover {
    background-color: #fce1e1 !important;
    border-color: #ff3b30 !important;
    transform: translateY(-1px); /* Взлет добавлен */
    box-shadow: 0 4px 8px rgba(255, 59, 48, 0.25); /* Красная тень */
}

/* Серая кнопка (Второстепенная) */
.glass-btn-secondary .bodyMaterialPickerBtn {
    background-color: #e5e5ea !important;
    color: #333 !important;
    border: none !important;
}
.glass-btn-secondary:hover {
    background-color: #d1d1d6 !important;
    transform: translateY(-1px); /* Взлет */
}

/* --- СТИЛИ ДЛЯ КРЕСТОВИНЫ РОЗЕТОК --- */
.socket-dpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 4px;
    width: 120px; /* Компактный размер */
    margin: 10px auto; /* По центру меню */
}

.socket-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important; /* Круглые кнопки */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    cursor: pointer;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #555 !important;
    transition: all 0.2s ease;
}

.socket-btn:hover {
    background: #007aff !important;
    color: white !important;
    border-color: #007aff !important;
    transform: scale(1.1);
}

/* Позиции в сетке */
.socket-btn-up { grid-column: 2; grid-row: 1; }
.socket-btn-left { grid-column: 1; grid-row: 2; }
.socket-btn-right { grid-column: 3; grid-row: 2; }
.socket-btn-down { grid-column: 2; grid-row: 3; }
.socket-center-label {
    grid-column: 2; 
    grid-row: 2; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 18px;
    color: #ccc;
}

/* === СТИЛИ ДЛЯ СПРАВКИ (HELP MODAL) === */

/* Контейнер модалки (переопределяем или дополняем modal-content) */
.help-modal-content {
    background: white;
    border-radius: 12px;
    width: 600px;        /* Оптимальная ширина для скриншотов */
    max-width: 95vw;     /* Чтобы не вылезало на мобильных */
    max-height: 85vh;    /* Чтобы не вылезало по высоте */
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalPopIn 0.3s ease-out;
    position: relative;
    padding: 0;          /* Внутренние отступы зададим блокам */
    overflow: hidden;    /* Чтобы скругления не обрезались */
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Шапка */
.help-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fbfbfd;
}
.help-header h3 { margin: 0; font-size: 18px; color: #1d1d1f; }

.close-icon {
    background: none; border: none; font-size: 24px; cursor: pointer; color: #888;
}
.close-icon:hover { color: #333; }

/* Тело (Скролл) */
.help-body {
    flex: 1;             /* Занимает все свободное место */
    overflow-y: auto;    /* Включаем скролл */
    padding: 20px;
    background: #fff;
}

/* Шаги инструкции */
.help-step {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #f5f5f7;
    padding-bottom: 20px;
}
.help-step:last-child { border-bottom: none; margin-bottom: 0; }

/* Кружок с номером */
.step-number {
    flex-shrink: 0;
    width: 30px; height: 30px;
    background: #007aff;
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

/* Текст и картинка */
.step-info h4 { margin: 0 0 5px 0; font-size: 15px; color: #333; }
.step-info p { margin: 0 0 10px 0; font-size: 13px; color: #666; line-height: 1.5; }
.step-info img {
    width: 100%;         /* Картинка на всю ширину блока */
    border-radius: 6px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Футер */
.help-footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #fbfbfd;
    display: flex;
    justify-content: center; /* Кнопка по центру */
}

/* === ИСПРАВЛЕНИЕ ПОЗИЦИИ МОДАЛКИ СПРАВКИ === */

/* Сам фон (обертка) */
#helpModal {
    /* Фиксируем на весь экран */
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* Затемнение */
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000 !important; /* Поверх всех меню (у них обычно 1000-2000) */
    
    /* Включаем Flexbox для управления детьми */
    /* При открытии JS ставит display: flex, но настройки позиционирования берем отсюда */
    display: none; /* Скрыто по умолчанию */
    
    /* 1. Центрируем по горизонтали */
    justify-content: center !important;
    
    /* 2. Прижимаем к верху (а не по центру вертикали), чтобы задать точный отступ */
    align-items: flex-start !important;
    
    /* 3. Отступ сверху (88px меню + немного воздуха) */
    padding-top: 100px !important;
    
    box-sizing: border-box;
}

/* Само белое окно */
.help-modal-content {
    background: white;
    border-radius: 12px;
    width: 600px;
    max-width: 90vw; /* Адаптивность для мобильных */
    
    /* 4. Расчет высоты: 100% экрана минус отступ сверху (100px) минус отступ снизу (20px) */
    max-height: calc(100vh - 120px) !important;
    
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    
    /* Сброс лишних маржинов, если они были */
    margin: 0 !important; 
}

.help-step img {
    display: block;
    margin: auto;
    max-width: 300px;
}

/* =========================================
   7. АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ========================================= */

/* Прячем мобильные элементы на больших экранах (ПК) */
.mobile-toggle-btn,
.mobile-overlay,
.mobile-warning {
    display: none;
}

/* Правила только для телефонов и планшетов (до 850px) */
@media (max-width: 850px) {
    /* 1. Настраиваем контейнер */
    #appContainer {
        position: relative; /* Чтобы панели позиционировались относительно него */
        overflow: hidden;   /* Запрещаем скролл за пределы экрана */
        display: block;     /* Отключаем flex, чтобы холст занял всё место */
    }

    /* 2. Левая панель - прячем за левый край */
    #leftPanel {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 280px; 
        max-width: 85vw; /* Защита, чтобы меню не было шире экрана телефона */
        transform: translateX(-100%); /* Уносим меню влево за экран */
        transition: transform 0.3s ease-in-out; /* Плавная анимация */
        z-index: 1000;
        box-shadow: 2px 0 15px rgba(0,0,0,0.3);
    }
    #leftPanel.open {
        transform: translateX(0); /* Возвращаем меню на экран */
    }

    /* 3. Правая панель - прячем за правый край */
    #rightPanel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 260px;
        max-width: 85vw;
        transform: translateX(100%); /* Уносим меню вправо за экран */
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        box-shadow: -2px 0 15px rgba(0,0,0,0.3);
    }
    #rightPanel.open {
        transform: translateX(0);
    }

    /* 4. Холст на 100% экрана */
    #canvasContainer {
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; /* Под панелями */
    }

    /* 5. Кнопки вызова панелей */
    .mobile-toggle-btn {
        display: flex;
        position: absolute;
        top: 15px; /* Отступ от верхнего меню */
        z-index: 900;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #ccc;
        padding: 8px 12px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        font-size: 13px;
        font-weight: 600;
        color: #333;
        align-items: center;
        gap: 6px;
    }
    .left-toggle { left: 10px; }
    .right-toggle { right: 10px; }

    /* 6. Затемнение фона при открытом меню */
    .mobile-overlay {
        display: none; /* Скрыто по умолчанию */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 950; /* Между холстом и меню */
        backdrop-filter: blur(2px); /* Эффект размытия фона */
    }
    .mobile-overlay.active {
        display: block;
    }

    /* 7. Окно предупреждения */
    .mobile-warning {
        display: flex; /* Делаем видимым на мобильных */
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
    }
    .warning-content {
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        text-align: center;
        max-width: 350px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    .warning-content i {
        font-size: 45px;
        color: #007aff;
        margin-bottom: 15px;
    }
    .warning-content p {
        font-size: 14px;
        color: #333;
        margin-bottom: 20px;
        line-height: 1.5;
    }
    .warning-content button {
        background: #007aff;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: bold;
        width: 100%;
    }

    /* Адаптируем верхний тулбар (позволяем скроллить, если кнопок много) */
    #topMenu {
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 10px;
    }
    /* Прячем скроллбар в тулбаре для красоты */
    #topMenu::-webkit-scrollbar { display: none; }
}

/* =========================================
   8. ЭКРАН ЗАГРУЗКИ (PRELOADER)
   ========================================= */

.loader-overlay {
    position: absolute; /* Было fixed, теперь absolute — привязывается к canvasContainer */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f7;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Класс, который JS добавит, когда всё загрузится */
.loader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    max-width: 400px;
    padding: 20px;
}

.loader-content h2 {
    color: #111;
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 600;
}

.loader-content p {
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
}

/* Спиннер (крутящийся круг) */
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e5e5ea;
    border-top: 4px solid #007aff; /* Синий цвет Apple */
    border-radius: 50%;
    margin: 0 auto 20px auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Контейнер для полосы загрузки */
.progress-container {
    width: 100%;
    height: 8px;
    background-color: #e5e5ea;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Сама ползущая полоса */
.progress-bar {
    width: 0%; /* Стартуем с нуля, JS будет менять это значение */
    height: 100%;
    background-color: #34c759; /* Зеленый цвет успешной загрузки */
    border-radius: 10px;
    transition: width 0.2s ease-out; /* Плавное движение ползунка */
}

.progress-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* --- КНОПКИ ОЧИСТКИ --- */
/* Кнопка в панели для ПК */
.desktop-clear-btn {
    width: 100%;
    padding: 12px;
    background-color: #ff3b30; /* Красный цвет предупреждения */
    color: white;
    border: none;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Плавающая кнопка для телефона */
.mobile-floating-clear-btn {
    display: none; /* На ПК скрыта */
    position: absolute;
    right: 15px; 
    bottom: 90px; /* Отрегулируй эту цифру, чтобы она была ровно под кнопкой "Рассчитать" */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff3b30;
    color: white;
    border: none;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
    z-index: 100;
    cursor: pointer;
}

/* --- КНОПКИ ЗАКРЫТИЯ МЕНЮ (Только для мобильных) --- */
.mobile-close-panel-btn {
    display: none; /* На ПК скрыта */
    width: 100%;
    padding: 12px;
    background-color: #e5e5ea;
    color: #333;
    border: none;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* --- АДАПТИВНОСТЬ ДЛЯ ТЕЛЕФОНОВ --- */
@media (max-width: 768px) {
    .desktop-clear-btn {
        display: none; /* На телефоне скрываем кнопку в меню */
    }
    .mobile-floating-clear-btn {
        display: flex; /* Показываем плавающую кнопку */
        align-items: center;
        justify-content: center;
    }
    .mobile-close-panel-btn {
        display: flex; /* Показываем огромные кнопки закрытия меню */
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

/* --- Анимация привлечения внимания для кнопки "С чего начать?" --- */
@keyframes pulse-attention {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
        border-color: rgba(255, 59, 48, 0.7);
        color: #ff3b30;
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 59, 48, 0);
        border-color: rgba(255, 59, 48, 0);
        color: inherit;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
        border-color: rgba(255, 59, 48, 0);
        color: inherit;
    }
}

/* Этот класс будет вешаться скриптом на кнопку */
.btn-pulse-attention {
    animation: pulse-attention 2s infinite;
    border: 1px solid #ff3b30 !important;
    color: #ff3b30 !important;
    font-weight: bold;
}

/* Кнопка ИИ с легким свечением */
.btn-ai-magic {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
    border: none;
    padding: 12px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(167, 119, 227, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-ai-magic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(167, 119, 227, 0.6);
}

/* Окно загрузки (Оверлей) */
.ai-loading-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 15, 20, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
}

/* Анимация спиннера */
.ai-spinner {
    width: 60px; height: 60px;
    border: 5px solid rgba(255,255,255,0.1);
    border-top-color: #a777e3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.ai-loading-text { font-size: 20px; font-weight: bold; margin-bottom: 10px; }
.ai-loading-subtext { font-size: 14px; color: #aaa; text-align: center; max-width: 300px; line-height: 1.4; }

/* --- Кнопка экспорта в Базис-Мебельщик --- */
.btn-export-bazis {
    position: relative;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); /* Строгий синий градиент */
    color: white;
    border: none;
    padding: 12px 12px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(42, 82, 152, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px; /* Немного отделяем её от кнопок ИИ */
}

.btn-export-bazis:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 82, 152, 0.6);
}

/* --- Состояние "Скоро" для заблокированной кнопки --- */
.btn-export-bazis:disabled {
    background: #f5f5f7 !important; /* Светло-серый неактивный фон */
    color: #a1a1a6 !important;      /* Блеклый текст */
    box-shadow: none !important;    /* Убираем свечение */
    cursor: not-allowed;            /* Курсор "запрещено" */
    transform: none !important;     /* Убираем эффект нажатия/взлета */
    border: 1px dashed #d2d2d7;     /* Пунктирная рамка для вида "в разработке" */
}

/* Красивая красная бирка "Скоро" */
.badge-soon {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3b30;            /* Яркий красный Apple */
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.4);
    letter-spacing: 0.5px;
    z-index: 2;
}

/* --- Стили для разделителя режимов отображения --- */
.toolbar-group .toolbar-separator {
    color: #555;
    margin: 0 10px;
    align-self: center;
    font-size: 14px;
    user-select: none;
}