* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, "SF Pro Display", "Segoe UI", Arial, sans-serif; }

:root {
  --glass-blur: blur(28px) saturate(190%);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  /* ---------- тёмная тема (по умолчанию) ---------- */
  --bg: #0a1420;
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.65);
  --text-dimmer: rgba(255, 255, 255, 0.45);
  --glass-bg: rgba(22, 32, 48, 0.52);
  --glass-bg-strong: rgba(22, 32, 48, 0.68);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-highlight: rgba(255, 255, 255, 0.35);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-bg-focus: rgba(255, 255, 255, 0.14);
  --input-border: rgba(255, 255, 255, 0.16);
  --input-border-focus: rgba(255, 255, 255, 0.32);
  --hover-bg: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --active-pill-bg: rgba(255, 255, 255, 0.92);
  --active-pill-text: #0d1b2a;
}

:root[data-theme="light"] {
  --bg: #eef1f6;
  --text: #101826;
  --text-dim: rgba(16, 24, 38, 0.62);
  --text-dimmer: rgba(16, 24, 38, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(16, 24, 38, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --shadow-glass: 0 8px 28px rgba(16, 24, 38, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --input-bg: rgba(16, 24, 38, 0.05);
  --input-bg-focus: rgba(16, 24, 38, 0.09);
  --input-border: rgba(16, 24, 38, 0.14);
  --input-border-focus: rgba(16, 24, 38, 0.28);
  --hover-bg: rgba(16, 24, 38, 0.08);
  --scrollbar-thumb: rgba(16, 24, 38, 0.2);
  --active-pill-bg: #101826;
  --active-pill-text: #ffffff;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: background .2s ease;
}

/* ---------- glass mixin (shared look) ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  position: relative;
}
.glass::before {
  /* тонкий блик сверху — характерная деталь Liquid Glass */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-highlight), rgba(255,255,255,0) 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- header ---------- */
#topbar {
  height: 60px;
  min-height: 60px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
/* min-width: 0 на обоих уровнях — без этого вложенные flex-контейнеры не
   дают текстовому .brand-name реально сжаться/обрезаться (ellipsis) на
   узких экранах: браузер считает "минимальный размер" по НЕобрезанному
   тексту и контент вылезает за пределы .topbar, наезжая на кнопки справа
   (см. .topbar-right) — именно так ловился баг с "мёртвой зоной" на кнопке
   сайдбара на мобильном. */
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.2px; min-width: 0; flex: 1 1 auto; }
.brand .bolt { color: #f5c518; font-size: 20px; filter: drop-shadow(0 0 8px rgba(245,197,24,.5)); flex: none; }
.brand-home {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  transition: opacity 0.15s;
  min-width: 0;
}
.brand-home:hover { opacity: 0.8; }

.topbar-right { display: flex; align-items: center; gap: 12px; flex: none; }
.clock { font-size: 13px; opacity: .8; font-variant-numeric: tabular-nums; color: var(--text); }

.lang-switcher { display: flex; align-items: center; }

/* ---------- круглая кнопка-иконка (общий вид): тема, сайдбар на мобильном и т.п. ----------
   ВАЖНО: стили тут висят на .icon-btn, а НЕ на .theme-toggle — раньше кнопка
   открытия сайдбара на телефоне тоже носила класс .theme-toggle просто ради
   вида, и theme.js (который ищет ВСЕ .theme-toggle через querySelectorAll,
   чтобы обновить иконку/aria-label) перезаписывал её текст на "светлая/
   тёмная тема" и она переставала быть кликабельной по своим координатам
   (перекрывалась соседними элементами). .theme-toggle оставлен только как
   JS-маркер конкретно для переключателя темы. */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.icon-btn:hover { background: var(--hover-bg); }
.icon-btn:active { transform: scale(0.93); }
.icon-btn .icon { font-size: 15px; line-height: 1; }

/* ---------- переключатель языка: кнопка + выпадающее меню с флагами ---------- */
.lang-dd { position: relative; }
.lang-dd-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.lang-dd-toggle:hover { background: var(--hover-bg); }
.lang-dd-toggle .flag { font-size: 15px; line-height: 1; }
.lang-dd-toggle .chev { font-size: 10px; opacity: .65; transition: transform .18s ease; margin-left: 1px; }
.lang-dd.open .lang-dd-toggle .chev { transform: rotate(180deg); }
.lang-dd.open .lang-dd-toggle { background: var(--hover-bg); border-color: var(--input-border-focus); }

.lang-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 138px;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 1200;
}
.lang-dd.open .lang-dd-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lang-dd-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.lang-dd-item .flag { font-size: 15px; line-height: 1; }
.lang-dd-item:hover { background: var(--hover-bg); color: var(--text); }
.lang-dd-item.active { background: var(--active-pill-bg); color: var(--active-pill-text); }

/* ---------- body / map ---------- */
#body { position: relative; flex: 1; overflow: hidden; }
#map { position: absolute; inset: 0; }

/* ---------- линии электропередач: красное свечение + мигание ----------
   ВАЖНО: filter/animation применяются ОДИН РАЗ на весь pane (общий <svg>
   со всеми 4000+ линиями), а не на каждую линию по отдельности — иначе
   браузер пересчитывает размытие для каждого <path> на каждый кадр
   анимации, что подвешивает вкладку почти намертво при таком количестве
   элементов. Один общий filter на pane — практически бесплатно. */
.power-lines-pane {
  filter: drop-shadow(0 0 5px rgba(255, 59, 59, 0.85));
  animation: power-line-blink 2.2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes power-line-blink {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---------- контур обслуживаемой территории: голубое свечение +
   "бегущий пунктир" ----------
   Это ОДИН полигон (не тысячи элементов, как линии ЛЭП выше), поэтому
   filter/animation на pane тут не создают никакой нагрузки — урок
   производительности с линиями сюда неприменим, но пейн всё равно
   используется для аккуратного z-порядка (ниже линий и меток ТП). */
.region-boundary-pane {
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.55));
}
.region-boundary-line {
  stroke-dasharray: 10 7;
  animation: region-boundary-dash 26s linear infinite;
}
@keyframes region-boundary-dash {
  to { stroke-dashoffset: -1000; }
}

/* ---------- маркеры ТП на карте электросети ----------
   Раньше цвет точки зависел от статуса (онлайн/авария/...), потом —
   от свободного текстового поля "Объект тури". Оба варианта убраны:
   статуса больше нет (паспорт статичен), а разбивка по типу объекта —
   от неё тоже отказались (см. #legend-items ниже, там теперь только
   общий итог). Все ТП — один и тот же зелёный светящийся значок, тот
   же визуальный приём, что и на странице газа (.gas-marker):
   радиальный градиент + белая обводка + свечение через box-shadow. */
.tp-marker-wrap { background: transparent; border: none; }
.tp-marker {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), var(--tm-color, #2ecc71) 68%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 9px 2px color-mix(in srgb, var(--tm-color, #2ecc71) 75%, transparent);
  cursor: pointer;
  transition: transform .12s ease;
}
.tp-marker:hover { transform: scale(1.15); }

/* размер значков по уровню зума — тот же приём, что и в .gas-zoom-*
   (см. style.css ниже, секция газа): один класс на #map переключает
   размер СРАЗУ у всех значков через CSS, без пересоздания 807 маркеров
   на каждый zoomend. На мелких размерах свечение отключаем — на таком
   масштабе оно не читается и не стоит лишней нагрузки на слой. */
#map.tp-zoom-mid .tp-marker { width: 15px; height: 15px; border-width: 1.5px; }
#map.tp-zoom-small .tp-marker { width: 9px; height: 9px; border-width: 1px; box-shadow: none; }
#map.tp-zoom-tiny .tp-marker { width: 6px; height: 6px; border-width: 0; box-shadow: none; }

#sidebar {
  position: absolute;
  top: 14px; right: 14px;
  width: 300px;
  max-height: calc(100% - 28px);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 900;
  pointer-events: none;
  overflow-y: auto;
  /* сама панель прозрачная и "прокликиваемая" (карта под ней), а
     прокрутка нужна, чтобы 3 карточки (аварии/поиск/МФЙ) не обрезались
     на невысоких экранах — скролл срабатывает при наведении на карточку
     (у неё pointer-events: auto), событие всплывает на #sidebar. */
}
.panel {
  border-radius: var(--radius-lg);
  color: var(--text);
  padding: 14px 16px;
  pointer-events: auto;
  flex: none;
}
.panel h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .2px; }

