.skynet-map-shell{
  --skynet-yellow:#D8BC2C;
  --skynet-yellow-soft:rgba(216,188,44,.20);
  --skynet-bg:#0b0b09;
  --skynet-panel:#12120f;
  --skynet-border:rgba(216,188,44,.28);
  --skynet-text:#ebe4c4;
  --skynet-muted:#b8b091;

  position:relative;
  margin:28px 0;
  overflow:hidden;
  color:var(--skynet-text);
  font-family:inherit;
  background:linear-gradient(180deg,#11110d 0%,#0b0b09 100%);
  border:1px solid var(--skynet-border);
  box-shadow:0 20px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03);
}

.skynet-map-topbar,
.skynet-map-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(0,0,0,.18));
}

.skynet-map-topbar{border-bottom:1px solid rgba(216,188,44,.16)}
.skynet-map-footer{border-top:1px solid rgba(216,188,44,.13);font-size:12px;color:var(--skynet-muted)}

.skynet-map-topbar strong{
  display:block;
  margin:0;
  color:var(--skynet-yellow);
  font-family:inherit;
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
}

.skynet-map-topbar span{
  display:block;
  margin-top:5px;
  color:#9f987b;
  font-size:12px;
  line-height:1.35;
}

.skynet-map-btn{
  appearance:none;
  background:linear-gradient(180deg,#1c1b15 0%,#14140f 100%)!important;
  border:1px solid rgba(216,188,44,.36)!important;
  color:var(--skynet-yellow)!important;
  border-radius:7px;
  padding:10px 14px;
  cursor:pointer;
  font-family:inherit;
  font-weight:800;
  font-size:13px;
  line-height:1;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 20px rgba(0,0,0,.22);
  transition:all .16s ease;
}

.skynet-map-btn:hover{background:linear-gradient(180deg,#262316 0%,#1c1a10 100%)!important;border-color:rgba(216,188,44,.55)!important;transform:translateY(-1px)}
.skynet-map-btn:active{transform:translateY(0)}

.skynet-map-canvas{
  position:relative;
  overflow:hidden;
  margin:14px;
  min-height:420px;
  background:#050504;
  border:1px solid rgba(216,188,44,.17);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012),0 14px 35px rgba(0,0,0,.26);
  touch-action:none;
  user-select:none;
  cursor:grab;
}

.skynet-map-canvas.is-dragging{cursor:grabbing}
.skynet-map-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.skynet-map-image{position:absolute;left:0;top:0;max-width:none!important;max-height:none!important;user-select:none;pointer-events:none}
.skynet-map-marker-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

.skynet-map-marker{
  position:absolute;
  transform:translate(-50%,-100%);
  width:26px;
  height:26px;
  border-radius:50%;
  border:2px solid rgba(12,12,10,.90);
  background:var(--skynet-marker-color,#D8BC2C);
  color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.36),0 10px 18px rgba(0,0,0,.32);
  cursor:pointer;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-family:inherit;
  font-weight:900;
  font-size:12px;
  line-height:1;
  transition:transform .15s ease,box-shadow .15s ease;
}

.skynet-map-marker:hover{transform:translate(-50%,-100%) scale(1.08);box-shadow:0 0 0 3px rgba(0,0,0,.42),0 12px 22px rgba(0,0,0,.38)}
.skynet-map-marker span{display:block;line-height:1}
.skynet-marker-danger{background:#A30000;color:#fff}
.skynet-marker-city{border-radius:50%}
.skynet-marker-poi{border-radius:7px}

.skynet-map-controls{
  position:absolute;
  z-index:20;
  left:16px;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:7px;
  pointer-events:auto;
}

.skynet-map-control-btn,
.skynet-map-controls button{
  width:42px;
  height:42px;
  appearance:none;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  background:rgba(18,18,14,.95)!important;
  border:1px solid rgba(216,188,44,.34)!important;
  border-radius:9px!important;
  color:var(--skynet-yellow)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:23px!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.03);
  transition:all .16s ease;
}

.skynet-map-control-btn span,
.skynet-map-controls button span{
  display:block;
  line-height:1;
  transform:translateY(-1px);
}

.skynet-map-home-btn span{font-size:25px;transform:translateY(-2px)}

.skynet-map-control-btn:hover,
.skynet-map-controls button:hover{
  background:rgba(31,30,22,.98)!important;
  border-color:rgba(216,188,44,.52)!important;
  transform:translateY(-1px);
}

.skynet-map-control-btn:active,
.skynet-map-controls button:active{transform:translateY(0)}

.skynet-map-loading,.skynet-map-error{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:rgba(12,12,10,.94);
  border:1px solid rgba(216,188,44,.30);
  padding:18px 22px;
  color:#f0e6a4;
  text-align:center;
  max-width:90%;
  box-shadow:0 18px 45px rgba(0,0,0,.34);
}

.skynet-map-error code{white-space:normal;color:#fff}

.skynet-map-debug{
  position:absolute;z-index:30;left:16px;bottom:16px;
  background:rgba(8,8,7,.86);
  border:1px solid rgba(216,188,44,.32);
  color:var(--skynet-yellow);
  padding:10px 12px;
  font:12px/1.35 monospace;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

.skynet-map-popup{
  position:absolute;z-index:40;
  min-width:240px;
  max-width:min(360px,calc(100% - 30px));
  background:rgba(16,16,12,.98);
  border:1px solid rgba(216,188,44,.48);
  box-shadow:0 22px 50px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.02);
  padding:16px 16px 14px;
  color:#eee8c7;
  border-radius:10px;
}

.skynet-map-popup strong{display:block;color:var(--skynet-yellow);margin:0 28px 8px 0;font-size:17px;line-height:1.25}
.skynet-map-popup-content{font-size:14px;line-height:1.55;color:#ddd5b2}
.skynet-map-popup-content p{margin:.4em 0}
.skynet-map-popup-link{display:inline-block;margin-top:12px;color:#111!important;background:var(--skynet-yellow);padding:8px 12px;border-radius:7px;text-decoration:none!important;font-weight:800;font-size:13px;line-height:1;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.skynet-map-popup-close{position:absolute;right:8px;top:8px;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--skynet-yellow);font-size:22px;line-height:1;cursor:pointer}
.skynet-map-popup-close:hover{background:rgba(216,188,44,.08)}

.skynet-map-fullscreen-mode{position:fixed!important;z-index:999999;inset:18px;margin:0!important;display:flex;flex-direction:column}
.skynet-map-fullscreen-mode .skynet-map-canvas{flex:1;height:auto!important}
.admin-bar .skynet-map-fullscreen-mode{top:50px}

@media(max-width:900px){.skynet-map-topbar strong{font-size:20px}.skynet-map-canvas{min-height:380px}}
@media(max-width:700px){.skynet-map-topbar,.skynet-map-footer{flex-direction:column;align-items:flex-start}.skynet-map-topbar{gap:12px}.skynet-map-canvas{margin:12px;min-height:340px}.skynet-map-controls{left:12px;top:12px}.skynet-map-control-btn,.skynet-map-controls button{width:39px;height:39px}.skynet-map-btn{width:100%}}