feat: add area zoom map control

styles.css

@@ -442,6 +442,56 @@ button:disabled {
   font-size: 1.3rem;
 }
 
+.map-wrap .ol-area-zoom {
+  top: 140px;
+  right: 16px;
+  left: auto;
+  overflow: hidden;
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: 14px;
+  backdrop-filter: blur(16px);
+  box-shadow: var(--shadow);
+}
+
+.map-wrap .ol-area-zoom button {
+  display: grid;
+  width: 2.0625em;
+  height: 2.0625em;
+  margin: 0;
+  padding: 0;
+  place-items: center;
+  background: linear-gradient(135deg, var(--accent) 0%, #2b9a79 100%);
+  color: #fffefb;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
+.map-wrap .ol-area-zoom button:hover,
+.map-wrap .ol-area-zoom button:focus,
+.map-wrap .ol-area-zoom button[aria-pressed="true"] {
+  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
+  color: #fff;
+  outline: 2px solid rgba(31, 122, 98, 0.35);
+  outline-offset: -2px;
+}
+
+.area-zoom-icon {
+  display: block;
+  width: 1.2em;
+  height: 1.2em;
+  filter: brightness(0) invert(1);
+}
+
+.map-wrap .ol-viewport.area-zoom-is-active {
+  cursor: crosshair;
+}
+
+.map-wrap .ol-area-zoom-box {
+  border-color: var(--accent);
+  background: rgba(31, 122, 98, 0.16);
+}
+
 /* OpenLayers hides this control while the view is north-up. */
 .map-wrap .ol-rotate {
   top: auto;
@@ -497,6 +547,11 @@ button:disabled {
     right: 12px;
   }
 
+  .map-wrap .ol-area-zoom {
+    top: 136px;
+    right: 12px;
+  }
+
   .map-wrap .ol-rotate {
     right: 12px;
     bottom: 12px;