@font-face {
      font-family: 'LianaC';
      src: url('https://hi-tech.ru/friday37/assets/fonts/LianaC-Regular.woff') format('woff');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --color-available: #10AF35;
      --color-reserved: #f59e0b;
      --color-reserved-dark: #d97706;
      --color-reserved-label: #92400e;
      --color-sold: #dc2626;
      --color-sold-dark: #b91c1c;
      --color-sold-label: #7f1d1d;
      --color-plaque-bg: #e4e1dc;
      --color-panel-bg: #e4e1dc;
      --color-panel-border: rgba(88,81,73,0.15);
      --color-accent: #2f2213;
      --color-accent-hover: #46311c;
      --color-text: #585149;
      --color-text-muted: #6b6259;
      --color-text-secondary: #8a8177;
      --color-text-dim: #9a9186;
      --color-text-light: #f0ece6;
      --color-panel-strong: #2f2213;
      --color-white: #fff;
      --color-overlay-dark: rgba(0,0,0,0.85);
      --color-overlay-mid: rgba(0,0,0,0.6);
      --color-overlay-light: rgba(88,81,73,0.08);
      --color-border: rgba(88,81,73,0.2);
      --color-tooltip-border: rgba(255,255,255,0.12);
      --color-panel-link: rgba(88,81,73,0.3);
      --color-panel-link-hover: #2f2213;
      --color-available-bg: rgba(16,175,53,0.2);
      --color-available-light: #4ade80;
      --color-reserved-bg: rgba(245,158,11,0.2);
      --color-reserved-light: #fbbf24;
      --color-sold-bg: rgba(220,38,38,0.2);
      --color-sold-bg-panel: rgba(220,38,38,0.12);
      --color-sold-border: rgba(220,38,38,0.3);
      --color-available-bg-panel: rgba(16,175,53,0.12);
      --color-available-border: rgba(16,175,53,0.3);
      --color-reserved-bg-panel: rgba(245,158,11,0.12);
      --color-reserved-border: rgba(245,158,11,0.3);
      --color-shadow: rgba(47,34,19,0.16);
      --color-border-strong: rgba(88,81,73,0.35);
      --color-chip-bg: rgba(88,81,73,0.06);
      --color-chip-bg-hover: rgba(88,81,73,0.11);
      --radius-sm: 2px;
      --radius-md: 4px;
      --radius-lg: 8px;
      --radius-xl: 12px;
      --space-xs: 4px;
      --space-sm: 6px;
      --space-md: 8px;
      --space-lg: 12px;
      --space-xl: 16px;
      --space-2xl: 20px;
      --space-3xl: 24px;
      --font-xs: 9px;
      --font-sm: 11px;
      --font-base: 12px;
      --font-md: 13px;
      --font-lg: 14px;
      --font-xl: 16px;
      --transition-fast: 0.15s;
      --transition: 0.2s;
      --panel-width: 340px;
      --z-overlay: 10;
      --z-panel: 200;
      --z-modal: 500;
      --z-tooltip: 999;
    }

    /* Tilda T123: обёртка 100% × 70vh */
    #parking-embed { width: 100%; height: 70vh; min-height: 400px; position: relative; overflow: visible; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { margin: 0; min-height: 100%; overflow-y: auto; }

    body {
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      display: flex;
      flex-direction: column;
    }

    /* Обёртка для Tilda T123: 100% × 100vh */
    #parking-embed {
      width: 100%;
      height: 100vh;
      min-height: 400px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: visible;
    }

    /* ── Stage ───────────────────────────────────────── */
    /* #plan-area — сам план + все его оверлеи (компас/лифт/миниатюра). Раньше
       svg-wrap и оверлеи были прямыми детьми .stage; сейчас разделены на случай,
       если рядом со планом когда-нибудь понадобится ещё одна колонка. */
    .stage {
      flex: 1;
      min-height: 0;
      padding: 0;
      overflow: visible;
      position: relative;
      transition: padding-right 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    #plan-area {
      flex: 1;
      min-width: 0;
      min-height: 0;
      position: relative;
      overflow: visible;
      display: flex;
      flex-direction: column;
    }
    /* Фото тауна — НЕ часть основного экрана плана, только маленькая кнопка
       (по стилю как компас/лифт), открывающая фото на весь экран по клику.
       Sunrise на всех этажах, Eclipse только на крыше (см. PHOTO_BUTTON в JS). */
    #unit-photo {
      display: none;
      position: absolute;
      /* Не bottom-left — там #unit-bottom-bar заходит на план отрицательным
         margin-top (см. #unit-bottom-bar), кнопка бы легла на "Тауны". Ставим
         под компасом (#north-arrow — top:24, высота ~36px с паддингом). */
      top: 92px;
      left: 24px;
      z-index: 10;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 4px 14px var(--color-shadow);
      opacity: 0;
      transition: opacity 0.35s ease, transform var(--transition-fast);
    }
    #unit-photo:hover { transform: scale(1.08); }
    #unit-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
    body.unit-photo-active #unit-photo { display: block; }
    body.unit-photo-active.unit-photo-visible #unit-photo { opacity: 1; }
    /* Лупа — маленький бейдж поверх иконки-кружка, подсказывает что это открывается */
    #unit-photo-zoom {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(26,26,26,0.35);
      color: #fff;
      border: none;
      cursor: pointer;
      opacity: 0;
      transition: opacity var(--transition-fast);
    }
    #unit-photo:hover #unit-photo-zoom { opacity: 1; }
    #unit-photo-zoom svg { width: 28px; height: 28px; }

    /* ── Полноэкранный просмотр фото тауна ──────────────── */
    #photo-lightbox {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      background: var(--color-overlay-dark);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 40px;
      cursor: zoom-out;
    }
    #photo-lightbox.show { display: flex; }
    #photo-lightbox-img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: var(--radius-lg);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      cursor: default;
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    #photo-lightbox.show #photo-lightbox-img { opacity: 1; transform: scale(1); }
    #photo-lightbox-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.1);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    #photo-lightbox-close:hover { background: rgba(255,255,255,0.2); }
    #photo-lightbox-close svg { width: 18px; height: 18px; }
    /* #to-section-row теперь видна и на разрезе дома (там показаны только
       крошки — легенда скрыта через #row-right), поэтому она сама резервирует
       место под #page-logo обычным потоком, доп. отступ не нужен. */

    /* Нижняя панель юнит-вида — обычный элемент потока страницы ПОД .stage
       (не оверлей поверх плана, как было раньше — упиралось в план на узких
       планировках). Тауны / кнопки / карточка тауна — на одной линии. */
    /* Кнопки таунов под разрезом дома — настоящие .panel-cta под каждым тауном. */
    #section-towns-bar {
      display: none;
      justify-content: center;
      gap: 150px;
      padding: 20px 24px;
      flex-wrap: wrap;
    }
    body.view-section #section-towns-bar { display: flex; }
    #section-towns-bar .panel-cta { margin: 0; }

    /* Легенда на разрезе дома — под кнопками таунов, по центру (см.
       initLegendMobileSlot: только на мобильном и только для view-section). */
    #section-legend-slot { display: flex; justify-content: center; padding: 0 16px; }
    #section-legend-slot:empty { display: none; }
    #section-legend-slot #corner-bl { align-items: center; }

    /* #floor-actions («Оставить заявку»/«Скачать PDF»/«Ко всем таунам») — только
       мобильная фиксированная панель снизу (см. медиа-запрос ниже), на десктопе скрыта. */
    #floor-actions { display: none; }

    /* Кнопки таунов под планом этажа («весь этаж», #floor-towns-bar) — скрыты
       на десктопе (там компас/легенда достаточно), показаны только на
       мобильном — 1в1 как #section-towns-bar на разрезе (см. медиа-запрос). */
    #floor-towns-bar { display: none; }
    #floor-towns-bar .panel-cta { margin: 0; }

    /* Grid, не flex+absolute: средняя колонка (кнопки) центрируется сама, за счёт
       симметричных 1fr по бокам — независимо от разной ширины тауна/карточки,
       и участвует в потоке (высота бара учитывает и её, ничего не проваливается). */
    #unit-bottom-bar {
      display: none;
      grid-template-columns: 1fr auto 1fr;
      align-items: end;
      gap: 16px;
      padding: 20px 24px;
      margin-top: -120px;
    }
    body.view-unit #unit-bottom-bar { display: grid; }
    /* Тауны/карточка тауна были оверлеями (#svg-wrap-relative), теперь обычные
       грид-элементы этой панели — абсолютное позиционирование не нужно. */
    #unit-bottom-bar #street-panel,
    #unit-bottom-bar #panel-peek {
      position: static;
      justify-self: start;
    }
    #unit-bottom-bar #panel-peek { justify-self: end; }
    /* Кнопки «Оставить заявку» / «Скачать .PDF» — те же классы, что и в боковой
       панели (.panel-cta/.panel-link-btn). */
    #unit-actions {
      display: flex;
      justify-self: center;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
    #unit-actions .panel-cta, #unit-actions .panel-link-btn { margin: 0; }
    @media (max-width: 640px) {
      /* gap:150px у #section-towns-bar рассчитан на широкий десктопный разрез
         (кнопки растянуты под своими домиками) — на мобильном блок переносится
         в колонку, и тот же зазор остаётся между строк, раздувая список кнопок. */
      #section-towns-bar { gap: 8px; padding: 12px 16px; flex-wrap: nowrap; }
      #section-towns-bar .panel-cta { padding: 8px 12px; font-size: var(--font-md); white-space: nowrap; }
      /* Кнопки таунов этажного вида — та же строка, 1в1 как у #section-towns-bar
         на разрезе (см. выше), под планом. Внутри #plan-area (см. HTML) — там
         уже есть padding:0 16px по бокам, поэтому свой горизонтальный паддинг
         не дублируем, только вертикальный отступ. */
      body.view-floor #floor-towns-bar {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 12px 0;
        flex-wrap: nowrap;
      }
      #floor-towns-bar .panel-cta { padding: 8px 12px; font-size: var(--font-md); white-space: nowrap; }
      /* На мобильном street-panel/panel-peek/unit-actions переезжают JS-ом
         (initLegendMobileSlot) в группу под планом — #unit-bottom-bar
         остаётся пустым, скрываем его вместо пустого отступа. Видимость
         unit-actions больше не завязана на родителя — гасим явно вне юнит-вида. */
      #unit-bottom-bar:empty { display: none; }
      body:not(.view-unit) #unit-actions { display: none; }
      /* Кнопки «Оставить заявку» / «Скачать .PDF» — в одну колонку на всю ширину */
      #unit-actions { flex-direction: column; width: 100%; }
      #unit-actions .panel-cta, #unit-actions .panel-link-btn {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
      }
      /* Кнопки этажного вида («Оставить заявку»/«Скачать PDF»/«Ко всем таунам») —
         фиксированная строка на всю ширину экрана снизу (не в узкой колонке
         под легендой), показывается только на этажном виде. Миниатюра этажей
         (#level-thumb-link, переносится сюда JS-ом — см. initLegendMobileSlot)
         встаёт справа от кнопок: grid из 2 колонок, кнопки — 3 строки в первой,
         миниатюра — растянута на все три строки во второй. Подложки (фона/тени)
         у самой панели нет — только у отдельных кнопок (их фон не трогаем). */
      #floor-actions {
        display: none;
        grid-template-columns: 1fr auto;
        grid-template-rows: repeat(3, auto);
        align-items: center;
        gap: 8px 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      }
      body.view-floor #floor-actions { display: grid; }
      #floor-actions .panel-cta, #floor-actions .panel-link-btn {
        grid-column: 1;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
      }
      #floor-actions #level-thumb-link {
        grid-column: 2;
        grid-row: 1 / -1;
        position: static;
        bottom: auto;
        left: auto;
        background: none;
        padding: 0;
      }
      /* Место под фиксированную панель кнопок — иначе легенда/миниатюра
         этажей упираются в неё вплотную или прячутся под ней. */
      body.view-floor #legend-mobile-slot { padding-bottom: 190px; }
    }

    /* Панель сдвигает весь сайт через body */
    body.parking-panel-open { padding-right: var(--panel-width); }
    @media (max-width: 640px) {
      body.parking-panel-open { padding-right: 0; overflow: hidden; }
    }

    /* ── Overlay plaque (shared: map-overlay, north-arrow) ── */
    .overlay-plaque {
      background: var(--color-plaque-bg);
      border-radius: var(--radius-lg);
      border: none;
      box-shadow: none;
      pointer-events: none;
    }
    #corner-bl {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    #map-overlay {
      padding: 9px 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-sm) var(--space-xl);
    }

    /* ── Legend ──────────────────────────────────────── */
    .legend {
      display: flex;
      gap: var(--space-lg);
      align-items: center;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: var(--font-sm);
      color: var(--color-text);
      white-space: nowrap;
    }
    .legend-dot {
      width: 9px;
      height: 9px;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
    }
    .legend-dot.available { background: var(--color-available); }
    .legend-dot.reserved  { background: var(--color-reserved); }
    .legend-dot.sold      { background: var(--color-sold); }

    /* ── Counter ─────────────────────────────────────── */
    #lot-counter {
      font-size: var(--font-sm);
      color: var(--color-text-muted);
      white-space: nowrap;
    }
    #lot-counter:empty { display: none; }
    #lot-counter b { color: var(--color-available); font-weight: 700; }

    /* ── Language switch — теперь обычный флекс-элемент внутри #row-right,
       в одной группе с легендой (не отдельный абсолютный оверлей). position:
       relative — чтобы выпадающее меню (.lang-switch-menu) якорилось на кнопку. */
    #lang-switch {
      position: relative;
      /* Явный z-index — чтобы гарантированно быть выше оверлеев плана
         (например #unit-photo в правом верхнем углу на мобильном), даже если
         тот получит свой z-index относительно того же контекста наложения. */
      z-index: 20;
    }
    .lang-switch-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--color-plaque-bg);
      border: none;
      border-radius: var(--radius-lg);
      padding: 9px 14px;
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      font-size: var(--font-sm);
      font-weight: 500;
      line-height: 1;
      color: var(--color-text);
      cursor: pointer;
      transition: background var(--transition-fast);
    }
    .lang-switch-btn:hover, .lang-switch.open .lang-switch-btn { background: color-mix(in srgb, var(--color-plaque-bg) 85%, black); }
    .lang-switch-btn svg { flex-shrink: 0; }
    .lang-switch-chevron { transition: transform var(--transition-fast); opacity: .7; }
    .lang-switch.open .lang-switch-chevron { transform: rotate(180deg); }
    .lang-switch-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 130px;
      background: var(--color-plaque-bg);
      border-radius: var(--radius-lg);
      box-shadow: 0 8px 24px var(--color-shadow);
      padding: 4px;
      z-index: var(--z-overlay);
    }
    .lang-switch.open .lang-switch-menu { display: block; }
    .lang-switch-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      border-radius: var(--radius-md);
      font-size: var(--font-base);
      color: var(--color-text);
      text-decoration: none;
      white-space: nowrap;
    }
    .lang-switch-item:hover { background: var(--color-chip-bg-hover); }
    .lang-switch-check { flex-shrink: 0; color: var(--color-accent); opacity: 0; }
    .lang-switch-item.active .lang-switch-check { opacity: 1; }

    /* ── SVG wrap ────────────────────────────────────── */
    #svg-wrap {
      background: var(--color-white);
      border-radius: 0;
      overflow: visible;
      position: relative;
      line-height: 0;
      cursor: grab;
      -webkit-user-select: none;
      user-select: none;
      /* Fill stage height, constrain by aspect ratio */
      flex: 1;
      min-height: 0;
      width: 100%;
    }
    #svg-wrap.grabbing { cursor: grabbing; }
    #svg-inner { transform-origin: 0 0; width: 100%; height: 100%; }
    #svg-wrap > svg,
    #svg-inner > svg {
      display: block;
      width: 100% !important;
      height: 100% !important;
    }

    /* ── SVG: lot, zone (перенесено из SVG) ─────────────────── */
    #svg-wrap .lot, #svg-wrap .zone { cursor: pointer; }
    #svg-wrap .lot .lotShape, #svg-wrap .zone .zoneShape {
      transition: fill-opacity 0.18s ease;
      pointer-events: all;
      fill-opacity: 0 !important; /* без наведения — вообще без заливки, план виден чисто */
      stroke: none !important; /* без обводки в любом состоянии */
    }
    #svg-wrap .lot:hover .lotShape, #svg-wrap .lot.hovered .lotShape { fill-opacity: 0.35 !important; }
    #svg-wrap .lot.selected .lotShape { fill-opacity: 0.35 !important; }
    #svg-wrap .lotLabel, #svg-wrap .zoneLabel {
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
      user-select: none;
      paint-order: stroke fill;
      stroke: white;
      stroke-linejoin: round;
    }
    #svg-wrap .lotLabel { stroke-width: 1; }
    #svg-wrap .lotLabel tspan:first-child { fill: #333; }
    #svg-wrap .lotLabel tspan:last-child  { fill: #777; }
    #svg-wrap .zone .zoneShape { fill: #D9D9D9; }
    #svg-wrap .zone:hover .zoneShape { fill-opacity: 0.5; }
    #svg-wrap .zoneLabel { fill: #555; stroke-width: 1.5; }
    /* Заливка комнат (.room/.roomShape) — показывается постоянно (цвет комнаты из дизайна),
       на наведении чуть усиливается для интерактивной обратной связи */
    #svg-wrap .room .roomShape {
      transition: fill-opacity 0.18s ease;
      pointer-events: all;
      fill-opacity: 1 !important;
    }
    #svg-wrap .room:hover .roomShape { fill-opacity: 0.6 !important; }
    /* Красные fill="#FF0000" зоны — служебные метки границ таунов/этажей (не для клиента),
       по умолчанию невидимы, чуть темнее при наведении */
    #svg-wrap path[fill="#FF0000"] {
      transition: fill-opacity 0.18s ease;
      pointer-events: all;
      fill-opacity: 0 !important;
    }
    #svg-wrap path[fill="#FF0000"]:hover { fill-opacity: 0.18 !important; }
    /* Страховка: в паре мест дизайнер забыл занести кусочек заливки комнаты в id-группу
       (остаётся "голым" path без class="roomShape"). Бьём по трём акцентным цветам заливки
       комнат напрямую — та же постоянная раскраска, что и через .room .roomShape. */
    #svg-wrap path[fill="#FDD9C6"],
    #svg-wrap path[fill="#FEECE2"],
    #svg-wrap path[fill="#FFF7F2"] {
      fill-opacity: 1 !important;
    }
    /* Тауны на разрезе (#eclipse/#sunrise/#sunset) в house-section.svg лежат с
       opacity="0.5" прямо в атрибуте — без этого правила между вставкой SVG и
       тем, как JS проставит inline-стиль opacity:0, на кадр мелькает их синяя
       заливка (особенно заметно при переключении 3D→2D). CSS-атрибут всегда
       проигрывает любому правилу стиля (даже без !important), а инлайн-стиль
       из JS на ховере (opacity 0.28) всё равно перебьёт это правило. */
    #svg-wrap path#eclipse, #svg-wrap path#sunrise, #svg-wrap path#sunset { opacity: 0; }
    /* Две строки подписи: middle раздувает визуальный интервал между <text> */
    #svg-wrap #carlift .zoneLabel { dominant-baseline: alphabetic; }
    #svg-wrap path, #svg-wrap circle, #svg-wrap rect, #svg-wrap line, #svg-wrap polyline, #svg-wrap ellipse { pointer-events: none; }

    /* ── 2D/3D switch (разрез дома) — таб-переключатель справа от хлебных
       крошек, в потоке #row-left. Виден только в view-section. ── */
    #view-mode-switch {
      display: none;
      gap: 4px;
      padding: 4px;
      background: var(--color-chip-bg);
      border-radius: var(--radius-md);
    }
    body.view-section #view-mode-switch { display: flex; }
    .view-mode-btn {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--color-text-secondary);
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.02em;
      padding: 6px 14px;
      border-radius: calc(var(--radius-md) - 4px);
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease;
    }
    .view-mode-btn:hover { color: var(--color-text); }
    .view-mode-btn.active {
      color: var(--color-white);
      font-weight: 700;
      background: var(--color-accent);
    }
    .view-mode-btn.active:hover { background: var(--color-accent-hover); }
    .view-mode-btn:active { transform: scale(0.97); }
    /* Только на десктопе — плавающая слева от экрана, вертикальным столбиком,
       как было раньше (до переноса в строку крошек). Активная кнопка —
       var(--color-accent), тот самый тёмно-коричневый (#2f2213). На мобильном
       не трогаем — остаётся в шапке рядом с крошками. */
    @media (min-width: 641px) {
      #view-mode-switch {
        position: fixed;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        z-index: var(--z-overlay);
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 6px;
        /* Вся капсула — сплошной тёмно-коричневый, не подложка var(--color-chip-bg) */
        background: var(--color-accent);
        border-radius: 999px;
      }
      /* Кнопки — просто белый текст на общем коричневом фоне капсулы, без
         своего фона; активная выделяется кольцом-обводкой вокруг круга. */
      #view-mode-switch .view-mode-btn {
        width: 60px;
        height: 60px;
        padding: 0;
        border-radius: 50%;
        color: var(--color-white);
        background: transparent;
        border: 2px solid transparent;
        font-size: 15px;
      }
      #view-mode-switch .view-mode-btn:hover { color: var(--color-white); background: rgba(255,255,255,.08); }
      #view-mode-switch .view-mode-btn.active {
        background: transparent;
        border-color: rgba(255,255,255,.5);
      }
      #view-mode-switch .view-mode-btn.active:hover { background: rgba(255,255,255,.08); }
    }

    /* ── Разрез в режиме 3D — уличная изометрия (street.svg) внутри #svg-wrap ── */
    #svg-wrap .street-house { cursor: pointer; }
    #svg-wrap .street-house .house-fill {
      fill-opacity: 0.55;
      transition: fill-opacity 0.2s ease;
      pointer-events: all;
    }
    #svg-wrap .street-house:hover .house-fill { fill-opacity: 1; }

    /* ── Room labels (название + метраж), рисуются JS-ом ─────── */
    #svg-wrap .roomLabel {
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      pointer-events: none;
      user-select: none;
    }
    #svg-wrap .roomLabel tspan:first-child { fill: #333; }
    #svg-wrap .roomLabel tspan:last-child  { fill: #777; }
    /* Подписи комнат видны только когда открыт конкретный таун (view-unit) */
    body:not(.view-unit) .roomLabel { display: none; }
    /* На разрезе дома (view-section) — только сам SVG, никаких оверлеев этажа.
       #to-section-row (крошки + легенда) теперь показана как на этаже/тауне. */
    body.view-section #north-arrow,
    body.view-section #level-thumb-link,
    body.view-section #elevator-panel { display: none; }
    body.view-section #svg-wrap { cursor: default; background: transparent; }

    /* Паркинг (-1) — подземный уровень, компас там не нужен (см. floor-parking, JS) */
    body.floor-parking #north-arrow { display: none; }
    /* Этажный вид («весь этаж») на десктопе — компас тоже не нужен (мобильный
       и так его прячет отдельным правилом, см. медиа-запрос ниже). */
    body.view-floor #north-arrow { display: none; }

    /* ── Заглушка страницы тауна (пока нет своего SVG/дизайна) ── */
    body.unit-stub #north-arrow,
    body.unit-stub #corner-bl,
    body.unit-stub #elevator-panel { display: none; }
    .unit-placeholder {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
      line-height: normal;
    }
    .unit-placeholder-title { font-size: 28px; font-weight: 700; color: var(--color-text); }
    .unit-placeholder-text { font-size: var(--font-base); color: var(--color-text-dim); }
    .unit-placeholder-back { color: var(--color-accent); text-decoration: none; font-size: var(--font-sm); }
    .unit-placeholder-back:hover { text-decoration: underline; }

    /* ── Unit switcher (переключатель тауна в панели, только в view-unit) ── */
    .panel-units { display: flex; gap: 6px; margin: 0 var(--space-2xl) var(--space-lg); }
    .panel-unit-btn {
      flex: 1; text-align: center; padding: 7px 0; font-size: var(--font-base);
      border: none; border-radius: var(--radius-md);
      background: var(--color-chip-bg);
      color: var(--color-text-muted); text-decoration: none; cursor: pointer;
      transition: color var(--transition), background var(--transition);
    }
    .panel-unit-btn:hover { background: var(--color-chip-bg-hover); color: var(--color-text); }
    .panel-unit-btn.current { background: var(--color-accent); color: var(--color-white); font-weight: 700; }

    /* Логотип — по центру строки с крошками. Абсолютное позиционирование
       (не в потоке #to-section-row) специально: остаётся видимым и на разрезе дома,
       где #to-section-row скрыта целиком (там своей строки крошек/легенды нет). */
    /* Сброс глобальных стилей Tilda для ссылок (см. коммент у #side-panel a.panel-cta) —
       без него <a> вокруг логотипа получает рамку/фон от сайтовых стилей. */
    #page-logo,
    #page-logo:link,
    #page-logo:visited,
    #page-logo:hover {
      position: absolute;
      top: 12px !important;
      left: 50%;
      transform: translateX(-50%);
      z-index: var(--z-overlay);
      height: 44px;
      display: block;
      border: none;
      background: none;
      box-shadow: none;
      outline: none;
      padding: 0;
    }
    #page-logo img { height: 100%; width: auto; display: block; }
    @media (max-width: 900px) {
      #page-logo { height: 30px; }
    }

    /* Меню + крошки — общая группа слева, чтобы justify-content:space-between
       у #to-section-row разводил именно её и легенду, а не все три элемента
       по отдельности (иначе крошки уезжают к центру). */
    #row-left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;
    }

    /* Хлебные крошки + легенда — отдельной строкой над планом, в потоке страницы */
    #to-section-row {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      line-height: 1;
      padding: 12px 24px 32px 24px;
    }
    #row-right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    #breadcrumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 14px;
      line-height: 1;
      /* Логотип абсолютно спозиционирован по центру страницы — крошки не должны
         заезжать под него на длинных цепочках (Главная/Разрез/Таун/Этаж),
         поэтому ограничиваем ширину от вьюпорта (а не от %, т.к. теперь это
         вложенный флекс-элемент #row-left без явной ширины) и переносим
         лишнее на вторую строку. */
      max-width: calc(50vw - 90px);
    }
    #breadcrumbs a {
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color var(--transition);
    }
    #breadcrumbs a:hover { color: var(--color-accent); }

    /* Кнопка бургер-меню слева от крошек — открытие самого меню штатное, сайтовое. */
    #menu-open-btn,
    #menu-open-btn:link,
    #menu-open-btn:visited,
    #menu-open-btn:hover {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      border: none;
      background: none;
      box-shadow: none;
      outline: none;
      padding: 0;
      color: var(--color-text);
      cursor: pointer;
      transition: color var(--transition);
    }
    #menu-open-btn:hover { color: var(--color-accent); }
    #menu-open-btn svg { width: 20px; height: 20px; }
    #breadcrumbs .crumb-sep { color: var(--color-text-muted); opacity: 0.6; }
    #breadcrumbs .crumb-current { color: var(--color-text); font-weight: 600; }

    /* ── Fade-in animation ───────────────────────────── */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-in { opacity: 0; animation: fadeInUp 0.4s ease forwards; }

    /* ── Слайд плана вверх/вниз при переключении этажа лифтом (см. rideTo) ── */
    @keyframes planExitUp   { to { opacity: 0; transform: translateY(-48px); } }
    @keyframes planExitDown { to { opacity: 0; transform: translateY(48px); } }
    #svg-wrap.plan-exit-up   { animation: planExitUp   0.38s cubic-bezier(.4,0,1,1) forwards; }
    #svg-wrap.plan-exit-down { animation: planExitDown 0.38s cubic-bezier(.4,0,1,1) forwards; }
    @keyframes planEnterFromBottom { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes planEnterFromTop    { from { opacity: 0; transform: translateY(-48px); } to { opacity: 1; transform: translateY(0); } }
    .plan-enter-up   { opacity: 0; animation: planEnterFromBottom 0.45s cubic-bezier(.2,.8,.2,1) forwards; }
    .plan-enter-down { opacity: 0; animation: planEnterFromTop    0.45s cubic-bezier(.2,.8,.2,1) forwards; }

    /* ── Слайд плана влево/вправо при переключении тауна стрелками (см. keydown ArrowLeft/ArrowRight) ── */
    @keyframes planExitLeft  { to { opacity: 0; transform: translateX(-48px); } }
    @keyframes planExitRight { to { opacity: 0; transform: translateX(48px); } }
    #svg-wrap.plan-exit-left  { animation: planExitLeft  0.38s cubic-bezier(.4,0,1,1) forwards; }
    #svg-wrap.plan-exit-right { animation: planExitRight 0.38s cubic-bezier(.4,0,1,1) forwards; }
    @keyframes planEnterFromRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes planEnterFromLeft  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } }
    .plan-enter-left  { opacity: 0; animation: planEnterFromRight 0.45s cubic-bezier(.2,.8,.2,1) forwards; }
    .plan-enter-right { opacity: 0; animation: planEnterFromLeft  0.45s cubic-bezier(.2,.8,.2,1) forwards; }

    /* ── «Сборка этажа» из соседних таунов — клик по крошке «Этаж N» из вида тауна.
       Центральный план (текущий таун) не меняет размер вообще — соседи "выдвигаются"
       из-под него в реальном масштабе плана (тот же, в каком таун показан сейчас),
       поэтому высоты у всех разные (как в жизни) и планировки примыкают друг к другу
       без внутренних полей. Только после этого происходит настоящий переход на
       /plan/floor-N (см. tryAssembleToFloor). */
    #floor-assemble {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 3;
    }
    .assemble-slot { flex: 0 0 auto; position: relative; overflow: hidden; transition: width 0.62s cubic-bezier(.4,0,.2,1), margin-bottom 0.62s cubic-bezier(.4,0,.2,1); }
    .assemble-side { width: 0; }
    .assemble-center > #svg-inner { display: block; width: 100% !important; height: 100% !important; }

    /* Толщина обводки у текстовых подписей (белый контур для читаемости) — фигур это не касается, у них stroke:none */
    .lot .lotLabel { stroke-width: 1 !important; }
    .lot:hover .lotLabel, .lot.hovered .lotLabel { stroke-width: 1 !important; }

    /* ── Status colors (override SVG fill attrs) — только заливка при ховере/selected, без обводки ── */
    #svg-wrap .lot[data-status="available"] .lotShape { fill: var(--color-available); }
    #svg-wrap .lot[data-status="reserved"] .lotShape { fill: var(--color-reserved); }
    #svg-wrap .lot[data-status="sold"] .lotShape { fill: var(--color-sold); }
    #svg-wrap .lot[data-status="sold"] { cursor: default; }

    /* ── Tooltip ─────────────────────────────────────── */
    #tooltip {
      position: fixed;
      background: #1a1a1a;
      color: var(--color-text-light);
      font-size: var(--font-base);
      padding: 10px 14px;
      border-radius: var(--radius-lg);
      pointer-events: none;
      opacity: 0;
      transition: opacity var(--transition-fast);
      border: none;
      box-shadow: none;
      z-index: var(--z-tooltip);
      min-width: 200px;
    }
    #tooltip .tip-title { color: var(--color-text-light); }
    #tooltip .tip-row { color: var(--color-text-dim); }
    #tooltip .tip-row b { color: var(--color-text-light); }
    #tooltip .tip-loading,
    #tooltip .tip-zone-desc { color: var(--color-text-dim) !important; }
    #tooltip .tip-feature { color: var(--color-text-dim); }
    #tooltip .tip-features { border-top: 1px solid var(--color-tooltip-border); }
    #tooltip.show { opacity: 1; }
    @media (hover: none) { #tooltip { display: none !important; visibility: hidden !important; } }

    /* ── Фото-тултип на разрезе дома (наведение на кровлю/средний этаж/фон) ── */
    #photo-tooltip {
      position: fixed;
      display: flex;
      align-items: flex-end;
      gap: 6px;
      pointer-events: none;
      opacity: 0;
      transition: opacity var(--transition-fast), left 0.18s ease, top 0.18s ease;
      z-index: var(--z-tooltip);
    }
    #photo-tooltip.show { opacity: 1; }
    /* Высота фиксирована, ширина по пропорциям — иначе панорамное фото кровли
       (широкое и низкое) рядом с портретным выглядит "сплющенным" при общей
       ширине, хотя это просто разное соотношение сторон исходников. */
    #photo-tooltip img {
      display: block;
      height: 150px;
      width: auto;
      border-radius: var(--radius-lg);
      box-shadow: 0 8px 24px var(--color-shadow);
    }
    @media (hover: none) { #photo-tooltip { display: none !important; visibility: hidden !important; } }

    .tip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 4px;
    }
    .tip-title { font-weight: 700; font-size: var(--font-md); color: var(--color-accent); }
    .tip-badge {
      font-size: 10px;
      padding: var(--space-xs) var(--space-sm);
      border-radius: 3px;
      font-weight: 600;
      white-space: nowrap;
      flex-shrink: 0;
      border: 1px solid transparent;
    }
    .tip-badge.available { background: var(--color-available-bg-panel); color: var(--color-available); border-color: var(--color-available-border); }
    .tip-badge.reserved  { background: var(--color-reserved-bg-panel); color: var(--color-reserved-dark); border-color: var(--color-reserved-border); }
    .tip-badge.sold      { background: var(--color-sold-bg-panel); color: var(--color-sold); border-color: var(--color-sold-border); }

    .tip-row {
      display: flex;
      justify-content: space-between;
      gap: var(--space-lg);
      font-size: var(--font-base);
      color: var(--color-text-muted);
      margin-top: 2px;
    }
    .tip-loading { color: var(--color-text-muted) !important; font-style: italic; }
    .tip-zone-desc { color: var(--color-text-secondary) !important; font-style: italic; white-space: normal; max-width: 210px; }
    .tip-row b { color: var(--color-text); }
    .tip-desc { line-height: 1.25 !important; }

    .tip-features {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 10px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--color-tooltip-border);
    }
    .tip-feature {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--color-text-secondary);
      white-space: nowrap;
    }
    .tip-feature svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; opacity: .85; }


    /* ── Side panel ──────────────────────────────────── */
    #side-panel {
      position: fixed;
      right: 0; top: 0; bottom: 0;
      width: var(--panel-width);
      background: #1a1a1a;
      border-left: none;
      box-shadow: none;
      transform: translateX(100%);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 200;
      display: flex;
      flex-direction: column;
      contain: layout paint;
      --color-text: var(--color-text-light);
      --color-text-muted: var(--color-text-dim);
      --color-text-secondary: var(--color-text-dim);
      --color-panel-strong: var(--color-text-light);
      --color-panel-border: rgba(255,255,255,0.12);
      --color-chip-bg: rgba(255,255,255,0.08);
      --color-chip-bg-hover: rgba(255,255,255,0.14);
      --color-accent: #caa26b;
      --color-accent-hover: #b98d52;
    }
    #side-panel.open { transform: translateX(0); }

    .panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px 20px 0;
      gap: 10px;
    }
    .panel-title { font-size: var(--font-xl); font-weight: 700; color: var(--color-text); line-height: 1.3; }
    .panel-title-brand { font-family: 'LianaC', 'Inter', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 34px; }
    .panel-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-top: -2px; }
    .panel-icon-btn {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      border-radius: var(--radius-md);
      color: var(--color-text-muted);
      cursor: pointer;
      padding: 0;
      transition: background var(--transition), color var(--transition);
    }
    .panel-icon-btn:hover { background: var(--color-chip-bg); color: var(--color-accent); }
    .panel-icon-btn svg { width: 16px; height: 16px; }
    .panel-close-btn {
      background: none;
      border: none;
      color: var(--color-text-muted);
      cursor: pointer;
      padding: 0;
      line-height: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .panel-close-btn:hover { color: var(--color-accent); }
    .panel-close-btn svg { width: 20px; height: 20px; }

    .panel-bottom { margin-top: auto; display: flex; flex-direction: column; }
    .panel-nav-row { display: flex; flex-direction: row; gap: 6px; margin: 0 var(--space-2xl) var(--space-lg); }
    .panel-nav-row .panel-link-btn { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── Мини-план этажа целиком (в панели тауна) — весь floor-N.svg с подсветкой
       активного тауна; вся карточка целиком — ссылка на вид «весь этаж». ── */
    .panel-floorplan-wrap {
      display: block;
      margin: var(--space-xl) var(--space-2xl) var(--space-lg);
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: var(--space-lg);
      cursor: pointer;
      overflow: hidden;
      text-decoration: none;
    }
    #panel-floorplan { width: 100%; line-height: 0; pointer-events: none; }
    #panel-floorplan svg { display: block; width: 100%; height: auto; transition: transform 0.15s ease; }
    .panel-floorplan-wrap:hover #panel-floorplan svg { transform: scale(1.04); }
    #panel-floorplan path[fill="#FF0000"] { fill-opacity: 0; }
    #panel-floorplan .panel-floorplan-current {
      opacity: 1 !important; /* исходная зона несёт inline opacity="0.5" — иначе гасит и заливку, и обводку */
      fill: #caa26b !important;
      fill-opacity: 0.4 !important;
      stroke: #2f2213 !important;
      stroke-width: 5 !important;
      stroke-linejoin: round !important;
      cursor: default;
    }

    .panel-badge {
      display: inline-block;
      margin-top: 8px;
      font-size: 11px;
      padding: 3px 9px;
      border-radius: 4px;
      font-weight: 600;
    }
    .panel-badge.available { background: var(--color-available-bg-panel);   color: var(--color-available);  border: 1px solid var(--color-available-border); }
    .panel-badge.reserved  { background: var(--color-reserved-bg-panel);  color: var(--color-reserved);  border: 1px solid var(--color-reserved-border); }
    .panel-badge.sold      { background: var(--color-sold-bg-panel); color: var(--color-sold);  border: 1px solid var(--color-sold-border); }

    .panel-divider { border: none; border-top: 1px solid var(--color-panel-border); margin: var(--space-xl) 0 0; }

    /* Базовый класс кнопок панели (Tilda tn-atom style) */
    .btn-panel, .panel-cta, .panel-link-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-md) var(--space-xl);
      min-height: 33px;
      background: transparent;
      color: var(--color-text);
      border-radius: var(--radius-md);
      font-weight: 400;
      text-transform: none;
      transition: border-color var(--transition), color var(--transition), background var(--transition);
    }

    .panel-info {
      padding: 14px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .panel-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--font-md);
      color: var(--color-text-secondary);
    }
    .panel-row b { color: var(--color-panel-strong); font-weight: 600; font-size: var(--font-lg); }

    .panel-cta {
      margin: 0 var(--space-2xl) var(--space-sm);
      font-size: var(--font-lg);
      text-decoration: none;
      background: var(--color-accent);
      border: 1px solid var(--color-accent);
    }
    /* Перебить глобальные стили Tilda для ссылок (a, a:link) — .panel-cta везде
       белый текст, где бы её ни использовали (боковая панель, кнопки под планом,
       кнопки таунов на разрезе), поэтому правило одно, без привязки к контейнеру. */
    a.panel-cta,
    a.panel-cta:link,
    a.panel-cta:visited,
    a.panel-cta:hover { color: var(--color-white) !important; }
    .panel-cta:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); }

    .panel-link-btn {
      margin: 0 var(--space-2xl) var(--space-lg);
      border: none;
      background: var(--color-chip-bg);
      font-size: var(--font-lg);
      text-decoration: none;
      cursor: pointer;
    }
    .panel-link-btn:hover { background: var(--color-chip-bg-hover); color: var(--color-accent); }
    .panel-link-btn[data-status="reserved"]:hover { color: var(--color-reserved); }

    /* ── Floor switcher (переключатель этажей тауна в панели) ── */
    .panel-floors {
      display: flex;
      gap: 6px;
      margin: 0 var(--space-2xl) var(--space-lg);
    }
    .panel-floor-btn {
      flex: 1;
      text-align: center;
      padding: 7px 0;
      font-size: var(--font-base);
      border: none;
      border-radius: var(--radius-md);
      background: var(--color-chip-bg);
      color: var(--color-text-muted);
      text-decoration: none;
      transition: color var(--transition), background var(--transition);
    }
    .panel-floor-btn:hover { background: var(--color-chip-bg-hover); color: var(--color-text); }
    .panel-floor-btn.current { background: var(--color-accent); color: var(--color-white); font-weight: 700; }

    /* ── North arrow (extends .overlay-plaque, но без подложки — просто иконка) ── */
    #north-arrow {
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: var(--z-overlay);
      padding: var(--space-sm) 10px;
      background: none;
    }
    #north-arrow .compass-ring { stroke: var(--color-text-muted); opacity: .5; }
    #north-arrow .compass-needle-n { fill: var(--color-accent); }
    #north-arrow .compass-needle-s { fill: var(--color-text-muted); opacity: .5; }

    /* ── House thumbnail (bottom-left) — миниатюра дома на подложке ── */
    #level-thumb-link {
      display: none; /* включается JS-ом, когда есть свой thumbnail для уровня */
      position: absolute;
      bottom: 24px;
      left: 24px;
      z-index: 10;
      pointer-events: auto;
      padding: 14px;
      text-decoration: none;
    }
    #level-thumb {
      display: block;
      width: 139px;
      height: auto;
    }
    .level-thumb-label {
      display: block;
      margin-bottom: 6px;
      font-size: var(--font-sm);
      font-family: 'Inter', Arial, sans-serif;
      color: var(--color-text-muted);
      letter-spacing: 0.05em;
      text-align: center;
      text-transform: uppercase;
    }
    /* Инлайн-план этажа (используется на заглушке тауна вместо силуэта дома —
       грузится как разметка, а не <img>, чтобы можно было скрыть служебные
       красные хиткласты стилями, как на самом плане) */
    #level-thumb-svg { display: none; width: 139px; line-height: 0; }
    #level-thumb-svg svg { display: block; width: 100%; height: auto; }
    #level-thumb-svg path[fill="#FF0000"] { display: none; }

    /* ── Elevator floor switcher (right edge, vertically centered) ── */
    #elevator-panel {
      display: none;
      position: absolute;
      top: 50%;
      right: 24px;
      transform: translateY(-50%);
      z-index: 10;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px;
      pointer-events: auto;
      /* Скрыта прозрачностью, пока JS не выставит окончательную left/right (см.
         positionElevatorPanel) — иначе между display:flex (дефолтная позиция у
         края экрана) и вычисленной позицией у края плана виден мгновенный прыжок.
         transition на left/right — чтобы при открытии/закрытии правой панели
         (см. openPanel/closePanel) лифт плавно ехал на новое место в такт
         слайду #side-panel (та же длительность/easing), а не прыгал. */
      opacity: 0;
      transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #elevator-panel.positioned { opacity: 1; }
    .elevator-chevron {
      width: 34px;
      height: 20px;
      background: transparent;
      border: none;
      color: var(--color-text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }
    .elevator-chevron:hover:not(:disabled) { color: var(--color-accent); background: var(--color-chip-bg-hover); border-radius: var(--radius-md); }
    .elevator-chevron:disabled { opacity: 0.25; cursor: default; }
    .elevator-chevron svg { width: 16px; height: 16px; pointer-events: none; }
    .elevator-divider { width: 20px; height: 1px; background: var(--color-border); margin: 3px 0; }
    #elevator-track {
      position: relative;
      width: 34px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    #elevator-cab {
      position: absolute;
      top: 0;
      left: 0;
      width: 34px;
      height: 30px;
      border-radius: var(--radius-md);
      background: var(--color-accent);
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 0;
      pointer-events: none;
    }
    .elevator-btn {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 30px;
      border: none;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--color-text-muted);
      font-size: var(--font-sm);
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .elevator-btn:hover { color: var(--color-text); background: var(--color-chip-bg-hover); }
    .elevator-btn.current { color: var(--color-white); }
    .elevator-btn.current:hover { background: none; }

    /* ── Panel peek chip — панель с ценой больше не открывается сама на
       каждой навигации внутри тауна (это раздражало при листании этажей).
       Вместо этого — маленький чип поверх плана, открывающий панель по клику. */
    #panel-peek {
      display: none;
      position: absolute;
      bottom: 24px;
      right: 24px;
      z-index: 10;
      padding: 10px 10px 10px 16px;
      cursor: pointer;
      pointer-events: auto;
      align-items: center;
      gap: 10px;
      font-size: var(--font-md);
      color: var(--color-text);
      transition: background var(--transition);
    }
    #panel-peek:hover { background: color-mix(in srgb, var(--color-plaque-bg) 80%, black); }
    .peek-info { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
    #panel-peek b { color: var(--color-panel-strong); font-weight: 600; }
    .peek-caption { font-size: var(--font-sm); color: var(--color-text-secondary); }
    #panel-peek svg {
      width: 28px;
      height: 28px;
      flex: none;
      padding: 6px;
      border-radius: 50%;
      background: var(--color-panel-strong);
      color: var(--color-white);
      box-sizing: border-box;
    }
    body.view-unit #panel-peek { display: flex; }
    body.parking-panel-open #panel-peek,
    body.unit-stub #panel-peek { display: none; }
    @media (max-width: 640px) {
      #panel-peek { right: 12px; bottom: 12px; }
    }

    /* ── Street town switcher (bottom-left, вместо силуэта-миниатюры дома) —
       3D-изометрия участка, дома одного оттенка полупрозрачные, при наведении
       непрозрачные + всплывает подпись тауна. Клик по дому — переход. ── */
    #street-panel {
      display: none;
      position: absolute;
      bottom: 24px;
      left: 24px;
      z-index: 10;
      padding: 0;
      pointer-events: auto;
      background: none;
      border: none;
      box-shadow: none;
    }
    #street-svg { width: 150px; height: auto; display: block; overflow: visible; }
    .street-house { cursor: pointer; }
    .street-house .house-fill {
      fill: #F6D09B;
      fill-opacity: 0.4;
      transition: fill-opacity 0.2s ease;
    }
    .street-house:hover .house-fill,
    .street-house.current .house-fill { fill-opacity: 1; }
    .house-stroke { pointer-events: none; }
    .street-house-label {
      opacity: 0;
      font-family: 'Inter', Arial, Helvetica, sans-serif;
      font-size: 220px;
      font-weight: 700;
      fill: var(--color-text);
      text-anchor: middle;
      paint-order: stroke fill;
      stroke: var(--color-plaque-bg);
      stroke-width: 40;
      pointer-events: none;
      transition: opacity 0.15s ease;
    }
    .street-house:hover .street-house-label { opacity: 1; }

    /* ── Skeleton-загрузка (вместо полноэкранного #error-overlay с текстом
       ошибки и кнопкой «Повторить» — раздражал при обычной загрузке по
       медленной сети). Общий мерцающий градиент — переиспользуется на плане
       (#svg-wrap, пока идёт fetchSvgInto), карточке тауна (#panel-peek, пока
       пустая — до renderPanelPeek) и кружке с фото (#unit-photo, пока не
       загрузилась картинка — фон виден сквозь ещё прозрачный <img>). ── */
    #svg-wrap.plan-loading,
    #panel-peek:empty,
    #unit-photo.photo-loading,
    .skeleton-bar {
      background: linear-gradient(100deg,
        var(--color-plaque-bg) 30%,
        color-mix(in srgb, var(--color-plaque-bg) 55%, white) 50%,
        var(--color-plaque-bg) 70%);
      background-size: 200% 100%;
      animation: planSkeletonShimmer 1.4s ease-in-out infinite;
    }
    #svg-wrap.plan-loading { min-height: 280px; border-radius: 12px; }
    #panel-peek:empty { min-height: 64px; min-width: 180px; }
    /* Скелетон-строки в панели, пока данные (площадь/цена) ещё не загрузились —
       те же пропорции, что у реальных .panel-row (подпись слева, значение справа). */
    .panel-row-skeleton { justify-content: flex-start; gap: 10px; }
    .panel-row-skeleton .skeleton-bar { height: 14px; border-radius: 4px; }
    .panel-row-skeleton .skeleton-bar:first-child { width: 70px; }
    .panel-row-skeleton .skeleton-bar:last-child { width: 50px; margin-left: auto; }
    @keyframes planSkeletonShimmer {
      0%   { background-position: 150% 0; }
      100% { background-position: -50% 0; }
    }

    /* ── Panel: плавнее анимация ──────────────────────── */
    #side-panel { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); contain: layout style; }
    /* Лёгкая анимация (opacity вместо filter — меньше нагрузка на рендер) */
    .lot.selected .lotShape { animation: lotPulse 0.25s ease; }
    @keyframes lotPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.85; }
    }

    /* ── Mobile ──────────────────────────────────────── */
    @media (max-width: 640px) {
      #parking-embed { min-height: 320px; }
      #corner-bl { gap: 6px; }
      #map-overlay { padding: 8px 12px; gap: 4px 12px; }
      .lang-switch-btn { padding: 8px 12px; }
      /* Чуть ниже центра — иначе на юнит-виде наезжает на фото-кружок тауна
         (#unit-photo, top-right угол плана). */
      #elevator-panel { right: 12px; top: calc(50% + 40px); }
      /* «Весь этаж» на мобильном — лифт горизонтальной строкой внизу плана,
         с подписью «Выбор этажа» НАД плашкой, снаружи неё (см. ELEVATOR_HORIZONTAL
         в JS — #elevator-horizontal-wrap оборачивает подпись + саму плашку). */
      #elevator-horizontal-wrap {
        position: absolute;
        bottom: 12px;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .elevator-label {
        font-size: var(--font-sm);
        font-weight: 600;
        color: var(--color-text-muted);
        letter-spacing: .02em;
        white-space: nowrap;
      }
      #elevator-panel.elevator-horizontal {
        position: static;
        transform: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding: 4px 10px;
      }
      #elevator-panel.elevator-horizontal #elevator-track {
        flex-direction: row;
        width: auto;
        height: 34px;
      }
      #elevator-panel.elevator-horizontal .elevator-btn { width: 34px; height: 100%; }
      #elevator-panel.elevator-horizontal #elevator-cab { width: 34px; height: 30px; top: 2px; left: 0; }
      #elevator-panel.elevator-horizontal .elevator-chevron { width: 20px; height: 34px; }
      /* Один и тот же поворот против часовой на 90° (-90deg) для обеих стрелок:
         исходный "^" (вверх) → "‹" (влево, к крыше), исходный "v" (вниз) →
         "›" (вправо, к паркингу). +90deg по часовой уводило бы обе влево —
         в этом и была ошибка. */
      #elevator-panel.elevator-horizontal #elevator-up svg,
      #elevator-panel.elevator-horizontal #elevator-down svg { transform: rotate(-90deg); }
      #elevator-panel.elevator-horizontal .elevator-divider { width: 1px; height: 20px; margin: 0 3px; }

      /* Хлебные крошки не помещаются в один ряд с бургером/лого/языком —
         переносятся JS-ом (см. initBreadcrumbsMobileSlot) в отдельную строку
         #breadcrumbs-mobile-slot, между шапкой и планом. Верхняя строка при
         этом — nowrap, бургер/лого/язык остаются на одном уровне. */
      #to-section-row {
        flex-wrap: nowrap;
        padding: 12px 16px 16px 16px;
      }
      #breadcrumbs-mobile-slot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0px; }
      #breadcrumbs-mobile-slot:empty { display: none; }
      #breadcrumbs-mobile-slot #breadcrumbs { max-width: none; font-size: 12px; }
      #row-left { gap: 0; }
      /* Переключатель языка на мобильном — только глобус + стрелочка, без подписи "Русский" */
      #lang-switch-current { display: none; }
      .lang-switch-btn { padding: 8px; gap: 4px; }
      /* Легенда + чип тауна + фото-кружок переносятся сюда JS-ом
         (см. initLegendMobileSlot) — под план. Легенда и чип — в одной
         группе (#legend-peek-group) стопкой; кружок — рядом, по верхнему
         краю группы (align-items:flex-start). */
      #legend-mobile-slot {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px 0;
      }
      #legend-mobile-slot:empty { display: none; }
      /* Этажный вид — под планом стоит только легенда (карточка тауна/фото/тауны
         там не показываются), центрируем её строго по горизонтали — вровень
         с горизонтальным лифтом (тот тоже center: left:50%/translateX(-50%)). */
      body.view-floor #legend-mobile-slot { justify-content: center; }
      body.view-floor #legend-peek-group { align-items: center; }
      #legend-peek-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      /* justify-content: space-between вместо flex-start — растягиваем текст
         и стрелку по всей ширине карточки, которая теперь = ширине легенды
         (align-items:stretch на группе выше). */
      #legend-peek-group #panel-peek { position: static; right: auto; bottom: auto; justify-content: space-between; }
      /* Тауны (#street-panel) — рядом с группой легенды/чипа, вровень с её
         верхним краем (вместо кружка с фото, который уехал в угол плана). */
      #legend-mobile-slot #street-panel { position: static; bottom: auto; left: auto; flex: none; }
      /* Миниатюра этажей («ЭТАЖИ») — теперь внутри той же группы, что легенда
         (не отдельной строкой) — единая стопка с тем же 8px-отступом. */
      #legend-peek-group #level-thumb-link {
        position: static;
        bottom: auto;
        left: auto;
        flex: none;
        /* Подложка (.overlay-plaque) была нужна поверх плана — тут миниатюра
           уже в потоке, под легендой, отдельный фон только загромождает. */
        background: none;
        padding: 0;
      }
      /* Фото-кружок (#unit-photo) — простой оверлей в правом верхнем углу
         плана (остаётся на своём обычном месте в DOM, #plan-area, просто
         переставлен из-под компаса в другой угол). z-index ниже, чем у
         переключателя языка в шапке (см. #lang-switch), чтобы не перекрывал
         его при близком соседстве. */
      #unit-photo { top: 12px; left: auto; right: 12px; z-index: 8; width: 68px; height: 68px; }
      /* Компас на мобильном не нужен — скрываем совсем */
      #north-arrow { display: none; }
      /* Отступы плана по бокам. */
      #plan-area { padding: 0 16px; box-sizing: border-box; }
      /* min-height нужен только в юнит-виде: там лифт вертикальный (top:50%,
         высота зависит от числа этажей) и, если план схлопнется auto-высотой
         ниже, чем нужно лифту, тот вылезает за верх #plan-area (overflow:visible).
         В этажном виде лифт теперь горизонтальный и компактный — большой
         запас не нужен, он только оставлял пустую дыру под планом. */
      body.view-unit #plan-area { min-height: 420px; }
      /* В этажном виде запас под горизонтальный лифт считается динамически
         в JS (padding-bottom по реальной высоте плашки, см. ELEVATOR_HORIZONTAL). */
      #stage { margin-top: 24px; }
      /* В юнит-виде лифт (#elevator-panel) встаёт вплотную к правому краю
         плана (см. positionElevatorPanel) — план обычно летербоксится на
         всю ширину контейнера, лифту некуда встать и он вылезает за экран.
         Резервируем под него место, сужая план справа. */
      body.view-unit #plan-area { padding-right: 70px; }
      /* Высота плана — авто по аспекту SVG вместо принудительных 100%. Мало
         поменять только сам <svg> — #svg-wrap/#plan-area/.stage всё ещё
         flex:1 и растягиваются на всю высоту экрана, оставляя пустое белое
         поле под планом (там, где раньше было леттербоксинг). Убираем
         растяжение по всей цепочке, чтобы контейнеры схлопывались по контенту. */
      /* Шторка вверх/вниз (переключение этажей лифтом/стрелками) — выключена
         на мобильном: та же логика, что и у шторки влево/вправо (тауны) —
         снимаем анимацию и обнуляем opacity:0/transform у .plan-enter-*,
         иначе план застрял бы невидимым (эти свойства заданы статикой, а не
         только в @keyframes). */
      #svg-wrap.plan-exit-up, #svg-wrap.plan-exit-down,
      .plan-enter-up, .plan-enter-down {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      #svg-wrap > svg, #svg-inner > svg { height: auto !important; }
      #svg-inner { height: auto; }
      #svg-wrap { flex: 0 0 auto; height: auto; }
      #plan-area { flex: 0 0 auto; }
      .stage { flex: 0 0 auto; }
      #parking-embed { height: auto; min-height: 100vh; }
      #side-panel {
        width: 100%;
        border-left: none;
        top: auto;
        height: 56vh;
        min-height: 280px;
        border-top: none;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: none;
      }
      #side-panel.open { transform: translateY(0); }
      .panel-head, .panel-info { padding-left: 16px; padding-right: 16px; }
      .panel-cta, .panel-link-btn { margin-left: 16px; margin-right: 16px; }
      .panel-nav-row { margin-left: 16px; margin-right: 16px; }
    }