/* Исключить лишние полосы прокрутки у окон кластеров */
#clusterToolsWindow, #clusterToolsWindowRight {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-height: none !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Запретить горизонтальный скролл у панелей инструментов */
#leftToolsPanel, #rightToolsPanel {
    overflow-x: hidden !important;
}

/* Класс визуального нажатия для кнопок истории */
.btn-pressed {
    filter: brightness(0.92);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2) !important;
    transform: translateY(1px);
}
.status {
    background-color: white;
    padding: 10px;
    overflow: hidden;
}

.status.active {
    animation-name: color;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.status.complete {
    background-color: #CCFFC6;
}

@keyframes color {
    0% {
        background-color: #FFF;
    }
    50% {
        background-color: #CCFFC6;
    }
    100% {
        background-color: #FFF;
    }
}

.palette .color {
    float: left;
    width: 40px;
    height: 40px;
    border: 1px solid #AAA;
    border-radius: 5px;
    text-align: center;
    padding: 5px;
    font-weight: 600;
    margin: 5px;
    text-shadow: #FFF 0px 0px 5px;
}

.collection-item > .row {
    margin-bottom:0px;
}

#input-pane {
    overflow: auto !important;
    max-width: 100%;
    max-height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    position: relative;
}

#input-pane > .row {
    flex-shrink: 0;
    width: 100%;
}

/* Canvas всегда видим - сохраняет пропорции и полностью помещается */
#canvas {
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform-origin: center center !important;
}

#svgContainer {
    overflow: auto;
    max-width: 100%;
    max-height: 525px;
}

