/* === design tokens (TZ 27.08) === */
:root {
  --bg-surface: #ffffff;
  --bg-muted: #f5f5f5;
  --bg-accent: #e8f5e9;
  --text-primary: #111111;
  --text-secondary: #1a1a1a;
  --border: #cccccc;
  --accent: #2e7d32;
  --accent-2: #1a73e8;
  --danger: #c62828;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --ease: 180ms ease-in-out;
  --panel-w: 360px;
  --focus: 0 0 0 2px var(--accent);
}
.ps-presets button,
.fly-chip,
.oc-chip,
#address-search-button,
#routing-btn,
.floor > summary {
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.ps-presets button:hover,
.fly-chip:hover,
.oc-chip:hover { border-color: var(--accent); }
.ps-presets button:focus-visible,
.fly-chip:focus-visible,
.oc-chip:focus-visible,
#address-search-button:focus-visible,
#routing-btn:focus-visible,
.floor > summary:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
.ps-presets button:disabled,
.fly-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.score-live .layer-name { color: var(--accent); }
.score-dead { opacity: 1; }
.score-dead .layer-name::after { content: " · в кадре 0"; font-weight: 400; font-size: 11px; color: #444; }
.preset-recipe { margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: var(--text-secondary, #1a1a1a); }
#tag-radius-box { min-height: 220px; }
.leaflet-control-layers label.layer-live { color: #1b5e20 !important; font-weight: 600; }
.leaflet-control-layers label.layer-live::before { content: "● "; color: var(--accent); }
.leaflet-control-layers label.layer-dead { color: #444 !important; }
.leaflet-control-layers label.layer-dead::before { content: "○ "; color: #444; }
body.dark-theme {
  --bg-surface: #1a1a1a;
  --bg-muted: #2a2a2a;
  --bg-accent: #1b3d1f;
  --text-primary: #f0f0f0;
  --text-secondary: #e0e0e0;
  --border: #555;
}
body.dark-theme .floor,
body.dark-theme .controls-container,
body.dark-theme .ps-title,
body.dark-theme #tag-radius-box {
  background: var(--bg-surface);
  color: var(--text-primary);
}

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    font-family: 'Roboto', sans-serif; 
    overflow: hidden; /* Убирает прокрутку страницы */
    background-color: #1a1a1a; /* Темный фон на всякий случай */
    -webkit-tap-highlight-color: transparent; 
}

#map-container { 
    position: absolute; /* Жесткое позиционирование */
    top: 40px; /* под topbar #app-topbar */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 40px);
    z-index: 1;
}

#map { 
    height: 100%; 
    width: 100%; 
}

.legend, .controls-container, #inline-table-display-area, #toggle-menu-button {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, left 0.3s ease-in-out; 
}

.legend {
    padding: 8px 12px; 
    font: 12px Arial, Helvetica, sans-serif;
    background: white; 
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 15px rgba(0,0,0,0.2); 
    border-radius: 5px;
    line-height: 18px; 
    color: #333; 
    min-width: 180px;
    width: auto;
    max-width: 210px;
    max-height: 38vh; 
    overflow-y: auto; overflow-x: hidden; 
    position: absolute;
    bottom: 30px; 
    right: 10px;
    z-index: 900; 
}
.legend h4 { 
    margin: 0 0 5px; 
    color: #333; 
    text-align: center; 
}
.legend i { 
    width: 16px; 
    height: 16px; 
    float: left; 
    margin-right: 6px; 
    opacity: 0.85; 
    border: 1px solid #999;
}

#loading-indicator {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7); 
    color: white; 
    padding: 15px 25px;
    border-radius: 6px; 
    z-index: 10001; 
    font-size: 16px; 
    display: none;
}

.controls-container {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.94);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: var(--panel-w);
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    color: #000000;
}
.controls-container,
.controls-container label,
.controls-container h4,
.controls-container span,
.controls-container small,
.controls-container .layer-name,
.controls-container .points-text,
.controls-container .poi-type-list,
.controls-container .layer-group-header,
.controls-container .control-item label {
    color: #000000 !important;
}
.controls-container .control-item label {
    white-space: normal;
}

.control-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.control-item label { 
    font-size: 13px; 
    white-space: nowrap; 
    cursor: pointer;
}
.control-item input[type="range"] { 
    flex-grow: 1; 
    min-width: 60px; 
    margin-right: 8px;
}
.control-item input[type="number"] { 
    width: 45px; 
    padding: 3px 5px;
    box-sizing: border-box;
    text-align: right;
}
.control-item button { 
    padding: 5px 8px; 
    font-size: 11px; 
    cursor: pointer; 
    flex-shrink: 0; 
}
.control-item input[type="checkbox"] { 
    margin-right: 0px; 
    cursor: pointer;
}

body.dark-theme .legend { 
    background: rgba(50,50,50,0.9); 
    color: #f0f0f0; 
}
body.dark-theme .legend h4 { 
    color: #f0f0f0; 
}
body.dark-theme .legend i { 
    border-color: #666; 
}
body.dark-theme .controls-container {
    background: rgba(255, 255, 255, 0.94);
    color: #000000;
}
body.dark-theme .control-item label {
    color: #000000;
}

.hexagon-label {
    font-weight: bold;
    color: #000000; 
    background-color: rgba(255, 255, 255, 0.75); 
    padding: 1px 3px; 
    border-radius: 3px; 
    white-space: nowrap; 
    text-align: center; 
    pointer-events: none; 
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

body.dark-theme .hexagon-label {
    color: #FFFFFF; 
    background-color: rgba(20, 20, 20, 0.75); 
    box-shadow: 0px 0px 1px rgba(255,255,255,0.5);
}

.leaflet-control-scale-line {
    border: 2px solid #777;
    border-top: none;
    color: #333; 
    background-color: rgba(255, 255, 255, 0.7); 
    padding: 2px 5px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
    border-radius: 3px; 
    margin-bottom: 2px; 
}
body.dark-theme .leaflet-control-scale-line {
    border-color: #bbb;
    color: #eee;
    background-color: rgba(40, 40, 40, 0.7);
}

#inline-table-display-area {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.95); 
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 0 0 5px 5px; 
    z-index: 1000; 
    display: none; 
    flex-direction: column; 
    box-sizing: border-box;
}

