*{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden}
  body{
    font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    color:#1c1c1e;-webkit-font-smoothing:antialiased;background:#fff;
    display:flex;flex-direction:column;
    --app-header-h:54px;
  }

  /* ── Шапка приложения ──
     Консолидирует то, что раньше плавало поверх карты по отдельности:
     бренд, выбор стиля карты (#map-style-ctrl), иконки вида
     (☀️/3D/◎/тема, были в .map-ctrl). #wiki-hover-card сюда не входит —
     это отдельная floating-модалка внизу-справа, см. правила ниже. */
  #app-header{
    flex:0 0 var(--app-header-h); height:var(--app-header-h); z-index:100;
    display:flex; align-items:center; gap:12px; padding:0 14px 0 0;
    background:rgba(14,20,32,.96); backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px); border-bottom:1px solid #1b2333;
    color:#e2e8f5;
  }
  /* Брендинг шапки (правка 2026-08-24, третий заход) — жёлтый
     прямоугольник #FFF666 с текстом "xoiox.ru" чёрным, по центру,
     высота на всю шапку. Дальнейшие уточнения по просьбе пользователя:
     (1) блок должен стоять впритык к ЛЕВОМУ краю страницы — у
     #app-header убрано padding-left (было 0 14px с обеих сторон, стало
     только справа), иначе даже при padding:0 у самого блока оставался
     бы зазор от инсета шапки; (2) ширина — фиксированные 320px (та же
     сетка 1/6 от 1920, что и у модалок, см. makeModalMovable в
     index.html), а не по контенту через padding, как было. */
  #app-header-brand{
    display:inline-flex; align-items:center; justify-content:center;
    align-self:stretch; width:320px;
    background:#fff666; color:#000; font-size:19px; font-weight:800;
    letter-spacing:-.2px; white-space:nowrap; border-radius:0;
  }
  /* ── Триггеры модалок в шапке ──
     Раньше жили в .sidebar (убрана целиком — см. план "убрать левый
     тулбар"); #taibreak-modal/#layers-modal/#auth-modal теперь открыты
     по умолчанию (класс .visible прямо в HTML), эти кнопки — способ
     закрыть/снова открыть их (и три админских — Цвета и слои/Слова на
     карте/Транспорт, видимость которых по-прежнему переключает
     checkAuth() по id, местоположение в DOM для неё не важно). Раньше
     делились на два блока (#app-header-nav слева, #app-header-tools
     справа) — по просьбе пользователя 2026-08-23 иконки вида (☀️/3D/◎/
     тема/глобус) переехали вниз к #tb-travel (см. #bottom-tools), а
     все 4 модалки-триггера собраны в одну группу, margin-left:auto
     прижимает её к правому краю (раньше это делал #app-header-tools,
     которого больше нет в разметке). */
  #app-header-nav{ display:flex; align-items:center; gap:16px; overflow-x:auto; padding-right:10px; margin-left:auto; }
  #app-header-nav .sb-link{ display:inline-block; white-space:nowrap; padding:0; }
  /* «Стиль карты»/«Аккаунт» — иконки, не текст (2026-08-24, по просьбе
     пользователя); «Интересные места»/«Слои данных» остаются подписями
     (у первой ещё и живой счётчик точек — иконкой его не заменить без
     потери информации), поэтому ряд намеренно смешанный. Переключатель
     темы интерфейса (#mc-ui-theme, был в нижней консоли) переехал сюда
     же, к Аккаунту. */
  #app-header-nav .sb-link svg{ width:18px; height:18px; display:block; vertical-align:middle; }
  #app-header-nav #mc-ui-theme{ padding:0; }
  /* Разрыв между текстовыми пунктами (Интересные места/Слои данных) и
     кластером иконок (Стиль карты/Тема/Аккаунт) — по просьбе
     пользователя 2026-08-24, чтобы текст не лип к иконкам вплотную
     (обычный gap:16px общий на всю nav, тут поверх него ещё отступ).
     Увеличено с 12px до 36px (повторная просьба пользователя тем же
     днём) — двух групп-«островов» должно быть визуально не спутать. */
  #map-style-modal-open{ margin-left:36px; }
  /* "Аккаунт чуть сдвигаем от правого края" (по просьбе пользователя) —
     доп. отступ сверх обычного padding:0 14px у #app-header самого. */
  #auth-modal-open{ margin-right:10px; }
  /* Шапка САЙТА (не модалок) — правка 2026-08-25, по просьбе
     пользователя: раньше красилась тем же --ui-bg-t, что и заливка
     модалок (только полупрозрачным), и на глаз почти не отличалась от
     них. Теперь свой отдельный тон (--ui-topbar-bg, считается в
     index.html/applyUiThemeMode, TOPBAR_BG) — модалок не касается. */
  body.ui-themed #app-header{ background:var(--ui-topbar-bg); color:var(--ui-fg); border-color:var(--ui-line); }
  /* Была попытка с шевроном (уголок-рамка, как у .cat-header::after) —
     он добавлял видимой ширины кнопкам и включал горизонтальную
     прокрутку в #app-header-nav (баг со скриншотом от пользователя
     2026-08-23). Заменено на точку: белая = закрыто, зелёная = открыто.
     position:absolute — НЕ участвует в раскладке (не увеличивает
     ширину самой кнопки), поэтому переполнение больше не грозит.
     Правка 2026-08-24 (по просьбе пользователя): у иконочных пунктов
     (Стиль карты/Аккаунт) точку убрали совсем — вместо неё сама иконка
     красится в акцентный синий #3A8FD6 (тот же оттенок, что у активного
     слоя в "Слоях данных"), пока открыта её модалка. У текстовых
     пунктов (Интересные места/Слои данных) точка осталась как была. */
  #tb-count-head, #layers-modal-open{
    position:relative;
  }
  #tb-count-head::after, #layers-modal-open::after{
    content:''; position:absolute; top:50%; right:-10px; width:5px; height:5px;
    border-radius:50%; background:#fff; opacity:.5; transform:translateY(-50%);
    transition:background .15s, opacity .15s;
  }
  body:has(#taibreak-modal.open) #tb-count-head::after,
  body:has(#layers-modal.open) #layers-modal-open::after{
    background:#34c759; opacity:1;
  }
  /* Подсветка иконок-триггеров (Стиль карты/Профиль/Глобус) больше НЕ
     через body:has() — перепроверено многократно: в этом браузере
     :has() иногда не переоценивает цвет соседнего элемента обратно при
     закрытии модалки (стабильно повторяющийся баг, не разовая гонка).
     Заменено на инлайновый style.color, выставляемый JS-ом прямо при
     каждом toggle/close — см. wireBentoCard(highlightTrigger) и
     openMenu/closeMenu в index.html. #tb-count-head/#layers-modal-open
     выше (точка через ::after) этот баг не затронул — там :has()
     оставлен как есть. */

  /* ── Три колонки под шапкой ── */
  #app-body{ flex:1 1 auto; display:flex; min-height:0; }

  #map-wrap{ flex:1 1 auto; position:relative; min-width:0; }
  /* Фон под самой картой — заметен только в "Режиме глобуса" (#mc-3d,
     globe-проекция): за пределами видимой полусферы холст прозрачный,
     и раньше сквозь него всегда просвечивал белый фон страницы, даже
     на тёмной теме интерфейса (баг, пойман пользователем 2026-08-23) —
     тот же var(--ui-bg-t), что и у подложки мини-глобуса. */
  #map{position:absolute;inset:0;background:var(--ui-bg-t,#fff)}

  /* ── Модалки (Интересные места/Слои данных/Стиль карты/Аккаунт) ──
     Тот же визуальный язык, что #panel (погода): белая карточка,
     .p-head/.p-close переиспользуются как есть. НЕ постоянно на карте —
     display:none, пока не открыты кнопкой из шапки (#app-header-nav/
     #app-header-tools) — «шапки» карточек не нужно держать видимыми
     всё время. По просьбе пользователя (2026-08-21) перенесены с левого
     края на правый — зеркально карточке точки/погоде (#wiki-hover-card/
     #panel), которые при этом переехали с правого края на левый, см. их
     блоки ниже. Интересные места/Слои данных (взаимоисключение, см.
     live-layers.js — всегда в одной и той же точке, открыта только
     одна) — прилеплены к правому краю (14px), Стиль карты — левее них,
     Аккаунт — по центру экрана. Стоят СНИЗУ (над #scale-bar), а не
     сверху — иначе заняли бы тот же угол, что #info-stack (легенды
     активных слоёв, top:16px справа, не участвует в этом переносе). */
  .bento-card{
    position:fixed; z-index:70; width:320px; max-width:calc(100vw - 28px);
    /* overflow-x:hidden явно (2026-08-24, баг пользователя — горизонтальная
       полоса прокрутки внизу модалки «Аккаунт») — без него overflow-y:auto
       по спецификации CSS сам домысливает overflow-x:auto, и любой
       случайный 1px переполнения по ширине (например, у контента внутри)
       рисует ненужный горизонтальный скролл, которого тут никогда не
       было в замысле — всё это семейство модалок скроллится только
       вертикально. */
    max-height:calc(100vh - var(--app-header-h) - 94px); overflow-y:auto; overflow-x:hidden;
    display:none; background:#fff;
    border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,.16);
  }
  .bento-card.open{ display:block; }
  #taibreak-modal, #layers-modal{ right:14px; bottom:66px; }
  /* Ширина — стандартные 320px базовой сетки размеров (.bento-card),
     как у остальных модалок (единая сетка, см. комментарий у
     makeModalMovable('map-style-ctrl', ...) в index.html). right —
     14(отступ от края)+320(ширина стека Интересные места/Слои данных)+
     14(зазор между карточками) = 348, чтобы не наезжать на них. */
  #map-style-ctrl{ right:348px; bottom:66px; }
  #auth-modal{ left:50%; top:50%; transform:translate(-50%,-50%); max-height:70vh; }
  /* Небольшой отступ содержимого от левого края модалки (по просьбе
     пользователя 2026-08-23) — раньше .bento-body ничего не задавал,
     контент упирался прямо в край карточки. % — от ширины самой
     модалки (#auth-modal), она же ресайзится вручную. */
  #auth-modal-body{ padding-left:2%; }
  /* Мини-глобус — вниз-влево. У остальных .bento-card высота от контента
     + скролл, тут содержимое одно — карта — и логичнее, чтобы она
     заполняла всю карточку и росла/сжималась вместе с ручным ресайзом
     (см. .modal-resize), поэтому явная height + flex-заливка, а не
     content-driven. Ручка ресайза — правый нижний угол, как у
     #wiki-hover-card/#panel (тоже у левого края экрана). Без .p-head
     (по просьбе пользователя 2026-08-22, "модалка без полей как
     карточка точки") — ✋/× живут прямо в карте, см. правило ниже. */
  /* bottom:44px, не 14px (2026-08-25, баг пользователя после "Сбросить
     положение") — ровно в этом углу (bottom-left карты) сидит
     стандартный attribution-контроль MapLibre (map.addControl(...,
     'bottom-left') в index.html, "ⓘ" со ссылками на правообладателей
     тайлов) — занимает нижние ~34px (24px сама плашка + отступ). При
     bottom:14px нижний край модалки (height:230) перекрывал её целиком,
     до неё было не докликаться. 44px — тот же отступ 14px от карты плюс
     запас под attribution-плашку. */
  #globe-modal{ left:14px; bottom:44px; width:320px; height:230px; padding:0; }
  #globe-modal.open{ display:flex; flex-direction:column; }
  #globe-modal-body{ flex:1 1 auto; min-height:0; display:flex; padding:0; }
  #globe-map{
    flex:1 1 auto; min-height:0; margin:0;
    overflow:hidden; background:var(--ui-bg-t, #fff); cursor:grab;
  }
  #globe-map:active{ cursor:grabbing; }
  #globe-map .maplibregl-ctrl-attrib, #globe-map .maplibregl-ctrl-logo{ display:none; }
  /* ✋/× поверх карты, не в отдельной шапке — тот же приём, что
     #wiki-hover-card .whc-drag/.whc-close (см. правила там же), только
     переопределяет ОБЩИЕ .modal-drag/.p-close (у остальных модалок это
     обычные flex-элементы внутри .p-head, тут своей шапки нет). */
  #globe-modal .modal-drag, #globe-modal .p-close{
    position:absolute; top:6px; width:22px; height:22px; z-index:2;
    border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
    font-size:13px; line-height:1; cursor:pointer; display:flex;
    align-items:center; justify-content:center; padding:0;
  }
  #globe-modal .p-close{ right:6px; font-size:15px; }
  #globe-modal .modal-drag{ right:32px; cursor:grab; touch-action:none; }
  #globe-modal .modal-drag:active{ cursor:grabbing; }
  #globe-modal .modal-drag:hover, #globe-modal .p-close:hover{ background:rgba(0,0,0,.65); }
  /* Тема интерфейса красит и глобус: фон карточки — тот же var(--ui-bg-t),
     что у #wiki-hover-card, слегка прозрачный, а не сплошной. Сушу/
     океан/границы саму сферу красит JS через setPaintProperty
     (applyGlobeTheme в index.html) — раньше был CSS grayscale-фильтр на
     весь canvas, но canvas один на всё (страны + жёлтая точка/рамка
     видимой области рисуются в нём же), фильтр обесцвечивал и точку с
     рамкой заодно — на тёмной теме жёлтая точка становилась серой и
     терялась (баг, пойман пользователем 2026-08-22). До него был
     hue-rotate(180deg) — тоже общий на canvas, к тому же ПОВОРОТ оттенка,
     а не единый тон: синий океан (~200°) съезжал в оранжевый (~20°). */
  /* Глобус — верхний левый угол модалки всегда (первый flex-ребёнок:
     в строке — левый край во всю высоту, в столбце — верхний край во
     всю ширину, само собой, без доп. кода). Раздвинули модалку ШИРЕ
     порога (.wide, см. GLOBE_WIDE_BREAKPOINT в JS) — глобус уходит в
     фиксированную по ширине левую часть, #globe-info открывается
     справа; раздвинули только ВЫШЕ (.tall, у неё приоритет ниже — см.
     JS, при одновременном растяжении вширь и ввысь побеждает .wide) —
     тот же #globe-info открывается снизу, #globe-modal-body становится
     колонкой (2026-08-23, по просьбе пользователя). */
  #globe-modal.wide #globe-map{ flex:0 0 180px; }
  #globe-modal.tall #globe-modal-body{ flex-direction:column; }
  #globe-modal.tall #globe-map{ flex:0 0 160px; }
  /* Оформление — то же самое, что у блока данных погоды (.p-sec, см. его
     inline-стили в index.html): заголовок жирным + простой текст
     "Название: значение" через <br>, без иконки планеты в заголовке и
     без отдельной таблицы строк — по просьбе пользователя 2026-08-23.
     Список длинный ("максимально возможное") — просто скроллится вниз,
     не страшно (её же формулировка). */
  #globe-info{
    display:none; flex:1 1 auto; min-width:0; overflow-y:auto;
    padding:10px 12px 10px 8px;
  }
  #globe-modal.wide #globe-info, #globe-modal.tall #globe-info{ display:block; }
  .gi-title{ font-weight:600; font-size:13px; margin-bottom:6px; }
  .gi-text{ font-size:12px; line-height:1.7; opacity:.75; }
  body.ui-theme-dark #globe-info{ color:var(--ui-fg); }
  /* Подзаголовок в шапке «Интересные места» — сюда переехал счётчик
     точек (раньше был текстом самой кнопки-триггера в шапке сайта).
     .p-head-title сам по себе flex-row (для икон+текст в других
     карточках) — там, где есть .p-head-sub, нужен подзаголовок ПОД
     текстом, а не в ряд с ним. */
  #taibreak-modal-head .p-head-title{ flex-direction:column; align-items:flex-start; gap:0; }
  .p-head-sub{ font-size:10.5px; font-weight:400; text-transform:none; letter-spacing:0; color:#a0a0a5; }

  #map-crosshair{
    position:absolute;inset:0;z-index:10;
    display:none;align-items:center;justify-content:center;
    pointer-events:none;
  }
  #map-crosshair.show{display:flex}

  /* Кнопка "i" — краткая информация об активных слоях. Тот же приём
     учёта ширины сайдбара, что у #map-crosshair (260px обычно,
     44px свёрнуто, 212px на брейкпоинте ниже). */
  /* Кнопка "i" теперь живёт внутри .map-ctrl (под GPS) как обычная
     .mc-btn — отдельное позиционирование не нужно, только состояние on. */
  #map-info-btn.on{background:#1a73e8;color:#fff}
  body.ui-themed #map-info-btn.on{background:var(--ui-accent);color:var(--ui-bg)}

  /* Группа «путешествие по точкам» — ГЛАВНЫЙ инструмент сайта: рулетка
     по точкам интереса. Видна только пока активен слой Тай-брейк.
     Живёт по центру СНИЗУ (как основная кнопка в игре/приложении), а
     не сбоку — чтобы считывалась как «главное действие». Пара:
     «Случайно» (первичная, крупная, с кубиком) телепортирует в любую
     точку мира; «Ближайшая» (вторичная) ведёт к ближайшей ещё не
     показанной точке на карте (без привязки к наличию панорамы) —
     получается прогулка по соседним точкам. */
  /* #tb-travel теперь ВСЕГДА виден (2026-08-23, по просьбе пользователя
     — "Случайно" должна быть на карте всегда), а не display:none/flex
     по JS в зависимости от того, есть ли активный слой — вместо этого
     сама кнопка "Случайно" получает .tb-empty (серая), когда лететь
     некуда, см. ниже. "Ближайшая" (#tb-next-btn) убрана — на её место
     в этом же ряду встал #bottom-tools (был отдельной пилюлей правее). */
  #tb-travel{
    display:flex; position:absolute; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%);
    z-index:56; gap:10px; align-items:center;
  }
  body.sb-collapsed #tb-travel{ /* на узких экранах чуть выше атрибуции */ bottom:calc(34px + env(safe-area-inset-bottom)); }
  #tb-random-btn{
    border:0; font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
    transition:background .12s, transform .1s, box-shadow .12s;
    padding:13px 22px; border-radius:26px;
    background:#1a73e8; box-shadow:0 4px 16px rgba(26,115,232,.45); color:#fff;
    font-size:15px; font-weight:700;
  }
  #tb-random-btn:hover{ background:#1560c4; box-shadow:0 6px 20px rgba(26,115,232,.55); }
  #tb-random-btn:active{ transform:scale(.96); }
  #tb-random-btn .tb-dice{
    width:18px; height:18px; flex:none; background:currentColor;
    -webkit-mask:var(--icon-dice) center/contain no-repeat; mask:var(--icon-dice) center/contain no-repeat;
  }
  body.ui-themed #tb-random-btn{ background:var(--ui-accent); color:var(--ui-bg); }
  /* Серая — когда лететь некуда (ни Тай-брейк, ни один слой в "Слоях
     данных" не активны), по просьбе пользователя 2026-08-23 — кнопка
     остаётся на месте (не прячется весь ряд целиком, как было раньше),
     просто перестаёт выглядеть как активное действие. Клик по-прежнему
     ничего страшного не делает — просто не находит куда лететь. */
  #tb-random-btn.tb-empty{
    background:#8a8f98; box-shadow:none; cursor:default;
  }
  #tb-random-btn.tb-empty:hover{ background:#8a8f98; }
  body.ui-themed #tb-random-btn.tb-empty{ background:var(--ui-mute); color:var(--ui-bg); }

  /* Иконки вида/интерфейса (⛅/3D/GPS/тема/глобус/сброс) — переехали
     сюда из шапки сайта (2026-08-23, по просьбе пользователя), сам
     .mc-btn не трогали. Раньше стояли отдельной пилюлей правее — по
     новой просьбе (2026-08-23) заняли место убранной "Ближайшей",
     прямо в потоке #tb-travel рядом со "Случайно", не своим
     position:absolute. */
  /* Поле консоли увеличено вслед за иконками (2026-08-24, по просьбе
     пользователя — было padding:5px 10px/gap:6px). */
  #bottom-tools{
    display:flex; align-items:center; gap:10px;
    background:rgba(15,23,42,.82); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.16); border-radius:24px;
    padding:8px 14px; box-shadow:0 4px 14px rgba(0,0,0,.3);
  }
  body.ui-themed #bottom-tools{ background:var(--ui-bg-t); border-color:var(--ui-line); }

  /* Онбординг-подсказка первого запуска — короткая стрелка к кнопке
     «Случайно», показывается один раз (localStorage tb_seen_hint). */
  #tb-hint{
    display:none; position:absolute; left:50%; bottom:82px; transform:translateX(-50%);
    z-index:57; max-width:280px; padding:12px 16px; border-radius:14px;
    background:#0f172a; color:#f1f5f9; box-shadow:0 8px 28px rgba(0,0,0,.4);
    font-size:13px; line-height:1.45; text-align:center;
    border:1px solid rgba(255,255,255,.12);
  }
  #tb-hint.show{ display:block; animation:hint-in .35s ease-out; }
  #tb-hint::after{ /* хвостик вниз, к кнопке */
    content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%) rotate(45deg);
    width:14px; height:14px; background:#0f172a; border-right:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  #tb-hint b{ color:#7dd3fc; }
  #tb-hint .tb-hint-close{
    display:inline-block; margin-top:9px; font-size:12px; font-weight:600;
    color:#94a3b8; cursor:pointer; text-decoration:underline;
  }
  #tb-hint .tb-hint-close:hover{ color:#e2e8f5; }
  @keyframes hint-in{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
  @media (prefers-reduced-motion: reduce){ #tb-hint.show{ animation:none; } }

  /* Попап-приглашение добавлять точки — центр карты, тот же принцип,
     что у карточек Тай-брейка (positionHoverCardCenter), но проще:
     фиксированный размер, не зависит от контента. */
  #tb-invite-popup{
    display:none; position:fixed; z-index:81;
    left:50%; top:50%; transform:translate(-50%,-50%);
    max-width:300px; padding:18px 20px;
    background:#fff; border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.28);
    font-size:13.5px; line-height:1.5; color:#222; text-align:center;
  }
  #tb-invite-popup.show{display:block}
  #tb-invite-popup a{color:#2563eb; text-decoration:none; font-weight:600}
  #tb-invite-popup a:hover{text-decoration:underline}
  #tb-invite-popup .tb-invite-close{
    position:absolute; top:6px; right:8px; border:0; background:none;
    font-size:18px; line-height:1; color:#94a3b8; cursor:pointer; padding:4px;
  }
  body.ui-themed #tb-invite-popup{background:var(--ui-bg-t);color:var(--ui-fg)}

  /* ── Выбор стиля карты — теперь карточка левой bento-колонки
     (#bento-left, см. правила .bento-card выше), не в шапке и не
     плавает над картой. Подпись «Стиль карты» + галочка, список тем
     разворачивается в потоке под шапкой карточки (.bento-body), как у
     остальных карточек колонки — не тёмный floating-дропдаун, а те же
     светлые цвета, что у белой карточки. */
  #map-style-trigger{ color:#5b6472; }
  #map-style-menu{ padding:4px 0; -webkit-overflow-scrolling:touch; }
  #map-style-ctrl.open #map-style-trigger{color:#1a73e8}
  /* Выбранный стиль — сплошная синяя ПОЛОСА во всю ширину модалки (по
     просьбе пользователя 2026-08-24), не скруглённая кнопка с отступами
     от края, как раньше (у #map-style-menu был padding:6px со всех
     сторон, у .msm-item — border-radius:7px). Теперь #map-style-menu
     без горизонтального паддинга — .msm-item сам width:100% и упирается
     в оба края карточки, border-radius:0, поэтому .sel читается именно
     как полоса, а не чип. Цвет — тот же #3a8fd6, что уже был. */
  .msm-item{
    display:block; width:100%; text-align:left; border:0;
    background:none; padding:9px 14px; border-radius:0;
    font:inherit; font-size:13.5px; color:#2c2c2e; cursor:pointer;
    white-space:nowrap; transition:background .1s;
  }
  .msm-item:hover{background:#f2f2f4}
  .msm-item.sel{background:#3a8fd6;color:#fff;font-weight:600}
  body.ui-themed #map-style-trigger{color:var(--ui-fg)}
  body.ui-themed #map-style-ctrl.open #map-style-trigger{color:var(--ui-accent)}
  body.ui-themed .msm-item{color:var(--ui-fg)}
  body.ui-themed .msm-item:hover{background:var(--ui-soft)}
  body.ui-themed .msm-item.sel{background:var(--ui-accent);color:var(--ui-bg)}

  /* Полноразмерное фото по клику на миниатюру в карточке — те же границы,
     что у прицела #map-crosshair: не на весь экран, а строго в пределах
     окна карты (не залезает на сайдбар и правую колонку с карточками). */
  #img-lightbox{
    position:absolute; inset:0; z-index:90;
    display:none; align-items:center; justify-content:center;
    background:rgba(10,10,14,.82); cursor:zoom-out;
  }
  #img-lightbox.show{display:flex}
  #img-lightbox img{
    max-width:calc(100% - 56px); max-height:calc(100% - 56px);
    object-fit:contain; border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.5);
    cursor:default;
  }
  #img-lightbox .ilb-close{
    position:absolute; top:16px; right:16px; width:34px; height:34px;
    border:0; border-radius:50%; background:rgba(0,0,0,.72);
    color:#fff; font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  #img-lightbox .ilb-close:hover{background:rgba(0,0,0,.88)}
  /* Карусель точек в лайтбоксе (2026-08-24, по просьбе пользователя) —
     стрелки прижаты к краям ВСЕГО лайтбокса (не к краю самого фото —
     оно почти всегда уже, чем контейнер, из-за object-fit:contain),
     полупрозрачные (видны, но не отвлекают, "прозрачные кнопки"),
     ярче на hover/tap. display:none по умолчанию — JS показывает их,
     только если у открытого фото есть контекст точки Тай-брейка. */
  #img-lightbox .ilb-nav{
    position:absolute; top:0; bottom:0; width:15%; min-width:56px; max-width:120px;
    border:0; background:none; color:rgba(255,255,255,.55); cursor:pointer;
    display:flex; align-items:center; z-index:1;
  }
  #img-lightbox .ilb-nav:hover{ color:rgba(255,255,255,.95); }
  #img-lightbox .ilb-nav svg{ width:40px; height:40px; display:block; filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
  #img-lightbox .ilb-prev{ left:0; justify-content:flex-start; padding-left:12px; }
  #img-lightbox .ilb-next{ right:0; justify-content:flex-end; padding-right:12px; }
  /* Подложка снизу — по ширине САМОЙ картинки, не всего экрана
     (left/right выставляет JS в positionLightboxOverlays — img не имеет
     собственных width/height, только intrinsic-пропорции, посчитать её
     реальные границы можно только после рендера). CSS left:0/right:0
     ниже — фолбэк на первый кадр, пока JS ещё не отмерил фото.
     Правка 2026-08-25 (по просьбе пользователя, "форматировать более
     графически-акцентировано"): раньше весь блок был по центру —
     нормально для однострочного заголовка, но многострочное описание
     по центру читается рвано (типографская ошибка, "рваный край" с
     обеих сторон). Теперь — выключка влево (как в любой редакционной
     подаче: заголовок статьи/подпись к фото), с чёткой иерархией трёх
     уровней: цветной чип тега (та же капсула, что .whc-tag у карточки
     точки — переиспользуем уже устоявшийся визуальный язык проекта,
     не изобретаем новый) → крупный жирный заголовок с плотным
     трекингом → приглушённое описание помельче. Один акцентный элемент
     (чип) держит на себе всю "яркость", остальное — сдержанно. */
  /* Тёмная полоса сверху фото — уравновешивает подложку с текстом снизу
     (по просьбе пользователя 2026-08-25, "тёмная часть снизу с
     текстом — уравновесить тёмной частью сверху фотографии"). Чисто
     декоративная (aria-hidden, pointer-events:none, без текста) — JS
     показывает/прячет её синхронно с #ilb-info (нет текста снизу — нет
     смысла в полосе сверху) и подгоняет left/right под реальную ширину
     фото тем же приёмом (positionLightboxOverlays). */
  #img-lightbox .ilb-top-shade{
    position:absolute; left:0; right:0; top:0; z-index:1;
    height:130px; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
  }
  #img-lightbox .ilb-info{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    padding:56px 28px 26px; box-sizing:border-box; text-align:left;
    background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 45%, transparent 100%);
    color:#fff; pointer-events:none;
    max-height:55%; overflow:hidden;
  }
  #img-lightbox .ilb-info-tag{
    display:inline-block; font-size:11px; font-weight:700; padding:4px 11px;
    border-radius:20px; color:#2a2a2e; letter-spacing:.3px; margin-bottom:10px;
    text-shadow:none;
  }
  #img-lightbox .ilb-info-title{
    font-size:25px; font-weight:800; letter-spacing:-.01em; line-height:1.18;
    margin-bottom:7px; text-shadow:0 1px 8px rgba(0,0,0,.55);
  }
  #img-lightbox .ilb-info-descr{
    font-size:14.5px; line-height:1.48; color:rgba(255,255,255,.78);
    text-shadow:0 1px 6px rgba(0,0,0,.5);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  @media (max-width:640px){
    #img-lightbox .ilb-top-shade{ height:80px; }
    #img-lightbox .ilb-info{ padding:40px 18px 18px; }
    #img-lightbox .ilb-info-tag{ font-size:10px; padding:3px 9px; margin-bottom:7px; }
    #img-lightbox .ilb-info-title{ font-size:19px; margin-bottom:5px; }
    #img-lightbox .ilb-info-descr{ font-size:13px; -webkit-line-clamp:2; }
    #img-lightbox .ilb-nav svg{ width:30px; height:30px; }
  }
  .whc-thumb{ cursor:zoom-in; }
  /* «Детский 2+» — клик по области-ловушке, нарисованной админом (см.
     kidsHotspotsOn в live-layers.js), кажет во весь экран карты слово.
     Тот же приём позиционирования, что у #img-lightbox — left:260px/
     right/top/bottom:0, ровно область карты, а не всё окно (сайдбар не
     перекрывает). */
  #kids-letter-reveal{
    position:absolute; inset:0; z-index:91;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; overflow:hidden;
    opacity:0; transform:scale(.7);
  }
  #kids-letter-reveal.show{ opacity:1; transform:scale(1); }
  /* .kids-letter-inner — сама раскладка букв, размер фиксированный
     (40vh, «натуральный» размер при коротком слове), JS дополнительно
     сжимает через transform:scale (см. showKidsLetterReveal), если
     слово шире/выше области карты — так длинное слово всегда помещается
     в экран, а короткое остаётся крупным. Два разных transform на двух
     разных элементах (масштаб влезания — тут, анимация появления/
     исчезания — на #kids-letter-reveal выше) не конфликтуют. */
  #kids-letter-reveal .kids-letter-inner{
    display:flex; white-space:nowrap; font-family:inherit; font-weight:900;
    font-size:40vh; line-height:1; color:#fff;
    text-shadow:0 0 40px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.3);
  }

  /* ── Сайдбар ── */
  /* ── Сайдбар ──
     Переведён на тёмную палитру целиком (не только блок Тай-брейка) —
     чтобы не было "коробки в коробке": тегам/иконкам больше не нужен
     свой отдельный фон/рамка (см. #tb-dark-card ниже), они floating
     прямо на этом фоне, как в референсе. */
  .sidebar{
    flex:0 0 auto;width:260px;z-index:20;
    background:rgba(14,20,32,.92);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border-right:1px solid #1b2333;
    display:flex;flex-direction:column;
    color:#c7d0e0;
  }
  .sb-brand{
    padding:17px 16px 14px;font-size:14.5px;font-weight:600;letter-spacing:-.2px;
    border-bottom:1px solid #1b2333; color:#e2e8f5;
  }
  /* Маленький logomark — точка-акцент перед названием. Цвет берёт из
     --card-line-hi (в тёмной теме синеватый, под ui-themed — акцент
     карты), так что заголовок остаётся читаемым и «своим» в любой
     гамме. inline-block + baseline, чтобы сидела ровно у буквы. */
  .sb-title::before{
    content:''; display:inline-block; width:8px; height:8px; border-radius:50%;
    margin-right:8px; vertical-align:baseline;
    background:#3a8fd6; box-shadow:0 0 8px rgba(58,143,214,.55);
  }
  body.ui-themed .sb-title::before{ background:var(--ui-accent); box-shadow:none; }
  .sb-brand small{display:block;font-size:10.5px;font-weight:400;color:#5b6b8c;margin-top:4px;margin-left:16px;letter-spacing:.02em}
  /* Прокрутка перенесена сюда (была на .sidebar целиком) — строка входа
     через Telegram и переключатели темы лежат в .sb-foot ПОСЛЕ .sb-body;
     когда прокручивался весь .sidebar одним блоком, на невысоком окне
     браузера длинный список тегов/слоёв утаскивал .sb-foot за нижний
     край без вообще какого-то намёка на то, что нужно проскроллить —
     выглядело так, будто кнопка входа исчезла совсем. Теперь скроллится
     только середина (.sb-body), а шапка (.sb-brand) и подвал с логином
     (.sb-foot) остаются на месте всегда. */
  .sb-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 0;
    scrollbar-gutter:stable; /* иначе появление/исчезновение скроллбара при
      раскрытии категории (контент становится выше) меняет внутреннюю
      ширину — это и вызывало "плавающую" ширину панели и переносы тегов */
  }

  /* Аккордеон */
  .tool{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    font:inherit;font-size:13.5px;padding:11px 18px;text-align:left;
    color:#3a3a3c;background:none;border:0;cursor:pointer;
    transition:background .12s,color .12s;
  }
  .tool:hover{background:#f7f7f8;color:#1c1c1e}
  .tool.on{background:#f2f4f8;color:#1a73e8;font-weight:600}
  .tool::after{
    content:'';width:6px;height:6px;margin-left:8px;flex:none;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    transform:rotate(45deg);opacity:.45;transition:transform .18s;
  }
  .tool.on::after{transform:rotate(-135deg);opacity:.8}

  .panel,.clr-panel{
    display:none;padding:4px 18px 16px;background:#fbfbfc;
    border-top:1px solid #f2f2f4;border-bottom:1px solid #f2f2f4;
  }
  .panel.visible,.clr-panel.visible{display:block}

  /* «Цвета и слои» — раньше было аккордеон-секцией внутри сайдбара,
     теперь отдельная модалка поверх карты (кнопка-триггер переехала в
     подвал сайдбара, к «Транспорту», см. .sb-foot). Внутренние
     контролы (селекты/кнопки .clr-sel/.clr-save и т.д.) не трогаем —
     они и так светлые/читаемые, светлый фон модалки сохраняет их
     контраст без доп. правок. Позиционирование — ID-правило, оно
     побеждает общий .panel,.clr-panel по специфичности, но toggle
     видимости остаётся тем же классом .visible — механизм открытия/
     закрытия не переписывался, только "как выглядит открытое". */
  #clr-modal-backdrop, #kids-words-backdrop, #profile-backdrop{
    display:none; position:fixed; inset:0; z-index:90;
    background:rgba(8,12,20,.58); backdrop-filter:blur(1px);
  }
  #clr-modal-backdrop.show, #kids-words-backdrop.show, #profile-backdrop.show{ display:block; }
  #clr-panel, #kids-words-panel{
    position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-50%);
    width:320px; max-width:90vw; max-height:82vh; overflow-y:auto;
    border:1px solid #e2e2e5; border-radius:14px;
    padding:16px 18px 20px; box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .clr-modal-head{
    display:flex; align-items:center; justify-content:space-between;
    font-size:14px; font-weight:700; color:#1c1c1e;
    margin:0 -18px 10px; padding:0 18px 12px; border-bottom:1px solid #f2f2f4;
  }
  .clr-modal-head button{
    border:0; background:none; font-size:20px; line-height:1; color:#8a8f98;
    cursor:pointer; padding:2px 4px;
  }
  .clr-modal-head button:hover{ color:#1c1c1e; }
  /* Слова на карте — окно мешает рисовать область под собой (стоит по
     центру), поэтому именно этой модалке (не «Цвета и слои») даём
     возможность оттащить её за шапку в сторону. */
  #kids-words-panel .clr-modal-head{ cursor:move; touch-action:none; }
  #kids-words-tabs{ display:flex; gap:6px; margin:0 0 12px; }
  #kids-words-tabs button{
    flex:1; font:inherit; font-size:12px; font-weight:700; padding:7px 8px;
    border:1px solid #e2e2e5; border-radius:8px; background:#fff; color:#5a5a5e;
    cursor:pointer; transition:background .12s;
  }
  #kids-words-tabs button.on{ background:#1c1c1e; color:#fff; border-color:#1c1c1e; }
  #kids-words-list{ max-height:50vh; overflow-y:auto; }
  .kids-word-card{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 10px; margin-bottom:6px; border:1px solid #e6e6e9; border-radius:8px;
    cursor:pointer; transition:background .12s, border-color .12s;
  }
  .kids-word-card:hover{ background:rgba(66,153,225,.06); border-color:rgba(66,153,225,.25); }
  .kids-word-card .kw-word{ font-weight:700; letter-spacing:.5px; font-size:14px; flex:1; overflow-wrap:anywhere; }

  /* Список «Мои точки» (теперь внутри модалки «Мой профиль», см.
     #profile-points-list) — только поиск/показ на карте (публикация/
     правка/удаление/шеринг живут на самой карточке точки, см.
     renderTaibreakCard в live-layers.js), поэтому карточка списка —
     просто кликабельная строка с названием и статусом, без действий. */
  #profile-points-list{ max-height:40vh; overflow-y:auto; }
  .wc-point-card{
    padding:9px 10px; margin-bottom:8px; border:1px solid #e6e6e9; border-radius:8px;
  }
  .wc-point-card .wc-title-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .wc-name-btn{
    font:inherit; font-weight:700; font-size:13px; overflow-wrap:anywhere; text-align:left;
    border:0; background:none; padding:0; cursor:pointer; color:#1c1c1e; flex:1;
  }
  .wc-name-btn:hover{ text-decoration:underline; }
  .wc-badge{
    font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap;
  }
  .wc-badge.private{ background:#eef0f3; color:#5a5a5e; }
  .wc-badge.published{ background:#e3f3e6; color:#2e7d32; }

  /* Профиль — окно-карточка, как #wiki-hover-card: фиксированное
     золотое сечение по умолчанию (320×518), затем можно потянуть за
     угол (#profile-resize, тот же приём с zoom на внутреннем блоке,
     что и у карточки точки — см. JS). display:none снаружи, JS сам
     переключает inline style.display, класса .visible не заводим —
     ровно как у оригинала. */
  #profile-panel{
    position:fixed; display:none; z-index:91;
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:320px; height:518px; max-width:90vw; max-height:90vh;
    background:#fff; border-radius:10px; overflow:hidden;
    box-shadow:0 6px 24px rgba(0,0,0,.28); border:1px solid rgba(0,0,0,.08);
    font-size:12px; color:#222;
  }
  /* .whc-close/.whc-drag/.whc-collapse/.whc-resize — те же классы, что
     у карточки точки, но правила заново под #profile-panel: у
     оригинала (#wiki-hover-card .whc-close{...}) селектор жёстко
     привязан к тому ID, снаружи не подхватывается. */
  #profile-panel .whc-close, #profile-panel .whc-drag{
    position:absolute; top:6px; width:22px; height:22px; z-index:2;
    border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
    font-size:13px; line-height:1; cursor:pointer; display:flex;
    align-items:center; justify-content:center; padding:0;
  }
  #profile-panel .whc-close{ right:6px; font-size:15px; }
  #profile-panel .whc-drag{ right:32px; cursor:grab; touch-action:none; }
  #profile-panel .whc-drag:active{ cursor:grabbing; }
  #profile-panel .whc-close:hover, #profile-panel .whc-drag:hover{ background:rgba(0,0,0,.65); }
  #profile-panel .whc-collapse{
    position:absolute; top:6px; right:58px; width:22px; height:22px; z-index:2;
    border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
    font-size:12px; line-height:1; cursor:pointer; display:flex;
    align-items:center; justify-content:center; padding:0;
  }
  #profile-panel .whc-collapse:hover{ background:rgba(0,0,0,.65); }
  #profile-panel.whc-collapsed{ width:auto; height:auto; }
  #profile-panel.whc-collapsed #profile-content,
  #profile-panel.whc-collapsed .whc-resize{ display:none; }
  #profile-panel .whc-collapsed-label{ display:none; }
  #profile-panel.whc-collapsed .whc-collapsed-label{
    display:block; cursor:pointer; padding:9px 84px 9px 34px;
    font-size:12.5px; font-weight:600; color:#222;
    max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #profile-panel .whc-resize{
    position:absolute; right:0; bottom:0; width:18px; height:18px;
    z-index:2; cursor:nwse-resize; touch-action:none;
  }
  #profile-panel .whc-resize::before{
    content:''; position:absolute; right:4px; bottom:4px; width:9px; height:9px;
    background-image:
      linear-gradient(135deg, transparent 0 40%, rgba(0,0,0,.4) 40% 48%, transparent 48% 100%),
      linear-gradient(135deg, transparent 0 65%, rgba(0,0,0,.4) 65% 73%, transparent 73% 100%);
  }
  /* Второй угол ресайза — левый нижний (2026-08-22, по просьбе
     пользователя: "увеличение на уголках и справа низ и лево"), тот же
     приём с zoom на #profile-content, что и у правого (см. JS
     #profile-resize-left) — зеркальный грип, правый край при этом
     остаётся на месте, левый уезжает влево/вниз. */
  #profile-panel .whc-resize-left{
    position:absolute; left:0; bottom:0; width:18px; height:18px;
    z-index:2; cursor:nesw-resize; touch-action:none;
  }
  #profile-panel .whc-resize-left::before{
    content:''; position:absolute; left:4px; bottom:4px; width:9px; height:9px;
    background-image:
      linear-gradient(45deg, transparent 0 40%, rgba(0,0,0,.4) 40% 48%, transparent 48% 100%),
      linear-gradient(45deg, transparent 0 65%, rgba(0,0,0,.4) 65% 73%, transparent 73% 100%);
  }
  #profile-panel.whc-collapsed .whc-resize-left{ display:none; }
  /* Тема ОКНА — чёрно-белый кружок слева от collapse/drag/close (те
     держатся у правого угла), как обсуждалось: тёмная тема — чёрный
     фон кнопки/белая точка, светлая — наоборот. */
  #profile-theme-toggle{
    position:absolute; top:6px; left:6px; z-index:2;
    width:22px; height:22px; padding:0; border-radius:50%;
    border:1px solid #d7d7db; background:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  #profile-theme-toggle::after{ content:''; width:10px; height:10px; border-radius:50%; background:#1c1c1e; }
  #profile-panel.dark #profile-theme-toggle{ background:#1c1c1e; border-color:#3a3a3d; }
  #profile-panel.dark #profile-theme-toggle::after{ background:#fff; }
  #profile-panel.dark{ background:#1c1c1e; color:#e8e8ea; }
  #profile-panel.dark .clr-sel{ background:#28282b; color:#e8e8ea; border-color:#3a3a3d; }
  #profile-panel.dark #profile-tabs button{ background:#28282b; color:#c9c9cc; border-color:#3a3a3d; }
  #profile-panel.dark #profile-tabs button.on{ background:#e8e8ea; color:#1c1c1e; border-color:#e8e8ea; }
  #profile-panel.dark .wc-point-card{ border-color:#3a3a3d; }
  #profile-panel.dark .wc-name-btn{ color:#e8e8ea; }
  #profile-panel.dark #profile-view-bio{ color:#a8a8ae; }
  #profile-panel.dark .whc-collapsed-label{ color:#e8e8ea; }

  /* Контент — обычный поточный блок (НЕ position:absolute), zoom на
     ресайзе трогает только его (см. пояснение у .whc-content выше по
     файлу: zoom на самом fixed-элементе домножил бы left/top). Высота
     100% — в отличие от карточки точки (там auto, размер по контенту),
     тут окно фиксированного золотого сечения с самого начала, контент
     просто заполняет его. */
  #profile-content{
    display:flex; flex-direction:column; width:100%; height:100%;
    padding-top:38px; box-sizing:border-box;
  }
  #profile-tabs{ flex:none; display:flex; gap:6px; padding:0 14px 10px; }
  #profile-tabs button{
    flex:1; font:inherit; font-size:12px; font-weight:700; padding:6px 8px;
    border:1px solid #e2e2e5; border-radius:8px; background:#fff; color:#5a5a5e;
    cursor:pointer; transition:background .12s;
  }
  #profile-tabs button.on{ background:#1c1c1e; color:#fff; border-color:#1c1c1e; }
  #profile-title{ flex:none; display:none; padding:0 14px 10px; font-size:14px; font-weight:700; }
  /* Вкладки переключаются ВНУТРИ этой области — размер самого окна не
     меняется (см. просьбу), длинный список «Мои точки» скроллится сам. */
  #profile-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 14px 14px; }

  #profile-avatar-btn{
    display:flex; justify-content:center; width:100%; margin:6px 0 10px; padding:0;
    border:0; background:none; cursor:pointer; position:relative;
  }
  #profile-panel:not(.own-mode) #profile-avatar-btn{ cursor:default; }
  #profile-avatar-big{ font-size:48px; line-height:1; }
  /* Значок-карандаш — тот же сигнал кликабельности, что у лупы на фото
     точки (.whc-zoom-badge), только для смены аватара. Только для
     своего профиля — у чужого её не только не потрогать, но и незачем
     намекать, что можно. */
  #profile-avatar-edit-ico{
    position:absolute; right:calc(50% - 34px); bottom:-2px; font-size:12px;
    width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid #e2e2e5;
    display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.18);
  }
  #profile-panel:not(.own-mode) #profile-avatar-edit-ico{ display:none; }
  /* Эмодзи-грид выбора аватара — свёрнут по умолчанию (см. запрос
     «аватарки спрятать»), раскрывается кликом по самому аватару. */
  .profile-avatar-opt{
    font-size:20px; width:36px; height:36px; line-height:1;
    border:1px solid #e2e2e5; border-radius:8px; background:#fff; cursor:pointer;
  }
  .profile-avatar-opt.sel{ border:2px solid #7c3aed; }
  #profile-avatar-grid{ justify-content:center; margin-bottom:10px; }
  /* Ник/о себе — по умолчанию просто текст (не похожи на поля ввода),
     редактируемость только явным кликом, см. JS. */
  #profile-view-nickname{
    display:block; font-size:16px; font-weight:700; text-align:center;
    border-radius:6px; padding:2px 6px; margin:0 -6px 4px;
  }
  #profile-view-bio{
    font-size:13px; color:#5a5a5e; text-align:center; white-space:pre-wrap;
    border-radius:6px; padding:2px 6px; margin:0 -6px; min-height:1.4em;
  }
  #profile-panel.own-mode .profile-editable-field{ cursor:text; }
  #profile-panel.own-mode .profile-editable-field:hover{ background:rgba(0,0,0,.045); }
  #profile-nickname-input{ text-align:center; font-weight:700; margin-bottom:4px; }
  #profile-bio-input{ resize:vertical; }
  .tb-author-btn{
    font:inherit; font-size:11px; padding:3px 9px; border:1px solid #e2e2e5; border-radius:14px;
    background:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:#334155;
  }
  .tb-author-btn:hover{ background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.35); }

  .sb-foot{padding:12px 18px 16px;border-top:1px solid #1b2333}
  /* border:0/background:none/outline:none — .sb-link вешается и на <a>
     (нет нативной рамки), и на <button> (браузер сам рисует
     border+фон+outline, если явно не сбросить — без этого в шапке
     (#app-header-nav) кнопки-триггеры выглядели с обводкой поверх
     тёмного фона, хотя должны быть просто надписью). */
  .sb-link{
    display:block;font-size:12.5px;color:#8a97b3;text-decoration:none;
    padding:7px 0;transition:color .12s;
    border:0;background:none;outline:none;-webkit-appearance:none;appearance:none;
    font-family:inherit;cursor:pointer;
  }
  .sb-link:hover{color:#2b6cb0}
  /* «Мой профиль» — раньше отдельная CTA-кнопка (.profile-open-link),
     открывавшая свою floating-модалку; правка 2026-08-24 (по просьбе
     пользователя) переносит сам профиль прямо в модалку «Аккаунт», см.
     #myprofile-block ниже — кнопка и её стиль больше не нужны. */
  #myprofile-block{ margin-top:14px; padding-top:10px; border-top:1px solid #eef0f4; }
  body.ui-themed #myprofile-block{ border-color:var(--ui-line); }
  /* Аватар/ник/о себе — тот же вид и та же логика "клик — редактировать",
     что были у #profile-panel.own-mode (см. комментарий у #profile-panel
     ниже), только с новыми id и без ancestor-скоупа под own-mode, т.к.
     этот блок сам по себе только "свой" — чужого тут не бывает. */
  #myprofile-avatar-btn{
    display:flex; justify-content:center; width:100%; margin:2px 0 10px; padding:0;
    border:0; background:none; cursor:pointer; position:relative;
  }
  #myprofile-avatar-big{ font-size:40px; line-height:1; }
  #myprofile-avatar-edit-ico{
    position:absolute; right:calc(50% - 30px); bottom:-2px; font-size:12px;
    width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid #e2e2e5;
    display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.18);
  }
  #myprofile-avatar-grid{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:10px; }
  #myprofile-view-nickname{
    display:block; font-size:15px; font-weight:700; text-align:center;
    border-radius:6px; padding:2px 6px; margin:0 -6px 4px; cursor:text;
  }
  #myprofile-view-bio{
    font-size:12.5px; color:#5a5a5e; text-align:center; white-space:pre-wrap;
    border-radius:6px; padding:2px 6px; margin:0 -6px; min-height:1.4em; cursor:text;
  }
  #myprofile-block .profile-editable-field:hover{ background:rgba(0,0,0,.045); }
  body.ui-themed #myprofile-view-bio{ color:var(--ui-mute); }
  #myprofile-nickname-input{ text-align:center; font-weight:700; margin-bottom:4px; }
  #myprofile-bio-input{ resize:vertical; }

  /* ── Плашка координат ── */
  .title-badge{
    position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:10;
    padding:7px 14px;background:rgba(20,27,43,.92);backdrop-filter:blur(8px);
    border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.25);
    font-size:12.5px;color:#c7d0e0;white-space:nowrap;
  }
  /* Название места — ссылка на статью в Wikipedia, если она нашлась
     (см. resolveTitlePlaceLink). Цвет наследуется от бейджа — не хочется
     синего текста посреди аккуратной плашки с координатами, подчёркивание
     появляется только при наведении, как подсказка "это кликабельно". */
  .title-badge a{ color:inherit; text-decoration:none; cursor:pointer; }
  .title-badge a:hover{ text-decoration:underline; }

  /* ── Плавающая панель остановки/погоды ──
     Раньше сидела в НИЗ-право углу, а стек карточек слоёв — в ВЕРХ-право:
     на низких экранах или при нескольких активных слоях они всё равно
     занимали один и тот же угол и наезжали друг на друга (см. скриншот).
     Теперь оба — один столбец: панель сверху (когда открыта), карточки
     слоёв под ней, порядок и отступ считает JS (adjustRightColumn). */
  #panel{
    /* Погода теперь стоит ПОД карточкой точки (#wiki-hover-card) в одном
       верхнем левом углу (2026-08-21: обе перенесены с правого края на
       левый, карточка точки — с низа наверх, по просьбе пользователя) —
       top пересчитывает JS (adjustLeftColumn, live-layers.js) от
       реального положения/высоты карточки точки, когда та видима; тут
       только базовое значение (совпадает с положением карточки точки,
       когда она скрыта). */
    position:fixed;left:14px;top:calc(var(--app-header-h) + 14px);z-index:45;width:320px;max-width:calc(100% - 28px);
    max-height:calc(100% - 90px);overflow-y:auto;display:none;background:#fff;
    border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.16);padding:0;border:0;
  }
  #panel.visible{display:block}
  #panel.collapsed{max-height:none;overflow:visible}
  #panel.collapsed #p-body{display:none}
  #panel.collapsed .p-head{border-radius:12px}
  .p-head{
    position:sticky;top:0;background:#fff;padding:14px 16px 10px;
    border-bottom:1px solid #f0f0f0;border-radius:12px 12px 0 0;
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    font-size:13px;font-weight:600;z-index:2;cursor:pointer;user-select:none;
  }
  #panel.collapsed .p-head{border-bottom:0}
  .p-head-title{display:flex;align-items:center;gap:6px;overflow:hidden}
  /* .p-head-actions — обёртка для ✋/× вместе (2026-08-21, по просьбе
     пользователя): .p-head сам flex с justify-content:space-between, и
     при ТРЁХ прямых детях (заголовок, ✋, ×) space-between распределял
     их РАВНОМЕРНО — ✋ повисала где-то посередине шапки, а не рядом с
     крестиком. Обёртка сводит .p-head обратно к двум группам
     (заголовок | ✋+×), сама не растягивается (flex:none), внутри —
     обычный тесный ряд. */
  .p-head-actions{ display:flex; align-items:center; gap:2px; flex:none; }
  .p-arrow{
    transition:transform .15s;color:#8a94a3;font-size:11px;flex:none;
  }
  #panel.collapsed .p-arrow{transform:rotate(-90deg)}
  .p-close{
    background:none;border:0;color:#b0b0b4;font-size:18px;line-height:1;
    cursor:pointer;font-family:inherit;padding:0 2px;
  }
  .p-close:hover{color:#1c1c1e}
  /* Перемещение/ресайз модалок (#panel/#taibreak-modal/#layers-modal/
     #auth-modal), 2026-08-21 по просьбе пользователя — тот же приём, что
     у #wiki-hover-card/#profile-panel (#whc-drag/#whc-resize), но кнопка
     захвата — обычный flex-элемент в .p-head (у этих модалок ЕСТЬ
     заголовок, в отличие от #wiki-hover-card), а не абсолютно
     спозиционированная поверх фото. Позиция/размер после первого
     перетаскивания/ресайза сохраняются как свойство профиля
     пользователя — см. makeModalMovable/modalLayout в index.html. */
  .modal-drag{
    background:none;border:0;color:#b0b0b4;font-size:14px;line-height:1;
    cursor:grab;font-family:inherit;padding:0 2px;
  }
  .modal-drag:hover{color:#1c1c1e}
  .modal-drag:active{cursor:grabbing}
  body.ui-themed .modal-drag{color:var(--ui-mute)}
  body.ui-themed .modal-drag:hover{color:var(--ui-fg)}
  /* Кнопка "Обновить" в шапке модалки «Профиль» (2026-08-24, по просьбе
     пользователя) — тот же визуальный вес, что у ✋/×. */
  .p-reload{
    background:none;border:0;color:#b0b0b4;line-height:1;
    cursor:pointer;font-family:inherit;padding:0 2px;display:flex;align-items:center;
  }
  .p-reload svg{ width:14px; height:14px; display:block; }
  .p-reload:hover{color:#1c1c1e}
  body.ui-themed .p-reload{color:var(--ui-mute)}
  body.ui-themed .p-reload:hover{color:var(--ui-fg)}
  .modal-resize{
    position:absolute; right:0; bottom:0; width:18px; height:18px;
    z-index:3; cursor:nwse-resize; touch-action:none;
  }
  .modal-resize::before{
    content:''; position:absolute; right:4px; bottom:4px; width:9px; height:9px;
    background-image:
      linear-gradient(135deg, transparent 0 40%, rgba(0,0,0,.4) 40% 48%, transparent 48% 100%),
      linear-gradient(135deg, transparent 0 65%, rgba(0,0,0,.4) 65% 73%, transparent 73% 100%);
  }
  body.ui-theme-dark .modal-resize::before{
    background-image:
      linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.45) 40% 48%, transparent 48% 100%),
      linear-gradient(135deg, transparent 0 65%, rgba(255,255,255,.45) 65% 73%, transparent 73% 100%);
  }
  /* .modal-resize-left — зеркальная ручка ресайза за НИЖНИЙ ЛЕВЫЙ угол
     (2026-08-21, по просьбе пользователя): у #taibreak-modal/
     #layers-modal, которые стоят у правого края экрана, ручка в правом
     нижнем углу упиралась в край экрана почти без места дотянуть —
     здесь фиксирован правый край, растёт влево/вниз (см. makeModalMovable
     resizeFromLeft в index.html), поэтому и ручка теперь слева. */
  .modal-resize-left{
    position:absolute; left:0; bottom:0; width:18px; height:18px;
    z-index:3; cursor:nesw-resize; touch-action:none;
  }
  .modal-resize-left::before{
    content:''; position:absolute; left:4px; bottom:4px; width:9px; height:9px;
    background-image:
      linear-gradient(45deg, transparent 0 40%, rgba(0,0,0,.4) 40% 48%, transparent 48% 100%),
      linear-gradient(45deg, transparent 0 65%, rgba(0,0,0,.4) 65% 73%, transparent 73% 100%);
  }
  body.ui-theme-dark .modal-resize-left::before{
    background-image:
      linear-gradient(45deg, transparent 0 40%, rgba(255,255,255,.45) 40% 48%, transparent 48% 100%),
      linear-gradient(45deg, transparent 0 65%, rgba(255,255,255,.45) 65% 73%, transparent 73% 100%);
  }
  .p-sec{padding:12px 16px;border-bottom:1px solid #f5f5f5}
  .p-sec:last-child{border-bottom:none}
  .p-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;color:#2c2c2e}
  .p-badge{
    min-width:32px;text-align:center;padding:3px 7px;color:#fff;
    font-size:12px;font-weight:600;border-radius:6px;
  }
  .p-badge.bus{background:#34a853}.p-badge.trolley{background:#1a73e8}.p-badge.tram{background:#d93025}
  .p-dim{color:#a0a0a5;font-size:11px}
  .p-note{font-size:12px;color:#8e8e93;line-height:1.5}
  .blink{animation:bl 1.2s steps(2,start) infinite}
  @keyframes bl{to{visibility:hidden}}

  /* ── Заголовки и формы ── */
  .p-title,.clr-head{
    font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
    color:#a0a0a5;margin:14px 0 7px;
  }
  .clr-head:first-of-type{margin-top:8px}
  .clr-sel{
    width:100%;font:inherit;font-size:13px;padding:8px 10px;color:#1c1c1e;
    border:1px solid #e2e2e5;border-radius:8px;background:#fff;cursor:pointer;
  }
  .clr-sel:focus{outline:none;border-color:#b0b0b4}
  .clr-save,.clr-refresh{
    width:100%;font:inherit;font-size:13px;padding:8px 12px;margin-top:6px;
    text-align:left;color:#1c1c1e;background:#fff;
    border:1px solid #e6e6e9;border-radius:8px;cursor:pointer;transition:background .12s;
  }
  .clr-save:hover,.clr-refresh:hover{background:rgba(66,153,225,.08);color:#2b6cb0;border-color:rgba(66,153,225,.2)}
  .danger{color:#c0392b}
  .danger:hover{background:#fdeceb}
  .clr-row{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:4px 0;font-size:12.5px;color:#2c2c2e;
  }
  .clr-row input[type=color]{
    width:32px;height:22px;border:1px solid #e2e2e5;border-radius:6px;
    padding:0;cursor:pointer;background:none;flex:none;
  }
  .clr-chip{
    font:inherit;font-size:11.5px;padding:4px 9px;border:0;border-radius:999px;
    background:#eef0f3;color:#5a5a5e;cursor:pointer;
  }
  .clr-chip:hover{background:#e2e5ea}
  .row-inline{display:flex;align-items:center;gap:10px;font-size:13px;color:#4a5568;margin-top:10px}
  /* Стопка карточек Info — по одной на каждый включённый живой слой.
     По умолчанию раскрыта; сворачивается в полоску с одним названием.
     top фиксирован в CSS и не пересчитывается JS — остаётся в верхнем
     правом углу (2026-08-21: единственное, что НЕ участвует в переносе
     левых/правых модалок — карточка точки/погода/модалки данных теперь
     делят другие два угла, см. #wiki-hover-card/#panel/.bento-card),
     делить угол с #info-stack некому. */
  #info-stack{
    /* z-index ниже .map-ctrl (56), чтобы кнопки всегда поверх карточек,
       даже если стек вдруг дотянется. */
    position:absolute; top:16px; right:14px; z-index:40;
    display:flex; flex-direction:column; gap:8px;
    width:280px; max-width:calc(100% - 28px);
    max-height:calc(100% - 30px); overflow-y:auto;
  }
  .info-card{
    background:rgba(255,255,255,.93); backdrop-filter:blur(8px);
    border-radius:10px; box-shadow:0 3px 14px rgba(0,0,0,.18);
    overflow:hidden; font-size:12px; flex:none;
  }
  .info-card-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 10px; cursor:pointer; font-weight:700; font-size:12.5px; color:#222;
    background:rgba(0,0,0,.03); user-select:none;
  }
  .info-card-header:hover{ background:rgba(0,0,0,.07); }
  .info-card-arrow{ transition:transform .15s; color:#8a94a3; font-size:11px; flex:none; margin-left:8px; }
  .info-card.collapsed .info-card-arrow{ transform:rotate(-90deg); }
  .info-card-body{ padding:2px 10px 10px; }
  .info-card.collapsed .info-card-body{ display:none; }
  .info-card-sub{ font-size:11px; color:#777; margin:2px 0 6px; }
  .info-sl-row{ display:flex; gap:6px; padding:4px 0; border-top:1px solid rgba(0,0,0,.07); }
  .info-sl-row:first-child{ border-top:none; }
  /* Цветовая плашка вместо эмодзи-иконки — только там, где иконка в
     данных реально обозначала цвет (🔴🟢🔵...). Для строк с пиктограммой
     не по смыслу (⏱ ⚠️ 🖱 и т.п.) элемент вообще не рендерится — см.
     iconToSquares(): у таких row[0] строки колонки нет вовсе. */
  .info-sl-icon{ flex:none; display:flex; gap:3px; align-items:flex-start; padding-top:2px; }
  .info-sw{
    width:11px; height:11px; border-radius:2px; flex:none;
    border:1px solid rgba(0,0,0,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  }
  .info-sl-text b{ display:block; font-size:11.5px; }
  .info-sl-text span{ font-size:11px; color:#555; line-height:1.35; }
  .info-links{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,0,0,.08); }
  .info-links a{
    display:block; font-size:11px; color:#1a73e8; text-decoration:none; padding:2px 0;
  }
  .info-links a:hover{ text-decoration:underline; }
  body.ui-themed .info-card{ background:var(--ui-bg-t); color:var(--ui-fg); }
  body.ui-themed .info-card-header{ color:var(--ui-fg); }

  /* Отступ содержимого от левого/правого края модалки — 3.5% (по
     просьбе пользователя 2026-08-23, было 2px — почти впритык). % —
     от ширины самой модалки, она же ресайзится вручную. */
  #tb-panel-top{ margin:0 0 10px 0; padding:0 3.5%; }

  /* Категории «бонусных» слоёв — сетка погашенных иконок вместо
     аккордеона со списком названий. Тай-брейк остаётся смысловым
     костяком панели (см. #tb-panel-top выше по документу), эти
     категории — заведомо второстепенные, поэтому визуально мельче
     и по умолчанию свёрнуты в компактные плитки.

     Технически: #live-panel — CSS-грид на 4 колонки. .cat-block
     переведён в display:contents — сам он не рендерится как бокс,
     его дети (.cat-header и .cat-content) становятся ПРЯМЫМИ
     элементами грида.

     Категории выстроены вертикальным списком (см. блок ниже), иконки
     каждой закреплены за id категории через отдельное правило
     `#cat-xxx .cat-icon`, не позицией в гриде. */
  #live-panel{
    /* Зазор между категориями чуть меньше (по просьбе пользователя
       2026-08-23, было 6px). */
    display:flex; flex-direction:column; gap:2px; padding-top:2px;
    background:none; border-top:0; border-bottom:0; /* перебивает .panel{background:#fbfbfc;border:...} */
    /* Иконки категорий — Lucide (lucide.dev, лицензия ISC), залиты как
       data-URI, чтобы не заводить отдельные файлы на сервере. Цвет не
       имеет значения (перекрашиваются через mask, см. .cat-icon) —
       stroke="black" внутри чисто технический, наружу не идёт. */
    --icon-live: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M15.914%204a1.5%201.5%200%2000-2.474-1.561l-9%209A1.5%201.5%200%20005.5%2014h4.002a.5.5%200%2001.471.666L8.086%2020a1.5%201.5%200%20002.475%201.56l9-9A1.5%201.5%200%200018.5%2010h-3.997a.5.5%200%2001-.472-.667z%22%20/%3E%3C/svg%3E');
    --icon-history: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M10%2018v-7%22%20/%3E%3Cpath%20d%3D%22M11.119%202.205a2%202%200%200%201%201.762%200l7.84%203.846A.5.5%200%200%201%2020.5%207h-17a.5.5%200%200%201-.22-.949z%22%20/%3E%3Cpath%20d%3D%22M14%2018v-7%22%20/%3E%3Cpath%20d%3D%22M18%2018v-7%22%20/%3E%3Cpath%20d%3D%22M3%2022h18%22%20/%3E%3Cpath%20d%3D%22M6%2018v-7%22%20/%3E%3C/svg%3E');
    --icon-infra: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M17%2019a1%201%200%200%201-1-1v-2a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2a1%201%200%200%201-1%201z%22%20/%3E%3Cpath%20d%3D%22M17%2021v-2%22%20/%3E%3Cpath%20d%3D%22M19%2014V6.5a1%201%200%200%200-7%200v11a1%201%200%200%201-7%200V10%22%20/%3E%3Cpath%20d%3D%22M21%2021v-2%22%20/%3E%3Cpath%20d%3D%22M3%205V3%22%20/%3E%3Cpath%20d%3D%22M4%2010a2%202%200%200%201-2-2V6a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2a2%202%200%200%201-2%202z%22%20/%3E%3Cpath%20d%3D%22M7%205V3%22%20/%3E%3C/svg%3E');
    --icon-grids: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20/%3E%3Cpath%20d%3D%22M3%209h18%22%20/%3E%3Cpath%20d%3D%22M3%2015h18%22%20/%3E%3Cpath%20d%3D%22M9%203v18%22%20/%3E%3Cpath%20d%3D%22M15%203v18%22%20/%3E%3C/svg%3E');
    --icon-geo: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20/%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%20/%3E%3Cpath%20d%3D%22M2%2012h20%22%20/%3E%3C/svg%3E');
    --icon-satellite: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22m13.5%206.5-3.148-3.148a1.205%201.205%200%200%200-1.704%200L6.352%205.648a1.205%201.205%200%200%200%200%201.704L9.5%2010.5%22%20/%3E%3Cpath%20d%3D%22M16.5%207.5%2019%205%22%20/%3E%3Cpath%20d%3D%22m17.5%2010.5%203.148%203.148a1.205%201.205%200%200%201%200%201.704l-2.296%202.296a1.205%201.205%200%200%201-1.704%200L13.5%2014.5%22%20/%3E%3Cpath%20d%3D%22M9%2021a6%206%200%200%200-6-6%22%20/%3E%3Cpath%20d%3D%22M9.352%2010.648a1.205%201.205%200%200%200%200%201.704l2.296%202.296a1.205%201.205%200%200%200%201.704%200l4.296-4.296a1.205%201.205%200%200%200%200-1.704l-2.296-2.296a1.205%201.205%200%200%200-1.704%200z%22%20/%3E%3C/svg%3E');
    --icon-city: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M10%2012h4%22%20/%3E%3Cpath%20d%3D%22M10%208h4%22%20/%3E%3Cpath%20d%3D%22M14%2021v-3a2%202%200%200%200-4%200v3%22%20/%3E%3Cpath%20d%3D%22M6%2010H4a2%202%200%200%200-2%202v7a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-2%22%20/%3E%3Cpath%20d%3D%22M6%2021V5a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v16%22%20/%3E%3C/svg%3E');
    --icon-nature: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-11%2010Z%22%20/%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6C9.5%2014.52%2012%2013%2013%2012%22%20/%3E%3C/svg%3E');
  }

  /* ── Категории «Слои данных» — плоский аккордеон-список ─────────
     Референс от пользователя (test.JPG — панель фильтров вакансий):
     жирный заголовок раздела прямо на фоне страницы, без рамки-
     карточки и без цветной иконки-плитки, чипы под ним — тоже плоские,
     нейтрально-серые, edge-to-edge. Аккордеон (клик по заголовку
     сворачивает/разворачивает список слоёв) сохранён по явной просьбе
     — на референсе все разделы просто раскрыты списком, но там их 6
     статичных, а у нас 8 категорий и ~50 кнопок-слоёв, аккордеон
     экономит место. Раньше здесь была карточка с рамкой + квадратная
     цветная mask-icon слева от названия — оба убраны, чтобы совпасть
     с референсом; иконки (--icon-*, объявлены на #live-panel выше)
     оставлены объявленными в CSS, но нигде больше не используются в
     разметке модалки — HTML их сейчас всё равно не подключает. */
  .cat-block{ margin:0; }
  .cat-header{
    width:100%; display:flex; align-items:center; gap:8px;
    min-height:44px; margin:0; padding:8px 14px;
    border:0; background:none; font:inherit; font-family:inherit;
    text-align:left; cursor:pointer; transition:background .12s;
  }
  /* Эмодзи-иконка перед названием (⚡🏛🔌 и т.п., .cat-icon в HTML) и
     жирный шрифт убраны по просьбе пользователя 2026-08-23 — просто
     обычный текст названия категории. */
  .cat-label{
    flex:1; min-width:0; font-size:13.5px; font-weight:400; color:#1f1f24;
    letter-spacing:.1px; transition:color .15s;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Шеврон — рисуется рамкой уголком, без отдельного SVG. */
  .cat-header::after{
    content:''; width:7px; height:7px; flex:none; margin:0 2px 0 4px;
    border-right:1.5px solid #aab0bd; border-bottom:1.5px solid #aab0bd;
    transform:rotate(45deg); transition:transform .15s, border-color .12s;
  }
  .cat-block.open .cat-header::after{ transform:rotate(-135deg); margin-top:3px; }
  /* Внутри РЕАЛЬНО выбран хотя бы один слой — подсветка сплошной синей
     ПОЛОСОЙ во всю ширину модалки (правка 2026-08-25, по просьбе
     пользователя — как выбранный пункт в модалке «Стиль карты», см.
     .msm-item.sel выше: тот же приём, заливка на всю ширину контейнера
     плюс паддинг на самом элементе, а не просто цвет текста). Красится
     насовсем, вне зависимости от того, открыта категория сейчас или
     нет — это отдельный, более сильный сигнал ("тут что-то включено"),
     поэтому :has() проверяет .layer-btn.active, а не .open. Раз :has()
     матчится, пока хоть ОДНА кнопка внутри категории активна, — бар
     остаётся закрашенным, пока не будут отжаты (деактивированы) ВСЕ
     кнопки этой категории, не только та, что зажигала цвет первой.
     Шеврон перекрашен в белый на активном фоне для контраста. */
  .cat-block:has(.layer-btn.active) .cat-header{ background:#3A8FD6; }
  .cat-block:has(.layer-btn.active) .cat-label{ color:#fff; font-weight:600; }
  .cat-block:has(.layer-btn.active) .cat-header::after{ border-color:#fff; }
  body.ui-themed .cat-label{ color:var(--ui-fg); }
  body.ui-themed .cat-block:has(.layer-btn.active) .cat-header{ background:var(--ui-accent); }
  body.ui-themed .cat-block:has(.layer-btn.active) .cat-label{ color:var(--ui-bg); }

  /* ── Строка быстрых режимов показа (Все/Ничего/Топ-10/Панорамы/
     Кандидаты) — отделена от чипов категорий подписью + пунктирной
     границей снизу. */
  #tb-sort-label{
    font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    color:#9a9aa0; margin:0 0 6px;
  }
  #tb-sort-row{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid #eef0f4; }
  /* Топ-10 / Панорамы / Кандидаты — не тег, а альтернативный режим
     отбора точек целиком (подменяет обычный фильтр по тегам, пока
     включён — см. tbAdultFilter()). Пунктир в покое отличает их от
     обычных серых чипов; включённый режим — тональная заливка в
     своём --sort-color (та же логика, что --tag-color у тегов). */
  /* Текст — чёрный (был серый #7a7f8a, терялся на белом/пастельном фоне,
     по просьбе пользователя 2026-08-23); заливка включённого режима —
     40% вместо 16% (та же правка на яркость, что у .tb-tag-chip выше). */
  .tb-sort-special{
    background:#fff !important; border:1.5px dashed #c9ccd4 !important; color:#111 !important;
  }
  .tb-sort-special:hover{ border-color:var(--sort-color,#7a7f8a) !important; color:#111 !important; }
  .tb-sort-special.on{
    background:color-mix(in srgb, var(--sort-color,#e0a622) 40%, white) !important;
    border:1.5px solid var(--sort-color,#e0a622) !important;
    color:#111 !important;
  }

  .cat-content{ display:none; }
  .cat-block.open .cat-content{
    display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
    padding:0 0 14px; margin-top:0;
  }

  /* Кнопка слоя — плоский нейтрально-серый чип (референс test.JPG:
     панель фильтров, без рамки-пилюли, скруглённый прямоугольник, а
     не капсула). Активна — тональная заливка/текст в цвете своей
     категории (--cat-color, задан инлайном на .cat-block, наследуется
     вниз до .layer-btn) — единственное место, где остаётся цвет,
     смысловой сигнал "включено", не декоративная раскраска. */
  .layer-btn{
    flex:none; text-align:left; padding:6px 12px; border-radius:8px;
    border:0; background:#eef0f2; color:#4a4d57;
    font-size:11.5px; font-family:inherit; cursor:pointer; white-space:nowrap;
    transition:background .1s, color .1s;
  }
  .layer-btn:hover{ background:#e4e7eb; }
  /* Значок легенды/источника данных — довесок внутри .layer-btn, ставится
     JS-ом (index.html) только у слоёв, для которых есть запись в БД
     layer_legends. Свой обработчик клика с stopPropagation — клик по
     значку не должен переключать сам слой. */
  .layer-btn-info{ margin-left:4px; opacity:.5; cursor:help; }
  .layer-btn-info:hover{ opacity:1; }
  /* Цвет "вжатой" (активной) кнопки слоя — единый #3A8FD6 для всех
     категорий (правка 2026-08-23: раньше был #666FFF, поднята
     контрастность по просьбе пользователя), не тональная заливка в
     цвете своей категории, как было ещё раньше (--cat-color, разный у
     каждой) — "включено" читается одним и тем же узнаваемым цветом
     везде, вне зависимости от темы интерфейса. */
  .layer-btn.active{
    background:#3A8FD6; color:#fff; font-weight:600;
  }
  body.ui-themed .layer-btn{ background:var(--ui-soft); color:var(--ui-fg); }
  body.ui-themed .layer-btn.active{ background:#3A8FD6; color:#fff; }
  /* Тяжёлые слои — заблокированы, пока не отмечен чекбокс "Включить
     тяжёлые слои" (см. HEAVY_LAYER_IDS/applyHeavyLayerLock в
     live-layers.js). Тот же приём, что у body.kids2-locked
     (opacity+pointer-events), но точечно на кнопке, не на всей панели.
     pointer-events:none не ловит активацию с клавиатуры (Enter/Space на
     сфокусированной кнопке) — на этот случай есть ещё и JS-проверка в
     самом обработчике клика. */
  .layer-btn.heavy-locked{ opacity:.4; pointer-events:none; cursor:not-allowed; }
  body.ui-themed .layer-btn.heavy-locked{ opacity:.4; }
  /* «Детский 2+» — своя простая картинка вместо карты, точки Тай-брейка
     и живые слои данных при ней отключены и недоступны для включения
     (см. restoreLiveLayers в live-layers.js). Класс ставится/снимается
     там же при каждой смене темы. Гасит и блокирует клики сразу в
     обеих модалках («Интересные места» и «Слои данных»), без отдельного
     правила на .layer-btn. pointer-events:none не ловит активацию с
     клавиатуры (Enter/Space на сфокусированной кнопке) — на этот случай
     есть ещё и JS-проверка в самом обработчике клика. */
  body.kids2-locked #taibreak-modal-body,
  body.kids2-locked #layers-modal-body{ opacity:.5; pointer-events:none; }


  .maplibregl-ctrl-attrib{font-size:11px !important}

  .sb-brand{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  .sb-toggle{
    flex:none;width:36px;height:36px;border:1px solid #232d42;border-radius:9px;
    background:#141b2b;color:#8a97b3;font:inherit;font-size:16px;line-height:1;
    cursor:pointer;transition:all .15s;
  }
  .sb-toggle:hover{background:#1a2540;color:#c7d0e0}

  /* Свёрнутый сайдбар */
  body.sb-collapsed .sidebar{width:44px;overflow:hidden}
  body.sb-collapsed .sb-title,
  body.sb-collapsed .sb-body,
  body.sb-collapsed .sb-foot{display:none}
  body.sb-collapsed .sb-mini{display:flex !important}
  body.sb-collapsed .sb-brand{padding:10px 9px;border-bottom:0}
  body.sb-collapsed .sb-toggle{transform:rotate(180deg)}
  .sb-mini{
    display:none;flex-direction:column;align-items:center;gap:2px;
    padding:8px 0;
  }
  .sb-mini button{
    width:34px;height:34px;border:0;border-radius:8px;
    background:none;color:#64748b;font-size:15px;cursor:pointer;
    transition:all .12s;display:flex;align-items:center;justify-content:center;
  }
  .sb-mini button:hover{background:rgba(66,153,225,.1);color:#2b6cb0}
  .sb-mini button.on{color:#2b6cb0;background:rgba(66,153,225,.12)}
  body.ui-themed .sb-mini button{color:var(--ui-mute)}
  body.ui-themed .sb-mini button:hover,
  body.ui-themed .sb-mini button.on{color:var(--ui-accent);background:var(--ui-soft)}
  .sidebar{transition:width .18s}

  /* ── Интерфейс в цветах карты ── */
  body.ui-themed .sidebar,
  body.ui-themed #panel,
  body.ui-themed .title-badge,
  /* .bento-card (Интересные места/Слои данных/Аккаунт) не было в этом
     списке — красилась только шапка (.p-head, см. правила ниже), тело
     карточки оставалось белым. Добавлено по просьбе пользователя
     2026-08-21. Готча (найдена реальным браузером, Playwright,
     2026-08-23): тело было НЕПРОЗРАЧНЫМ --ui-bg-t (96%, смешивается с
     картой под модалкой), а шапка (.p-head ниже) — сплошным --ui-bg —
     на пёстрой подложке тело в среднем чуть темнее шапки, шапка
     "выпадала" светлее. Теперь оба — сплошной --ui-bg, без подмешивания
     карты; шапка при этом ещё и специально темнее на HEAD_DARKEN (см.
     --ui-head-bg в index.html) — если её выделять, то в тёмную
     сторону, а не случайно в светлую. */
  body.ui-themed .bento-card{
    background:var(--ui-bg);color:var(--ui-fg);
    border-color:var(--ui-line);
  }
  body.ui-themed .sidebar{border-right:1px solid var(--ui-line)}
  body.ui-themed .sb-brand{border-color:var(--ui-line);color:var(--ui-fg)}
  body.ui-themed .sb-foot,
  body.ui-themed .p-head,
  body.ui-themed .p-sec{border-color:var(--ui-line)}
  body.ui-themed .p-head{background:var(--ui-head-bg);color:var(--ui-fg)}
  body.ui-themed .tool{color:var(--ui-fg)}
  body.ui-themed .tool:hover{background:var(--ui-soft)}
  body.ui-themed .tool.on{background:var(--ui-soft);color:var(--ui-accent)}
  body.ui-themed .panel,
  body.ui-themed .clr-panel{
    background:var(--ui-soft);border-color:var(--ui-line);color:var(--ui-fg);
  }
  body.ui-themed .clr-head,
  body.ui-themed .p-title,
  body.ui-themed .p-dim,
  body.ui-themed .p-note,
  body.ui-themed .sb-brand small{color:var(--ui-mute)}
  body.ui-themed .sb-link{color:var(--ui-mute)}
  body.ui-themed .sb-link:hover{color:var(--ui-accent)}
  body.ui-themed .clr-row,
  body.ui-themed .p-row,
  body.ui-themed .row-inline{color:var(--ui-fg)}
  body.ui-themed .clr-sel,
  body.ui-themed .clr-save,
  body.ui-themed .clr-refresh,
  body.ui-themed .sb-toggle{
    background:var(--ui-bg);color:var(--ui-fg);border-color:var(--ui-line);
  }
  body.ui-themed .clr-save:hover,
  body.ui-themed .clr-refresh:hover,
  body.ui-themed .sb-toggle:hover{background:var(--ui-soft)}
  body.ui-themed .clr-chip{background:var(--ui-soft);color:var(--ui-fg)}
  body.ui-themed .clr-sel option{background:var(--ui-bg);color:var(--ui-fg)}
  body.ui-themed .p-close{color:var(--ui-mute)}
  body.ui-themed .p-close:hover{color:var(--ui-fg)}
  body.ui-themed .danger{color:var(--ui-danger)}

  /* ── Кнопки вида карты ── */
  .map-ctrl{
    position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));z-index:56;
    display:flex;flex-direction:column;gap:6px;
  }
  /* По просьбе пользователя — верхнее поле (#app-header) без «кнопочного»
     вида (как на view.jpg): только надписи/иконки на фоне шапки, без
     отдельного фона/тени/рамки у каждой. Активное состояние (.on/.dim)
     теперь показывает только цвет, не заливка. */
  .mc-btn{
    width:auto;height:auto;font:inherit;font-size:14.5px;font-weight:600;
    color:#8a97b3;background:none;backdrop-filter:none;
    border:0;border-radius:0;box-shadow:none;padding:6px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:color .12s;
  }
  .mc-btn:hover{color:#c7d0e0}
  /* Иконки консоли карты (2026-08-24) — единый набор Tabler Icons вместо
     смеси эмодзи (⛅🌙☀️🌐↺📏), см. переписку с пользователем. 3D/GPS
     оставлены текстом (по той же просьбе — не всё превращать в иконку,
     буквы тут читаются понятнее символа). stroke=currentColor — цвет
     ведёт .mc-btn/.on/.dim, как раньше вёл текст/эмодзи. Размер иконок
     и поле кнопки увеличены (было 16px/padding:4px) — по просьбе
     пользователя консоль казалась мелкой. */
  .mc-btn svg{ width:20px; height:20px; display:block; }
  /* #mc-3d больше не подсвечивается по состоянию (.on никогда не
     ставится, см. index.html) — вместо этого цвет всегда неизменно
     синий, в обоих состояниях "3D"/"2D" (2026-08-24, по просьбе
     пользователя). ID-селектор специально, а не .on/.dim — по
     специфичности (1,0,0) перебивает любую комбинацию классов/псевдо-
     классов ниже, включая :hover и body.ui-themed .mc-btn, без
     дублирования правила под ui-themed отдельно. */
  #mc-3d{ --c:#1a73e8; color:#1a73e8; }
  #mc-weather{--c:#0288d1}
  #mc-zoom{--c:#2e7d32}
  #mc-gps{--c:#d32f2f}
  #mc-ruler{--c:#3a8fd6}
  #mc-gps.on{animation:gps-pulse 1.5s ease-in-out infinite}
  @keyframes gps-pulse{0%,100%{box-shadow:0 1px 6px rgba(211,47,47,.3)}50%{box-shadow:0 0 12px rgba(211,47,47,.6)}}
  .gps-dot{
    width:18px;height:18px;border-radius:50%;
    background:rgba(211,47,47,.85);border:3px solid #fff;
    box-shadow:0 0 10px rgba(211,47,47,.5);
  }
  .gps-ring{
    position:absolute;width:60px;height:60px;left:-21px;top:-21px;
    border-radius:50%;border:2px solid rgba(211,47,47,.25);
    background:rgba(211,47,47,.06);
  }
  .mc-btn.on{color:var(--c)}
  .mc-btn.dim{color:var(--c);opacity:.65}
  .mc-btn .compass{font-size:16px;display:block;transition:transform .2s}
  body.ui-themed .mc-btn{color:var(--ui-fg)}
  body.ui-themed .mc-btn:hover{color:var(--ui-accent)}
  body.ui-themed .mc-btn.on{color:var(--c)}
  body.ui-themed .mc-btn.dim{color:var(--c);opacity:.65}
  /* Тема интерфейса — раньше чёрно-белый кружок-индикатор (как у
     #profile-theme-toggle), теперь сама иконка 🌙/☀️ (JS меняет
     textContent, см. setUiThemeBtnIcon в index.html) — по просьбе
     пользователя 2026-08-23 ("переключение тем можно сделать
     месяц-солнышко"), обычный .mc-btn, без своего фона-кружка. */
  /* Всегда синяя (2026-08-24, по просьбе пользователя) — независимо от
     того, месяц сейчас показан (тёмная тема) или солнце (светлая), см.
     setUiThemeBtnIcon в index.html: сам факт переключения виден по
     смене иконки, а не по цвету, цвет — просто акцент, как у #mc-3d. */
  #mc-ui-theme{ font-size:15px; color:#3A8FD6; }

  .map-ctrl{align-items:flex-end}
  .auth-row{display:flex;align-items:center;gap:8px;padding:6px 0}
  .auth-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
  .auth-name{font-size:13px;color:#4a5568;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .auth-out{border:0;background:none;color:#94a3b8;font-size:14px;cursor:pointer;padding:4px}
  .auth-out:hover{color:#ef4444}
  body.ui-themed .auth-name{color:var(--ui-fg)}
  body.ui-themed .auth-out{color:var(--ui-mute)}
  /* Единый стиль для обеих кнопок входа (Telegram/Яндекс) — раньше
     Telegram рисовал СВОЙ iframe-виджет (чужой домен, наш CSS его не
     достаёт), из-за чего кнопки визуально не совпадали (см. 01.png).
     Теперь Telegram — тоже обычная <button> на нашей вёрстке (через
     window.Telegram.Login.auth(), см. JS), общая база + цвет по бренду. */
  .auth-tg-btn, .auth-yandex-btn{
    display:inline-flex; align-items:center; gap:6px; margin-top:6px;
    padding:6px 10px; border-radius:10px; font:inherit; font-size:11.5px;
    font-weight:600; color:#fff; text-decoration:none; border:0; cursor:pointer;
    width:100%; box-sizing:border-box; justify-content:center; white-space:nowrap;
  }
  .auth-tg-btn{ background:#29a9eb; }
  .auth-tg-btn:hover{ background:#1f92cf; }
  .auth-yandex-btn{ background:#fc3f1d; margin-top:8px; }
  .auth-yandex-btn:hover{ background:#e2350f; }
  /* «Добавить место» — главная CTA-кнопка кабинета, по просьбе должна
     бросаться в глаза, в отличие от остальных тихих .sb-link в подвале
     сайдбара. Не открывает модалку — переключает курсор карты в режим
     расстановки (см. IIFE в live-layers.js рядом с admin-кнопкой
     taibreak-add-btn), .on — armed-состояние. Цвет фона — синий #2962ff
     (2026-08-24, по повторной просьбе пользователя тем же днём — до
     этого был жёлтый #fff666, до этого оранжевый) — тот же оттенок, что
     раньше был у убранной кнопки «Мой профиль», для личных действий в
     этой модалке. */
  .account-add-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; box-sizing:border-box; margin-top:10px; padding:9px 10px;
    border:0; border-radius:10px; font:inherit; font-size:12.5px; font-weight:700;
    color:#fff; background:#2962ff; cursor:pointer;
    box-shadow:0 2px 10px rgba(41,98,255,.4); transition:background .12s, transform .1s;
  }
  .account-add-btn:hover{ background:#1948c9; }
  .account-add-btn:active{ transform:scale(.97); }
  .account-add-btn.on{ background:#c0392b; box-shadow:0 2px 10px rgba(192,57,43,.4); }
  .account-add-btn.on:hover{ background:#a93226; }
  /* Админский блок в модалке Аккаунта (2026-08-21) — переиспользует
     .sb-link (тот же приём, что у триггеров в шапке — только теперь на
     белом фоне модалки; читаемость даёт body.ui-themed .sb-link{color:
     var(--ui-mute)}, которое висит ВСЕГДА, см. index.html), отделён от
     кнопок выше тонкой чертой и подписью, как .p-title у других секций. */
  #admin-account-tools{ margin-top:14px; padding-top:10px; border-top:1px solid #eef0f4; }
  body.ui-themed #admin-account-tools{ border-color:var(--ui-line); }
  /* .admin-tool-ico — держит "+"/"×" у #taibreak-add-btn (режим
     расстановки точки, см. live-layers.js): раньше JS переписывал
     ВЕСЬ textContent кнопки, теряя подпись "Поставить точку" при первом
     же переключении режима — теперь трогает только эту вложенную
     иконку. */
  .admin-tool-ico{ display:inline-block; width:12px; text-align:center; font-weight:700; }
  /* "Armed"-состояние режима расстановки (тот же красный акцент, что
     раньше был у круглой .tb-add-point-btn.on) — .sb-link сама по себе
     этого состояния не знает. */
  #taibreak-add-btn.on{ color:#e0546a; font-weight:700; }
  body.ui-themed #taibreak-add-btn.on{ color:#e0546a; }
  .auth-tg-ico{
    width:14px; height:14px; flex:none; background:#fff;
    -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2222%22%20y1%3D%222%22%20x2%3D%2211%22%20y2%3D%2213%22/%3E%3Cpolygon%20points%3D%2222%202%2015%2022%2011%2013%202%209%22/%3E%3C/svg%3E') center/contain no-repeat;
    mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2222%22%20y1%3D%222%22%20x2%3D%2211%22%20y2%3D%2213%22/%3E%3Cpolygon%20points%3D%2222%202%2015%2022%2011%2013%202%209%22/%3E%3C/svg%3E') center/contain no-repeat;
  }

  .ui-toggle{
    display:flex;align-items:center;gap:8px;font-size:12.5px;color:#8a97b3;
    padding:8px 0 2px;cursor:pointer;user-select:none;
  }
  .ui-toggle input{width:14px;height:14px;cursor:pointer;accent-color:#3a8fd6}
  body.ui-themed .ui-toggle{color:var(--ui-mute)}
  body.ui-themed .ui-toggle input{accent-color:var(--ui-accent)}

  @media(max-width:640px){
    .sidebar{width:212px}
    #panel{width:calc(100% - 28px);left:8px}
    body.sb-collapsed #panel{width:calc(100% - 60px)}
  }
  #scale-bar{
    position:fixed; bottom:calc(12px + env(safe-area-inset-bottom)); right:calc(14px + env(safe-area-inset-right));
    z-index:55; display:flex; flex-direction:column; align-items:flex-end;
    gap:2px; pointer-events:none; user-select:none;
  }
  /* Компактная информационная строка в правом нижнем углу — координаты
     центра карты + погода + локальное время. Сидит ВНУТРИ #scale-bar
     (над линейкой), наследует его позиционирование. Обновляется при
     перемещении карты с debounce ~2 сек. */
  #map-info{
    display:flex; align-items:center; gap:6px; pointer-events:auto;
    font-size:11px; font-weight:500; color:rgba(20,20,20,.85);
    background:rgba(255,255,255,.78); backdrop-filter:blur(4px);
    padding:3px 10px; border-radius:8px;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
    white-space:nowrap; max-width:380px;
    transition:opacity .3s;
  }
  #map-info.loading{ opacity:.5; }
  #map-info .mi-sep{ color:rgba(0,0,0,.2); margin:0 1px; }
  body.ui-themed #map-info{ background:var(--ui-bg-t); color:var(--ui-fg); }
  /* Линейка — классический картографический «полосатый» отрезок
     (2026-08-23, по просьбе пользователя): 5 РАВНЫХ чёрно-белых
     сегментов ФИКСИРОВАННОЙ ширины (100px, см. SCALE_BAR_PX в JS) — сама
     полоска больше не меняет размер при зуме, вместо этого меняется
     цифра под ней (#scale-text, "круглое" число в текущей единице,
     см. niceNumber). Раньше было наоборот: одна тонкая линия, менявшая
     свою ширину под уже выбранное круглое число. Чёрно-белая раскраска
     — намеренно одна и та же в любой теме интерфейса (это узнаваемый
     самостоятельный знак, а не элемент, который должен подстраиваться
     под цвета карты), поэтому body.ui-themed-варианта у неё нет.*/
  #scale-line{
    display:flex; width:100px; height:6px;
    border:1px solid rgba(20,20,20,.85);
    box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;
    overflow:hidden;
  }
  #scale-line span{ flex:1 1 20%; background:#fff; }
  #scale-line span:nth-child(odd){ background:#1a1a1a; }
  #scale-text{
    font-size:12px; font-weight:600; color:rgba(20,20,20,.85);
    background:rgba(255,255,255,.75); backdrop-filter:blur(4px);
    padding:1px 8px; border-radius:6px; cursor:pointer; pointer-events:auto;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
  }
  #scale-text:hover{ background:rgba(255,255,255,.92); }
  body.ui-themed #scale-text{ background:var(--ui-bg-t); color:var(--ui-fg); }
  /* Рулетка — плавающая табличка с суммарным расстоянием, тот же
     визуальный язык, что #scale-text/#map-info (2026-08-23). Отступ
     сверху увеличен (правка того же дня, баг пользователя) — на том же
     верхнем уровне и по центру уже сидит .title-badge (координаты
     центра карты), табличка перекрывала её; сдвинута ниже него. */
  #ruler-readout{
    position:fixed; top:calc(var(--app-header-h) + 62px); left:50%; transform:translateX(-50%);
    z-index:56; display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
    padding:5px 8px 5px 12px; border-radius:20px; box-shadow:0 2px 10px rgba(0,0,0,.18);
    font-size:12.5px; font-weight:600; color:rgba(20,20,20,.88);
  }
  #ruler-readout .ruler-value{ cursor:pointer; white-space:nowrap; }
  #ruler-readout .ruler-value:hover{ text-decoration:underline; }
  #ruler-readout .ruler-clear{
    border:0; background:#eef0f2; color:#4a4d57; width:20px; height:20px;
    border-radius:50%; font-size:14px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  #ruler-readout .ruler-clear:hover{ background:#e4e7eb; }
  body.ui-themed #ruler-readout{ background:var(--ui-bg-t); color:var(--ui-fg); }
  body.ui-themed #ruler-readout .ruler-clear{ background:var(--ui-soft); color:var(--ui-fg); }
  /* Мобильная развязка кнопок путешествия и масштабной линейки. Идёт
     ПОСЛЕ базовых правил #scale-bar/#tb-travel, иначе перебивалось по
     порядку. На узком экране «Ближайшая» переносилась в 2 строки
     и росла вверх — держим кнопки в одну строку (nowrap, чуть меньше),
     кнопки приподняты (bottom:52), линейка в самом низу (bottom:8) —
     разведены по вертикали, даже если по горизонтали угол общий.
     (max-height:430px) — тот же телефон, но в альбомной ориентации:
     по ширине уже не узкий (max-width:640px не сработает), а #map-info
     в этом случае наезжал прямо на #tb-travel (сам блок тоже на bottom,
     но без учёта соседей) — та же развязка нужна и тут. */
  @media(max-width:640px), (max-height:430px){
    #tb-random-btn{ padding:11px 16px; font-size:14px; }
    #tb-travel{ bottom:calc(52px + env(safe-area-inset-bottom)); gap:6px; }
    #scale-bar{ bottom:calc(8px + env(safe-area-inset-bottom)); }
    #map-info{ display:none; }
  }

  /* Ползунок глубины слоя «Сейсмические аномалии». Сознательно НЕ
     возвращается к значению по умолчанию при отпускании (в отличие
     от временной шкалы «Битв») — просили именно фиксацию на месте. */
  #depth-slider-wrap{
    position:fixed; bottom:52px; left:50%; transform:translateX(-50%);
    z-index:56; display:none; flex-direction:column; align-items:center; gap:3px;
    width:min(440px, calc(100vw - 32px));
    background:rgba(255,255,255,.80); backdrop-filter:blur(6px);
    padding:7px 14px 8px; border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.18); user-select:none;
  }
  #depth-slider-label{
    font-size:12px; font-weight:700; color:rgba(20,20,20,.88);
    font-variant-numeric:tabular-nums; letter-spacing:.2px;
  }
  #depth-slider{
    -webkit-appearance:none; appearance:none;
    width:100%; margin:8px 0 4px; cursor:grab; background:transparent;
  }
  #depth-slider:active{ cursor:grabbing; }
  /* Тот же красно-бело-синий язык, что и в самом слое: красный —
     медленнее среднего, синий — быстрее. */
  #depth-slider::-webkit-slider-runnable-track{
    height:5px; border-radius:3px;
    background:linear-gradient(90deg, #671f1f, #f0eae6, #1f3f7a);
  }
  #depth-slider::-webkit-slider-thumb{
    -webkit-appearance:none; margin-top:-5px;
    width:15px; height:15px; border-radius:50%;
    background:#fff; border:2px solid #333; box-shadow:0 1px 3px rgba(0,0,0,.4);
  }
  #depth-slider::-moz-range-track{
    height:5px; border-radius:3px;
    background:linear-gradient(90deg, #671f1f, #f0eae6, #1f3f7a);
  }
  #depth-slider::-moz-range-thumb{
    width:15px; height:15px; border-radius:50%;
    background:#fff; border:2px solid #333; box-shadow:0 1px 3px rgba(0,0,0,.4);
  }
  body.ui-themed #depth-slider-wrap{ background:var(--ui-bg-t); }
  body.ui-themed #depth-slider-label{ color:var(--ui-fg); }

  /* Карточка точки — модалка вверху-слева, под шапкой (2026-08-21:
     перенесена с низа-справа по просьбе пользователя — тот же перенос,
     что у трёх других модалок ниже, только в обратную сторону и без
     привязки к #scale-bar). Скрыта, пока точка не выбрана. Погода
     (#panel) стоит ПОД этой карточкой в том же левом углу, см.
     adjustLeftColumn в live-layers.js. Растягивается за правый нижний
     угол ручкой #whc-resize (см. .whc-resize ниже и JS) — это то, чего
     не было у предыдущей (докнутой) версии карточки. */
  #wiki-hover-card{
    position:fixed; display:none; pointer-events:auto;
    left:14px; top:calc(var(--app-header-h) + 14px); z-index:65;
    width:320px; max-width:calc(100vw - 28px); max-height:calc(100vh - var(--app-header-h) - 28px);
    overflow-y:auto;
    background:#fff; border-radius:12px;
    box-shadow:0 4px 24px rgba(0,0,0,.16); font-size:12px; color:#222;
    --icon-pano: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15.194%2013.707%203.814%201.86-1.86%203.814%22%20/%3E%3Cpath%20d%3D%22M16.47214%207.52786%20A%205%2010%200%201%200%2013%2021.79796%22%20/%3E%3Cpath%20d%3D%22M21.79796%2011%20A%2010%205%200%201%200%2019%2015.57071%22%20/%3E%3C/svg%3E');
    --icon-zoom: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20/%3E%3Cline%20x1%3D%2221%22%20x2%3D%2216.65%22%20y1%3D%2221%22%20y2%3D%2216.65%22%20/%3E%3Cline%20x1%3D%2211%22%20x2%3D%2211%22%20y1%3D%228%22%20y2%3D%2214%22%20/%3E%3Cline%20x1%3D%228%22%20x2%3D%2214%22%20y1%3D%2211%22%20y2%3D%2211%22%20/%3E%3C/svg%3E');
  }
  /* Высота увеличена на 20% (110px -> 132px) по просьбе пользователя
     2026-08-21 — больше места под фото в карточке. */
  #wiki-hover-card .whc-thumb{ width:100%; height:132px; object-fit:cover; display:block; flex:0 0 auto; }
  /* Обёртка фото — нужна только для значка-лупы (position:absolute
     внутри неё, см. .whc-zoom-badge). Панорама больше НЕ лежит поверх
     снимка (см. ниже) — эта обёртка не про неё. */
  #wiki-hover-card .whc-thumb-wrap{ position:relative; flex:0 0 auto; }
  /* Значок «лупа с плюсом» в углу фото — сигнал, что снимок кликабелен
     (открывает полноразмерный лайтбокс, см. JS openLightbox). Раньше
     единственной подсказкой был cursor:zoom-in при наведении — на
     тачскрине его никто не увидит, да и на десктопе не бросается в
     глаза, пока не наведёшь мышь. Сам клик обрабатывается делегированно
     по .whc-thumb — .whc-zoom-badge просто визуальный намёк, отдельного
     обработчика ему не нужно (bounding box лежит поверх фото). */
  #wiki-hover-card .whc-zoom-badge{
    position:absolute; right:7px; bottom:7px; z-index:2;
    width:24px; height:24px; border-radius:50%;
    background:rgba(15,23,42,.72); backdrop-filter:blur(3px);
    border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; /* клик всё равно ловит .whc-thumb под ней */
  }
  #wiki-hover-card .whc-zoom-badge .whc-zoom-ico{
    width:13px; height:13px; background:#fff;
    -webkit-mask:var(--icon-zoom) center/contain no-repeat; mask:var(--icon-zoom) center/contain no-repeat;
  }
  /* Кнопка «Осмотреться в 360°» — ГЛАВНОЕ действие карточки (был
     скрытый козырь сайта — панорама пряталась текстовой ссылкой «360»
     среди Map/Satellite/More). Раньше лежала ПОВЕРХ фото — перекрывала
     значок лупы и сама терялась на пёстрых снимках. Теперь отдельной
     строкой СРАЗУ ПОД фото — тот же приём, что раньше был только у
     карточек без фото (.standalone), теперь используется всегда. */
  #wiki-hover-card .whc-pano{
    position:static; margin:8px 10px 2px; display:flex; justify-content:center;
    align-items:center; gap:6px;
    padding:8px 14px; border-radius:20px;
    background:linear-gradient(135deg,#0ea5e9,#2563eb); border:1px solid transparent;
    color:#fff; font-size:12.5px; font-weight:600; text-decoration:none;
    box-shadow:0 2px 8px rgba(37,99,235,.35);
    transition:filter .15s, transform .1s;
  }
  #wiki-hover-card .whc-pano:hover{ filter:brightness(1.08); }
  #wiki-hover-card .whc-pano:active{ transform:scale(.97); }
  #wiki-hover-card .whc-pano .whc-pano-ico{
    width:15px; height:15px; flex:none;
    background:currentColor;
    -webkit-mask:var(--icon-pano) center/contain no-repeat; mask:var(--icon-pano) center/contain no-repeat;
  }
  /* Сама карточка растёт по контенту до max-height, дальше скроллится
     (#wiki-hover-card{overflow-y}). Ручной ресайз за угол (2026-08-21,
     см. #whc-resize и JS) — БЕЗ zoom-масштабирования содержимого (в
     отличие от #profile-panel, который переиспользует те же .whc-*
     классы, но описан отдельно и зумит #profile-content) — просто явные
     px на самой карточке, .whc-body внутри скроллится сам. Drag
     (.whc-drag) и collapse (.whc-collapse) по-прежнему не возвращены —
     нужен был только ресайз. */
  #wiki-hover-card .whc-content{
    display:flex; flex-direction:column; width:100%; height:auto;
  }
  #wiki-hover-card .whc-body{
    padding:8px 10px 9px; flex:1 1 auto; min-height:0; overflow-y:auto;
  }
  #wiki-hover-card .whc-body b{ font-size:12.5px; display:block; margin-bottom:3px; }
  #wiki-hover-card .whc-extract{
    color:#555; line-height:1.35; display:-webkit-box;
    -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* После первого ресайза (класс ставит JS, см. #whc-resize) — снимаем
     обрезку по 5 строкам: теперь высоту ограничивает не clamp, а сам
     размер карточки, .whc-body сам скроллится, если текста больше, чем
     видно. Это и есть "наполнение масштабируется под новый размер". */
  #wiki-hover-card.whc-resized .whc-extract{ -webkit-line-clamp:unset; }
  #wiki-hover-card .whc-loading{ padding:9px 10px; color:#888; }
  #wiki-hover-card .whc-note{
    margin-top:8px; padding:7px 8px; background:#f5f0ff; border-radius:6px;
    border-left:3px solid #8b5cf6;
  }
  #wiki-hover-card .whc-note a{ display:block; font-size:10.5px; color:#6d28d9;
    text-decoration:none; margin-bottom:3px; }
  #wiki-hover-card .whc-note a:hover{ text-decoration:underline; }
  #wiki-hover-card .whc-note div{ font-size:12px; color:#3a2e52; line-height:1.35; }
  .whc-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
  /* background — инлайн из TB_TAG_COLORS в JS, та же палитра, что у
     чипов-фильтров в панели и у кружков на карте. */
  .whc-tag{
    font-size:10px; padding:2px 7px; border-radius:20px;
    color:#3a3a3e; white-space:nowrap; letter-spacing:.2px;
  }
  /* Чипы-фильтры по тегам — форма и размер приведены к тому же виду,
     что у .whc-tag (карточка точки, см. выше) — капсула
     (border-radius:20px), тот же мелкий кегль. Готча (найдена реальным
     браузером, Playwright, 2026-08-23 — до этого CSS ВЫГЛЯДЕЛ верным,
     но фактически не применялся): `font:inherit` в конце правила — это
     ШОРТХЭНД, он сбрасывает font-size СРАЗУ КО ВСЕМ входящим в него
     подсвойствам, включая уже написанный expliсит `font-size:10px`
     ВЫШЕ по этому же правилу — computed style реально показывал 14px
     (унаследованный от body), а не 10. Нужен был просто
     `font-family:inherit` (так уже сделано у .sb-link и других кнопок
     в этом файле) — шорThand `font` тут был лишним и вредным. Заодно
     padding и font-weight приведены к точным значениям .whc-tag (была
     жирность 600/500, там обычная 400). Рест-состояние (.off — тег
     СНЯТ, JS кладёт этот класс на большинство чипов по умолчанию, см.
     live-layers.js) — нейтрально-серое. Выбранный тег (без .off) —
     тональная заливка в --tag-color (инлайн из TB_TAG_COLORS в JS) —
     цвет здесь смысловой (тот же цвет точки на карте), поэтому
     единственное место, где чип остаётся цветным, а не серым. */
  /* Цвет текста и насыщенность заливки — по просьбе пользователя
     2026-08-23: текст был color-mix(...,80%,black) — то есть НЕ чёрный,
     а затемнённый оттенок самого цвета тега, на пастельном фоне
     терялся; заливка была всего 22% цвета в белом — бледно-пастельно.
     Текст — сплошной чёрный, заливка сначала поднята до 45%, затем (тем
     же днём, повторная просьба «ещё чуть контрастнее») до 60% — заметно
     ярче, но чёрный текст всё ещё читается на всех цветах
     TB_TAG_COLORS. */
  .tb-tag-chip{
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; padding:2px 7px; border-radius:20px; border:0;
    background:color-mix(in srgb, var(--tag-color,#c7cbd1) 60%, white);
    cursor:pointer; font-family:inherit;
    color:#111; font-weight:400;
    transition:background .12s, color .12s, transform .1s;
  }
  .tb-tag-chip:hover{ filter:brightness(.97); }
  .tb-tag-chip:active{ transform:scale(.96); }
  .tb-tag-chip.off{
    background:#eef0f2; color:#111; font-weight:400;
  }
  .tb-tag-chip.off:hover{ background:#e4e7eb; }
  /* Кнопка добавления новой категории — визуально отличается от
     обычных чипов пунктирной обводкой, видна только админу
     (переключается там же, где taibreak-add-btn). */
  .tb-tag-add{
    background:#fff !important; border:1.5px dashed #c3c7ce !important;
    color:#111 !important;
  }
  .tb-tag-add:hover{ border-color:#8a8f98 !important; color:#111 !important; }
  /* Кнопка «18+» — теперь такой же чип, как обычные теги (.tb-tag-chip),
     просто с фиксированным цветом. Включение требует подтверждения —
     см. #tb-adult-confirm ниже, тот же визуальный язык, что у
     #tb-invite-popup (центрированная плавающая карточка). */
  #tb-adult-confirm{
    display:none; position:fixed; z-index:82;
    left:50%; top:50%; transform:translate(-50%,-50%);
    max-width:300px; padding:18px 20px;
    background:#fff; border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.28);
    font-size:13px; line-height:1.5; color:#2c2c2e; text-align:left;
  }
  #tb-adult-confirm.show{ display:block; }
  #tb-adult-confirm .tbac-close{
    position:absolute; top:6px; right:8px; border:0; background:none;
    font-size:18px; line-height:1; color:#94a3b8; cursor:pointer; padding:4px;
  }
  #tb-adult-confirm .tbac-check{
    display:flex; align-items:flex-start; gap:8px; margin-top:12px;
    font-size:12.5px; color:#3a3a3e; cursor:pointer; user-select:none;
  }
  #tb-adult-confirm .tbac-check input{ margin:2px 0 0; cursor:pointer; flex:none; }
  #tb-adult-confirm .tbac-actions{ display:flex; gap:8px; margin-top:14px; }
  #tb-adult-confirm .tbac-actions button{
    flex:1; font:inherit; font-size:12.5px; padding:8px 10px;
    border-radius:8px; cursor:pointer; transition:background .12s, opacity .12s;
  }
  #tb-adult-confirm .tbac-cancel{ border:1px solid #e2e2e5; background:#fff; color:#5b6472; }
  #tb-adult-confirm .tbac-cancel:hover{ background:#f7f7f8; }
  #tb-adult-confirm .tbac-ok{
    border:1px solid #e07a7a; background:#e07a7a; color:#fff; font-weight:600;
  }
  #tb-adult-confirm .tbac-ok:disabled{
    opacity:.4; cursor:not-allowed;
  }
  #tb-adult-confirm .tbac-ok:not(:disabled):hover{ background:#d96868; }
  #tb-adult-backdrop{
    display:none; position:fixed; inset:0; z-index:81; background:rgba(0,0,0,.32);
  }
  #tb-adult-backdrop.show{ display:block; }
  body.ui-themed #tb-adult-confirm{ background:var(--ui-bg-t); color:var(--ui-fg); }
  #wiki-hover-card .whc-close, #wiki-hover-card .whc-drag{
    position:absolute; top:6px; width:22px; height:22px; z-index:1;
    border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
    font-size:13px; line-height:1; cursor:pointer; display:flex;
    align-items:center; justify-content:center; padding:0;
  }
  #wiki-hover-card .whc-close{ right:6px; font-size:15px; }
  #wiki-hover-card .whc-drag{ right:32px; cursor:grab; touch-action:none; }
  #wiki-hover-card .whc-drag:active{ cursor:grabbing; }
  #wiki-hover-card .whc-close:hover, #wiki-hover-card .whc-drag:hover{ background:rgba(0,0,0,.65); }
  #wiki-hover-card .whc-collapse{ position:absolute; top:6px; right:58px; width:22px; height:22px; z-index:1;
    border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
    font-size:12px; line-height:1; cursor:pointer; display:flex;
    align-items:center; justify-content:center; padding:0; }
  #wiki-hover-card .whc-collapse:hover{ background:rgba(0,0,0,.65); }
  /* Свёрнутое состояние — прячем содержимое и ручку ресайза, ширина/
     высота карточки снова определяются контентом (узкая полоска с
     заголовком), а не зафиксированным ранее размером — см. JS
     setCollapsed(), которая на время сворачивания снимает инлайновые
     width/height (иначе они, как более специфичные, перебили бы это
     правило). */
  #wiki-hover-card.whc-collapsed{ width:auto; height:auto; }
  #wiki-hover-card.whc-collapsed .whc-content,
  #wiki-hover-card.whc-collapsed .whc-resize{ display:none; }
  #wiki-hover-card .whc-collapsed-label{ display:none; }
  #wiki-hover-card.whc-collapsed .whc-collapsed-label{
    display:block; cursor:pointer; padding:9px 84px 9px 12px;
    font-size:12.5px; font-weight:600; color:#222;
    max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Ручка ресайза — правый нижний угол. Сама область побольше (18×18)
     для удобного попадания курсором/пальцем, видимый "хват" — только
     две коротких диагональных чёрточки в самом углу, как в стандартных
     resize-грипах ОС. Ограничения по размеру считает JS (whc-resize
     pointerdown/move ниже) — снизу текущий размер в момент захвата,
     сверху видимая область #map. */
  #wiki-hover-card .whc-resize{
    position:absolute; right:0; bottom:0; width:18px; height:18px;
    z-index:1; cursor:nwse-resize; touch-action:none;
  }
  #wiki-hover-card .whc-resize::before{
    content:''; position:absolute; right:4px; bottom:4px; width:9px; height:9px;
    background-image:
      linear-gradient(135deg, transparent 0 40%, rgba(0,0,0,.4) 40% 48%, transparent 48% 100%),
      linear-gradient(135deg, transparent 0 65%, rgba(0,0,0,.4) 65% 73%, transparent 73% 100%);
  }
  /* Второй угол ресайза — левый нижний (2026-08-23, по просьбе
     пользователя "растягивать за любой угол снизу") — тот же приём
     (зеркальный грип), что уже сделан для #profile-resize-left; правый
     край карточки при этом остаётся на месте (см. JS #whc-resize-left). */
  #wiki-hover-card .whc-resize-left{
    position:absolute; left:0; bottom:0; width:18px; height:18px;
    z-index:1; cursor:nesw-resize; touch-action:none;
  }
  #wiki-hover-card .whc-resize-left::before{
    content:''; position:absolute; left:4px; bottom:4px; width:9px; height:9px;
    background-image:
      linear-gradient(45deg, transparent 0 40%, rgba(0,0,0,.4) 40% 48%, transparent 48% 100%),
      linear-gradient(45deg, transparent 0 65%, rgba(0,0,0,.4) 65% 73%, transparent 73% 100%);
  }
  #wiki-hover-card.whc-collapsed .whc-resize-left{ display:none; }

  /* Карточка точки следует общей теме интерфейса (--ui-*, см.
     "Тема интерфейса — светлая/тёмная" в index.html, #mc-ui-theme) —
     раньше этого не было (единственная карточка в этом стиле, у которой
     не было body.ui-themed правил вовсе), по просьбе пользователя
     2026-08-21. body.ui-themed висит всегда (см. комментарий в
     index.html), поэтому карточка переключается сама при переключении
     #mc-ui-theme — отдельного JS-слушателя не нужно, только CSS. Значок
     ресайза (.whc-resize::before, rgba(0,0,0,.4)) в тёмном режиме
     невидим на тёмном фоне — отдельная белая версия штриховки ниже.
     .whc-note (фиолетовая плашка «кандидат») намеренно НЕ перекрашена —
     свой акцентный цвет, как у #profile-panel. */
  body.ui-themed #wiki-hover-card{ background:var(--ui-bg-t); color:var(--ui-fg); }
  body.ui-themed #wiki-hover-card .whc-extract{ color:var(--ui-mute); }
  body.ui-themed #wiki-hover-card .whc-loading{ color:var(--ui-mute); }
  body.ui-themed #wiki-hover-card .whc-resize::before{
    background-image:
      linear-gradient(135deg, transparent 0 40%, rgba(255,255,255,.45) 40% 48%, transparent 48% 100%),
      linear-gradient(135deg, transparent 0 65%, rgba(255,255,255,.45) 65% 73%, transparent 73% 100%);
  }
  body.ui-themed #wiki-hover-card .whc-resize-left::before{
    background-image:
      linear-gradient(45deg, transparent 0 40%, rgba(255,255,255,.45) 40% 48%, transparent 48% 100%),
      linear-gradient(45deg, transparent 0 65%, rgba(255,255,255,.45) 65% 73%, transparent 73% 100%);
  }
  /* Ссылка "Открыть в Wikipedia/Wikidata/ссылку →" — раньше без своего
     цвета вовсе (браузерный ярко-синий по умолчанию), плохо читалась на
     тёмном фоне карточки. В тёмном пресете (.ui-theme-dark, см. index.html)
     — голубая; в светлом сознательно НЕ трогаем (пользователь просил
     только тёмный). */
  body.ui-theme-dark #wiki-hover-card .whc-article-link{ color:#38bdf8; }

  .qth-help{
    width:20px;height:20px;border-radius:50%;border:1px solid #94a3b8;
    background:rgba(255,255,255,.7);color:#64748b;font-size:12px;font-weight:700;
    cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;
    transition:all .12s;
  }
  .qth-help:hover{background:#3b82f6;border-color:#3b82f6;color:#fff}
  body.ui-themed .qth-help{background:var(--ui-bg);border-color:var(--ui-line);color:var(--ui-fg)}

  #live-legend-overlay{
    position:fixed;inset:0;z-index:200;background:rgba(20,20,30,.5);
    display:none;align-items:center;justify-content:center;
  }
  #live-legend-overlay.open{display:flex}
  #live-legend{
    background:#fff;border-radius:14px;max-width:420px;width:90%;
    max-height:80vh;overflow-y:auto;padding:20px 22px;
    box-shadow:0 8px 30px rgba(0,0,0,.3);
  }
  body.ui-themed #live-legend{background:var(--ui-bg);color:var(--ui-fg)}
  #live-legend h3{margin:0 0 4px;font-size:16px}
  #live-legend .sl-sub{font-size:12px;color:#94a3b8;margin-bottom:14px}
  body.ui-themed #live-legend .sl-sub{color:var(--ui-mute)}
  #live-legend .sl-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.06)}
  body.ui-themed #live-legend .sl-row{border-bottom-color:var(--ui-line)}
  #live-legend .sl-icon{font-size:18px;width:24px;text-align:center;flex:none}
  #live-legend .sl-text b{display:block;font-size:13px}
  #live-legend .sl-text span{font-size:12px;color:#64748b}
  body.ui-themed #live-legend .sl-text span{color:var(--ui-mute)}
  #live-legend .sl-close{
    margin-top:14px;width:100%;padding:9px;border:0;border-radius:9px;
    background:#3b82f6;color:#fff;font-size:13px;font-weight:600;cursor:pointer;
  }

  #utc-clock{
    position:fixed; top:56px; left:50%; transform:translateX(-50%);
    z-index:60; background:rgba(20,20,30,.82); backdrop-filter:blur(8px);
    color:#e8f0ff; font-family:'Courier New',monospace; font-size:15px;
    font-weight:700; letter-spacing:1px; padding:6px 16px; border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.25); pointer-events:none;
  }
  body.ui-themed #utc-clock{background:var(--ui-bg-t);color:var(--ui-fg)}