html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #151a23; display: flex; overflow: hidden; }
#map { flex: 1; height: 100%; background: #e9eef2; }
.leaflet-container { font: inherit; }
.leaflet-gl-layer { pointer-events: none; }
.iex-marker { background: none; border: 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%)); }
.iex-marker:hover { filter: drop-shadow(0 3px 6px rgb(0 0 0 / 40%)); }
.iex-tooltip { font-weight: 600; font-size: 12.5px; padding: 4px 8px; border-radius: 6px; border: 0; box-shadow: 0 4px 14px rgb(16 24 40 / 16%); }
.iex-label { max-width: 190px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 94%); color: #151a23; font-weight: 650; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgb(16 24 40 / 20%), inset 0 0 0 1px rgb(16 24 40 / 7%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: label-in .3s cubic-bezier(.22, .8, .24, 1) both; }
.iex-label.leaflet-tooltip-top::before { border-top-color: rgb(255 255 255 / 94%); }
@keyframes label-in { from { opacity: 0; } }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 30px rgb(16 24 40 / 22%); }
.leaflet-popup-content { margin: 14px 18px; }
.iex-popup-title { font-weight: 650; font-size: 15px; line-height: 1.3; }
.iex-popup-text { margin-top: 6px; color: #3d4654; white-space: normal; overflow-wrap: anywhere; }
.iex-popup-title + .iex-popup-text { margin-top: 6px; }
.leaflet-bar { border: 0 !important; box-shadow: 0 4px 14px rgb(16 24 40 / 16%) !important; border-radius: 10px !important; overflow: hidden; }
.leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; color: #2b3340 !important; display: grid !important; place-items: center; }
.leaflet-control-attribution { display: flex; align-items: center; gap: 5px; max-width: calc(100% - 12px); margin: 0 !important; padding: 2px 7px !important; border-radius: 8px 0 0 0; background: rgb(255 255 255 / 82%) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(16 24 40 / 6%); font-size: 10px; line-height: 16px; letter-spacing: .01em; }
.leaflet-control-attribution a { color: #5f6068 !important; text-decoration: none !important; }
.leaflet-control-attribution a:hover { color: #1a1a1a !important; }
.iex-sep { width: 2px; height: 2px; border-radius: 50%; background: currentColor; opacity: .4; flex: none; }
.iex-credits { position: relative; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; color: #8e8f98; font-size: 8.5px; font-weight: 700; cursor: help; flex: none; }
.iex-credits::before { content: "i"; }
.iex-credits:hover, .iex-credits:focus-visible { color: #1a1a1a; outline: none; }
.iex-credits-pop { position: absolute; right: -6px; bottom: calc(100% + 7px); padding: 5px 9px; border-radius: 7px; background: rgb(21 26 35 / 92%); color: #fff; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s, transform .18s; }
.iex-credits-pop a { color: #fff !important; }
.iex-credits:hover .iex-credits-pop, .iex-credits:focus-visible .iex-credits-pop { opacity: 1; transform: none; pointer-events: auto; }
.list { width: 280px; flex: none; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e1e5ec; z-index: 2; }
.list-head { padding: 14px 16px; font-weight: 650; font-size: 15px; border-bottom: 1px solid #e1e5ec; }
.list-items { overflow-y: auto; padding: 6px; }
.list-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.list-item:hover { background: #f0f2f7; }
.list-swatch { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.list-swatch svg { max-width: 20px; max-height: 24px; }
.list-swatch i { width: 14px; height: 14px; border-radius: 4px; background: currentColor; opacity: .8; }
.list-toggle { display: none; }
@media (max-width: 640px) {
  .list { position: absolute; inset: 0 30% 0 0; width: auto; transform: translateX(-102%); transition: transform .25s; box-shadow: 0 0 40px rgb(0 0 0 / 25%); z-index: 1001; }
  .list-open .list { transform: none; }
  .list-toggle { display: block; position: absolute; z-index: 1000; top: 10px; left: 10px; padding: 8px 12px; border: 0; border-radius: 10px; background: #fff; font: 600 13px system-ui, sans-serif; box-shadow: 0 4px 14px rgb(16 24 40 / 16%); cursor: pointer; }
}
.leaflet-container a { color: #ff0033; }
.leaflet-container a.leaflet-popup-close-button { color: #8e8f98; }
#map:empty { position: relative; }
#map:empty::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 10px; background: #ff0033 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 42'%3E%3Cpath d='M16 40.5S30 27 30 15.8A14 14 0 0 0 2 15.8C2 27 16 40.5 16 40.5z' fill='%23fff'/%3E%3Ccircle cx='16' cy='16' r='5.4' fill='%23ff0033'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: 0 10px 26px rgb(255 0 51 / 35%); animation: embed-pulse 1.2s cubic-bezier(.22, .8, .24, 1) infinite; }
#map:empty::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 12px; border: 2px solid rgb(255 0 51 / 50%); animation: embed-ring 1.2s ease-out infinite; }
#map .leaflet-map-pane { animation: embed-in .5s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes embed-pulse { 50% { transform: scale(.9) rotate(-6deg); } }
@keyframes embed-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
@keyframes embed-in { from { opacity: 0; } }
.list-item:hover { background: #fff0f3; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

.scroll-hint { position: absolute; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 42%); color: #fff; font: 600 15px/1.35 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.scroll-hint.is-visible { opacity: 1; }
.iex-route { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: #ffcc00; color: #151a23 !important; font-weight: 650; font-size: 13px; text-decoration: none !important; cursor: pointer; transition: background .15s; }
.iex-route:hover { background: #ffd83d; }
.leaflet-container a.iex-yandex { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 7px; background: rgb(255 255 255 / 94%); color: #151a23 !important; font-weight: 600; font-size: 11px; line-height: 1; text-decoration: none !important; cursor: pointer; user-select: none; box-shadow: 0 1px 2px 1px rgb(16 24 40 / 18%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, color .15s, box-shadow .15s; }
.leaflet-container a.iex-yandex:hover { background: #fff0f3; color: #ff0033 !important; box-shadow: 0 2px 8px rgb(255 0 51 / 22%); }
.iex-yandex * { pointer-events: none; }
.leaflet-container .iex-yandex svg { display: block; width: 13px; height: 13px; color: #ff0033; flex: none; }
.iex-yandex span { display: block; line-height: 13px; }
@media (max-width: 380px) { .iex-yandex span { display: none; } .leaflet-container a.iex-yandex { width: 26px; padding: 0; justify-content: center; } }