.dxwm-map {
  --dxwm-bg: #070a0f;
  --dxwm-panel: #101722;
  --dxwm-panel2: #0c111a;
  --dxwm-text: #e8f0ff;
  --dxwm-muted: #7d8da8;
  --dxwm-heard: #5eead4;
  --dxwm-qsl: #38bdf8;
  --dxwm-border: rgba(255,255,255,.08);
  width: min(1500px, calc(100vw - 64px));
  max-width: none;
  margin: 1.5rem 50% 2.5rem;
  transform: translateX(-50%);
  color: var(--dxwm-text);
}

.dxwm-map-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
  color: var(--dxwm-muted);
  font-size: .78rem;
}

.dxwm-legend,
.dxwm-counts {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  align-items: center;
}

.dxwm-legend span,
.dxwm-counts span {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}

.dxwm-counts strong {
  color: var(--dxwm-text);
  font-variant-numeric: tabular-nums;
}

.dxwm-key {
  width: .72rem;
  height: .72rem;
  border-radius: 3px;
  border: 1px solid var(--dxwm-border);
  background: var(--dxwm-panel);
}

.dxwm-key-heard { background: var(--dxwm-heard); }
.dxwm-key-qsl { background: var(--dxwm-qsl); }

.dxwm-map-canvas {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  border: 1px solid var(--dxwm-border);
  border-radius: 18px;
  background: rgba(12,17,26,.72);
}

.dxwm-svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  padding: .9rem;
}

.dxwm-region {
  fill: var(--dxwm-panel);
  stroke: rgba(255,255,255,.16);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
  transition: fill .16s ease, opacity .16s ease, stroke .16s ease;
}

.dxwm-region.is-heard { fill: var(--dxwm-heard); }
.dxwm-region.is-qsl { fill: var(--dxwm-qsl); }

.dxwm-region:hover,
.dxwm-region:focus {
  stroke: rgba(232,240,255,.92);
  stroke-width: 1.2;
  opacity: .9;
  outline: none;
}

.dxwm-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform: translate(12px, 12px);
  padding: .48rem .62rem;
  border: 1px solid var(--dxwm-border);
  border-radius: 10px;
  background: rgba(7,10,15,.96);
  color: var(--dxwm-text);
  font-size: .76rem;
  line-height: 1.25;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
  white-space: nowrap;
}

.dxwm-tooltip strong {
  display: block;
  margin-bottom: 2px;
  font-size: .8rem;
}

.dxwm-tooltip span { color: var(--dxwm-muted); }

.dxwm-source {
  margin-top: .55rem;
  color: var(--dxwm-muted);
  font-size: .68rem;
  text-align: right;
  opacity: .78;
}

.dxwm-message {
  color: var(--dxwm-muted, #7d8da8);
  font-size: .9rem;
}

@media (max-width: 700px) {
  .dxwm-map {
    width: calc(100vw - 28px);
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
  .dxwm-map-canvas { border-radius: 14px; }
  .dxwm-svg { padding: .35rem; }
  .dxwm-map-meta { align-items: flex-start; }
  .dxwm-source { text-align: left; }
}

/* SDXL DX-country overlay */
.dxwm-map[data-map-type="dx-countries"] .dxwm-region.is-context {
  fill: #0c111a;
  opacity: .7;
}

.dxwm-marker {
  fill: #101722;
  stroke: rgba(232,240,255,.72);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .16s ease, stroke .16s ease, r .16s ease;
}

.dxwm-marker.is-heard { fill: var(--dxwm-heard); }
.dxwm-marker.is-qsl { fill: var(--dxwm-qsl); }
.dxwm-marker:hover,
.dxwm-marker:focus {
  stroke: #e8f0ff;
  outline: none;
}

@media (max-width: 700px) {
  .dxwm-marker { stroke-width: 1.6; }
}