.app-map { position: relative; height: 100%; min-height: 30rem; overflow: hidden; border: 1px solid #3a3e49; border-radius: .45rem; background: #1d2228; box-shadow: 0 2px 8px rgb(0 0 0 / 18%); }
.app-map-surface { position: relative; width: 100%; height: 100%; min-height: inherit; overflow: hidden; cursor: grab; outline: none; touch-action: none; user-select: none; }
.app-map-surface:focus-visible { box-shadow: inset 0 0 0 3px #6bb6c7; }
.app-map-surface.is-dragging { cursor: grabbing; }
.app-map-tiles,
.app-map-bubbles { position: absolute; inset: 0; }
.app-map-tiles img { position: absolute; width: 256px; height: 256px; border: 0; pointer-events: none; }
.app-map-bubbles { pointer-events: none; }
.app-map-bubble { position: absolute; display: grid; place-items: center; padding: 0; transform: translate(-50%, -50%); border-style: solid; border-radius: 50%; color: #17191f; cursor: pointer; pointer-events: auto; font-size: .65rem; font-weight: 750; box-shadow: 0 2px 7px rgb(0 0 0 / 38%); transition: filter .12s, scale .12s; }
.app-map-bubble:hover,
.app-map-bubble:focus-visible { z-index: 3; filter: brightness(1.12); outline: 2px solid #fff; outline-offset: 2px; scale: 1.12; }
.app-map-bubble span { overflow: hidden; text-overflow: ellipsis; }
.app-map-controls { position: absolute; z-index: 8; top: .7rem; left: .7rem; display: grid; overflow: hidden; border: 1px solid #4c5260; border-radius: .35rem; background: #252a35; box-shadow: 0 3px 10px rgb(0 0 0 / 32%); }
.app-map-controls button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 0; border-bottom: 1px solid #4c5260; background: transparent; color: #f4f5f7; cursor: pointer; }
.app-map-controls button:last-child { border-bottom: 0; }
.app-map-controls button:hover,
.app-map-controls button:focus-visible { background: #3b4250; outline: none; }
.app-map-legend { position: absolute; z-index: 7; right: .7rem; bottom: 2rem; display: grid; gap: .25rem; padding: .45rem .55rem; border: 1px solid rgb(70 75 84 / 75%); border-radius: .3rem; background: rgb(27 30 37 / 88%); color: #f1f2f4; font-size: .7rem; pointer-events: none; }
.app-map-legend[hidden] { display: none; }
.app-map-legend > div { display: flex; align-items: center; gap: .4rem; }
.app-map-legend i { display: inline-block; border: 1px solid #333; border-radius: 50%; background: #ff6600; opacity: .9; }
.app-map-attribution { position: absolute; z-index: 7; right: 0; bottom: 0; padding: .14rem .35rem; background: rgb(255 255 255 / 82%); color: #2f3640; font-size: .62rem; text-decoration: none; }
.app-map-tooltip { position: absolute; z-index: 12; display: grid; gap: .2rem; min-width: 11rem; max-width: 20rem; padding: .55rem .7rem; border: 1px solid #505764; border-radius: .32rem; background: #171a21; color: #f7f7f8; box-shadow: 0 8px 22px rgb(0 0 0 / 45%); pointer-events: none; font-size: .78rem; }
.app-map-tooltip[hidden] { display: none; }
.app-map-tooltip strong { color: #ff9b57; font-size: .86rem; }
.app-map-tooltip span { color: #d2d5db; }
.app-map-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-map.is-loading::after { content: ""; position: absolute; z-index: 20; inset: 0; background: rgb(20 22 29 / 35%); cursor: wait; }
@media (max-width: 620px) { .app-map { min-height: 26rem; } .app-map-legend { max-width: 8.5rem; } }