body.dark-theme #inline-table-display-area {
    background-color: rgba(50, 50, 50, 0.95);
    border-color: #555;
    color: #f0f0f0;
}

#inline-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    box-sizing: border-box;
    cursor: move; /* Курсор перетаскивания */
    user-select: none; /* Запрет выделения текста */
}
body.dark-theme #inline-table-header {
    background-color: #444;
    border-bottom-color: #555;
}

#inline-table-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* === ИСПРАВЛЕННАЯ КНОПКА ЗАКРЫТИЯ === */
#close-inline-table-button {
    /* Размеры и форма */
    width: 30px;
    height: 30px;
    border-radius: 4px; /* Скругленные углы */
    border: none;
    
    /* Цвета: Красный фон, белый текст */
    background-color: #ff4444; 
    color: white;
    
    /* Выравнивание крестика по центру */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Шрифт */
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    
    cursor: pointer;
    margin-left: 10px; /* Отступ от названия таблицы */
    transition: background-color 0.2s;
}

/* Эффект при наведении мыши */
#close-inline-table-button:hover {
    background-color: #cc0000; /* Темно-красный */
}

/* ВАЖНО: Если в HTML кнопка пустая, этот код сам нарисует крестик */
#close-inline-table-button:empty::after {
    content: "×"; 
}
/* ==================================== */

#inline-table-content {
    overflow-y: auto; 
    flex-grow: 1; 
    padding: 0 5px 5px 5px; 
    box-sizing: border-box;
}

#inline-table-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#inline-table-content th, 
#inline-table-content td {
    border: 1px solid #ddd;
    padding: 4px 6px;
    text-align: left;
    box-sizing: border-box;
}

#inline-table-content th {
    background-color: #e9e9e9;
    font-weight: bold;
    position: sticky; 
    top: 0;           
    z-index: 1;       
}
#inline-table-content th.sortable {
    cursor: pointer;
}
#inline-table-content th.sortable:hover {
    background-color: #dcdcdc;
}
body.dark-theme #inline-table-content th.sortable:hover {
    background-color: #666;
}

.sort-indicator {
    margin-left: 5px;
    font-size: 0.8em; 
}

body.dark-theme #inline-table-content th {
    background-color: #555;
    border-color: #666;
}
body.dark-theme #inline-table-content td {
    border-color: #666;
}

.inline-table-pagination {
    padding: 8px 5px;
    text-align: center;
    border-top: 1px solid #ccc;
    background-color: #f9f9f9;
    box-sizing: border-box;
}
body.dark-theme .inline-table-pagination {
    border-top-color: #555;
    background-color: #404040;
}
.inline-table-pagination button {
    margin: 0 5px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
}
.inline-table-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.inline-table-pagination span {
    font-size: 12px;
    margin: 0 8px;
}

#toggle-menu-button {
    display: none;
    /* W1: кнопка живёт внутри #app-topbar — позиционируется flex-ом, не absolute */
    font-size: 20px;
    padding: 3px 8px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1; 
    box-sizing: border-box;
}
body.dark-theme #toggle-menu-button {
    background-color: rgba(40, 40, 40, 0.8);
    border-color: #555;
    color: #f0f0f0;
}

@media (max-width: 799px) { 
    #toggle-menu-button {
        display: block; 
    }

    .controls-container {
        transform: translateX(-100%); 
        left: 0; 
        height: calc(100vh - 20px); 
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        border-radius: 0 5px 5px 0; 
    }

    .controls-container.open {
        transform: translateX(0); 
    }

    .legend {
        max-height: 150px; 
        font-size: 10px; 
        right: 5px;      
        bottom: 25px;    
        max-width: 120px; 
    }
    .legend i {
        width: 12px;
        height: 12px;
        margin-right: 4px;
    }

    #inline-table-display-area {
        z-index: 1000; 
    }

    .leaflet-control-zoom-in, .leaflet-control-zoom-out {
        font-size: 1.5em !important; 
        width: 34px !important;      
        height: 34px !important;     
        line-height: 34px !important;
    }
    .leaflet-control-scale-line {
        font-size: 10px; 
        margin-left: 50px; 
    }
    .leaflet-control-layers {
        display: block !important;
        margin-right: 8px;
    }
}

@media (max-width: 375px) {
    .controls-container {
        width: 88vw;
        max-width: 88vw;
        padding: 8px;
    }
    #formula-dock.open, #formula-dock.sheet {
        width: calc(100vw - 8px);
        left: 4px;
        right: 4px;
        top: 4px;
        height: calc(100vh - 8px);
    }
    #demo-shell { font-size: 11px; }
    #tag-radius-box input[type="range"] { width: 100%; }
}

@media (max-width: 480px) { 
    .controls-container {
        gap: 8px; 
        padding: 8px; 
        width: 220px; 
    }
    .control-item label, .control-item small {
        font-size: 11px; 
    }
    .control-item button {
        font-size: 10px;
        padding: 4px 6px;
    }
    .control-item input[type="number"] {
        width: 35px;
    }
    #inline-table-title {
        font-size: 13px;
    }
    .legend {
        max-height: 120px;
        font-size: 9px;
    }
    .leaflet-control-scale-line {
        margin-left: 45px; 
    }
}

.leaflet-popup-content-wrapper {
}
.leaflet-popup-content {
    max-height: 200px; 
    overflow-y: auto;
    margin: 10px !important; 
    font-size: 12px;
    box-sizing: border-box;
}
.leaflet-popup-content pre {
    white-space: pre-wrap;      
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap;     
    white-space: -o-pre-wrap;   
    word-wrap: break-word;      
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 5px;
    margin-top: 5px;
    border-radius: 3px;
    font-size: 11px;
    box-sizing: border-box;
}
body.dark-theme .leaflet-popup-content pre {
    background-color: #333;
    border-color: #555;
    color: #f0f0f0;
}