.search-panel .scroll-list { max-height: 200px; overflow-y: auto; margin-top: 8px; }
.mfy-panel .scroll-list { max-height: 220px; overflow-y: auto; margin-top: 8px; }

.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

.empty-hint { opacity: .6; font-size: 12.5px; padding: 6px 0; }

/* ---------- Паспорт МФЙ (см. static/js/mfy_passport.js) ----------
   Слева от карты, симметрично #sidebar справа. Тот же Liquid Glass
   (.glass, задаётся прямо в разметке — см. index.html/gas.html), но
   постоянно смонтирована в DOM и переключается классом .open — так
   translateX/opacity анимируются плавно, без пересоздания элемента при
   каждом клике по МФЙ (требование "плавно закрыть — открыть новый"). */
#mfy-passport-panel {
  position: absolute;
  top: 14px; left: 14px;
  width: 340px;
  max-height: calc(100% - 28px);
  z-index: 950;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-lg);
  transform: translateX(calc(-100% - 20px));
  opacity: 0;
  transition: transform .32s cubic-bezier(.22,.9,.32,1), opacity .28s ease;
  pointer-events: none;
}
#mfy-passport-panel.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.passport-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--glass-border);
  flex: none;
}
.passport-header h2 {
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.passport-close {
  background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-dim);
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.passport-close:hover { background: var(--hover-bg); color: var(--text); }

.passport-body {
  overflow-y: auto;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.passport-body::-webkit-scrollbar { width: 6px; }
.passport-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Каждый раздел паспорта — отдельная карточка (Glass Card), см. п.4
   требований. Фон чуть светлее/темнее самой панели (--input-bg) — этого
   достаточно, чтобы карточка визуально отделялась от панели, второй слой
   backdrop-filter поверх уже размытой панели ничего не добавил бы. */
.passport-card {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
}
.passport-card h3 {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--text-dim); text-transform: uppercase;
}
.passport-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 13px;
  border-bottom: 1px dashed var(--glass-border);
}
.passport-row:last-child { border-bottom: none; }
.passport-row .label { color: var(--text-dim); }
.passport-row .val { font-weight: 600; color: var(--text); text-align: right; }