.palette-info {
    background-color: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.palette-info p {
    margin: 5px 0;
    color: #2e7d32;
}

.palette-info strong {
    font-weight: 600;
}

/* Современный дизайн для сайта */
body {
    background: honeydew;
    min-height: 100vh;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Навигация и логотип */
nav {
    background: #006994;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand-logo .material-icons {
    font-size: 28px;
    color: honeydew;
}

/* Логотип на экране входа */
.logo-circle {
    display: inline-flex;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: #006994;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 105, 148, 0.35);
    animation: popIn 0.5s ease-out;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Плавное появление секций */
.view-section { opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.view-section.visible { opacity: 1; transform: translateY(0); }

/* Светлый фон и чистые контейнеры для не-главных страниц */
body.non-app { background: honeydew; }
body.non-app .container { background: transparent; box-shadow: none; padding: 0; }
body.non-app h5 { color: #006994; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 700; }

/* Формы входа и админки без лишних подложек */
.login-form, .admin-section {
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    padding: 30px;
    margin-bottom: 20px;
}

.login-content, .admin-content {
    margin: 0;
}

.login-form h6, .admin-section h6 {
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
    max-width: 100%;
    width: 100%;
}

h2 {
    color: #006994;
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 2.5rem;
}

h2 .material-icons {
    color: #006994;
}

/* Стильные кнопки */
.btn {
    background: #006994;
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 105, 148, 0.3);
    transition: all 0.3s ease;
    text-transform: none;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 105, 148, 0.4);
    background: #005a7a;
}

.btn:focus {
    background: #006994;
}

/* Улучшенные поля ввода */
.input-field input:focus + label,
.input-field input:valid + label {
    color: #006994 !important;
}

.input-field input:focus {
    border-bottom: 1px solid #006994 !important;
    box-shadow: 0 1px 0 0 #006994 !important;
}

.input-field label {
    font-size: 0.8rem;
    transform: translateY(-20px) scale(0.8);
    transform-origin: 0 0;
    transition: all 0.2s ease-out;
}

.input-field input[type=number] {
    margin-bottom: 25px;
    margin-top: 8px;
}

.input-field {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
}

/* Предотвращаем «дергание» при инициализации select (Materialize) */
.no-reflow {
    min-height: 88px; /* высота input-field с селектом + лейбл */
}

.input-field label.active {
    transform: translateY(-20px) scale(0.8);
}

/* Исправление для полей с предустановленными значениями */
.input-field input:not(:placeholder-shown) + label,
.input-field input[value]:not([value=""]) + label,
.input-field input:focus + label {
    transform: translateY(-20px) scale(0.8);
    color: #667eea;
}

/* Дополнительные отступы для лейблов */
.input-field label:not(.label-icon).active {
    transform: translateY(-20px) scale(0.8);
    transform-origin: 0 0;
}

.input-field input[type=text]:focus + label,
.input-field input[type=number]:focus + label,
.input-field input[type=text]:valid + label,
.input-field input[type=number]:valid + label {
    transform: translateY(-20px) scale(0.8);
}

/* Принудительное позиционирование лейблов для полей с value */
.input-field input[type=number][value]:not([value=""]) + label,
.input-field input[type=text][value]:not([value=""]) + label {
    transform: translateY(-20px) scale(0.8) !important;
    color: #006994 !important;
}

/* Фиксация лейблов после загрузки */
.input-field.has-value label {
    transform: translateY(-20px) scale(0.8) !important;
}

/* Стильные вкладки */
.tabs .tab a {
    color: #006994;
    font-weight: 500;
    font-size: 14px;
    padding: 14px 12px;
}

.tabs .tab a:hover {
    color: #005a7a;
}

.tabs .tab a.active {
    color: #005a7a;
    font-weight: 600;
}

.tabs .indicator {
    background-color: #006994;
}

.tabs .tab {
    flex: 1;
    min-width: 0;
}

#tabsOutput .tab {
    width: auto;
    flex: 1;
}

#tabsOutput .tab a {
    font-size: 13px;
    padding: 14px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Улучшенные карточки */
.collection-item {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}

.collection-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.collection {
    border: none;
}

/* Современные прогресс-бары */
.progress {
    background-color: rgba(102, 126, 234, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

.progress .determinate {
    background: linear-gradient(45deg, #667eea, #764ba2);
    border-radius: 20px;
    transition: width 0.3s ease;
}

/* Специфичное правило для верхнего прогресс-бара - зеленый цвет */
#progressBar.determinate {
    background: linear-gradient(90deg, #4caf50, #8bc34a) !important;
    border-radius: 20px;
    transition: width 0.3s ease;
}

/* Улучшенные блоки статуса */
.status {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}

.status.active {
    background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    border-color: #667eea;
    animation: pulse 2s infinite;
}

.status.complete {
    background: linear-gradient(45deg, rgba(76, 175, 80, 0.1), rgba(129, 199, 132, 0.1));
    border-color: #4caf50;
    color: #2e7d32;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Стильная палитра */
.palette .color {
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.palette .color:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Улучшенные чекбоксы и радио */
[type="checkbox"] + span:before {
    border: 2px solid #006994;
}

[type="checkbox"]:checked + span:before {
    background-color: #006994;
    border-color: #006994;
}

[type="radio"] + span:before {
    border: 2px solid #006994;
}

[type="radio"]:checked + span:after {
    background-color: #006994;
}

/* Улучшенная вводная секция */
.intro-section {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 25px;
    color: #424242;
}

.upload-section {
    text-align: center;
    margin-bottom: 25px;
}

.file-input-wrapper {
    margin: 15px 0;
}

.file-input {
    display: none;
}

.file-input-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #4caf50, #66bb6a);
    color: white;
    padding: 0;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    line-height: 1;
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.file-input-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
    background: linear-gradient(45deg, #66bb6a, #4caf50);
}

.upload-note {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 10px;
}

.upload-note .material-icons {
    vertical-align: middle;
    margin-right: 5px;
    color: #2196f3;
}

.examples-section {
    text-align: center;
}

.example-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.example-link {
    background: rgba(0, 105, 148, 0.1);
    color: #006994;
    border-radius: 20px;
    padding: 8px 20px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 105, 148, 0.2);
}

.example-link:hover {
    background: rgba(0, 105, 148, 0.2);
    transform: translateY(-1px);
    color: #005a7a;
}

/* Улучшенные холсты */
canvas {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

/* Контейнер SVG */
#svgContainer {
    margin-top: 30px;
    padding-top: 20px;
}

/* Временно скрываем визуальный вывод SVG, оставляя его в DOM для сохранения */
#svgContainer { display: none !important; }

/* Карточки проектов и настроек */
.project-card .card-title { font-weight: 600; color: #111827; }
.project-card .card-action { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.owner-select-field { min-width: 220px; }

/* Красивые выпадающие списки */
.select-wrapper input.select-dropdown {
    border-bottom: 2px solid #006994 !important;
    box-shadow: none !important;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom: 2px solid #006994 !important;
    box-shadow: 0 1px 0 0 #006994 !important;
}

.select-wrapper .dropdown-content li > span {
    color: #006994;
}

.select-wrapper .dropdown-content li:hover {
    background-color: rgba(0, 105, 148, 0.1);
}

/* Кнопки в навигации */
nav .btn {
    background: honeydew;
    color: #006994;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

nav .btn:hover {
    background: #f0fff0;
    color: #006994;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#svgContainer svg {
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Контейнеры для результатов */
#kmeans-pane, #reduction-pane, #borderpath-pane, 
#bordersegmentation-pane, #labelplacement-pane, 
#output-pane, #log-pane {
    padding-top: 30px;
    margin-top: 20px;
}

/* Прозрачный фон для секции результата и элементов внутри */
#output-pane {
    background: transparent !important;
}

#output-pane .row, #output-pane .palette, #svgContainer, #cResult {
    background: transparent !important;
    box-shadow: none !important;
}

/* Адаптивная ширина canvas результата */
#cResult {
    height: auto;
}

/* Палитра */
#palette {
    margin-top: 20px;
    margin-bottom: 30px;
}

/* (удалено) Плейсхолдер для canvas */

/* Улучшенные tooltips */
.material-tooltip {
    background-color: #424242;
    border-radius: 8px;
    font-size: 12px;
    padding: 8px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Анимация загрузки */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.intro-section {
    animation: fadeIn 0.6s ease-out;
}

/* Адаптивность */
@media only screen and (max-width: 768px) {
    .container {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 20px;
        border-radius: 10px;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    .intro-section {
        padding: 20px;
    }
    
    .example-links {
        flex-direction: column;
        align-items: center;
    }
    
    .example-link {
        width: 80%;
        max-width: 200px;
    }
    
    .intro-text {
        font-size: 1rem;
    }
    
    .tabs .tab a {
        font-size: 12px;
        padding: 12px 6px;
    }
    
    #tabsOutput .tab a {
        font-size: 11px;
        padding: 12px 4px;
    }
    
    .input-field {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .input-field label {
        font-size: 0.75rem;
    }
    
    canvas {
        margin-top: 15px;
    }
    
    #kmeans-pane, #reduction-pane, #borderpath-pane, 
    #bordersegmentation-pane, #labelplacement-pane, 
    #output-pane, #log-pane {
        padding-top: 20px;
        margin-top: 15px;
    }
}

/* Стили для упрощенного генератора */
.color-swatch {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.palette-info {
    background-color: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    text-align: center;
}

.palette-info p {
    margin: 8px 0;
    color: #2e7d32;
    font-size: 16px;
}

.palette-info strong {
    font-weight: 600;
    font-size: 18px;
}

/* Упрощенные вкладки */
#tabsOutput .tabs {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#tabsOutput .tab a {
    color: #006994;
    font-weight: 500;
}

#tabsOutput .tab a.active {
    color: #006994;
    background-color: #e3f2fd;
}

/* Кнопки экспорта */
.btn {
    border-radius: 8px;
    font-weight: 500;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Статус прогресса */
.status {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 10px 0;
}

.status .progress {
    border-radius: 4px;
    overflow: hidden;
}

.status .determinate {
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width 0.3s ease;
}

/* Новый дашборд стиль */
.settings-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.settings-panel h5 {
    color: #006994;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.3rem;
}

.image-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

/* Убираем padding у resultPanel */
#resultPanel.image-panel,
.row.equal-height #resultPanel.image-panel {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Улучшенные коллекции для настроек */
.settings-panel .collection-item {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid rgba(0, 105, 148, 0.1);
    transition: all 0.3s ease;
    padding: 15px;
}

.settings-panel .collection-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 105, 148, 0.2);
}

.settings-panel .collection {
    border: none;
    margin: 0;
}

/* Центрирование загрузки файла */
.center-align {
    text-align: center;
}

/* Стили для секций изображения и результата */
.image-panel h6 {
    color: #006994;
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.1rem;
    border-bottom: 2px solid #006994;
    padding-bottom: 8px;
}

/* Одинаковая высота для центральной и правой колонок */
.row.equal-height {
    display: flex;
    flex-wrap: wrap;
    min-height: 600px;
    max-height: calc(100vh - 150px);
}

.row.equal-height > .col {
    display: flex;
    flex-direction: column;
}

.row.equal-height .image-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: visible;
}

.row.equal-height .image-panel h6 {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 15px;
    padding-top: 0;
}

.row.equal-height #input-pane,
.row.equal-height #output-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Контейнер изображения гибкий */
.row.equal-height #input-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0;
    max-height: 100%;
    min-height: 0;
    overflow: auto !important;
}

/* Контейнер результата выравнивается по верхнему краю, как исходное изображение */
.row.equal-height #output-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: auto !important;
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

#output-pane > .row {
    flex-shrink: 0;
    width: 100%;
}

#output-pane > canvas {
    flex-shrink: 0;
}

.row.equal-height canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Сохраняем пропорции изображения в центральной колонке */
.row.equal-height #canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Делаем canvas результата и исходного изображения одинаковой высоты */
.row.equal-height #canvas,
.row.equal-height #cResult {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Специальные стили для canvas результата */
.row.equal-height #cResult {
    display: block;
    margin: 0 auto;
    background: transparent;
    align-self: flex-start;
}

/* Выравнивание canvas исходного изображения */
.row.equal-height #canvas {
    margin: 0;
    display: block;
    cursor: grab;
}

.row.equal-height #canvas:active {
    cursor: grabbing;
}

/* Принудительное выравнивание высоты canvas результата */
.row.equal-height #cResult[style*="height"] {
    width: auto !important;
    height: auto !important;
}

/* Горизонтальная панель настроек */
.settings-dashboard {
    margin-top: 0;
    margin-bottom: 15px;
}

.settings-dashboard-panel {
    background: #f5f5f5;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 30px;
    justify-content: flex-start;
}