body.dark-theme .leaflet-tooltip {
    background: rgba(45, 45, 45, 0.92); 
    color: #e8e8e8;                  
    border: 1px solid #585858;       
    box-shadow: 0 1px 5px rgba(0,0,0,0.5); 
    font-size: 11px;
    padding: 5px 8px;
}

body.dark-theme .leaflet-tooltip-top:before {
	border-bottom-color: #585858; 
}
body.dark-theme .leaflet-tooltip-bottom:before {
	border-top-color: #585858;
}
body.dark-theme .leaflet-tooltip-left:before {
	border-right-color: #585858;
}
body.dark-theme .leaflet-tooltip-right:before {
	border-left-color: #585858;
}

#layer-controls-panel {
    border-top: 1px solid #ccc;
    margin-top: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}
body.dark-theme #layer-controls-panel {
    border-top-color: #555;
}

#layer-controls-panel h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    text-align: center;
}

.layer-control-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}
#layer-controls-panel .layer-control-item:last-of-type {
    border-bottom: none;
    margin-bottom: 15px;
}
body.dark-theme .layer-control-item {
    border-bottom-color: #444;
}

.layer-main-info {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
}

.layer-main-info input[type="checkbox"] {
    margin-right: 6px;
    flex-shrink: 0;
    cursor: pointer;
}

.layer-main-info label {
    font-size: 12px;
    flex-grow: 1; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    margin-right: 8px;
    min-width: 0;
}

.point-layer-toggle-item {
    display: flex;
    align-items: center;
    padding-left: 25px;
}

.point-layer-toggle-item input[type="checkbox"] {
    margin-right: 6px;
    flex-shrink: 0;
    cursor: pointer;
}

.point-layer-toggle-item label {
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.layer-weight-input {
    width: 50px; 
    padding: 3px 5px;
    text-align: right;
    box-sizing: border-box;
    flex-shrink: 0;
}
.layer-control-item span {
    font-size: 12px;
    margin-left: 2px;
    flex-shrink: 0;
}

.recalculate-container {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column; 
    gap: 8px;
}
body.dark-theme .recalculate-container {
    border-top-color: #555;
}

#recalculate-ratings-button {
    width: 100%; 
    padding: 6px 10px;
    font-size: 13px;
    box-sizing: border-box;
    cursor: pointer;
}

.recalculation-status-text {
    font-size: 11px;
    color: #555;
    min-height: 1.5em; 
    text-align: center;
}

body.dark-theme .recalculation-status-text {
    color: #bbb;
}

.draggable-header {
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
    margin: -10px -10px 10px -10px;
    cursor: move;
    user-select: none;
}

/* === ФИНАЛЬНЫЙ РЕМОНТ МЕНЮ И ПОИСКА (ВЕРСИЯ 3) === */

/* 1. Настройка самого окна меню */
.controls-container {
    resize: both !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    
    min-width: 260px;              /* Минимальная ширина */
    min-height: 200px;             /* Минимальная высота */
    
    max-width: 95vw;               /* Не шире экрана */
    max-height: 95vh !important;   /* Разрешаем растягивать почти до низа экрана */
    
    padding-bottom: 20px;          /* Место для уголка, чтобы удобно хватать */
    box-sizing: border-box !important;
}

/* 2. УДАЛЯЕМ надпись "Поиск адреса:" */
.control-item:has(#address-input) label {
    display: none !important;      /* Скрыть полностью */
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Настраиваем контейнер поиска (чтобы кнопка была под полем) */
.control-item:has(#address-input) {
    display: flex !important;
    flex-direction: column !important; /* Столбик */
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box !important;
}

/* 4. Поле ввода на всю ширину */
#address-input {
    width: 100% !important;
    height: 35px !important;
    margin: 0 0 8px 0 !important;  /* Отступ снизу до кнопки */
    box-sizing: border-box !important;
}

/* 5. Кнопка поиска на всю ширину */
#address-input ~ button {
    display: block !important;
    width: 100% !important;
    height: 35px !important;
    background-color: #4CAF50 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Скрываем копирайт карты */
.leaflet-control-attribution {
    display: none !important;
}

/* ========================================== */
/* СТИЛИ ДЛЯ ПОДПИСЕЙ ТОЧЕК (LABELS)          */
/* ========================================== */

/* Сам текст подписи */
.static-point-label {
    background: transparent; /* Прозрачный фон */
    border: none;            /* Убираем рамку */
    box-shadow: none;        /* Убираем тень */
    
    color: #000;             /* Черный текст */
    font-weight: bold;       /* Жирный */
    font-size: 11px;         /* Размер шрифта */
    
    /* Белая обводка букв (чтобы читалось на темной карте) */
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
         
    white-space: nowrap;     /* Текст в одну строку */
    
    /* ВАЖНО: Чтобы сквозь текст можно было кликать по карте/маркеру */
    pointer-events: none;    
}

/* Убираем стандартный треугольник-стрелочку Leaflet */
.leaflet-tooltip-top:before, 
.leaflet-tooltip-bottom:before, 
.leaflet-tooltip-left:before, 
.leaflet-tooltip-right:before {
    display: none !important;
}

/* Легенда точек в меню */
.point-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    margin-left: 2px;
    border: 1px solid rgba(0,0,0,0.2); /* Легкая обводка для светлых цветов */
    vertical-align: middle;
    flex-shrink: 0;
}

/* Выравнивание лейбла чекбокса, чтобы кружок стоял ровно */
.layer-control-item label {
    display: flex;
    align-items: center;
}

















/* =========================================
   ФИНАЛЬНЫЕ СТИЛИ МЕНЮ (UI v5 - Big Sliders)
   ========================================= */

/* Контейнер одного слоя */
.layer-control-item {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Отступ между строками */
}

.layer-control-item:last-child {
    border-bottom: none;
}

