:root {
    --void: #050a12;
    --glass: rgba(10, 18, 32, 0.72);
    --glass-edge: rgba(140, 190, 230, 0.28);
    --text: #e6eef8;
    --muted: #9bb4cc;
    --cyan: #a0e6ff;
    --cyan-dim: rgba(120, 180, 210, 0.28);
    --gold: #ffc440;
    --accent: #5ec8ff;
    --ring: rgba(170, 235, 255, 0.95);
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0; height: 100%;
    background: var(--void);
    color: var(--text);
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow: hidden;
  }
  #app {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
  }

  .toolbar {
    position: relative; z-index: 20;
    flex: 0 0 auto;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 16px;
    padding: 14px 20px 12px;
    background: linear-gradient(180deg, rgba(8,14,26,0.92), rgba(8,14,26,0.55));
    border-bottom: 1px solid var(--glass-edge);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .brand {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 200px; margin-right: 8px;
  }
  .brand .mark {
    font-family: Unbounded, Manrope, system-ui, sans-serif;
    font-weight: 400; font-size: 22px; letter-spacing: 0.02em;
    color: #e6f0ff;
  }
  .brand .sub {
    font-size: 12px; color: var(--muted); font-weight: 600;
  }
  .controls {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
    flex: 1 1 auto;
  }
  .field, .btn {
    height: 34px;
    min-width: 176px;
    box-sizing: border-box;
    border-radius: var(--rad-sm);
    border: 1px solid rgba(100, 160, 210, 0.35);
    background: rgba(12, 22, 38, 0.85);
    transition: border-color .15s, box-shadow .15s, background .15s;
  }
  .field {
    display: flex; align-items: center; gap: 8px;
    padding: 0 11px;
    position: relative;
  }
  #searchField {
    min-width: 228px;
    flex: 0 0 228px;
  }
  /* на 1366–1440 px шапке тесно: подписи «Полигон», «Филиал», «СЛД», «Завод», «Тяга» уходят внутрь списков
     («Полигон: все»), поиск уступает место — ни один список не сжимается до нечитаемого */
  @media (max-width: 1440px) {
    #searchField { min-width: 170px; flex: 0 1 190px; }
    .controls > .field:not(#searchField) > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .controls > .field:not(#searchField) { padding: 0 8px; }
    .controls > .field:not(#searchField):not(.twf-head) { flex-basis: 150px; min-width: 118px; }
    .toolbar { gap: 8px 10px; padding-left: 14px; padding-right: 14px; }
    .controls { gap: 6px; }
    .brand { min-width: 0; margin-right: 4px; }
    .brand .sub { display: none; }                      /* подзаголовок бренда — только на широких экранах */
    .controls > .btn { min-width: 92px; flex-basis: 104px; }
  }
  #polygonField {
    min-width: 154px;
    flex: 0 0 154px;
  }
  #searchField.has-q label { display: none; }
  #searchField input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 10px; height: 10px;
    margin-left: 4px;
    background: rgba(170,200,220,0.55);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='black' d='M1 1l8 8M9 1L1 9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='black' d='M1 1l8 8M9 1L1 9' stroke='black' stroke-width='1.6' stroke-linecap='round'/></svg>") center / contain no-repeat;
    cursor: pointer;
  }
  .suggest {
    display: none;
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 40;
    min-width: 220px;
    padding: 6px;
    border-radius: var(--rad-md);
    background: rgba(10, 18, 32, 0.94);
    border: 1px solid rgba(140, 190, 230, 0.32);
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    backdrop-filter: blur(12px);
  }
  .suggest.show { display: block; }
  .suggest button {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    width: 100%;
    border: 0; background: transparent;
    padding: 7px 8px;
    border-radius: var(--rad-sm);
    color: #e6eef8;
    font: 600 12px/1.2 Manrope, system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
  }
  .suggest button:hover, .suggest button.active {
    background: rgba(40, 70, 100, 0.55);
  }
  .suggest .cap {
    padding: 5px 8px 7px;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: rgba(150, 180, 200, 0.48);
  }
  .suggest .q { letter-spacing: 0.02em; }
  .suggest .tag {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(150, 185, 215, 0.7);
    flex: 0 0 auto;
  }
  .field:focus-within {
    border-color: rgba(120, 210, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(80, 180, 255, 0.15);
  }
  .field label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(150, 185, 215, 0.85); white-space: nowrap;
    flex: 0 0 auto;
  }
  .field input, .field select {
    background: transparent; border: 0; outline: none;
    color: var(--text); font: 600 12px/1 Manrope, system-ui, sans-serif;
    min-width: 0;
    flex: 1 1 auto;
    width: 0;
  }
  .field select { cursor: pointer; color-scheme: dark; }
  .field select option,
  .field select optgroup {
    background: #0c1626;
    color: #dce9f6;
  }
  .field select optgroup {
    color: #a9c7df;
    font-style: normal;
    font-weight: 700;
  }
  .field select option:checked {
    background: #1e69c5;
    color: #ffffff;
  }
  .btn {
    padding: 0 12px;
    color: var(--text);
    font: 600 12px/1 Manrope, system-ui, sans-serif;
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  .btn:hover {
    background: rgba(30, 50, 75, 0.95);
    border-color: rgba(120, 200, 255, 0.55);
  }
  .btn.active {
    border-color: rgba(120, 210, 255, 0.75);
    color: var(--cyan);
  }


  .stage {
    position: relative; flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    min-height: 0; background: var(--void);
    overflow: hidden;
    cursor: default;
    overscroll-behavior: none;
  }

  .map-wrap {
    position: relative;
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
  }
  .map-inner {
    position: absolute; inset: 0;
    transform-origin: 0 0;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
  }
  @media (prefers-reduced-motion: reduce) {
    .map-inner { transition: none; }
  }
  .map-wrap img#map {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    user-select: none; pointer-events: none;
    display: block;
  }

  /* подложка при выборе области НЕ затемняется (владелец: карта становилась блёклой);
     область видна по подсвеченным рельсам и приглушённым точкам вне её */
  #mapDim { display: none; }
  #rails, #leaders, .markers { z-index: 2; }

  #rails {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  #rails .rail {
    fill: none;
    stroke: rgba(140, 230, 255, 0.88);
    stroke-width: calc(0.85 * var(--k, 1));
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 1;
  }
  #rails.filial-mode .rail {
    stroke: rgba(100, 165, 195, 0.28);
    stroke-width: calc(0.65 * var(--k, 1));
    opacity: 0.85;
    filter: none;
  }
  #rails.filial-mode .rail.hi {
    stroke: transparent;
    opacity: 1;
  }

  #rails .rail-casing, #rails .rail-core {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  #rails .rail-casing { stroke: #021820; stroke-width: calc(3.1 * var(--k, 1)); }
  #rails .rail-core { stroke: #b4fbff; stroke-width: calc(1.4 * var(--k, 1)); }
  .map-focus #rails .rail:not(.hi) { opacity: .22; }
  .map-focus .dot.road-focus { width: 9px; height: 9px; }

  .markers {
    position: absolute; inset: 0;
    pointer-events: none;
  }
  .dot, .plant {
    position: absolute;
    transform: translate(-50%, -50%) scale(var(--k, 1));
    transform-origin: 50% 50%;
    pointer-events: auto;
    cursor: pointer;
  }
  .dot {
    width: 7px; height: 7px;
    background: transparent;
    box-shadow: none;
    transition: none;
  }
  .dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(160, 230, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(20, 50, 80, 0.55), 0 0 6px rgba(80, 200, 255, 0.35);
    transition: transform .15s, box-shadow .15s, background .15s, opacity .2s;
  }
  .dot.dim::before {
    opacity: 0.08;
    box-shadow: none;
    background: rgba(120, 160, 180, 0.45);
  }
  .dot.match::before {
    background: #dff8ff;
    box-shadow: 0 0 0 1px rgba(20,50,80,.6), 0 0 10px rgba(100,220,255,.75);
    transform: scale(1.35);
  }
  .dot.selected {
    z-index: 5;
  }
  .dot.selected::before {
    background: #cdf5ff;
    box-shadow: 0 0 0 2px var(--ring), 0 0 0 6px rgba(70, 195, 255, 0.25), 0 0 14px rgba(80, 210, 255, 0.55);
    transform: scale(1.45);
  }
  .dot.road-focus:not(.dim)::before {
    background: #9af7ff;
    box-shadow: 0 0 0 1px rgba(8, 55, 75, 0.9), 0 0 8px rgba(60, 210, 255, 0.45);
  }
  .dot.road-focus.selected::before {
    background: #dffcff;
    box-shadow: 0 0 0 2px rgba(180, 245, 255, 0.85), 0 0 10px rgba(60, 210, 255, 0.6);
    transform: scale(1.45);
  }

  #leaders {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  #leaders .leader-dash {
    fill: none;
    stroke: rgba(232, 197, 106, 0.72);
    stroke-width: calc(0.9 * var(--k, 1));
    stroke-dasharray: calc(2.4 * var(--k, 1)) calc(2.1 * var(--k, 1));
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  #leaders .leader-join,
  #leaders .leader-rule {
    fill: none;
    stroke: rgba(232, 197, 106, 0.88);
    stroke-width: calc(1 * var(--k, 1));
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .labels { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
  .labels.settling { opacity: 0; }
  .sld-lbl {
    position: absolute; white-space: nowrap;
    font-size: 11px; font-weight: 400; letter-spacing: 0.05em; padding: 2px 0 3px;
    color: rgba(245, 228, 180, 0.94);
    text-shadow: 0 0 3px rgba(6,12,24,0.9), 0 1px 2px rgba(0,0,0,0.7);
    opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer;
    transition: opacity .15s;
  }
  .map-zoomed .sld-lbl { font-size: 11px; }
  .sld-lbl.show { opacity: 1; visibility: visible; pointer-events: auto; }
  .sld-lbl.show:hover { color: #fff3c8; }

  .plant {
    width: 14px; height: 14px;
    z-index: 3;
  }
  .plant .dia {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #ffe08a, var(--gold) 45%, #d49220);
    transform: rotate(45deg);
    border: 1px solid rgba(120, 70, 10, 0.85);
    box-shadow: 0 0 12px rgba(255, 196, 64, 0.45);
  }
  .plant .lbl {
    position: absolute;
    left: 16px; top: -6px;
    white-space: nowrap;
    font-size: 12px; font-weight: 600;
    color: #f5ecd2;
    text-shadow: 0 0 4px rgba(6,12,24,0.95), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
  }
  .plant.lbl-left .lbl { left: auto; right: 16px; }
  .plant.lbl-below .lbl { top: 14px; left: 50%; transform: translateX(-50%); }
  .plant.dim { opacity: 0.22; }
  .plant.dim .lbl { opacity: 0.35; }
  .plant.hi .dia {
    box-shadow: 0 0 0 2px rgba(255, 220, 140, 0.85), 0 0 16px rgba(255, 196, 64, 0.7);
  }

  #tooltip {
    position: absolute; z-index: 30;
    min-width: 180px; max-width: 320px;
    padding: 12px 14px;
    border-radius: var(--rad-md);
    background: rgba(14, 24, 42, 0.92);
    border: 1px solid rgba(150, 205, 245, 0.45);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(80,140,200,0.08) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity .12s;
  }
  #tooltip.show { opacity: 1; visibility: visible; }
  #tooltip.show:has(.t-open) { pointer-events: auto; }
  #tooltip .t-title {
    font-size: 13px; font-weight: 600; color: #eef6ff; margin: 0 0 4px;
  }
  #tooltip .t-city {
    font-size: 12px; color: #afcde4; margin: 0 0 6px;
  }
  #tooltip .t-series {
    font-size: 12px; color: #82d7f5; margin: 0 0 6px;
  }
  #tooltip .t-addr {
    font-size: 11px; color: rgba(170, 195, 215, 0.85); line-height: 1.35; margin: 0;
  }
  #tooltip .t-repair {
    font-size: 12px; color: #c6d4e2; margin: 0 0 6px;
  }
  #tooltip .t-missing {
    font-size: 11px; color: rgba(160, 180, 195, 0.7); margin: 0 0 6px;
  }
  #tooltip .t-open {
    display: inline-block; margin-top: 5px; color: #9fe3ff; font-size: 12px; text-decoration: none;
  }
  #tooltip .t-open:hover { color: #ffe2a0; text-decoration: underline; }

  /* ---------- 2.0: зум кнопками, слои, панель (карта статичная — курсор обычный) ---------- */
  .map-wrap { cursor: default; }
  /* без will-change: браузер перерисовывает подложку в текущем масштабе, а не растягивает кадр масштаба 1 — при приближении резче */
  #layers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
  #layers .twin-layer-hit { pointer-events: auto; }
  /* маркеры и подписи держат постоянный экранный размер при зуме: --k = 1/scale */
  .map-ctl { position: absolute; right: 14px; bottom: 14px; z-index: 25; display: flex; flex-direction: column; gap: 6px; transition: right .3s ease, bottom .3s ease; }
  body.twin-panel-open .map-ctl { right: 454px; }   /* панель лежит поверх карты — кнопки зума сдвигаются в свободную часть */
  .map-ctl button { width: 34px; height: 34px; border-radius: var(--rad-sm); border: 1px solid rgba(100,160,210,.35); background: rgba(12,22,38,.85); color: var(--text); font: 600 15px/1 Manrope, system-ui, sans-serif; cursor: pointer; }
  .map-ctl button:hover { border-color: rgba(120,200,255,.55); background: rgba(30,50,75,.95); }
  /* легенда компактная: одна строка обозначений + ⓘ; пояснение всплывает над легендой при наведении на ⓘ */
  .map-legend { position: absolute; left: 14px; bottom: 14px; z-index: 25; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: var(--rad-sm); border: 1px solid var(--glass-edge); background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 400 11px/1.6 Manrope, system-ui, sans-serif; color: var(--text); transition: bottom .3s ease; }
  .map-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 5px 0 10px; vertical-align: -1px; }
  .map-legend i:first-child { margin-left: 0; }
  .map-legend i.line { width: 18px; height: 3px; border-radius: var(--rad-sm); }
  .map-legend i.dia { border-radius: var(--rad-sm); transform: rotate(45deg); width: 9px; height: 9px; }
  .map-legend i.leg-sld { background: rgba(160, 230, 255, 0.92); box-shadow: 0 0 0 1px rgba(20, 50, 80, 0.55), 0 0 6px rgba(80, 200, 255, 0.35); }
  .map-legend .leg-i { display: inline-block; margin-left: 10px; color: var(--cyan); font-size: 13px; line-height: 1; vertical-align: -1px; cursor: help; outline: none; }
  .map-legend .leg-i:hover, .map-legend .leg-i:focus { color: #fff; }
  .map-legend .note { display: none; position: absolute; left: 0; bottom: calc(100% + 6px); width: max-content; max-width: min(520px, calc(100vw - 40px)); padding: 8px 11px; border-radius: var(--rad-sm); border: 1px solid var(--glass-edge); background: rgba(10, 18, 32, 0.97); color: var(--text); font-size: 11px; line-height: 1.5; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
  .map-legend .leg-i:hover + .note, .map-legend .leg-i:focus + .note { display: block; }
  .map-legend .twl { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--glass-edge); }
  /* боковая панель */
  .stage { align-items: stretch; }
  /* панель лежит поверх карты одной ширины во всех режимах (Загрузка / Баланс / Программа): карта никогда не меняет размер,
     выбранная область плавно вписывается в свободную часть (map.js setInset) */
  .side-panel { position: absolute; right: 0; top: 0; bottom: 0; z-index: 26; width: 440px; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid #2b425a; background: radial-gradient(ellipse at top right,#12283f 0,transparent 55%),#080f1d; overflow: hidden; box-shadow: -12px 0 32px rgba(0,0,0,.35); animation: panel-in .3s ease; }
  @keyframes panel-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .side-toggle { position: absolute; right: 0; top: 50%; z-index: 27; width: 22px; height: 64px; transform: translateY(-50%); border: 1px solid var(--glass-edge); border-right: 0; border-radius: var(--rad-sm) 0 0 var(--rad-sm); background: var(--glass); color: var(--cyan); font-size: 15px; cursor: pointer; transition: right .3s ease, bottom .3s ease; }
  .side-toggle:hover { color: #fff; }
  .side-toggle[aria-expanded="true"] { right: 440px; }
  .side-toggle[aria-expanded="true"]::before { content: "›"; }
  .side-toggle[aria-expanded="true"] { font-size: 0; }
  .side-toggle[aria-expanded="true"]::before { font-size: 15px; }
  .sld-host { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #080f1d; animation: fade-in .25s ease; }
  .sld-host iframe { flex: 1; width: 100%; border: 0; min-height: 0; }
  .sld-host .sld-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 20px; border-bottom: 1px solid var(--glass-edge); background: linear-gradient(180deg, rgba(8,14,26,.92), rgba(8,14,26,.55)); font-size: 12px; }
  .sld-host .sld-bar .text-button { padding: 0; }
  .sld-host .sld-bar .sld-title { color: #f1ddb0; font-weight: 600; }
  .sld-host .sld-bar .muted { margin-left: auto; }
  @media (max-width: 1100px) { .side-panel { width: 380px; } .side-toggle[aria-expanded="true"] { right: 380px; } body.twin-panel-open .map-ctl { right: 394px; } }
  /* узкое окно: панель — «шторка» снизу на 42 % высоты, язычок открытия остаётся на экране (внизу по центру) */
  @media (max-width: 800px) {
    .side-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 42%; border-left: 0; border-top: 1px solid #2b425a; box-shadow: 0 -12px 32px rgba(0,0,0,.35); animation-name: sheet-in; }
    .side-toggle { right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%) rotate(90deg); }
    .side-toggle[aria-expanded="true"] { right: auto; bottom: calc(42% - 21px); }
    body.twin-panel-open .map-ctl { right: 14px; bottom: calc(42% + 14px); }
    body.twin-panel-open .map-legend { bottom: calc(42% + 14px); }
  }
  @media (prefers-reduced-motion: reduce) { .side-panel, .sld-host { animation: none; } .map-ctl, .map-legend, .side-toggle { transition: none; } }