/* Компактные, не плавающие лейблы внутри полей панели настроек */
.settings-dashboard-panel .input-field > label {
    position: static;
    display: block;
    transform: none !important;
    font-size: 0.65rem;
    color: #006994;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 4px 0;
    white-space: normal;
}

.settings-dashboard-panel .input-field input[type="number"],
.settings-dashboard-panel .input-field input[type="text"],
.settings-dashboard-panel .input-field input[type="password"],
.settings-dashboard-panel .input-field select {
    height: 32px;
    line-height: 30px; /* 32px - 2px для рамок = 30px для центрирования */
    margin: 0;
    padding: 1px 8px; /* 1px сверху и снизу для компенсации */
    background-color: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    color: #333;
    box-sizing: border-box;
    vertical-align: top;
    font-family: inherit;
    font-size: 0.75rem;
}

/* Убеждаемся, что select имеет такую же высоту как input */
.settings-dashboard-panel .input-field select {
    height: 32px !important;
    line-height: 30px !important; /* 32px - 2px для рамок = 30px для центрирования */
    padding: 1px 8px !important; /* 1px сверху и снизу для компенсации */
    margin: 0 !important;
    text-align: center !important;
    vertical-align: top !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
    font-size: 0.75rem !important;
    box-sizing: border-box !important;
}

/* Специфичное правило для select "кол-во областей" - поднимаем текст выше */
.settings-dashboard-panel .setting-item.select-item .input-field.detail-level select {
    padding: 0 8px !important; /* Убираем все вертикальные отступы */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important; /* Полная высота для выравнивания */
    margin: 0 !important;
    margin-top: -4px !important; /* Еще более агрессивный сдвиг вверх */
    position: relative !important;
    top: -3px !important; /* Увеличенный сдвиг через position */
    transform: translateY(-2px) !important; /* Увеличенный сдвиг через transform */
    vertical-align: top !important;
    height: 32px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
}

.settings-dashboard-panel .setting-item {
    min-height: 32px;
}

.custom-size-row .input-field {
    margin: 0;
}

.setting-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 40px;
    flex: 0 0 auto;
    position: relative;
    min-height: 35px;
    margin-right: 40px;
}

.setting-label {
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    text-align: left;
    white-space: normal;
    margin-bottom: 0;
}

/* Минимальные ширины для select и checkbox, чтобы заголовки не наезжали */
.settings-dashboard-panel .setting-item.select-item .input-field { min-width: 40px; }
.settings-dashboard-panel .setting-item.checkbox-item { min-width: 40px; }
.settings-dashboard-panel .setting-item.input-item { min-width: 40px; }
.settings-dashboard-panel .setting-item.button-item { min-width: 40px; }

/* Группа кнопок загрузки и обработки (вертикально) */
.settings-dashboard-panel .upload-buttons-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
}

/* Кнопка загрузки - прямоугольная темно-серая с текстом */
.settings-dashboard-panel .file-input-label.btn-upload,
.settings-dashboard-panel .file-input-label.btn-upload.btn,
.settings-dashboard-panel .file-input-label.btn-upload.green {
    width: 100%;
    height: 36px;
    border-radius: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1;
    padding: 0 16px;
    background-color: #757575 !important;
    background: #757575 !important;
    border: 1px solid #616161 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
}

.settings-dashboard-panel .file-input-label.btn-upload:hover,
.settings-dashboard-panel .file-input-label.btn-upload.btn:hover,
.settings-dashboard-panel .file-input-label.btn-upload.green:hover {
    background-color: #616161 !important;
    background: #616161 !important;
}

.settings-dashboard-panel .file-input-label.btn-upload .material-icons {
    color: #ffffff !important;
    margin-right: 6px;
    font-size: 18px;
    line-height: 1;
}

.settings-dashboard-panel .file-input-label.btn-upload span {
    color: #ffffff !important;
}

/* Кнопка "Начать обработку" - прямоугольная голубая */
.settings-dashboard-panel .btn-process {
    width: 100%;
    height: 36px;
    border-radius: 12px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1;
    padding: 0 16px;
    background-color: #2196F3;
    border: none;
    color: white;
    box-shadow: none;
    transition: all 0.2s;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
}

.settings-dashboard-panel .btn-process:hover {
    background-color: #1976D2;
}

.settings-dashboard-panel .btn-process .material-icons {
    margin-right: 6px;
    font-size: 18px;
    line-height: 1;
}

.settings-dashboard-panel .file-input-wrapper {
    margin: 0;
    width: 100%;
}

/* Дополнительный отступ между "Размер областей" и "Кол-во областей" */
.settings-dashboard-panel .setting-item.cluster-size-item {
    margin-right: 60px;
}

/* Остальные кнопки - квадратные */
.settings-dashboard-panel .button-item .btn,
.settings-dashboard-panel .end-button {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 0;
    background-color: #e0e0e0;
    border: 1px solid #d0d0d0;
    color: #333;
    box-shadow: none;
    transition: all 0.2s;
}

.settings-dashboard-panel .button-item .btn:hover,
.settings-dashboard-panel .end-button:hover {
    background-color: #d5d5d5;
}

.settings-dashboard-panel .setting-item.button-item { align-self: flex-end; }


.setting-item .input-field {
    margin: 0;
    width: 50px;
    margin-top: 0;
    position: relative;
    z-index: 1;
    align-self: flex-start;
    box-sizing: border-box;
    min-height: 24px;
}

.setting-item .input-field.wide-input {
    width: 80px;
    box-sizing: border-box;
}

/* Узкие инпуты — центрирование текста */
.settings-dashboard-panel .input-field input[type="number"],
.settings-dashboard-panel .input-field input[type="text"] {
    text-align: center;
    line-height: 30px !important; /* 32px - 2px для рамок = 30px для центрирования */
    padding: 1px 8px !important; /* 1px сверху и снизу для компенсации */
    vertical-align: top !important;
}

/* Чуть опускаем поля под статичными лейблами, чтобы не наезжали */
.settings-dashboard-panel .setting-item.input-item .input-field { margin-top: 14px; }
.settings-dashboard-panel .setting-item.select-item .input-field { margin-top: 14px; }

/* Спец: ширина селекта для поля "Холст" (чтобы влезало слово "Формат") */
.settings-dashboard-panel .canvas-mode-item .input-field select {
    width: 110px !important;
    min-width: 110px !important;
    padding-right: 6px;
}
/* И сам блок "Холст" делаем 90px шириной */
.settings-dashboard-panel .canvas-mode-item .input-field {
    width: 110px;
    min-width: 110px;
}
.settings-dashboard-panel .canvas-mode-item {
    min-width: 110px;
}

/* Адаптив: 992 — панель колонкой, лейбл слева, контрол справа */
@media (max-width: 992px) {
    .settings-dashboard-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .settings-dashboard-panel .setting-item {
        flex-direction: row;
        align-items: center;
        min-width: 0;
    }
    .settings-dashboard-panel .setting-label {
        margin: 0 8px 0 0;
        min-width: 120px;
        white-space: normal;
    }
    .settings-dashboard-panel .input-item .input-field,
    .settings-dashboard-panel .select-item .input-field,
    .settings-dashboard-panel .checkbox-item .checkbox-wrapper {
        margin-top: 0;
    }
}

