.nearby-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;
  overflow: hidden;
}

/* 主导航栏：与胶囊等高，右侧避让胶囊 */
.navbar {
  display: flex;
  align-items: center;
  padding-left: 28rpx;
  flex-shrink: 0;
  box-sizing: border-box;
  background: #ffffff;
}

/* 次级菜单栏：胶囊下方，全宽 */
.subbar {
  display: flex;
  align-items: center;
  padding: 8rpx 28rpx 16rpx;
  gap: 16rpx;
  flex-shrink: 0;
  background: #ffffff;
}

.topbar-logo {
  font-size: 46rpx;
  font-weight: 800;
  letter-spacing: -0.5rpx;
  color: #2b2438;
  flex-shrink: 0;
}

.logo-accent {
  background: linear-gradient(120deg, #ff2d6e, #ff7a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.view-toggle {
  flex: 1;
  display: flex;
  background: var(--glass);
  backdrop-filter: blur(28rpx) saturate(170%);
  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
  border-radius: 999rpx;
  padding: 6rpx;
  gap: 4rpx;
  border: 1rpx solid var(--glass-edge);
}

.toggle-btn {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  font-weight: 700;
  color: #a59cb5;
  padding: 12rpx 0;
  border-radius: 999rpx;
  transition: all 0.2s ease;
}

.toggle-active {
  background: rgba(255, 255, 255, 0.85);
  color: #2b2438;
  font-weight: 900;
  box-shadow: 0 8rpx 18rpx rgba(120, 70, 140, 0.14);
}

.topbar-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 26rpx;
  background: var(--glass);
  backdrop-filter: blur(28rpx) saturate(170%);
  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
  border: 1rpx solid var(--glass-edge);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #6e6480;
}

/* 地图 */
.map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

/* 地图控件 */
.map-controls {
  position: absolute;
  right: 24rpx;
  bottom: 300rpx;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
  z-index: 10;
}

.map-ctrl-btn {
  width: 76rpx;
  height: 76rpx;
  background: var(--glass-strong);
  backdrop-filter: blur(34rpx) saturate(180%);
  -webkit-backdrop-filter: blur(34rpx) saturate(180%);
  border: 1rpx solid var(--glass-edge);
  border-radius: 26rpx;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 800;
  color: #1f9bff;
}

/* 宠物弹窗 */
.pet-popup {
  position: absolute;
  bottom: 300rpx;
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-strong);
  backdrop-filter: blur(34rpx) saturate(180%);
  -webkit-backdrop-filter: blur(34rpx) saturate(180%);
  border: 1rpx solid var(--glass-edge);
  border-radius: 36rpx;
  padding: 22rpx 26rpx;
  display: flex;
  align-items: center;
  gap: 18rpx;
  box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
  min-width: 520rpx;
  z-index: 20;
}

.popup-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  flex-shrink: 0;
}

.popup-info { flex: 1; }

.popup-name {
  display: block;
  font-size: 28rpx;
  font-weight: 800;
  color: #2b2438;
}

.popup-sub {
  display: block;
  font-size: 22rpx;
  color: #a59cb5;
  margin-top: 4rpx;
}

.popup-hi {
  padding: 16rpx 24rpx;
  font-size: 24rpx;
  font-weight: 800;
  border-radius: 999rpx;
  flex-shrink: 0;
}

/* 在线数角标 */
.online-badge {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  background: var(--glass-strong);
  backdrop-filter: blur(28rpx) saturate(170%);
  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
  border: 1rpx solid var(--glass-edge);
  border-radius: 999rpx;
  padding: 10rpx 22rpx;
  font-size: 22rpx;
  font-weight: 800;
  color: #ff2d6e;
  box-shadow: var(--shadow-soft);
  z-index: 10;
}

/* 底部预览条 */
.map-preview-list {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  background: var(--glass-strong);
  backdrop-filter: blur(34rpx) saturate(180%);
  -webkit-backdrop-filter: blur(34rpx) saturate(180%);
  border-top: 1rpx solid var(--glass-edge);
  padding: 20rpx 0;
}

