[data-tooltip] {
   position: relative;
   cursor: pointer;
}

[data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0,0,0,0.9);
   color: white;
   padding: 8px 12px;
   border-radius: 4px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
   z-index: 1000;
}

[data-tooltip]:hover::after {
   opacity: 1;
}

.species-preview-card {
   background: white;
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   z-index: 1000;
}