/* Customer map presentation; the geographic projection and data stay intact. */
.customer-map-page .world-map-panel,
.customer-map-page .map-ranking-panel {
  border: 1px solid #234466;
  background: #0b1b32;
  box-shadow: 0 12px 32px #0c244b1a;
}
.customer-map-page .world-map-panel > .panel-head,
.customer-map-page .map-ranking-panel > .panel-head {
  min-height: 76px;
  background: linear-gradient(110deg, #102842, #0b1b32);
  border-bottom: 1px solid #24435d;
}
.customer-map-page .world-map-panel h3,
.customer-map-page .map-ranking-panel h3 { color: #edf9ff; letter-spacing: .6px; }
.customer-map-page .world-map-panel .panel-head p,
.customer-map-page .map-ranking-panel .panel-head p { color: #94afc8; }
.customer-map-page .map-live-badge { color: #64edda; white-space: nowrap; }
.customer-map-page .map-live-badge i {
  background: #64edda;
  box-shadow: 0 0 0 4px #64edda12, 0 0 12px #64edda80;
}
.customer-map-page .world-map-canvas {
  isolation: isolate;
  min-height: 470px;
  background: radial-gradient(ellipse at 53% 43%, #14364d 0, #0a2038 50%, #071426 100%);
}
.customer-map-page .world-map-canvas::after {
  z-index: 0;
  background-image: linear-gradient(#4daecb0d 1px, transparent 1px), linear-gradient(90deg, #4daecb0d 1px, transparent 1px);
  background-size: 8.333% 16.666%;
  border: 1px solid #3d8baf1f;
  inset: 17px;
  mask-image: linear-gradient(transparent, #000 18%, #000 85%, transparent);
}
.customer-map-page .world-map-canvas::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 -24%;
  width: 24%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #52dcf408);
  border-right: 1px solid #72eaff45;
  animation: customer-map-scan 14s linear infinite;
}
.customer-map-page .world-map-canvas > img {
  opacity: .95;
  filter: drop-shadow(0 0 5px #35b4db38);
  pointer-events: none;
}
.tech-map-orbits {
  position: absolute;
  z-index: 0;
  inset: 18% 11%;
  border: 1px solid #49b7d51b;
  border-radius: 50%;
  pointer-events: none;
}
.tech-map-orbits::before, .tech-map-orbits::after {
  content: '';
  position: absolute;
  inset: -12% 16%;
  border: 1px solid #49b7d514;
  border-radius: 50%;
  transform: rotate(35deg);
}
.tech-map-orbits::after { transform: rotate(-35deg); }
.tech-map-hud, .tech-map-footer {
  position: absolute;
  z-index: 5;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  color: #85acbf;
  font-size: 10px;
}
.tech-map-hud { top: 22px; }
.tech-map-hud span:first-child {
  color: #85d9ed;
  font: 9px/1.5 Consolas, monospace;
  letter-spacing: 1.8px;
}
.tech-map-hud span:last-child { border-left: 2px solid #42c6e0; padding-left: 9px; }
.tech-map-footer { bottom: 17px; border-top: 1px solid #3c6f853b; padding-top: 12px; font-variant-numeric: tabular-nums; }
.tech-map-footer b { color: #72d9ed; font-weight: 600; margin: 0 4px; }
.customer-map-page .customer-map-marker {
  background: linear-gradient(145deg, #0d749a, #1458a4);
  border: 1.5px solid #8ef0ff;
  box-shadow: 0 0 0 5px #31cef01c, 0 0 20px #21c0ea60, inset 0 0 10px #5edbff40;
}
.customer-map-page .customer-map-marker:hover,
.customer-map-page .customer-map-marker:focus-visible {
  outline: 2px solid #b7f6ff;
  outline-offset: 5px;
  box-shadow: 0 0 0 7px #31cef024, 0 0 28px #21c0eab0;
}
.customer-map-page .customer-map-marker b {
  color: #d7f5ff;
  background: #0b203af2;
  border-color: #387893;
  box-shadow: 0 3px 12px #0004;
}
.customer-map-page .map-empty {
  inset: auto 24px 66px;
  min-height: 76px;
  padding: 14px 16px;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 5px;
  text-align: left;
  justify-items: start;
  align-items: center;
  background: #0a1d32eb;
  border: 1px solid #33576f;
  border-left: 2px solid #4ad1e5;
  border-radius: 9px;
  box-shadow: 0 8px 24px #0002;
  pointer-events: none;
}
.customer-map-page .map-empty > span {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #4ad1e54d;
  color: #71e5f5;
  background: #14374b;
  font-size: 21px;
}
.customer-map-page .map-empty strong { color: #d7edf8; font-size: 13px; }
.customer-map-page .map-empty small { color: #98b5c9; max-width: none; font-size: 11px; line-height: 1.65; }
.customer-map-page .map-ranking-panel > .panel-head > strong { color: #6cddf2; font-weight: 500; }
.customer-map-page .map-country-list { scrollbar-color: #2f5875 #0b1b32; }
.customer-map-page .map-country-list::-webkit-scrollbar-track { background: #0b1b32; }
.customer-map-page .map-country-list::-webkit-scrollbar-thumb { background: #2f5875; border-color: #0b1b32; }
.customer-map-page .map-country-row { border-color: #25415a; }
.customer-map-page .map-country-row:hover { background: #12314a; }
.customer-map-page .map-country-row > i { color: #77d8ed; background: #173a52; }
.customer-map-page .map-country-row > div strong { color: #daedf9; }
.customer-map-page .map-country-row > div small,
.customer-map-page .map-country-row > b small { color: #91acc4; }
.customer-map-page .map-country-row > b { color: #65daee; }
.customer-map-page .map-list-empty { color: #91acc4; background: radial-gradient(ellipse at center, #16324a66, transparent 66%); }
@keyframes customer-map-scan { to { transform: translateX(520%); } }
@media (prefers-reduced-motion: reduce) {
  .customer-map-page .world-map-canvas::before { animation: none; display: none; }
  .customer-map-page .customer-map-marker { transition: none; }
}
@media (max-width: 640px) {
  .customer-map-page .world-map-canvas { min-height: 390px; }
  .tech-map-hud, .tech-map-footer { left: 14px; right: 14px; font-size: 9px; }
  .tech-map-hud span:first-child { font-size: 8px; letter-spacing: .9px; }
  .customer-map-page .map-empty { left: 14px; right: 14px; padding: 12px; }
  .customer-map-page .world-map-panel > .panel-head { gap: 12px; }
}