.tooltip {
  --tooltip-color: #00f0ff;
  position: relative;
  display: inline-block;
}

.cyan { --tooltip-color: #00f0ff; }
.pink { --tooltip-color: #ff00ff; }
.green { --tooltip-color: #00ff88; }

.content {
  position: absolute;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono, 'Share Tech Mono', monospace);
  font-size: 0.75rem;
  color: #fff;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid var(--tooltip-color);
  box-shadow: 0 0 10px var(--tooltip-color);
  white-space: nowrap;
  animation: tooltip-appear 0.2s ease-out;
}

@keyframes tooltip-appear {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.top .content {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
}

.bottom .content {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
}

.arrow {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(10, 10, 15, 0.95);
  border: 1px solid var(--tooltip-color);
  transform: rotate(45deg);
}

.top .arrow {
  bottom: -0.3rem;
  left: 50%;
  margin-left: -0.25rem;
  border-top: none;
  border-left: none;
}

.bottom .arrow {
  top: -0.3rem;
  left: 50%;
  margin-left: -0.25rem;
  border-bottom: none;
  border-right: none;
}