/* Адаптив: 768 — каждый элемент вертикально, лейбл сверху */
@media (max-width: 768px) {
    .settings-dashboard-panel .setting-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .settings-dashboard-panel .setting-label {
        margin: 0 0 4px 0;
        min-width: 0;
    }
}

.setting-item .input-field.detail-level {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    box-sizing: border-box;
}

.setting-item .input-field.orientation {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    box-sizing: border-box;
}

.setting-item .input-field.color-space {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    box-sizing: border-box;
}

/* Исправление z-index для выпадающих списков */
.dropdown-content {
    z-index: 1000 !important;
}

/* Полностью отключаем Materialize select */
.setting-item .input-field {
    position: relative !important;
}

.setting-item .input-field.select-wrapper {
    position: relative !important;
}

.setting-item .input-field .dropdown-content {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

.setting-item .input-field input.select-dropdown {
    display: none !important;
}

.setting-item .input-field .caret {
    display: none !important;
}

/* Стили для select элементов - унификация с input */
.setting-item .input-field select {
    font-size: 0.75rem !important;
    color: #333 !important;
    height: 32px !important;
    line-height: 30px !important; /* 32px - 2px для рамок = 30px для центрирования */
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 1px 8px !important; /* 1px сверху и снизу для компенсации */
    margin: 0 !important;
    vertical-align: top !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    text-align: center !important;
}

/* Принудительная ширина для каждого типа select */
.setting-item .input-field.detail-level select {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

.setting-item .input-field.orientation select {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}

.setting-item .input-field.color-space select {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.setting-item .input-field:not(.detail-level):not(.orientation):not(.color-space):not(.wide-input) select {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
}

.setting-item .input-field input.select-dropdown {
    font-size: 0.75rem !important;
    color: #333 !important;
    height: 1.5rem !important;
    line-height: 1.5rem !important;
    display: block !important;
    visibility: visible !important;
}

/* Убираем все стрелки в select элементах */
.setting-item .input-field select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

.setting-item .input-field::after {
    display: none !important;
}

/* Убираем стрелки у Materialize select dropdown */
.setting-item .input-field input.select-dropdown {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}

.setting-item .input-field .caret {
    display: none !important;
}

/* Убираем все псевдоэлементы со стрелками */
.setting-item .input-field::before {
    display: none !important;
}

.setting-item .input-field .select-wrapper::after {
    display: none !important;
}

/* Аккуратно убираем только стрелки, сохраняя поля */
.setting-item .input-field .caret {
    display: none !important;
}

.setting-item .input-field .select-wrapper::after {
    display: none !important;
}

/* Ширина для Materialize select dropdown */
.setting-item .input-field.detail-level input.select-dropdown {
    width: 100px !important;
}

.setting-item .input-field.orientation input.select-dropdown {
    width: 80px !important;
}

.setting-item .input-field.color-space input.select-dropdown {
    width: 100px !important;
}

/* Override: точечная ширина для селекта "Холст" (повышенная специфичность, в конце файла) */
.settings-dashboard-panel .setting-item.canvas-mode-item .input-field:not(.detail-level):not(.orientation):not(.color-space):not(.wide-input) select {
    width: 120px !important;
    min-width: 120px !important;
}
.settings-dashboard-panel .setting-item.canvas-mode-item .input-field { width: 120px; min-width: 120px; }

/* Центрируем лейбл "Холст" внутри блока */


/* Стили для опций в выпадающем списке */
.dropdown-content li > a, .dropdown-content li > span {
    font-size: 0.75rem !important;
    color: #333 !important;
    line-height: 1.5rem !important;
}

/* Размеры блоков в выпадающих списках */
.dropdown-content {
    min-width: 200px !important;
}

.dropdown-content li {
    min-height: 1.5rem !important;
    line-height: 1.5rem !important;
}

.dropdown-content li > a, .dropdown-content li > span {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.5rem !important;
}

/* ===== Синхронизация панели настроек с проектом 2609 3 ===== */
.settings-dashboard-panel {
    align-items: flex-end;
    gap: 10px;
}

/* Локально увеличиваем расстояние между "Плавность деталей" и "Холст" */
.settings-dashboard-panel .detail-smoothness-item { margin-right: 10px; }
.settings-dashboard-panel .canvas-mode-item { margin-left: 10px; }

/* Отступы внутри блока "Плавность деталей" по 10px с каждой стороны */
.settings-dashboard-panel .detail-smoothness-item {
    padding-left: 10px;
    padding-right: 10px;
}

/* Правый внешний отступ у блока "Не изменять проект" и выравнивание лейбла */
.settings-dashboard-panel .preserve-project-item {
    margin-right: 40px;
    padding: 2px !important; /* Такой же padding как у других элементов */
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    min-height: 32px !important;
    position: relative !important;
}

/* Выравнивание лейбла "не изменять проект" на одном уровне с лейблом "Размер областей" */
.settings-dashboard-panel .preserve-project-item.checkbox-item .setting-label,
.settings-dashboard-panel .setting-item.preserve-project-item.checkbox-item .setting-label,
.settings-dashboard-panel .preserve-project-item .setting-label {
    top: -14px !important;
    height: 20px !important;
    line-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    transform: translateY(0) !important;
    align-items: center !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    display: flex !important;
}

/* Выравнивание чекбокса "не изменять проект" как select "кол-во областей" */
.settings-dashboard-panel .preserve-project-item .checkbox-wrapper {
    margin-top: 14px !important; /* Такой же margin-top как у input-field для select */
    position: relative !important;
    top: -3px !important; /* Такой же сдвиг как у select */
    transform: translateY(-2px) !important; /* Такой же transform как у select */
    margin-bottom: 0 !important;
}

/* Правый внешний отступ у блока "Радиус сглаживания" */
.settings-dashboard-panel .smoothing-kernel-item {
    margin-right: 20px;
}

/* Центровка лейбла в блоке "Размер Холста" */
.settings-dashboard-panel .canvas-mode-item .setting-label {
    justify-content: center !important;
    text-align: center;
}

.setting-item {
    min-height: auto;
    margin-bottom: 8px;
    padding: 2px;
}

.setting-label {
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 2px;
    height: auto;
    min-height: 16px;
    display: flex;
    align-items: center;
}

.setting-item .input-field.wide-input {
    width: 65px;
}

/* Статичное позиционирование лейблов на одной линии */
.setting-item .setting-label {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

.setting-item.input-item .setting-label,
.setting-item.checkbox-item .setting-label,
.setting-item.button-item .setting-label {
    top: 0 !important;
    transform: translateY(0) !important;
    position: absolute !important;
}

.setting-item.select-item .setting-label {
    top: 10px !important;
    position: absolute !important;
    transform: translateY(0) !important;
}

/* Отступ для select и checkbox под лейблом */
.setting-item .select-wrapper,
.checkbox-wrapper {
    margin-top: 20px;
}

.setting-item .input-field input {
    margin-bottom: 0;
    text-align: center;
    font-size: 0.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
}


.setting-item .select-wrapper {
    height: 1.5rem;
    width: 40px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.setting-item .select-wrapper input.select-dropdown {
    height: 1.5rem !important;
    line-height: 1.5rem !important;
    margin-bottom: 0 !important;
}

/* Специальное позиционирование для разных типов элементов */
.setting-item .setting-label {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 20px !important;
    line-height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

/* Принудительное выравнивание всех лейблов на одном уровне */
.setting-item.input-item .setting-label,
.setting-item.checkbox-item .setting-label,
.setting-item.button-item .setting-label {
    top: 0 !important;
    transform: translateY(0) !important;
    position: absolute !important;
}

/* Отдельное правило для select-элементов для коррекции смещения */
.setting-item.select-item .setting-label {
    top: 10px !important;
    position: absolute !important;
    transform: translateY(0) !important;
}

.setting-item .input-field input:focus,
.setting-item .input-field select:focus {
    border-bottom: 2px solid #006994 !important;
    box-shadow: 0 1px 0 0 #006994 !important;
}

.checkbox-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5rem;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.checkbox-wrapper label {
    margin: 0;
    padding-left: 36px;
}

.checkbox-wrapper input[type="checkbox"] + span:before {
    border: 2px solid #006994;
    width: 20px;
    height: 20px;
}

.checkbox-wrapper input[type="checkbox"]:checked + span:before {
    background-color: #006994;
    border-color: #006994;
}

.play-btn {
    background: #4caf50 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    min-width: 40px !important;
    align-self: flex-start;
}

.play-btn:hover {
    background: #66bb6a !important;
    transform: translateY(-2px);
}

/* Стили для кнопок в конце настроек */
.end-button {
    background: #006994 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    min-width: 40px !important;
    align-self: flex-start;
    color: white !important;
}

.end-button:hover {
    background: #0088cc !important;
    transform: translateY(-2px);
}

/* Активное состояние для кнопки палитры */
#btnTogglePalette.active {
    background: #4caf50 !important;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.export-buttons {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    flex: none;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    align-self: flex-start;
}

.export-buttons .btn-floating {
    background: #006994;
}

.export-buttons .btn-floating:hover {
    background: #005a7a;
    transform: translateY(-2px);
}

/* Заголовки панелей */
.panel-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 105, 148, 0.3);
    font-size: 1.5rem;
    font-weight: 600;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.image-panel {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    padding: 5px;
    margin-bottom: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    border: none;
}

.image-panel h6 {
    display: none;
}

/* Убираем границы у панелей */
.image-panel {
    border: none !important;
}

/* Скрываем заголовки когда есть контент */
.image-panel.has-content .panel-title {
    opacity: 0;
    pointer-events: none;
}

/* Стили для панели кластеров */
#clusterMenuColumn {
    min-height: 600px;
}

#clusterMenuColumn .image-panel {
    min-height: 600px;
}

/* Стили для процесса обработки */
.processing-overlay {
    position: fixed;
    inset: 0;
    /* Затемнение на время обработки (вместо blur): RGB(14,24,48) @ 80% */
    background: rgba(14, 24, 48, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: all;
}

/* Во время обработки НЕ размываем контент — используем затемнение оверлея */
body.processing-active #navbar,
body.processing-active #appView,
body.processing-active #projectsView,
body.processing-active #adminSettingsView,
body.processing-active #loginView {
    filter: none;
    -webkit-filter: none;
}

.processing-dialog {
    width: min(720px, calc(100vw - 32px));
    min-height: 220px;
    padding: 28px 24px;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.processing-progress {
    width: min(520px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.processing-text {
    margin-top: 6px;
    color: #ffffff;  /* Белый текст для лучшей читаемости на темном фоне */
    font-weight: 600;
    font-size: 1.1rem;
}

body.processing-active {
    overflow: hidden;
    /* Жестко фиксируем фон во время обработки, чтобы не появлялась синяя заливка */
    background: honeydew !important;
}

/* Спиннер-изображение */
.spinner-image {
    width: 64px;
    height: 64px;
    display: block;
    animation: spinner-rotate 1s linear infinite;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform;
}

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

/* Палитра */
.palette-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    backdrop-filter: blur(10px);
}

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

.palette-header h6 {
    color: #006994;
    font-weight: 600;
    margin: 0;
}

.palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.palette .color {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #ddd;
    text-align: center;
    padding: 2px;
    font-weight: 600;
    font-size: 0.7rem;
    text-shadow: #FFF 0px 0px 3px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.palette .color:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Всплывающие подсказки */
.tooltipped {
    cursor: default;
}

/* Кнопки должны иметь pointer курсор */
.btn.tooltipped {
    cursor: pointer;
}

/* Адаптивность для нового макета */
@media only screen and (max-width: 1200px) {
    .settings-dashboard-panel {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .setting-item {
        min-width: 100px;
        flex: 1 1 calc(25% - 15px);
    }
}

/* Горизонтальная панель кластеров под настройками */
.cluster-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    padding: 6px 8px;
    backdrop-filter: blur(8px);
    transform-origin: top center;
}

.cluster-toolbar .input-field {
    margin: 0;
    width: 150px;
}

.cluster-toolbar .input-field > label {
    position: static;
    display: block;
    transform: none !important;
    font-size: 0.7rem;
    color: #006994;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 0 4px 0;
}

.cluster-toolbar .input-field input[type="number"] {
    height: 28px;
    line-height: 28px;
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
}

.cluster-toolbar .toolbar-spacer {
    flex: 1;
}

.cluster-toolbar .btn {
    border-radius: 18px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.cluster-toolbar .btn.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px currentColor !important;
    transform: scale(1.05);
}

.cluster-toolbar .btn.orange.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px #ff9800 !important;
}

@media only screen and (max-width: 600px) {
    .cluster-toolbar { flex-wrap: wrap; }
    .cluster-toolbar .toolbar-spacer { display: none; }
    .cluster-toolbar .input-field { width: 100%; }
}

@media only screen and (max-width: 992px) {
    .settings-dashboard-panel {
        flex-direction: column;
        align-items: stretch;
    }
    
    .setting-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-width: auto;
        margin-bottom: 15px;
    }
    
    .setting-label {
        margin-bottom: 0;
        margin-right: 15px;
        text-align: left;
    }
    
    .setting-item .input-field {
        flex: 1;
        max-width: 150px;
    }
    
    .export-buttons {
        justify-content: center;
        margin-top: 20px;
    }
    
    .row.equal-height {
        display: block;
    }
    
    .row.equal-height > .col {
        display: block;
    }
    
    .row.equal-height .image-panel {
        display: block;
    }
    
    .row.equal-height #input-pane,
    .row.equal-height #output-pane {
        display: block;
    }
    
    .row.equal-height canvas {
        min-height: auto;
    }
}

@media only screen and (max-width: 768px) {
    .settings-dashboard-panel {
        padding: 15px;
    }
    
    .image-panel {
        padding: 15px;
    }
    
    .setting-item {
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .setting-label {
        margin-bottom: 8px;
        margin-right: 0;
        text-align: center;
    }
    
    .setting-item .input-field {
        max-width: 100%;
    }
    
    .palette .color {
        width: 25px;
        height: 25px;
        font-size: 0.6rem;
    }
}

/* ========================================
   ПАНЕЛЬ РЕДАКТИРОВАНИЯ
   ======================================== */

.edit-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    border: 1px solid #d0d0d0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tool-btn .material-icons {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Активное состояние кнопки подсветить - синий цвет */
#btnHighlightSmallRegionsLeft.active,
#btnHighlightSmallRegionsRight.active,
#btnHighlightSmallRegionsNew.active {
    background-color: #2196F3 !important;
    color: white !important;
}

#btnHighlightSmallRegionsLeft.active .material-icons,
#btnHighlightSmallRegionsRight.active .material-icons,
#btnHighlightSmallRegionsNew.active .material-icons {
    color: white !important;
}

.tool-btn {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent;
    font-size: 12px !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-height: 28px !important;
}

.tool-btn:hover {
    background: rgba(255, 152, 0, 0.1) !important;
}

.tool-btn.active {
    background: #e3f2fd !important;
    color: #1976d2 !important;
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2) !important;
}

