.dg-map-card.dg-panorama-card { padding: 0; overflow: hidden; border: 1px solid #d9d5ed; border-radius: 14px; background: linear-gradient(150deg, #dfdaf3, #f0ebfc 45%, #e8e2f7); box-shadow: 0 16px 50px #2f245d0a; }
.zoom-controls button:focus-visible, .map-viewport:focus-visible { outline: 3px solid #6778c7; outline-offset: -3px; }
.map-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 26px; padding: 12px 0; }
.map-tools p { margin: 0; color: #79718f; font-size: 12px; }
.zoom-controls { display: flex; align-items: center; flex-shrink: 0; gap: 3px; padding: 3px; background: #ffffffb0; border: 1px solid #d8d1ea; border-radius: 7px; }
.zoom-controls button { min-width: 30px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 4px; cursor: pointer; color: #544578; background: transparent; font-size: 14px; }
.zoom-controls button:hover { background: #e9e3f6; }
.zoom-controls button:disabled { opacity: .35; cursor: default; }
.zoom-controls span { min-width: 43px; text-align: center; font-family: Arial, sans-serif; font-size: 11px; color: #79718f; }
#zoomReset { font-size: 12px; border-left: 1px solid #e4dff0; border-radius: 0; margin-left: 3px; }
.map-viewport { overflow: auto; overscroll-behavior-x: contain; background: #f5f1ff; scrollbar-color: #b3a6d5 #eee8fa; }
.map-stage { width: 100%; position: relative; }
#interactiveMap { display: block; width: 100%; height: auto; }
.province-region { outline: none; }
.province-link { cursor: pointer; }
.province-hotspot { fill: transparent; stroke: transparent; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: fill; transition: fill .15s, stroke .15s; }
.province-region:hover .province-hotspot, .province-region:focus .province-hotspot { fill: #4d66b324; stroke: #4e66af; }
.preview-map-foot { display: flex; justify-content: space-between; gap: 20px; padding: 15px 26px; color: #8b809e; font-size: 11px; background: #ffffff57; }
.map-tooltip { position: fixed; z-index: 20; pointer-events: none; border: 1px solid #e5e0f0; border-radius: 8px; background: #fffffff5; box-shadow: 0 5px 20px #3022541f; padding: 12px 16px; max-width: 270px; }
.map-tooltip strong { display: block; font-size: 13px; color: #3b326c; margin-bottom: 5px; }
.map-tooltip span { display: block; font-size: 11px; color: #8e849d; }
.map-tooltip[hidden] { display: none; }
@media (max-width: 760px) {
    .map-tools { margin: 0 12px; align-items: flex-end; }
    .map-tools p { max-width: 150px; font-size: 10px; line-height: 1.7; }
    .preview-map-foot { padding: 12px 14px; font-size: 9px; gap: 12px; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) { .province-hotspot { transition: none; } }