/* Стандартный zoom-контрол Leaflet (+/-) по умолчанию сидит в левом верхнем
   углу карты — там же, где заголовок открытой панели паспорта МФЙ, и
   наезжает на название. Класс .passport-open переключается на #map из
   mfy_passport.js (open/closeMfyPassport) — на время открытия панели весь
   блок leaflet-контролов верхнего левого угла сдвигается вправо, за её
   пределы; при закрытии — плавно возвращается на место. */
.leaflet-top.leaflet-left {
  transition: left .32s cubic-bezier(.22,.9,.32,1);
}
#map.passport-open .leaflet-top.leaflet-left {
  left: 366px; /* ширина панели (340px) + отступ слева (14px) + зазор */
}

#search-input,
.mfy-panel input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: background .15s ease, border-color .15s ease;
}
#search-input:focus,
.mfy-panel input[type="text"]:focus { background: var(--input-bg-focus); border-color: var(--input-border-focus); }
#search-input::placeholder,
.mfy-panel input[type="text"]::placeholder { color: var(--text-dimmer); }

.search-result {
  padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12.5px;
  display: flex; align-items: center; gap: 6px;
  transition: background .12s ease;
}
.search-result:hover { background: var(--hover-bg); }
.mfy-item.active { background: var(--active-pill-bg); color: var(--active-pill-text); }
.mfy-item.active .ldot { box-shadow: 0 0 0 2px rgba(255,255,255,.4); }

/* подсказка с названием МФЙ при наведении на границу — тот же лёгкий
   стеклянный стиль, что и попапы (не зависит от темы, лежит поверх карты) */
