.weather-map-section { max-width: 1180px; margin: 0 auto 48px; padding: 32px 28px; background: linear-gradient(145deg,rgba(16,33,51,.94),rgba(10,24,39,.94)); border: 1px solid rgba(168,193,218,.14); border-radius: 15px; }
.weather-map-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.weather-map-heading h2 { margin: 7px 0 5px; font: 700 26px Manrope,sans-serif; }
.weather-map-heading p { margin: 0; color: #8095a8; font-size: 13px; }
.map-layer-buttons { display: flex; padding: 4px; border: 1px solid #284158; border-radius: 9px; background: #091725; }
.map-layer-buttons button { padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: #8298aa; font: 600 12px "DM Sans",sans-serif; cursor: pointer; }
.map-layer-buttons button.active { background: #70d3d1; color: #07131f; }
.map-time { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 22px; margin-bottom: 14px; }
.map-time span { display: block; color: #71899d; font-size: 11px; }
.map-time strong { display: block; color: #d5e5ec; font: 700 16px Manrope,sans-serif; }
.map-time input { width: 100%; accent-color: #70d3d1; }
.weather-map-wrap { position: relative; overflow: hidden; border: 1px solid #21394e; border-radius: 12px; background: #0a1725; }
#weather-map-canvas { height: 430px; width: 100%; }
.smooth-weather-overlay { pointer-events: none; image-rendering: auto; opacity: .92; filter: blur(11px) saturate(1.12); mix-blend-mode: screen; transform-origin: center; }
.map-loading { position: absolute; z-index: 500; inset: 0; display: grid; place-items: center; background: rgba(7,17,31,.82); color: #9bded8; font-size: 13px; }
.map-loading[hidden] { display: none; }
.map-legend { position: absolute; z-index: 450; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 7px; background: rgba(6,17,29,.86); color: #c5d5df; font-size: 10px; }
.map-legend i { display: block; width: 108px; height: 8px; border-radius: 5px; background: linear-gradient(90deg,#dce6e8 0%,#55b989 42%,#e2c45f 78%,#df835f 100%); }
.map-note { margin: 11px 2px 0; color: #687f93; font-size: 11px; }
.leaflet-container { font-family: "DM Sans",sans-serif; background: #091520; }
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.55) saturate(.5) contrast(1.2); }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background: #102537; color: #e4eef4; }
@media(max-width:700px){.weather-map-section{margin:0 16px 42px;padding:25px 18px}.weather-map-heading{display:block}.map-layer-buttons{margin-top:16px}.map-time{grid-template-columns:1fr;gap:8px}#weather-map-canvas{height:360px}}