.preview-scroll {
  white-space: nowrap;
  padding: 0 24rpx;
}

.preview-card {
  display: inline-flex;
  align-items: center;
  gap: 12rpx;
  background: rgba(255, 255, 255, 0.50);
  border: 1rpx solid rgba(255, 255, 255, 0.72);
  border-radius: 26rpx;
  padding: 14rpx 18rpx;
  margin-right: 16rpx;
  box-shadow: 0 12rpx 26rpx rgba(120, 70, 140, 0.12);
}

.preview-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  flex-shrink: 0;
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.preview-name {
  font-size: 26rpx;
  font-weight: 800;
  color: #2b2438;
}

.preview-dist {
  font-size: 20rpx;
  color: #1f9bff;
  font-weight: 700;
}

/* 列表视图 */
.list-scroll {
  flex: 1;
  background: #ffffff;
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx 18rpx;
}

.list-title {
  font-size: 32rpx;
  font-weight: 800;
  color: #2b2438;
}

.online-chip {
  font-size: 24rpx;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
  border-radius: 999rpx;
  padding: 10rpx 22rpx;
  box-shadow: 0 12rpx 24rpx rgba(255, 45, 110, 0.30);
}

/* 列表项 */
.nearby-item {
  display: flex;
  align-items: center;
  gap: 18rpx;
  background: var(--glass);
  backdrop-filter: blur(28rpx) saturate(170%);
  -webkit-backdrop-filter: blur(28rpx) saturate(170%);
  border: 1rpx solid var(--glass-edge);
  border-radius: 48rpx;
  margin: 0 28rpx 20rpx;
  padding: 22rpx;
  box-shadow: var(--shadow-soft), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
}

.nearby-avatar {
  width: 92rpx;
  height: 92rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  flex-shrink: 0;
  border: 3rpx solid rgba(255, 255, 255, 0.8);
}

.avatar-emoji { font-size: 40rpx; line-height: 1; }

.nearby-info { flex: 1; min-width: 0; }

.nearby-name-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 6rpx;
}

.nearby-pet-name {
  font-size: 28rpx;
  font-weight: 800;
  color: #2b2438;
}

.breed-chip {
  font-size: 20rpx;
  font-weight: 800;
  color: #fff;
  background: #ff2d6e;
  border-radius: 999rpx;
  padding: 4rpx 14rpx;
}

.nearby-sub {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 22rpx;
  color: #a59cb5;
}

.online-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: #00d9a0;
  flex-shrink: 0;
  box-shadow: 0 0 0 4rpx rgba(0, 217, 160, 0.18);
}

.nearby-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10rpx;
  flex-shrink: 0;
}

.dist-text {
  font-size: 22rpx;
  font-weight: 800;
  color: #1f9bff;
}

.say-hi {
  background: linear-gradient(135deg, #ff2d6e, #ff7a1a);
  border: 1.5rpx solid rgba(255, 255, 255, 0.7);
  border-radius: 999rpx;
  padding: 14rpx 26rpx;
  font-size: 22rpx;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 14rpx 28rpx rgba(255, 45, 110, 0.32);
  transition: transform 0.18s ease;
}

.say-hi:active {
  transform: scale(0.94);
}

/* 骨架 */
.nearby-skeleton {
  height: 128rpx;
  background: linear-gradient(90deg, #f0eef5 25%, #e8e4f0 50%, #f0eef5 75%);
  background-size: 200% 100%;
  animation: shine 1.4s infinite;
  border-radius: 40rpx;
  margin: 0 28rpx 20rpx;
}

@keyframes shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 空态 */
.empty-nearby {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 60rpx;
  gap: 16rpx;
}

.empty-emoji { font-size: 80rpx; }

.empty-title {
  font-size: 34rpx;
  font-weight: 900;
  color: #2b2438;
}

.empty-desc {
  font-size: 26rpx;
  color: #a59cb5;
  text-align: center;
  line-height: 1.6;
}