.vm-button,
.vm-panel,
.vm-map-card,
.vm-dialog form,
.vm-map-info,
.vm-feature-editor,
.vm-layer-studio,
.vm-toast,
.vm-loading {
  border-radius: var(--v-ui-radius-sm);
}

.vm-topbar,
.vm-panel,
.vm-dialog form,
.vm-map-info,
.vm-feature-editor,
.vm-layer-studio {
  font-family: var(--font-ui);
}

.vm-app button,
.vm-app input,
.vm-app select,
.vm-app textarea {
  font-family: var(--font-ui) !important;
}

.maplibregl-map,
.maplibregl-canvas {
  font-family: var(--font-ui);
}

.maplibregl-map,
.maplibregl-canvas-container,
.maplibregl-canvas {
  pointer-events: none;
}

#map.vm-is-drawing .leaflet-pane,
#map.vm-is-drawing .leaflet-pane * {
  pointer-events: none !important;
}

#map.vm-is-drawing .leaflet-marker-pane .leaflet-mouse-marker,
#map.vm-is-drawing .leaflet-marker-pane .leaflet-editing-icon {
  pointer-events: auto !important;
}

.maplibregl-canvas {
  outline: 0;
}

.vm-read-only,
.vm-studio-note {
  margin: 10px 0 0;
  color: #9ca69f;
  font-size: 9px;
  line-height: 1.7;
}

.vm-history-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.vm-history-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(247, 241, 229, .1);
  border-radius: var(--v-ui-radius-sm);
  background: rgba(247, 241, 229, .035);
}

.vm-history-list time {
  direction: ltr;
  color: var(--gold);
  font-size: 8px;
  unicode-bidi: isolate;
}

.vm-history-list strong,
.vm-history-list small {
  display: block;
}

.vm-history-list strong {
  color: var(--paper-2);
  font-size: 9px;
}

.vm-history-list small {
  margin-top: 2px;
  color: #8d968e;
  font-size: 8px;
}

.vm-layer-studio {
  position: absolute;
  z-index: 700;
  inset-block-start: 22px;
  inset-inline-start: 22px;
  width: min(390px, calc(100% - 44px));
  max-height: calc(100% - 44px);
  padding: 23px;
  overflow-y: auto;
  color: var(--paper-2);
  border: 1px solid rgba(247, 241, 229, .12);
  background:
    radial-gradient(circle at 12% 0, rgba(199, 164, 87, .14), transparent 32%),
    rgba(18, 27, 24, .97);
  box-shadow: var(--v-ui-shadow);
  backdrop-filter: blur(16px);
}

.vm-layer-studio__close {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  width: 36px;
  height: 36px;
  color: #aab2ab;
  border: 0;
  background: transparent;
  font-size: 24px;
}

.vm-layer-studio h2 {
  margin: 0;
  padding-inline-end: 28px;
  font-size: 20px;
}

.vm-layer-studio > p:not(.vm-kicker) {
  color: #aab2ab;
  font-size: 10px;
  line-height: 1.75;
}

.vm-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 10px;
  margin-top: 15px;
}

.vm-studio-grid label,
.vm-summary-field {
  display: grid;
  gap: 6px;
  color: #9ea79f;
  font-size: 9px;
}

.vm-studio-grid select,
.vm-studio-grid input,
.vm-summary-field textarea {
  min-height: 42px;
  width: 100%;
  padding: 9px 10px;
  color: var(--paper-2);
  border: 1px solid rgba(247, 241, 229, .16);
  border-radius: var(--v-ui-radius-sm);
  background: rgba(247, 241, 229, .06);
}

.vm-studio-grid option {
  color: var(--ink);
}

.vm-studio-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.vm-studio-actions .vm-button {
  min-height: 44px;
  padding-inline: 8px;
  font-size: 9px;
}

.vm-studio-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#editGeometryButton[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.vm-layer-manager {
  display: grid;
  gap: 7px;
  margin: 13px 0;
}

.vm-managed-layer {
  display: grid;
  grid-template-columns: 18px 18px 5px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgba(247, 241, 229, .1);
  border-radius: var(--v-ui-radius-sm);
  background: rgba(247, 241, 229, .035);
}

.vm-managed-layer input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--signal);
}

.vm-managed-layer i {
  width: 5px;
  height: 27px;
  border-radius: 4px;
  background: var(--managed-color);
}

.vm-managed-layer strong,
.vm-managed-layer small {
  display: block;
}

.vm-managed-layer strong {
  font-size: 10px;
}

.vm-managed-layer small {
  color: #8e9890;
  font-size: 8px;
}

.vm-summary-field {
  margin-top: 12px;
}

.vm-summary-field textarea {
  resize: vertical;
}

.vm-measure-control {
  display: grid;
  width: 190px;
  padding: 7px;
  border-radius: var(--v-ui-radius-sm);
  background: rgba(247, 241, 229, .96);
  box-shadow: 0 3px 14px rgba(15, 23, 20, .18);
}

.vm-measure-control button {
  min-height: 36px;
  padding: 7px 9px;
  color: var(--ink);
  border: 1px solid rgba(23, 33, 30, .16);
  border-radius: var(--v-ui-radius-sm);
  background: #fffaf0;
  font-size: 10px;
  font-weight: 700;
}

.vm-measure-control button[aria-pressed="true"] {
  color: #fff8ec;
  border-color: var(--signal);
  background: var(--signal);
}

.vm-measure-control output {
  min-height: 24px;
  padding: 5px 4px 0;
  color: #56625d;
  direction: ltr;
  font-size: 9px;
  text-align: center;
  unicode-bidi: isolate;
}

.vm-measure-line {
  stroke-dasharray: 8 7;
}

.vm-layer-row {
  border-radius: var(--v-ui-radius-sm);
}

.vm-layer-row:hover {
  background: rgba(247, 241, 229, .045);
}

.vm-layer-row input:disabled {
  opacity: .5;
}

.vm-vector-status {
  color: #7f8a83;
  font-size: 8px;
}

@media (max-width: 760px) {
  .vm-layer-studio {
    inset-block-start: auto;
    inset-inline: 12px;
    bottom: 12px;
    width: auto;
    max-height: min(70dvh, 620px);
    padding: 20px;
  }

  .vm-studio-grid {
    grid-template-columns: 1fr;
  }

  .vm-studio-actions {
    grid-template-columns: 1fr;
  }

  .vm-measure-control {
    width: 154px;
  }

  .vm-history-list li {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .vm-layer-studio {
    inset-inline: 8px;
    bottom: 8px;
  }

  .vm-managed-layer {
    grid-template-columns: 18px 18px 4px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vm-layer-studio,
  .vm-history-list li {
    animation: none !important;
    transition: none !important;
  }
}