:root{
      --accent: #0066cc;        /* Основной акцентный цвет */
      --accent-2: #00a3ff;      /* Вторичный акцентный цвет */
      --bg: #ffffff;            /* Фоновый цвет */
      --text: #111827;          /* Цвет текста */
      --tooltip-bg: #1a13a3d9;  /* Фон тултипа */
    }

    /* Основные стили страницы */
    body{font-family: Inter, Tahoma, Arial, sans-serif; background:var(--bg); color:var(--text);}
    .map-wrap{max-width:1000px;margin:0 auto}  /* Контейнер карты с максимальной шириной */
    .map-card{border-radius:12px;padding:18px}  /* Карточка с картой */
    .map-header{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:12px;text-align:center}  /* Заголовок карты */
    .legend{font-size:14px;color:#374151}  /* Легенда карты */

    /* SVG responsive container */
    .svg-container {
        position: relative; /* КРИТИЧЕСКИ ВАЖНО! */
        width: 100%;
        height: 0;
        padding-bottom: 60%;
        overflow: visible; /* Чтобы тултип мог выходить за границы */
    }
    svg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Анимация контуров карты */
    .country-path{fill:#00a3e0;stroke:#002b7f;stroke-width:2}  /* Стили для контуров регионов */
    /* Обеспечиваем, что каждый внутренний path использует синий цвет флага и обводку (переопределяет inline стили) */
    .country-path path{fill:#0c8ebd !important;stroke:#002b7f !important;stroke-width:1 !important}
    /* Анимация рисования применяется к внутренним путям */
    .country-path.draw path{stroke-dasharray:6000;stroke-dashoffset:6000;animation:draw 1.5s ease forwards 0.3s}
    @keyframes draw{to{stroke-dashoffset:0}}  /* Ключевые кадры анимации рисования контура */

    /* Анимация пульсации для маркеров (отключена) */
    .pulse{animation:none;display:none}
    @keyframes pulse-anim{
      0%{r:50px;opacity:0.8}
      50%{r:80px;opacity:0.4}
      100%{r:120px;opacity:0}
    }

    /* Стили маркеров городов */
    .marker{cursor:pointer;transform-origin:center;transition:opacity .18s ease}  /* Базовые стили маркера */
    /* Скрываем синие пины и элементы пульсации по умолчанию */
    .marker .pin{display:none}
    .marker .pulse{display:none}
    /* Показываем для отмеченных городов, которые должны пульсировать */
    .marker.pulse-city .pin{display:inline}
    .marker.pulse-city .pulse{display:inline}
    .marker.pulse-city .pin{stroke-width:3;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));}  /* Стили для жёлтых точек */
    .marker.pulse-city .city-label{display:inline;fill:#eaf738 !important;font-weight:700;font-size:50px;margin-left:6px}  /* Стили для названий городов */
+    /* scale only the inner pin to avoid changing the group's hover geometry (prevents jitter) */
+    .marker .pin{transition:transform .18s ease;transform-box:fill-box;transform-origin:center}
+    .marker:hover .pin{transform:scale(1.08)}
+    .marker:hover{transform:none}

    /* Текстовые метки городов */
    .city-label{display:none}  /* Скрываем метки по умолчанию */
    .city-label.hidden{display:none}

    /* Стили тултипа (всплывающей подсказки) */
    .tooltip,
    #kz-tooltip {
        position: absolute;
        pointer-events: none;
        padding: 8px 12px;
        border-radius: 8px;
        background: rgba(26, 19, 163, 0.95);
        color: #fff;
        font-size: 13px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.2s ease;
        text-align: center;
        z-index: 9999; /* ВАЖНО: высокий z-index */
        transform: translate(-50%, 0);
    }
    .tooltip.show, #kz-tooltip.show{opacity:1}  /* Видимое состояние тултипа */

    /* small responsive tweaks */
    @media (max-width:640px){
      .svg-container{padding-bottom:80%}
      .city-label{font-size:11px}
    }

    /* Доступность: убираем outline при фокусе для маркеров */
    .marker:focus{outline:none}  /* Убираем обводку при фокусе */
    .marker:active{outline:none}  /* Убираем обводку при нажатии */
    .marker:focus-visible{outline:none}  /* Убираем обводку при фокусе через клавиатуру */
    .marker:focus .pin{filter:none}  /* Убираем фильтр с пина при фокусе */
    .marker *{outline:none}  /* Убираем обводку у всех дочерних элементов */

    /* Отладочная подсветка для идентификации проблемных путей (временная) */
    .country-path path.debug{stroke:red !important;stroke-width:6 !important;fill-opacity:.95 !important}
    /* Подсветка регионов при наведении и фокусе */
    .country-path path{
      transition: fill 180ms ease, filter 220ms ease, stroke-width 180ms ease, transform 220ms ease;
      cursor: pointer;  /* Курсор-указатель при наведении */
      outline: none;  /* Убираем обводку */
    }
    .country-path path:hover,
    .country-path path:focus,
    .country-path path.hover{
      fill: #1a13a3d9 !important;  /* Цвет заливки при наведении */
      fill-opacity: 1 !important;
      stroke: rgba(255,255,255,0.65);  /* Белая обводка */
      stroke-width: 8;  /* Толщина обводки */
      stroke-opacity: 0.9;
      filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25)) saturate(1.15) brightness(1.08);  /* Тень и эффекты */
    }
    .country-path path:focus{ /* Видимое кольцо фокуса */ }
    /* Пульсирующие маркеры городов */
    .marker .pin{ fill:hwb(71 21% 0%); stroke:#f0ff1de7; stroke-width:5; }  /* Стили жёлтой точки */
    .marker .pulse{ fill:none; stroke:hsl(60, 100%, 70%); stroke-width:4; opacity:1; transform-box:fill-box; transform-origin:center; }  /* Стили первой волны пульсации */
    .marker .pulse2{ opacity:.85; stroke-width:2.5 }  /* Стили второй волны пульсации */
    @keyframes pulse {
      0%{ transform:scale(1); opacity:1; }  /* Начальное состояние */
      70%{ transform:scale(3.2); opacity:0; }  /* Увеличение и исчезновение */
      100%{ transform:scale(3.2); opacity:0; }  /* Конечное состояние */
    }
    .marker .pulse{ animation: pulse 1400ms cubic-bezier(.22,.9,.27,1) infinite; }  /* Анимация первой волны */
    .marker .pulse2{ animation: pulse 1800ms cubic-bezier(.22,.9,.27,1) infinite; animation-delay:900ms }  /* Анимация второй волны с задержкой */