.layer-control-item.disabled {
    opacity: 0.5;
}
/* Разрешаем кликать по главному чекбоксу даже в disabled состоянии */
.layer-control-item.disabled .layer-header-row {
    pointer-events: auto;
}
.layer-control-item.disabled .layer-slider-row,
.layer-control-item.disabled .point-layer-toggle-item {
    pointer-events: none;
}


/* --- СТРОКА 1: Заголовок и Инпут --- */
.layer-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Лейбл (Чекбокс + Имя) */
.layer-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-grow: 1; /* Занимает все место слева */
    font-size: 13px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    margin-right: 10px;
}

.layer-name {
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Поле ввода цифр */
input[type="number"].layer-weight-input {
    width: 42px;
    height: 24px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
    color: #333;
    padding: 0;
    -moz-appearance: textfield; /* Убираем стрелки в Firefox */
}
/* Убираем стрелки в Chrome/Safari */
input[type="number"].layer-weight-input::-webkit-outer-spin-button,
input[type="number"].layer-weight-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].layer-weight-input:focus {
    border-color: #3498db;
    background: #fff;
    outline: none;
}

.layer-percent-symbol {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
    width: 12px;
}

/* --- СТРОКА 2: Большой Слайдер --- */
.layer-slider-row {
    width: 100%;
    padding: 0 2px; /* Небольшой отступ с краев */
    box-sizing: border-box;
    height: 24px;
    display: flex;
    align-items: center;
}

/* Слайдер */
input[type=range].layer-slider {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    height: 24px; /* Высота зоны клика */
    cursor: pointer;
    margin: 0;
}

input[type=range].layer-slider:focus {
    outline: none;
}

/* Дорожка (Track) - Жирная */
input[type=range].layer-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px; /* Толстая линия */
    background: #e0e0e0;
    border-radius: 3px;
}
input[type=range].layer-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
}

/* Бегунок (Thumb) - Большой и Цветной */
/* Используем переменную --layer-color, которую задает JS */
input[type=range].layer-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px; /* Большой кружок */
    width: 18px;
    border-radius: 50%;
    background: var(--layer-color, #3498db); /* Цвет слоя */
    margin-top: -6px; /* Центрирование: (6px - 18px) / 2 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s;
    border: 2px solid white; /* Белая обводка */
}
input[type=range].layer-slider::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border: none;
    border-radius: 50%;
    background: var(--layer-color, #3498db);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid white;
}

input[type=range].layer-slider:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}

/* --- СТРОКА 3: Точки --- */
.point-layer-toggle-item {
    margin-top: 2px;
    font-size: 12px;
    color: #555;
    display: flex;
    align-items: center;
    padding-top: 4px;
    border-top: 1px dashed #eee; /* Легкий разделитель */
}

.points-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 2px 0;
    width: 100%;
}
.points-label:hover {
    color: #000;
}

/* Чекбокс точек */
.point-layer-toggle-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border-color: #ccc;
}

/* Легенда (Кружок) */
.point-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- 85 tags modal --- */
#tags85-modal {
    display: none; position: fixed; z-index: 10000; left: 0; top: 0;
    width: 100%; height: 100%; background: rgba(0,0,0,0.5);
}
#tags85-modal .tags85-box {
    background: #ffffff; color: #000000; margin: 40px auto; max-width: 640px;
    max-height: 80vh; overflow-y: auto; padding: 18px 22px; border-radius: 8px;
    font-size: 13px; line-height: 1.5;
}
#tags85-modal h4 { margin: 0 0 6px; color: #000000; }
#tags85-modal .tags85-close { float: right; cursor: pointer; font-size: 18px; color: #000; }
#tags85-modal table { border-collapse: collapse; width: 100%; margin-top: 8px; }
#tags85-modal th, #tags85-modal td { border: 1px solid #ddd; padding: 3px 6px; text-align: left; color: #000; }
#tags85-modal th { background: #f5f5f5; }
#tags85-modal .pos { color: #2e7d32; }
#tags85-modal .neg { color: #c62828; }