.mfy-tooltip {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #1a2433;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.mfy-tooltip::before { display: none; }

/* Подсветка выбранного МФЙ сделана обычной сменой Leaflet-стиля (setStyle
   в mfy.js, без CSS filter/animation) — комбинация SVG drop-shadow +
   бесконечная CSS-анимация stroke-dashoffset на одном перестилизуемом
   <path> рисовала лишний прямоугольник в некоторых браузерах и держала
   рендер нагруженным всё время, пока МФЙ выбран. Убрано намеренно. */

/* НАСТОЯЩАЯ причина прямоугольника (найдена после доп. проверки):
   Leaflet сам добавляет tabindex="0" на каждый интерактивный <path>
   (границы МФЙ, линии, трубы, полигоны) — это его встроенная
   доступность с клавиатуры. Браузер по умолчанию рисует focus-outline
   вокруг элемента, а для SVG <path> этот outline рисуется не по форме
   контура, а по прямоугольному bounding box'у фигуры — отсюда и
   прямоугольник. Он появлялся не с первого клика, потому что первый
   клик выбирает МФЙ и создаёт НОВЫЙ подсвеченный <path> поверх старого
   (см. mfy.js) — именно этот новый верхний path и получает фокус клика.
   А при обычном нажатии левой кнопки и перемещении по карте — фокус
   ставится уже по mousedown на любой попавшийся интерактивный path,
   ещё до полноценного клика, отсюда прямоугольник "сразу". Убираем
   рамку фокуса у всех интерактивных слоёв Leaflet — это не влияет на
   клики/выбор, только на визуальную рамку. */
.leaflet-interactive,
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
  outline: none;
}

/* ---------- footer legend ---------- */
#legend {
  height: 52px; min-height: 52px;
  color: var(--text);
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px;
  font-size: 12.5px;
  z-index: 1000;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
/* #legend-items — обёртка для динамически подставляемых пунктов легенды
   (см. refreshStats() в app.js) — сама легенда теперь строится по
   значениям "Объект тури" из паспорта ТП, а не по фиксированному списку
   статусов, поэтому пункты рендерятся в JS, а не зашиты в HTML. */
#legend-items { display: flex; align-items: center; gap: 22px; flex: none; }
.legend-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.legend-item.legend-total { color: var(--text-dim); }
.ldot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px currentColor; }
.admin-link {
  margin-left: auto; color: var(--text-dim); text-decoration: none; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--input-border);
  background: var(--input-bg);
  transition: background .15s ease, color .15s ease;
}
.admin-link:hover { color: var(--text); background: var(--hover-bg); }

/* ---------- leaflet controls: glass look ----------
   Слои карты нарочно оставлены СВЁРНУТЫМИ (collapsed: true в app.js) —
   на карте видна только одна кнопка-иконка, панель со слоями раскрывается
   по наведению/клику на неё (встроенное поведение Leaflet), а не занимает
   место на экране постоянно. */