.edit-checkbox-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
    background: #f5f5f5;
    border: 1px solid #ddd;
}

.edit-checkbox-label:hover {
    background: rgba(255, 152, 0, 0.1);
    border-color: #ff9800;
}

.edit-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Кастомный чекбокс */
.edit-checkbox-label input[type="checkbox"] + span::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 2px solid #999;
    border-radius: 4px;
    background: white;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.edit-checkbox-label input[type="checkbox"]:checked + span::before {
    background: #2196F3;
    border-color: #2196F3;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"%3E%3Cpath d="M5 12l5 5L20 7"/%3E%3C/svg%3E');
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.edit-checkbox-label span {
    white-space: nowrap;
    font-weight: 500;
    color: #555;
}

/* Состояние когда чекбокс активен */
.edit-checkbox-label:has(input[type="checkbox"]:checked) {
    background: rgba(33, 150, 243, 0.1);
    border-color: #2196F3;
}

.edit-checkbox-label:has(input[type="checkbox"]:checked) span {
    color: #1976D2;
    font-weight: 600;
}

/* Палитра цветов */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
    padding: 16px 0;
    max-height: 400px;
    overflow-y: auto;
}

.palette-color {
    width: 100%;
    height: 50px;
    border: 3px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.palette-color:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 10;
}

