body { font-family: Inter, sans-serif; }

.tool-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 3px 12px rgba(0,0,0,.04);
}

/* ── Mode buttons ── */
.mode-btn {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.mode-btn.active {
  background: #fff;
  color: #065f46;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Reverb toggle ── */
.reverb-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 1px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
}
.reverb-btn {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.reverb-btn.active {
  background: #fff;
  color: #065f46;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Handpan canvas wrap ── */
.handpan-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}

#handpanCanvas {
  display: block;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  max-width: 100%;
}

/* ── Ripple ── */
.tone-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 50;
  border: 2px solid rgba(255,200,80,0.7);
  animation: toneRip 0.55s ease-out forwards;
}
@keyframes toneRip {
  from { transform: scale(0.3); opacity: 1; }
  to   { transform: scale(2.5); opacity: 0; }
}

tbody tr:nth-child(even) { background: #f9fafb; }