.map-placeholder {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--brand-700);
    position: relative;
    overflow: hidden;
  }
  .map-placeholder::before {
    content: '';
    position: absolute; inset: 0;
    background-image: 
      linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .map-marker {
    position: absolute;
    width: 40px; height: 40px;
    background: var(--danger-500);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.25s;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.875rem;
  }
  .map-marker:hover { transform: rotate(-45deg) scale(1.15); }
  .map-marker i { transform: rotate(45deg); }
  .map-marker.brand { background: var(--brand-500); }
  .map-marker.success { background: var(--success-500); }
  .map-marker.action { background: var(--action-500); }
  .map-user-location {
    position: absolute;
    width: 20px; height: 20px;
    background: var(--brand-500);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2);
    animation: pulse-location 2s infinite;
  }
  @keyframes pulse-location {
    0%, 100% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.2); }
    50% { box-shadow: 0 0 0 16px rgba(59, 130, 246, 0.1); }
  }