/* Палитра в правой панели - компактная версия */
#paletteGridRight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 0;
}

.palette-color-right {
    width: 100%;
    height: 30px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.palette-color-right:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.palette-color-right.selected {
    border-color: #4CAF50;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3), 0 2px 8px rgba(0,0,0,0.2);
    transform: scale(1.05);
}

.palette-color-right .color-label {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    color: white;
    text-shadow: 0 0 2px black;
    font-weight: bold;
    pointer-events: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.palette-color-right .color-settings {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.palette-color-right:hover .color-settings {
    opacity: 1;
}

.palette-color-right .color-settings:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}
    border-color: #1976d2;
    border-width: 4px;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.3), 0 4px 12px rgba(0,0,0,0.3);
    transform: scale(1.1);
}

.palette-color::after {
    content: attr(data-hex);
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #666;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.palette-color:hover::after {
    opacity: 1;
}

/* Выделенные регионы */
.region-selected {
    stroke: #00ff00 !important;
    stroke-width: 4px !important;
    filter: drop-shadow(0 0 8px #00ff00);
    animation: pulse-selection 1.5s infinite;
}

@keyframes pulse-selection {
    0%, 100% {
        stroke-width: 4px;
        filter: drop-shadow(0 0 8px #00ff00);
    }
    50% {
        stroke-width: 6px;
        filter: drop-shadow(0 0 12px #00ff00);
    }
}

/* Узлы контуров */
.node-handle {
    fill: #ffffff;
    stroke: #1976d2;
    stroke-width: 2px;
    cursor: move;
    transition: all 0.2s;
}

.node-handle:hover {
    fill: #1976d2;
    stroke-width: 3px;
    transform: scale(1.3);
}

/* Индикатор текущего инструмента */
#currentColorDisplay {
    position: relative;
    transition: all 0.2s;
}

#currentColorDisplay:hover {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(255, 82, 82, 0.6), 0 0 6px rgba(255, 82, 82, 0.4);
}

/* Убрать все всплывающие подсказки */
#currentColorDisplay::after,
#currentColorDisplay::before {
    display: none !important;
    content: none !important;
}

/* Контекстное меню */
.context-menu-item {
    transition: background 0.2s;
}

.context-menu-item:hover {
    background: rgba(25, 118, 210, 0.1);
}

.context-menu-item:active {
    background: rgba(25, 118, 210, 0.2);
}

/* Responsive для панели редактирования */
@media only screen and (max-width: 992px) {
    .edit-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .toolbar-spacer {
        display: none !important;
    }
    
    .toolbar-group {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 600px) {
    .edit-checkbox-label span {
        font-size: 0.75rem;
    }
    
    .palette-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 6px;
    }
    
    .palette-color {
        height: 40px;
    }
}
/* Стили для меню выделения */
.selection-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-menu-item:hover {
    background-color: #f5f5f5;
    transform: translateX(2px);
}

.selection-menu-item:active {
    background-color: #e0e0e0;
}

.selection-menu-item[data-action="cancel"]:hover {
    background-color: #ffebee;
    color: #d32f2f !important;
}

/* Стили для кнопок инструментов редактирования */
.tool-btn {
    background: white;
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px !important;
    min-width: 40px;
    height: 36px;
    transition: all 0.2s;
    cursor: pointer;
}

.tool-btn:hover {
    background: #f5f5f5;
    border-color: #2196F3;
}

.tool-btn.active {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
}

.tool-btn.active i {
    color: white;
}

.tool-btn i {
    color: #666;
}

.tool-btn:hover i {
    color: #2196F3;
}

.tool-btn.active:hover i {
    color: white;
}

/* Стили для активных кнопок-переключателей */
.btn.active {
    background-color: #4CAF50 !important;
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.btn.active:hover {
    background-color: #45a049 !important;
}

.tool-btn.active {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: white !important;
}

.tool-btn.active i {
    color: white !important;
}

/* Стили для живой палитры */
.live-palette-color-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.live-palette-color-wrapper:hover {
    background-color: rgba(33, 150, 243, 0.05);
}

.live-palette-color {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.live-palette-color:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-color: #2196F3 !important;
}

.live-palette-color.selected {
    border: 3px solid #4CAF50 !important;
    box-shadow: 0 0 12px rgba(76,175,80,0.5);
}

.paint-consumption {
    font-size: 0.7rem;
    color: #555;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------
   Paint by Numbers панель (верхняя секция)
---------------------------------------- */

#paintByNumbersToolbarRow,
#layersToolbarRow {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#paintByNumbersToolbarRow[style*="display: none"],
#layersToolbarRow[style*="display: none"] {
    opacity: 0;
    transform: translateY(-6px);
}

#paintByNumbersToolbarRow:not([style*="display: none"]),
#layersToolbarRow:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}

.pbn-toolbar,
.layers-toolbar {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    padding: 12px 16px;
    backdrop-filter: blur(8px);
}

.pbn-header,
.layers-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.pbn-header i,
.layers-header i {
    color: #2196F3;
}

.pbn-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.pbn-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 6px 8px;
}

