.ops-vector-map {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(17, 52, 74, .24), transparent 52%),
    #07101a;
}

html[data-theme="light"] .ops-vector-map {
  background: #e7eaed;
}

.ops-vector-map .maplibregl-canvas { outline: 0; }
.ops-vector-map .maplibregl-canvas-container { cursor: grab; }
.ops-vector-map .maplibregl-canvas-container:active { cursor: grabbing; }
.ops-vector-map .maplibregl-ctrl-bottom-left { z-index: 4; }
.ops-vector-map .maplibregl-ctrl-attrib {
  border: 1px solid rgba(91, 111, 137, .24);
  border-radius: 6px;
  background: rgba(7, 13, 21, .78);
  color: #8290a4;
  font-size: 8px;
  backdrop-filter: blur(8px);
}
.ops-vector-map .maplibregl-ctrl-attrib a { color: #aab5c4; }
.ops-vector-map .maplibregl-ctrl-attrib-button { filter: invert(1); opacity: .68; }

html[data-theme="light"] .ops-vector-map .maplibregl-ctrl-attrib {
  border-color: rgba(44, 55, 65, .16);
  background: rgba(247, 248, 249, .86);
  color: #5d6872;
}
html[data-theme="light"] .ops-vector-map .maplibregl-ctrl-attrib a { color: #35414a; }
html[data-theme="light"] .ops-vector-map .maplibregl-ctrl-attrib-button { filter: none; }

.admin-map.ops-vector-map::after,
#performer-map.ops-vector-map::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 9, 15, .06), transparent 22%, transparent 78%, rgba(3, 9, 15, .18)),
    radial-gradient(circle at 50% 45%, transparent 48%, rgba(3, 8, 14, .18) 100%);
  box-shadow: inset 0 0 0 1px rgba(103, 132, 164, .08);
}

html[data-theme="light"] .admin-map.ops-vector-map::after,
html[data-theme="light"] #performer-map.ops-vector-map::after {
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 22%, transparent 82%, rgba(75,85,95,.05));
  box-shadow: inset 0 0 0 1px rgba(55, 65, 74, .1);
}

@media (max-width: 760px) {
  .ops-vector-map .maplibregl-ctrl-attrib { max-width: 190px; }
}