/* === Этажи левой панели (floors1) === */
.controls-container { width: var(--panel-w); gap: 8px; }
.ps-brand {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ps-title { font-weight: 700; font-size: 16px; color: #111; }
.ps-lead { margin: 0; font-size: 12px; line-height: 1.35; color: #222; }
.ps-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-presets button {
    border: 1px solid #888; background: #fff; color: #111;
    border-radius: 14px; padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.ps-presets button.on { background: #2e7d32; color: #fff; border-color: #2e7d32; }
.floor {
    border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #111;
    padding: 0;
}
.floor-0 { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.floor > summary {
    cursor: pointer; font-weight: 700; font-size: 13px; padding: 8px 10px;
    list-style: none; color: #111;
}
.floor > summary::-webkit-details-marker { display: none; }
.floor > summary::before { content: "▸ "; color: #2e7d32; }
.floor[open] > summary::before { content: "▾ "; }
.floor-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.floor-extra { border: 0; padding: 0; }
.floor-extra summary { font-weight: 500; font-size: 12px; color: #333; padding: 4px 0; }
.fly-lab { font-size: 11px; font-weight: 700; }
.fly-hint { font-size: 11px; color: #333; line-height: 1.3; }
.fly-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fly-chip {
    border: 1px solid #888; background: #fff; color: #111;
    border-radius: 12px; padding: 3px 8px; font-size: 11px; cursor: pointer;
}
.fly-chip.on { background: #1a73e8; color: #fff; border-color: #1a73e8; }
#tag-radius-box {
    margin: 0; padding: 10px; border: 2px solid #2e7d32; border-radius: 8px;
    background: #e8f5e9; color: #111;
}
#tag-radius-box span, #tag-radius-hint { color: #111; }
#tag-radius-num { width: 72px; font-weight: 700; font-size: 14px; }
#tag-radius-range { width: 100%; height: 28px; }
.weight-sum { font-size: 11px; color: #333; }
.layer-fold { border-top: 1px solid #ddd; padding: 4px 0; }
.layer-fold > summary {
    cursor: pointer; font-weight: 600; font-size: 12px; padding: 4px 0; color: #111;
}
.src-text { margin: 0 10px 10px; font-size: 10px; line-height: 1.35; color: #333; }
#language-select { font-size: 12px; max-width: 110px; }
#address-search-input { width: 100%; box-sizing: border-box; padding: 6px; }
#address-search-button { width: 100%; }


/* floors2: per-group radius, lang bottom, overlay live/dead, route right */
.floor-lang {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; font-size: 12px; color: #111;
}
.floor-lang select { max-width: 160px; font-size: 12px; }
#tag-radius-box { padding: 8px; }
.tr-head { font-weight: 700; font-size: 12px; margin-bottom: 6px; color: #111; }
.tr-row { display: grid; grid-template-columns: 88px 1fr 56px 14px; gap: 4px; align-items: center; margin: 3px 0; }
.tr-lab { font-size: 11px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-row input[type="range"] { width: 100%; height: 22px; }
.tr-row input[type="number"] { width: 56px; font-size: 11px; font-weight: 700; }
#tag-radius-hint { font-size: 10px; color: #333; margin-top: 6px; line-height: 1.3; }
.ps-route-control { background: #fff; padding: 4px; margin-top: 8px; }
.ps-route-control button { font-size: 12px; }
.leaflet-control-layers label.layer-live { color: #1b5e20 !important; font-weight: 600; }
.leaflet-control-layers label.layer-live::before { content: "● "; color: #2e7d32; }
.leaflet-control-layers label.layer-dead { color: #9e9e9e !important; }
.leaflet-control-layers label.layer-dead::before { content: "○ "; color: #bdbdbd; }

.region-na {
    margin: 4px 0 0;
    padding: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #111;
    background: #fff3cd;
    border: 1px solid #e0c36a;
    border-radius: 8px;
}

.peak-row { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px 22px; font-size: 12px; }
.peak-row input[type=range] { flex: 1; }
.peak-row input[type=number] { width: 64px; }
.peak-lab { min-width: 9.5em; color: #111; }
.hex-formula {
    white-space: pre-wrap; font: 12px/1.4 ui-monospace, Consolas, monospace;
    background: #fff; border: 1px solid #ccc; border-radius: 8px;
    padding: 8px; margin: 8px 0 12px; max-height: 420px; overflow: auto; color: #111;
}

.who-wrap { display: flex; flex-direction: column; gap: 4px; }
.who-title { font-size: 12px; color: #111; margin: 4px 0 6px; }
.who-row { display: grid; grid-template-columns: 1fr 56px 16px; grid-template-rows: auto auto; gap: 2px 4px; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.who-name { grid-column: 1 / -1; min-width: 0 !important; max-width: 100%; text-align: left; font-size: 12px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-row input[type=range] { width: 100%; min-width: 0; grid-column: 1; grid-row: 2; }
.who-row input[type=number] { width: 56px; padding: 0 6px; grid-column: 2; grid-row: 2; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.who-row > span { grid-column: 3; grid-row: 2; font-size: 11px; color: #475569; justify-self: start; }
#who-mix, .floor-body, .controls-container { overflow-x: hidden !important; max-width: 100%; }
.floor-body, .floor-body * { box-sizing: border-box; }
.peak-pop-hint { margin: 0 0 8px 22px; font-size: 11px; color: #111; }
.peak-pop-scale { color: #333; }

#big-scale {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 800; pointer-events: none;
}
#big-scale .leaflet-control-scale-line {
    font-size: 15px; padding: 3px 14px; border-width: 3px; background: rgba(255,255,255,.9);
}
.leaflet-bar a, .ps-route-control #routing-btn {
    width: 26px !important; height: 26px !important; line-height: 26px !important;
}
.ps-route-box { gap: 0 !important; }
.ps-route-control.leaflet-bar { background: #fff; }
.tag-x { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 6px 22px; font-size: 11px; }
.tag-x-btn { font-size: 11px; padding: 1px 6px; border: 1px solid #bbb; background: #fff; cursor: pointer; }
.tag-x-btn.on { background: #dbeafe; border-color: #2563eb; }
.tag-x-num { width: 52px; font-size: 11px; }
#layer-help { white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto; border: 1px solid #ccc; padding: 6px; margin-top: 6px; }
.floor > summary { position: sticky; top: 0; background: #fff; z-index: 2; }

.tag-x-lab { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; margin-right: 6px; white-space: nowrap; }
.tag-x-pair { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; margin: 2px 0 0 0; }
.tag-x-pair input[type=range] { flex: 1; min-width: 80px; }
.tag-x { flex-direction: column; align-items: flex-start; }
.tag-x-pair span { min-width: 2.2em; }


/* ui14: меню — 100% ширины панели, вертикальный скролл, без горизонтального */
.controls-container,
.controls-container * { box-sizing: border-box; }
.controls-container { width: var(--panel-w); max-width: calc(100vw - 16px); }
.floor-body, .floor-0, .who-wrap, .who-row, .control-item, .tag-x, .tag-x-pair,
#top-pct-row, #layer-help, .ps-lead, .fly-chips { width: 100%; max-width: 100%; min-width: 0; }
.who-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-row { display: grid !important; grid-template-columns: 1fr 56px 16px; grid-template-rows: auto auto; gap: 2px 4px; }
.who-row input[type=range] { width: 100%; min-width: 0; grid-column: 1; grid-row: 2; }
.who-row input[type=number] { width: 56px; grid-column: 2; grid-row: 2; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.who-row > span { grid-column: 3; grid-row: 2; font-size: 11px; color: #475569; justify-self: start; }
.control-item { width: 100%; min-width: 0; }
.control-item label { white-space: normal; }
.control-item input[type=range] { min-width: 0; flex: 1 1 auto; }
.control-item input[type=number] { width: 52px; flex-shrink: 0; }
#top-pct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#top-pct-row label { flex: 1 1 100%; white-space: normal; font-size: 12px; }
#preset-recipe { white-space: normal; line-height: 1.4; font-size: 11.5px; color: #475569; margin: 6px 0 0; }
#top-pct-range { flex: 1 1 auto; min-width: 0; height: 22px; }
#top-pct-num { width: 56px; flex-shrink: 0; }
.top-scope { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; font-size: 11px; }
.top-scope label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
#layer-help { white-space: pre-wrap; font-size: 11px; line-height: 1.35; max-height: 42vh; overflow-y: auto; padding: 6px 0; }
#layer-help-btn { width: 100%; }
#recalc-hud {
  position: fixed; top: 48px; left: 50%; transform: translateX(-50%);
  z-index: 2200; background: #111; color: #fff; padding: 5px 12px;
  border-radius: 14px; font-size: 12px; display: none; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  max-width: 90vw; align-items: center; gap: 8px; white-space: nowrap;
  pointer-events: none;
}
#recalc-hud .rh-phase { font-weight: 600; }
#recalc-hud .rh-bar { width: 56px; height: 5px; background: #444; border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
#recalc-hud .rh-bar i { display: block; height: 100%; width: 0; background: #6ddc8a; transition: width .15s linear; }
#recalc-hud .rh-meta { font-size: 11.5px; color: #ddd; font-variant-numeric: tabular-nums; }
#big-scale { pointer-events: none; }
#big-scale .leaflet-control-graphicscale { margin: 0; }
#big-scale .leaflet-control-graphicscale-inner { margin: 0; background: rgba(255,255,255,.92); padding: 4px 8px 2px; border-radius: 4px; }
.fd-live { margin-left: auto; font-size: 11px; opacity: .85; }
.fd-banner { background: #111; color: #fff; padding: 8px 10px; border-radius: 6px; }
.fd-total { font-size: 16px; margin: 8px 0; }
.fd-total b { font-size: 22px; }
.fd-delta { font-size: 13px; margin-left: 8px; }
.fd-delta.up { color: #0a7a2f; }
.fd-delta.dn { color: #a11; }
.fd-hint { font-size: 12px; color: #333; margin: 0 0 8px; }
.wf { display: flex; flex-direction: column; gap: 4px; }
.wf-row { display: grid; grid-template-columns: minmax(180px, 1.6fr) 1fr 64px 48px; gap: 6px; align-items: start; font-size: 12px; }
.wf-n { overflow: visible; text-overflow: unset; white-space: normal; line-height: 1.3; }
.wf-block { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
.wf-why { margin: 2px 0 0; font-size: 11px; color: #333; line-height: 1.35; font-weight: 400; white-space: normal; }
.fd-lead { font-size: 13px; margin: 0 0 8px; line-height: 1.4; }
.fd-tbl tr.neg td { color: #a11; }
.ly-lab { min-width: 0; }
.ly-lab b { display: block; white-space: normal; overflow: visible; text-overflow: unset; }
.wf-bar { height: 10px; background: #eee; border-radius: 3px; overflow: hidden; }
.wf-bar i { display: block; height: 100%; background: #2a7; }
.wf-row.neg .wf-bar i { background: #c33; }
.wf-row.chg { outline: 1px solid #111; }
.wf-w .wf-bar i { background: #258; }
.mix-stack { display: flex; height: 22px; border: 1px solid #111; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.mix-seg { background: #258; color: #fff; font-size: 11px; line-height: 22px; text-align: center; overflow: hidden; white-space: nowrap; }
.mix-seg:nth-child(2) { background: #2a7; }
.mix-seg:nth-child(3) { background: #c73; }
.mix-seg:nth-child(4) { background: #58a; }
.mix-seg:nth-child(5) { background: #a35; }
.mix-seg:nth-child(6) { background: #888; }
.mix-seg:nth-child(7) { background: #6a5; }
.mix-list { font-size: 12px; }
.mix-li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid #eee; }

.tag-x { width: 100%; }
.tag-x-hint { font-size: 10px; color: #333; line-height: 1.3; margin: 2px 0 4px; }
.tag-x-lab { white-space: nowrap; }
.poi-type-item { overflow: hidden; }


/* ui15: таскаемое окно формулы / методики */
#formula-dock {
  position: fixed; top: 48px; right: 12px; z-index: 2100;
  width: 640px; height: 72vh; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  background: #fff; color: #111; border: 1px solid #222; border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  display: none; flex-direction: column; resize: both; overflow: hidden;
  min-width: 280px; min-height: 220px;
}
#formula-dock.open { display: flex; }
.fd-head {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; background: #f8fafc; color: #334155; cursor: move; flex-shrink: 0;
  border-bottom: 1px solid #e2e8f0;
}
.fd-title { font-weight: 600; font-size: 13px; }
.fd-auto { margin-left: auto; font-size: 11px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.fd-x { width: 28px; height: 28px; border: 1px solid #cbd5e1; background: #f1f5f9; color: #475569; cursor: pointer; border-radius: 4px; }
.fd-tabs { display: flex; gap: 0; border-bottom: 1px solid #ccc; flex-shrink: 0; }
.fd-tabs button {
  flex: 1; border: 0; background: #f3f3f3; padding: 8px 6px; cursor: pointer; font-size: 12px; color: #111;
}
.fd-tabs button.on { background: #fff; font-weight: 600; border-bottom: 2px solid #111; }
.fd-body {
  margin: 0; padding: 10px 12px; overflow: auto; flex: 1;
  font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre-wrap; color: #111;
}
#fd-open-btn, #fd-src-btn { width: 100%; margin: 4px 0; padding: 6px 8px; }
.hex-formula { display: none !important; }
.tr-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.tr-row input[type=range] { flex: 1 1 120px; min-width: 0; }


/* ui16: шапка окон — тащить / края / свернуть / полный экран */
.win { position: fixed; box-sizing: border-box; }
.win-head, .fd-head, #inline-table-header {
  display: flex; align-items: center; gap: 8px;
  cursor: move; user-select: none; flex-shrink: 0;
}
.win-title, .fd-title { font-weight: 600; font-size: 13px; }
.win-btns { margin-left: auto; display: flex; gap: 4px; }
.win-btns button, .win-min, .win-max, .win-x {
  width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 4px;
  background: #f1f5f9; color: #475569; cursor: pointer; font-size: 13px; line-height: 24px;
  padding: 0;
}
.win-body { flex: 1; overflow: auto; min-height: 0; }
.win-collapsed { height: auto !important; min-height: 0 !important; }
.win-edge { position: absolute; z-index: 5; }
.win-edge-n, .win-edge-s { left: 8px; right: 8px; height: 12px; cursor: ns-resize; }
.win-edge-n { top: 0; }
.win-edge-s { bottom: 0; }
.win-edge-e, .win-edge-w { top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
.win-edge-e { right: 0; }
.win-edge-w { left: 0; }
.win-edge-ne, .win-edge-nw, .win-edge-se, .win-edge-sw { width: 12px; height: 12px; }
.win-edge-ne { top: 0; right: 0; cursor: nesw-resize; }
.win-edge-nw { top: 0; left: 0; cursor: nwse-resize; }
.win-edge-se { bottom: 0; right: 0; cursor: nwse-resize; }
.win-edge-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.controls-container { display: flex; flex-direction: column; overflow: hidden; }
.controls-container > .win-head { background: #f8fafc; color: #334155; padding: 4px 8px; margin: -10px -10px 6px; border-radius: 5px 5px 0 0; border-bottom: 1px solid #e2e8f0; }
.controls-container > .win-body { flex: 1; overflow: auto; min-height: 0; }
#formula-dock { display: none; flex-direction: column; overflow: hidden; resize: none; }
#formula-dock.open { display: flex; }
#formula-dock .fd-body { overflow: auto; flex: 1; padding: 10px 12px; font: 13px/1.45 system-ui, sans-serif; color: #111; white-space: normal; }
.fd-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 14px; }
.fd-tbl th, .fd-tbl td { border: 1px solid #ccc; padding: 4px 6px; text-align: left; vertical-align: top; }
.fd-tbl th { background: #f3f3f3; }
.fd-tbl tr.fd-g td { font-weight: 700; background: #fafafa; }
.fd-indent { padding-left: 16px !important; }
.fd-eq { font-family: ui-monospace, Consolas, monospace; background: #f6f6f6; padding: 6px 8px; border-radius: 4px; }
#fd-body h3 { font-size: 14px; margin: 12px 0 6px; }
#fd-body p, #fd-body li { font-size: 13px; line-height: 1.4; }
#fd-body ul { margin: 4px 0 10px 18px; }
.fd-sub { color: #444; margin: 0 0 8px; }
.fd-notes { font-size: 12px; }
#inline-table-display-area { display: none; flex-direction: column; overflow: hidden; resize: none; }
#inline-table-display-area[style*="flex"], #inline-table-display-area.open { }

/* линейка — только GraphicScale; серый ярлык «3 km» спрятан */
.leaflet-control-scale, #big-scale { display: none !important; }
.leaflet-control-graphicscale { display: block !important; }
.leaflet-bottom.leaflet-left { left: 372px; } /* не под левым меню */
.leaflet-bottom.leaflet-left .leaflet-control-graphicscale { margin: 0 0 12px 0; background: transparent; }

#formula-dock.sheet, #formula-dock.open {
  width: min(640px, calc(100vw - 24px));
  height: calc(100vh - 16px);
  top: 8px; right: 8px;
}
.ly-list { display: flex; flex-direction: column; gap: 6px; }
.ly-row { display: grid; grid-template-columns: 8px 1fr 72px 40px; gap: 8px; align-items: center; }
.ly-row i { width: 8px; height: 14px; border-radius: 3px; }
.ly-row b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly-row .ly-bar { display: block; height: 8px; background: #ddd; border-radius: 4px; overflow: hidden; }
.ly-row .ly-bar em { display: block; height: 100%; background: #3a7; }
.ly-row strong { font-size: 12px; text-align: right; }
.fd-tabs { flex-wrap: wrap; }
.fd-tabs button { font-size: 12px; padding: 6px 10px; }


/* floors31 menu 100% — окно меню на всю высоту экрана (ниже topbar 40px) */
.controls-container {
    top: 48px !important;
    left: 8px !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    width: var(--panel-w);
}
.controls-container > .win-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* floors35: меню всегда на высоту окна, этажи скроллятся внутри */
.controls-container {
    top: 48px !important;
    left: 8px !important;
    height: calc(100vh - 56px) !important;
    max-height: calc(100vh - 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.controls-container > .win-head { flex: 0 0 auto; }
.controls-container > .win-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}
.fd-tbl.fd-levers th, .fd-tbl.fd-levers td { font-size: 11px; padding: 3px 6px; }
.fd-tbl.fd-levers tr.fd-diff td { background: #fff3cd; }

.fd-near li{font-size:15px;line-height:1.45}
.fd-near b{font-weight:700}

@media (max-width: 375px) {
    #recalc-hud {
        min-width: 0;
        max-width: calc(100vw - 16px);
        left: 8px;
        right: 8px;
        transform: none;
        padding: 8px 10px;
        font-size: 12px;
        box-sizing: border-box;
    }
}

/* floors40: polarity of layer name + negative contribution */
.fd-tbl.fd-score tr.pol-hazard td.fd-layer,
.fd-tbl.fd-score tr.pol-hazard td.fd-layer b { color: #c62828; }
.fd-tbl.fd-score tr.pol-amenity td.fd-layer,
.fd-tbl.fd-score tr.pol-amenity td.fd-layer b { color: #1b5e20; }
.fd-tbl.fd-score tr.pol-bipolar td.fd-layer,
.fd-tbl.fd-score tr.pol-bipolar td.fd-layer b { color: #111; }
.fd-tbl.fd-score td.contrib-neg { color: #c62828; font-weight: 700; }


.calc-tabs { display:flex; gap:6px; margin:6px 0 4px; }
.calc-tab { flex:1; padding:6px 8px; font:13px/1.2 sans-serif; border:1px solid #888; background:#f3f3f3; cursor:pointer; }
.calc-tab.on { background:#37474f; color:#fff; border-color:#37474f; }
#tags108-panel { max-height:62vh; overflow:auto; }
.t108-bar { display:flex; gap:6px; margin:4px 0 8px; flex-wrap:wrap; }
.t108-bar button { font-size:12px; padding:3px 8px; }
.t108-row { border-bottom:1px solid #ddd; padding:4px 0 6px; }
.t108-head { font-size:12px; color:#111; }
.t108-pair { display:flex; align-items:center; gap:4px; margin-top:2px; }
.t108-pair span { min-width:3.6em; font-size:11px; }
.t108-pair input[type=range] { flex:1; min-width:70px; }
.t108-pair input[type=number] { width:58px; font-size:11px; }

.food-form { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:8px 0; }
.food-form label { font-size:12px; display:flex; gap:4px; align-items:center; }
.food-form input[type=number] { width:64px; }
.food-tbl { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.food-tbl th, .food-tbl td { border-bottom:1px solid #ddd; padding:2px 6px; text-align:left; }
#islands-panel, #food-panel { max-height:70vh; overflow:auto; }


body.view-islands .leaflet-bottom.leaflet-right {
    bottom: 46vh;
    z-index: 21000;
}
body.view-islands .leaflet-bottom.leaflet-right .leaflet-control.legend {
    max-width: 210px !important;
    overflow-x: hidden !important;
    font-size: 10px;
    line-height: 15px;
    margin-bottom: 8px !important;
    z-index: 21000 !important;
    pointer-events: auto;
}
.leaflet-bottom.leaflet-right .leaflet-control.legend h4 { font-size: 11px; margin: 0 0 3px; }
.leaflet-bottom.leaflet-right .leaflet-control.legend i { width: 11px; height: 11px; }

#poi-quick-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px 10px;
  padding: 8px 10px;
  margin: 4px 0 8px;
  background: #eef6ee;
  border: 1px solid #8fbf8f;
  font-size: 13px;
  color: #000;
  position: sticky;
  top: 0;
  z-index: 6;
}
#poi-quick-bar .poi-quick-title {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 2px;
}
#poi-quick-bar .poi-quick-lab {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #000;
  line-height: 1.35;
}

.legend-toggle { font: 700 11px/1.2 sans-serif; cursor: pointer; margin: 0 0 4px; color: #333; }
.legend-peek { display: flex; height: 8px; border-radius: 3px; overflow: hidden; margin: 0 0 2px; }
.legend-peek span { flex: 1; }
.legend.collapsed { max-height: 42px !important; min-width: 110px; width: 132px; overflow: hidden; padding: 6px 8px; cursor: pointer; }
.legend.collapsed .legend-body { display: none; }
.legend:not(.collapsed) { max-height: 38vh; overflow-y: auto; cursor: pointer; }
.legend:not(.collapsed) .legend-peek { display: none; }

#island-dock {
  position: fixed;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 20010;
  background: #fff;
  color: #111;
  border: 1px solid #111;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  min-width: 320px;
  min-height: 160px;
}
#island-dock.open { display: flex; }
#island-dock .fd-head,
#island-dock .win-head {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: #f8fafc;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  cursor: grab;
}
#island-dock .fd-body {
  flex: 1 1 auto;
  min-height: 140px;
  overflow: auto;
  padding: 10px 12px;
  background: #fff;
  color: #111;
}
.isl-resize-n {
  position: absolute; top: 0; left: 0; right: 0; height: 14px;
  cursor: ns-resize; z-index: 40;
  background: repeating-linear-gradient(45deg, #94a3b8 0 8px, #cbd5e1 8px 16px);
  border-bottom: 1px solid #94a3b8;
}
.isl-resize-n::after {
  content: attr(data-hint);
  position: absolute; left: 50%; transform: translateX(-50%); top: 1px;
  color: #fff; font-size: 11px; line-height: 12px; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
#islands-grid[data-empty='1'] .ag-center-cols-container {
  min-height: 64px;
}
#islands-grid[data-empty='1']::before {
  content: 'Под фильтры не попал ни один остров. Смягчите фильтр — например, снимите «не ближе 300 км».';
  display: block; padding: 16px 14px; color: #c62828; font-size: 14px;
}
.win-edge { z-index: 30; }
.win-grip {
  width: 14px;
  height: 22px;
  flex: 0 0 14px;
  background-image: radial-gradient(#bbb 1.2px, transparent 1.4px);
  background-size: 6px 6px;
  background-repeat: repeat;
  opacity: .9;
}
.win-btns button, .win-min, .win-max, .win-x, .ov-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px;
  background: #f8fafc !important;
  color: #475569 !important;
  cursor: pointer;
  font-size: 14px;
  line-height: 24px;
  padding: 0;
  font-weight: 600;
}
#island-dock .win-x, #islands-overlay .ov-btn#isl-close {
  background: #fff3f0 !important;
}
#islands-overlay-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
  padding: 5px 8px;
}


/* P-MEL 2026-09-18: focus-visible + disabled for dock / tabs */
#island-dock .win-btns button:focus-visible,
.view-tab:focus-visible {
  outline: 2px solid #1b5e20;
  outline-offset: 2px;
}
#island-dock .win-btns button:disabled,
.view-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/roboto-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/roboto-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/roboto-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/roboto-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/roboto-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/roboto-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
input, select, button, textarea { font: inherit; }

/* Свёрнутое меню — только шапка. Правило позже и точнее, чем height: calc(100vh - 56px). */
body.menu-collapsed .controls-container,
.controls-container.win-collapsed {
    width: 42px !important;
    min-width: 0 !important;
    height: 40px !important;
    max-height: 40px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
body.menu-collapsed .controls-container > .win-body,
.controls-container.win-collapsed > .win-body {
    display: none !important;
}
body.view-food .controls-container,
body.view-dishes .controls-container,
body.view-qa .controls-container {
    display: none !important;
}