.yd-map-content {
  padding: 16px 20px 24px;
  background: #F2F2F7;
}

.yd-map-view {
  position: relative;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border: 1px solid #d1d5db;
  margin-bottom: 14px;
}

.yd-map-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(#e5e7eb 1px, transparent 1px),
    linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.22;
}

/* 主干道：几条弯曲/斜向道路，弱化棋盘感 */
.yd-map-road {
  position: absolute;
  z-index: 3;
  background: rgba(31,41,55,0.32);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
  border-radius: 999px;
}

.yd-map-road--a {
  /* 竖向主路（偏左，不等距） */
  width: 8px;
  height: 112%;
  left: 24%;
  top: -6%;
}

.yd-map-road--b {
  /* 竖向主路（偏右） */
  width: 8px;
  height: 112%;
  left: 72%;
  top: -6%;
}

.yd-map-road--c {
  /* 横向主路（上方） */
  height: 8px;
  width: 112%;
  left: -6%;
  top: 34%;
  opacity: 0.78;
}

.yd-map-road--d {
  /* 横向主路（下方，但不贯穿，避免网格感） */
  height: 8px;
  left: -6%;
  right: 28%; /* 在竖向主路（b，72%）处“被挡住” */
  top: 68%;
  opacity: 0.78;
}

/* “转弯/支路”小段：用于形成不规则的正交路网 */
.yd-map-road-joint {
  position: absolute;
  z-index: 4;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(31,41,55,0.34);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25);
}

.yd-map-road-branch {
  position: absolute;
  z-index: 2;
  background: rgba(31,41,55,0.26);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.20);
  border-radius: 999px;
}

.yd-map-road-branch--v1 { width: 7px; height: 34%; left: 46%; top: 14%; opacity: 0.75; }
.yd-map-road-branch--h1 { height: 7px; width: 26%; left: 46%; top: 48%; opacity: 0.75; }
.yd-map-road-branch--h2 { height: 7px; width: 22%; left: 6%; top: 18%; opacity: 0.55; }
.yd-map-road-branch--v2 { width: 7px; height: 26%; left: 84%; top: 52%; opacity: 0.60; }

/* 建筑块：淡色矩形块模拟楼宇轮廓 */
.yd-map-view .yd-map-block {
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  background: rgba(148,163,184,0.22);
  border: 1px solid rgba(100,116,139,0.28);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset;
}

/* 调整楼房块：避开主干道走廊（24%/72% 竖路 & 34%/68% 横路） */
.yd-map-view .yd-map-block--a { left: 6%; top: 10%; width: 16%; height: 18%; }
.yd-map-view .yd-map-block--b { left: 78%; top: 10%; width: 16%; height: 20%; }
.yd-map-view .yd-map-block--c { left: 6%; top: 76%; width: 18%; height: 16%; }
.yd-map-view .yd-map-block--d { left: 78%; top: 74%; width: 16%; height: 16%; }

/* 楼房色块：黄色楼群 / 蓝色楼群 */
.yd-map-view .yd-map-block--yellow {
  background: rgba(250, 204, 21, 0.28);
  border-color: rgba(234, 179, 8, 0.40);
}

.yd-map-view .yd-map-block--blue {
  background: rgba(59, 130, 246, 0.20);
  border-color: rgba(37, 99, 235, 0.35);
}

/* 植被绿地：靠路边的绿色区域 */
.yd-map-view .yd-map-green {
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset;
}

/* 绿化带尽量贴近道路边缘（模拟行道树/绿化隔离带） */
.yd-map-view .yd-map-green--g1 { left: 27%; top: 6%; width: 6%; height: 58%; }
.yd-map-view .yd-map-green--g2 { left: 64%; top: 36%; width: 6%; height: 54%; }
.yd-map-view .yd-map-green--g3 { left: 30%; top: 38.5%; width: 40%; height: 7%; }

.yd-map-pin {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}

.yd-map-pin--me {
  left: 32%;
  top: 48%;
}

.yd-map-pin__dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #2563EB;
  border: 3px solid rgba(239,246,255,0.95);
  box-shadow: 0 0 0 6px rgba(37,99,235,0.18);
}

.yd-map-pin__label {
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  color: #F9FAFB;
  font-size: 11px;
}

.yd-map-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 14px 12px;
}

.yd-map-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.yd-map-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yd-map-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  background: #F9FAFB;
}

.yd-map-item__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yd-map-item__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  overflow: hidden;
}

.yd-map-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yd-map-item__name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.yd-map-item__distance {
  font-size: 13px;
  font-weight: 500;
  color: #2563EB;
}

.yd-map-card__hint {
  margin-top: 8px;
  font-size: 12px;
  color: #6B7280;
}