.pbn-field input[type="number"] {
    width: 70px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8rem;
    text-align: center;
}

.pbn-label {
    font-size: 0.75rem;
    color: #555;
    font-weight: 500;
}

.pbn-unit {
    font-size: 0.7rem;
    color: #777;
}

.pbn-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.75rem;
    color: #555;
    font-weight: 500;
}

.pbn-checkbox input {
    margin: 0;
}

.pbn-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.layers-toolbar .layer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.layers-toolbar .layer-row:last-child {
    margin-bottom: 0;
}

.layer-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #444;
}

.layer-name input {
    margin: 0;
}

.layer-opacity {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.layer-opacity label {
    font-size: 0.7rem;
    color: #777;
    margin: 0;
}

.layer-opacity input[type="range"] {
    flex: 1;
    height: 4px;
}

.layer-opacity span {
    font-size: 0.7rem;
    min-width: 36px;
    color: #555;
    text-align: right;
}

/* Стили для кастомного слайдера масштабирования */
.custom-zoom-slider {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.custom-slider-track {
    width: 100%;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.custom-slider-thumb {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #555;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.2s;
    /* Убираем все возможные tooltip */
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.custom-slider-thumb:hover {
    background: #444;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Убираем tooltip у всех элементов слайдера */
.custom-slider-thumb,
.custom-slider-track,
.custom-zoom-slider {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Скрываем нативный input[type="range"] - он используется только для функциональности */
#zoomSlider,
#inputZoomSlider {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    z-index: 2;
    /* Убираем все стили, которые могут показать tooltip */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
    background: transparent;
}

/* Стили для кнопок сброса масштаба */
#btnResetZoom,
#btnResetInputZoom {
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

#btnResetZoom:hover,
#btnResetInputZoom:hover {
    background-color: #e0e0e0 !important;
}

#btnResetZoom:active,
#btnResetInputZoom:active {
    background-color: #bdbdbd !important;
}

/* Убираем нативный tooltip у input[type="range"] */
#zoomSlider::-webkit-slider-thumb,
#inputZoomSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #555;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#zoomSlider::-moz-range-thumb,
#inputZoomSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #555;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#zoomSlider::-webkit-slider-thumb:hover,
#inputZoomSlider::-webkit-slider-thumb:hover {
    background: #444;
    transform: scale(1.1);
}

#zoomSlider::-moz-range-thumb:hover,
#inputZoomSlider::-moz-range-thumb:hover {
    background: #444;
    transform: scale(1.1);
}

/* Убираем нативный tooltip браузера при перетаскивании ползунка */
#zoomSlider::-webkit-slider-thumb::before,
#inputZoomSlider::-webkit-slider-thumb::before {
    display: none !important;
}

/* Дополнительно скрываем tooltip через pointer-events */
#zoomSlider:focus,
#inputZoomSlider:focus {
    outline: none;
}

/* Скрываем нативный tooltip в Firefox */
#zoomSlider::-moz-range-track,
#inputZoomSlider::-moz-range-track {
    pointer-events: none;
}

/* Скрываем нативный tooltip в Chrome/Safari - более агрессивный подход */
#zoomSlider::-webkit-slider-thumb,
#inputZoomSlider::-webkit-slider-thumb {
    -webkit-tap-highlight-color: transparent;
}

/* Скрываем tooltip через переопределение стилей */
#zoomSlider::-webkit-slider-thumb::after,
#inputZoomSlider::-webkit-slider-thumb::after {
    display: none !important;
    content: none !important;
}

/* Дополнительно: скрываем любые всплывающие подсказки */
#zoomSlider::before,
#zoomSlider::after,
#inputZoomSlider::before,
#inputZoomSlider::after {
    display: none !important;
    content: none !important;
}

/* Предотвращаем показ нативного tooltip через tabindex */
#zoomSlider,
#inputZoomSlider {
    tabindex: -1;
    /* Убираем возможность фокуса, что предотвращает показ tooltip */
}

/* Скрываем tooltip через переопределение всех возможных состояний */
#zoomSlider:active,
#zoomSlider:focus,
#inputZoomSlider:active,
#inputZoomSlider:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Скрываем нативный tooltip через обертку - более радикальный подход */
#zoomSlider,
#inputZoomSlider {
    /* Убираем все возможные tooltip через CSS */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Убираем overflow: hidden, чтобы ползунок не обрезался */
#zoomSlider::-webkit-slider-container,
#inputZoomSlider::-webkit-slider-container {
    overflow: visible;
}

/* Дополнительно: скрываем через pointer-events на контейнере tooltip */
#zoomSlider::-webkit-slider-thumb:active,
#inputZoomSlider::-webkit-slider-thumb:active {
    pointer-events: none;
}

/* Стили для контейнера с прокруткой */
#resultScrollContainer {
    position: relative;
}

#resultScrollContainer::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

#resultScrollContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

#resultScrollContainer::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

#resultScrollContainer::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Стили для редактирования узлов */
.node-point {
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.node-point:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.node-point.custom-node {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(68, 255, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(68, 255, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(68, 255, 68, 0); }
}

/* Стили для overlay узлов */
#nodeEditOverlay {
    pointer-events: none;
}

#nodeEditOverlay .node-point {
    pointer-events: all;
}

/* Стили для обрезки */
.crop-selection {
    border: 2px dashed #ff4444;
    background: rgba(255, 68, 68, 0.1);
    position: absolute;
    pointer-events: none;
}

/* Контейнер для колонок с изображениями */
.equal-height {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}

/* Колонка с исходным изображением */
#inputColumnWrapper {
    flex: 0 0 50%;
    min-width: 200px;
    transition: flex 0.05s ease;
}

/* Колонка с результатом */
#resultColumnWrapper {
    flex: 0 0 50%;
    min-width: 200px;
    position: relative;
    transition: flex 0.05s ease;
}

/* Вертикальный разделитель для перетаскивания */
.drag-handle {
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    background: transparent;
}

.drag-handle:hover {
    background: rgba(33, 150, 243, 0.1);
}

.drag-handle.dragging {
    background: rgba(33, 150, 243, 0.15);
}

.drag-handle-line {
    width: 3px;
    height: 60px;
    background: #2196F3;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    transition: all 0.2s ease;
}

.drag-handle:hover .drag-handle-line {
    height: 80px;
    width: 4px;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.5);
}

.drag-handle.dragging .drag-handle-line {
    height: 120px;
    width: 4px;
    background: #1976D2;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.7);
}

/* Кнопка в toast-уведомлении */
.toast-action {
    background: white !important;
    color: #2196F3 !important;
    margin-left: 10px !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
}

.toast-action:hover {
    background: #f5f5f5 !important;
}

/* Стили для кнопок навигации по истории */
.btn-group {
    display: inline-flex;
    gap: 4px;
}

#btnHistoryBack, #btnHistoryForward {
    min-width: 40px;
    height: 36px;
    padding: 0 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#btnHistoryBack:disabled, #btnHistoryForward:disabled {
    background-color: #e0e0e0 !important;
    color: #9e9e9e !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