.leaflet-control-layers,
.leaflet-bar {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-glass) !important;
  color: var(--text) !important;
  overflow: hidden;
}
.leaflet-control-layers-toggle { filter: invert(1) brightness(1.6); }
:root[data-theme="light"] .leaflet-control-layers-toggle { filter: none; }
.leaflet-control-layers-expanded { padding: 10px 12px !important; }
.leaflet-control-layers label,
.leaflet-control-layers span { color: var(--text) !important; font-size: 13px; }
.leaflet-control-layers-separator { border-top: 1px solid var(--glass-border) !important; margin: 8px 0 !important; }
.leaflet-bar a {
  background: transparent !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.leaflet-bar a:hover { background: var(--hover-bg) !important; }
.leaflet-control-attribution {
  background: rgba(13,27,42,0.5) !important;
  color: rgba(255,255,255,0.6) !important;
  border-radius: 8px 0 0 0;
}
.leaflet-control-attribution a { color: rgba(255,255,255,0.8) !important; }

/* ---------- leaflet popup: light glass card (усиленный Liquid Glass) ---------- */
.leaflet-popup-content-wrapper {
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(34px) saturate(220%);
  backdrop-filter: blur(34px) saturate(220%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  border: 1px solid rgba(255, 255, 255, 0.65);
}
.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(34px) saturate(220%);
  backdrop-filter: blur(34px) saturate(220%);
}
.leaflet-popup-content { margin: 0; width: 292px !important; }
.leaflet-popup-close-button { color: #667 !important; }

.tp-popup .head {
  padding: 12px 16px; color: #fff; font-weight: 700; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative;
}
.tp-popup .head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.tp-popup .head small { display: block; font-weight: 800; font-size: 10.5px; opacity: .95; margin-top: 2px; letter-spacing: .6px; }
.tp-popup .body { padding: 12px 16px; font-size: 13px; }
.tp-popup .row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.tp-popup .row span.label { color: #667; }
.tp-popup .row span.val { font-weight: 600; text-align: right; color: #1a2433; }
.tp-popup .actions { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.tp-popup button.btn {
  border: none; border-radius: var(--radius-md); padding: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: #fff;
  transition: transform .1s ease, filter .1s ease;
}
.tp-popup button.btn:active { transform: scale(0.97); }
.tp-popup button.btn.go { background: linear-gradient(180deg, #4c8dff, #2563eb); }
.tp-popup button.btn:hover { filter: brightness(1.08); }

/* Технический паспорт ТП — нейтральный графитовый заголовок попапа вместо
   прежней окраски по live-статусу (онлайн/авария/...) — статуса больше
   нет, вместо него в шапке попапа — "Объект тури" из паспорта (см.
   renderPopup в app.js), если он заполнен. */
.tp-popup .head { background: linear-gradient(135deg, #4b5a66, #2c3b45); }

/* ==================== страница «Газ»: карта газовой сети ==================== */

/* пламя вместо молнии в шапке бренда */
.gas-flame { color: #f97316; font-size: 20px; filter: drop-shadow(0 0 8px rgba(249,115,22,.5)); }

/* ---------- трубопроводы: цветное свечение + мигание по категории давления ----------
   Тот же приём, что и для ЛЭП на карте электросети: filter/animation
   применяются один раз на весь pane (общий <svg> слоя), а не на каждую
   линию по отдельности — иначе тормозит при сотнях элементов. */
.gas-pipes-pane-low {
  filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.8));
  animation: gas-pipe-blink 2.6s ease-in-out infinite;
  will-change: opacity;
}
.gas-pipes-pane-medium {
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.85));
  animation: gas-pipe-blink 2.4s ease-in-out infinite;
  will-change: opacity;
}
.gas-pipes-pane-high {
  /* высокое давление — самое яркое и заметное свечение, линии тоже жирнее (см. gas.js) */
  filter: drop-shadow(0 0 7px rgba(239, 68, 68, 0.95));
  animation: gas-pipe-blink 2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes gas-pipe-blink {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ---------- точки объектов газовой сети на карте (задвижки, ГРП, ГРС и т.д.) ----------
   Без формы-силуэта внутри — просто цветной светящийся кружок (радиальный
   градиент + белая обводка + свечение box-shadow), цвет отличает категорию,
   тот же приём, что и .ldot в легенде внизу и .tp-marker на карте
   электросети. Раньше внутри был ещё и белый геометрический силуэт формы
   (.gas-glyph-*) — от него на самой карте отказались; те же CSS-классы
   форм остались и используются только в шапке попапа (.gas-glyph-inline
   ниже), для маркера на карте — не рендерятся (см. gasIcon() в gas.js). */
.gas-marker-wrap { background: transparent; border: none; }
.gas-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), var(--gm-color) 68%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--gm-color) 70%, transparent);
  cursor: pointer;
  /* ВАЖНО: анимируем только transform (hover) — не width/height. Размер по
     зуму (см. классы ниже) меняется МГНОВЕННО, без transition: анимировать
     width/height у 569 элементов одновременно на каждый zoomend вызывает
     пересчёт layout для всех сразу и заметно подвешивает вкладку. */
  transition: transform .12s ease;
}
.gas-marker:hover { transform: scale(1.15); }

.gas-glyph {
  width: 12px; height: 12px;
  background: #fff;
  flex: none;
}
/* задвижка — классический символ вентиля из P&ID-схем: "бабочка"-бантик */
.gas-glyph-bowtie {
  clip-path: polygon(0% 12%, 50% 50%, 0% 88%, 100% 88%, 50% 50%, 100% 12%);
}
/* ГРП — треугольник (регулятор/датчик давления) */
.gas-glyph-triangle {
  clip-path: polygon(50% 4%, 96% 92%, 4% 92%);
}
/* ГРС/АГРС — квадрат (площадка/станция) */
.gas-glyph-square {
  border-radius: 2px;
}
/* счётчик — шестигранник (циферблат) */
.gas-glyph-hexagon {
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
}
/* ЭХЗ — пятиугольник (щит защиты) */
.gas-glyph-pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* маленький цветной квадрат-индикатор в шапке попапа трубопровода */
.gas-pipe-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
  vertical-align: middle;
  margin-right: 2px;
}
/* тот же силуэт, что и в маркере, но использован внутри тёмной шапки попапа */
.gas-glyph-inline {
  display: inline-block;
  width: 11px; height: 11px;
  vertical-align: middle;
  margin-right: 2px;
  opacity: 0.95;
}

/* ---------- размер значков по уровню зума ----------
   569 точечных объектов на компактной территории — при отдалении карты
   значки фиксированного размера плотно накладываются друг на друга и
   визуально "заливают" карту. Классы переключаются ОДИН раз на контейнере
   #map (см. updateMarkerZoomClass в gas.js), а не пересчётом каждого
   маркера — мгновенно и не создаёт нагрузки даже при сотнях значков. */
#map.gas-zoom-mid .gas-marker { width: 18px; height: 18px; border-width: 1.5px; }
#map.gas-zoom-mid .gas-glyph { width: 8px; height: 8px; }

/* от small и мельче свечение (box-shadow) отключаем совсем — на таком
   размере оно не читается, а blur на сотнях мелких точек одновременно —
   лишняя нагрузка на компоновку слоя без всякой пользы */
#map.gas-zoom-small .gas-marker { width: 11px; height: 11px; border-width: 1px; box-shadow: none; }
#map.gas-zoom-small .gas-glyph { display: none; }

#map.gas-zoom-tiny .gas-marker { width: 7px; height: 7px; border-width: 0; box-shadow: none; }
#map.gas-zoom-tiny .gas-glyph { display: none; }

/* попап газового объекта переиспользует .tp-popup (Liquid Glass карточка),
   но без кнопки "подробнее" — полей немного, и они все умещаются сразу */
.gas-popup .body .row:last-child { border-bottom: none; }
.gas-popup .head { display: flex; align-items: center; gap: 6px; }

/* ==================== мобильная адаптация (телефоны/планшеты) ====================
   Готовим веб-версию к тому, что дальше на её основе будут приложения для
   Android/iOS (проще всего — обёртка вида Capacitor/PWA поверх уже
   адаптивного сайта). Три вещи, которые нужны в первую очередь:
   1) ничего не должно вылезать за экран/требовать горизонтального скролла;
   2) плавающий сайдбар с карточками не должен всё время закрывать карту —
      на маленьком экране он должен сворачиваться в лист снизу по кнопке;
   3) кнопки/пункты списков должны быть достаточно крупными для пальца. */

/* кнопка открытия/закрытия сайдбара — видна только на узких экранах */
.sidebar-toggle-btn { display: none; }

@media (max-width: 860px) {
  #sidebar { width: min(320px, calc(100vw - 24px)); }
  #mfy-passport-panel { width: min(320px, calc(100vw - 24px)); }
  /* тот же сдвиг zoom-контрола, но по фактической (адаптивной) ширине
     панели на маленьком экране, а не по фиксированным 340px как выше */
  #map.passport-open .leaflet-top.leaflet-left {
    left: calc(14px + min(320px, calc(100vw - 24px)) + 12px);
  }
}

@media (max-width: 640px) {
  #topbar { padding: 0 12px; gap: 8px; }
  .brand { gap: 7px; font-size: 15px; min-width: 0; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw; }
  .clock { display: none; }
  .topbar-right { gap: 8px; }

  /* тач-таргеты покрупнее */
  .icon-btn, .lang-dd-toggle { min-width: 40px; min-height: 40px; }

  .sidebar-toggle-btn { display: flex; }

  /* сайдбар на телефоне — не плавающие карточки поверх всей карты, а
     выезжающий снизу лист, свёрнутый по умолчанию. Открывается кнопкой в
     шапке (см. .sidebar-toggle-btn и main() в app.js/gas.js). */
  #sidebar {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    max-height: 64vh;
    padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    transform: translateY(calc(100% - 2px));
    transition: transform .25s ease;
    pointer-events: auto;
  }
  #sidebar.mobile-open { transform: translateY(0); }
  .panel { padding: 12px 14px; }

  /* попапы ТП/газовых объектов — по ширине экрана, а не фиксированные 292px */
  .leaflet-popup-content { width: min(292px, 86vw) !important; }

  /* легенда внизу не переносится и не обрезается — скроллится по горизонтали */
  #legend {
    overflow-x: auto;
    gap: 14px;
    padding: 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #legend::-webkit-scrollbar { display: none; }
  #legend-items { gap: 14px; }
  .legend-item { flex: none; }
  .admin-link { margin-left: 10px; flex: none; }
}