#btnHistoryBack:not(:disabled):hover, #btnHistoryForward:not(:disabled):hover {
    background-color: #616161 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#btnHistoryBack:not(:disabled):active, #btnHistoryForward:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* =================================================================
   EXPORT MODAL - Модальное окно экспорта проекта
   ================================================================= */

.export-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    background: transparent !important;
    background-color: transparent !important;
}

/* Убеждаемся, что модальное окно не имеет синего фона */
#settingsModal.export-modal,
#exportModal.export-modal {
    background: transparent !important;
    background-color: transparent !important;
}

/* Переопределяем возможные стили Materialize для overlay */
.lean-overlay,
.modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

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

.export-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
    z-index: 1;
}

/* Убеждаемся, что overlay черный, а не синий - максимальная специфичность */
#settingsModal.export-modal .export-modal-overlay,
#exportModal.export-modal .export-modal-overlay,
div#settingsModal .export-modal-overlay,
div#exportModal .export-modal-overlay,
#settingsModal .export-modal-overlay,
#exportModal .export-modal-overlay,
.export-modal .export-modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background-image: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* Переопределяем возможные синие цвета из Materialize или других библиотек */
.export-modal-overlay[style*="blue"],
.export-modal-overlay[style*="#006994"],
.export-modal-overlay[style*="#2196F3"],
.export-modal-overlay[style*="rgb(0, 105, 148)"],
.export-modal-overlay[style*="rgba(0, 105, 148"] {
    background: rgba(0, 0, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.export-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
    z-index: 2;
}

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

.export-modal-header {
    background: #9e9e9e !important;
    color: white;
    padding: 20px 24px;
    border-radius: 12px 12px 0 0;
    position: relative;
}

.export-modal-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.export-modal-header button {
    color: white !important;
}

.export-modal-header button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.export-modal-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.export-param {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 3px;
}

.export-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-label .material-icons {
    color: #2196F3;
    vertical-align: middle;
}

.export-label i {
    color: #2196F3;
    font-size: 16px;
}

.export-input {
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.export-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.export-hint {
    font-size: 11px;
    color: #666;
    font-style: italic;
}

/* Уменьшаем размер шрифта для значений слайдеров */
#settingsBorderThicknessValue,
#settingsBorderBrightnessValue,
#settingsNumberBrightnessValue {
    font-size: 12px !important;
}

.file-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.export-modal-footer .btn {
    min-width: 100px;
    font-size: 13px;
    padding: 8px 16px;
    height: auto;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .export-modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .export-modal-header,
    .export-modal-body,
    .export-modal-footer {
        padding: 20px;
    }
    
    .export-modal-header h5 {
        font-size: 20px;
    }
    
    .export-param {
        gap: 6px;
    }
    
    .export-label {
        font-size: 14px;
    }
    
    .export-input {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* Анимация для активных кнопок */
#btnHistoryBack:not(:disabled) .material-icons, 
#btnHistoryForward:not(:disabled) .material-icons {
    transition: transform 0.2s ease;
}

#btnHistoryBack:not(:disabled):hover .material-icons {
    transform: translateX(-1px);
}

#btnHistoryForward:not(:disabled):hover .material-icons {
    transform: translateX(1px);
}

/* Стили для кнопок в панели редактирования (2x2 сетка) */
.tool-btn-grid {
    transition: all 0.2s ease;
}

.tool-btn-grid:hover {
    background-color: #d5d5d5 !important;
    border-color: #bbb !important;
}

.tool-btn-grid.active {
    background-color: #bbb !important;
    border-color: #999 !important;
}

.tool-btn-grid.active .material-icons {
    color: #333 !important;
}

/* Поднятие лейблов "Кол-во цветов" и "Размер областей" */
.settings-dashboard-panel .setting-item.input-item:not(.preserve-project-item) .setting-label,
.settings-dashboard-panel .setting-item.input-item.cluster-size-item .setting-label {
    top: -4px !important;
    position: absolute !important;
    transform: translateY(0) !important;
}

/* Увеличение ширины поля ввода "Кол-во цветов" на 50% */
.settings-dashboard-panel .setting-item.input-item:not(.preserve-project-item):not(.cluster-size-item) .input-field {
    width: 75px !important;
}

/* Выравнивание лейбла "Кол-во областей" */
.settings-dashboard-panel .setting-item.select-item .setting-label {
    top: 6px !important;
    position: absolute !important;
    transform: translateY(0) !important;
}

/* Выравнивание лейбла "Не изменять проект" */
.settings-dashboard-panel .setting-item.preserve-project-item.checkbox-item .setting-label {
    top: -14px !important;
    position: absolute !important;
    transform: translateY(0) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Убираем отступы у resultScrollContainer и выравниваем изображения */
#resultScrollContainer,
#inputScrollContainer {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;   /* гарантируем полосы прокрутки */
    position: relative;
    /* Используем block для правильной работы скролла */
    display: block;
    box-sizing: border-box;
}

/* Центрируем холсты внутри скролл-контейнеров */
#resultScrollContainer canvas,
#inputScrollContainer canvas {
    display: block;
    margin: 0 auto;
    /* Убираем ограничения, чтобы canvas мог быть больше контейнера */
    box-sizing: border-box;
}

/* Убираем отступы у row внутри output-pane и input-pane */
#output-pane > .row,
#input-pane > .row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Убираем отступы у col внутри output-pane и input-pane */
#output-pane > .row > .col,
#input-pane > .row > .col {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Убираем отступы у resultScrollContainer для выравнивания с исходным изображением */
#resultScrollContainer {
    width: 100% !important;
    max-width: 100% !important;
}

/* Убираем отступы у resultScrollContainer для выравнивания с исходным изображением */
#output-pane > .row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем padding у image-panel для результата */
#resultPanel.image-panel,
.row.equal-height #resultPanel.image-panel {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Выравниваем canvas результата по верхнему краю - сохраняет пропорции и полностью помещается */
#cResult,
.row.equal-height #cResult {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    align-self: center;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform-origin: center center !important;
}

/* Выравниваем canvas исходного изображения - сохраняет пропорции и полностью помещается */
#canvas,
.row.equal-height #canvas {
    margin: 0 !important;
    padding: 0 !important;
    align-self: center;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transform-origin: center center !important;
}

/* Обеспечиваем одинаковый масштаб для обоих canvas - сохраняем пропорции */
#canvas,
#cResult {
    object-fit: contain;
    object-position: center;
    transform-origin: center center !important;
}

/* Убираем padding у resultPanel - более специфичное правило */
.row.equal-height #resultPanel.image-panel,
#resultPanel.image-panel {
    padding: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Скрываем panel-title для результата, чтобы он не занимал место */
/* Заголовок "Макет" теперь виден */
#resultPanel .panel-title {
    display: block !important;
}

/* Убираем отступы у панели масштабирования результата */
#resultPanel .row:first-of-type {
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 4px 2px 4px !important;
    padding-top: 0 !important;
}

/* Выравниваем панели масштабирования - убираем отступ сверху у исходного изображения */
.image-panel:not(#resultPanel) .row:first-of-type {
    padding-top: 0 !important;
}

/* Убираем отступы у всех row и col внутри output-pane */
#output-pane .row,
#output-pane .col {
    margin: 0 !important;
    padding: 0 !important;
}